@burdenoff/fe-libs 2026.1021.6 → 2026.1021.7

package/dist/chrome/ThemePreferences.js

@@ -1,20 +1,20 @@
-import { Button as e } from "../ui/button.js";
-import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../ui/select.js";
-import { Badge as o } from "../ui/badge.js";
-import { Card as s, CardContent as c, CardDescription as l, CardHeader as u, CardTitle as d } from "../ui/card.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { Button as t } from "../ui/button.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../ui/select.js";
+import { Badge as s } from "../ui/badge.js";
+import { Card as c, CardContent as l, CardDescription as u, CardHeader as d, CardTitle as f } from "../ui/card.js";
 import { Input as ee } from "../ui/input.js";
-import { Label as f } from "../ui/label.js";
-import { THEME_OPTIONS as p, useTheme as m } from "../shared/providers/shell/ThemeProvider.js";
+import { Label as p } from "../ui/label.js";
+import { THEME_OPTIONS as m, useTheme as te } from "../shared/providers/shell/ThemeProvider.js";
 import { Switch as h } from "../ui/switch.js";
-import { useShellLabel as te } from "../shared/providers/shell/useShellLabel.js";
 import { useThemeOptionLabels as ne } from "./useThemeOptionLabels.js";
 import { cn as g } from "../utils/cn.js";
 import "../utils/index.js";
 import { useCallback as _, useId as v, useMemo as y, useState as b } from "react";
-import { Check as x, Palette as S, Pencil as re, Plus as C, Trash2 as ie, X as w } from "lucide-react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { Check as x, Palette as S, Pencil as C, Plus as re, Trash2 as w, X as T } from "lucide-react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/chrome/ThemePreferences.tsx
-var D = [
+var O = [
 	{
 		name: "Blue",
 		varName: "--color-accent-blue"
@@ -31,7 +31,7 @@ var D = [
 		name: "Indigo",
 		varName: "--color-accent-indigo"
 	}
-], O = [
+], k = [
 	{
 		value: "compact",
 		label: "Compact"
@@ -44,7 +44,7 @@ var D = [
 		value: "spacious",
 		label: "Spacious"
 	}
-], k = [
+], ie = [
 	{
 		value: "small",
 		label: "Small"
@@ -71,10 +71,10 @@ var D = [
 		label: "Full"
 	}
 ], A = (e) => e === "dark" ? "bg-bg-sunken" : "bg-bg-surface";
-function j({ className: t, showCustomThemes: n = !0 }) {
-	let r = te(), i = ne(), { mode: a, density: v, typography: w, glass: j, reduceMotion: F, resolvedThemeName: oe, setMode: se, setDensity: ce, setTypography: le, setGlass: ue, setReduceMotion: de, customThemes: I, activeCustomId: L, createCustomTheme: R, updateCustomTheme: z, deleteCustomTheme: fe, applyCustomTheme: B } = m(), [V, H] = b(!1), [U, pe] = b(() => r("themeSwitcher.myTheme", "My theme")), [W, me] = b("light"), [G, he] = b("#6366F1"), [K, ge] = b("comfortable"), [q, _e] = b("default"), [J, ve] = b("full"), [Y, ye] = b(!1), [X, Z] = b(null), [Q, be] = b(""), xe = _(() => H(!0), []), Se = _(() => {
+function j({ className: n, showCustomThemes: r = !0 }) {
+	let i = e(), a = ne(), { mode: o, density: v, typography: T, glass: j, reduceMotion: F, resolvedThemeName: oe, setMode: se, setDensity: ce, setTypography: le, setGlass: ue, setReduceMotion: de, customThemes: I, activeCustomId: L, createCustomTheme: R, updateCustomTheme: z, deleteCustomTheme: fe, applyCustomTheme: B } = te(), [V, H] = b(!1), [U, pe] = b(() => i("themeSwitcher.myTheme", "My theme")), [W, me] = b("light"), [G, he] = b("#6366F1"), [K, ge] = b("comfortable"), [q, _e] = b("default"), [J, ve] = b("full"), [Y, ye] = b(!1), [X, Z] = b(null), [Q, be] = b(""), xe = _(() => H(!0), []), Se = _(() => {
 		B(R({
-			name: U.trim() || r("themeSwitcher.untitled", "Untitled theme"),
+			name: U.trim() || i("themeSwitcher.untitled", "Untitled theme"),
 			base: W,
 			accent: G,
 			density: K,
@@ -92,16 +92,16 @@ function j({ className: t, showCustomThemes: n = !0 }) {
 		Y,
 		R,
 		B,
-		r
+		i
 	]), Ce = _((e) => {
 		Z(e.id), be(e.name);
 	}, []), we = _(() => {
-		X && z(X, { name: Q.trim() || r("themeSwitcher.untitled", "Untitled theme") }), Z(null);
+		X && z(X, { name: Q.trim() || i("themeSwitcher.untitled", "Untitled theme") }), Z(null);
 	}, [
 		X,
 		Q,
 		z,
-		r
+		i
 	]), $ = y(() => V ? {
 		theme: W,
 		density: K,
@@ -110,7 +110,7 @@ function j({ className: t, showCustomThemes: n = !0 }) {
 	} : {
 		theme: oe,
 		density: v,
-		typography: w,
+		typography: T,
 		glass: j
 	}, [
 		V,
@@ -120,124 +120,124 @@ function j({ className: t, showCustomThemes: n = !0 }) {
 		J,
 		oe,
 		v,
-		w,
+		T,
 		j
 	]);
-	return /* @__PURE__ */ E("div", {
-		className: g("flex flex-col gap-6", t),
+	return /* @__PURE__ */ D("div", {
+		className: g("flex flex-col gap-6", n),
 		children: [
-			n && /* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ E(d, {
+			r && /* @__PURE__ */ D(c, { children: [/* @__PURE__ */ D(d, { children: [/* @__PURE__ */ D(f, {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ T(S, {
+				children: [/* @__PURE__ */ E(S, {
 					className: "size-4 text-text-secondary",
 					"aria-hidden": "true"
-				}), r("themeSwitcher.label", "Theme")]
-			}), /* @__PURE__ */ T(l, { children: r("themeSwitcher.description", "Pick a built-in theme or one of your saved custom themes.") })] }), /* @__PURE__ */ T(c, { children: /* @__PURE__ */ E("div", {
+				}), i("themeSwitcher.label", "Theme")]
+			}), /* @__PURE__ */ E(u, { children: i("themeSwitcher.description", "Pick a built-in theme or one of your saved custom themes.") })] }), /* @__PURE__ */ E(l, { children: /* @__PURE__ */ D("div", {
 				role: "radiogroup",
-				"aria-label": r("themeSwitcher.label", "Theme"),
+				"aria-label": i("themeSwitcher.label", "Theme"),
 				className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4",
 				children: [
-					p.map((e) => /* @__PURE__ */ T(M, {
-						label: i.themes[e.value],
+					m.map((e) => /* @__PURE__ */ E(M, {
+						label: a.themes[e.value],
 						family: e.family,
-						active: a === e.value,
+						active: o === e.value,
 						onSelect: () => se(e.value)
 					}, e.value)),
-					I.map((e) => /* @__PURE__ */ T(M, {
+					I.map((e) => /* @__PURE__ */ E(M, {
 						label: e.name,
 						family: e.base,
 						accent: e.accent,
-						active: a === "custom" && L === e.id,
+						active: o === "custom" && L === e.id,
 						onSelect: () => B(e.id)
 					}, e.id)),
-					/* @__PURE__ */ E("button", {
+					/* @__PURE__ */ D("button", {
 						type: "button",
 						onClick: xe,
 						className: "flex min-h-[5.5rem] flex-col items-center justify-center gap-1 rounded-card border border-dashed border-border-default bg-bg-surface text-text-secondary transition-colors hover:border-border-strong hover:bg-bg-sunken hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
-						children: [/* @__PURE__ */ T(C, {
+						children: [/* @__PURE__ */ E(re, {
 							className: "size-5",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ T("span", {
+						}), /* @__PURE__ */ E("span", {
 							className: "text-xs font-medium",
-							children: r("themeSwitcher.newTheme", "New theme")
+							children: i("themeSwitcher.newTheme", "New theme")
 						})]
 					})
 				]
 			}) })] }),
-			/* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(d, { children: r("themeSwitcher.accent", "Accent") }), /* @__PURE__ */ T(l, { children: r("themeSwitcher.accentHelp", "Accent color retints buttons, links, and highlights across the app.") })] }), /* @__PURE__ */ T(c, { children: /* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D(c, { children: [/* @__PURE__ */ D(d, { children: [/* @__PURE__ */ E(f, { children: i("themeSwitcher.accent", "Accent") }), /* @__PURE__ */ E(u, { children: i("themeSwitcher.accentHelp", "Accent color retints buttons, links, and highlights across the app.") })] }), /* @__PURE__ */ E(l, { children: /* @__PURE__ */ D("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [D.map((e) => /* @__PURE__ */ E("div", {
+				children: [O.map((e) => /* @__PURE__ */ D("div", {
 					className: "flex flex-col items-center gap-1.5",
-					children: [/* @__PURE__ */ T("span", {
+					children: [/* @__PURE__ */ E("span", {
 						className: "size-9 rounded-full border border-border-seam shadow-elevation-1",
 						style: { backgroundColor: `var(${e.varName})` },
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ T("span", {
+					}), /* @__PURE__ */ E("span", {
 						className: "text-xs text-text-secondary",
-						children: i.accents[e.name] ?? e.name
+						children: a.accents[e.name] ?? e.name
 					})]
-				}, e.name)), /* @__PURE__ */ E(e, {
+				}, e.name)), /* @__PURE__ */ D(t, {
 					type: "button",
 					variant: "outline",
 					size: "sm",
 					onClick: xe,
 					className: "ml-1",
-					children: [/* @__PURE__ */ T(S, {
+					children: [/* @__PURE__ */ E(S, {
 						className: "size-4",
 						"aria-hidden": "true"
-					}), r("themeSwitcher.customAccent", "Custom accent")]
+					}), i("themeSwitcher.customAccent", "Custom accent")]
 				})]
 			}) })] }),
-			/* @__PURE__ */ T(N, {
-				title: r("themeSwitcher.density", "Density"),
-				description: r("themeSwitcher.densityHelp", "Spacing and control sizing throughout the interface."),
+			/* @__PURE__ */ E(N, {
+				title: i("themeSwitcher.density", "Density"),
+				description: i("themeSwitcher.densityHelp", "Spacing and control sizing throughout the interface."),
 				value: v,
-				options: O.map((e) => ({
+				options: k.map((e) => ({
 					...e,
-					label: i.density[e.value]
+					label: a.density[e.value]
 				})),
 				onChange: ce
 			}),
-			/* @__PURE__ */ T(N, {
-				title: r("themeSwitcher.typography", "Typography"),
-				description: r("themeSwitcher.typographyHelp", "Base font scale for text across the app."),
-				value: w,
-				options: k.map((e) => ({
+			/* @__PURE__ */ E(N, {
+				title: i("themeSwitcher.typography", "Typography"),
+				description: i("themeSwitcher.typographyHelp", "Base font scale for text across the app."),
+				value: T,
+				options: ie.map((e) => ({
 					...e,
-					label: i.typography[e.value]
+					label: a.typography[e.value]
 				})),
 				onChange: le
 			}),
-			/* @__PURE__ */ T(N, {
-				title: r("themeSwitcher.glassIntensity", "Glass intensity"),
-				description: r("themeSwitcher.glassHelp", "Strength of the frosted-glass blur on elevated surfaces."),
+			/* @__PURE__ */ E(N, {
+				title: i("themeSwitcher.glassIntensity", "Glass intensity"),
+				description: i("themeSwitcher.glassHelp", "Strength of the frosted-glass blur on elevated surfaces."),
 				value: j,
 				options: ae.map((e) => ({
 					...e,
-					label: i.glass[e.value]
+					label: a.glass[e.value]
 				})),
 				onChange: ue
 			}),
-			/* @__PURE__ */ T(s, { children: /* @__PURE__ */ E(c, {
+			/* @__PURE__ */ E(c, { children: /* @__PURE__ */ D(l, {
 				className: "flex items-center justify-between gap-4 pt-6",
-				children: [/* @__PURE__ */ E("div", {
+				children: [/* @__PURE__ */ D("div", {
 					className: "flex flex-col",
-					children: [/* @__PURE__ */ T(f, {
+					children: [/* @__PURE__ */ E(p, {
 						htmlFor: "theme-reduce-motion",
 						className: "text-sm font-medium text-text-primary",
-						children: r("themeSwitcher.reduceMotion", "Reduce motion")
-					}), /* @__PURE__ */ T("span", {
+						children: i("themeSwitcher.reduceMotion", "Reduce motion")
+					}), /* @__PURE__ */ E("span", {
 						className: "text-xs text-text-secondary",
-						children: r("themeSwitcher.motionHelp", "Minimize animations and transitions across the app.")
+						children: i("themeSwitcher.motionHelp", "Minimize animations and transitions across the app.")
 					})]
-				}), /* @__PURE__ */ T(h, {
+				}), /* @__PURE__ */ E(h, {
 					id: "theme-reduce-motion",
 					checked: F,
 					onCheckedChange: de,
-					"aria-label": r("themeSwitcher.reduceMotion", "Reduce motion")
+					"aria-label": i("themeSwitcher.reduceMotion", "Reduce motion")
 				})]
 			}) }),
-			n && V && /* @__PURE__ */ T(P, {
+			r && V && /* @__PURE__ */ E(P, {
 				name: U,
 				base: W,
 				accent: G,
@@ -255,68 +255,68 @@ function j({ className: t, showCustomThemes: n = !0 }) {
 				onSave: Se,
 				onCancel: () => H(!1)
 			}),
-			n && I.length > 0 && /* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(d, { children: r("themeSwitcher.savedThemes", "Saved themes") }), /* @__PURE__ */ T(l, { children: r("themeSwitcher.savedThemesHelp", "Apply, rename, or remove your custom themes.") })] }), /* @__PURE__ */ T(c, { children: /* @__PURE__ */ T("ul", {
+			r && I.length > 0 && /* @__PURE__ */ D(c, { children: [/* @__PURE__ */ D(d, { children: [/* @__PURE__ */ E(f, { children: i("themeSwitcher.savedThemes", "Saved themes") }), /* @__PURE__ */ E(u, { children: i("themeSwitcher.savedThemesHelp", "Apply, rename, or remove your custom themes.") })] }), /* @__PURE__ */ E(l, { children: /* @__PURE__ */ E("ul", {
 				className: "flex flex-col divide-y divide-border-subtle",
-				children: I.map((t) => {
-					let n = a === "custom" && L === t.id;
-					return /* @__PURE__ */ E("li", {
+				children: I.map((e) => {
+					let n = o === "custom" && L === e.id;
+					return /* @__PURE__ */ D("li", {
 						className: "flex flex-wrap items-center gap-3 py-3 first:pt-0 last:pb-0",
 						children: [
-							/* @__PURE__ */ T("span", {
+							/* @__PURE__ */ E("span", {
 								className: "size-6 rounded-full border border-border-seam",
-								style: { backgroundColor: t.accent },
+								style: { backgroundColor: e.accent },
 								"aria-hidden": "true"
 							}),
-							X === t.id ? /* @__PURE__ */ T(ee, {
+							X === e.id ? /* @__PURE__ */ E(ee, {
 								autoFocus: !0,
 								value: Q,
-								"aria-label": r("themeSwitcher.themeName", "Theme name"),
+								"aria-label": i("themeSwitcher.themeName", "Theme name"),
 								onChange: (e) => be(e.target.value),
 								onBlur: we,
 								onKeyDown: (e) => {
 									e.key === "Enter" && we(), e.key === "Escape" && Z(null);
 								},
 								className: "h-8 w-44"
-							}) : /* @__PURE__ */ E("span", {
+							}) : /* @__PURE__ */ D("span", {
 								className: "flex flex-1 items-center gap-2 text-sm text-text-primary",
-								children: [t.name, n && /* @__PURE__ */ E(o, {
+								children: [e.name, n && /* @__PURE__ */ D(s, {
 									variant: "success",
 									className: "gap-1",
-									children: [/* @__PURE__ */ T(x, {
+									children: [/* @__PURE__ */ E(x, {
 										className: "size-3",
 										"aria-hidden": "true"
-									}), r("common.status.active", "Active")]
+									}), i("common.status.active", "Active")]
 								})]
 							}),
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ D("div", {
 								className: "ml-auto flex items-center gap-1",
 								children: [
-									/* @__PURE__ */ T(e, {
+									/* @__PURE__ */ E(t, {
 										type: "button",
 										variant: "outline",
 										size: "sm",
 										disabled: n,
-										onClick: () => B(t.id),
-										children: r("themeSwitcher.apply", "Apply")
+										onClick: () => B(e.id),
+										children: i("themeSwitcher.apply", "Apply")
 									}),
-									/* @__PURE__ */ T(e, {
+									/* @__PURE__ */ E(t, {
 										type: "button",
 										variant: "ghost",
 										size: "icon-sm",
-										"aria-label": r("themeSwitcher.renameNamed", "Rename {{name}}", { name: t.name }),
-										onClick: () => Ce(t),
-										children: /* @__PURE__ */ T(re, {
+										"aria-label": i("themeSwitcher.renameNamed", "Rename {{name}}", { name: e.name }),
+										onClick: () => Ce(e),
+										children: /* @__PURE__ */ E(C, {
 											className: "size-4",
 											"aria-hidden": "true"
 										})
 									}),
-									/* @__PURE__ */ T(e, {
+									/* @__PURE__ */ E(t, {
 										type: "button",
 										variant: "ghost",
 										size: "icon-sm",
-										"aria-label": r("themeSwitcher.deleteNamed", "Delete {{name}}", { name: t.name }),
-										onClick: () => fe(t.id),
-										children: /* @__PURE__ */ T(ie, {
+										"aria-label": i("themeSwitcher.deleteNamed", "Delete {{name}}", { name: e.name }),
+										onClick: () => fe(e.id),
+										children: /* @__PURE__ */ E(w, {
 											className: "size-4 text-action-danger-bg",
 											"aria-hidden": "true"
 										})
@@ -324,92 +324,92 @@ function j({ className: t, showCustomThemes: n = !0 }) {
 								]
 							})
 						]
-					}, t.id);
+					}, e.id);
 				})
 			}) })] }),
-			/* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(d, { children: r("common.markdownEditor.preview", "Preview") }), /* @__PURE__ */ T(l, { children: r("themeSwitcher.previewHelp", "A scoped preview of the candidate theme — applies only here until you select it.") })] }), /* @__PURE__ */ T(c, { children: /* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D(c, { children: [/* @__PURE__ */ D(d, { children: [/* @__PURE__ */ E(f, { children: i("common.markdownEditor.preview", "Preview") }), /* @__PURE__ */ E(u, { children: i("themeSwitcher.previewHelp", "A scoped preview of the candidate theme — applies only here until you select it.") })] }), /* @__PURE__ */ E(l, { children: /* @__PURE__ */ D("div", {
 				"data-theme": $.theme,
 				"data-density": $.density,
 				"data-typography": $.typography,
 				"data-glass": $.glass,
-				className: g("flex flex-col gap-4 rounded-card border border-border-seam p-4", A(p.find((e) => e.value === $.theme)?.family ?? "light")),
+				className: g("flex flex-col gap-4 rounded-card border border-border-seam p-4", A(m.find((e) => e.value === $.theme)?.family ?? "light")),
 				children: [
-					/* @__PURE__ */ E("div", {
+					/* @__PURE__ */ D("div", {
 						className: "flex flex-wrap items-center gap-2",
 						children: [
-							/* @__PURE__ */ T(e, {
+							/* @__PURE__ */ E(t, {
 								type: "button",
 								size: "sm",
-								children: r("notifications.actionStyle.primary", "Primary")
+								children: i("notifications.actionStyle.primary", "Primary")
 							}),
-							/* @__PURE__ */ T(e, {
+							/* @__PURE__ */ E(t, {
 								type: "button",
 								variant: "secondary",
 								size: "sm",
-								children: r("notifications.actionStyle.secondary", "Secondary")
+								children: i("notifications.actionStyle.secondary", "Secondary")
 							}),
-							/* @__PURE__ */ T(e, {
+							/* @__PURE__ */ E(t, {
 								type: "button",
 								variant: "outline",
 								size: "sm",
-								children: r("themeSwitcher.outline", "Outline")
+								children: i("themeSwitcher.outline", "Outline")
 							}),
-							/* @__PURE__ */ T(e, {
+							/* @__PURE__ */ E(t, {
 								type: "button",
 								variant: "ghost",
 								size: "sm",
-								children: r("themeSwitcher.ghost", "Ghost")
+								children: i("themeSwitcher.ghost", "Ghost")
 							})
 						]
 					}),
-					/* @__PURE__ */ E("div", {
+					/* @__PURE__ */ D("div", {
 						className: "rounded-card border border-border-seam bg-[var(--color-surface-glass)] p-4 shadow-[var(--shadow-pop)] backdrop-blur-[var(--blur-glass)]",
 						children: [
-							/* @__PURE__ */ T("p", {
+							/* @__PURE__ */ E("p", {
 								className: "text-xs font-medium text-text-secondary",
-								children: r("themeSwitcher.activeSessions", "Active sessions")
+								children: i("themeSwitcher.activeSessions", "Active sessions")
 							}),
-							/* @__PURE__ */ T("p", {
+							/* @__PURE__ */ E("p", {
 								className: "mt-1 text-2xl font-semibold text-text-primary",
 								children: "1,284"
 							}),
-							/* @__PURE__ */ T("p", {
+							/* @__PURE__ */ E("p", {
 								className: "mt-1 text-xs text-status-success-text",
-								children: r("themeSwitcher.previewTrend", "+12.4% this week")
+								children: i("themeSwitcher.previewTrend", "+12.4% this week")
 							})
 						]
 					}),
-					/* @__PURE__ */ E("div", {
+					/* @__PURE__ */ D("div", {
 						className: "flex flex-wrap items-center gap-2",
 						children: [
-							/* @__PURE__ */ T(o, { children: r("themeSwitcher.default", "Default") }),
-							/* @__PURE__ */ T(o, {
+							/* @__PURE__ */ E(s, { children: i("themeSwitcher.default", "Default") }),
+							/* @__PURE__ */ E(s, {
 								variant: "secondary",
-								children: r("notifications.actionStyle.secondary", "Secondary")
+								children: i("notifications.actionStyle.secondary", "Secondary")
 							}),
-							/* @__PURE__ */ T(o, {
+							/* @__PURE__ */ E(s, {
 								variant: "success",
-								children: r("common.success", "Success")
+								children: i("common.success", "Success")
 							}),
-							/* @__PURE__ */ T(o, {
+							/* @__PURE__ */ E(s, {
 								variant: "warning",
-								children: r("themeSwitcher.warning", "Warning")
+								children: i("themeSwitcher.warning", "Warning")
 							}),
-							/* @__PURE__ */ T(o, {
+							/* @__PURE__ */ E(s, {
 								variant: "destructive",
-								children: r("common.errorPage.title", "Error")
+								children: i("common.errorPage.title", "Error")
 							})
 						]
 					}),
-					/* @__PURE__ */ T("div", {
+					/* @__PURE__ */ E("div", {
 						className: "flex flex-wrap items-center gap-4",
-						children: D.map((e) => /* @__PURE__ */ E("span", {
+						children: O.map((e) => /* @__PURE__ */ D("span", {
 							className: "flex items-center gap-1.5 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ T("span", {
+							children: [/* @__PURE__ */ E("span", {
 								className: "size-3 rounded-full",
 								style: { backgroundColor: `var(${e.varName})` },
 								"aria-hidden": "true"
-							}), i.accents[e.name] ?? e.name]
+							}), a.accents[e.name] ?? e.name]
 						}, e.name))
 					})
 				]
@@ -418,26 +418,26 @@ function j({ className: t, showCustomThemes: n = !0 }) {
 	});
 }
 function M({ label: e, family: t, accent: n, active: r, onSelect: i }) {
-	return /* @__PURE__ */ E("button", {
+	return /* @__PURE__ */ D("button", {
 		type: "button",
 		role: "radio",
 		"aria-checked": r,
 		onClick: i,
 		className: g("group relative flex flex-col gap-2 rounded-card border p-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", r ? "border-border-focus bg-[var(--color-accent-soft)]" : "border-border-default bg-bg-surface hover:border-border-strong hover:bg-bg-sunken"),
-		children: [/* @__PURE__ */ T("span", {
+		children: [/* @__PURE__ */ E("span", {
 			className: g("relative flex h-12 w-full items-end overflow-hidden rounded-button border border-border-seam", A(t)),
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ T("span", {
+			children: /* @__PURE__ */ E("span", {
 				className: "m-1.5 size-3 rounded-full shadow-elevation-1",
 				style: n ? { backgroundColor: n } : void 0,
-				children: !n && /* @__PURE__ */ T("span", { className: "block size-3 rounded-full bg-action-primary-bg" })
+				children: !n && /* @__PURE__ */ E("span", { className: "block size-3 rounded-full bg-action-primary-bg" })
 			})
-		}), /* @__PURE__ */ E("span", {
+		}), /* @__PURE__ */ D("span", {
 			className: "flex items-center justify-between gap-1",
-			children: [/* @__PURE__ */ T("span", {
+			children: [/* @__PURE__ */ E("span", {
 				className: "truncate text-xs font-medium text-text-primary",
 				children: e
-			}), r && /* @__PURE__ */ T(x, {
+			}), r && /* @__PURE__ */ E(x, {
 				className: "size-3.5 shrink-0 text-action-primary-bg",
 				"aria-hidden": "true"
 			})]
@@ -445,13 +445,13 @@ function M({ label: e, family: t, accent: n, active: r, onSelect: i }) {
 	});
 }
 function N({ title: e, description: t, value: n, options: r, onChange: i }) {
-	return /* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(d, { children: e }), /* @__PURE__ */ T(l, { children: t })] }), /* @__PURE__ */ T(c, { children: /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ D(c, { children: [/* @__PURE__ */ D(d, { children: [/* @__PURE__ */ E(f, { children: e }), /* @__PURE__ */ E(u, { children: t })] }), /* @__PURE__ */ E(l, { children: /* @__PURE__ */ E("div", {
 		role: "radiogroup",
 		"aria-label": e,
 		className: "inline-flex w-full flex-col gap-1 rounded-button border border-border-default bg-bg-sunken p-1 sm:w-auto sm:flex-row",
 		children: r.map((e) => {
 			let t = n === e.value;
-			return /* @__PURE__ */ T("button", {
+			return /* @__PURE__ */ E("button", {
 				type: "button",
 				role: "radio",
 				"aria-checked": t,
@@ -462,52 +462,52 @@ function N({ title: e, description: t, value: n, options: r, onChange: i }) {
 		})
 	}) })] });
 }
-function P({ name: t, base: n, accent: r, density: i, typography: a, glass: o, reduceMotion: p, onName: m, onBase: _, onAccent: y, onDensity: b, onTypography: S, onGlass: re, onReduceMotion: C, onSave: ie, onCancel: D }) {
-	let A = te(), j = ne(), M = v(), N = v(), P = v();
-	return /* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(u, {
+function P({ name: n, base: r, accent: i, density: a, typography: o, glass: s, reduceMotion: m, onName: te, onBase: _, onAccent: y, onDensity: b, onTypography: S, onGlass: C, onReduceMotion: re, onSave: w, onCancel: O }) {
+	let A = e(), j = ne(), M = v(), N = v(), P = v();
+	return /* @__PURE__ */ D(c, { children: [/* @__PURE__ */ D(d, {
 		className: "flex-row items-start justify-between gap-4 space-y-0",
-		children: [/* @__PURE__ */ E("div", {
+		children: [/* @__PURE__ */ D("div", {
 			className: "flex flex-col gap-1.5",
-			children: [/* @__PURE__ */ T(d, { children: A("themeSwitcher.customTheme", "Custom theme") }), /* @__PURE__ */ T(l, { children: A("themeSwitcher.editorHelp", "Design a reusable theme and save it to your library.") })]
-		}), /* @__PURE__ */ T(e, {
+			children: [/* @__PURE__ */ E(f, { children: A("themeSwitcher.customTheme", "Custom theme") }), /* @__PURE__ */ E(u, { children: A("themeSwitcher.editorHelp", "Design a reusable theme and save it to your library.") })]
+		}), /* @__PURE__ */ E(t, {
 			type: "button",
 			variant: "ghost",
 			size: "icon-sm",
 			"aria-label": A("themeSwitcher.closeEditor", "Close editor"),
-			onClick: D,
-			children: /* @__PURE__ */ T(w, {
+			onClick: O,
+			children: /* @__PURE__ */ E(T, {
 				className: "size-4",
 				"aria-hidden": "true"
 			})
 		})]
-	}), /* @__PURE__ */ E(c, {
+	}), /* @__PURE__ */ D(l, {
 		className: "flex flex-col gap-4",
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ T(f, {
+				children: [/* @__PURE__ */ E(p, {
 					htmlFor: M,
 					children: A("common.name", "Name")
-				}), /* @__PURE__ */ T(ee, {
+				}), /* @__PURE__ */ E(ee, {
 					id: M,
-					value: t,
-					onChange: (e) => m(e.target.value),
+					value: n,
+					onChange: (e) => te(e.target.value),
 					placeholder: A("themeSwitcher.myTheme", "My theme")
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ T("span", {
+				children: [/* @__PURE__ */ E("span", {
 					className: "text-sm font-medium text-text-primary",
 					id: `${M}-base`,
 					children: A("themeSwitcher.base", "Base")
-				}), /* @__PURE__ */ T("div", {
+				}), /* @__PURE__ */ E("div", {
 					role: "radiogroup",
 					"aria-labelledby": `${M}-base`,
 					className: "inline-flex w-full gap-1 rounded-button border border-border-default bg-bg-sunken p-1 sm:w-auto",
 					children: ["light", "dark"].map((e) => {
-						let t = n === e;
-						return /* @__PURE__ */ T("button", {
+						let t = r === e;
+						return /* @__PURE__ */ E("button", {
 							type: "button",
 							role: "radio",
 							"aria-checked": t,
@@ -518,82 +518,82 @@ function P({ name: t, base: n, accent: r, density: i, typography: a, glass: o, r
 					})
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex flex-col gap-1.5",
-				children: [/* @__PURE__ */ T(f, {
+				children: [/* @__PURE__ */ E(p, {
 					htmlFor: N,
 					children: A("themeSwitcher.accent", "Accent")
-				}), /* @__PURE__ */ E("div", {
+				}), /* @__PURE__ */ D("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ T("input", {
+					children: [/* @__PURE__ */ E("input", {
 						id: N,
 						type: "color",
-						value: r,
+						value: i,
 						onChange: (e) => y(e.target.value),
 						"aria-label": A("themeSwitcher.accentColor", "Accent color"),
 						className: "size-10 cursor-pointer rounded-input border border-border-default bg-bg-surface p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
-					}), /* @__PURE__ */ T("span", {
+					}), /* @__PURE__ */ E("span", {
 						className: "font-mono text-sm uppercase text-text-secondary",
-						children: r
+						children: i
 					})]
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 				children: [
-					/* @__PURE__ */ T(F, {
+					/* @__PURE__ */ E(F, {
 						label: A("themeSwitcher.density", "Density"),
-						value: i,
-						options: O.map((e) => ({
+						value: a,
+						options: k.map((e) => ({
 							...e,
 							label: j.density[e.value]
 						})),
 						onChange: (e) => b(e)
 					}),
-					/* @__PURE__ */ T(F, {
+					/* @__PURE__ */ E(F, {
 						label: A("themeSwitcher.typography", "Typography"),
-						value: a,
-						options: k.map((e) => ({
+						value: o,
+						options: ie.map((e) => ({
 							...e,
 							label: j.typography[e.value]
 						})),
 						onChange: (e) => S(e)
 					}),
-					/* @__PURE__ */ T(F, {
+					/* @__PURE__ */ E(F, {
 						label: A("themeSwitcher.glass", "Glass"),
-						value: o,
+						value: s,
 						options: ae.map((e) => ({
 							...e,
 							label: j.glass[e.value]
 						})),
-						onChange: (e) => re(e)
+						onChange: (e) => C(e)
 					})
 				]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex items-center justify-between gap-4",
-				children: [/* @__PURE__ */ T(f, {
+				children: [/* @__PURE__ */ E(p, {
 					htmlFor: P,
 					className: "text-sm font-medium text-text-primary",
 					children: A("themeSwitcher.reduceMotion", "Reduce motion")
-				}), /* @__PURE__ */ T(h, {
+				}), /* @__PURE__ */ E(h, {
 					id: P,
-					checked: p,
-					onCheckedChange: C,
+					checked: m,
+					onCheckedChange: re,
 					"aria-label": A("themeSwitcher.reduceMotion", "Reduce motion")
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex items-center justify-end gap-2 pt-2",
-				children: [/* @__PURE__ */ T(e, {
+				children: [/* @__PURE__ */ E(t, {
 					type: "button",
 					variant: "ghost",
-					onClick: D,
+					onClick: O,
 					children: A("common.actions.cancel", "Cancel")
-				}), /* @__PURE__ */ E(e, {
+				}), /* @__PURE__ */ D(t, {
 					type: "button",
-					onClick: ie,
-					children: [/* @__PURE__ */ T(x, {
+					onClick: w,
+					children: [/* @__PURE__ */ E(x, {
 						className: "size-4",
 						"aria-hidden": "true"
 					}), A("common.save", "Save")]
@@ -602,20 +602,20 @@ function P({ name: t, base: n, accent: r, density: i, typography: a, glass: o, r
 		]
 	})] });
 }
-function F({ label: e, value: o, options: s, onChange: c }) {
+function F({ label: e, value: t, options: s, onChange: c }) {
 	let l = v();
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ D("div", {
 		className: "flex flex-col gap-1.5",
-		children: [/* @__PURE__ */ T(f, {
+		children: [/* @__PURE__ */ E(p, {
 			htmlFor: l,
 			children: e
-		}), /* @__PURE__ */ E(t, {
-			value: o,
+		}), /* @__PURE__ */ D(n, {
+			value: t,
 			onValueChange: c,
-			children: [/* @__PURE__ */ T(i, {
+			children: [/* @__PURE__ */ E(a, {
 				id: l,
-				children: /* @__PURE__ */ T(a, {})
-			}), /* @__PURE__ */ T(n, { children: s.map((e) => /* @__PURE__ */ T(r, {
+				children: /* @__PURE__ */ E(o, {})
+			}), /* @__PURE__ */ E(r, { children: s.map((e) => /* @__PURE__ */ E(i, {
 				value: e.value,
 				children: e.label
 			}, e.value)) })]