@povio/ui 5.0.0-rc.10 → 5.0.0-rc.11

package/dist/{UIConfigurator-CTlq-hrG.js → UIConfigurator-C_2kgJtm.js}

@@ -48,8 +48,8 @@ import { i as alertDefinition, n as statusIconDefinition, r as statusSeparatorDe
 import { a as toastDefinition, i as toastContainerDefinition } from "./toast.cva-C_L_RffH.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { t as tooltipWrapperTriggerDefinition } from "./tooltipWrapper.cva-BBQ4ic3D.js";
-import { C as validToken, S as toRgb, a as generateShades, b as spacingLevels, c as isFontSizeToken, d as layoutKindFor, f as layoutKinds, g as listedLayoutToken, h as linkedLayoutTokens, i as exportCss, l as isRgb, m as layoutScales, n as controlHeightCounterpart, o as groupFor, p as layoutLevelFor, r as emptyTheme, s as groups, t as baseColorNames, u as labelFor, v as previewTokens, x as toHex, y as runtimeCss } from "./theme-model-DtYPxNvH.js";
-import $ahdqC$react, { Suspense, createContext, lazy, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { C as toRgb, S as toHex, _ as listedLayoutToken, a as generateShades, b as runtimeCss, c as isEditableToken, d as labelFor, f as layoutKindFor, g as linkedLayoutTokens, h as layoutScales, i as exportCss, l as isFontSizeToken, m as layoutLevelFor, n as controlHeightCounterpart, o as groupFor, p as layoutKinds, r as emptyTheme, s as groups, t as baseColorNames, u as isRgb, w as validToken, x as spacingLevels, y as previewTokens } from "./theme-model-DtTsIxou.js";
+import $ahdqC$react, { Fragment, Suspense, createContext, lazy, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "react-aria/mergeProps";
@@ -609,7 +609,7 @@ const emptyConfiguration = () => ({
 });
 const ConfigurationContext = createContext(null);
 function UIConfigurationProvider(t0) {
-	const $ = c(40);
+	const $ = c(48);
 	const { defaults, initialValue, onApply, children } = t0;
 	const inheritedOverrides = UIOverrides.useConfig();
 	const [applied, setApplied] = useState(initialValue ?? emptyConfiguration);
@@ -618,64 +618,96 @@ function UIConfigurationProvider(t0) {
 	const [floating, setFloating] = useState(false);
 	const [revision, setRevision] = useState(0);
 	const [previewConfiguration, setPreviewConfiguration] = useState(null);
-	const active = previewConfiguration ?? (isOpen ? draft : applied);
+	const [tokenRequest, setTokenRequest] = useState(null);
+	const [componentHosts, setComponentHosts] = useState(0);
 	let t1;
-	if ($[0] !== applied) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = () => {
+			setComponentHosts(_temp$7);
+			return () => setComponentHosts(_temp2$5);
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const hostComponents = t1;
+	const active = previewConfiguration ?? (isOpen ? draft : applied);
+	let t2;
+	if ($[1] !== applied) {
+		t2 = () => {
 			setFloating(false);
 			setDraft(structuredClone(applied));
-			setRevision(_temp$7);
+			setRevision(_temp3$4);
 			setOpen(true);
 		};
-		$[0] = applied;
-		$[1] = t1;
-	} else t1 = $[1];
-	const open = t1;
-	let t2;
-	if ($[2] !== isOpen || $[3] !== open) {
-		t2 = () => {
-			if (isOpen) setRevision(_temp2$5);
+		$[1] = applied;
+		$[2] = t2;
+	} else t2 = $[2];
+	const open = t2;
+	let t3;
+	if ($[3] !== isOpen || $[4] !== open) {
+		t3 = () => {
+			if (isOpen) setRevision(_temp4$4);
 			else open();
 			setFloating(true);
 		};
-		$[2] = isOpen;
-		$[3] = open;
-		$[4] = t2;
-	} else t2 = $[4];
-	const openFloating = t2;
-	let t3;
-	if ($[5] !== applied) {
-		t3 = () => {
+		$[3] = isOpen;
+		$[4] = open;
+		$[5] = t3;
+	} else t3 = $[5];
+	const openFloating = t3;
+	let t4;
+	if ($[6] !== isOpen || $[7] !== openFloating) {
+		t4 = (name) => {
+			setTokenRequest((current) => ({
+				name,
+				id: (current?.id ?? 0) + 1
+			}));
+			if (!isOpen) openFloating();
+		};
+		$[6] = isOpen;
+		$[7] = openFloating;
+		$[8] = t4;
+	} else t4 = $[8];
+	const revealToken = t4;
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => setTokenRequest(null);
+		$[9] = t5;
+	} else t5 = $[9];
+	const clearTokenRequest = t5;
+	let t6;
+	if ($[10] !== applied) {
+		t6 = () => {
 			setDraft(structuredClone(applied));
 			setOpen(false);
 		};
-		$[5] = applied;
-		$[6] = t3;
-	} else t3 = $[6];
-	const cancel = t3;
-	let t4;
-	if ($[7] !== draft || $[8] !== onApply) {
-		t4 = () => {
+		$[10] = applied;
+		$[11] = t6;
+	} else t6 = $[11];
+	const cancel = t6;
+	let t7;
+	if ($[12] !== draft || $[13] !== onApply) {
+		t7 = () => {
 			onApply?.(structuredClone(draft));
 			setApplied(structuredClone(draft));
 			setOpen(false);
 		};
-		$[7] = draft;
-		$[8] = onApply;
-		$[9] = t4;
-	} else t4 = $[9];
-	const apply = t4;
-	let t5;
-	if ($[10] !== active.overrides || $[11] !== inheritedOverrides) {
-		t5 = applyCvaEdits(inheritedOverrides, active.overrides);
-		$[10] = active.overrides;
-		$[11] = inheritedOverrides;
-		$[12] = t5;
-	} else t5 = $[12];
-	const overrides = t5;
-	let t6;
-	if ($[13] !== active || $[14] !== apply || $[15] !== cancel || $[16] !== defaults || $[17] !== draft || $[18] !== floating || $[19] !== inheritedOverrides || $[20] !== isOpen || $[21] !== open || $[22] !== openFloating || $[23] !== revision) {
-		t6 = {
+		$[12] = draft;
+		$[13] = onApply;
+		$[14] = t7;
+	} else t7 = $[14];
+	const apply = t7;
+	let t8;
+	if ($[15] !== active.overrides || $[16] !== inheritedOverrides) {
+		t8 = applyCvaEdits(inheritedOverrides, active.overrides);
+		$[15] = active.overrides;
+		$[16] = inheritedOverrides;
+		$[17] = t8;
+	} else t8 = $[17];
+	const overrides = t8;
+	const t9 = componentHosts > 0;
+	let t10;
+	if ($[18] !== active || $[19] !== apply || $[20] !== cancel || $[21] !== defaults || $[22] !== draft || $[23] !== floating || $[24] !== inheritedOverrides || $[25] !== isOpen || $[26] !== open || $[27] !== openFloating || $[28] !== revealToken || $[29] !== revision || $[30] !== t9 || $[31] !== tokenRequest) {
+		t10 = {
 			defaults,
 			inheritedOverrides,
 			draft,
@@ -688,77 +720,91 @@ function UIConfigurationProvider(t0) {
 			floating,
 			cancel,
 			apply,
-			revision
+			revision,
+			revealToken,
+			tokenRequest,
+			clearTokenRequest,
+			componentsHosted: t9,
+			hostComponents
 		};
-		$[13] = active;
-		$[14] = apply;
-		$[15] = cancel;
-		$[16] = defaults;
-		$[17] = draft;
-		$[18] = floating;
-		$[19] = inheritedOverrides;
-		$[20] = isOpen;
-		$[21] = open;
-		$[22] = openFloating;
-		$[23] = revision;
-		$[24] = t6;
-	} else t6 = $[24];
-	const contextValue = t6;
-	let t7;
-	if ($[25] !== active.theme || $[26] !== defaults) {
-		t7 = runtimeCss(defaults, active.theme);
-		$[25] = active.theme;
-		$[26] = defaults;
-		$[27] = t7;
-	} else t7 = $[27];
-	let t8;
-	if ($[28] !== t7) {
-		t8 = /* @__PURE__ */ jsx("style", {
+		$[18] = active;
+		$[19] = apply;
+		$[20] = cancel;
+		$[21] = defaults;
+		$[22] = draft;
+		$[23] = floating;
+		$[24] = inheritedOverrides;
+		$[25] = isOpen;
+		$[26] = open;
+		$[27] = openFloating;
+		$[28] = revealToken;
+		$[29] = revision;
+		$[30] = t9;
+		$[31] = tokenRequest;
+		$[32] = t10;
+	} else t10 = $[32];
+	const contextValue = t10;
+	let t11;
+	if ($[33] !== active.theme || $[34] !== defaults) {
+		t11 = runtimeCss(defaults, active.theme);
+		$[33] = active.theme;
+		$[34] = defaults;
+		$[35] = t11;
+	} else t11 = $[35];
+	let t12;
+	if ($[36] !== t11) {
+		t12 = /* @__PURE__ */ jsx("style", {
 			"data-povio-ui-configuration": true,
-			children: t7
+			children: t11
 		});
-		$[28] = t7;
-		$[29] = t8;
-	} else t8 = $[29];
-	let t9;
-	if ($[30] !== active.config || $[31] !== children) {
-		t9 = /* @__PURE__ */ jsx(UIConfig.Provider, {
+		$[36] = t11;
+		$[37] = t12;
+	} else t12 = $[37];
+	let t13;
+	if ($[38] !== active.config || $[39] !== children) {
+		t13 = /* @__PURE__ */ jsx(UIConfig.Provider, {
 			config: active.config,
 			children
 		});
-		$[30] = active.config;
-		$[31] = children;
-		$[32] = t9;
-	} else t9 = $[32];
-	let t10;
-	if ($[33] !== overrides || $[34] !== t9) {
-		t10 = /* @__PURE__ */ jsx(UIOverrides.Provider, {
+		$[38] = active.config;
+		$[39] = children;
+		$[40] = t13;
+	} else t13 = $[40];
+	let t14;
+	if ($[41] !== overrides || $[42] !== t13) {
+		t14 = /* @__PURE__ */ jsx(UIOverrides.Provider, {
 			config: overrides,
-			children: t9
+			children: t13
 		});
-		$[33] = overrides;
-		$[34] = t9;
-		$[35] = t10;
-	} else t10 = $[35];
-	let t11;
-	if ($[36] !== contextValue || $[37] !== t10 || $[38] !== t8) {
-		t11 = /* @__PURE__ */ jsxs(ConfigurationContext.Provider, {
+		$[41] = overrides;
+		$[42] = t13;
+		$[43] = t14;
+	} else t14 = $[43];
+	let t15;
+	if ($[44] !== contextValue || $[45] !== t12 || $[46] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(ConfigurationContext.Provider, {
 			value: contextValue,
-			children: [t8, t10]
+			children: [t12, t14]
 		});
-		$[36] = contextValue;
-		$[37] = t10;
-		$[38] = t8;
-		$[39] = t11;
-	} else t11 = $[39];
-	return t11;
+		$[44] = contextValue;
+		$[45] = t12;
+		$[46] = t14;
+		$[47] = t15;
+	} else t15 = $[47];
+	return t15;
 }
-function _temp2$5(value_0) {
+function _temp4$4(value_0) {
 	return value_0 + 1;
 }
-function _temp$7(value) {
+function _temp3$4(value) {
 	return value + 1;
 }
+function _temp2$5(count_0) {
+	return count_0 - 1;
+}
+function _temp$7(count) {
+	return count + 1;
+}
 function useUIConfiguration() {
 	const context = use(ConfigurationContext);
 	if (!context) throw new Error("useUIConfiguration requires UIConfigurationProvider");
@@ -766,6 +812,10 @@ function useUIConfiguration() {
 }
 //#endregion
 //#region src/configurator/inspector/InspectorDetails.tsx
+/** A token as a design tool names a variable: `--text-large--line-height` → `text-large/line-height`. */
+const variableName = (token) => token.replace(/^--/, "").replace(/-base$/, "").replaceAll("--", "/");
+/** Pixel values read like the box model's numbers and fonts by their family, as a design tool shows them. */
+const displayValue = (value, label) => label === "Font" ? value.split(",")[0]?.replace(/["']/g, "").trim() ?? value : value.replace(/(-?\d*\.\d+)px/g, (_, amount) => `${Math.round(Number(amount) * 10) / 10}px`);
 /** Shared inspector measurements and property groups for preview and app canvas. */
 function InspectorDetails(t0) {
 	const $ = c(18);
@@ -813,16 +863,30 @@ function InspectorDetails(t0) {
 	if ($[10] !== onSelect || $[11] !== snapshot.groups) {
 		let t6;
 		if ($[13] !== onSelect) {
-			t6 = (group_1) => /* @__PURE__ */ jsxs("section", { children: [group_1.name !== "Layout" && /* @__PURE__ */ jsx("h3", { children: group_1.name }), /* @__PURE__ */ jsx("dl", { children: group_1.properties.map((property_0) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: property_0.label }), /* @__PURE__ */ jsxs("dd", { children: [
-				property_0.color && /* @__PURE__ */ jsx("i", { style: { background: property_0.color } }),
-				/* @__PURE__ */ jsx("span", { children: property_0.value }),
-				property_0.token && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					title: `Edit ${property_0.token}`,
-					onClick: () => onSelect(property_0.token),
-					children: property_0.token.replace(/^--/, "")
-				})
-			] })] }, property_0.label)) })] }, group_1.name);
+			t6 = (group_1) => /* @__PURE__ */ jsxs("section", { children: [group_1.name !== "Layout" && /* @__PURE__ */ jsx("h3", { children: group_1.name }), /* @__PURE__ */ jsx("dl", { children: group_1.properties.map((property_0) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: property_0.label }), /* @__PURE__ */ jsx("dd", { children: property_0.token ? /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "studio-inspector-chip",
+				title: `Edit ${property_0.token} · ${property_0.value}`,
+				onClick: () => onSelect(property_0.token),
+				children: [
+					property_0.color && /* @__PURE__ */ jsx("i", { style: { background: property_0.color } }),
+					/* @__PURE__ */ jsx("span", {
+						className: "studio-inspector-chip-name",
+						children: variableName(property_0.token)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "studio-inspector-chip-value",
+						children: displayValue(property_0.value, property_0.label)
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("span", {
+				className: "studio-inspector-chip",
+				title: property_0.value,
+				children: [property_0.color && /* @__PURE__ */ jsx("i", { style: { background: property_0.color } }), /* @__PURE__ */ jsx("span", {
+					className: "studio-inspector-chip-value",
+					children: displayValue(property_0.value, property_0.label)
+				})]
+			}) })] }, property_0.label)) })] }, group_1.name);
 			$[13] = onSelect;
 			$[14] = t6;
 		} else t6 = $[14];
@@ -1435,6 +1499,74 @@ function splitVariants(className) {
 		utility: current
 	};
 }
+/** Variants that style a pseudo-element or other elements, never the element's own value. */
+const otherTargets = /* @__PURE__ */ new Set([
+	"placeholder",
+	"before",
+	"after",
+	"selection",
+	"marker",
+	"file",
+	"first-letter",
+	"first-line",
+	"backdrop",
+	"*",
+	"**"
+]);
+const stateSelectors = {
+	hover: ":hover",
+	focus: ":focus",
+	"focus-within": ":focus-within",
+	"focus-visible": ":focus-visible",
+	active: ":active",
+	disabled: ":disabled",
+	enabled: ":enabled",
+	checked: ":checked",
+	indeterminate: ":indeterminate",
+	invalid: ":invalid",
+	valid: ":valid",
+	required: ":required",
+	optional: ":optional",
+	"read-only": ":read-only",
+	"placeholder-shown": ":placeholder-shown",
+	empty: ":empty",
+	open: ":is([open], :popover-open, :open)",
+	first: ":first-child",
+	last: ":last-child",
+	only: ":only-child",
+	odd: ":nth-child(odd)",
+	even: ":nth-child(even)"
+};
+/** A CSS selector for one state variant, or `undefined` when its condition cannot be read from the element. */
+function variantSelector(variant) {
+	if (variant.startsWith("not-")) {
+		const inner = variantSelector(variant.slice(4));
+		return inner && `:not(${inner})`;
+	}
+	if (variant.startsWith("has-")) {
+		const inner = variantSelector(variant.slice(4));
+		return inner && `:has(${inner})`;
+	}
+	if (stateSelectors[variant]) return stateSelectors[variant];
+	if (variant.startsWith("aria-") && !variant.includes("[")) return `[aria-${variant.slice(5)}="true"]`;
+	const arbitrary = variant.match(/^\[(&?)(:[^\s&>+~,]+)\]$/);
+	return arbitrary ? arbitrary[2].replaceAll("_", " ") : void 0;
+}
+/**
+* How a variant class relates to an element's current value: `other` styles a pseudo-element or descendants,
+* `inactive` / `active` are state conditions read from the element, and `unknown` covers breakpoints, container
+* queries, group/peer state and anything else that cannot be checked from the element alone.
+*/
+function variantState(variants, element) {
+	if (variants.some((variant) => otherTargets.has(variant))) return "other";
+	const selectors = variants.map(variantSelector);
+	if (selectors.some((selector) => selector === void 0) || typeof element.matches !== "function") return "unknown";
+	try {
+		return element.matches(`*${selectors.join("")}`) ? "active" : "inactive";
+	} catch {
+		return "unknown";
+	}
+}
 /** Breakpoint weight when every variant is an active breakpoint; `undefined` for state variants or inactive breakpoints. */
 function variantWeight(variants, viewportWidth, rootFontSize) {
 	let weight = 0;
@@ -1545,17 +1677,21 @@ function inspectElement(element, isKnown) {
 	const position = style.getPropertyValue("position");
 	if (position && position !== "static") box.position = readSides("");
 	const classes = Array.from(element.classList);
-	const plainClasses = classes.filter((name) => !splitVariants(name).variants.length && !name.includes("["));
+	const plainOf = (list) => list.filter((name) => !splitVariants(name).variants.length && !name.includes("["));
+	const plainClasses = plainOf(classes);
 	const spacing = inspectTokens(plainClasses.join(" "), isKnown);
-	const candidates = (prefix, namespaces) => plainClasses.flatMap((raw) => {
+	const candidates = (prefix, namespaces, suffix = "") => (plain) => plain.flatMap((raw) => {
 		const utility = raw.replace(/^!|!$/g, "");
 		if (!utility.startsWith(`${prefix}-`)) return [];
-		const suffix = utility.slice(prefix.length + 1);
-		return namespaces.map((namespace) => `--${namespace}${suffix}`);
+		const name = utility.slice(prefix.length + 1);
+		return namespaces.map((namespace) => `--${namespace}${name}${suffix}`);
 	});
-	const variantsAffect = (prefixes) => classes.some((raw) => {
+	const touches = (utility, prefixes) => prefixes.some((prefix) => utility.replace(/^!/, "").startsWith(`${prefix}-`));
+	const variantsAffect = (node, list, plain, prefixes) => list.some((raw) => {
 		const { variants, utility } = splitVariants(raw);
-		return variants.length > 0 && prefixes.some((prefix) => utility.replace(/^!/, "").startsWith(`${prefix}-`));
+		if (!variants.length || plain.includes(utility) || !touches(utility, prefixes)) return false;
+		const state = variantState(variants, node);
+		return state === "active" || state === "unknown";
 	});
 	const equivalent = (value, computed, property) => {
 		if (!value) return false;
@@ -1570,12 +1706,35 @@ function inspectElement(element, isKnown) {
 			if (length[2] === "em") factor = Number.parseFloat(style.fontSize);
 			return Math.abs(Number(length[1]) * factor - Number.parseFloat(computed)) < .02;
 		}
+		if (property === "line-height" && /^\d+(?:\.\d+)?$/.test(value) && computed.endsWith("px")) return Math.abs(Number(value) * Number.parseFloat(style.fontSize) - Number.parseFloat(computed)) < .05;
 		return value.replace(/["']/g, "").replace(/\s+/g, " ") === computed.replace(/["']/g, "").replace(/\s+/g, " ");
 	};
-	const property = (label, css, tokens = [], prefixes = []) => {
+	const matchingToken = (nodeStyle, tokens, computed, css) => tokens.find((token) => !!token && isKnown(token) && equivalent(resolveToken(nodeStyle, token), computed, css));
+	/**
+	* Inherited properties (type and text color) usually come from an ancestor's utility, like the text style on a
+	* field wrapper. Walk up to the first element whose plain class renders this value; stop where the value changes or
+	* where a variant or arbitrary class sets it, since its active condition is unknown.
+	*/
+	const inheritedToken = (css, computed, tokens, prefixes) => {
+		for (let node = element.parentElement; node; node = node.parentElement) {
+			const nodeStyle = view.getComputedStyle(node);
+			if (css !== "line-height" && nodeStyle.getPropertyValue(css) !== computed) return void 0;
+			const list = Array.from(node.classList);
+			const plain = plainOf(list);
+			if (variantsAffect(node, list, plain, prefixes)) return void 0;
+			const token = matchingToken(nodeStyle, tokens(plain), computed, css);
+			if (token) return token;
+			if (list.some((name) => name.includes("[") && touches(splitVariants(name).utility, prefixes))) return void 0;
+		}
+	};
+	const setsOwn = (css, prefixes) => classes.some((name) => {
+		const { utility } = splitVariants(name);
+		return name.includes("[") && touches(utility, prefixes) || css === "line-height" && touches(utility, ["leading"]) || css === "letter-spacing" && touches(utility, ["tracking"]);
+	});
+	const property = (label, css, tokens = [], prefixes = [], inherited = false) => {
 		const computed = style.getPropertyValue(css);
-		const matching = variantsAffect(prefixes) ? [] : tokens.filter((token) => !!token && isKnown(token) && equivalent(resolveToken(style, token), computed, css));
-		const token = [...new Set(matching)][0];
+		const own = typeof tokens === "function" ? tokens(plainClasses) : tokens;
+		const token = variantsAffect(element, classes, plainClasses, prefixes) ? void 0 : matchingToken(style, own, computed, css) ?? (inherited && typeof tokens === "function" && !setsOwn(css, prefixes) ? inheritedToken(css, computed, tokens, prefixes) : void 0);
 		const isColor = css.includes("color");
 		return {
 			label,
@@ -1618,18 +1777,19 @@ function inspectElement(element, isKnown) {
 		property("Radius", "border-radius", [spacing.radius], ["rounded"]),
 		...sides.map((side) => property(`Border ${side} width`, `border-${side}-width`))
 	];
+	const withBase = (tokens) => (plain) => tokens(plain).flatMap((token) => [token, `${token}-base`]);
 	const typography = [
-		property("Font", "font-family", candidates("font", ["font-"]), ["font"]),
-		property("Size", "font-size", candidates("text", ["text-"]), ["text"]),
-		property("Weight", "font-weight", candidates("font", ["font-weight-"]), ["font"]),
-		property("Line height", "line-height"),
-		property("Letter spacing", "letter-spacing"),
+		property("Font", "font-family", candidates("font", ["font-"]), ["font"], true),
+		property("Size", "font-size", candidates("text", ["text-"]), ["text"], true),
+		property("Weight", "font-weight", candidates("font", ["font-weight-"]), ["font"], true),
+		property("Line height", "line-height", candidates("text", ["text-"], "--line-height"), ["text", "leading"], true),
+		property("Letter spacing", "letter-spacing", candidates("text", ["text-"], "--letter-spacing"), ["text", "tracking"], true),
 		property("Alignment", "text-align")
 	];
 	const appearance = [
-		property("Text", "color", candidates("text", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["text"]),
-		property("Fill", "background-color", candidates("bg", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["bg"]),
-		property("Border", "border-top-color", candidates("border", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["border"]),
+		property("Text", "color", withBase(candidates("text", ["color-", ""])), ["text"], true),
+		property("Fill", "background-color", withBase(candidates("bg", ["color-", ""])), ["bg"]),
+		property("Border", "border-top-color", withBase(candidates("border", ["color-", ""])), ["border"]),
 		property("Opacity", "opacity"),
 		property("Shadow", "box-shadow")
 	];
@@ -2446,9 +2606,20 @@ function useStudioWindow(bounds, enabled = true) {
 			}
 		};
 	}
+	const move = controls("move");
 	return {
 		ref,
-		move: controls("move"),
+		move,
+		dragArea: {
+			onPointerMove: (event_3) => move.onPointerMove(event_3),
+			onPointerUp: (event_4) => move.onPointerUp(event_4),
+			onLostPointerCapture: move.onLostPointerCapture,
+			onPointerCancel: move.onPointerCancel,
+			onPointerDown(event_5) {
+				if (event_5.target.closest("button, input, select, textarea, a, label, [role='tab']")) return;
+				move.onPointerDown(event_5);
+			}
+		},
 		resize: (edge) => controls(edge)
 	};
 }
@@ -4535,8 +4706,8 @@ function familyName(value) {
 * theme's font families, like a design tool's font picker.
 */
 function FontRoleCard(t0) {
-	const $ = c(44);
-	const { label, value, options, changed, onChange, onReset } = t0;
+	const $ = c(46);
+	const { label, value, options, changed, onChange, onReset, token, highlighted } = t0;
 	let t1;
 	if ($[0] !== options || $[1] !== value) {
 		let t2;
@@ -4551,112 +4722,113 @@ function FontRoleCard(t0) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const selected = t1;
-	let t2;
+	const t2 = `studio-font-role ${highlighted ? "is-highlighted" : ""}`;
+	let t3;
 	if ($[5] !== label) {
-		t2 = /* @__PURE__ */ jsx("span", { children: label });
+		t3 = /* @__PURE__ */ jsx("span", { children: label });
 		$[5] = label;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
 	if ($[7] !== selected?.label || $[8] !== value) {
-		t3 = selected?.label ?? familyName(value);
+		t4 = selected?.label ?? familyName(value);
 		$[7] = selected?.label;
 		$[8] = value;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== t3) {
-		t4 = /* @__PURE__ */ jsx("strong", { children: t3 });
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[12] !== t2 || $[13] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("span", {
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx("strong", { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t3 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("span", {
 			className: "studio-font-role-text",
-			children: [t2, t4]
+			children: [t3, t5]
 		});
-		$[12] = t2;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
 	if ($[15] !== value) {
-		t6 = /* @__PURE__ */ jsx("span", {
+		t7 = /* @__PURE__ */ jsx("span", {
 			className: "studio-font-role-sample",
 			style: { fontFamily: value },
 			"aria-hidden": "true",
 			children: "Aa"
 		});
 		$[15] = value;
-		$[16] = t6;
-	} else t6 = $[16];
-	const t7 = `${label} font`;
-	const t8 = selected?.name ?? "";
-	let t9;
+		$[16] = t7;
+	} else t7 = $[16];
+	const t8 = `${label} font`;
+	const t9 = selected?.name ?? "";
+	let t10;
 	if ($[17] !== onChange || $[18] !== options) {
-		t9 = (event) => {
-			const option_0 = options.find((t10) => {
-				const { name } = t10;
+		t10 = (event) => {
+			const option_0 = options.find((t11) => {
+				const { name } = t11;
 				return name === event.target.value;
 			});
 			if (option_0) onChange(option_0.value);
 		};
 		$[17] = onChange;
 		$[18] = options;
-		$[19] = t9;
-	} else t9 = $[19];
-	let t10;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
 	if ($[20] !== selected) {
-		t10 = !selected && /* @__PURE__ */ jsx("option", {
+		t11 = !selected && /* @__PURE__ */ jsx("option", {
 			value: "",
 			disabled: true,
 			children: "Custom"
 		});
 		$[20] = selected;
-		$[21] = t10;
-	} else t10 = $[21];
-	let t11;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
 	if ($[22] !== options) {
-		t11 = new Set(options.map(_temp3));
+		t12 = new Set(options.map(_temp3));
 		$[22] = options;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[24] !== t11) {
-		t12 = [...t11];
-		$[24] = t11;
-		$[25] = t12;
-	} else t12 = $[25];
+		$[23] = t12;
+	} else t12 = $[23];
 	let t13;
-	if ($[26] !== options || $[27] !== t12) {
-		t13 = t12.map((group_0) => /* @__PURE__ */ jsx("optgroup", {
+	if ($[24] !== t12) {
+		t13 = [...t12];
+		$[24] = t12;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== options || $[27] !== t13) {
+		t14 = t13.map((group_0) => /* @__PURE__ */ jsx("optgroup", {
 			label: group_0,
 			children: options.filter((option_1) => option_1.group === group_0).map(_temp4)
 		}, group_0));
 		$[26] = options;
-		$[27] = t12;
-		$[28] = t13;
-	} else t13 = $[28];
-	let t14;
-	if ($[29] !== t10 || $[30] !== t13 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
-		t14 = /* @__PURE__ */ jsxs("select", {
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t10 || $[30] !== t11 || $[31] !== t14 || $[32] !== t8 || $[33] !== t9) {
+		t15 = /* @__PURE__ */ jsxs("select", {
 			className: "studio-font-role-select",
-			"aria-label": t7,
-			value: t8,
-			onChange: t9,
-			children: [t10, t13]
+			"aria-label": t8,
+			value: t9,
+			onChange: t10,
+			children: [t11, t14]
 		});
 		$[29] = t10;
-		$[30] = t13;
-		$[31] = t7;
+		$[30] = t11;
+		$[31] = t14;
 		$[32] = t8;
 		$[33] = t9;
-		$[34] = t14;
-	} else t14 = $[34];
-	let t15;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
 	if ($[35] !== changed || $[36] !== label || $[37] !== onReset) {
-		t15 = changed && /* @__PURE__ */ jsx("button", {
+		t16 = changed && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "studio-font-role-reset",
 			"aria-label": `Reset ${label} font`,
@@ -4670,26 +4842,29 @@ function FontRoleCard(t0) {
 		$[35] = changed;
 		$[36] = label;
 		$[37] = onReset;
-		$[38] = t15;
-	} else t15 = $[38];
-	let t16;
-	if ($[39] !== t14 || $[40] !== t15 || $[41] !== t5 || $[42] !== t6) {
-		t16 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-font-role",
+		$[38] = t16;
+	} else t16 = $[38];
+	let t17;
+	if ($[39] !== t15 || $[40] !== t16 || $[41] !== t2 || $[42] !== t6 || $[43] !== t7 || $[44] !== token) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			"data-token": token,
 			children: [
-				t5,
 				t6,
-				t14,
-				t15
+				t7,
+				t15,
+				t16
 			]
 		});
-		$[39] = t14;
-		$[40] = t15;
-		$[41] = t5;
+		$[39] = t15;
+		$[40] = t16;
+		$[41] = t2;
 		$[42] = t6;
-		$[43] = t16;
-	} else t16 = $[43];
-	return t16;
+		$[43] = t7;
+		$[44] = token;
+		$[45] = t17;
+	} else t17 = $[45];
+	return t17;
 }
 function _temp4(option_2) {
 	return /* @__PURE__ */ jsx("option", {
@@ -5248,6 +5423,67 @@ function _temp(t0) {
 	return step;
 }
 //#endregion
+//#region src/configurator/ComponentPreview.tsx
+const ComponentGallery = lazy(() => import("./ComponentGallery-DDSqnm9f.js"));
+/** Every component, styled by a configuration; the configurator's preview and the App Canvas Components view. */
+function ComponentPreview(t0) {
+	const $ = c(14);
+	const { value, mode, inspector } = t0;
+	const { defaults } = useUIConfiguration();
+	const t1 = value.config;
+	const t2 = `studio-sample ${mode}`;
+	let t3;
+	if ($[0] !== defaults || $[1] !== mode || $[2] !== value.theme) {
+		t3 = previewTokens(defaults, value.theme, mode);
+		$[0] = defaults;
+		$[1] = mode;
+		$[2] = value.theme;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = t3;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("p", {
+			className: "studio-gallery-loading",
+			children: "Loading components…"
+		});
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== inspector) {
+		t6 = /* @__PURE__ */ jsx(Suspense, {
+			fallback: t5,
+			children: /* @__PURE__ */ jsx(ComponentGallery, { inspector })
+		});
+		$[5] = inspector;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== t2 || $[8] !== t4 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			style: t4,
+			"data-testid": "component-preview",
+			children: t6
+		});
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== t7 || $[12] !== value.config) {
+		t8 = /* @__PURE__ */ jsx(UIConfig.Provider, {
+			config: t1,
+			children: t7
+		});
+		$[11] = t7;
+		$[12] = value.config;
+		$[13] = t8;
+	} else t8 = $[13];
+	return t8;
+}
+//#endregion
 //#region src/configurator/UIConfigurator.tsx
 const colorNamespaces = {
 	surface: "Surfaces",
@@ -5346,64 +5582,6 @@ function groupKeyFor(section, name, defaults) {
 	const textStyle = section === "Typography" ? name.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
 	return textStyle ? `--text-${textStyle}` : section === "Typography" ? name.startsWith("--font-weight-") ? "Font weights" : name.startsWith("--font-") ? "Font families" : "Letter spacing" : section === "Colors" ? baseColorNames(defaults).has(name) ? `Base system · ${name.slice(2).split("-")[0]}` : colorNamespaces[name.slice(2).split("-")[0]] ?? "Other" : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name).title : section === "Effects" ? effectToken(name).title : "tokens";
 }
-const ComponentGallery = lazy(() => import("./ComponentGallery-CMFrbwEN.js"));
-function ComponentPreview(t0) {
-	const $ = c(14);
-	const { value, mode, inspector } = t0;
-	const { defaults } = useUIConfiguration();
-	const t1 = value.config;
-	const t2 = `studio-sample ${mode}`;
-	let t3;
-	if ($[0] !== defaults || $[1] !== mode || $[2] !== value.theme) {
-		t3 = previewTokens(defaults, value.theme, mode);
-		$[0] = defaults;
-		$[1] = mode;
-		$[2] = value.theme;
-		$[3] = t3;
-	} else t3 = $[3];
-	const t4 = t3;
-	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx("p", {
-			className: "studio-gallery-loading",
-			children: "Loading components…"
-		});
-		$[4] = t5;
-	} else t5 = $[4];
-	let t6;
-	if ($[5] !== inspector) {
-		t6 = /* @__PURE__ */ jsx(Suspense, {
-			fallback: t5,
-			children: /* @__PURE__ */ jsx(ComponentGallery, { inspector })
-		});
-		$[5] = inspector;
-		$[6] = t6;
-	} else t6 = $[6];
-	let t7;
-	if ($[7] !== t2 || $[8] !== t4 || $[9] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: t2,
-			style: t4,
-			"data-testid": "component-preview",
-			children: t6
-		});
-		$[7] = t2;
-		$[8] = t4;
-		$[9] = t6;
-		$[10] = t7;
-	} else t7 = $[10];
-	let t8;
-	if ($[11] !== t7 || $[12] !== value.config) {
-		t8 = /* @__PURE__ */ jsx(UIConfig.Provider, {
-			config: t1,
-			children: t7
-		});
-		$[11] = t7;
-		$[12] = value.config;
-		$[13] = t8;
-	} else t8 = $[13];
-	return t8;
-}
 /** Changing a text style's font size sets its line height to this multiple of it; the line height stays editable. */
 const fontSizeLineHeight = "1.5";
 const remPresets = [
@@ -5621,7 +5799,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		return () => observer.disconnect();
 	}, [studioWindow.ref]);
 	const inherited = UIConfig.useConfig();
-	const { defaults, draft, setDraft, isOpen, cancel, apply, revision } = useUIConfiguration();
+	const { defaults, draft, setDraft, isOpen, cancel, apply, revision, tokenRequest, clearTokenRequest, componentsHosted } = useUIConfiguration();
 	const remembered = memory.current;
 	const [mode, setMode] = useState(remembered.mode ?? "light");
 	const [sizeUnit, setSizeUnit] = useState(remembered.sizeUnit ?? "px");
@@ -5708,7 +5886,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		setHighlightedToken(null);
 	};
 	const [highlightedToken, setHighlightedToken] = useState(null);
-	const isInspectable = useCallback((name) => (name in defaults.theme || name in defaults.light || name in defaults.dark) && groups.includes(groupFor(name)) && !name.startsWith("--color-"), [defaults]);
+	const isInspectable = useCallback((name) => isEditableToken(name, defaults), [defaults]);
 	const describeToken = useCallback((name_0) => {
 		const section_0 = sectionFor(name_0);
 		const bucket = mode === "dark" && name_0 in defaults.dark ? "dark" : name_0 in defaults.light ? "light" : "theme";
@@ -5746,10 +5924,20 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		}));
 		setHighlightedToken(name_1);
 	}, [defaults]);
+	useEffect(() => {
+		if (!tokenRequest) return;
+		focusToken(tokenRequest.name);
+		clearTokenRequest();
+	}, [
+		tokenRequest,
+		focusToken,
+		clearTokenRequest
+	]);
 	useEffect(() => {
 		if (!highlightedToken) return;
 		const frame_0 = requestAnimationFrame(() => {
-			(editorRef.current?.ownerDocument.getElementById(`token-${highlightedToken}`)?.closest(".studio-token"))?.scrollIntoView({
+			const doc = editorRef.current?.ownerDocument;
+			(doc?.getElementById(`token-${highlightedToken}`)?.closest(".studio-token") ?? doc?.querySelector(`.studio-font-role[data-token="${CSS.escape(highlightedToken)}"]`))?.scrollIntoView({
 				block: "center",
 				behavior: "smooth"
 			});
@@ -5886,17 +6074,17 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 	const inActiveTab = (key_6) => !tabbed || tabFor(key_6) === activeSectionTab;
 	const flatTab = tabbed && section === "Typography" && activeSectionTab !== textStylesTab;
 	const orderedGroups = [...visibleGroups].filter(([key_7]) => inActiveTab(key_7)).sort(([a_0], [b_0]) => groupRank(a_0) - groupRank(b_0));
-	const collapsibleKeys = sectionKeys.filter(inActiveTab);
+	const collapsibleKeys = sectionKeys.filter((key_8) => inActiveTab(key_8) && !groupedEntries.get(key_8)?.compact);
 	const primaryGroup = collapsibleKeys[0];
-	const isExpanded = (key_8) => searching || (expandedGroups[`${section}:${key_8}`] ?? key_8 === primaryGroup);
-	const toggleGroup = (key_9) => setExpandedGroups((current_10) => ({
+	const isExpanded = (key_9) => searching || (expandedGroups[`${section}:${key_9}`] ?? key_9 === primaryGroup);
+	const toggleGroup = (key_10) => setExpandedGroups((current_10) => ({
 		...current_10,
-		[`${section}:${key_9}`]: !isExpanded(key_9)
+		[`${section}:${key_10}`]: !isExpanded(key_10)
 	}));
 	const allExpanded = collapsibleKeys.every(isExpanded);
 	const setAllGroups = (expanded) => setExpandedGroups((current_11) => ({
 		...current_11,
-		...Object.fromEntries(collapsibleKeys.map((key_10) => [`${section}:${key_10}`, expanded]))
+		...Object.fromEntries(collapsibleKeys.map((key_11) => [`${section}:${key_11}`, expanded]))
 	}));
 	const groupChanged = (entries_1) => entries_1.some(([name_19]) => {
 		const bucket_1 = mode === "dark" && name_19 in defaults.dark ? "dark" : name_19 in defaults.light ? "light" : "theme";
@@ -5970,7 +6158,9 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 						options,
 						changed: name_24 in draft.theme.theme,
 						onChange: (value_12) => setToken(name_24, value_12),
-						onReset: () => setToken(name_24)
+						onReset: () => setToken(name_24),
+						token: name_24,
+						highlighted: highlightedToken === name_24
 					}, `${revision}-${resetRevision}-${name_24}`))
 				}),
 				/* @__PURE__ */ jsx(FontUpload, { onUpload: refreshLoadedFonts }),
@@ -5978,7 +6168,39 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 			]
 		}, "font-families");
 	};
+	const textStyleColumns = [
+		"Font size",
+		"Line height",
+		"Letter spacing"
+	];
+	const textStyleColumn = (name_25) => name_25.endsWith("--line-height") ? 1 : name_25.endsWith("--letter-spacing") ? 2 : 0;
+	const firstTextStyle = orderedGroups.find(([, group_3]) => group_3.compact)?.[0];
+	/** One table row per text style, under a single column header; a style without a token leaves its cell empty. */
+	const renderTextStyleRow = (key_12, group_4) => /* @__PURE__ */ jsxs(Fragment, { children: [key_12 === firstTextStyle && /* @__PURE__ */ jsxs("div", {
+		className: "studio-type-row studio-type-head",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("span", { children: "Style" }), textStyleColumns.map((column) => /* @__PURE__ */ jsx("span", { children: column }, column))]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "studio-type-row",
+		role: "group",
+		"aria-label": group_4.title,
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "studio-type-name",
+			children: [group_4.title, groupChanged(group_4.entries) && /* @__PURE__ */ jsx("span", {
+				className: "studio-group-changed",
+				"aria-label": "has changes"
+			})]
+		}), textStyleColumns.map((column_0, index) => {
+			const entry_3 = group_4.entries.find(([name_26]) => textStyleColumn(name_26) === index);
+			return /* @__PURE__ */ jsx("div", {
+				className: "studio-type-cell",
+				children: entry_3 && renderToken(entry_3, true)
+			}, column_0);
+		})]
+	})] }, key_12);
 	const showTabs = sectionTabList.length > 1 && isTokenSection(section);
+	const overrideCount = `${changedCount} ${changedCount === 1 ? "override" : "overrides"}`;
+	const footerStatus = Object.keys(invalidFields).length ? "Fix invalid values or reset before applying or exporting." : nothingToReset && !changedCount ? "No active changes to reset." : (popupBlocked ? "Allow pop-ups for this site, then try again." : message) || overrideCount;
 	const toggleAllButton = isTokenSection(section) && !flatTab && collapsibleKeys.length > 1 && /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "studio-toggle-all",
@@ -5989,15 +6211,15 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 			"aria-hidden": "true"
 		}), allExpanded ? "Collapse all" : "Expand all"]
 	});
-	const selectControl = (label, key_11, field_1, options_0) => /* @__PURE__ */ jsxs("label", {
+	const selectControl = (label, key_13, field_1, options_0) => /* @__PURE__ */ jsxs("label", {
 		className: "studio-setting",
 		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("select", {
 			"aria-label": label,
-			value: String(config[key_11][field_1]),
-			onChange: (event) => setComponent(key_11, field_1, event.target.value),
+			value: String(config[key_13][field_1]),
+			onChange: (event) => setComponent(key_13, field_1, event.target.value),
 			children: options_0.map((option) => /* @__PURE__ */ jsx("option", { children: option }, option))
 		})]
-	}, `${key_11}-${field_1}`);
+	}, `${key_13}-${field_1}`);
 	return /* @__PURE__ */ jsx(Overlay, {
 		className: `studio-overlay${floating && !poppedOut ? " studio-overlay-floating" : ""}`,
 		isOpen,
@@ -6008,13 +6230,15 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		children: /* @__PURE__ */ jsx(Surface, {
 			className: `studio-modal${poppedOut ? " studio-modal-popout" : ""}`,
 			ref: studioWindow.ref,
+			"data-components-hosted": componentsHosted || void 0,
 			children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
 				className: "studio-dialog",
-				"data-compact-preview": compactPreview || void 0,
+				"data-compact-preview": compactPreview && !componentsHosted || void 0,
 				style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
 				children: [
 					/* @__PURE__ */ jsxs("header", {
 						className: "studio-topbar",
+						...poppedOut ? {} : studioWindow.dragArea,
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: "studio-title",
@@ -6029,11 +6253,11 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "studio-section-tabs",
 									children: [
-										navSections.map((group_3) => /* @__PURE__ */ jsx("button", {
-											"aria-current": !compactPreview && (group_3 === "Layout" ? isLayoutKind(section) : section === group_3) ? "page" : void 0,
-											onClick: () => changeSection(group_3 === "Layout" ? lastLayoutSection : group_3),
-											children: group_3
-										}, group_3)),
+										navSections.map((group_5) => /* @__PURE__ */ jsx("button", {
+											"aria-current": !compactPreview && (group_5 === "Layout" ? isLayoutKind(section) : section === group_5) ? "page" : void 0,
+											onClick: () => changeSection(group_5 === "Layout" ? lastLayoutSection : group_5),
+											children: group_5
+										}, group_5)),
 										/* @__PURE__ */ jsx("span", {
 											className: "studio-nav-divider",
 											"aria-hidden": "true"
@@ -6044,7 +6268,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 											children: "Advanced"
 										})
 									]
-								}), /* @__PURE__ */ jsx("button", {
+								}), !componentsHosted && /* @__PURE__ */ jsx("button", {
 									type: "button",
 									className: "studio-preview-tab",
 									"aria-current": compactPreview ? "page" : void 0,
@@ -6053,20 +6277,37 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 										const dialog = bodyRef.current?.parentElement;
 										if (dialog) dialog.scrollTop = 0;
 									},
-									children: "Live preview"
+									children: "Components"
 								})]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "studio-topbar-controls",
 								children: /* @__PURE__ */ jsxs("label", {
 									className: "studio-search",
-									children: [/* @__PURE__ */ jsx(Search, { size: 14 }), /* @__PURE__ */ jsx("input", {
-										"aria-label": "Search tokens",
-										placeholder: "Search tokens",
-										value: search,
-										disabled: !isTokenSection(section),
-										onChange: (event_0) => setSearch(event_0.target.value)
-									})]
+									title: "Search tokens",
+									children: [
+										/* @__PURE__ */ jsx(Search, { size: 14 }),
+										/* @__PURE__ */ jsx("input", {
+											"aria-label": "Search tokens",
+											placeholder: "Search tokens",
+											value: search,
+											disabled: !isTokenSection(section),
+											onChange: (event_0) => setSearch(event_0.target.value),
+											onKeyDown: (event_1) => {
+												if (event_1.key !== "Escape") return;
+												event_1.stopPropagation();
+												if (search) setSearch("");
+												else event_1.currentTarget.blur();
+											}
+										}),
+										search && /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "studio-search-clear",
+											"aria-label": "Clear search",
+											onClick: () => setSearch(""),
+											children: /* @__PURE__ */ jsx(X, { size: 12 })
+										})
+									]
 								})
 							})
 						]
@@ -6074,413 +6315,413 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 					/* @__PURE__ */ jsxs("div", {
 						ref: bodyRef,
 						className: "studio-body",
-						children: [
-							/* @__PURE__ */ jsxs("main", {
-								ref: editorRef,
-								className: "studio-editor",
-								onScroll: (event_1) => memory.current.editorScroll = event_1.currentTarget.scrollTop,
-								children: [
-									layoutSection ? /* @__PURE__ */ jsxs("div", {
-										className: "studio-subtabs-bar",
-										children: [/* @__PURE__ */ jsx("div", {
-											className: "studio-subtabs",
-											role: "tablist",
-											"aria-label": "Layout tokens",
-											children: layoutKinds.map((kind_0) => /* @__PURE__ */ jsxs("button", {
-												type: "button",
-												role: "tab",
-												"aria-selected": kind_0 === section,
-												onClick: () => changeSection(kind_0),
-												children: [kind_0, Object.keys(draft.theme.theme).some((name_25) => layoutKindFor(name_25) === kind_0) && /* @__PURE__ */ jsx("span", {
-													className: "studio-group-changed",
-													"aria-label": "has changes"
-												})]
-											}, kind_0))
-										}), toggleAllButton]
-									}) : showTabs ? /* @__PURE__ */ jsxs("div", {
-										className: "studio-subtabs-bar",
-										children: [/* @__PURE__ */ jsx("div", {
-											className: "studio-subtabs",
-											role: "tablist",
-											"aria-label": `${section} tokens`,
-											children: sectionTabList.map((tab_0) => /* @__PURE__ */ jsxs("button", {
-												type: "button",
-												role: "tab",
-												"aria-selected": !searching && tab_0 === activeSectionTab,
-												disabled: searching,
-												onClick: () => setSectionTabs((current_12) => ({
-													...current_12,
-													[section]: tab_0
-												})),
-												children: [tab_0, groupChanged([...groupedEntries].filter(([key_12]) => tabFor(key_12) === tab_0).flatMap(([, group_4]) => group_4.entries)) && /* @__PURE__ */ jsx("span", {
+						children: [/* @__PURE__ */ jsxs("main", {
+							ref: editorRef,
+							className: "studio-editor",
+							onScroll: (event_2) => memory.current.editorScroll = event_2.currentTarget.scrollTop,
+							children: [
+								layoutSection ? /* @__PURE__ */ jsxs("div", {
+									className: "studio-subtabs-bar",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "studio-subtabs",
+										role: "tablist",
+										"aria-label": "Layout tokens",
+										children: layoutKinds.map((kind_0) => /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											role: "tab",
+											"aria-selected": kind_0 === section,
+											onClick: () => changeSection(kind_0),
+											children: [kind_0, Object.keys(draft.theme.theme).some((name_27) => layoutKindFor(name_27) === kind_0) && /* @__PURE__ */ jsx("span", {
+												className: "studio-group-changed",
+												"aria-label": "has changes"
+											})]
+										}, kind_0))
+									}), toggleAllButton]
+								}) : showTabs ? /* @__PURE__ */ jsxs("div", {
+									className: "studio-subtabs-bar",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "studio-subtabs",
+										role: "tablist",
+										"aria-label": `${section} tokens`,
+										children: sectionTabList.map((tab_0) => /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											role: "tab",
+											"aria-selected": !searching && tab_0 === activeSectionTab,
+											disabled: searching,
+											onClick: () => setSectionTabs((current_12) => ({
+												...current_12,
+												[section]: tab_0
+											})),
+											children: [tab_0, groupChanged([...groupedEntries].filter(([key_14]) => tabFor(key_14) === tab_0).flatMap(([, group_6]) => group_6.entries)) && /* @__PURE__ */ jsx("span", {
+												className: "studio-group-changed",
+												"aria-label": "has changes"
+											})]
+										}, tab_0))
+									}), toggleAllButton]
+								}) : advancedSection ? /* @__PURE__ */ jsx("div", {
+									className: "studio-subtabs-bar",
+									children: /* @__PURE__ */ jsx("div", {
+										className: "studio-subtabs",
+										role: "tablist",
+										"aria-label": "Advanced settings",
+										children: advancedSections.map(([key_15, label_0]) => /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											role: "tab",
+											"aria-selected": key_15 === section,
+											onClick: () => changeSection(key_15),
+											children: [label_0, (key_15 === "Components" ? Object.keys(draft.config).length > 0 : key_15 === "Variants & overrides" && Object.keys(draft.overrides ?? {}).length > 0) && /* @__PURE__ */ jsx("span", {
+												className: "studio-group-changed",
+												"aria-label": "has changes"
+											})]
+										}, key_15))
+									})
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: "studio-editor-heading",
+									children: [/* @__PURE__ */ jsx("h2", { children: section }), toggleAllButton]
+								}),
+								isTokenSection(section) && /* @__PURE__ */ jsxs(Fragment$1, { children: [layoutSection && !searching && /* @__PURE__ */ jsx(LayoutScaleControl, {
+									kind: layoutSection,
+									level: layoutLevelFor(defaults, draft.theme.theme, layoutSection),
+									onChange: (level_0) => setLayoutLevel(layoutSection, level_0)
+								}, layoutSection), /* @__PURE__ */ jsxs("div", {
+									className: `studio-token-list ${section !== "Typography" ? "studio-token-list-inline" : "studio-token-list-rows"}`,
+									children: [orderedGroups.map(([key_16, group_7]) => group_7.compact && !flatTab ? renderTextStyleRow(key_16, group_7) : group_7.title && !flatTab ? /* @__PURE__ */ jsxs("fieldset", {
+										className: `studio-token-group ${group_7.compact ? "studio-type-style" : ""} ${!isExpanded(key_16) ? "is-collapsed" : ""}`,
+										children: [/* @__PURE__ */ jsxs("legend", { children: [/* @__PURE__ */ jsxs("button", {
+											type: "button",
+											className: "studio-group-toggle",
+											"aria-expanded": isExpanded(key_16),
+											"aria-controls": `group-${section}-${key_16.replaceAll(" ", "-")}`,
+											onClick: () => toggleGroup(key_16),
+											children: [
+												/* @__PURE__ */ jsx(ChevronRight, {
+													size: 14,
+													"aria-hidden": "true"
+												}),
+												group_7.title,
+												groupChanged(group_7.entries) && /* @__PURE__ */ jsx("span", {
 													className: "studio-group-changed",
 													"aria-label": "has changes"
-												})]
-											}, tab_0))
-										}), toggleAllButton]
-									}) : advancedSection ? /* @__PURE__ */ jsx("div", {
-										className: "studio-subtabs-bar",
-										children: /* @__PURE__ */ jsx("div", {
-											className: "studio-subtabs",
-											role: "tablist",
-											"aria-label": "Advanced settings",
-											children: advancedSections.map(([key_13, label_0]) => /* @__PURE__ */ jsxs("button", {
+												})
+											]
+										}), section === "Colors" && isPaletteGroup(group_7.entries) && /* @__PURE__ */ jsx("span", {
+											className: "studio-palette-actions",
+											children: /* @__PURE__ */ jsx("button", {
 												type: "button",
-												role: "tab",
-												"aria-selected": key_13 === section,
-												onClick: () => changeSection(key_13),
-												children: [label_0, (key_13 === "Components" ? Object.keys(draft.config).length > 0 : key_13 === "Variants & overrides" && Object.keys(draft.overrides ?? {}).length > 0) && /* @__PURE__ */ jsx("span", {
-													className: "studio-group-changed",
-													"aria-label": "has changes"
+												className: "studio-palette-reset",
+												"aria-label": `Reset ${group_7.title} palette`,
+												title: "Reset every shade in this palette to its default",
+												disabled: !groupChanged(group_7.entries),
+												onClick: () => {
+													for (const [name_28] of group_7.entries) setToken(name_28);
+												},
+												children: /* @__PURE__ */ jsx(RotateCcw, {
+													size: 13,
+													"aria-hidden": "true"
+												})
+											})
+										})] }), /* @__PURE__ */ jsxs("div", {
+											id: `group-${section}-${key_16.replaceAll(" ", "-")}`,
+											hidden: !isExpanded(key_16),
+											className: group_7.compact ? "studio-type-fields" : void 0,
+											children: [section === "Colors" && isPaletteGroup(group_7.entries) && renderPaletteShades(group_7.title, group_7.entries), group_7.entries.map((entry_4) => renderToken(entry_4, group_7.compact))]
+										})]
+									}, key_16) : section === "Typography" && key_16 === "Font families" ? renderFontFamilies(group_7.entries) : group_7.entries.map((entry_5) => renderToken(entry_5))), !orderedGroups.length && /* @__PURE__ */ jsx("p", { children: "No matching tokens. Try a component name such as “button”." })]
+								})] }),
+								section === "Variants & overrides" && /* @__PURE__ */ jsx(CvaEditor, {
+									slot: cvaSlot,
+									setSlot: (slot) => {
+										setCvaSlot(slot);
+										setCvaVariants({});
+									},
+									onPreview: setCvaVariants
+								}),
+								section === "Presets" && /* @__PURE__ */ jsxs("div", {
+									className: "studio-presets",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "studio-presets-intro",
+										children: "A preset replaces your theme edits with its own. Component defaults and overrides stay as they are; Apply or Save theme keeps it, Cancel discards it."
+									}), [appThemePreset, ...themePresets].map((preset_0) => {
+										const active = isPresetActive(preset_0, defaults, draft.theme);
+										const colors = presetEdits(preset_0, defaults).light;
+										const swatch = (name_29) => `rgb(${colors[name_29] ?? defaults.light[name_29]})`;
+										return /* @__PURE__ */ jsxs("div", {
+											className: `studio-preset ${active ? "is-active" : ""}`,
+											children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "studio-preset-swatches",
+													"aria-hidden": "true",
+													children: [
+														50,
+														200,
+														500,
+														900,
+														950
+													].map((step) => /* @__PURE__ */ jsx("i", { style: { background: swatch(`--neutral-${step}-base`) } }, step))
+												}),
+												/* @__PURE__ */ jsxs("span", {
+													className: "studio-preset-text",
+													children: [/* @__PURE__ */ jsx("strong", { children: preset_0.label }), /* @__PURE__ */ jsx("span", { children: preset_0.description })]
+												}),
+												/* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: active ? void 0 : "studio-primary",
+													disabled: active,
+													onClick: () => applyPreset(preset_0),
+													children: active ? "Active" : "Apply preset"
+												})
+											]
+										}, preset_0.id);
+									})]
+								}),
+								section === "Components" && /* @__PURE__ */ jsxs("div", {
+									className: "studio-settings",
+									children: [
+										/* @__PURE__ */ jsx("h3", { children: "Editor" }),
+										/* @__PURE__ */ jsxs("label", {
+											className: "studio-setting",
+											children: [/* @__PURE__ */ jsx("span", { children: "Size units" }), /* @__PURE__ */ jsxs("select", {
+												"aria-label": "Size units",
+												value: sizeUnit,
+												onChange: (event_3) => setSizeUnit(event_3.target.value),
+												children: [/* @__PURE__ */ jsx("option", {
+													value: "px",
+													children: "px"
+												}), /* @__PURE__ */ jsx("option", {
+													value: "rem",
+													children: "rem"
 												})]
-											}, key_13))
+											})]
+										}),
+										/* @__PURE__ */ jsx("h3", { children: "Buttons" }),
+										selectControl("Appearance", "button", "variant", [
+											"contained",
+											"outlined",
+											"subtle",
+											"ghost",
+											"text"
+										]),
+										selectControl("Button size", "button", "size", [
+											"default",
+											"sm",
+											"s"
+										]),
+										/* @__PURE__ */ jsx("h3", { children: "Inputs" }),
+										selectControl("Input appearance", "input", "variant", ["outlined", "filled"]),
+										selectControl("Label layout", "input", "as", [
+											"default",
+											"floating",
+											"inline",
+											"filter"
+										]),
+										selectControl("Input size", "input", "size", ["default", "small"]),
+										[
+											"isClearable",
+											"hideLabel",
+											"alwaysShowClear"
+										].map((field_2) => /* @__PURE__ */ jsxs("label", {
+											className: "studio-setting",
+											children: [/* @__PURE__ */ jsx("span", { children: {
+												isClearable: "Allow clearing",
+												hideLabel: "Hide labels",
+												alwaysShowClear: "Always show clear button"
+											}[field_2] }), /* @__PURE__ */ jsx("input", {
+												type: "checkbox",
+												checked: config.input[field_2],
+												onChange: (event_4) => setComponent("input", field_2, event_4.target.checked)
+											})]
+										}, field_2)),
+										/* @__PURE__ */ jsx("h3", { children: "Rendering" }),
+										/* @__PURE__ */ jsxs("label", {
+											className: "studio-setting",
+											children: [/* @__PURE__ */ jsxs("span", { children: ["Use static inputs until interaction", /* @__PURE__ */ jsx("small", { children: "Reduce work when rendering large forms." })] }), /* @__PURE__ */ jsx("input", {
+												type: "checkbox",
+												checked: config.renderStaticInput,
+												onChange: (event_5) => setDraft((current_13) => ({
+													...current_13,
+													config: {
+														...current_13.config,
+														renderStaticInput: event_5.target.checked
+													}
+												}))
+											})]
+										}),
+										/* @__PURE__ */ jsx("p", {
+											className: "studio-help",
+											children: "Component props override these defaults. The preview uses inherited defaults unless an example needs a specific state."
 										})
-									}) : /* @__PURE__ */ jsxs("div", {
-										className: "studio-editor-heading",
-										children: [/* @__PURE__ */ jsx("h2", { children: section }), toggleAllButton]
-									}),
-									isTokenSection(section) && /* @__PURE__ */ jsxs(Fragment$1, { children: [layoutSection && !searching && /* @__PURE__ */ jsx(LayoutScaleControl, {
-										kind: layoutSection,
-										level: layoutLevelFor(defaults, draft.theme.theme, layoutSection),
-										onChange: (level_0) => setLayoutLevel(layoutSection, level_0)
-									}, layoutSection), /* @__PURE__ */ jsxs("div", {
-										className: `studio-token-list ${section !== "Typography" ? "studio-token-list-inline" : "studio-token-list-rows"}`,
-										children: [orderedGroups.map(([key_14, group_5]) => group_5.title && !flatTab ? /* @__PURE__ */ jsxs("fieldset", {
-											className: `studio-token-group ${group_5.compact ? "studio-type-style" : ""} ${!isExpanded(key_14) ? "is-collapsed" : ""}`,
-											children: [/* @__PURE__ */ jsxs("legend", { children: [/* @__PURE__ */ jsxs("button", {
-												type: "button",
-												className: "studio-group-toggle",
-												"aria-expanded": isExpanded(key_14),
-												"aria-controls": `group-${section}-${key_14.replaceAll(" ", "-")}`,
-												onClick: () => toggleGroup(key_14),
-												children: [
-													/* @__PURE__ */ jsx(ChevronRight, {
-														size: 14,
-														"aria-hidden": "true"
-													}),
-													group_5.title,
-													groupChanged(group_5.entries) && /* @__PURE__ */ jsx("span", {
-														className: "studio-group-changed",
-														"aria-label": "has changes"
-													})
-												]
-											}), section === "Colors" && isPaletteGroup(group_5.entries) && /* @__PURE__ */ jsx("span", {
-												className: "studio-palette-actions",
-												children: /* @__PURE__ */ jsx("button", {
-													type: "button",
-													className: "studio-palette-reset",
-													"aria-label": `Reset ${group_5.title} palette`,
-													title: "Reset every shade in this palette to its default",
-													disabled: !groupChanged(group_5.entries),
+									]
+								}),
+								section === "Export" && /* @__PURE__ */ jsxs("div", {
+									className: "studio-export",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "studio-mode",
+											children: [
+												/* @__PURE__ */ jsx("button", {
+													"aria-pressed": exportTab === "css",
+													onClick: () => setExportTab("css"),
+													children: "Tailwind CSS"
+												}),
+												/* @__PURE__ */ jsx("button", {
+													"aria-pressed": exportTab === "config",
+													onClick: () => setExportTab("config"),
+													children: "UIConfig"
+												}),
+												/* @__PURE__ */ jsx("button", {
+													"aria-pressed": exportTab === "overrides",
+													onClick: () => setExportTab("overrides"),
+													children: "UIOverrides"
+												})
+											]
+										}),
+										/* @__PURE__ */ jsx("p", { children: exportTab === "css" ? "Import after your existing theme. Only changed tokens are included; light and dark colors remain separate." : exportTab === "overrides" ? "Merge these edited slots with your existing app overrides. New Tailwind classes require a rebuild." : "Wrap your application with this provider. Only changed component settings are included." }),
+										/* @__PURE__ */ jsx("textarea", {
+											ref: exportRef,
+											"aria-label": "Exported configuration",
+											readOnly: true,
+											value: exportText,
+											spellCheck: false
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "studio-export-actions",
+											children: [
+												exportTab === "css" && themeWriter && /* @__PURE__ */ jsx("button", {
+													disabled: savingTheme || !!Object.keys(invalidFields).length,
+													title: `Save to ${themeWriter.file}`,
+													onClick: async () => {
+														setSavingTheme(true);
+														setMessage("");
+														try {
+															await saveThemeCss(themeWriter, exportText);
+															setMessage(`Saved theme to ${themeWriter.file}.`);
+														} catch (error) {
+															setMessage(error instanceof Error ? error.message : "Could not save theme.");
+														} finally {
+															setSavingTheme(false);
+														}
+													},
+													children: savingTheme ? "Saving theme…" : "Save theme"
+												}),
+												/* @__PURE__ */ jsx("button", {
+													disabled: !!Object.keys(invalidFields).length,
+													onClick: async () => {
+														try {
+															await navigator.clipboard.writeText(exportText);
+															setMessage("Copied to clipboard.");
+														} catch {
+															exportRef.current?.select();
+															setMessage("Clipboard unavailable. The export is selected for manual copying.");
+														}
+													},
+													children: "Copy code"
+												}),
+												/* @__PURE__ */ jsxs("button", {
+													disabled: !!Object.keys(invalidFields).length,
 													onClick: () => {
-														for (const [name_26] of group_5.entries) setToken(name_26);
+														const url = URL.createObjectURL(new Blob([exportText], { type: "text/plain" }));
+														const link = document.createElement("a");
+														link.href = url;
+														link.download = exportTab === "css" ? "povio-theme.css" : exportTab === "overrides" ? "povio-ui-overrides.ts" : "povio-ui-config.ts";
+														link.click();
+														setTimeout(() => URL.revokeObjectURL(url), 1e3);
+														setMessage("Export downloaded.");
 													},
-													children: /* @__PURE__ */ jsx(RotateCcw, {
-														size: 13,
-														"aria-hidden": "true"
-													})
+													children: [/* @__PURE__ */ jsx(ArrowDownToLine, { size: 14 }), " Download"]
 												})
-											})] }), /* @__PURE__ */ jsxs("div", {
-												id: `group-${section}-${key_14.replaceAll(" ", "-")}`,
-												hidden: !isExpanded(key_14),
-												className: group_5.compact ? "studio-type-fields" : void 0,
-												children: [section === "Colors" && isPaletteGroup(group_5.entries) && renderPaletteShades(group_5.title, group_5.entries), group_5.entries.map((entry_3) => renderToken(entry_3, group_5.compact))]
-											})]
-										}, key_14) : section === "Typography" && key_14 === "Font families" ? renderFontFamilies(group_5.entries) : group_5.entries.map((entry_4) => renderToken(entry_4))), !orderedGroups.length && /* @__PURE__ */ jsx("p", { children: "No matching tokens. Try a component name such as “button”." })]
-									})] }),
-									section === "Variants & overrides" && /* @__PURE__ */ jsx(CvaEditor, {
-										slot: cvaSlot,
-										setSlot: (slot) => {
-											setCvaSlot(slot);
-											setCvaVariants({});
-										},
-										onPreview: setCvaVariants
-									}),
-									section === "Presets" && /* @__PURE__ */ jsxs("div", {
-										className: "studio-presets",
-										children: [/* @__PURE__ */ jsx("p", {
-											className: "studio-presets-intro",
-											children: "A preset replaces your theme edits with its own. Component defaults and overrides stay as they are; Apply or Save theme keeps it, Cancel discards it."
-										}), [appThemePreset, ...themePresets].map((preset_0) => {
-											const active = isPresetActive(preset_0, defaults, draft.theme);
-											const colors = presetEdits(preset_0, defaults).light;
-											const swatch = (name_27) => `rgb(${colors[name_27] ?? defaults.light[name_27]})`;
-											return /* @__PURE__ */ jsxs("div", {
-												className: `studio-preset ${active ? "is-active" : ""}`,
-												children: [
-													/* @__PURE__ */ jsx("span", {
-														className: "studio-preset-swatches",
-														"aria-hidden": "true",
-														children: [
-															50,
-															200,
-															500,
-															900,
-															950
-														].map((step) => /* @__PURE__ */ jsx("i", { style: { background: swatch(`--neutral-${step}-base`) } }, step))
-													}),
-													/* @__PURE__ */ jsxs("span", {
-														className: "studio-preset-text",
-														children: [/* @__PURE__ */ jsx("strong", { children: preset_0.label }), /* @__PURE__ */ jsx("span", { children: preset_0.description })]
-													}),
-													/* @__PURE__ */ jsx("button", {
-														type: "button",
-														className: active ? void 0 : "studio-primary",
-														disabled: active,
-														onClick: () => applyPreset(preset_0),
-														children: active ? "Active" : "Apply preset"
-													})
-												]
-											}, preset_0.id);
-										})]
-									}),
-									section === "Components" && /* @__PURE__ */ jsxs("div", {
-										className: "studio-settings",
-										children: [
-											/* @__PURE__ */ jsx("h3", { children: "Editor" }),
-											/* @__PURE__ */ jsxs("label", {
-												className: "studio-setting",
-												children: [/* @__PURE__ */ jsx("span", { children: "Size units" }), /* @__PURE__ */ jsxs("select", {
-													"aria-label": "Size units",
-													value: sizeUnit,
-													onChange: (event_2) => setSizeUnit(event_2.target.value),
-													children: [/* @__PURE__ */ jsx("option", {
-														value: "px",
-														children: "px"
-													}), /* @__PURE__ */ jsx("option", {
-														value: "rem",
-														children: "rem"
-													})]
-												})]
-											}),
-											/* @__PURE__ */ jsx("h3", { children: "Buttons" }),
-											selectControl("Appearance", "button", "variant", [
-												"contained",
-												"outlined",
-												"subtle",
-												"ghost",
-												"text"
-											]),
-											selectControl("Button size", "button", "size", [
-												"default",
-												"sm",
-												"s"
-											]),
-											/* @__PURE__ */ jsx("h3", { children: "Inputs" }),
-											selectControl("Input appearance", "input", "variant", ["outlined", "filled"]),
-											selectControl("Label layout", "input", "as", [
-												"default",
-												"floating",
-												"inline",
-												"filter"
-											]),
-											selectControl("Input size", "input", "size", ["default", "small"]),
-											[
-												"isClearable",
-												"hideLabel",
-												"alwaysShowClear"
-											].map((field_2) => /* @__PURE__ */ jsxs("label", {
-												className: "studio-setting",
-												children: [/* @__PURE__ */ jsx("span", { children: {
-													isClearable: "Allow clearing",
-													hideLabel: "Hide labels",
-													alwaysShowClear: "Always show clear button"
-												}[field_2] }), /* @__PURE__ */ jsx("input", {
-													type: "checkbox",
-													checked: config.input[field_2],
-													onChange: (event_3) => setComponent("input", field_2, event_3.target.checked)
-												})]
-											}, field_2)),
-											/* @__PURE__ */ jsx("h3", { children: "Rendering" }),
-											/* @__PURE__ */ jsxs("label", {
-												className: "studio-setting",
-												children: [/* @__PURE__ */ jsxs("span", { children: ["Use static inputs until interaction", /* @__PURE__ */ jsx("small", { children: "Reduce work when rendering large forms." })] }), /* @__PURE__ */ jsx("input", {
-													type: "checkbox",
-													checked: config.renderStaticInput,
-													onChange: (event_4) => setDraft((current_13) => ({
-														...current_13,
-														config: {
-															...current_13.config,
-															renderStaticInput: event_4.target.checked
-														}
-													}))
-												})]
-											}),
-											/* @__PURE__ */ jsx("p", {
-												className: "studio-help",
-												children: "Component props override these defaults. The preview uses inherited defaults unless an example needs a specific state."
-											})
-										]
-									}),
-									section === "Export" && /* @__PURE__ */ jsxs("div", {
-										className: "studio-export",
-										children: [
-											/* @__PURE__ */ jsxs("div", {
-												className: "studio-mode",
-												children: [
-													/* @__PURE__ */ jsx("button", {
-														"aria-pressed": exportTab === "css",
-														onClick: () => setExportTab("css"),
-														children: "Tailwind CSS"
-													}),
-													/* @__PURE__ */ jsx("button", {
-														"aria-pressed": exportTab === "config",
-														onClick: () => setExportTab("config"),
-														children: "UIConfig"
-													}),
-													/* @__PURE__ */ jsx("button", {
-														"aria-pressed": exportTab === "overrides",
-														onClick: () => setExportTab("overrides"),
-														children: "UIOverrides"
-													})
-												]
-											}),
-											/* @__PURE__ */ jsx("p", { children: exportTab === "css" ? "Import after your existing theme. Only changed tokens are included; light and dark colors remain separate." : exportTab === "overrides" ? "Merge these edited slots with your existing app overrides. New Tailwind classes require a rebuild." : "Wrap your application with this provider. Only changed component settings are included." }),
-											/* @__PURE__ */ jsx("textarea", {
-												ref: exportRef,
-												"aria-label": "Exported configuration",
-												readOnly: true,
-												value: exportText,
-												spellCheck: false
-											}),
-											/* @__PURE__ */ jsxs("div", {
-												className: "studio-export-actions",
-												children: [
-													exportTab === "css" && themeWriter && /* @__PURE__ */ jsx("button", {
-														disabled: savingTheme || !!Object.keys(invalidFields).length,
-														title: `Save to ${themeWriter.file}`,
-														onClick: async () => {
-															setSavingTheme(true);
-															setMessage("");
-															try {
-																await saveThemeCss(themeWriter, exportText);
-																setMessage(`Saved theme to ${themeWriter.file}.`);
-															} catch (error) {
-																setMessage(error instanceof Error ? error.message : "Could not save theme.");
-															} finally {
-																setSavingTheme(false);
-															}
-														},
-														children: savingTheme ? "Saving theme…" : "Save theme"
-													}),
-													/* @__PURE__ */ jsx("button", {
-														disabled: !!Object.keys(invalidFields).length,
-														onClick: async () => {
-															try {
-																await navigator.clipboard.writeText(exportText);
-																setMessage("Copied to clipboard.");
-															} catch {
-																exportRef.current?.select();
-																setMessage("Clipboard unavailable. The export is selected for manual copying.");
-															}
-														},
-														children: "Copy code"
-													}),
-													/* @__PURE__ */ jsxs("button", {
-														disabled: !!Object.keys(invalidFields).length,
-														onClick: () => {
-															const url = URL.createObjectURL(new Blob([exportText], { type: "text/plain" }));
-															const link = document.createElement("a");
-															link.href = url;
-															link.download = exportTab === "css" ? "povio-theme.css" : exportTab === "overrides" ? "povio-ui-overrides.ts" : "povio-ui-config.ts";
-															link.click();
-															setTimeout(() => URL.revokeObjectURL(url), 1e3);
-															setMessage("Export downloaded.");
-														},
-														children: [/* @__PURE__ */ jsx(ArrowDownToLine, { size: 14 }), " Download"]
-													})
-												]
-											})
-										]
-									})
-								]
-							}),
-							/* @__PURE__ */ jsxs("aside", {
-								ref: previewRef,
-								className: "studio-preview",
-								onScroll: (event_5) => memory.current.previewScroll = event_5.currentTarget.scrollTop,
-								children: [
-									/* @__PURE__ */ jsxs("div", {
-										className: "studio-preview-heading",
-										children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", {}), " LIVE PREVIEW"] }), /* @__PURE__ */ jsxs("div", {
-											className: "studio-preview-actions",
-											children: [/* @__PURE__ */ jsx(ColorModeSwitch, {
-												value: mode,
-												onChange: setMode
-											}), isTokenSection(section) && /* @__PURE__ */ jsxs("div", {
-												className: "studio-mode studio-preview-modes",
-												role: "group",
-												"aria-label": "Preview mode",
-												children: [/* @__PURE__ */ jsx("button", {
-													type: "button",
-													"aria-pressed": previewMode === "gallery",
-													onClick: () => setPreviewMode("gallery"),
-													children: "Gallery"
-												}), /* @__PURE__ */ jsx("button", {
-													type: "button",
-													"aria-pressed": previewMode === "focused",
-													onClick: () => setPreviewMode("focused"),
-													children: "Token preview"
-												})]
+											]
+										})
+									]
+								})
+							]
+						}), !componentsHosted && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("aside", {
+							ref: previewRef,
+							className: "studio-preview",
+							onScroll: (event_6) => memory.current.previewScroll = event_6.currentTarget.scrollTop,
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "studio-preview-heading",
+									children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("i", {}), " COMPONENTS"] }), /* @__PURE__ */ jsxs("div", {
+										className: "studio-preview-actions",
+										children: [/* @__PURE__ */ jsx(ColorModeSwitch, {
+											value: mode,
+											onChange: setMode
+										}), isTokenSection(section) && /* @__PURE__ */ jsxs("div", {
+											className: "studio-mode studio-preview-modes",
+											role: "group",
+											"aria-label": "Preview mode",
+											children: [/* @__PURE__ */ jsx("button", {
+												type: "button",
+												"aria-pressed": previewMode === "gallery",
+												onClick: () => setPreviewMode("gallery"),
+												children: "Gallery"
+											}), /* @__PURE__ */ jsx("button", {
+												type: "button",
+												"aria-pressed": previewMode === "focused",
+												onClick: () => setPreviewMode("focused"),
+												children: "Token preview"
 											})]
 										})]
-									}),
-									/* @__PURE__ */ jsx(PreviewInspector, {
-										revision: draft,
-										isKnown: isInspectable,
-										onSelect: focusToken,
-										onScroll: (scrollTop) => {
-											memory.current.previewScroll = scrollTop;
-										},
-										children: section === "Variants & overrides" || isTokenSection(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
-											variants: cvaVariants,
-											setVariants: setCvaVariants,
-											section,
-											slot: cvaSlot,
-											mode,
-											entries: visibleGroups.flatMap(([, group_6]) => group_6.entries)
-										}) : /* @__PURE__ */ jsx(ComponentPreview, {
-											value: draft,
-											mode,
-											inspector: {
-												isKnown: isInspectable,
-												describe: describeToken,
-												onSelect: focusToken,
-												revision: draft
-											}
-										})
-									}),
-									/* @__PURE__ */ jsx("p", {
-										className: "studio-preview-note",
-										children: section === "Variants & overrides" || previewMode === "focused" ? "Preview follows the current section. Variant controls affect only the preview." : "Click to pin or unpin an element. Use Interact to try components."
+									})]
+								}),
+								/* @__PURE__ */ jsx(PreviewInspector, {
+									revision: draft,
+									isKnown: isInspectable,
+									onSelect: focusToken,
+									onScroll: (scrollTop) => {
+										memory.current.previewScroll = scrollTop;
+									},
+									children: section === "Variants & overrides" || isTokenSection(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
+										variants: cvaVariants,
+										setVariants: setCvaVariants,
+										section,
+										slot: cvaSlot,
+										mode,
+										entries: visibleGroups.flatMap(([, group_8]) => group_8.entries)
+									}) : /* @__PURE__ */ jsx(ComponentPreview, {
+										value: draft,
+										mode,
+										inspector: {
+											isKnown: isInspectable,
+											describe: describeToken,
+											onSelect: focusToken,
+											revision: draft
+										}
 									})
-								]
-							}),
-							/* @__PURE__ */ jsx(PanelResizeHandle, {
-								label: "Resize editor and preview",
-								column: 2,
-								width: editorWidth,
-								min: 260,
-								max: () => (bodyRef.current?.parentElement?.clientWidth ?? 0) - 320,
-								onResize: setEditorWidth,
-								onReset: () => setEditorWidth(void 0)
-							})
-						]
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "studio-preview-note",
+									children: section === "Variants & overrides" || previewMode === "focused" ? "Preview follows the current section. Variant controls affect only the preview." : "Click to pin or unpin an element. Use Interact to try components."
+								})
+							]
+						}), /* @__PURE__ */ jsx(PanelResizeHandle, {
+							label: "Resize editor and preview",
+							column: 2,
+							width: editorWidth,
+							min: 260,
+							max: () => (bodyRef.current?.parentElement?.clientWidth ?? 0) - 320,
+							onResize: setEditorWidth,
+							onReset: () => setEditorWidth(void 0)
+						})] })]
 					}),
 					/* @__PURE__ */ jsxs("footer", {
 						className: "studio-footer",
 						children: [
-							/* @__PURE__ */ jsxs("button", {
+							/* @__PURE__ */ jsx("button", {
+								className: "studio-footer-reset",
+								"aria-label": "Reset all",
+								title: "Reset all",
 								onClick: () => {
 									const hasChanges = !!changedCount || !!Object.keys(invalidFields).length;
 									setNothingToReset(!hasChanges);
 									setConfirmingReset(hasChanges);
 								},
-								children: [/* @__PURE__ */ jsx(RotateCcw, { size: 14 }), " Reset all"]
+								children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 })
 							}),
 							/* @__PURE__ */ jsx("span", {
 								role: "status",
-								children: Object.keys(invalidFields).length ? "Fix invalid values or reset before applying or exporting." : nothingToReset && !changedCount ? "No active changes to reset." : (popupBlocked ? "Allow pop-ups for this site, then try again." : message) || `${changedCount} overrides · Changes stay in this session`
+								title: footerStatus === overrideCount ? `${overrideCount} · Changes stay in this session` : footerStatus,
+								children: footerStatus
 							}),
 							/* @__PURE__ */ jsx("button", {
 								onClick: () => cancel(),
@@ -6488,11 +6729,12 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 							}),
 							/* @__PURE__ */ jsxs("button", {
 								className: "studio-primary",
+								"aria-label": "Apply settings",
 								disabled: !!Object.keys(invalidFields).length,
 								onClick: () => {
 									apply();
 								},
-								children: [/* @__PURE__ */ jsx(Check, { size: 15 }), " Apply settings"]
+								children: [/* @__PURE__ */ jsx(Check, { size: 14 }), " Apply"]
 							})
 						]
 					}),
@@ -6570,135 +6812,69 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		})
 	});
 }
+/** Where a floating configurator first opens; an editor-only window (components shown by the host) is narrower. */
+const floatingDefault = {
+	left: 32,
+	top: 80,
+	width: 640,
+	height: 720
+};
+const hostedFloatingWidth = 360;
 function UIConfigurationModal() {
-	const $ = c(28);
-	const { isOpen, revision, open, openFloating, floating } = useUIConfiguration();
+	const { isOpen, revision, open, openFloating, floating, componentsHosted } = useUIConfiguration();
 	const [minimized, setMinimized] = useState(false);
 	const [hasLauncher, setHasLauncher] = useState(false);
 	const restorePopout = useRef(false);
 	const launcherPosition = useRef(null);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = () => setMinimized(false);
-		$[0] = t0;
-	} else t0 = $[0];
-	let t1;
-	if ($[1] !== revision) {
-		t1 = [revision];
-		$[1] = revision;
-		$[2] = t1;
-	} else t1 = $[2];
-	useEffect(t0, t1);
-	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = {};
-		$[3] = t2;
-	} else t2 = $[3];
-	const memory = useRef(t2);
+	useEffect(() => setMinimized(false), [revision]);
+	const memory = useRef({});
 	const windowBounds = useRef(null);
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = {
-			left: 32,
-			top: 80,
-			width: 640,
-			height: 720
-		};
-		$[4] = t3;
-	} else t3 = $[4];
-	const floatingBounds = useRef(t3);
+	const floatingBounds = useRef(floatingDefault);
+	if (componentsHosted && floatingBounds.current === floatingDefault) floatingBounds.current = {
+		...floatingDefault,
+		width: hostedFloatingWidth
+	};
 	const popout = useStudioPopout(isOpen && !minimized);
-	if ((!isOpen || minimized) && hasLauncher) {
-		let t4;
-		if ($[5] !== floating || $[6] !== isOpen || $[7] !== open || $[8] !== openFloating || $[9] !== popout) {
-			t4 = createPortal(/* @__PURE__ */ jsx(ConfigurationLauncher, {
-				position: launcherPosition,
-				onOpen: () => {
-					setMinimized(false);
-					if (!isOpen) {
-						if (floating) openFloating();
-						else open();
-					}
-					if (restorePopout.current) popout.open();
-				}
-			}), document.body);
-			$[5] = floating;
-			$[6] = isOpen;
-			$[7] = open;
-			$[8] = openFloating;
-			$[9] = popout;
-			$[10] = t4;
-		} else t4 = $[10];
-		return t4;
-	}
+	if ((!isOpen || minimized) && hasLauncher) return createPortal(/* @__PURE__ */ jsx(ConfigurationLauncher, {
+		position: launcherPosition,
+		onOpen: () => {
+			setMinimized(false);
+			if (!isOpen) {
+				if (floating) openFloating();
+				else open();
+			}
+			if (restorePopout.current) popout.open();
+		}
+	}), document.body);
 	if (!isOpen) return null;
-	const t4 = floating ? floatingBounds : windowBounds;
-	const t5 = !!popout.popup;
-	let t6;
-	let t7;
-	let t8;
-	if ($[11] !== popout) {
-		t6 = () => {
+	const content = /* @__PURE__ */ jsx(ConfigurationModalContent, {
+		memory,
+		windowBounds: floating ? floatingBounds : windowBounds,
+		floating,
+		poppedOut: !!popout.popup,
+		onPopout: () => {
 			restorePopout.current = true;
 			popout.open();
-		};
-		t7 = () => {
+		},
+		onDock: () => {
 			restorePopout.current = false;
 			popout.dock();
-		};
-		t8 = () => {
+		},
+		onMinimize: () => {
 			restorePopout.current = !!popout.popup;
 			setHasLauncher(true);
 			setMinimized(true);
 			popout.dock();
-		};
-		$[11] = popout;
-		$[12] = t6;
-		$[13] = t7;
-		$[14] = t8;
-	} else {
-		t6 = $[12];
-		t7 = $[13];
-		t8 = $[14];
-	}
-	let t9;
-	if ($[15] !== floating || $[16] !== popout.blocked || $[17] !== revision || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8) {
-		t9 = /* @__PURE__ */ jsx(ConfigurationModalContent, {
-			memory,
-			windowBounds: t4,
-			floating,
-			poppedOut: t5,
-			onPopout: t6,
-			onDock: t7,
-			onMinimize: t8,
-			popupBlocked: popout.blocked
-		}, revision);
-		$[15] = floating;
-		$[16] = popout.blocked;
-		$[17] = revision;
-		$[18] = t4;
-		$[19] = t5;
-		$[20] = t6;
-		$[21] = t7;
-		$[22] = t8;
-		$[23] = t9;
-	} else t9 = $[23];
-	const content = t9;
-	let t10;
-	if ($[24] !== content || $[25] !== floating || $[26] !== popout.popup) {
-		t10 = popout.popup ? createPortal(/* @__PURE__ */ jsx(StudioPopoutContext, {
-			value: true,
-			children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
-				getContainer: () => popout.popup.document.body,
-				children: content
-			})
-		}), popout.popup.document.body) : floating ? createPortal(content, document.body) : content;
-		$[24] = content;
-		$[25] = floating;
-		$[26] = popout.popup;
-		$[27] = t10;
-	} else t10 = $[27];
-	return t10;
+		},
+		popupBlocked: popout.blocked
+	}, revision);
+	return popout.popup ? createPortal(/* @__PURE__ */ jsx(StudioPopoutContext, {
+		value: true,
+		children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
+			getContainer: () => popout.popup.document.body,
+			children: content
+		})
+	}), popout.popup.document.body) : floating ? createPortal(content, document.body) : content;
 }
 //#endregion
 export { getBoxHighlights as a, UIConfigurationProvider as c, Pin as d, Moon as f, inspectTokens as i, useUIConfiguration as l, ColorModeSwitch as n, HighlightOverlay as o, inspectElement as r, InspectorDetails as s, UIConfigurationModal as t, Sun as u };