themelia-react-ui 2.0.6 → 3.0.0

package/dist/features/theme-tweaker.js

@@ -1,37 +1,60 @@
 "use client";
-import { b as e, n as t, y as n } from "../ui-provider-C-74NVLc.js";
+import { b as e, r as t, x as n } from "../ui-provider-Bu1S-o96.js";
 import { COMPONENT_SCALES as r, SEMANTIC_TONES as i } from "../component-vocabulary.js";
 import { interpolateString as a, useStrings as o } from "../lib/strings.js";
-import { t as s } from "../utils-DhuoqFy4.js";
-import { n as c } from "../buttons-DeW0bQeK.js";
-import { c as l, s as u } from "../typography-C7-YMW1S.js";
-import { t as d } from "../focus-recipes-B653VaLq.js";
-import { r as f, t as p } from "../structure-DZJ2wbAU.js";
-import { _ as m, g as ee, h, p as te, t as ne, v as g } from "../smart-card-B6vLxqa_.js";
-import { n as re } from "../composition.recipes-COdiFhxB.js";
-import { i as ie, r as ae } from "../overlays-CC8zI3Du.js";
-import { m as oe } from "../primitives-BkkQjYl7.js";
-import { t as se } from "../accordion-0tQUZ20r.js";
-import { t as _ } from "../badge-wWauMgAt.js";
-import { t as ce } from "../theme-mode-css-BB-_RYab.js";
-import { t as v } from "../input-7KAc7XQL.js";
-import { t as y } from "../form-field-CAPdwdnZ.js";
-import { d as le } from "../text-inputs-jdkS3ReG.js";
-import { a as b, l as x } from "../choice-inputs-DHGtx0QV.js";
-import { i as ue, n as de } from "../value-inputs-D3aPgq9H.js";
-import { d as fe } from "../forms-numeric-CwjQJe-O.js";
-import { t as pe } from "../item-FfWnaYST.js";
-import { i as me, r as he, t as ge } from "../tabs-C4Kr_hCr.js";
-import { forwardRef as S, useEffect as _e, useId as C, useImperativeHandle as ve, useMemo as w, useRef as ye, useState as T } from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { CheckCircle2 as be, Copy as xe, Download as Se, Info as Ce, LayoutGrid as we, Moon as Te, Palette as O, RotateCcw as Ee, Search as De, Settings2 as Oe, Shapes as ke, ShieldCheck as k, Sun as Ae, Type as je } from "lucide-react";
+import { t as s } from "../utils-BVbAG2J6.js";
+import { c, s as l } from "../typography-C0dELqYV.js";
+import { t as u } from "../focus-recipes-DSkiUvUp.js";
+import { n as d } from "../buttons-pZVgPTZn.js";
+import { r as f, t as p } from "../structure-DElaQwwN.js";
+import { _ as m, f as h, g, h as _, m as ee, t as te } from "../smart-card-C59z6KFO.js";
+import { n as ne } from "../composition.recipes-COdiFhxB.js";
+import { i as re, r as ie } from "../overlays-D-gAIfPF.js";
+import { m as ae } from "../primitives-BlC1lXBr.js";
+import { t as oe } from "../accordion-DNVqwEIC.js";
+import { t as v } from "../badge-oGiXblW7.js";
+import { t as se } from "../theme-mode-css-BB-_RYab.js";
+import { t as y } from "../input-DfJyrjoR.js";
+import { t as b } from "../form-field-BdfCwSoQ.js";
+import { d as ce } from "../text-inputs-ljyBYaCd.js";
+import { a as x, l as S } from "../choice-inputs-oJEsrb5Y.js";
+import { i as le, n as ue } from "../value-inputs-h5MwjGCo.js";
+import { p as de } from "../forms-numeric-DOBswjKj.js";
+import { t as fe } from "../item-GJ9mvCcg.js";
+import { i as pe, r as me, t as he } from "../tabs-WnHfV2pM.js";
+import { s as ge } from "../data-display-CWe9SOYh.js";
+import { forwardRef as _e, useEffect as ve, useId as ye, useImperativeHandle as be, useMemo as C, useRef as xe, useState as w } from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { CheckCircle2 as Se, Copy as Ce, Download as we, Info as Te, LayoutGrid as Ee, Moon as De, Palette as Oe, RotateCcw as ke, Search as Ae, Settings2 as D, Shapes as je, ShieldCheck as Me, Sun as Ne, Type as O } from "lucide-react";
 //#region src/components/features/theme-tweaker/theme-tweaker.utils.ts
-var Me = {
+var Pe = {
 	shared: ":root",
 	light: ":root,\n.light",
 	dark: ".dark"
-}, A = /^--[a-z][a-z0-9-]*$/i, j = /[;{}]/, Ne = /[;{}]/;
-function M(e = {}) {
+}, Fe = /^--[a-z][a-z0-9-]*$/i, Ie = /[;{}<\\]|\/\*|\*\//, k = /[;{}<]|\/\*|\*\//;
+function Le(e) {
+	return [...e].some((e) => {
+		let t = e.charCodeAt(0);
+		return t < 32 || t === 127;
+	});
+}
+function Re(e) {
+	let t = null, n = 0;
+	for (let r of e) if (t) r === t && (t = null);
+	else if (r === "\"" || r === "'") t = r;
+	else if (r === "(") n += 1;
+	else if (r === ")" && (--n, n < 0)) return !1;
+	return t === null && n === 0;
+}
+function A(e) {
+	let t = e.trim();
+	return Ie.test(t) || Le(t) || !Re(t);
+}
+function ze(e) {
+	let t = e.trim();
+	return t.length === 0 || typeof CSS > "u" || typeof CSS.supports != "function" || CSS.supports("color", t);
+}
+function j(e = {}) {
 	return {
 		mode: e.mode ?? "light",
 		shared: { ...e.shared },
@@ -39,71 +62,68 @@ function M(e = {}) {
 		dark: { ...e.dark }
 	};
 }
-function N(e) {
-	return A.test(e);
+function Be(e) {
+	return Fe.test(e);
 }
-function P(e, t = !0) {
+function M(e, t = !0) {
 	return Object.entries(e).filter((e) => typeof e[1] == "string" && e[1].trim().length > 0).flatMap(([e, n]) => {
-		if (!N(e)) {
+		if (!Be(e)) {
 			if (!t) return [];
 			throw TypeError(`Invalid CSS variable name: ${e}`);
 		}
-		let r = n.trim(), i = [...r].some((e) => {
-			let t = e.charCodeAt(0);
-			return t < 32 || t === 127;
-		});
-		if (j.test(r) || i) {
+		let r = n.trim();
+		if (A(r)) {
 			if (!t) return [];
 			throw TypeError(`Unsafe CSS value for ${e}.`);
 		}
 		return [[e, r]];
 	}).sort(([e], [t]) => e.localeCompare(t));
 }
-function F(e, t) {
+function N(e, t) {
 	let n = e.trim();
-	if (n.length === 0 || Ne.test(n)) throw TypeError(`Invalid ${t} theme selector.`);
+	if (n.length === 0 || k.test(n)) throw TypeError(`Invalid ${t} theme selector.`);
 	return n;
 }
-function I(e, t) {
-	let n = P(t);
+function P(e, t) {
+	let n = M(t);
 	return n.length === 0 ? null : [
 		`${e} {`,
 		...n.map(([e, t]) => `\t${e}: ${t};`),
 		"}"
 	].join("\n");
 }
-function L(e, t = {}) {
-	let n = t.selectors ?? Me, r = F(n.shared, "shared"), i = F(n.light, "light"), a = F(n.dark, "dark"), o = n.modeScope === void 0 ? void 0 : F(n.modeScope, "modeScope"), s = [I(r, e.shared), ...o === void 0 ? [I(i, e.light), I(a, e.dark)] : [ce(o, {
-		light: P(e.light).map(([e, t]) => `${e}: ${t};`),
-		dark: P(e.dark).map(([e, t]) => `${e}: ${t};`)
+function F(e, t = {}) {
+	let n = t.selectors ?? Pe, r = N(n.shared, "shared"), i = N(n.light, "light"), a = N(n.dark, "dark"), o = n.modeScope === void 0 ? void 0 : N(n.modeScope, "modeScope"), s = [P(r, e.shared), ...o === void 0 ? [P(i, e.light), P(a, e.dark)] : [se(o, {
+		light: M(e.light).map(([e, t]) => `${e}: ${t};`),
+		dark: M(e.dark).map(([e, t]) => `${e}: ${t};`)
 	})]].filter((e) => e !== null && e.length > 0), c = t.banner === !1 ? null : `/* ${t.banner ?? "themelia-react-ui theme overrides"} */`;
 	return `${[...c ? [c] : [], ...s.length > 0 ? s : ["/* No explicit overrides. */"]].join("\n\n")}\n`;
 }
-function R(t = {}) {
-	let n = e(t), { locale: r, formatRelativeTime: i, ...a } = n.dates;
+function I(e = {}) {
+	let t = n(e), { locale: r, formatRelativeTime: i, ...a } = t.dates;
 	return {
-		...n,
+		...t,
 		dates: a
 	};
 }
-function Pe(e = {}) {
-	let t = R(e);
+function Ve(e = {}) {
+	let t = I(e);
 	return `import type { UIConfig } from 'themelia-react-ui/ui-provider';\n\nexport const adminUIConfig = ${JSON.stringify(t, null, "	")} satisfies UIConfig;\n`;
 }
-function z(e, t = e.mode) {
+function He(e, t = e.mode) {
 	return {
 		...e.shared,
 		...e[t]
 	};
 }
-function B(e, t = e.mode) {
-	return Object.fromEntries(P(z(e, t), !1));
+function L(e, t = e.mode) {
+	return Object.fromEntries(M(He(e, t), !1));
 }
-function Fe(e) {
-	return P(e.shared, !1).length + P(e.light, !1).length + P(e.dark, !1).length;
+function Ue(e) {
+	return M(e.shared, !1).length + M(e.light, !1).length + M(e.dark, !1).length;
 }
-function Ie(e) {
-	let t = F(e, "shared");
+function R(e) {
+	let t = N(e, "shared");
 	return {
 		shared: t,
 		light: `${t},\n${t}.light,\n.light ${t}`,
@@ -111,62 +131,62 @@ function Ie(e) {
 		modeScope: t
 	};
 }
-function Le(e, t = "admin-ui-theme.css", n = {}, r = {}) {
-	let i = M(r.resolvedTheme ?? e), a = R(r.providerConfig);
+function We(e, t = "admin-ui-theme.css", n = {}, r = {}) {
+	let i = j(r.resolvedTheme ?? e), a = I(r.providerConfig);
 	return {
 		fileName: t,
-		cssText: L(i, {
+		cssText: F(i, {
 			...n,
 			banner: n.banner ?? "themelia-react-ui complete theme"
 		}),
-		overrideCssText: L(e, n),
-		theme: M(e),
+		overrideCssText: F(e, n),
+		theme: j(e),
 		resolvedTheme: i,
-		overrideCount: Fe(e),
+		overrideCount: Ue(e),
 		providerFileName: r.providerFileName ?? "admin-ui.config.ts",
 		providerConfig: a,
-		providerConfigText: Pe(a)
+		providerConfigText: Ve(a)
 	};
 }
-function Re(e) {
-	ze({
+function Ge(e) {
+	Ke({
 		fileName: e.fileName,
 		text: e.cssText,
 		mimeType: "text/css;charset=utf-8"
 	});
 }
-function ze({ fileName: e, text: t, mimeType: n = "text/plain;charset=utf-8" }) {
+function Ke({ fileName: e, text: t, mimeType: n = "text/plain;charset=utf-8" }) {
 	if (typeof document > "u" || typeof URL > "u") throw Error("File download requires a browser document. Provide onExport in non-browser environments.");
 	let r = new Blob([t], { type: n }), i = URL.createObjectURL(r), a = document.createElement("a");
 	a.href = i, a.download = e, a.hidden = !0, document.body.append(a), a.click(), a.remove(), URL.revokeObjectURL(i);
 }
 //#endregion
 //#region src/components/features/theme-tweaker/theme-scope.tsx
-var V = S(function({ theme: e, mode: n = e.mode, className: r, style: i, children: a, ...o }, c) {
-	return /* @__PURE__ */ E(t, {
+var qe = _e(function({ theme: e, mode: n = e.mode, className: r, style: i, children: a, ...o }, c) {
+	return /* @__PURE__ */ T(t, {
 		...o,
 		ref: c,
 		"data-theme-mode": n,
 		className: s("theme-scope--component", n, r),
 		style: {
-			...B(e, n),
+			...L(e, n),
 			...i
 		},
 		children: a
 	});
 });
-V.displayName = "ThemeScope";
+qe.displayName = "ThemeScope";
 //#endregion
 //#region src/components/features/theme-tweaker/use-applied-theme.ts
-function Be(e, t) {
+function z(e, t) {
 	return e === null ? null : e === "self" ? t.current : e === "document" ? typeof document > "u" ? null : document.documentElement : typeof e == "function" ? e() : e;
 }
-function Ve({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
-	_e(() => {
+function Je({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
+	ve(() => {
 		if (!e || r === "self") return;
-		let a = Be(r, n);
+		let a = z(r, n);
 		if (!a) return;
-		let o = B(i), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
+		let o = L(i), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
 		for (let [e, t] of Object.entries(o)) typeof t == "string" && (s.set(e, {
 			value: a.style.getPropertyValue(e),
 			priority: a.style.getPropertyPriority(e)
@@ -190,22 +210,22 @@ function Ve({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
 }
 //#endregion
 //#region src/components/features/theme-tweaker/admin-ui-theme-provider.tsx
-var He = S(function({ config: e, theme: t, mode: r = t.mode, target: i = "document", manageModeClass: a = !0, className: o, children: c, ...l }, u) {
-	let d = ye(null);
-	ve(u, () => d.current);
-	let f = w(() => M({
-		...t,
+var B = _e(function({ config: t, theme: n, mode: r = n.mode, target: i = "document", manageModeClass: a = !0, className: o, children: c, ...l }, u) {
+	let d = xe(null);
+	be(u, () => d.current);
+	let f = C(() => j({
+		...n,
 		mode: r
-	}), [r, t]);
-	return Ve({
+	}), [r, n]);
+	return Je({
 		apply: i === "document",
 		manageModeClass: a,
 		selfRef: d,
 		target: i,
 		theme: f
-	}), /* @__PURE__ */ E(n, {
-		config: e,
-		children: /* @__PURE__ */ E(V, {
+	}), /* @__PURE__ */ T(e, {
+		config: t,
+		children: /* @__PURE__ */ T(qe, {
 			...l,
 			ref: d,
 			theme: f,
@@ -215,10 +235,10 @@ var He = S(function({ config: e, theme: t, mode: r = t.mode, target: i = "docume
 		})
 	});
 });
-He.displayName = "AdminUIThemeProvider";
+B.displayName = "AdminUIThemeProvider";
 //#endregion
 //#region src/components/features/theme-tweaker/theme-tweaker.fields.ts
-var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--popover.--popover-foreground.--primary.--primary-foreground.--secondary.--secondary-foreground.--muted.--muted-foreground.--accent.--accent-foreground.--destructive.--destructive-foreground.--border.--input.--ring.--chart-1.--chart-2.--chart-3.--chart-4.--chart-5.--sidebar.--sidebar-foreground.--sidebar-primary.--sidebar-primary-foreground.--sidebar-accent.--sidebar-accent-foreground.--sidebar-border.--sidebar-ring".split("."), U = [
+var V = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--popover.--popover-foreground.--primary.--primary-foreground.--secondary.--secondary-foreground.--muted.--muted-foreground.--accent.--accent-foreground.--destructive.--destructive-foreground.--border.--input.--ring.--chart-1.--chart-2.--chart-3.--chart-4.--chart-5.--chart-6.--chart-7.--chart-8.--sidebar.--sidebar-foreground.--sidebar-primary.--sidebar-primary-foreground.--sidebar-accent.--sidebar-accent-foreground.--sidebar-border.--sidebar-ring".split("."), Ye = [
 	"--success",
 	"--success-foreground",
 	"--info",
@@ -237,12 +257,12 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"--inverse-surface-strong",
 	"--inverse-border",
 	"--inverse-decoration"
-], W = ["--overlay-backdrop"], Ue = [
+], H = ["--overlay-backdrop"], Xe = [
 	"--font-heading",
 	"--font-sans",
 	"--font-serif",
 	"--font-mono"
-], We = [
+], U = [
 	"xxs",
 	"xs",
 	"pxs",
@@ -258,7 +278,7 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"7xl",
 	"8xl",
 	"9xl"
-].flatMap((e) => [`--text-${e}`, `--text-${e}--line-height`]), G = [
+].flatMap((e) => [`--text-${e}`, `--text-${e}--line-height`]), Ze = [
 	"--shadow-2xs",
 	"--shadow-xs",
 	"--shadow-sm",
@@ -267,7 +287,7 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"--shadow-lg",
 	"--shadow-xl",
 	"--shadow-2xl"
-], K = [
+], W = [
 	"--space-scale",
 	"--density-scale",
 	"--height-action",
@@ -281,7 +301,7 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"--avatar",
 	"--shell-header-height",
 	"--shell-sidebar-width"
-], Ge = [
+], Qe = [
 	"--content-width-sm",
 	"--content-width-md",
 	"--content-width-lg",
@@ -290,7 +310,7 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"--adaptive-grid-min-sm",
 	"--adaptive-grid-min-md",
 	"--adaptive-grid-min-lg"
-], Ke = {
+], G = {
 	"--background": "Application canvas and default page background.",
 	"--foreground": "Primary text and icon color on the application canvas.",
 	"--primary": "Brand and primary-action color.",
@@ -327,7 +347,7 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"--adaptive-grid-min-sm": "Compact minimum peer width used by AdaptiveGrid.",
 	"--adaptive-grid-min-md": "Default minimum peer width used by AdaptiveGrid.",
 	"--adaptive-grid-min-lg": "Spacious minimum peer width used by AdaptiveGrid."
-}, qe = {
+}, K = {
 	"--space-scale": "Spacing scale",
 	"--density-scale": "Density scale",
 	"--height-action": "Action height",
@@ -351,7 +371,7 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 	"--adaptive-grid-min-sm": "Compact adaptive column",
 	"--adaptive-grid-min-md": "Default adaptive column",
 	"--adaptive-grid-min-lg": "Spacious adaptive column"
-}, q = {
+}, $e = {
 	"--radius": {
 		type: "range",
 		min: 0,
@@ -543,48 +563,48 @@ var H = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 		decimalPlaces: 1
 	}
 };
-function J(e) {
+function et(e) {
 	return e.replace(/^--/, "").replace(/--/g, " · ").split("-").map((e) => e.length <= 3 ? e.toUpperCase() : `${e[0].toUpperCase()}${e.slice(1)}`).join(" ");
 }
-function Je(e, t) {
+function q(e, t) {
 	return e.startsWith("--chart-") ? "Categorical chart-series color; keep status meaning separate." : e.startsWith("--sidebar-") ? "Sidebar-specific theme color." : e.startsWith("--inverse-") ? "Explicitly inverse surface and content color." : e.endsWith("-foreground") ? "Foreground color paired with the matching solid or surface token." : e.endsWith("--line-height") ? "Line height paired with the matching typography step." : e.startsWith("--text-") ? "Font size for the matching typography step." : e.startsWith("--font-") ? "Font family stack for the matching content role." : e.startsWith("--shadow") ? "Elevation shadow used by package surfaces and overlays." : t === "states" ? "Semantic state color shared by package status surfaces." : "Public theme variable used across package components.";
 }
-function Y(e, t, n, r, i) {
+function J(e, t, n, r, i) {
 	return e.map((e) => ({
 		name: e,
-		label: qe[e] ?? J(e),
-		description: Ke[e] ?? Je(e, t),
+		label: K[e] ?? et(e),
+		description: G[e] ?? q(e, t),
 		group: t,
 		section: n,
 		scope: r,
 		kind: i,
-		control: q[e]
+		control: $e[e]
 	}));
 }
-var Ye = [
-	...Y(H.slice(0, 6), "colors", "surfaces-content", "mode", "color"),
-	...Y(W, "colors", "surfaces-content", "shared", "color"),
-	...Y(H.slice(6, 19), "colors", "brand-actions", "mode", "color"),
-	...Y(H.slice(19, 24), "colors", "charts", "mode", "color"),
-	...Y(H.slice(24), "colors", "sidebar", "mode", "color"),
-	...Y(U.slice(0, 7), "states", "semantic-feedback", "mode", "color"),
-	...Y(U.slice(7), "states", "inverse-surfaces", "mode", "color"),
-	...Y(Ue, "typography", "font-families", "shared", "font"),
-	...Y(We, "typography", "type-scale", "shared", "length"),
-	...Y(["--radius"], "shape", "radius", "shared", "length"),
-	...Y(G, "shape", "elevation", "mode", "shadow"),
-	...Y(K.slice(0, 2), "structure", "global-scales", "shared", "length"),
-	...Y(K.slice(2, 5), "structure", "actions-controls", "shared", "length"),
-	...Y(["--gap-normal", "--gap-dense"], "structure", "rows-surfaces", "shared", "length"),
-	...Y(K.slice(5, 9), "structure", "rows-surfaces", "shared", "length"),
-	...Y(K.slice(9, 11), "structure", "media", "shared", "length"),
-	...Y(K.slice(11), "structure", "application-shell", "shared", "length"),
-	...Y(Ge.slice(0, 5), "structure", "content-widths", "shared", "length"),
-	...Y(Ge.slice(5), "structure", "adaptive-layout", "shared", "length")
+var tt = [
+	...J(V.slice(0, 6), "colors", "surfaces-content", "mode", "color"),
+	...J(H, "colors", "surfaces-content", "shared", "color"),
+	...J(V.slice(6, 19), "colors", "brand-actions", "mode", "color"),
+	...J(V.slice(19, 27), "colors", "charts", "mode", "color"),
+	...J(V.slice(27), "colors", "sidebar", "mode", "color"),
+	...J(Ye.slice(0, 7), "states", "semantic-feedback", "mode", "color"),
+	...J(Ye.slice(7), "states", "inverse-surfaces", "mode", "color"),
+	...J(Xe, "typography", "font-families", "shared", "font"),
+	...J(U, "typography", "type-scale", "shared", "length"),
+	...J(["--radius"], "shape", "radius", "shared", "length"),
+	...J(Ze, "shape", "elevation", "mode", "shadow"),
+	...J(W.slice(0, 2), "structure", "global-scales", "shared", "length"),
+	...J(W.slice(2, 5), "structure", "actions-controls", "shared", "length"),
+	...J(["--gap-normal", "--gap-dense"], "structure", "rows-surfaces", "shared", "length"),
+	...J(W.slice(5, 9), "structure", "rows-surfaces", "shared", "length"),
+	...J(W.slice(9, 11), "structure", "media", "shared", "length"),
+	...J(W.slice(11), "structure", "application-shell", "shared", "length"),
+	...J(Qe.slice(0, 5), "structure", "content-widths", "shared", "length"),
+	...J(Qe.slice(5), "structure", "adaptive-layout", "shared", "length")
 ].map((e) => e.name === "--space-scale" || e.name === "--density-scale" ? {
 	...e,
 	kind: "number"
-} : e), X = {
+} : e), Y = {
 	title: "Application defaults",
 	description: "Configure the stable display behavior that accompanies the exported CSS theme.",
 	boundaryTitle: "Root provider recipe",
@@ -643,6 +663,8 @@ var Ye = [
 	},
 	dualPricingDescription: "Show an optional display currency.",
 	displayCurrencyPlaceholder: "Optional",
+	invalidLocale: "Enter a valid locale, such as en-US.",
+	invalidCurrency: "Enter a three-letter currency code, such as EUR.",
 	options: {
 		default: "Default",
 		decimal: "Decimal",
@@ -697,14 +719,49 @@ var Ye = [
 		xl: "XL"
 	}
 };
-function Z(e, t) {
+function X(e, t) {
 	return e.map((e) => ({
 		value: e,
 		label: t.options[e] ?? e.replaceAll("_", " ").replace(/\b\w/g, (e) => e.toUpperCase())
 	}));
 }
-function Xe({ config: e, onChange: t, strings: n = X }) {
-	let a = R(e), o = Z(r, n), s = [
+function nt(e) {
+	if (e.trim().length === 0) return !1;
+	try {
+		return Intl.getCanonicalLocales(e), new Intl.NumberFormat(e), !0;
+	} catch {
+		return !1;
+	}
+}
+function Z(e) {
+	if (!/^[A-Z]{3}$/.test(e)) return !1;
+	try {
+		return new Intl.NumberFormat("en", {
+			style: "currency",
+			currency: e
+		}), !0;
+	} catch {
+		return !1;
+	}
+}
+function rt({ label: e, value: t, placeholder: n, error: r, normalize: i, isValid: a, onCommit: o }) {
+	let [s, c] = w(null);
+	return /* @__PURE__ */ T(b, {
+		label: e,
+		error: s === null ? void 0 : r,
+		children: /* @__PURE__ */ T(y, {
+			value: s ?? t,
+			placeholder: n,
+			onChange: (e) => {
+				let t = i ? i(e.target.value) : e.target.value;
+				a(t) ? (c(null), o(t)) : c(t);
+			}
+		})
+	});
+}
+var it = (e) => e.toUpperCase();
+function at({ config: e, onChange: t, strings: n = Y }) {
+	let a = I(e), o = X(r, n), s = [
 		"sunday",
 		"monday",
 		"tuesday",
@@ -715,7 +772,7 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 	].map((e, t) => ({
 		value: String(t),
 		label: n.options[e]
-	})), c = (e, n, r) => {
+	})), l = n.invalidLocale ?? Y.invalidLocale ?? "", u = n.invalidCurrency ?? Y.invalidCurrency ?? "", d = (e, n, r) => {
 		t({
 			...a,
 			[e]: {
@@ -724,51 +781,51 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 			}
 		});
 	};
-	return /* @__PURE__ */ D(p, {
+	return /* @__PURE__ */ E(p, {
 		gap: "lg",
 		className: "theme-tweaker--provider-settings",
 		children: [
-			/* @__PURE__ */ D(p, {
+			/* @__PURE__ */ E(p, {
 				gap: "normal",
-				children: [/* @__PURE__ */ E(l, {
+				children: [/* @__PURE__ */ T(c, {
 					type: "inherit",
 					weight: "semibold",
 					children: n.title
-				}), /* @__PURE__ */ E(l, {
+				}), /* @__PURE__ */ T(c, {
 					size: "xs",
 					type: "secondary",
 					children: n.description
 				})]
 			}),
-			/* @__PURE__ */ D(te, {
+			/* @__PURE__ */ E(h, {
 				tone: "info",
 				role: "note",
 				className: "theme-tweaker--provider-boundary",
 				children: [
-					/* @__PURE__ */ E(Ce, { "aria-hidden": "true" }),
-					/* @__PURE__ */ E(g, { children: n.boundaryTitle }),
-					/* @__PURE__ */ E(h, { children: n.boundaryDescription }),
-					/* @__PURE__ */ D(ee, { children: [
-						/* @__PURE__ */ E(m, {
+					/* @__PURE__ */ T(Te, { "aria-hidden": "true" }),
+					/* @__PURE__ */ T(m, { children: n.boundaryTitle }),
+					/* @__PURE__ */ T(ee, { children: n.boundaryDescription }),
+					/* @__PURE__ */ E(_, { children: [
+						/* @__PURE__ */ T(g, {
 							label: n.summary.locale,
 							value: a.formatting?.locale ?? n.options.default
 						}),
-						/* @__PURE__ */ E(m, {
+						/* @__PURE__ */ T(g, {
 							label: n.summary.currency,
 							value: a.money?.defaultCurrency ?? n.options.default
 						}),
-						/* @__PURE__ */ E(m, {
+						/* @__PURE__ */ T(g, {
 							label: n.summary.controls,
 							value: n.options[a.density?.defaultScale ?? "md"] ?? a.density?.defaultScale ?? n.options.md
 						}),
-						/* @__PURE__ */ E(m, {
+						/* @__PURE__ */ T(g, {
 							label: n.summary.cards,
 							value: n.options[a.card?.defaultSurface ?? "card"] ?? a.card?.defaultSurface ?? n.options.default
 						})
 					] })
 				]
 			}),
-			/* @__PURE__ */ E(se, {
+			/* @__PURE__ */ T(oe, {
 				multiple: !0,
 				defaultValue: ["regional"],
 				variant: "bordered",
@@ -779,57 +836,59 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 						value: "regional",
 						title: n.sections.regional.title,
 						description: n.sections.regional.description,
-						content: /* @__PURE__ */ D("div", {
+						content: /* @__PURE__ */ E("div", {
 							className: "grid min-w-0 grid-cols-1 gap-space-md @2xl/theme-tweaker-controls:grid-cols-2",
 							children: [
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(rt, {
 									label: n.labels.locale,
-									children: /* @__PURE__ */ E(v, {
-										value: a.formatting?.locale ?? "",
-										onChange: (e) => c("formatting", "locale", e.target.value)
-									})
+									value: a.formatting?.locale ?? "",
+									error: l,
+									isValid: nt,
+									onCommit: (e) => d("formatting", "locale", e)
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(rt, {
 									label: n.labels.defaultCurrency,
-									children: /* @__PURE__ */ E(v, {
-										value: a.money?.defaultCurrency ?? "",
-										onChange: (e) => c("money", "defaultCurrency", e.target.value.toUpperCase())
-									})
+									value: a.money?.defaultCurrency ?? "",
+									error: u,
+									normalize: it,
+									isValid: Z,
+									onCommit: (e) => d("money", "defaultCurrency", e)
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(rt, {
 									label: n.labels.displayCurrency,
-									children: /* @__PURE__ */ E(v, {
-										value: a.money?.displayCurrency ?? "",
-										placeholder: n.displayCurrencyPlaceholder,
-										onChange: (e) => c("money", "displayCurrency", e.target.value.toUpperCase() || void 0)
-									})
+									value: a.money?.displayCurrency ?? "",
+									placeholder: n.displayCurrencyPlaceholder,
+									error: u,
+									normalize: it,
+									isValid: (e) => e === "" || Z(e),
+									onCommit: (e) => d("money", "displayCurrency", e || void 0)
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.moneyFormat,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.money?.formatMode,
-										options: Z([
+										options: X([
 											"decimal",
 											"with_code",
 											"with_symbol",
 											"locale_aware"
 										], n),
-										onValueChange: (e) => c("money", "formatMode", e)
+										onValueChange: (e) => d("money", "formatMode", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.firstDay,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: String(a.dates?.weekStartsOn ?? 1),
 										options: s,
-										onValueChange: (e) => c("dates", "weekStartsOn", Number(e))
+										onValueChange: (e) => d("dates", "weekStartsOn", Number(e))
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.dateFormat,
-									children: /* @__PURE__ */ E(v, {
+									children: /* @__PURE__ */ T(y, {
 										value: a.dates?.format ?? "",
-										onChange: (e) => c("dates", "format", e.target.value)
+										onChange: (e) => d("dates", "format", e.target.value)
 									})
 								})
 							]
@@ -839,14 +898,14 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 						value: "content",
 						title: n.sections.content.title,
 						description: n.sections.content.description,
-						content: /* @__PURE__ */ D("div", {
+						content: /* @__PURE__ */ E("div", {
 							className: "grid min-w-0 grid-cols-1 gap-space-md @2xl/theme-tweaker-controls:grid-cols-2",
 							children: [
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.textSize,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.typography?.defaultTextSize,
-										options: Z([
+										options: X([
 											"xxs",
 											"xs",
 											"pxs",
@@ -855,41 +914,41 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 											"lg",
 											"xl"
 										], n),
-										onValueChange: (e) => c("typography", "defaultTextSize", e)
+										onValueChange: (e) => d("typography", "defaultTextSize", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.commentComposer,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.comments?.composerPosition,
-										options: Z(["top", "bottom"], n),
-										onValueChange: (e) => c("comments", "composerPosition", e)
+										options: X(["top", "bottom"], n),
+										onValueChange: (e) => d("comments", "composerPosition", e)
 									})
 								}),
-								/* @__PURE__ */ E(b, {
+								/* @__PURE__ */ T(x, {
 									label: n.labels.dualPricing,
 									description: n.dualPricingDescription,
 									value: a.money?.dualPricingEnabled ?? !1,
-									onValueChange: (e) => c("money", "dualPricingEnabled", e)
+									onValueChange: (e) => d("money", "dualPricingEnabled", e)
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.dualPricingMode,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.money?.displayMode,
-										options: Z([
+										options: X([
 											"default_only",
 											"dual",
 											"dynamic"
 										], n),
-										onValueChange: (e) => c("money", "displayMode", e)
+										onValueChange: (e) => d("money", "displayMode", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.dualPricingLayout,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.money?.dualPricingDisplay,
-										options: Z(["inline", "lines"], n),
-										onValueChange: (e) => c("money", "dualPricingDisplay", e)
+										options: X(["inline", "lines"], n),
+										onValueChange: (e) => d("money", "dualPricingDisplay", e)
 									})
 								})
 							]
@@ -899,90 +958,90 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 						value: "components",
 						title: n.sections.components.title,
 						description: n.sections.components.description,
-						content: /* @__PURE__ */ D("div", {
+						content: /* @__PURE__ */ E("div", {
 							className: "grid min-w-0 grid-cols-1 gap-space-md @2xl/theme-tweaker-controls:grid-cols-2",
 							children: [
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.componentScale,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.density?.defaultScale,
 										options: o,
-										onValueChange: (e) => c("density", "defaultScale", e)
+										onValueChange: (e) => d("density", "defaultScale", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.itemVariant,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.item?.defaultVariant,
-										options: Z([
+										options: X([
 											"default",
 											"outline",
 											"muted"
 										], n),
-										onValueChange: (e) => c("item", "defaultVariant", e)
+										onValueChange: (e) => d("item", "defaultVariant", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.buttonTone,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.button?.defaultTone,
-										options: Z(i, n),
-										onValueChange: (e) => c("button", "defaultTone", e)
+										options: X(i, n),
+										onValueChange: (e) => d("button", "defaultTone", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.buttonStyle,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.button?.defaultButtonStyle,
-										options: Z([
+										options: X([
 											"solid",
 											"outline",
 											"ghost"
 										], n),
-										onValueChange: (e) => c("button", "defaultButtonStyle", e)
+										onValueChange: (e) => d("button", "defaultButtonStyle", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.badgeTone,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.badge?.defaultTone,
-										options: Z(i, n),
-										onValueChange: (e) => c("badge", "defaultTone", e)
+										options: X(i, n),
+										onValueChange: (e) => d("badge", "defaultTone", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.cardSurface,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.card?.defaultSurface,
-										options: Z([
+										options: X([
 											"card",
 											"flat",
 											"framed"
 										], n),
-										onValueChange: (e) => c("card", "defaultSurface", e)
+										onValueChange: (e) => d("card", "defaultSurface", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.spinner,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.spinner?.defaultVariant,
-										options: Z([
+										options: X([
 											"default",
 											"shimmer",
 											"progress"
 										], n),
-										onValueChange: (e) => c("spinner", "defaultVariant", e)
+										onValueChange: (e) => d("spinner", "defaultVariant", e)
 									})
 								}),
-								/* @__PURE__ */ E(b, {
+								/* @__PURE__ */ T(x, {
 									label: n.labels.cardDivider,
 									value: a.card?.defaultHeaderDivider ?? !1,
-									onValueChange: (e) => c("card", "defaultHeaderDivider", e)
+									onValueChange: (e) => d("card", "defaultHeaderDivider", e)
 								}),
-								/* @__PURE__ */ E(b, {
-									label: n.labels.cardFooterDivider ?? X.labels.cardFooterDivider,
+								/* @__PURE__ */ T(x, {
+									label: n.labels.cardFooterDivider ?? Y.labels.cardFooterDivider,
 									value: a.card?.defaultFooterDivider ?? !0,
-									onValueChange: (e) => c("card", "defaultFooterDivider", e)
+									onValueChange: (e) => d("card", "defaultFooterDivider", e)
 								})
 							]
 						})
@@ -991,14 +1050,14 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 						value: "toasts",
 						title: n.sections.toasts.title,
 						description: n.sections.toasts.description,
-						content: /* @__PURE__ */ D("div", {
+						content: /* @__PURE__ */ E("div", {
 							className: "grid min-w-0 grid-cols-1 gap-space-md @2xl/theme-tweaker-controls:grid-cols-2",
 							children: [
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.toastPosition,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.toast?.position,
-										options: Z([
+										options: X([
 											"top-right",
 											"top-left",
 											"top-center",
@@ -1006,50 +1065,50 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 											"bottom-left",
 											"bottom-center"
 										], n),
-										onValueChange: (e) => c("toast", "position", e)
+										onValueChange: (e) => d("toast", "position", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.toastTheme,
-									children: /* @__PURE__ */ E(x, {
+									children: /* @__PURE__ */ T(S, {
 										value: a.toast?.theme,
-										options: Z([
+										options: X([
 											"light",
 											"dark",
 											"system"
 										], n),
-										onValueChange: (e) => c("toast", "theme", e)
+										onValueChange: (e) => d("toast", "theme", e)
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.toastDuration,
-									children: /* @__PURE__ */ E(v, {
+									children: /* @__PURE__ */ T(y, {
 										type: "number",
 										min: 1e3,
 										step: 500,
 										value: String(a.toast?.duration ?? 5e3),
-										onChange: (e) => c("toast", "duration", Number(e.target.value))
+										onChange: (e) => d("toast", "duration", Number(e.target.value))
 									})
 								}),
-								/* @__PURE__ */ E(y, {
+								/* @__PURE__ */ T(b, {
 									label: n.labels.visibleToasts,
-									children: /* @__PURE__ */ E(v, {
+									children: /* @__PURE__ */ T(y, {
 										type: "number",
 										min: 1,
 										max: 10,
 										value: String(a.toast?.visibleToasts ?? 4),
-										onChange: (e) => c("toast", "visibleToasts", Number(e.target.value))
+										onChange: (e) => d("toast", "visibleToasts", Number(e.target.value))
 									})
 								}),
-								/* @__PURE__ */ E(b, {
+								/* @__PURE__ */ T(x, {
 									label: n.labels.closeButton,
 									value: a.toast?.closeButton ?? !0,
-									onValueChange: (e) => c("toast", "closeButton", e)
+									onValueChange: (e) => d("toast", "closeButton", e)
 								}),
-								/* @__PURE__ */ E(b, {
+								/* @__PURE__ */ T(x, {
 									label: n.labels.richColors,
 									value: a.toast?.richColors ?? !1,
-									onValueChange: (e) => c("toast", "richColors", e)
+									onValueChange: (e) => d("toast", "richColors", e)
 								})
 							]
 						})
@@ -1061,7 +1120,7 @@ function Xe({ config: e, onChange: t, strings: n = X }) {
 }
 //#endregion
 //#region src/components/features/theme-tweaker/theme-tweaker.strings.ts
-var Ze = {
+var Q = {
 	title: "Theme tweaker",
 	description: "Edit the public theme contract, calculate coherent recipes, and export complete CSS plus root display defaults.",
 	searchLabel: "Search variables",
@@ -1072,8 +1131,6 @@ var Ze = {
 	groupNavigationLabel: "Theme categories",
 	previousGroup: "Previous categories",
 	nextGroup: "Next categories",
-	groupNavigationTitle: "Theme controls",
-	groupNavigationDescription: "Choose one contract area to edit.",
 	sharedScope: "Shared",
 	mixedScope: "Mixed scope",
 	variableCount: "Variables: {{count}}",
@@ -1083,9 +1140,6 @@ var Ze = {
 	reset: "Reset overrides",
 	copy: "Copy CSS",
 	copyProvider: "Copy provider config",
-	copyOverrides: "Copy override-only CSS",
-	exportProvider: "Export provider config",
-	exportOptions: "More export options",
 	export: "Export",
 	exportPending: "Downloading…",
 	exportDialogTitle: "Export theme",
@@ -1096,6 +1150,11 @@ var Ze = {
 	copiedStatus: "Copied to the clipboard.",
 	exportedStatus: "File downloaded.",
 	invalidTheme: "Fix the invalid CSS override before copying or exporting.",
+	copyFailedStatus: "Could not copy. Select the text and copy it manually.",
+	exportFailedStatus: "Could not download the file. Try again.",
+	clipboardUnavailable: "Clipboard access is unavailable. Provide onCopy for this environment.",
+	invalidValue: "This value cannot be used in CSS. Remove semicolons, braces, angle brackets, backslashes and comment markers, and close every quote and bracket.",
+	invalidColor: "Enter a CSS color, such as oklch(0.6 0.2 250), or a var() reference.",
 	emptySearch: "No public theme variables match this search.",
 	inheritValue: "Inherit package value",
 	resetVariable: "Reset variable",
@@ -1104,8 +1163,6 @@ var Ze = {
 	changedCount: "Overrides: {{count}}",
 	cssOutputLabel: "Complete theme CSS",
 	cssOutputDescription: "A standalone light, dark, typography, shape, and structure contract for every public variable.",
-	overrideOutputLabel: "Override-only CSS",
-	overrideOutputDescription: "The compact alternative containing only values changed in this session.",
 	providerOutputLabel: "UIProvider config",
 	providerOutputDescription: "Mount-once display defaults for the application root.",
 	autoPalette: "Derive supporting colors",
@@ -1127,7 +1184,7 @@ var Ze = {
 	previewSuccess: "Healthy",
 	previewWarning: "Review",
 	previewContract: "CSS variables",
-	providerSettings: X,
+	providerSettings: Y,
 	groups: {
 		colors: "Colors",
 		states: "States",
@@ -1166,10 +1223,10 @@ var Ze = {
 };
 //#endregion
 //#region src/components/features/theme-tweaker/theme-tweaker.recipes.ts
-function Q(e, t, n) {
+function $(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function $(e, t) {
+function ot(e, t) {
 	let n = e.trim().match(/^#([\da-f]{3}|[\da-f]{6})$/i)?.[1], r = n?.length === 3 ? [...n].map((e) => e + e).join("") : n;
 	if (r) return [
 		0,
@@ -1183,7 +1240,7 @@ function $(e, t) {
 	let i = e.match(/oklch\(\s*([\d.]+)(%)?/i), a = Number.parseFloat(i?.[1] ?? "NaN") / (i?.[2] ? 100 : 1);
 	return Number.isFinite(a) ? a > .67 ? "oklch(0.18 0.01 260)" : "oklch(0.985 0 0)" : t === "dark" ? "oklch(0.18 0.01 260)" : "oklch(0.985 0 0)";
 }
-function Qe({ primary: e, mode: t = "light" }) {
+function st({ primary: e, mode: t = "light" }) {
 	let n = t === "dark", r = (e, t) => `color-mix(in oklab, ${n ? t : e} 94%, var(--primary))`;
 	return {
 		"--primary": e,
@@ -1197,7 +1254,7 @@ function Qe({ primary: e, mode: t = "light" }) {
 		"--warning-accent": r("oklch(0.53 0.11 65)", "oklch(0.81 0.12 75)"),
 		"--destructive": r("oklch(0.55 0.17 25)", "oklch(0.74 0.14 25)"),
 		"--destructive-foreground": n ? "oklch(0.23 0.035 25)" : "oklch(0.985 0 0)",
-		"--primary-foreground": $(e, t),
+		"--primary-foreground": ot(e, t),
 		"--secondary": "color-mix(in oklab, var(--primary) 10%, var(--background))",
 		"--secondary-foreground": "var(--foreground)",
 		"--muted": "color-mix(in oklab, var(--primary) 7%, var(--background))",
@@ -1211,6 +1268,9 @@ function Qe({ primary: e, mode: t = "light" }) {
 		"--chart-3": r("oklch(0.56 0.15 285)", "oklch(0.76 0.15 285)"),
 		"--chart-4": r("oklch(0.58 0.14 330)", "oklch(0.76 0.14 330)"),
 		"--chart-5": r("oklch(0.6 0.12 60)", "oklch(0.76 0.12 60)"),
+		"--chart-6": r("oklch(0.55 0.17 20)", "oklch(0.72 0.15 20)"),
+		"--chart-7": r("oklch(0.74 0.13 95)", "oklch(0.86 0.13 95)"),
+		"--chart-8": r("oklch(0.62 0.13 130)", "oklch(0.8 0.14 130)"),
 		"--sidebar-primary": "var(--primary)",
 		"--sidebar-primary-foreground": "var(--primary-foreground)",
 		"--sidebar-accent": "var(--accent)",
@@ -1219,13 +1279,13 @@ function Qe({ primary: e, mode: t = "light" }) {
 		"--sidebar-ring": "var(--ring)"
 	};
 }
-var $e = {
+var ct = {
 	xxs: .75,
 	xs: .75,
 	pxs: .8125,
 	sm: .875,
 	base: 1
-}, et = [
+}, lt = [
 	"lg",
 	"xl",
 	"2xl",
@@ -1237,19 +1297,19 @@ var $e = {
 	"8xl",
 	"9xl"
 ];
-function tt({ baseSize: e, ratio: t = 1.2 }) {
-	let n = Q(e, 14, 20), r = Q(t, 1.125, 1.333), i = {};
-	for (let [e, t] of Object.entries($e)) {
+function ut({ baseSize: e, ratio: t = 1.2 }) {
+	let n = $(e, 14, 20), r = $(t, 1.125, 1.333), i = {};
+	for (let [e, t] of Object.entries(ct)) {
 		let r = Math.max(12, n * t);
 		i[`--text-${e}`] = `${Number((r / 16).toFixed(4))}rem`, i[`--text-${e}--line-height`] = `${Number((Math.max(r + 6, r * 1.45) / r).toFixed(4))}`;
 	}
-	return et.forEach((e, t) => {
+	return lt.forEach((e, t) => {
 		let a = n * r ** (t + 1);
-		i[`--text-${e}`] = `${Number((a / 16).toFixed(4))}rem`, i[`--text-${e}--line-height`] = `${Number(Q(1.55 - t * .065, 1, 1.5).toFixed(4))}`;
+		i[`--text-${e}`] = `${Number((a / 16).toFixed(4))}rem`, i[`--text-${e}--line-height`] = `${Number($(1.55 - t * .065, 1, 1.5).toFixed(4))}`;
 	}), i;
 }
-function nt({ intensity: e }) {
-	let t = Q(e, 0, 1), n = (e) => Number((t * e).toFixed(3));
+function dt({ intensity: e }) {
+	let t = $(e, 0, 1), n = (e) => Number((t * e).toFixed(3));
 	return {
 		"--shadow-2xs": `0 1px 2px 0 oklch(0 0 0 / ${n(.06)})`,
 		"--shadow-xs": `0 1px 3px 0 oklch(0 0 0 / ${n(.07)})`,
@@ -1263,28 +1323,28 @@ function nt({ intensity: e }) {
 }
 //#endregion
 //#region src/components/features/theme-tweaker/theme-tweaker.tsx
-var rt = [
+var ft = [
 	"colors",
 	"states",
 	"typography",
 	"shape",
 	"structure",
 	"defaults"
-], it = {
-	colors: O,
-	states: k,
-	typography: je,
-	shape: ke,
-	structure: we,
-	defaults: Oe
-};
-function at({ title: e, description: t, code: n, copyLabel: r, downloadLabel: i, onCopy: a, onDownload: o, downloading: s = !1 }) {
-	let f = C();
-	return /* @__PURE__ */ D(p, {
-		render: /* @__PURE__ */ E("section", { "aria-labelledby": f }),
+], pt = {
+	colors: Oe,
+	states: Me,
+	typography: O,
+	shape: je,
+	structure: Ee,
+	defaults: D
+}, mt = 16, ht = 1.2, gt = .8, _t = 80;
+function vt({ title: e, description: t, code: n, copyLabel: r, downloadLabel: i, onCopy: a, onDownload: o, downloading: s = !1 }) {
+	let f = ye();
+	return /* @__PURE__ */ E(p, {
+		render: /* @__PURE__ */ T("section", { "aria-labelledby": f }),
 		gap: "md",
 		className: "theme-tweaker--export-artifact min-w-0",
-		children: [/* @__PURE__ */ D(p, {
+		children: [/* @__PURE__ */ E(p, {
 			direction: {
 				base: "vertical",
 				sm: "horizontal"
@@ -1296,150 +1356,153 @@ function at({ title: e, description: t, code: n, copyLabel: r, downloadLabel: i,
 			justify: { sm: "between" },
 			gap: "md",
 			className: "theme-tweaker--export-artifact-header",
-			children: [/* @__PURE__ */ D(p, {
+			children: [/* @__PURE__ */ E(p, {
 				gap: "dense",
 				className: "min-w-0",
-				children: [/* @__PURE__ */ E(u, {
+				children: [/* @__PURE__ */ T(l, {
 					className: "text-inherit",
 					id: f,
 					tag: "h3",
 					children: e
-				}), /* @__PURE__ */ E(l, {
+				}), /* @__PURE__ */ T(c, {
 					size: "xs",
 					type: "secondary",
 					children: t
 				})]
-			}), /* @__PURE__ */ D(p, {
+			}), /* @__PURE__ */ E(p, {
 				direction: "horizontal",
 				gap: "xs",
 				align: "center",
 				wrap: !0,
 				className: "theme-tweaker--export-artifact-actions sm:shrink-0",
-				children: [/* @__PURE__ */ E(c, {
+				children: [/* @__PURE__ */ T(d, {
 					type: "button",
 					size: "sm",
 					tone: "secondary",
 					buttonStyle: "outline",
-					icon: xe,
+					icon: Ce,
 					onClick: a,
 					children: r
-				}), /* @__PURE__ */ E(c, {
+				}), /* @__PURE__ */ T(d, {
 					tone: "primary",
 					type: "button",
 					size: "sm",
-					icon: Se,
+					icon: we,
 					loading: s,
 					onClick: o,
 					children: i
 				})]
 			})]
-		}), /* @__PURE__ */ E("pre", {
+		}), /* @__PURE__ */ T("pre", {
 			tabIndex: 0,
 			"aria-label": e,
-			className: `theme-tweaker--export-code max-h-48 min-w-0 overflow-auto rounded-radius border border-border bg-muted/30 p-surface-xs font-mono text-xs leading-relaxed text-foreground outline-none ${d.frame} sm:max-h-72`,
-			children: /* @__PURE__ */ E("code", { children: n })
+			className: `theme-tweaker--export-code max-h-48 min-w-0 overflow-auto rounded-radius border border-border bg-muted/30 p-surface-xs font-mono text-xs leading-relaxed text-foreground outline-none ${u.frame} sm:max-h-72`,
+			children: /* @__PURE__ */ T("code", { children: n })
 		})]
 	});
 }
-function ot(e, t) {
+function yt(e, t, n) {
+	if (t && t.trim().length !== 0) {
+		if (A(t)) return n.invalidValue ?? Q.invalidValue;
+		if (e.kind === "color" && !ze(t)) return n.invalidColor ?? Q.invalidColor;
+	}
+}
+function bt(e, t) {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? Math.min(t.max, Math.max(t.min, n)) : t.min;
 }
-function st(e, t) {
+function xt(e, t) {
 	let n = t.decimalPlaces ?? 3;
 	return `${Number(e.toFixed(n))}${t.unit ?? ""}`;
 }
-function ct(e, t) {
+function St(e, t) {
 	return e === "document" ? document.documentElement : e === "self" || e === null ? t : typeof e == "function" ? e() : e ?? t;
 }
-function lt(e, t) {
-	if (typeof document > "u" || typeof window > "u") return M(e);
-	let n = document.documentElement, r = [...new Set(t.map((e) => e.name))], i = n.classList.contains("light"), a = n.classList.contains("dark"), o = new Map(r.map((e) => [e, {
-		value: n.style.getPropertyValue(e),
-		priority: n.style.getPropertyPriority(e)
-	}])), s = (t) => {
-		for (let e of r) n.style.removeProperty(e);
-		n.classList.toggle("light", t === "light"), n.classList.toggle("dark", t === "dark");
-		for (let [r, i] of Object.entries(B(e, t))) typeof i == "string" && n.style.setProperty(r, i);
-		let i = window.getComputedStyle(n);
-		return Object.fromEntries(r.map((e) => [e, i.getPropertyValue(e).trim()]).filter((e) => e[1].length > 0));
-	};
-	try {
-		let n = s("light"), r = s("dark"), i = new Set(t.filter((e) => e.scope === "shared").map((e) => e.name));
-		return M({
-			mode: e.mode,
-			shared: Object.fromEntries(Object.entries(n).filter(([e]) => i.has(e))),
-			light: Object.fromEntries(Object.entries(n).filter(([e]) => !i.has(e))),
-			dark: Object.fromEntries(Object.entries(r).filter(([e]) => !i.has(e)))
-		});
-	} finally {
-		for (let e of r) {
-			let t = o.get(e);
-			t?.value ? n.style.setProperty(e, t.value, t.priority) : n.style.removeProperty(e);
+function Ct(e, t, n) {
+	if (typeof document > "u" || typeof window > "u") return j(e);
+	let r = !n || n === document.documentElement ? document.body : n, i = [...new Set(t.map((e) => e.name))], a = (t) => {
+		let n = document.createElement("div");
+		n.setAttribute("data-theme-tweaker-probe", t), n.setAttribute("aria-hidden", "true"), n.hidden = !0, n.className = t;
+		for (let [r, i] of Object.entries(L(e, t))) typeof i == "string" && n.style.setProperty(r, i);
+		r.append(n);
+		try {
+			let e = window.getComputedStyle(n);
+			return Object.fromEntries(i.map((t) => [t, e.getPropertyValue(t).trim()]).filter((e) => e[1].length > 0));
+		} finally {
+			n.remove();
 		}
-		n.classList.toggle("light", i), n.classList.toggle("dark", a);
-	}
+	}, o = a("light"), s = a("dark"), c = new Set(t.filter((e) => e.scope === "shared").map((e) => e.name));
+	return j({
+		mode: e.mode,
+		shared: Object.fromEntries(Object.entries(o).filter(([e]) => c.has(e))),
+		light: Object.fromEntries(Object.entries(o).filter(([e]) => !c.has(e))),
+		dark: Object.fromEntries(Object.entries(s).filter(([e]) => !c.has(e)))
+	});
 }
-function ut({ field: e, value: t, effectiveValue: n, onChange: r, onReset: i, strings: o }) {
-	let s = `theme-variable-${C().replace(/:/g, "")}`, u = /* @__PURE__ */ E(c, {
+function wt({ field: e, value: t, effectiveValue: n, error: r, onChange: i, onReset: o, strings: s }) {
+	let l = `theme-variable-${ye().replace(/:/g, "")}`, u = `${l}-error`, f = !!r, m = f ? u : void 0, h = /* @__PURE__ */ T(d, {
 		type: "button",
 		iconOnly: !0,
 		tone: "secondary",
 		buttonStyle: "ghost",
-		icon: Ee,
-		withTooltip: o.resetVariable,
-		"aria-label": `${o.resetVariable}: ${e.label}`,
+		icon: ke,
+		withTooltip: s.resetVariable,
+		"aria-label": `${s.resetVariable}: ${e.label}`,
 		disabled: !t,
-		onClick: i,
-		children: /* @__PURE__ */ E(l, {
+		onClick: o,
+		children: /* @__PURE__ */ T(c, {
 			tag: "span",
 			size: "inherit",
 			className: "sr-only",
-			children: o.resetVariable
+			children: s.resetVariable
 		})
-	}), d = e.placeholder ?? n ?? o.inheritValue, f;
-	if (e.kind === "color") f = /* @__PURE__ */ D(p, {
+	}), g = e.placeholder ?? n ?? s.inheritValue, _;
+	if (e.kind === "color") _ = /* @__PURE__ */ E(p, {
 		direction: "horizontal",
 		gap: "xs",
 		align: "center",
 		wrap: !1,
-		children: [/* @__PURE__ */ E(ue, {
-			id: s,
+		children: [/* @__PURE__ */ T(le, {
+			id: l,
 			"aria-label": e.label,
 			"aria-description": e.description,
+			"aria-describedby": m,
+			invalid: f,
 			value: t,
 			previewValue: t || n || `var(${e.name})`,
-			pickerAriaLabel: a(o.chooseColor, { label: e.label }),
-			onValueChange: r,
-			placeholder: d,
+			pickerAriaLabel: a(s.chooseColor, { label: e.label }),
+			onValueChange: i,
+			placeholder: g,
 			className: "min-w-0 flex-1"
-		}), u]
+		}), h]
 	});
 	else if (e.control?.type === "range") {
-		let i = ot(t || n, e.control);
-		f = /* @__PURE__ */ D(p, {
+		let r = bt(t || n, e.control);
+		_ = /* @__PURE__ */ E(p, {
 			gap: "sm",
-			children: [/* @__PURE__ */ E(de, {
-				id: `${s}-slider`,
-				"aria-label": a(o.adjustVariable, { label: e.label }),
-				value: i,
+			children: [/* @__PURE__ */ T(ue, {
+				id: `${l}-slider`,
+				"aria-label": a(s.adjustVariable, { label: e.label }),
+				value: r,
 				min: e.control.min,
 				max: e.control.max,
 				step: e.control.step,
-				onValueChange: (t) => r(st(t, e.control))
-			}), /* @__PURE__ */ D(p, {
+				onValueChange: (t) => i(xt(t, e.control))
+			}), /* @__PURE__ */ E(p, {
 				direction: "horizontal",
 				gap: "xs",
 				align: "center",
 				wrap: !1,
-				children: [/* @__PURE__ */ E(p, {
+				children: [/* @__PURE__ */ T(p, {
 					gap: "none",
 					className: "w-28 max-w-full shrink-0",
-					children: /* @__PURE__ */ E(fe, {
-						id: s,
+					children: /* @__PURE__ */ T(de, {
+						id: l,
 						"aria-label": e.label,
 						"aria-description": e.description,
-						value: String(i),
+						"aria-describedby": m,
+						invalid: f,
+						value: String(r),
 						decimalPlaces: e.control.decimalPlaces ?? 3,
 						min: e.control.min,
 						max: e.control.max,
@@ -1448,64 +1511,68 @@ function ut({ field: e, value: t, effectiveValue: n, onChange: r, onReset: i, st
 						endAddon: e.control.unit,
 						onChange: (t) => {
 							let n = t.target.value.trim();
-							r(n ? `${n}${e.control?.unit ?? ""}` : "");
+							i(n ? `${n}${e.control?.unit ?? ""}` : "");
 						},
 						className: "font-mono tabular-nums"
 					})
-				}), u]
+				}), h]
 			})]
 		});
-	} else f = e.kind === "font" || e.kind === "shadow" ? /* @__PURE__ */ D(p, {
+	} else _ = e.kind === "font" || e.kind === "shadow" ? /* @__PURE__ */ E(p, {
 		direction: "horizontal",
 		gap: "xs",
 		align: "start",
 		wrap: !1,
-		children: [/* @__PURE__ */ E(p, {
+		children: [/* @__PURE__ */ T(p, {
 			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ E(le, {
-				id: s,
+			children: /* @__PURE__ */ T(ce, {
+				id: l,
 				"aria-label": e.label,
 				"aria-description": e.description,
+				"aria-describedby": m,
+				invalid: f,
 				value: t,
-				onChange: (e) => r(e.target.value),
-				placeholder: d,
+				onChange: (e) => i(e.target.value),
+				placeholder: g,
 				minRows: 2,
 				autoResize: !0,
 				className: "font-mono"
 			})
-		}), u]
-	}) : /* @__PURE__ */ D(p, {
+		}), h]
+	}) : /* @__PURE__ */ E(p, {
 		direction: "horizontal",
 		gap: "xs",
 		align: "center",
 		wrap: !1,
-		children: [/* @__PURE__ */ E(v, {
-			id: s,
+		children: [/* @__PURE__ */ T(y, {
+			id: l,
 			"aria-label": e.label,
 			"aria-description": e.description,
+			"aria-describedby": m,
+			invalid: f,
 			value: t,
-			onChange: (e) => r(e.target.value),
-			placeholder: d,
+			onChange: (e) => i(e.target.value),
+			placeholder: g,
 			className: "min-w-0 flex-1 font-mono"
-		}), u]
+		}), h]
 	});
-	return /* @__PURE__ */ E(y, {
-		label: /* @__PURE__ */ D(p, {
-			render: /* @__PURE__ */ E("span", {}),
+	return /* @__PURE__ */ T(b, {
+		label: /* @__PURE__ */ E(p, {
+			render: /* @__PURE__ */ T("span", {}),
 			direction: "horizontal",
 			gap: "sm",
 			align: "baseline",
 			justify: "between",
 			wrap: !0,
 			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ E(l, {
+			children: [/* @__PURE__ */ T(c, {
 				type: "inherit",
 				tag: "span",
 				size: "inherit",
 				weight: "medium",
 				className: "min-w-0",
 				children: e.label
-			}), /* @__PURE__ */ E(oe, {
+			}), /* @__PURE__ */ T(ae, {
 				size: "xs",
 				type: "secondary",
 				weight: "regular",
@@ -1513,52 +1580,54 @@ function ut({ field: e, value: t, effectiveValue: n, onChange: r, onReset: i, st
 				children: e.name
 			})]
 		}),
-		htmlFor: s,
+		htmlFor: l,
+		error: r,
+		supportingTextId: u,
 		className: "theme-tweaker--field min-w-0 border-t border-border/60 py-row-y first:border-t-0",
-		children: f
+		children: _
 	});
 }
-function dt({ strings: e }) {
-	return /* @__PURE__ */ E(ne, {
+function Tt({ strings: e }) {
+	return /* @__PURE__ */ T(te, {
 		title: e.previewTitle,
 		description: e.previewDescription,
 		className: "theme-tweaker--preview-card",
-		children: /* @__PURE__ */ D(p, {
+		children: /* @__PURE__ */ E(p, {
 			gap: "lg",
 			children: [
-				/* @__PURE__ */ D(p, {
+				/* @__PURE__ */ E(p, {
 					direction: "horizontal",
 					gap: "sm",
 					wrap: !0,
 					children: [
-						/* @__PURE__ */ E(_, {
+						/* @__PURE__ */ T(v, {
 							tone: "success",
 							children: e.previewSuccess
 						}),
-						/* @__PURE__ */ E(_, {
+						/* @__PURE__ */ T(v, {
 							tone: "warning",
 							children: e.previewWarning
 						}),
-						/* @__PURE__ */ E(_, {
+						/* @__PURE__ */ T(v, {
 							tone: "secondary",
 							children: e.previewContract
 						})
 					]
 				}),
-				/* @__PURE__ */ E(pe, {
+				/* @__PURE__ */ T(fe, {
 					variant: "muted",
 					padding: "default",
-					media: /* @__PURE__ */ E(O, {}),
+					media: /* @__PURE__ */ T(Oe, {}),
 					mediaVariant: "icon",
 					title: e.previewItemTitle,
 					description: e.previewItemDescription,
-					trailing: /* @__PURE__ */ E(be, { className: "size-icon text-success" })
+					trailing: /* @__PURE__ */ T(Se, { className: "size-icon text-success" })
 				}),
-				/* @__PURE__ */ E(y, {
+				/* @__PURE__ */ T(b, {
 					label: e.previewFieldLabel,
-					children: /* @__PURE__ */ E(v, { placeholder: e.previewFieldPlaceholder })
+					children: /* @__PURE__ */ T(y, { placeholder: e.previewFieldPlaceholder })
 				}),
-				/* @__PURE__ */ E(c, {
+				/* @__PURE__ */ T(d, {
 					tone: "primary",
 					type: "button",
 					children: e.previewAction
@@ -1567,60 +1636,60 @@ function dt({ strings: e }) {
 		})
 	});
 }
-function ft(e, t, n) {
+function Et(e, t, n) {
 	let r = t.scope === "shared" ? "shared" : e.mode, i = { ...e[r] };
 	return n.trim().length === 0 ? delete i[t.name] : i[t.name] = n, {
 		...e,
 		[r]: i
 	};
 }
-var pt = S(function({ value: e, defaultValue: t, onValueChange: n, onModeChange: r, fields: i = Ye, target: d = "self", apply: m = !0, manageModeClass: ee = !0, preview: h, fileName: te = "admin-ui-theme.css", config: g, defaultConfig: oe, onConfigChange: ce, providerFileName: le = "admin-ui.config.ts", showIntro: x = !0, selectors: ue, onExport: fe, onCopy: pe, onReset: S, onError: C, actionsSlot: be, strings: xe, className: Se, ...Ce }, we) {
-	let O = o(Ze, xe), [Oe, ke] = T(() => M(t)), k = w(() => e ? M(e) : Oe, [Oe, e]), [je, Me] = T(() => R(oe)), A = w(() => R(g ?? je), [g, je]), [j, Ne] = T("colors"), [N, P] = T(""), [F, I] = T(!0), [L, Pe] = T(16), [z, Ie] = T(1.2), [Be, He] = T(.8), [H, U] = T("idle"), W = ie(), [Ue, We] = T(!1), G = ye(null);
-	ve(we, () => G.current), Ve({
+var Dt = _e(function({ value: e, defaultValue: t, onValueChange: n, onModeChange: r, fields: i = tt, target: u = "self", apply: m = !0, manageModeClass: h = !0, preview: g, fileName: _ = "admin-ui-theme.css", config: ee, defaultConfig: ae, onConfigChange: se, providerFileName: ce = "admin-ui.config.ts", showIntro: S = !0, selectors: le, onExport: de, onCopy: fe, onReset: _e, onError: Se, actionsSlot: Ce, strings: we, className: Te, ...Ee }, Oe) {
+	let D = o(Q, we), [je, Me] = w(() => j(t)), O = C(() => e ? j(e) : je, [je, e]), [Pe, Fe] = w(() => I(ae)), Ie = C(() => I(ee ?? Pe), [ee, Pe]), [k, Le] = w("colors"), [Re, A] = w(""), [ze, Be] = w(!0), [M, N] = w(mt), [P, F] = w(ht), [Ve, He] = w(gt), [R, z] = w("idle"), B = re(), [V, Ye] = w(!1), H = xe(null), Xe = `theme-tweaker-status-${ye().replace(/:/g, "")}`;
+	be(Oe, () => H.current), Je({
 		apply: m,
-		manageModeClass: ee,
-		selfRef: G,
-		target: d,
-		theme: k
+		manageModeClass: h,
+		selfRef: H,
+		target: u,
+		theme: O
 	});
-	let [K, Ge] = T(() => M(k)), [Ke, qe] = T({});
-	_e(() => {
+	let [U, Ze] = w(() => j(O)), [W, Qe] = w({});
+	ve(() => {
 		if (typeof window > "u") return;
 		let e = window.setTimeout(() => {
-			let e = ct(d, G.current);
+			let e = St(u, H.current);
 			if (!e) return;
 			let t = window.getComputedStyle(e);
-			qe(Object.fromEntries(i.map((e) => [e.name, t.getPropertyValue(e.name).trim()]))), Ge(lt(k, i));
-		}, 0);
+			Qe(Object.fromEntries(i.map((e) => [e.name, t.getPropertyValue(e.name).trim()]))), Ze(Ct(O, i, e));
+		}, _t);
 		return () => window.clearTimeout(e);
 	}, [
 		m,
 		i,
-		d,
-		k
+		u,
+		O
 	]);
-	let { artifact: q, error: J } = w(() => {
+	let { artifact: G, error: K } = C(() => {
 		try {
-			let e = M({
-				mode: k.mode,
+			let e = j({
+				mode: O.mode,
 				shared: {
-					...K.shared,
-					...k.shared
+					...U.shared,
+					...O.shared
 				},
 				light: {
-					...K.light,
-					...k.light
+					...U.light,
+					...O.light
 				},
 				dark: {
-					...K.dark,
-					...k.dark
+					...U.dark,
+					...O.dark
 				}
 			});
 			return {
-				artifact: Le(k, te, { selectors: ue }, {
+				artifact: We(O, _, { selectors: le }, {
 					resolvedTheme: e,
-					providerConfig: A,
-					providerFileName: le
+					providerConfig: Ie,
+					providerFileName: ce
 				}),
 				error: null
 			};
@@ -1631,23 +1700,27 @@ var pt = S(function({ value: e, defaultValue: t, onValueChange: n, onModeChange:
 			};
 		}
 	}, [
-		te,
-		A,
+		_,
+		Ie,
+		ce,
+		U,
 		le,
-		K,
-		ue,
-		k
-	]), Je = q?.cssText ?? `/* ${O.invalidTheme} */\n`, Y = w(() => Fe(k), [k]), X = N.trim().toLowerCase(), Z = w(() => i.filter((e) => !X && e.group !== j ? !1 : !X || [
+		O
+	]), $e = G?.cssText ?? `/* ${D.invalidTheme} */\n`, et = C(() => i.some((e) => (e.scope === "shared" ? [O.shared] : [O.light, O.dark]).some((t) => yt(e, t[e.name], D) !== void 0)), [
+		i,
+		D,
+		O
+	]), q = !!K || et, J = C(() => Ue(O), [O]), Y = Re.trim().toLowerCase(), X = C(() => i.filter((e) => !Y && e.group !== k ? !1 : !Y || [
 		e.name,
 		e.label,
 		e.description
-	].filter(Boolean).some((e) => e?.toLowerCase().includes(X))), [
+	].filter(Boolean).some((e) => e?.toLowerCase().includes(Y))), [
 		i,
-		j,
-		X
-	]), Q = w(() => {
+		k,
+		Y
+	]), nt = C(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of Z) {
+		for (let t of X) {
 			let n = `${t.group}:${t.section}`, r = e.get(n);
 			r ? r.fields.push(t) : e.set(n, {
 				group: t.group,
@@ -1656,438 +1729,455 @@ var pt = S(function({ value: e, defaultValue: t, onValueChange: n, onModeChange:
 			});
 		}
 		return [...e.values()].sort((e, t) => Number(t.section === "brand-actions") - Number(e.section === "brand-actions"));
-	}, [Z]), $ = (t) => {
-		e === void 0 && ke(t), n?.(t), U("idle");
-	}, $e = (e) => {
-		g === void 0 && Me(e), ce?.(e), U("idle");
-	}, et = (e) => {
-		$({
-			...k,
-			[k.mode]: {
-				...k[k.mode],
+	}, [X]), Z = (t) => {
+		e === void 0 && Me(t), n?.(t), z("idle");
+	}, rt = (e) => {
+		ee === void 0 && Fe(e), se?.(e), z("idle");
+	}, it = (e) => {
+		Z({
+			...O,
+			[O.mode]: {
+				...O[O.mode],
 				...e
 			}
 		});
-	}, ot = (e) => {
-		$({
-			...k,
+	}, $ = (e) => {
+		Z({
+			...O,
 			shared: {
-				...k.shared,
+				...O.shared,
 				...e
 			}
 		});
-	}, st = (e) => {
-		e !== k.mode && ($({
-			...k,
+	}, ot = (e) => {
+		e !== O.mode && (Z({
+			...O,
 			mode: e
 		}), r?.(e));
-	}, pt = async () => {
+	}, ct = async () => {
 		try {
-			if (J) throw J;
-			if (We(!0), !q) throw Error(O.invalidTheme);
-			fe ? await fe(q) : Re(q), U("exported");
+			if (K) throw K;
+			if (Ye(!0), !G) throw Error(D.invalidTheme);
+			de ? await de(G) : Ge(G), z("exported");
 		} catch (e) {
-			C?.(e);
+			z("exportFailed"), Se?.(e);
 		} finally {
-			We(!1);
+			Ye(!1);
 		}
-	}, mt = async (e) => {
+	}, lt = async (e) => {
 		try {
-			if (pe) await pe(e);
+			if (fe) await fe(e);
 			else if (typeof navigator < "u" && navigator.clipboard) await navigator.clipboard.writeText(e);
-			else throw Error("Clipboard access is unavailable. Provide onCopy for this environment.");
-			U("copied");
+			else throw Error(D.clipboardUnavailable ?? Q.clipboardUnavailable);
+			z("copied");
 		} catch (e) {
-			C?.(e);
+			z("copyFailed"), Se?.(e);
 		}
-	}, ht = () => {
+	}, bt = () => {
 		try {
-			if (!q) throw J ?? Error(O.invalidTheme);
-			ze({
-				fileName: q.providerFileName,
-				text: q.providerConfigText,
+			if (!G) throw K ?? Error(D.invalidTheme);
+			Ke({
+				fileName: G.providerFileName,
+				text: G.providerConfigText,
 				mimeType: "text/typescript;charset=utf-8"
-			}), U("exported");
+			}), z("exported");
 		} catch (e) {
-			C?.(e);
+			z("exportFailed"), Se?.(e);
 		}
-	}, gt = () => {
-		let e = k, t = M({ mode: k.mode });
-		$(t), S?.(e), U("idle");
-	}, _t = J ? O.invalidTheme : H === "copied" ? O.copiedStatus : H === "exported" ? O.exportedStatus : null, vt = j === "colors" ? /* @__PURE__ */ E(b, {
+	}, xt = () => {
+		let e = O, t = j({ mode: O.mode });
+		Z(t), N(mt), F(ht), He(gt), _e?.(e), z("idle");
+	}, Dt = q || R === "copyFailed" || R === "exportFailed", Ot = q ? D.invalidTheme : R === "copied" ? D.copiedStatus : R === "exported" ? D.exportedStatus : R === "copyFailed" ? D.copyFailedStatus ?? Q.copyFailedStatus : R === "exportFailed" ? D.exportFailedStatus ?? Q.exportFailedStatus : null, kt = k === "colors" ? /* @__PURE__ */ T(x, {
 		className: "theme-tweaker--recipe",
-		label: O.autoPalette,
-		description: O.autoPaletteDescription,
-		value: F,
-		onValueChange: I
-	}) : j === "typography" ? /* @__PURE__ */ E(ne, {
-		title: O.typeRecipeTitle,
-		description: O.typeRecipeDescription,
+		label: D.autoPalette,
+		description: D.autoPaletteDescription,
+		value: ze,
+		onValueChange: Be
+	}) : k === "typography" ? /* @__PURE__ */ T(te, {
+		title: D.typeRecipeTitle,
+		description: D.typeRecipeDescription,
 		surface: "flat",
 		padding: "none",
 		className: "theme-tweaker--recipe",
-		children: /* @__PURE__ */ D(f, {
+		children: /* @__PURE__ */ E(f, {
 			columns: 1,
-			gap: re.related,
+			gap: ne.related,
 			className: "@2xl/theme-tweaker-controls:grid-cols-2",
-			children: [/* @__PURE__ */ E(y, {
-				label: O.baseTypeSize,
-				children: /* @__PURE__ */ E(de, {
-					"aria-label": O.baseTypeSize,
-					value: L,
+			children: [/* @__PURE__ */ T(b, {
+				label: D.baseTypeSize,
+				children: /* @__PURE__ */ T(ue, {
+					"aria-label": D.baseTypeSize,
+					value: M,
 					min: 14,
 					max: 20,
 					step: 1,
 					onValueChange: (e) => {
-						Pe(e), ot(tt({
+						N(e), $(ut({
 							baseSize: e,
-							ratio: z
+							ratio: P
 						}));
 					}
 				})
-			}), /* @__PURE__ */ E(y, {
-				label: O.typeRatio,
-				children: /* @__PURE__ */ E(de, {
-					"aria-label": O.typeRatio,
-					value: z,
+			}), /* @__PURE__ */ T(b, {
+				label: D.typeRatio,
+				children: /* @__PURE__ */ T(ue, {
+					"aria-label": D.typeRatio,
+					value: P,
 					min: 1.125,
 					max: 1.333,
 					step: .01,
 					onValueChange: (e) => {
-						Ie(e), ot(tt({
-							baseSize: L,
+						F(e), $(ut({
+							baseSize: M,
 							ratio: e
 						}));
 					}
 				})
 			})]
 		})
-	}) : j === "shape" ? /* @__PURE__ */ E(ne, {
-		title: O.elevationRecipeTitle,
-		description: O.elevationRecipeDescription,
+	}) : k === "shape" ? /* @__PURE__ */ T(te, {
+		title: D.elevationRecipeTitle,
+		description: D.elevationRecipeDescription,
 		surface: "flat",
 		padding: "none",
 		className: "theme-tweaker--recipe",
-		children: /* @__PURE__ */ E(y, {
-			label: O.elevationIntensity,
-			children: /* @__PURE__ */ E(de, {
-				"aria-label": O.elevationIntensity,
-				value: Be,
+		children: /* @__PURE__ */ T(b, {
+			label: D.elevationIntensity,
+			children: /* @__PURE__ */ T(ue, {
+				"aria-label": D.elevationIntensity,
+				value: Ve,
 				min: 0,
 				max: 1,
 				step: .05,
 				onValueChange: (e) => {
-					He(e), et(nt({ intensity: e }));
+					He(e), it(dt({ intensity: e }));
 				}
 			})
 		})
-	}) : null, yt = /* @__PURE__ */ D("div", {
-		className: s("grid min-w-0 grid-cols-1 gap-space-xl theme-tweaker--layout", h !== !1 && "@3xl/theme-tweaker:grid-cols-2"),
+	}) : null, At = /* @__PURE__ */ E("div", {
+		className: s("grid min-w-0 grid-cols-1 gap-space-xl theme-tweaker--layout", g !== !1 && "@3xl/theme-tweaker:grid-cols-2"),
 		children: [
-			/* @__PURE__ */ D(p, {
+			/* @__PURE__ */ E(p, {
 				gap: "lg",
 				className: "theme-tweaker--controls @container/theme-tweaker-controls min-w-0",
-				children: [/* @__PURE__ */ D(p, {
+				children: [/* @__PURE__ */ E(p, {
 					gap: "lg",
 					className: "theme-tweaker--header shrink-0",
 					children: [
-						x ? /* @__PURE__ */ D(p, {
+						S ? /* @__PURE__ */ E(p, {
 							gap: "normal",
 							className: "theme-tweaker--intro",
-							children: [/* @__PURE__ */ D(p, {
+							children: [/* @__PURE__ */ E(p, {
 								direction: "horizontal",
 								gap: "sm",
 								align: "center",
 								wrap: !0,
-								children: [/* @__PURE__ */ E(u, {
+								children: [/* @__PURE__ */ T(l, {
 									tag: "h2",
 									className: "theme-tweaker--title text-inherit",
-									children: O.title
-								}), /* @__PURE__ */ E(_, {
+									children: D.title
+								}), /* @__PURE__ */ T(v, {
 									tone: "secondary",
-									children: a(O.changedCount, { count: Y })
+									children: a(D.changedCount, { count: J })
 								})]
-							}), /* @__PURE__ */ E(l, {
+							}), /* @__PURE__ */ T(c, {
 								type: "secondary",
 								className: "theme-tweaker--description",
-								children: O.description
+								children: D.description
 							})]
 						}) : null,
-						/* @__PURE__ */ D(p, {
+						/* @__PURE__ */ E(p, {
 							direction: "horizontal",
 							justify: "between",
 							align: "center",
 							wrap: !0,
 							gap: "sm",
 							className: "theme-tweaker--toolbar",
-							children: [/* @__PURE__ */ E(p, {
+							children: [/* @__PURE__ */ T(p, {
 								direction: "horizontal",
 								gap: "sm",
 								align: "center",
 								wrap: !0,
-								children: /* @__PURE__ */ E(ge, {
-									value: k.mode,
-									onValueChange: (e) => st(e),
-									children: /* @__PURE__ */ D(he, { children: [/* @__PURE__ */ D(me, {
+								children: /* @__PURE__ */ T(he, {
+									value: O.mode,
+									onValueChange: (e) => ot(e),
+									children: /* @__PURE__ */ E(me, { children: [/* @__PURE__ */ E(pe, {
 										value: "light",
-										children: [/* @__PURE__ */ E(Ae, { className: "size-icon-sm" }), O.lightMode]
-									}), /* @__PURE__ */ D(me, {
+										children: [/* @__PURE__ */ T(Ne, { className: "size-icon-sm" }), D.lightMode]
+									}), /* @__PURE__ */ E(pe, {
 										value: "dark",
-										children: [/* @__PURE__ */ E(Te, { className: "size-icon-sm" }), O.darkMode]
+										children: [/* @__PURE__ */ T(De, { className: "size-icon-sm" }), D.darkMode]
 									})] })
 								})
-							}), /* @__PURE__ */ D(p, {
+							}), /* @__PURE__ */ E(p, {
 								direction: "horizontal",
 								gap: "xs",
 								align: "center",
 								justify: "end",
 								wrap: !1,
-								className: "theme-tweaker--actions",
-								children: [/* @__PURE__ */ E(c, {
-									tone: "primary",
-									type: "button",
-									disabled: !!J,
-									onClick: () => {
-										U("idle"), W.show();
-									},
-									children: O.export
-								}), be]
+								className: "theme-tweaker--actions min-w-0",
+								children: [
+									q ? /* @__PURE__ */ T(c, {
+										id: Xe,
+										tag: "span",
+										size: "xs",
+										type: "error",
+										role: "status",
+										"aria-live": "polite",
+										className: "theme-tweaker--toolbar-status min-w-0",
+										children: D.invalidTheme
+									}) : null,
+									/* @__PURE__ */ T(d, {
+										tone: "primary",
+										type: "button",
+										disabled: q,
+										"aria-describedby": q ? Xe : void 0,
+										onClick: () => {
+											z("idle"), B.show();
+										},
+										children: D.export
+									}),
+									Ce
+								]
 							})]
 						}),
-						/* @__PURE__ */ E(y, {
-							label: /* @__PURE__ */ E(l, {
+						/* @__PURE__ */ T(b, {
+							label: /* @__PURE__ */ T(c, {
 								tag: "span",
 								size: "inherit",
 								className: "sr-only",
-								children: O.searchLabel
+								children: D.searchLabel
 							}),
 							className: "theme-tweaker--search",
-							children: /* @__PURE__ */ E(v, {
-								value: N,
-								onChange: (e) => P(e.target.value),
-								placeholder: O.searchPlaceholder,
-								startIcon: De,
+							children: /* @__PURE__ */ T(y, {
+								value: Re,
+								onChange: (e) => A(e.target.value),
+								placeholder: D.searchPlaceholder,
+								startIcon: Ae,
 								clearable: !0,
-								onClear: () => P(""),
-								"aria-description": O.searchHint
+								onClear: () => A(""),
+								"aria-description": D.searchHint
 							})
 						})
 					]
-				}), /* @__PURE__ */ D(p, {
+				}), /* @__PURE__ */ E(p, {
 					gap: "lg",
 					className: "theme-tweaker--workspace min-h-0",
-					children: [/* @__PURE__ */ E("nav", {
-						"aria-label": O.groupNavigationLabel,
+					children: [/* @__PURE__ */ T("nav", {
+						"aria-label": D.groupNavigationLabel,
 						className: "theme-tweaker--navigation min-w-0",
-						children: /* @__PURE__ */ E(ge, {
-							value: j,
+						children: /* @__PURE__ */ T(he, {
+							value: k,
 							onValueChange: (e) => {
-								P(""), Ne(e);
+								A(""), Le(e);
 							},
 							className: "w-full",
-							children: /* @__PURE__ */ E(he, {
+							children: /* @__PURE__ */ T(me, {
 								scrollable: !0,
 								scrollStrings: {
-									previous: O.previousGroup,
-									next: O.nextGroup
+									previous: D.previousGroup,
+									next: D.nextGroup
 								},
 								className: "theme-tweaker--group-list",
-								children: rt.map((e) => {
-									let t = it[e];
-									return /* @__PURE__ */ D(me, {
+								children: ft.map((e) => {
+									let t = pt[e];
+									return /* @__PURE__ */ E(pe, {
 										value: e,
-										onClick: () => P(""),
+										onClick: () => A(""),
 										className: "theme-tweaker--group-trigger",
-										children: [/* @__PURE__ */ E(t, { "aria-hidden": "true" }), /* @__PURE__ */ E(l, {
+										children: [/* @__PURE__ */ T(t, { "aria-hidden": "true" }), /* @__PURE__ */ T(c, {
 											type: "inherit",
 											tag: "span",
 											size: "inherit",
 											weight: "medium",
 											className: "min-w-0 flex-1 truncate text-left",
-											children: O.groups[e]
+											children: D.groups[e]
 										})]
 									}, e);
 								})
 							})
 						})
-					}), /* @__PURE__ */ D(p, {
+					}), /* @__PURE__ */ E(p, {
 						gap: "lg",
 						className: "theme-tweaker--body theme-tweaker--editor min-h-0 min-w-0",
 						children: [
-							/* @__PURE__ */ D(p, {
+							/* @__PURE__ */ E(p, {
 								gap: "normal",
 								className: "theme-tweaker--editor-heading",
-								children: [/* @__PURE__ */ D(p, {
+								children: [/* @__PURE__ */ E(p, {
 									direction: "horizontal",
 									gap: "sm",
 									align: "center",
 									wrap: !0,
 									children: [
-										/* @__PURE__ */ E(u, {
+										/* @__PURE__ */ T(l, {
 											className: "text-inherit",
 											tag: "h3",
-											children: X ? O.allGroups : O.groups[j]
+											children: Y ? D.allGroups : D.groups[k]
 										}),
-										x ? null : /* @__PURE__ */ E(_, {
+										S ? null : /* @__PURE__ */ T(v, {
 											tone: "secondary",
-											children: a(O.changedCount, { count: Y })
+											children: a(D.changedCount, { count: J })
 										}),
-										X ? /* @__PURE__ */ E(_, {
+										Y ? /* @__PURE__ */ T(v, {
 											tone: "secondary",
 											role: "status",
 											"aria-live": "polite",
-											children: a(O.searchResults, { count: Z.length })
+											children: a(D.searchResults, { count: X.length })
 										}) : null
 									]
-								}), /* @__PURE__ */ E(l, {
+								}), /* @__PURE__ */ T(c, {
 									size: "xs",
 									type: "secondary",
-									children: X ? O.searchHint : O.groupDescriptions[j]
+									children: Y ? D.searchHint : D.groupDescriptions[k]
 								})]
 							}),
-							X ? null : vt,
-							j === "defaults" && !X ? /* @__PURE__ */ E(Xe, {
-								config: A,
-								onChange: $e,
-								strings: O.providerSettings
-							}) : Q.length > 0 ? /* @__PURE__ */ E(se, {
+							Y ? null : kt,
+							k === "defaults" && !Y ? /* @__PURE__ */ T(at, {
+								config: Ie,
+								onChange: rt,
+								strings: D.providerSettings
+							}) : nt.length > 0 ? /* @__PURE__ */ T(oe, {
 								multiple: !0,
-								defaultValue: [`${Q[0].group}:${Q[0].section}`],
+								defaultValue: [`${nt[0].group}:${nt[0].section}`],
 								variant: "bordered",
 								iconStyle: "none",
 								className: "theme-tweaker--sections shrink-0",
 								itemClassName: "theme-tweaker--section",
-								items: Q.map((e) => {
-									let t = new Set(e.fields.map((e) => e.scope)), n = t.size > 1 ? O.mixedScope : t.has("shared") ? O.sharedScope : k.mode === "light" ? O.lightMode : O.darkMode, r = X ? a(O.groupSectionLabel, {
-										group: O.groups[e.group],
-										section: O.sections[e.section]
-									}) : O.sections[e.section];
+								items: nt.map((e) => {
+									let t = new Set(e.fields.map((e) => e.scope)), n = t.size > 1 ? D.mixedScope : t.has("shared") ? D.sharedScope : O.mode === "light" ? D.lightMode : D.darkMode, r = Y ? a(D.groupSectionLabel, {
+										group: D.groups[e.group],
+										section: D.sections[e.section]
+									}) : D.sections[e.section];
 									return {
 										value: `${e.group}:${e.section}`,
 										title: r,
-										description: a(O.variableCount, { count: e.fields.length }),
-										badge: /* @__PURE__ */ E(_, {
+										description: a(D.variableCount, { count: e.fields.length }),
+										badge: /* @__PURE__ */ T(v, {
 											tone: "secondary",
 											children: n
 										}),
-										content: /* @__PURE__ */ E(p, {
+										content: /* @__PURE__ */ T(p, {
 											gap: "none",
 											className: "theme-tweaker--fields",
 											children: e.fields.map((e) => {
-												let t = e.scope === "shared" ? "shared" : k.mode, n = k[t][e.name] ?? "";
-												return /* @__PURE__ */ E(ut, {
+												let t = e.scope === "shared" ? "shared" : O.mode, n = O[t][e.name] ?? "";
+												return /* @__PURE__ */ T(wt, {
 													field: e,
 													value: n,
-													effectiveValue: Ke[e.name] ?? "",
-													strings: O,
+													effectiveValue: W[e.name] ?? "",
+													error: yt(e, n, D),
+													strings: D,
 													onChange: (t) => {
-														if (e.name === "--primary" && F && t.trim()) {
-															et(Qe({
+														if (e.name === "--primary" && ze && t.trim()) {
+															it(st({
 																primary: t,
-																mode: k.mode
+																mode: O.mode
 															}));
 															return;
 														}
-														$(ft(k, e, t));
+														Z(Et(O, e, t));
 													},
-													onReset: () => $(ft(k, e, ""))
+													onReset: () => Z(Et(O, e, ""))
 												}, e.name);
 											})
 										})
 									};
 								})
-							}, `${j}:${X}`) : /* @__PURE__ */ E(l, {
-								type: "secondary",
-								className: "theme-tweaker--empty rounded-radius border border-dashed border-border p-surface",
-								children: O.emptySearch
+							}, `${k}:${Y}`) : /* @__PURE__ */ T(ge, {
+								title: D.emptySearch,
+								description: !1,
+								surface: "wash",
+								padding: "sm",
+								className: "theme-tweaker--empty"
 							})
 						]
 					})]
 				})]
 			}),
-			h === !1 ? null : /* @__PURE__ */ E(p, {
+			g === !1 ? null : /* @__PURE__ */ T(p, {
 				className: "theme-tweaker--preview min-w-0 self-start",
-				children: h ?? /* @__PURE__ */ E(dt, { strings: O })
+				children: g ?? /* @__PURE__ */ T(Tt, { strings: D })
 			}),
-			/* @__PURE__ */ E(ae, {
-				...W.overlayProps,
-				title: O.exportDialogTitle,
-				description: O.exportDialogDescription,
+			/* @__PURE__ */ T(ie, {
+				...B.overlayProps,
+				title: D.exportDialogTitle,
+				description: D.exportDialogDescription,
 				showCloseButton: !1,
 				showCancel: !1,
 				showConfirm: !1,
-				surfaceStyle: B(k),
-				className: s("theme-tweaker--export-dialog sm:max-w-4xl", k.mode),
-				footer: /* @__PURE__ */ D(p, {
+				surfaceStyle: L(O),
+				className: s("theme-tweaker--export-dialog sm:max-w-4xl", O.mode),
+				footer: /* @__PURE__ */ E(p, {
 					direction: "horizontal",
 					align: "center",
 					justify: "between",
 					className: "theme-tweaker--export-footer w-full",
-					children: [/* @__PURE__ */ E(c, {
+					children: [/* @__PURE__ */ T(d, {
 						type: "button",
 						tone: "secondary",
 						buttonStyle: "ghost",
-						icon: Ee,
-						disabled: Y === 0,
-						onClick: gt,
-						children: O.reset
-					}), /* @__PURE__ */ E(c, {
-						onClick: W.hide,
-						children: O.close
+						icon: ke,
+						disabled: J === 0,
+						onClick: xt,
+						children: D.reset
+					}), /* @__PURE__ */ T(d, {
+						onClick: B.hide,
+						children: D.close
 					})]
 				}),
-				children: /* @__PURE__ */ D(p, {
+				children: /* @__PURE__ */ E(p, {
 					gap: "xl",
 					className: "theme-tweaker--export-body",
 					children: [
-						/* @__PURE__ */ E(at, {
-							title: O.cssOutputLabel,
-							description: O.cssOutputDescription,
-							code: Je,
-							copyLabel: O.copy,
-							downloadLabel: Ue ? O.exportPending : O.downloadCss,
-							downloading: Ue,
-							onCopy: () => void mt(Je),
-							onDownload: () => void pt()
+						/* @__PURE__ */ T(vt, {
+							title: D.cssOutputLabel,
+							description: D.cssOutputDescription,
+							code: $e,
+							copyLabel: D.copy,
+							downloadLabel: V ? D.exportPending : D.downloadCss,
+							downloading: V,
+							onCopy: () => void lt($e),
+							onDownload: () => void ct()
 						}),
-						/* @__PURE__ */ E(at, {
-							title: O.providerOutputLabel,
-							description: O.providerOutputDescription,
-							code: q?.providerConfigText ?? "",
-							copyLabel: O.copyProvider,
-							downloadLabel: O.downloadProvider,
-							onCopy: () => void mt(q?.providerConfigText ?? ""),
-							onDownload: ht
+						/* @__PURE__ */ T(vt, {
+							title: D.providerOutputLabel,
+							description: D.providerOutputDescription,
+							code: G?.providerConfigText ?? "",
+							copyLabel: D.copyProvider,
+							downloadLabel: D.downloadProvider,
+							onCopy: () => void lt(G?.providerConfigText ?? ""),
+							onDownload: bt
 						}),
-						_t ? /* @__PURE__ */ E(l, {
+						Ot ? /* @__PURE__ */ T(c, {
 							tag: "div",
 							size: "xs",
-							type: J ? "error" : "secondary",
-							role: "status",
+							type: Dt ? "error" : "secondary",
+							role: Dt ? "alert" : "status",
 							"aria-live": "polite",
 							className: "theme-tweaker--status",
-							children: _t
+							children: Ot
 						}) : null
 					]
 				})
 			})
 		]
 	});
-	return d === "self" ? /* @__PURE__ */ E(V, {
-		...Ce,
-		ref: G,
-		theme: m ? k : M({ mode: k.mode }),
-		className: s("theme-tweaker--component @container/theme-tweaker bg-background text-foreground", Se),
-		children: yt
-	}) : /* @__PURE__ */ E("div", {
-		...Ce,
-		ref: G,
-		className: s("theme-tweaker--component @container/theme-tweaker", Se),
-		children: yt
+	return u === "self" ? /* @__PURE__ */ T(qe, {
+		...Ee,
+		ref: H,
+		theme: m ? O : j({ mode: O.mode }),
+		className: s("theme-tweaker--component @container/theme-tweaker bg-background text-foreground", Te),
+		children: At
+	}) : /* @__PURE__ */ T("div", {
+		...Ee,
+		ref: H,
+		className: s("theme-tweaker--component @container/theme-tweaker", Te),
+		children: At
 	});
 });
-pt.displayName = "ThemeTweaker";
+Dt.displayName = "ThemeTweaker";
 //#endregion
-export { He as AdminUIThemeProvider, V as ThemeScope, pt as ThemeTweaker, B as adminUIThemeToStyle, Fe as countAdminUIThemeOverrides, M as createAdminUITheme, Ie as createScopedAdminUIThemeSelectors, R as createSerializableUIConfig, Le as createThemeTweakerExportArtifact, Me as defaultAdminUIThemeSelectors, X as defaultThemeProviderSettingsStrings, Ye as defaultThemeTweakerFields, Ze as defaultThemeTweakerStrings, nt as deriveAdminUIElevation, Qe as deriveAdminUIPalette, tt as deriveAdminUITypeScale, Re as downloadAdminUITheme, z as getActiveAdminUIThemeOverrides, N as isAdminUIThemeVariableName, L as serializeAdminUITheme, Pe as serializeUIProviderConfig };
+export { B as AdminUIThemeProvider, qe as ThemeScope, Dt as ThemeTweaker, L as adminUIThemeToStyle, Ue as countAdminUIThemeOverrides, j as createAdminUITheme, R as createScopedAdminUIThemeSelectors, I as createSerializableUIConfig, We as createThemeTweakerExportArtifact, Pe as defaultAdminUIThemeSelectors, Y as defaultThemeProviderSettingsStrings, tt as defaultThemeTweakerFields, Q as defaultThemeTweakerStrings, dt as deriveAdminUIElevation, st as deriveAdminUIPalette, ut as deriveAdminUITypeScale, Ge as downloadAdminUITheme, He as getActiveAdminUIThemeOverrides, Be as isAdminUIThemeVariableName, F as serializeAdminUITheme, Ve as serializeUIProviderConfig };
 
 //# sourceMappingURL=theme-tweaker.js.map