@burdenoff/fe-libs 2026.1018.1 → 2026.1019.2

package/dist/chrome/ThemePreferences.js

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