themelia-ui 1.0.0

package/dist/features/theme-tweaker.js

@@ -0,0 +1,1699 @@
+"use client";
+import "../core.css";
+import "../css/theme-tweaker.css";
+import { t as e } from "../cx--CBrhWH0.js";
+import { a as t, o as n } from "../typography-vC_wwEBm.js";
+import { _ as r, a as i, h as a, p as o, v as s } from "../feedback-DHdvxang.js";
+import { b as c, x as l } from "../ui-provider-DvO3G7xp.js";
+import { c as u } from "../buttons-CabBjPap.js";
+import { d, l as f } from "../display-DTWjv_bB.js";
+import { i as ee, o as p } from "../structure-es_UqqmD.js";
+import { B as m } from "../primitives-D-cyAv5O.js";
+import { t as h } from "../badge-DwsR_WXN.js";
+import { c as te, i as g, r as ne, t as re, u as ie } from "../item-CVi-_7OU.js";
+import { u as _ } from "../forms-BjJns3n7.js";
+import { t as ae } from "../strings-Co9_qArR.js";
+import { l as v } from "../text-inputs-BMW3hP0R.js";
+import { f as oe, h as se, p as ce } from "../navigation-CRCc8lpn.js";
+import { s as y, t as le } from "../choice-inputs-B4fseaKf.js";
+import { l as b, o as ue } from "../value-inputs-okQ1S7CX.js";
+import { t as de } from "../accordion-DnJSCoAA.js";
+import { r as fe } from "../dialog-CwOfwsHr.js";
+import { u as pe } from "../forms-numeric-BZUekO3C.js";
+import { i as me, r as he } from "../overlays-BN7GOm51.js";
+import { n as ge, r as _e, t as ve } from "../theming-CE6lkbbb.js";
+import { CheckCircle2Icon as ye, CopyIcon as be, DownloadIcon as xe, InfoIcon as Se, LayoutGridIcon as Ce, MoonIcon as we, PaletteIcon as x, RotateCcwIcon as Te, SearchIcon as Ee, Settings2Icon as De, ShapesIcon as Oe, ShieldCheckIcon as ke, SunIcon as Ae, TypeIcon as je } from "lucide-react";
+import { forwardRef as Me, useEffect as Ne, useId as S, useImperativeHandle as Pe, useMemo as C, useRef as Fe, useState as w } from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/components/features/theme-tweaker/theme-tweaker.utils.ts
+var D = {
+	shared: ":root",
+	light: ":root,\n.light",
+	dark: ".dark"
+}, Ie = /^--[a-z][a-z0-9-]*$/i, O = /[;{}]/;
+function k(e = {}) {
+	return {
+		mode: e.mode ?? "light",
+		shared: { ...e.shared ?? {} },
+		light: { ...e.light ?? {} },
+		dark: { ...e.dark ?? {} }
+	};
+}
+function A(e) {
+	return Ie.test(e);
+}
+function j(e, t = !0) {
+	return Object.entries(e).filter((e) => typeof e[1] == "string" && e[1].trim().length > 0).flatMap(([e, n]) => {
+		if (!A(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 (O.test(r) || i) {
+			if (!t) return [];
+			throw TypeError(`Unsafe CSS value for ${e}.`);
+		}
+		return [[e, r]];
+	}).sort(([e], [t]) => e.localeCompare(t));
+}
+function M(e, t) {
+	let n = e.trim();
+	if (n.length === 0 || O.test(n)) throw TypeError(`Invalid ${t} theme selector.`);
+	return n;
+}
+function N(e, t) {
+	let n = j(t);
+	return n.length === 0 ? null : [
+		e + " {",
+		...n.map(([e, t]) => `\t${e}: ${t};`),
+		"}"
+	].join("\n");
+}
+function P(e, t = {}) {
+	let n = t.selectors ?? D, r = [
+		N(M(n.shared, "shared"), e.shared),
+		N(M(n.light, "light"), e.light),
+		N(M(n.dark, "dark"), e.dark)
+	].filter((e) => e !== null), i = t.banner === !1 ? null : `/* ${t.banner ?? "Themelia UI theme overrides"} */`;
+	return `${[...i ? [i] : [], ...r.length > 0 ? r : ["/* No explicit overrides. */"]].join("\n\n")}\n`;
+}
+function F(e = {}) {
+	let t = c(l, e), { locale: n, formatRelativeTime: r, ...i } = t.dates;
+	return {
+		...t,
+		dates: i
+	};
+}
+function I(e = {}) {
+	let t = F(e);
+	return `import type { UIConfig } from "themelia-ui/ui-provider"\n\nexport const uiConfig = ${JSON.stringify(t, null, "	")} satisfies UIConfig\n`;
+}
+function L(e, t = e.mode) {
+	return {
+		...e.shared,
+		...e[t]
+	};
+}
+function R(e, t = e.mode) {
+	return Object.fromEntries(j(L(e, t), !1));
+}
+function Le(e) {
+	return j(e.shared, !1).length + j(e.light, !1).length + j(e.dark, !1).length;
+}
+function Re(e) {
+	let t = M(e, "shared");
+	return {
+		shared: t,
+		light: `${t},\n${t}.light,\n.light ${t}`,
+		dark: `${t}.dark,\n.dark ${t}`
+	};
+}
+function ze(e, t = "theme.css", n = {}, r = {}) {
+	let i = k(r.resolvedTheme ?? e), a = F(r.providerConfig);
+	return {
+		fileName: t,
+		cssText: P(i, {
+			...n,
+			banner: n.banner ?? "Themelia UI complete theme"
+		}),
+		overrideCssText: P(e, n),
+		theme: k(e),
+		resolvedTheme: i,
+		overrideCount: Le(e),
+		providerFileName: r.providerFileName ?? "ui.config.ts",
+		providerConfig: a,
+		providerConfigText: I(a)
+	};
+}
+function Be({ fileName: e, text: t, mimeType: n = "text/plain;charset=utf-8" }) {
+	if (typeof document > "u" || typeof URL > "u") throw Error("Downloading needs a browser document. Pass onExport for other environments.");
+	let r = URL.createObjectURL(new Blob([t], { type: n })), i = document.createElement("a");
+	i.href = r, i.download = e, i.hidden = !0, document.body.append(i), i.click(), i.remove(), URL.revokeObjectURL(r);
+}
+function Ve(e) {
+	Be({
+		fileName: e.fileName,
+		text: e.cssText,
+		mimeType: "text/css;charset=utf-8"
+	});
+}
+//#endregion
+//#region src/components/features/theme-tweaker/theme-scope.tsx
+var He = Me(function({ theme: t, mode: n = t.mode, className: r, style: i, children: a, ...o }, s) {
+	return /* @__PURE__ */ T("div", {
+		...o,
+		ref: s,
+		"data-theme": n,
+		className: e("theme-scope--component", n, r),
+		style: {
+			...R(t, n),
+			...i
+		},
+		children: a
+	});
+}), z = {
+	title: "Application defaults",
+	description: "The display behaviour that ships alongside the exported CSS.",
+	boundaryTitle: "Mount-once, not live",
+	boundaryDescription: "These take effect when UIProvider mounts. The CSS variables above preview live; these do not — remount the application root to see them.",
+	summary: {
+		locale: "Locale",
+		currency: "Currency",
+		density: "Density",
+		textSize: "Text size"
+	},
+	sections: {
+		regional: {
+			title: "Regional formatting",
+			description: "Locale, dates, and the currency amounts are written in."
+		},
+		presentation: {
+			title: "Presentation",
+			description: "Colour scheme, geometry scale, and the default type step."
+		},
+		money: {
+			title: "Money",
+			description: "How an amount is written, and whether a second currency shows."
+		}
+	},
+	labels: {
+		locale: "Locale",
+		defaultCurrency: "Default currency",
+		displayCurrency: "Display currency",
+		moneyFormat: "Money format",
+		firstDay: "First day of week",
+		dateFormat: "Date format",
+		textSize: "Default text size",
+		density: "Density",
+		scale: "Geometry scale",
+		typographyScale: "Type scale",
+		colorScheme: "Colour scheme",
+		dualPricing: "Dual pricing",
+		dualPricingMode: "When the second value shows",
+		dualPricingLayout: "Layout",
+		secondaryEmphasis: "Secondary emphasis"
+	},
+	dualPricingDescription: "Show a converted currency beside the primary one.",
+	displayCurrencyPlaceholder: "Optional",
+	options: {
+		default: "Default",
+		light: "Light",
+		dark: "Dark",
+		system: "System",
+		compact: "Compact",
+		comfortable: "Comfortable",
+		inherit: "Inherit",
+		xxs: "XXS",
+		xs: "XS",
+		pxs: "PXS",
+		sm: "SM",
+		base: "Base",
+		lg: "LG",
+		xl: "XL",
+		decimal: "Decimal",
+		"with-code": "With code",
+		"with-symbol": "With symbol",
+		"primary-only": "Primary only",
+		dual: "Always",
+		dynamic: "Only when they differ",
+		inline: "Inline",
+		stacked: "Stacked",
+		discrete: "Discrete",
+		muted: "Muted",
+		match: "Match",
+		hidden: "Hidden",
+		sunday: "Sunday",
+		monday: "Monday",
+		tuesday: "Tuesday",
+		wednesday: "Wednesday",
+		thursday: "Thursday",
+		friday: "Friday",
+		saturday: "Saturday"
+	}
+}, B = {
+	root: "theme-tweaker-module__root___e-O3h",
+	rootScoped: "theme-tweaker-module__rootScoped___rYQY4",
+	layout: "theme-tweaker-module__layout___8p3aF",
+	controls: "theme-tweaker-module__controls___9KKTI",
+	preview: "theme-tweaker-module__preview___PtajW",
+	minWidth: "theme-tweaker-module__minWidth___cvSsQ",
+	layoutWithPreview: "theme-tweaker-module__layoutWithPreview___rgpMU",
+	toolbar: "theme-tweaker-module__toolbar___FrCtV",
+	groupList: "theme-tweaker-module__groupList___nONGr",
+	groupTab: "theme-tweaker-module__groupTab___zZTFe",
+	groupLabel: "theme-tweaker-module__groupLabel___fEcqc",
+	fields: "theme-tweaker-module__fields___btYm-",
+	field: "theme-tweaker-module__field___Sz2vr",
+	fieldLabel: "theme-tweaker-module__fieldLabel___tjTUs",
+	controlRow: "theme-tweaker-module__controlRow___pxq9K",
+	controlInput: "theme-tweaker-module__controlInput___yzoNr",
+	monoInput: "theme-tweaker-module__monoInput___-pmCy",
+	numberInput: "theme-tweaker-module__numberInput___sCV48",
+	empty: "theme-tweaker-module__empty___fo5oM",
+	providerSettings: "theme-tweaker-module__providerSettings___pCmaA",
+	settingsGrid: "theme-tweaker-module__settingsGrid___mhn3K",
+	exportDialog: "theme-tweaker-module__exportDialog___W9OcW",
+	exportFooter: "theme-tweaker-module__exportFooter___k48VK",
+	exportBlock: "theme-tweaker-module__exportBlock___4EYdk",
+	exportBlockHeader: "theme-tweaker-module__exportBlockHeader___jlRWI",
+	exportCode: "theme-tweaker-module__exportCode___JtpAR",
+	previewCheck: "theme-tweaker-module__previewCheck___ZR8OQ"
+}, Ue = [
+	"sunday",
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday",
+	"saturday"
+];
+function V(e, t) {
+	return e.map((e) => ({
+		value: e,
+		label: t.options[e] ?? e.replaceAll("-", " ").replace(/\b\w/g, (e) => e.toUpperCase())
+	}));
+}
+function We({ config: t, onChange: o, strings: c = z, className: l }) {
+	let u = F(t), d = (e, t, n) => {
+		o({
+			...u,
+			[e]: {
+				...u[e],
+				[t]: n
+			}
+		});
+	}, f = (e, t) => {
+		o({
+			...u,
+			[e]: t
+		});
+	};
+	return /* @__PURE__ */ E(p, {
+		gap: "lg",
+		className: e("ui-config-settings--component", B.providerSettings, l),
+		children: [
+			/* @__PURE__ */ E(p, {
+				gap: "xs",
+				children: [/* @__PURE__ */ T(n, {
+					weight: "semibold",
+					children: c.title
+				}), /* @__PURE__ */ T(n, {
+					size: "xs",
+					type: "secondary",
+					children: c.description
+				})]
+			}),
+			/* @__PURE__ */ E(a, {
+				tone: "info",
+				role: "note",
+				children: [
+					/* @__PURE__ */ T(Se, { "aria-hidden": !0 }),
+					/* @__PURE__ */ T(s, { children: c.boundaryTitle }),
+					/* @__PURE__ */ T(r, { children: c.boundaryDescription }),
+					/* @__PURE__ */ T(i, { items: [
+						{
+							label: c.summary.locale,
+							value: u.formatting?.locale ?? c.options.default
+						},
+						{
+							label: c.summary.currency,
+							value: u.money?.defaultCurrency ?? c.options.default
+						},
+						{
+							label: c.summary.density,
+							value: c.options[u.density ?? "default"] ?? u.density
+						},
+						{
+							label: c.summary.textSize,
+							value: c.options[u.typography?.defaultTextSize ?? "sm"] ?? u.typography?.defaultTextSize
+						}
+					] })
+				]
+			}),
+			/* @__PURE__ */ T(de, {
+				multiple: !0,
+				defaultValue: ["regional"],
+				surface: "bordered",
+				media: "none",
+				items: [
+					{
+						value: "regional",
+						title: c.sections.regional.title,
+						description: c.sections.regional.description,
+						content: /* @__PURE__ */ E("div", {
+							className: B.settingsGrid,
+							children: [
+								/* @__PURE__ */ T(_, {
+									label: c.labels.locale,
+									children: /* @__PURE__ */ T(v, {
+										value: u.formatting?.locale ?? "",
+										onChange: (e) => d("formatting", "locale", e.target.value)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.firstDay,
+									children: /* @__PURE__ */ T(y, {
+										value: String(u.dates?.weekStartsOn ?? 1),
+										options: Ue.map((e, t) => ({
+											value: String(t),
+											label: c.options[e] ?? e
+										})),
+										onValueChange: (e) => e !== void 0 && d("dates", "weekStartsOn", Number(e))
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.dateFormat,
+									children: /* @__PURE__ */ T(v, {
+										value: u.dates?.format ?? "",
+										onChange: (e) => d("dates", "format", e.target.value),
+										className: B.monoInput
+									})
+								})
+							]
+						})
+					},
+					{
+						value: "presentation",
+						title: c.sections.presentation.title,
+						description: c.sections.presentation.description,
+						content: /* @__PURE__ */ E("div", {
+							className: B.settingsGrid,
+							children: [
+								/* @__PURE__ */ T(_, {
+									label: c.labels.colorScheme,
+									children: /* @__PURE__ */ T(y, {
+										value: u.colorScheme,
+										options: V([
+											"light",
+											"dark",
+											"system"
+										], c),
+										onValueChange: (e) => e !== void 0 && f("colorScheme", e)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.density,
+									children: /* @__PURE__ */ T(y, {
+										value: u.density,
+										options: V([
+											"compact",
+											"default",
+											"comfortable"
+										], c),
+										onValueChange: (e) => e !== void 0 && f("density", e)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.textSize,
+									children: /* @__PURE__ */ T(y, {
+										value: u.typography?.defaultTextSize,
+										options: V([
+											"inherit",
+											"xxs",
+											"xs",
+											"pxs",
+											"sm",
+											"base",
+											"lg",
+											"xl"
+										], c),
+										onValueChange: (e) => e !== void 0 && d("typography", "defaultTextSize", e)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.scale,
+									children: /* @__PURE__ */ T(b, {
+										"aria-label": c.labels.scale,
+										value: u.scale ?? 1,
+										min: .75,
+										max: 1.35,
+										step: .025,
+										onValueChange: (e) => f("scale", e)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.typographyScale,
+									children: /* @__PURE__ */ T(b, {
+										"aria-label": c.labels.typographyScale,
+										value: u.typography?.scale ?? 1,
+										min: .85,
+										max: 1.25,
+										step: .025,
+										onValueChange: (e) => d("typography", "scale", e)
+									})
+								})
+							]
+						})
+					},
+					{
+						value: "money",
+						title: c.sections.money.title,
+						description: c.sections.money.description,
+						content: /* @__PURE__ */ E("div", {
+							className: B.settingsGrid,
+							children: [
+								/* @__PURE__ */ T(_, {
+									label: c.labels.defaultCurrency,
+									children: /* @__PURE__ */ T(v, {
+										value: u.money?.defaultCurrency ?? "",
+										onChange: (e) => d("money", "defaultCurrency", e.target.value.toUpperCase())
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.displayCurrency,
+									children: /* @__PURE__ */ T(v, {
+										value: u.money?.displayCurrency ?? "",
+										placeholder: c.displayCurrencyPlaceholder,
+										onChange: (e) => d("money", "displayCurrency", e.target.value.toUpperCase() || void 0)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.moneyFormat,
+									children: /* @__PURE__ */ T(y, {
+										value: u.money?.formatMode,
+										options: V([
+											"decimal",
+											"with-code",
+											"with-symbol"
+										], c),
+										onValueChange: (e) => e !== void 0 && d("money", "formatMode", e)
+									})
+								}),
+								/* @__PURE__ */ T(le, {
+									label: c.labels.dualPricing,
+									description: c.dualPricingDescription,
+									value: u.money?.dualPricingEnabled ?? !1,
+									onValueChange: (e) => d("money", "dualPricingEnabled", e)
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.dualPricingMode,
+									children: /* @__PURE__ */ T(y, {
+										value: u.money?.displayMode,
+										options: V([
+											"primary-only",
+											"dual",
+											"dynamic"
+										], c),
+										onValueChange: (e) => e !== void 0 && d("money", "displayMode", e)
+									})
+								}),
+								/* @__PURE__ */ T(_, {
+									label: c.labels.dualPricingLayout,
+									children: /* @__PURE__ */ T(y, {
+										value: u.money?.layout,
+										options: V(["inline", "stacked"], c),
+										onValueChange: (e) => e !== void 0 && d("money", "layout", e)
+									})
+								})
+							]
+						})
+					}
+				]
+			})
+		]
+	});
+}
+//#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("."), Ge = [
+	"--success",
+	"--success-foreground",
+	"--info",
+	"--info-foreground",
+	"--warning",
+	"--warning-foreground",
+	"--warning-accent",
+	"--link-color",
+	"--primary-accent",
+	"--inverse-background",
+	"--inverse-foreground",
+	"--inverse-muted",
+	"--inverse-subtle",
+	"--inverse-disabled",
+	"--inverse-surface",
+	"--inverse-surface-strong",
+	"--inverse-border",
+	"--inverse-decoration"
+], Ke = ["--overlay-backdrop"], qe = [
+	"--font-heading",
+	"--font-sans",
+	"--font-serif",
+	"--font-mono"
+], Je = [
+	"xxs",
+	"xs",
+	"pxs",
+	"sm",
+	"base",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl",
+	"4xl",
+	"5xl",
+	"6xl",
+	"7xl",
+	"8xl",
+	"9xl"
+].flatMap((e) => [`--text-${e}`, `--text-${e}--line-height`]), U = [
+	"--shadow-2xs",
+	"--shadow-xs",
+	"--shadow-sm",
+	"--shadow",
+	"--shadow-md",
+	"--shadow-lg",
+	"--shadow-xl",
+	"--shadow-2xl"
+], W = [
+	"--space-scale",
+	"--density-scale",
+	"--height-action",
+	"--height-control",
+	"--control-x",
+	"--row-x",
+	"--row-y",
+	"--surface-x",
+	"--surface-y",
+	"--icon",
+	"--avatar",
+	"--shell-header-height",
+	"--shell-sidebar-width"
+], G = [
+	"--content-width-sm",
+	"--content-width-md",
+	"--content-width-lg",
+	"--content-width-xl",
+	"--content-width-2xl",
+	"--adaptive-grid-min-sm",
+	"--adaptive-grid-min-md",
+	"--adaptive-grid-min-lg"
+], Ye = {
+	"--background": "The page's canvas.",
+	"--foreground": "Text and icons on the canvas.",
+	"--primary": "Brand and primary-action colour.",
+	"--primary-foreground": "Text and icons on a solid primary fill.",
+	"--muted": "Subdued backgrounds — passive regions, skeletons.",
+	"--muted-foreground": "Secondary text, metadata, and passive icons.",
+	"--border": "Dividers, outlines, and surface borders.",
+	"--ring": "The focus-visible ring.",
+	"--link-color": "Inline links and copyable values.",
+	"--overlay-backdrop": "The scrim behind dialogs, sheets, and drawers.",
+	"--primary-accent": "Brand colour as a FOREGROUND — icons, spinners, active marks.",
+	"--warning-accent": "Warning colour as a foreground on a tinted warning surface.",
+	"--radius": "The base corner every other radius derives from.",
+	"--space-scale": "Multiplies gaps and padding without touching control heights.",
+	"--density-scale": "Multiplies actions, controls, rows, and everything density-sensitive.",
+	"--height-action": "Base height for buttons and action triggers.",
+	"--height-control": "Base height for inputs, selects, and editable controls.",
+	"--control-x": "Inline inset for actions and form controls.",
+	"--row-x": "Inline inset shared by collection, menu, command, and table rows.",
+	"--row-y": "Vertical inset shared by those same rows.",
+	"--surface-x": "Inline inset for cards, dialogs, panels, and content surfaces.",
+	"--surface-y": "Vertical inset for those same surfaces.",
+	"--icon": "Default interface icon size.",
+	"--avatar": "Default avatar size in ordinary rows and cards.",
+	"--shell-header-height": "Minimum application-header height.",
+	"--shell-sidebar-width": "Expanded application-sidebar width.",
+	"--content-width-lg": "The default readable measure used by Container.",
+	"--adaptive-grid-min-md": "Default minimum column width used by AdaptiveGrid."
+}, K = {
+	"--space-scale": "Spacing scale",
+	"--density-scale": "Density scale",
+	"--height-action": "Action height",
+	"--height-control": "Control height",
+	"--control-x": "Control horizontal padding",
+	"--row-x": "Row horizontal padding",
+	"--row-y": "Row vertical padding",
+	"--surface-x": "Surface horizontal padding",
+	"--surface-y": "Surface vertical padding",
+	"--icon": "Interface icon size",
+	"--avatar": "Default avatar size",
+	"--shell-header-height": "Header height",
+	"--shell-sidebar-width": "Sidebar width",
+	"--content-width-sm": "Small content width",
+	"--content-width-md": "Medium content width",
+	"--content-width-lg": "Large content width",
+	"--content-width-xl": "Extra-large content width",
+	"--content-width-2xl": "Maximum content width",
+	"--adaptive-grid-min-sm": "Compact adaptive column",
+	"--adaptive-grid-min-md": "Default adaptive column",
+	"--adaptive-grid-min-lg": "Spacious adaptive column"
+}, q = {
+	"--radius": {
+		type: "range",
+		min: 0,
+		max: 1.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--space-scale": {
+		type: "range",
+		min: .75,
+		max: 1.35,
+		step: .025,
+		decimalPlaces: 3
+	},
+	"--density-scale": {
+		type: "range",
+		min: .75,
+		max: 1.35,
+		step: .025,
+		decimalPlaces: 3
+	},
+	"--height-action": {
+		type: "range",
+		min: 1.5,
+		max: 3.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--height-control": {
+		type: "range",
+		min: 1.5,
+		max: 3.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--control-x": {
+		type: "range",
+		min: .25,
+		max: 1.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--row-x": {
+		type: "range",
+		min: .25,
+		max: 1.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--row-y": {
+		type: "range",
+		min: .25,
+		max: 1.25,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--surface-x": {
+		type: "range",
+		min: .5,
+		max: 2.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--surface-y": {
+		type: "range",
+		min: .5,
+		max: 2.5,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--icon": {
+		type: "range",
+		min: .75,
+		max: 2,
+		step: .0625,
+		unit: "rem",
+		decimalPlaces: 4
+	},
+	"--avatar": {
+		type: "range",
+		min: 1.5,
+		max: 4,
+		step: .125,
+		unit: "rem",
+		decimalPlaces: 3
+	},
+	"--shell-header-height": {
+		type: "range",
+		min: 3,
+		max: 7,
+		step: .125,
+		unit: "rem",
+		decimalPlaces: 3
+	},
+	"--shell-sidebar-width": {
+		type: "range",
+		min: 12,
+		max: 24,
+		step: .25,
+		unit: "rem",
+		decimalPlaces: 2
+	},
+	"--content-width-sm": {
+		type: "range",
+		min: 20,
+		max: 72,
+		step: 1,
+		unit: "rem",
+		decimalPlaces: 0
+	},
+	"--content-width-md": {
+		type: "range",
+		min: 24,
+		max: 80,
+		step: 1,
+		unit: "rem",
+		decimalPlaces: 0
+	},
+	"--content-width-lg": {
+		type: "range",
+		min: 32,
+		max: 96,
+		step: 1,
+		unit: "rem",
+		decimalPlaces: 0
+	},
+	"--content-width-xl": {
+		type: "range",
+		min: 40,
+		max: 108,
+		step: 1,
+		unit: "rem",
+		decimalPlaces: 0
+	},
+	"--content-width-2xl": {
+		type: "range",
+		min: 48,
+		max: 120,
+		step: 1,
+		unit: "rem",
+		decimalPlaces: 0
+	},
+	"--adaptive-grid-min-sm": {
+		type: "range",
+		min: 8,
+		max: 24,
+		step: .5,
+		unit: "rem",
+		decimalPlaces: 1
+	},
+	"--adaptive-grid-min-md": {
+		type: "range",
+		min: 8,
+		max: 32,
+		step: .5,
+		unit: "rem",
+		decimalPlaces: 1
+	},
+	"--adaptive-grid-min-lg": {
+		type: "range",
+		min: 12,
+		max: 40,
+		step: .5,
+		unit: "rem",
+		decimalPlaces: 1
+	}
+};
+function Xe(e) {
+	return e.replace(/^--/, "").replace(/--/g, " · ").split("-").map((e) => e.length <= 3 ? e.toUpperCase() : `${e[0]?.toUpperCase()}${e.slice(1)}`).join(" ");
+}
+function Ze(e, t) {
+	return e.startsWith("--chart-") ? "A categorical series colour. Keep status meaning out of it." : e.startsWith("--sidebar-") ? "A sidebar-specific colour." : e.startsWith("--inverse-") ? "An explicitly inverse surface or content colour." : e.endsWith("-foreground") ? "The foreground paired with the matching fill." : e.endsWith("--line-height") ? "Line height for the matching type step." : e.startsWith("--text-") ? "Font size for the matching type step." : e.startsWith("--font-") ? "Font stack for the matching content role." : e.startsWith("--shadow") ? "An elevation step used by surfaces and overlays." : t === "states" ? "A semantic state colour shared by every status surface." : "A public theme variable used across the kit.";
+}
+function J(e, t, n, r, i) {
+	return e.map((e) => ({
+		name: e,
+		label: K[e] ?? Xe(e),
+		description: Ye[e] ?? Ze(e, t),
+		group: t,
+		section: n,
+		scope: r,
+		kind: i,
+		control: q[e]
+	}));
+}
+var Qe = [
+	...J(H.slice(0, 6), "colors", "surfaces-content", "mode", "color"),
+	...J(Ke, "colors", "surfaces-content", "shared", "color"),
+	...J(H.slice(6, 19), "colors", "brand-actions", "mode", "color"),
+	...J(H.slice(19, 24), "colors", "charts", "mode", "color"),
+	...J(H.slice(24), "colors", "sidebar", "mode", "color"),
+	...J(Ge.slice(0, 9), "states", "semantic-feedback", "mode", "color"),
+	...J(Ge.slice(9), "states", "inverse-surfaces", "mode", "color"),
+	...J(qe, "typography", "font-families", "shared", "font"),
+	...J(Je, "typography", "type-scale", "shared", "length"),
+	...J(["--radius"], "shape", "radius", "shared", "length"),
+	...J(U, "shape", "elevation", "mode", "shadow"),
+	...J(W.slice(0, 2), "structure", "global-scales", "shared", "number"),
+	...J(W.slice(2, 5), "structure", "actions-controls", "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(G.slice(0, 5), "structure", "content-widths", "shared", "length"),
+	...J(G.slice(5), "structure", "adaptive-layout", "shared", "length")
+], $e = {
+	title: "Theme tweaker",
+	description: "Edit the public theme contract, calculate coherent recipes, and export complete CSS plus the display defaults that go with it.",
+	searchLabel: "Search variables",
+	searchPlaceholder: "Search by token, label, or purpose…",
+	searchHint: "Search spans every group, not just the one you are in.",
+	searchResults: (e) => `${e} ${e === 1 ? "result" : "results"}`,
+	allGroups: "All groups",
+	groupNavigationLabel: "Theme categories",
+	sharedScope: "Shared",
+	mixedScope: "Mixed scope",
+	variableCount: (e) => `${e} ${e === 1 ? "variable" : "variables"}`,
+	groupSectionLabel: (e, t) => `${e} · ${t}`,
+	lightMode: "Light",
+	darkMode: "Dark",
+	reset: "Reset overrides",
+	copy: "Copy CSS",
+	copyProvider: "Copy config",
+	export: "Export",
+	exportPending: "Downloading…",
+	exportDialogTitle: "Export theme",
+	exportDialogDescription: "Review, copy, or download the complete CSS theme and the UIProvider configuration that matches it.",
+	downloadCss: "Download CSS",
+	downloadProvider: "Download config",
+	close: "Close",
+	copiedStatus: "Copied to the clipboard.",
+	exportedStatus: "File downloaded.",
+	invalidTheme: "Fix the invalid CSS override before copying or exporting.",
+	emptySearch: "No public theme variables match this search.",
+	inheritValue: "Inherits the kit's value",
+	resetVariable: "Reset variable",
+	chooseColor: (e) => `Choose ${e}`,
+	adjustVariable: (e) => `Adjust ${e}`,
+	changedCount: (e) => `${e} ${e === 1 ? "override" : "overrides"}`,
+	cssOutputLabel: "Complete theme CSS",
+	cssOutputDescription: "A standalone contract: every public variable, in both modes, resolved.",
+	providerOutputLabel: "UIProvider config",
+	providerOutputDescription: "Mount-once display defaults for the application root.",
+	autoPalette: "Derive supporting colours",
+	autoPaletteDescription: "Keep muted, accent, borders, charts, links, and sidebar actions coherent with the primary colour.",
+	typeRecipeTitle: "Calculated type scale",
+	typeRecipeDescription: "Generate every font step and line height from one body anchor and one modular ratio.",
+	baseTypeSize: "Base size",
+	typeRatio: "Heading ratio",
+	elevationRecipeTitle: "Calculated elevation",
+	elevationRecipeDescription: "Generate the whole shadow ladder from one restrained intensity.",
+	elevationIntensity: "Shadow intensity",
+	previewTitle: "Semantic preview",
+	previewDescription: "The same variables drive surfaces, typography, controls, rows, and states.",
+	previewItemTitle: "Customer workspace",
+	previewItemDescription: "A long description and an action, at the kit's own rhythm.",
+	previewFieldLabel: "Workspace name",
+	previewFieldPlaceholder: "Acme operations",
+	previewAction: "Save changes",
+	previewSuccess: "Healthy",
+	previewWarning: "Review",
+	previewContract: "CSS variables",
+	providerSettings: z,
+	groups: {
+		colors: "Colours",
+		states: "States",
+		typography: "Typography",
+		shape: "Shape & elevation",
+		structure: "Structure",
+		defaults: "Provider"
+	},
+	groupDescriptions: {
+		colors: "Application surfaces, brand actions, charts, and sidebar colours.",
+		states: "Semantic feedback and inverse-surface pairs.",
+		typography: "Font families and the calculated type scale.",
+		shape: "Corner radius and the elevation ladder.",
+		structure: "Density, spacing, controls, rows, media, and shell geometry.",
+		defaults: "Mount-once UIProvider formatting and display defaults."
+	},
+	sections: {
+		"surfaces-content": "Surfaces & content",
+		"brand-actions": "Brand & actions",
+		charts: "Charts",
+		sidebar: "Sidebar",
+		"semantic-feedback": "Semantic feedback",
+		"inverse-surfaces": "Inverse surfaces",
+		"font-families": "Font families",
+		"type-scale": "Type scale",
+		radius: "Radius",
+		elevation: "Elevation",
+		"global-scales": "Global scales",
+		"actions-controls": "Actions & controls",
+		"rows-surfaces": "Rows & surfaces",
+		media: "Media",
+		"application-shell": "Application shell",
+		"content-widths": "Content widths",
+		"adaptive-layout": "Adaptive layout"
+	}
+};
+//#endregion
+//#region src/components/features/theme-tweaker/use-applied-theme.ts
+function Y(e, t) {
+	return e === null ? null : e === "self" ? t.current : e === "document" ? typeof document > "u" ? null : document.documentElement : typeof e == "function" ? e() : e;
+}
+function et({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
+	Ne(() => {
+		if (!e || r === "self") return;
+		let a = Y(r, n);
+		if (!a) return;
+		let o = R(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)
+		}), a.style.setProperty(e, t), c.set(e, t));
+		let l = a.classList.contains("light"), u = a.classList.contains("dark");
+		return t && (a.classList.toggle("light", i.mode === "light"), a.classList.toggle("dark", i.mode === "dark")), () => {
+			for (let [e, t] of c) {
+				if (a.style.getPropertyValue(e) !== t) continue;
+				let n = s.get(e);
+				n?.value ? a.style.setProperty(e, n.value, n.priority) : a.style.removeProperty(e);
+			}
+			t && (a.classList.toggle("light", l), a.classList.toggle("dark", u));
+		};
+	}, [
+		e,
+		t,
+		n,
+		r,
+		i
+	]);
+}
+//#endregion
+//#region src/components/features/theme-tweaker/theme-tweaker.tsx
+var tt = [
+	"colors",
+	"states",
+	"typography",
+	"shape",
+	"structure",
+	"defaults"
+], nt = {
+	colors: /* @__PURE__ */ T(x, {}),
+	states: /* @__PURE__ */ T(ke, {}),
+	typography: /* @__PURE__ */ T(je, {}),
+	shape: /* @__PURE__ */ T(Oe, {}),
+	structure: /* @__PURE__ */ T(Ce, {}),
+	defaults: /* @__PURE__ */ T(De, {})
+};
+function X(e, t) {
+	let n = Number.parseFloat(e);
+	return Number.isFinite(n) ? Math.min(t.max, Math.max(t.min, n)) : t.min;
+}
+function rt(e, t) {
+	return `${Number(e.toFixed(t.decimalPlaces ?? 3))}${t.unit ?? ""}`;
+}
+function it(e, t) {
+	return e === "document" ? document.documentElement : e === "self" || e === null ? t : typeof e == "function" ? e() : e ?? t;
+}
+function at(e, t) {
+	if (typeof document > "u" || typeof window > "u") return k(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(R(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.length > 0));
+	};
+	try {
+		let n = s("light"), r = s("dark"), i = new Set(t.filter((e) => e.scope === "shared").map((e) => e.name));
+		return k({
+			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);
+		}
+		n.classList.toggle("light", i), n.classList.toggle("dark", a);
+	}
+}
+function ot(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
+	};
+}
+function st({ title: e, description: r, code: i, copyLabel: a, downloadLabel: o, downloading: s = !1, onCopy: c, onDownload: l }) {
+	let d = S();
+	return /* @__PURE__ */ E("section", {
+		"aria-labelledby": d,
+		className: B.exportBlock,
+		children: [/* @__PURE__ */ E("div", {
+			className: B.exportBlockHeader,
+			children: [/* @__PURE__ */ E(p, {
+				gap: "2xs",
+				className: B.minWidth,
+				children: [/* @__PURE__ */ T(t, {
+					id: d,
+					level: 3,
+					children: e
+				}), /* @__PURE__ */ T(n, {
+					size: "xs",
+					type: "secondary",
+					children: r
+				})]
+			}), /* @__PURE__ */ E(p, {
+				direction: "horizontal",
+				gap: "xs",
+				align: "center",
+				wrap: !0,
+				children: [/* @__PURE__ */ E(u, {
+					type: "button",
+					tone: "neutral",
+					buttonStyle: "outline",
+					onClick: c,
+					children: [/* @__PURE__ */ T(be, {}), a]
+				}), /* @__PURE__ */ E(u, {
+					type: "button",
+					loading: s,
+					onClick: l,
+					children: [/* @__PURE__ */ T(xe, {}), o]
+				})]
+			})]
+		}), /* @__PURE__ */ T("pre", {
+			tabIndex: 0,
+			"aria-label": e,
+			className: B.exportCode,
+			children: /* @__PURE__ */ T("code", { children: i })
+		})]
+	});
+}
+function ct({ field: t, value: r, effectiveValue: i, onChange: a, onReset: o, strings: s }) {
+	let c = `theme-variable-${S().replace(/:/g, "")}`, l = /* @__PURE__ */ T(u, {
+		type: "button",
+		tone: "neutral",
+		buttonStyle: "ghost",
+		iconOnly: !0,
+		"aria-label": `${s.resetVariable}: ${t.label}`,
+		title: s.resetVariable,
+		disabled: !r,
+		onClick: o,
+		children: /* @__PURE__ */ T(Te, {})
+	}), d = t.placeholder ?? i ?? s.inheritValue, f;
+	if (t.kind === "color") f = /* @__PURE__ */ E("div", {
+		className: B.controlRow,
+		children: [/* @__PURE__ */ T(ue, {
+			id: c,
+			"aria-label": t.label,
+			value: r,
+			previewValue: r || i || `var(${t.name})`,
+			strings: { picker: s.chooseColor(t.label) },
+			onValueChange: a,
+			placeholder: d,
+			className: B.controlInput
+		}), l]
+	});
+	else if (t.control?.type === "range") {
+		let e = t.control, n = X(r || i, e);
+		f = /* @__PURE__ */ E(p, {
+			gap: "sm",
+			children: [/* @__PURE__ */ T(b, {
+				id: `${c}-slider`,
+				"aria-label": s.adjustVariable(t.label),
+				value: n,
+				min: e.min,
+				max: e.max,
+				step: e.step,
+				onValueChange: (t) => a(rt(t, e))
+			}), /* @__PURE__ */ E("div", {
+				className: B.controlRow,
+				children: [/* @__PURE__ */ T(pe, {
+					id: c,
+					"aria-label": t.label,
+					value: String(n),
+					decimalPlaces: e.decimalPlaces ?? 3,
+					min: e.min,
+					max: e.max,
+					allowEmpty: !0,
+					normalizeOnBlur: !1,
+					endAdornment: e.unit,
+					onChange: (t) => {
+						let n = t.target.value.trim();
+						a(n ? `${n}${e.unit ?? ""}` : "");
+					},
+					className: B.numberInput
+				}), l]
+			})]
+		});
+	} else f = /* @__PURE__ */ E("div", {
+		className: B.controlRow,
+		children: [/* @__PURE__ */ T(v, {
+			id: c,
+			"aria-label": t.label,
+			value: r,
+			onChange: (e) => a(e.target.value),
+			placeholder: d,
+			className: e(B.controlInput, B.monoInput)
+		}), l]
+	});
+	return /* @__PURE__ */ T(_, {
+		label: /* @__PURE__ */ E("span", {
+			className: B.fieldLabel,
+			children: [/* @__PURE__ */ T(n, {
+				tag: "span",
+				size: "inherit",
+				weight: "medium",
+				truncate: !0,
+				children: t.label
+			}), /* @__PURE__ */ T(m, {
+				size: "xs",
+				type: "secondary",
+				children: t.name
+			})]
+		}),
+		className: B.field,
+		children: f
+	});
+}
+function lt({ strings: e }) {
+	return /* @__PURE__ */ T(f, {
+		surface: "bordered",
+		icon: /* @__PURE__ */ T(x, {}),
+		title: e.previewTitle,
+		description: e.previewDescription,
+		children: /* @__PURE__ */ E(p, {
+			gap: "lg",
+			children: [
+				/* @__PURE__ */ E(p, {
+					direction: "horizontal",
+					gap: "sm",
+					wrap: !0,
+					children: [
+						/* @__PURE__ */ T(h, {
+							tone: "success",
+							children: e.previewSuccess
+						}),
+						/* @__PURE__ */ T(h, {
+							tone: "warning",
+							children: e.previewWarning
+						}),
+						/* @__PURE__ */ T(h, {
+							tone: "neutral",
+							children: e.previewContract
+						})
+					]
+				}),
+				/* @__PURE__ */ E(re, {
+					surface: "muted",
+					children: [
+						/* @__PURE__ */ T(te, {
+							variant: "icon",
+							children: /* @__PURE__ */ T(x, {})
+						}),
+						/* @__PURE__ */ E(ne, { children: [/* @__PURE__ */ T(ie, { children: e.previewItemTitle }), /* @__PURE__ */ T(g, { children: e.previewItemDescription })] }),
+						/* @__PURE__ */ T(ye, {
+							"aria-hidden": !0,
+							className: B.previewCheck
+						})
+					]
+				}),
+				/* @__PURE__ */ T(_, {
+					label: e.previewFieldLabel,
+					children: /* @__PURE__ */ T(v, { placeholder: e.previewFieldPlaceholder })
+				}),
+				/* @__PURE__ */ T(u, {
+					type: "button",
+					children: e.previewAction
+				})
+			]
+		})
+	});
+}
+var Z = Me(function({ value: r, defaultValue: i, onValueChange: a, onModeChange: s, fields: c = Qe, target: l = "self", apply: m = !0, manageModeClass: te = !0, preview: g, fileName: ne = "theme.css", config: re, defaultConfig: ie, onConfigChange: y, providerFileName: ue = "ui.config.ts", showIntro: pe = !0, selectors: ye, onExport: be, onCopy: Se, onReset: Ce, onError: x, actionsSlot: De, strings: Oe, className: ke, ...je }, Me) {
+	let S = ae($e, Oe), [D, Ie] = w(() => k(i)), O = C(() => r ? k(r) : D, [D, r]), [A, j] = w(() => F(ie)), M = C(() => F(re ?? A), [re, A]), [N, P] = w("colors"), [I, L] = w(""), [Re, z] = w(!0), [Ue, V] = w(16), [H, Ge] = w(1.2), [Ke, qe] = w(.8), [Je, U] = w("idle"), [W, G] = w(!1), Ye = me(), K = Fe(null);
+	Pe(Me, () => K.current), et({
+		apply: m,
+		manageModeClass: te,
+		selfRef: K,
+		target: l,
+		theme: O
+	});
+	let [q, Xe] = w(() => k(O)), [Ze, J] = w({});
+	Ne(() => {
+		if (typeof window > "u") return;
+		let e = window.setTimeout(() => {
+			let e = it(l, K.current);
+			if (!e) return;
+			let t = window.getComputedStyle(e);
+			J(Object.fromEntries(c.map((e) => [e.name, t.getPropertyValue(e.name).trim()]))), Xe(at(O, c));
+		}, 0);
+		return () => window.clearTimeout(e);
+	}, [
+		m,
+		c,
+		l,
+		O
+	]);
+	let { artifact: Y, error: X } = C(() => {
+		try {
+			let e = k({
+				mode: O.mode,
+				shared: {
+					...q.shared,
+					...O.shared
+				},
+				light: {
+					...q.light,
+					...O.light
+				},
+				dark: {
+					...q.dark,
+					...O.dark
+				}
+			});
+			return {
+				artifact: ze(O, ne, { selectors: ye }, {
+					resolvedTheme: e,
+					providerConfig: M,
+					providerFileName: ue
+				}),
+				error: null
+			};
+		} catch (e) {
+			return {
+				artifact: null,
+				error: e
+			};
+		}
+	}, [
+		ne,
+		M,
+		ue,
+		q,
+		ye,
+		O
+	]), rt = Y?.cssText ?? `/* ${S.invalidTheme} */\n`, Z = C(() => Le(O), [O]), Q = I.trim().toLowerCase(), ut = C(() => c.filter((e) => Q ? [
+		e.name,
+		e.label,
+		e.description
+	].some((e) => e?.toLowerCase().includes(Q)) : e.group === N), [
+		c,
+		N,
+		Q
+	]), dt = C(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of ut) {
+			let n = `${t.group}:${t.section}`, r = e.get(n);
+			r ? r.fields.push(t) : e.set(n, {
+				group: t.group,
+				section: t.section,
+				fields: [t]
+			});
+		}
+		return [...e.values()];
+	}, [ut]), $ = (e) => {
+		r === void 0 && Ie(e), a?.(e), U("idle");
+	}, ft = (e) => {
+		$({
+			...O,
+			[O.mode]: {
+				...O[O.mode],
+				...e
+			}
+		});
+	}, pt = (e) => {
+		$({
+			...O,
+			shared: {
+				...O.shared,
+				...e
+			}
+		});
+	}, mt = (e) => {
+		e !== O.mode && ($({
+			...O,
+			mode: e
+		}), s?.(e));
+	}, ht = async (e) => {
+		try {
+			if (Se) await Se(e);
+			else if (typeof navigator < "u" && navigator.clipboard) await navigator.clipboard.writeText(e);
+			else throw Error("No clipboard here. Pass onCopy for this environment.");
+			U("copied");
+		} catch (e) {
+			x?.(e);
+		}
+	}, gt = async () => {
+		try {
+			if (X) throw X;
+			if (!Y) throw Error(S.invalidTheme);
+			G(!0), be ? await be(Y) : Ve(Y), U("exported");
+		} catch (e) {
+			x?.(e);
+		} finally {
+			G(!1);
+		}
+	}, _t = () => {
+		try {
+			if (!Y) throw X ?? Error(S.invalidTheme);
+			Be({
+				fileName: Y.providerFileName,
+				text: Y.providerConfigText,
+				mimeType: "text/typescript;charset=utf-8"
+			}), U("exported");
+		} catch (e) {
+			x?.(e);
+		}
+	}, vt = () => {
+		let e = O;
+		$(k({ mode: O.mode })), Ce?.(e);
+	}, yt = X ? S.invalidTheme : Je === "copied" ? S.copiedStatus : Je === "exported" ? S.exportedStatus : null, bt = N === "colors" ? /* @__PURE__ */ T(f, {
+		surface: "bordered",
+		children: /* @__PURE__ */ T(le, {
+			label: S.autoPalette,
+			description: S.autoPaletteDescription,
+			value: Re,
+			onValueChange: z
+		})
+	}) : N === "typography" ? /* @__PURE__ */ T(f, {
+		surface: "bordered",
+		title: S.typeRecipeTitle,
+		description: S.typeRecipeDescription,
+		children: /* @__PURE__ */ E(ee, {
+			columns: {
+				base: 1,
+				sm: 2
+			},
+			gap: "md",
+			children: [/* @__PURE__ */ T(_, {
+				label: S.baseTypeSize,
+				children: /* @__PURE__ */ T(b, {
+					"aria-label": S.baseTypeSize,
+					value: Ue,
+					min: 14,
+					max: 20,
+					step: 1,
+					onValueChange: (e) => {
+						V(e), pt(_e({
+							baseSize: e,
+							ratio: H
+						}));
+					}
+				})
+			}), /* @__PURE__ */ T(_, {
+				label: S.typeRatio,
+				children: /* @__PURE__ */ T(b, {
+					"aria-label": S.typeRatio,
+					value: H,
+					min: 1.125,
+					max: 1.333,
+					step: .01,
+					onValueChange: (e) => {
+						Ge(e), pt(_e({
+							baseSize: Ue,
+							ratio: e
+						}));
+					}
+				})
+			})]
+		})
+	}) : N === "shape" ? /* @__PURE__ */ T(f, {
+		surface: "bordered",
+		title: S.elevationRecipeTitle,
+		description: S.elevationRecipeDescription,
+		children: /* @__PURE__ */ T(_, {
+			label: S.elevationIntensity,
+			children: /* @__PURE__ */ T(b, {
+				"aria-label": S.elevationIntensity,
+				value: Ke,
+				min: 0,
+				max: 1,
+				step: .05,
+				onValueChange: (e) => {
+					qe(e), ft(ve({ intensity: e }));
+				}
+			})
+		})
+	}) : null, xt = /* @__PURE__ */ E("div", {
+		className: e(B.layout, g !== !1 && B.layoutWithPreview),
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: B.controls,
+				children: [/* @__PURE__ */ E(p, {
+					gap: "lg",
+					children: [
+						pe && /* @__PURE__ */ E(p, {
+							gap: "xs",
+							children: [/* @__PURE__ */ E(p, {
+								direction: "horizontal",
+								gap: "sm",
+								align: "center",
+								wrap: !0,
+								children: [/* @__PURE__ */ T(t, {
+									level: 2,
+									children: S.title
+								}), /* @__PURE__ */ T(h, {
+									tone: "neutral",
+									children: S.changedCount(Z)
+								})]
+							}), /* @__PURE__ */ T(n, {
+								type: "secondary",
+								children: S.description
+							})]
+						}),
+						/* @__PURE__ */ E("div", {
+							className: B.toolbar,
+							children: [/* @__PURE__ */ E(p, {
+								direction: "horizontal",
+								gap: "sm",
+								align: "center",
+								wrap: !0,
+								children: [/* @__PURE__ */ T(se, {
+									value: O.mode,
+									onValueChange: (e) => mt(e),
+									children: /* @__PURE__ */ E(ce, { children: [/* @__PURE__ */ E(oe, {
+										value: "light",
+										children: [/* @__PURE__ */ T(Ae, {}), S.lightMode]
+									}), /* @__PURE__ */ E(oe, {
+										value: "dark",
+										children: [/* @__PURE__ */ T(we, {}), S.darkMode]
+									})] })
+								}), !pe && /* @__PURE__ */ T(h, {
+									tone: "neutral",
+									children: S.changedCount(Z)
+								})]
+							}), /* @__PURE__ */ E(p, {
+								direction: "horizontal",
+								gap: "xs",
+								align: "center",
+								justify: "end",
+								wrap: !1,
+								children: [/* @__PURE__ */ E(u, {
+									type: "button",
+									disabled: !!X,
+									onClick: () => {
+										U("idle"), Ye.show();
+									},
+									children: [/* @__PURE__ */ T(xe, {}), S.export]
+								}), De]
+							})]
+						}),
+						/* @__PURE__ */ T(_, {
+							label: /* @__PURE__ */ T(d, { children: S.searchLabel }),
+							children: /* @__PURE__ */ T(v, {
+								value: I,
+								onChange: (e) => L(e.target.value),
+								placeholder: S.searchPlaceholder,
+								startIcon: Ee,
+								clearable: !0,
+								onClear: () => L("")
+							})
+						})
+					]
+				}), /* @__PURE__ */ E(p, {
+					gap: "lg",
+					children: [/* @__PURE__ */ T("nav", {
+						"aria-label": S.groupNavigationLabel,
+						children: /* @__PURE__ */ T(se, {
+							value: N,
+							onValueChange: (e) => {
+								L(""), P(e);
+							},
+							children: /* @__PURE__ */ T(ce, {
+								className: B.groupList,
+								children: tt.map((e) => /* @__PURE__ */ E(oe, {
+									value: e,
+									className: B.groupTab,
+									children: [nt[e], /* @__PURE__ */ T(n, {
+										tag: "span",
+										size: "inherit",
+										weight: "medium",
+										className: B.groupLabel,
+										children: S.groups[e]
+									})]
+								}, e))
+							})
+						})
+					}), /* @__PURE__ */ E(p, {
+						gap: "xl",
+						children: [
+							/* @__PURE__ */ E(p, {
+								gap: "xs",
+								children: [/* @__PURE__ */ E(p, {
+									direction: "horizontal",
+									gap: "sm",
+									align: "center",
+									wrap: !0,
+									children: [/* @__PURE__ */ T(t, {
+										level: 3,
+										children: Q ? S.allGroups : S.groups[N]
+									}), !!Q && /* @__PURE__ */ T(h, {
+										tone: "neutral",
+										role: "status",
+										"aria-live": "polite",
+										children: S.searchResults(ut.length)
+									})]
+								}), /* @__PURE__ */ T(n, {
+									size: "xs",
+									type: "secondary",
+									children: Q ? S.searchHint : S.groupDescriptions[N]
+								})]
+							}),
+							!Q && bt,
+							N === "defaults" && !Q ? /* @__PURE__ */ T(We, {
+								config: M,
+								onChange: (e) => {
+									re === void 0 && j(e), y?.(e), U("idle");
+								},
+								strings: S.providerSettings
+							}) : dt.length > 0 ? /* @__PURE__ */ T(de, {
+								multiple: !0,
+								defaultValue: [`${dt[0].group}:${dt[0].section}`],
+								surface: "bordered",
+								media: "none",
+								items: dt.map((e) => {
+									let t = new Set(e.fields.map((e) => e.scope)), n = t.size > 1 ? S.mixedScope : t.has("shared") ? S.sharedScope : O.mode === "light" ? S.lightMode : S.darkMode;
+									return {
+										value: `${e.group}:${e.section}`,
+										title: Q ? S.groupSectionLabel(S.groups[e.group], S.sections[e.section]) : S.sections[e.section],
+										description: S.variableCount(e.fields.length),
+										badge: /* @__PURE__ */ T(h, {
+											tone: "neutral",
+											children: n
+										}),
+										content: /* @__PURE__ */ T("div", {
+											className: B.fields,
+											children: e.fields.map((e) => {
+												let t = e.scope === "shared" ? "shared" : O.mode;
+												return /* @__PURE__ */ T(ct, {
+													field: e,
+													value: O[t][e.name] ?? "",
+													effectiveValue: Ze[e.name] ?? "",
+													strings: S,
+													onChange: (t) => {
+														if (e.name === "--primary" && Re && t.trim()) {
+															ft(ge({
+																primary: t,
+																mode: O.mode
+															}));
+															return;
+														}
+														$(ot(O, e, t));
+													},
+													onReset: () => $(ot(O, e, ""))
+												}, e.name);
+											})
+										})
+									};
+								})
+							}, `${N}:${Q}`) : /* @__PURE__ */ T(o, {
+								padding: "sm",
+								title: S.emptySearch,
+								description: !1,
+								className: B.empty
+							})
+						]
+					})]
+				})]
+			}),
+			g !== !1 && /* @__PURE__ */ T("div", {
+				className: B.preview,
+				children: g ?? /* @__PURE__ */ T(lt, { strings: S })
+			}),
+			/* @__PURE__ */ T(he, {
+				...Ye.overlayProps,
+				title: S.exportDialogTitle,
+				description: S.exportDialogDescription,
+				showCloseButton: !1,
+				showCancel: !1,
+				showConfirm: !1,
+				width: "xl",
+				surfaceStyle: R(O),
+				className: e(B.exportDialog, O.mode),
+				footer: /* @__PURE__ */ E("div", {
+					className: B.exportFooter,
+					children: [/* @__PURE__ */ E(u, {
+						type: "button",
+						tone: "neutral",
+						buttonStyle: "ghost",
+						disabled: Z === 0,
+						onClick: vt,
+						children: [/* @__PURE__ */ T(Te, {}), S.reset]
+					}), /* @__PURE__ */ T(fe, {
+						render: /* @__PURE__ */ T(u, {
+							type: "button",
+							tone: "neutral",
+							buttonStyle: "outline"
+						}),
+						children: S.close
+					})]
+				}),
+				children: /* @__PURE__ */ E(p, {
+					gap: "xl",
+					children: [
+						/* @__PURE__ */ T(st, {
+							title: S.cssOutputLabel,
+							description: S.cssOutputDescription,
+							code: rt,
+							copyLabel: S.copy,
+							downloadLabel: W ? S.exportPending : S.downloadCss,
+							downloading: W,
+							onCopy: () => void ht(rt),
+							onDownload: () => void gt()
+						}),
+						/* @__PURE__ */ T(st, {
+							title: S.providerOutputLabel,
+							description: S.providerOutputDescription,
+							code: Y?.providerConfigText ?? "",
+							copyLabel: S.copyProvider,
+							downloadLabel: S.downloadProvider,
+							onCopy: () => void ht(Y?.providerConfigText ?? ""),
+							onDownload: _t
+						}),
+						!!yt && /* @__PURE__ */ T(n, {
+							tag: "div",
+							size: "xs",
+							type: X ? "error" : "secondary",
+							role: "status",
+							"aria-live": "polite",
+							children: yt
+						})
+					]
+				})
+			})
+		]
+	});
+	return l === "self" ? /* @__PURE__ */ T(He, {
+		...je,
+		ref: K,
+		theme: m ? O : k({ mode: O.mode }),
+		className: e("theme-tweaker--component", B.root, B.rootScoped, ke),
+		children: xt
+	}) : /* @__PURE__ */ T("div", {
+		...je,
+		ref: K,
+		className: e("theme-tweaker--component", B.root, ke),
+		children: xt
+	});
+});
+//#endregion
+export { He as ThemeScope, Z as ThemeTweaker, We as UIConfigSettings, Le as countThemeOverrides, Re as createScopedThemeSelectors, F as createSerializableUIConfig, k as createTheme, ze as createThemeExportArtifact, D as defaultThemeSelectors, Qe as defaultThemeTweakerFields, $e as defaultThemeTweakerStrings, z as defaultUIConfigSettingsStrings, ve as deriveThemeElevation, ge as deriveThemePalette, _e as deriveThemeTypeScale, Be as downloadTextFile, Ve as downloadTheme, L as getActiveThemeOverrides, A as isThemeVariableName, P as serializeTheme, I as serializeUIConfig, R as themeToStyle, et as useAppliedTheme };