@povio/ui 5.0.0-rc.14 → 5.0.0-rc.16

package/dist/{UIConfigurator-CjAW1SJY.js → CanvasInspector-TC9DOf5p.js}

@@ -23,7 +23,7 @@ import { a as $928221da08ecbc62$export$dca12b0bb56e4fc, i as $928221da08ecbc62$e
 import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "./Modal-w60dVQcb.js";
 import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "./RadioGroup-efBKgTYA.js";
 import { n as switchDefinition, t as Switch } from "./Switch-CqnGEdeD.js";
-import { n as textAreaWrapperDefinition, t as TextArea } from "./TextArea-uPffb457.js";
+import { n as textAreaWrapperDefinition, t as TextArea } from "./TextArea-DuvFUjts.js";
 import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-7zzdDhVR.js";
 import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "./dropdownMenu.cva-DvEmX0bs.js";
 import { i as tooltipTextDefinition, n as tooltipPointerHorizontalDefinition, r as tooltipPointerVerticalDefinition, t as tooltipDefinition } from "./tooltip.cva-BIzlOXHH.js";
@@ -50,6 +50,7 @@ import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as table
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { t as tooltipWrapperTriggerDefinition } from "./tooltipWrapper.cva-BBQ4ic3D.js";
 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, v as parseThemeCss, w as validToken, x as spacingLevels, y as previewTokens } from "./theme-model-DtTsIxou.js";
+import { n as splitVariants, r as variantState, t as inspectTokens } from "./token-classes-BqLWiy6O.js";
 import $ahdqC$react, { Fragment, Suspense, createContext, lazy, use, useCallback, useContext, 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";
@@ -71,7 +72,7 @@ import { UNSAFE_PortalProvider } from "react-aria";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$10 = {
+const __iconData$13 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -89,8 +90,8 @@ const __iconData$10 = {
 		}]
 	]
 };
-__iconData$10.node;
-const ArrowDownToLine = createLucideIcon(__iconData$10);
+__iconData$13.node;
+const ArrowDownToLine = createLucideIcon(__iconData$13);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -99,7 +100,7 @@ const ArrowDownToLine = createLucideIcon(__iconData$10);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$9 = {
+const __iconData$12 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -110,8 +111,8 @@ const __iconData$9 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$9.node;
-const ChevronsUpDown = createLucideIcon(__iconData$9);
+__iconData$12.node;
+const ChevronsUpDown = createLucideIcon(__iconData$12);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/external-link.mjs
 /**
@@ -120,7 +121,7 @@ const ChevronsUpDown = createLucideIcon(__iconData$9);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$11 = {
 	name: "external-link",
 	size: 24,
 	node: [
@@ -138,8 +139,52 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const ExternalLink = createLucideIcon(__iconData$8);
+__iconData$11.node;
+const ExternalLink = createLucideIcon(__iconData$11);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/frame.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$10 = {
+	name: "frame",
+	size: 24,
+	node: [
+		["line", {
+			x1: "22",
+			x2: "2",
+			y1: "6",
+			y2: "6",
+			key: "15w7dq"
+		}],
+		["line", {
+			x1: "22",
+			x2: "2",
+			y1: "18",
+			y2: "18",
+			key: "1ip48p"
+		}],
+		["line", {
+			x1: "6",
+			x2: "6",
+			y1: "2",
+			y2: "22",
+			key: "a2lnyx"
+		}],
+		["line", {
+			x1: "18",
+			x2: "18",
+			y1: "2",
+			y2: "22",
+			key: "8vb6jd"
+		}]
+	]
+};
+__iconData$10.node;
+const Frame = createLucideIcon(__iconData$10);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.mjs
 /**
@@ -148,7 +193,7 @@ const ExternalLink = createLucideIcon(__iconData$8);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$7 = {
+const __iconData$9 = {
 	name: "moon",
 	size: 24,
 	node: [["path", {
@@ -156,8 +201,8 @@ const __iconData$7 = {
 		key: "kfwtm"
 	}]]
 };
-__iconData$7.node;
-const Moon = createLucideIcon(__iconData$7);
+__iconData$9.node;
+const Moon = createLucideIcon(__iconData$9);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-top.mjs
 /**
@@ -166,7 +211,7 @@ const Moon = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$8 = {
 	name: "panel-top",
 	size: 24,
 	node: [["rect", {
@@ -181,8 +226,8 @@ const __iconData$6 = {
 		key: "1pudct"
 	}]]
 };
-__iconData$6.node;
-const PanelTop = createLucideIcon(__iconData$6);
+__iconData$8.node;
+const PanelTop = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pencil.mjs
 /**
@@ -191,7 +236,7 @@ const PanelTop = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$7 = {
 	name: "pencil",
 	size: 24,
 	node: [["path", {
@@ -202,8 +247,8 @@ const __iconData$5 = {
 		key: "1mk7zo"
 	}]]
 };
-__iconData$5.node;
-const Pencil = createLucideIcon(__iconData$5);
+__iconData$7.node;
+const Pencil = createLucideIcon(__iconData$7);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pin.mjs
 /**
@@ -212,7 +257,7 @@ const Pencil = createLucideIcon(__iconData$5);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$4 = {
+const __iconData$6 = {
 	name: "pin",
 	size: 24,
 	node: [["path", {
@@ -223,8 +268,8 @@ const __iconData$4 = {
 		key: "1nkz8b"
 	}]]
 };
-__iconData$4.node;
-const Pin = createLucideIcon(__iconData$4);
+__iconData$6.node;
+const Pin = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/plus.mjs
 /**
@@ -233,7 +278,7 @@ const Pin = createLucideIcon(__iconData$4);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$3 = {
+const __iconData$5 = {
 	name: "plus",
 	size: 24,
 	node: [["path", {
@@ -244,8 +289,8 @@ const __iconData$3 = {
 		key: "s699le"
 	}]]
 };
-__iconData$3.node;
-const Plus = createLucideIcon(__iconData$3);
+__iconData$5.node;
+const Plus = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rotate-ccw.mjs
 /**
@@ -254,7 +299,7 @@ const Plus = createLucideIcon(__iconData$3);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$2 = {
+const __iconData$4 = {
 	name: "rotate-ccw",
 	size: 24,
 	node: [["path", {
@@ -265,8 +310,80 @@ const __iconData$2 = {
 		key: "1xhq8a"
 	}]]
 };
+__iconData$4.node;
+const RotateCcw = createLucideIcon(__iconData$4);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/scan-line.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$3 = {
+	name: "scan-line",
+	size: 24,
+	node: [
+		["path", {
+			d: "M3 7V5a2 2 0 0 1 2-2h2",
+			key: "aa7l1z"
+		}],
+		["path", {
+			d: "M17 3h2a2 2 0 0 1 2 2v2",
+			key: "4qcy5o"
+		}],
+		["path", {
+			d: "M21 17v2a2 2 0 0 1-2 2h-2",
+			key: "6vwrx8"
+		}],
+		["path", {
+			d: "M7 21H5a2 2 0 0 1-2-2v-2",
+			key: "ioqczr"
+		}],
+		["path", {
+			d: "M7 12h10",
+			key: "b7w52i"
+		}]
+	]
+};
+__iconData$3.node;
+const ScanLine = createLucideIcon(__iconData$3);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings-2.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$2 = {
+	name: "settings-2",
+	size: 24,
+	node: [
+		["path", {
+			d: "M14 17H5",
+			key: "gfn3mx"
+		}],
+		["path", {
+			d: "M19 7h-9",
+			key: "6i9tg"
+		}],
+		["circle", {
+			cx: "17",
+			cy: "17",
+			r: "3",
+			key: "18b49y"
+		}],
+		["circle", {
+			cx: "7",
+			cy: "7",
+			r: "3",
+			key: "dfmy0x"
+		}]
+	]
+};
 __iconData$2.node;
-const RotateCcw = createLucideIcon(__iconData$2);
+const Settings2 = createLucideIcon(__iconData$2);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sun.mjs
 /**
@@ -696,7 +813,7 @@ function UIConfigurationProvider(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = () => {
 			setComponentHosts(_temp$8);
-			return () => setComponentHosts(_temp2$5);
+			return () => setComponentHosts(_temp2$6);
 		};
 		$[0] = t1;
 	} else t1 = $[0];
@@ -710,7 +827,7 @@ function UIConfigurationProvider(t0) {
 			setApplied(structuredClone(value));
 			setDraft(structuredClone(value));
 			setPreviewConfiguration(null);
-			if (remount) setRevision(_temp3$4);
+			if (remount) setRevision(_temp3$5);
 		};
 		$[1] = t2;
 	} else t2 = $[1];
@@ -889,10 +1006,10 @@ function _temp5$3(value_1) {
 function _temp4$4(value_0) {
 	return value_0 + 1;
 }
-function _temp3$4(current) {
+function _temp3$5(current) {
 	return current + 1;
 }
-function _temp2$5(count_0) {
+function _temp2$6(count_0) {
 	return count_0 - 1;
 }
 function _temp$8(count) {
@@ -1337,7 +1454,7 @@ function InspectorDetails(t0) {
 			$[13] = onSelect;
 			$[14] = t6;
 		} else t6 = $[14];
-		t5 = snapshot.groups.map(_temp$7).filter(_temp2$4).map(t6);
+		t5 = snapshot.groups.map(_temp$7).filter(_temp2$5).map(t6);
 		$[10] = onSelect;
 		$[11] = snapshot.groups;
 		$[12] = t5;
@@ -1351,7 +1468,7 @@ function InspectorDetails(t0) {
 	} else t6 = $[17];
 	return t6;
 }
-function _temp2$4(group_0) {
+function _temp2$5(group_0) {
 	return group_0.properties.length;
 }
 function _temp$7(group) {
@@ -1562,9 +1679,9 @@ function _temp5$2(group) {
 	return group.properties;
 }
 function _temp4$3(value) {
-	return value.replace(/(-?\d*\.?\d+)px/g, _temp3$3);
+	return value.replace(/(-?\d*\.?\d+)px/g, _temp3$4);
 }
-function _temp3$3(_, amount) {
+function _temp3$4(_, amount) {
 	return String(Math.round(Number(amount) * 10) / 10);
 }
 //#endregion
@@ -1834,236 +1951,6 @@ function getBoxHighlights(element, key) {
 	};
 }
 //#endregion
-//#region src/configurator/inspector/token-classes.ts
-/** Tailwind breakpoints from the Atlas base theme, in rem. */
-const breakpoints = {
-	sm: 23.75,
-	md: 37.5,
-	lg: 80,
-	xl: 105
-};
-/** Utility prefix → the slots it sets, its specificity, and the theme namespace its value lives in. */
-const utilities = [
-	[
-		"p",
-		[
-			"padding.top",
-			"padding.right",
-			"padding.bottom",
-			"padding.left"
-		],
-		0,
-		"spacing"
-	],
-	[
-		"px",
-		["padding.left", "padding.right"],
-		1,
-		"spacing"
-	],
-	[
-		"py",
-		["padding.top", "padding.bottom"],
-		1,
-		"spacing"
-	],
-	[
-		"pt",
-		["padding.top"],
-		2,
-		"spacing"
-	],
-	[
-		"pr",
-		["padding.right"],
-		2,
-		"spacing"
-	],
-	[
-		"pe",
-		["padding.right"],
-		2,
-		"spacing"
-	],
-	[
-		"pb",
-		["padding.bottom"],
-		2,
-		"spacing"
-	],
-	[
-		"pl",
-		["padding.left"],
-		2,
-		"spacing"
-	],
-	[
-		"ps",
-		["padding.left"],
-		2,
-		"spacing"
-	],
-	[
-		"gap",
-		["gap.row", "gap.column"],
-		0,
-		"spacing"
-	],
-	[
-		"gap-x",
-		["gap.column"],
-		1,
-		"spacing"
-	],
-	[
-		"gap-y",
-		["gap.row"],
-		1,
-		"spacing"
-	],
-	[
-		"rounded",
-		["radius"],
-		0,
-		"radius"
-	]
-];
-/** Splits `md:hover:px-4` into its variants and utility, ignoring colons inside `[...]` / `(...)`. */
-function splitVariants(className) {
-	const parts = [];
-	let depth = 0;
-	let current = "";
-	for (const char of className) {
-		if (char === "[" || char === "(") depth++;
-		if (char === "]" || char === ")") depth--;
-		if (char === ":" && depth === 0) {
-			parts.push(current);
-			current = "";
-		} else current += char;
-	}
-	return {
-		variants: parts,
-		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;
-	for (const variant of variants) {
-		const max = variant.startsWith("max-");
-		const size = breakpoints[max ? variant.slice(4) : variant];
-		if (size === void 0) return void 0;
-		if (!(max ? viewportWidth < size * rootFontSize : viewportWidth >= size * rootFontSize)) return void 0;
-		weight = Math.max(weight, size);
-	}
-	return weight;
-}
-function tokenFor(value, namespace, isKnown) {
-	const referenced = value.match(/^\[.*?var\((--[\w-]+)/)?.[1] ?? value.match(/^\((--[\w-]+)\)$/)?.[1];
-	if (referenced) return isKnown(referenced) ? referenced : void 0;
-	const name = `--${namespace}-${value}`;
-	return isKnown(name) ? name : void 0;
-}
-/**
-* Resolves which theme tokens drive an element's padding, gap and radius from its rendered Tailwind classes.
-* Only tokens accepted by `isKnown` are returned, so every result can be opened in the editor.
-*/
-function inspectTokens(className, isKnown, viewportWidth = Infinity, rootFontSize = 16) {
-	const winners = /* @__PURE__ */ new Map();
-	for (const raw of className.split(/\s+/).filter(Boolean)) {
-		const { variants, utility } = splitVariants(raw);
-		const weight = variantWeight(variants, viewportWidth, rootFontSize);
-		if (weight === void 0) continue;
-		const clean = utility.replace(/^!|!$/g, "");
-		for (const [prefix, slots, specificity, namespace] of utilities) {
-			if (!clean.startsWith(`${prefix}-`)) continue;
-			const token = tokenFor(clean.slice(prefix.length + 1), namespace, isKnown);
-			if (!token) continue;
-			const rank = weight * 10 + specificity;
-			for (const slot of slots) if ((winners.get(slot)?.rank ?? -1) <= rank) winners.set(slot, {
-				token,
-				rank
-			});
-		}
-	}
-	const result = {
-		padding: {},
-		gap: {}
-	};
-	for (const [slot, { token }] of winners) if (slot === "radius") result.radius = token;
-	else if (slot.startsWith("gap.")) result.gap[slot.slice(4)] = token;
-	else result.padding[slot.slice(8)] = token;
-	return result;
-}
-//#endregion
 //#region src/configurator/inspector/inspection-model.ts
 function readableColor(value) {
 	const rgb = value.trim().match(/^rgb\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*\)$/);
@@ -2250,8 +2137,9 @@ function inspectElement(element, isKnown) {
 		if (row.label === "Display" && ["inline", "block"].includes(value)) return false;
 		if (row.label === "Shadow" && value === "none") return false;
 		if (row.label === "Opacity" && Number(value) === 1) return false;
-		if (row.label === "Fill" && (value === "transparent" || /^rgba?\([^)]*[,/]\s*0(?:\.0+)?%?\s*\)$/.test(value))) return false;
-		if (row.label === "Border" && !(Number.parseFloat(border.top) > 0)) return false;
+		const transparent = value === "transparent" || /^rgba?\([^)]*[,/]\s*0(?:\.0+)?%?\s*\)$/.test(value);
+		if (row.label === "Fill" && transparent) return false;
+		if (row.label === "Border" && (transparent || !(Number.parseFloat(border.top) > 0))) return false;
 		if (row.label === "Line height" && value === "normal") return false;
 		if (row.label === "Letter spacing" && (value === "normal" || isZero(value))) return false;
 		if (row.label === "Alignment" && [
@@ -2977,7 +2865,7 @@ function CvaPreview(t0) {
 		component = slot.split(".")[0];
 		const props = {
 			...definition?.config.defaultVariants,
-			...Object.fromEntries(Object.entries(variants).filter(_temp$6).map(_temp2$3))
+			...Object.fromEntries(Object.entries(variants).filter(_temp$6).map(_temp2$4))
 		};
 		const classes = (key, t4) => {
 			const extra = t4 === void 0 ? {} : t4;
@@ -3108,7 +2996,7 @@ function CvaPreview(t0) {
 				sample = /* @__PURE__ */ jsx("a", {
 					className: exact,
 					href: "#preview",
-					onClick: _temp3$2,
+					onClick: _temp3$3,
 					children: "Example link"
 				});
 				break bb0;
@@ -3739,10 +3627,10 @@ function CvaPreview(t0) {
 function _temp4$2(value_2) {
 	return /* @__PURE__ */ jsx("option", { children: value_2 }, value_2);
 }
-function _temp3$2(event_1) {
+function _temp3$3(event_1) {
 	return event_1.preventDefault();
 }
-function _temp2$3(t0) {
+function _temp2$4(t0) {
 	const [name, value_0] = t0;
 	return [name, value_0 === "true" ? true : value_0 === "false" ? false : value_0];
 }
@@ -3954,7 +3842,7 @@ function CvaEditor(t0) {
 	let update;
 	if ($[2] !== component || $[3] !== draft.overrides || $[4] !== inheritedOverrides || $[5] !== setDraft || $[6] !== setSlot || $[7] !== slot) {
 		slots = Object.keys(cvaDefinitions);
-		const components = [...new Set(slots.map(_temp2$2))];
+		const components = [...new Set(slots.map(_temp2$3))];
 		let t10;
 		if ($[20] !== inheritedOverrides || $[21] !== slot) {
 			t10 = resolveCvaDefinition(slot, inheritedOverrides);
@@ -3997,7 +3885,7 @@ function CvaEditor(t0) {
 			const next_0 = event.target.value;
 			setSlot(slots.find((key_0) => key_0.startsWith(`${next_0}.`)));
 		};
-		t5 = components.map(_temp3$1);
+		t5 = components.map(_temp3$2);
 		$[2] = component;
 		$[3] = draft.overrides;
 		$[4] = inheritedOverrides;
@@ -4252,13 +4140,13 @@ function _temp4$1(key_2) {
 		children: title(key_2.split(".")[1])
 	}, key_2);
 }
-function _temp3$1(name) {
+function _temp3$2(name) {
 	return /* @__PURE__ */ jsx("option", {
 		value: name,
 		children: title(name)
 	}, name);
 }
-function _temp2$2(key) {
+function _temp2$3(key) {
 	return key.split(".")[0];
 }
 //#endregion
@@ -4957,7 +4845,7 @@ function PaletteSelect(t0) {
 	} else t6 = $[36];
 	let t7;
 	if ($[37] !== options) {
-		t7 = paletteFamilies(options).map(_temp2$1);
+		t7 = paletteFamilies(options).map(_temp2$2);
 		$[37] = options;
 		$[38] = t7;
 	} else t7 = $[38];
@@ -4977,6 +4865,7 @@ function PaletteSelect(t0) {
 	if ($[40] !== t7) {
 		t9 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
 			className: "studio-palette-popover",
+			"data-povio-inspector-ignore": "",
 			placement: "bottom end",
 			children: /* @__PURE__ */ jsxs($928221da08ecbc62$export$41f133550aa26f48, {
 				className: "studio-palette-list",
@@ -5008,7 +4897,7 @@ function PaletteSelect(t0) {
 	} else t10 = $[49];
 	return t10;
 }
-function _temp2$1(t0) {
+function _temp2$2(t0) {
 	const { family: name_0, steps: steps_0 } = t0;
 	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, {
 		id: name_0,
@@ -5216,7 +5105,7 @@ function useLoadedFonts() {
 			document.fonts.ready.then(() => {
 				if (!active) return;
 				const root = getComputedStyle(document.documentElement);
-				const families = [...new Set([...document.fonts].map(_temp2))].filter(_temp3);
+				const families = [...new Set([...document.fonts].map(_temp2$1))].filter(_temp3$1);
 				setFonts(families.map((family_0) => {
 					const base = `--font-${family_0.split(/\s+/)[0].toLowerCase()}-base`;
 					const value_0 = unquote(root.getPropertyValue(base)) === family_0 ? `var(${base}), sans-serif` : `"${family_0}", sans-serif`;
@@ -5251,10 +5140,10 @@ function useLoadedFonts() {
 	return t4;
 }
 /** Families added through the upload button in this page session. */
-function _temp3(family) {
+function _temp3$1(family) {
 	return !family.startsWith("Povio Fontsource preview ");
 }
-function _temp2(face) {
+function _temp2$1(face) {
 	return unquote(face.family);
 }
 function _temp$2(value) {
@@ -5859,214 +5748,819 @@ function isPresetActive(preset, defaults, current) {
 		return Object.keys(a).length === Object.keys(b).length && Object.entries(a).every(([name, value]) => b[name] === value);
 	});
 }
-//#endregion
-//#region src/configurator/ShadesGenerator.tsx
+const defaultShadeCurve = {
+	hue: 0,
+	saturation: 100,
+	start: .985,
+	end: .16,
+	startHandle: {
+		x: 1 / 3,
+		y: .985
+	},
+	endHandle: {
+		x: 2 / 3,
+		y: .16
+	},
+	pins: {},
+	basePinned: false
+};
+const toLinear = (channel) => {
+	const c = channel / 255;
+	return c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+};
+const toGamma = (channel) => {
+	return (channel <= .0031308 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - .055) * 255;
+};
+/** sRGB channels (0–255) to OKLCH: lightness 0–1, chroma, hue in degrees. */
+function rgbToOklch([red, green, blue]) {
+	const [r, g, b] = [
+		red,
+		green,
+		blue
+	].map((value) => toLinear(value ?? 0));
+	const l = Math.cbrt(.4122214708 * r + .5363325363 * g + .0514459929 * b);
+	const m = Math.cbrt(.2119034982 * r + .6806995451 * g + .1073969566 * b);
+	const s = Math.cbrt(.0883024619 * r + .2817188376 * g + .6299787005 * b);
+	const lightness = .2104542553 * l + .793617785 * m - .0040720468 * s;
+	const a = 1.9779984951 * l - 2.428592205 * m + .4505937099 * s;
+	const bAxis = .0259040371 * l + .7827717662 * m - .808675766 * s;
+	return [
+		lightness,
+		Math.hypot(a, bAxis),
+		(Math.atan2(bAxis, a) * 180 / Math.PI + 360) % 360
+	];
+}
+function oklchToRgb(lightness, chroma, hue) {
+	const angle = hue * Math.PI / 180;
+	const a = chroma * Math.cos(angle);
+	const b = chroma * Math.sin(angle);
+	const l = (lightness + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (lightness - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (lightness - .0894841775 * a - 1.291485548 * b) ** 3;
+	return [
+		4.0767416621 * l - 3.3077115913 * m + .2309699292 * s,
+		-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s,
+		-.0041960863 * l - .7034186147 * m + 1.707614701 * s
+	].map(toGamma);
+}
+const inGamut = (channels) => channels.every((value) => value >= -.5 && value <= 255.5);
+/** The color at this lightness and hue, keeping as much of the chroma as sRGB can show. */
+function fitToGamut(lightness, chroma, hue) {
+	const exact = oklchToRgb(lightness, chroma, hue);
+	if (inGamut(exact)) return exact;
+	let low = 0;
+	let high = chroma;
+	for (let i = 0; i < 20; i++) {
+		const middle = (low + high) / 2;
+		if (inGamut(oklchToRgb(lightness, middle, hue))) low = middle;
+		else high = middle;
+	}
+	return oklchToRgb(lightness, low, hue);
+}
+const toChannels = (channels) => channels.map((value) => Math.max(0, Math.min(255, Math.round(value)))).join(" ");
+const clamp$1 = (value, low, high) => Math.max(low, Math.min(high, value));
+/** The base color with the curve's Hue and Saturation applied: the hue and chroma every shade takes. */
+function adjustBase(baseRgb, curve) {
+	const [lightness, chroma, hue] = rgbToOklch(baseRgb.split(/\s+/).map(Number));
+	return toChannels(fitToGamut(lightness, chroma * curve.saturation / 100, (hue + curve.hue + 360) % 360));
+}
+/** Where each step sits on the curve's x axis, lightest first. */
+const stepPosition = (index, count) => count > 1 ? index / (count - 1) : 0;
 /**
-* Generates a whole base palette scale from one color, which becomes its 500 step.
+* The curve as cubic bezier segments between its fixed points: the two ends and every pin. The end handles shape the
+* first and last segment; pins get smooth, monotone tangents so the curve never overshoots between them.
 */
-function ShadesGenerator(t0) {
-	const $ = c(52);
-	const { title, steps, initial, onApply } = t0;
+function curveSegments(curve, steps, baseLightness) {
+	const ordered = [...steps].sort((a, b) => a - b);
+	const count = ordered.length;
+	const fixed = [{
+		x: 0,
+		y: curve.start
+	}, {
+		x: 1,
+		y: curve.end
+	}];
+	ordered.forEach((step, index) => {
+		if (index === 0 || index === count - 1) return;
+		const x = stepPosition(index, count);
+		if (step === 500 && curve.basePinned) fixed.push({
+			x,
+			y: baseLightness
+		});
+		else if (curve.pins[step] !== void 0) fixed.push({
+			x,
+			y: curve.pins[step]
+		});
+	});
+	fixed.sort((a, b) => a.x - b.x);
+	const slopes = fixed.slice(1).map((point, k) => (point.y - fixed[k].y) / (point.x - fixed[k].x));
+	const tangent = (k) => {
+		const before = slopes[k - 1];
+		const after = slopes[k];
+		if (Math.sign(before) !== Math.sign(after) || before === 0 || after === 0) return 0;
+		const average = (before + after) / 2;
+		const limit = 3 * Math.min(Math.abs(before), Math.abs(after));
+		return Math.sign(average) * Math.min(Math.abs(average), limit);
+	};
+	const fromHandle = (anchor, handle, width, sign) => {
+		const reach = Math.abs(handle.x - anchor.x);
+		const scale = Math.min(1, width * .9 / Math.max(reach, 1e-6));
+		return {
+			x: anchor.x + sign * reach * scale,
+			y: anchor.y + (handle.y - anchor.y) * scale
+		};
+	};
+	const last = fixed.length - 2;
+	return fixed.slice(0, -1).map((from, k) => {
+		const to = fixed[k + 1];
+		const width = to.x - from.x;
+		return [
+			from,
+			k === 0 ? fromHandle(from, curve.startHandle, width, 1) : {
+				x: from.x + width / 3,
+				y: from.y + tangent(k) * width / 3
+			},
+			k === last ? fromHandle(to, curve.endHandle, width, -1) : {
+				x: to.x - width / 3,
+				y: to.y - tangent(k + 1) * width / 3
+			},
+			to
+		];
+	});
+}
+const bezier = ([p0, p1, p2, p3], t) => {
+	const u = 1 - t;
+	return {
+		x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
+		y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y
+	};
+};
+/** The curve's lightness at `x`, clamped to 0–1 so no shade passes white or black. */
+function curveLightness(segments, x) {
+	const segment = segments.find((item) => x <= item[3].x + 1e-9) ?? segments.at(-1);
+	let low = 0;
+	let high = 1;
+	for (let i = 0; i < 40; i++) {
+		const middle = (low + high) / 2;
+		if (bezier(segment, middle).x < x) low = middle;
+		else high = middle;
+	}
+	return clamp$1(bezier(segment, (low + high) / 2).y, 0, 1);
+}
+/** The lightness of every step on the curve, pins included, keyed by step. */
+function curveStepLightness(curve, steps, baseLightness) {
+	const ordered = [...steps].sort((a, b) => a - b);
+	const segments = curveSegments(curve, ordered, baseLightness);
+	return Object.fromEntries(ordered.map((step, index) => [step, step === 500 && curve.basePinned ? baseLightness : curve.pins[step] ?? curveLightness(segments, stepPosition(index, ordered.length))]));
+}
+/** Generates a palette's RGB channel values from its base color and lightness curve, keyed by step. */
+function generateCurveShades(baseRgb, steps, curve) {
+	const [baseLightness, baseChroma, baseHue] = rgbToOklch(baseRgb.split(/\s+/).map(Number));
+	const ordered = [...steps].sort((a, b) => a - b);
+	const lightness = curveStepLightness(curve, ordered, baseLightness);
+	const hue = (baseHue + curve.hue + 360) % 360;
+	const chroma = baseChroma * curve.saturation / 100;
+	return Object.fromEntries(ordered.map((step, index) => {
+		const taper = 1 - .55 * (Math.abs(stepPosition(index, ordered.length) - .5) * 2) ** 1.6;
+		return [step, toChannels(fitToGamut(lightness[step], chroma * taper, hue))];
+	}));
+}
+//#endregion
+//#region src/configurator/ShadesGenerator.tsx
+const colorRows = [{
+	field: "hue",
+	label: "Hue",
+	min: -180,
+	max: 180,
+	step: 1,
+	unit: "°"
+}, {
+	field: "saturation",
+	label: "Saturation",
+	min: 0,
+	max: 300,
+	step: 1,
+	unit: "%"
+}];
+/** A Figma-style slider field: label and value in a 24px field filled to the value; drag or use arrow keys. */
+function SliderField(t0) {
+	const $ = c(25);
+	const { label, value, min, max, step, display, disabled, onChange } = t0;
+	const origin = min < 0 ? 0 : min;
 	let t1;
-	if ($[0] !== initial) {
-		t1 = isRgb(initial) ? toHex(initial).slice(1).toUpperCase() : "";
-		$[0] = initial;
-		$[1] = t1;
-	} else t1 = $[1];
-	const [text, setText] = useState(t1);
-	let base;
-	let pending;
-	let shades;
-	let t10;
-	let t2;
-	let t3;
+	if ($[0] !== max || $[1] !== min) {
+		t1 = (amount) => (amount - min) / (max - min) * 100;
+		$[0] = max;
+		$[1] = min;
+		$[2] = t1;
+	} else t1 = $[2];
+	const percent = t1;
+	const from = Math.min(percent(origin), percent(value));
+	const to = Math.max(percent(origin), percent(value));
+	const t2 = `${from}%`;
+	const t3 = `${to}%`;
 	let t4;
-	let t5;
+	if ($[3] !== t2 || $[4] !== t3) {
+		t4 = {
+			"--from": t2,
+			"--to": t3
+		};
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	const t5 = t4;
 	let t6;
+	if ($[6] !== label) {
+		t6 = /* @__PURE__ */ jsx("span", { children: label });
+		$[6] = label;
+		$[7] = t6;
+	} else t6 = $[7];
 	let t7;
+	if ($[8] !== display) {
+		t7 = /* @__PURE__ */ jsx("output", { children: display });
+		$[8] = display;
+		$[9] = t7;
+	} else t7 = $[9];
 	let t8;
+	if ($[10] !== onChange) {
+		t8 = (event) => onChange(Number(event.target.value));
+		$[10] = onChange;
+		$[11] = t8;
+	} else t8 = $[11];
 	let t9;
-	if ($[2] !== initial || $[3] !== steps || $[4] !== text || $[5] !== title) {
-		const hex = text.trim().replace(/^#/, "");
-		base = /^[0-9a-f]{6}$/i.test(hex) ? toRgb(`#${hex}`) : /^[0-9a-f]{3}$/i.test(hex) ? toRgb(`#${hex.replace(/./g, "$&$&")}`) : null;
-		shades = base ? generateShades(base, steps.map(_temp$1)) : null;
-		pending = !!shades && base !== initial;
-		t8 = "studio-shades";
-		t9 = "group";
-		t10 = `Generate ${title} shades`;
-		t5 = "studio-shades-input";
-		const t11 = `shades-${title}`;
-		if ($[18] !== t11) {
-			t6 = /* @__PURE__ */ jsx("label", {
-				htmlFor: t11,
-				children: "Base color (500)"
-			});
-			$[18] = t11;
-			$[19] = t6;
-		} else t6 = $[19];
-		let t12;
-		if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-			t12 = /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "#"
-			});
-			$[20] = t12;
-		} else t12 = $[20];
-		const t13 = `shades-${title}`;
-		const t14 = !base;
-		let t15;
-		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-			t15 = (event) => setText(event.target.value.replace(/^#/, ""));
-			$[21] = t15;
-		} else t15 = $[21];
-		if ($[22] !== t13 || $[23] !== t14 || $[24] !== text) {
-			t7 = /* @__PURE__ */ jsxs("span", {
-				className: "studio-token-input",
-				children: [t12, /* @__PURE__ */ jsx("input", {
-					id: t13,
-					value: text,
-					"aria-invalid": t14,
-					spellCheck: false,
-					onChange: t15
-				})]
-			});
-			$[22] = t13;
-			$[23] = t14;
-			$[24] = text;
-			$[25] = t7;
-		} else t7 = $[25];
-		t2 = "color";
-		t3 = "Pick base color";
-		t4 = base ? toHex(base) : "#000000";
-		$[2] = initial;
-		$[3] = steps;
-		$[4] = text;
-		$[5] = title;
-		$[6] = base;
-		$[7] = pending;
-		$[8] = shades;
-		$[9] = t10;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-		$[17] = t9;
-	} else {
-		base = $[6];
-		pending = $[7];
-		shades = $[8];
-		t10 = $[9];
-		t2 = $[10];
-		t3 = $[11];
-		t4 = $[12];
-		t5 = $[13];
-		t6 = $[14];
-		t7 = $[15];
-		t8 = $[16];
-		t9 = $[17];
-	}
-	let t11;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = (event_0) => setText(event_0.target.value.slice(1).toUpperCase());
-		$[26] = t11;
-	} else t11 = $[26];
-	let t12;
-	if ($[27] !== t2 || $[28] !== t3 || $[29] !== t4) {
-		t12 = /* @__PURE__ */ jsx("input", {
-			type: t2,
-			"aria-label": t3,
-			value: t4,
-			onChange: t11
-		});
-		$[27] = t2;
-		$[28] = t3;
-		$[29] = t4;
-		$[30] = t12;
-	} else t12 = $[30];
-	const t13 = !pending;
-	let t14;
-	if ($[31] !== onApply || $[32] !== shades || $[33] !== steps) {
-		t14 = () => {
-			if (shades) onApply(Object.fromEntries(steps.map((t15) => {
-				const { name, step: step_0 } = t15;
-				return [name, shades[step_0]];
-			})));
-		};
-		$[31] = onApply;
-		$[32] = shades;
-		$[33] = steps;
-		$[34] = t14;
-	} else t14 = $[34];
-	let t15;
-	if ($[35] !== t13 || $[36] !== t14) {
-		t15 = /* @__PURE__ */ jsx("div", {
-			className: "studio-shades-actions",
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "studio-primary",
-				disabled: t13,
-				onClick: t14,
-				children: "Change shades"
-			})
+	if ($[12] !== disabled || $[13] !== display || $[14] !== max || $[15] !== min || $[16] !== step || $[17] !== t8 || $[18] !== value) {
+		t9 = /* @__PURE__ */ jsx("input", {
+			type: "range",
+			min,
+			max,
+			step,
+			value,
+			disabled,
+			"aria-valuetext": display,
+			onChange: t8
 		});
-		$[35] = t13;
-		$[36] = t14;
-		$[37] = t15;
-	} else t15 = $[37];
-	let t16;
-	if ($[38] !== t12 || $[39] !== t15 || $[40] !== t5 || $[41] !== t6 || $[42] !== t7) {
-		t16 = /* @__PURE__ */ jsxs("div", {
-			className: t5,
+		$[12] = disabled;
+		$[13] = display;
+		$[14] = max;
+		$[15] = min;
+		$[16] = step;
+		$[17] = t8;
+		$[18] = value;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t5 || $[21] !== t6 || $[22] !== t7 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("label", {
+			className: "studio-slider-field",
+			style: t5,
 			children: [
 				t6,
 				t7,
-				t12,
-				t15
+				t9
 			]
 		});
-		$[38] = t12;
-		$[39] = t15;
-		$[40] = t5;
-		$[41] = t6;
-		$[42] = t7;
-		$[43] = t16;
-	} else t16 = $[43];
-	let t17;
-	if ($[44] !== base) {
-		t17 = !base && /* @__PURE__ */ jsx("p", {
-			className: "studio-error",
-			children: "Enter a hex color such as #75ACFF."
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
+}
+/** Dragging the base this close to the base color's own lightness snaps it there. */
+const baseSnap = .012;
+/** Keeps a moved shade at least this far (per step) from the fixed points beside it, so shades stay in order. */
+const orderMargin = .006;
+const width = 320;
+const height = 260;
+const insetX = 14;
+const insetY = 40;
+const toX = (x) => insetX + x * 292;
+const toY = (y) => insetY + (1 - y) * 180;
+const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+/**
+* The palette's lightness curve, edited like a vector path: drag the ends (the backgrounds) and their handles, and drag
+* any shade up or down to make the curve pass through it. A moved shade stays between the fixed points beside it, so
+* the curve keeps its order; double-click it (or press Delete) to release it. The base snaps to its own lightness.
+*/
+function CurveEditor(t0) {
+	const $ = c(13);
+	const { curve, steps, shades, baseLightness, disabled, onChange } = t0;
+	const svgRef = useRef(null);
+	const [grip, setGrip] = useState(null);
+	const press = useRef(null);
+	const ordered = [...steps].sort(_temp$1);
+	const segments = curveSegments(curve, ordered, baseLightness);
+	const lightness = curveStepLightness(curve, ordered, baseLightness);
+	const path = segments.map(_temp2).join(" ");
+	const baseIndex = ordered.indexOf(500);
+	let t1;
+	if ($[0] !== curve.basePinned || $[1] !== curve.pins) {
+		t1 = (step) => step === 500 && curve.basePinned || curve.pins[step] !== void 0;
+		$[0] = curve.basePinned;
+		$[1] = curve.pins;
+		$[2] = t1;
+	} else t1 = $[2];
+	const isMoved = t1;
+	const moveShade = (step_0, y) => {
+		const index_0 = ordered.indexOf(step_0);
+		let lighter = {
+			index: 0,
+			y: curve.start
+		};
+		let darker = {
+			index: ordered.length - 1,
+			y: curve.end
+		};
+		ordered.forEach((other, otherIndex) => {
+			if (other === step_0 || otherIndex === 0 || otherIndex === ordered.length - 1 || !isMoved(other)) return;
+			const value = lightness[other];
+			if (otherIndex < index_0 && otherIndex > lighter.index) lighter = {
+				index: otherIndex,
+				y: value
+			};
+			if (otherIndex > index_0 && otherIndex < darker.index) darker = {
+				index: otherIndex,
+				y: value
+			};
 		});
-		$[44] = base;
-		$[45] = t17;
-	} else t17 = $[45];
-	let t18;
-	if ($[46] !== t10 || $[47] !== t16 || $[48] !== t17 || $[49] !== t8 || $[50] !== t9) {
-		t18 = /* @__PURE__ */ jsxs("div", {
-			className: t8,
-			role: t9,
-			"aria-label": t10,
-			children: [t16, t17]
+		const bounded = clamp(y, darker.y + orderMargin * (darker.index - index_0), lighter.y - orderMargin * (index_0 - lighter.index));
+		const pins = { ...curve.pins };
+		if (step_0 === 500 && Math.abs(bounded - baseLightness) < baseSnap) {
+			delete pins[500];
+			onChange({
+				...curve,
+				pins,
+				basePinned: true
+			});
+			return;
+		}
+		pins[step_0] = bounded;
+		onChange({
+			...curve,
+			pins,
+			basePinned: step_0 === 500 ? false : curve.basePinned
 		});
-		$[46] = t10;
-		$[47] = t16;
-		$[48] = t17;
-		$[49] = t8;
-		$[50] = t9;
-		$[51] = t18;
-	} else t18 = $[51];
-	return t18;
+	};
+	let t2;
+	if ($[3] !== curve || $[4] !== disabled || $[5] !== isMoved || $[6] !== onChange) {
+		t2 = (step_1) => {
+			if (disabled || !isMoved(step_1)) return;
+			const pins_0 = { ...curve.pins };
+			delete pins_0[step_1];
+			onChange({
+				...curve,
+				pins: pins_0,
+				basePinned: step_1 === 500 ? false : curve.basePinned
+			});
+		};
+		$[3] = curve;
+		$[4] = disabled;
+		$[5] = isMoved;
+		$[6] = onChange;
+		$[7] = t2;
+	} else t2 = $[7];
+	const release = t2;
+	const move = (target, point) => {
+		if (typeof target === "number") moveShade(target, point.y);
+		else if (target === "start" || target === "end") {
+			const y_0 = clamp(point.y, 0, 1);
+			const handle = target === "start" ? "startHandle" : "endHandle";
+			const delta = y_0 - curve[target];
+			onChange({
+				...curve,
+				[target]: y_0,
+				[handle]: {
+					...curve[handle],
+					y: clamp(curve[handle].y + delta, -.18, 1.18)
+				}
+			});
+		} else onChange({
+			...curve,
+			[target]: {
+				x: clamp(point.x, 0, 1),
+				y: clamp(point.y, -.18, 1.18)
+			}
+		});
+	};
+	const pointAt = (event) => {
+		const box = svgRef.current.getBoundingClientRect();
+		const px = (event.clientX - box.left) * width / box.width;
+		const py = (event.clientY - box.top) * height / box.height;
+		return {
+			x: (px - insetX) / 292,
+			y: 1 - (py - insetY) / 180
+		};
+	};
+	const startDrag = (target_0) => (event_0) => {
+		if (disabled || event_0.button !== 0) return;
+		event_0.preventDefault();
+		svgRef.current?.setPointerCapture(event_0.pointerId);
+		press.current = {
+			grip: target_0,
+			x: event_0.clientX,
+			y: event_0.clientY,
+			moved: false
+		};
+		setGrip(target_0);
+	};
+	const nudge = (target_1) => (event_1) => {
+		const amount = event_1.shiftKey ? .05 : .01;
+		const vertical = target_1 === "start" || target_1 === "end";
+		const offset = {
+			ArrowUp: [0, amount],
+			ArrowDown: [0, -amount],
+			ArrowLeft: [vertical ? 0 : -amount, 0],
+			ArrowRight: [vertical ? 0 : amount, 0]
+		}[event_1.key];
+		if (!offset || disabled) return;
+		event_1.preventDefault();
+		const current = vertical ? {
+			x: target_1 === "start" ? 0 : 1,
+			y: curve[target_1]
+		} : curve[target_1];
+		move(target_1, {
+			x: current.x + offset[0],
+			y: current.y + offset[1]
+		});
+	};
+	const shadeKeys = (step_2) => (event_2) => {
+		if (disabled) return;
+		if (event_2.key === "Delete" || event_2.key === "Backspace") {
+			event_2.preventDefault();
+			release(step_2);
+			return;
+		}
+		const amount_0 = event_2.shiftKey ? .05 : .01;
+		const offset_0 = event_2.key === "ArrowUp" ? amount_0 : event_2.key === "ArrowDown" ? -amount_0 : 0;
+		if (!offset_0) return;
+		event_2.preventDefault();
+		moveShade(step_2, lightness[step_2] + offset_0);
+	};
+	const ends = [{
+		grip: "start",
+		handle: "startHandle",
+		x: 0,
+		y: curve.start,
+		label: `Lightest end, ${ordered[0]}`
+	}, {
+		grip: "end",
+		handle: "endHandle",
+		x: 1,
+		y: curve.end,
+		label: `Darkest end, ${ordered.at(-1)}`
+	}];
+	let t3;
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => setGrip(null);
+		t4 = () => setGrip(null);
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = toY(1);
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx("rect", {
+			className: "studio-curve-range",
+			x: insetX,
+			y: t5,
+			width: 292,
+			height: toY(0) - toY(1)
+		});
+		t7 = [
+			.25,
+			.5,
+			.75
+		].map(_temp3);
+		$[11] = t6;
+		$[12] = t7;
+	} else {
+		t6 = $[11];
+		t7 = $[12];
+	}
+	return /* @__PURE__ */ jsxs("svg", {
+		ref: svgRef,
+		className: `studio-curve-editor ${grip ? "is-dragging" : ""}`,
+		viewBox: `0 0 ${width} ${height}`,
+		"aria-label": "Lightness curve",
+		onPointerMove: (event_3) => {
+			const current_0 = press.current;
+			if (!grip || !current_0) return;
+			if (!current_0.moved && Math.hypot(event_3.clientX - current_0.x, event_3.clientY - current_0.y) < 3) return;
+			current_0.moved = true;
+			move(grip, pointAt(event_3));
+		},
+		onDoubleClick: () => {
+			const target_2 = press.current?.grip;
+			if (typeof target_2 === "number") release(target_2);
+		},
+		onPointerUp: t3,
+		onPointerCancel: t4,
+		children: [
+			t6,
+			t7,
+			ordered.map((step_3, index_1) => /* @__PURE__ */ jsx("line", {
+				className: "studio-curve-step",
+				x1: toX(stepPosition(index_1, ordered.length)),
+				x2: toX(stepPosition(index_1, ordered.length)),
+				y1: toY(0),
+				y2: toY(1)
+			}, step_3)),
+			baseIndex >= 0 && !curve.basePinned && /* @__PURE__ */ jsx("line", {
+				className: "studio-curve-base-mark",
+				x1: toX(stepPosition(baseIndex, ordered.length)) - 12,
+				x2: toX(stepPosition(baseIndex, ordered.length)) + 12,
+				y1: toY(baseLightness),
+				y2: toY(baseLightness),
+				children: /* @__PURE__ */ jsx("title", { children: "The base color's own lightness" })
+			}),
+			/* @__PURE__ */ jsx("path", {
+				className: "studio-curve-path",
+				d: path
+			}),
+			ends.map((end) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				className: "studio-curve-handle-line",
+				x1: toX(end.x),
+				y1: toY(end.y),
+				x2: toX(curve[end.handle].x),
+				y2: toY(curve[end.handle].y)
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "studio-curve-handle",
+				cx: toX(curve[end.handle].x),
+				cy: toY(curve[end.handle].y),
+				r: "5",
+				tabIndex: disabled ? -1 : 0,
+				role: "button",
+				"aria-label": `${end.label} handle. Drag or use arrow keys.`,
+				onPointerDown: startDrag(end.handle),
+				onKeyDown: nudge(end.handle)
+			})] }, end.handle)),
+			ordered.map((step_4, index_2) => {
+				if (index_2 === 0 || index_2 === ordered.length - 1 || !shades[step_4]) return null;
+				const pinned = isMoved(step_4);
+				const cx = toX(stepPosition(index_2, ordered.length));
+				const cy = toY(lightness[step_4]);
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+					className: `studio-curve-shade ${pinned ? "is-pinned" : ""} ${step_4 === 500 ? "is-base" : ""}`,
+					cx,
+					cy,
+					r: pinned ? 5 : step_4 === 500 ? 4.5 : 3.5,
+					fill: `rgb(${shades[step_4]})`,
+					tabIndex: disabled ? -1 : 0,
+					role: "button",
+					"aria-label": `${step_4 === 500 ? "Base, 500" : step_4}, lightness ${(lightness[step_4] * 100).toFixed(1)}${pinned ? ", moved" : ""}. Drag or use arrow keys; Delete releases it.`,
+					onPointerDown: startDrag(step_4),
+					onKeyDown: shadeKeys(step_4),
+					children: /* @__PURE__ */ jsx("title", { children: pinned ? `${step_4}: drag to adjust · double-click to release` : `${step_4}: drag to adjust` })
+				}), step_4 === 500 && /* @__PURE__ */ jsx("text", {
+					className: "studio-curve-label",
+					x: cx + 8,
+					y: cy - 8,
+					children: curve.basePinned ? "Base · on base color" : "Base"
+				})] }, step_4);
+			}),
+			ends.map((end_0) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				className: "studio-curve-end",
+				x: toX(end_0.x) - 5,
+				y: toY(end_0.y) - 5,
+				width: "10",
+				height: "10",
+				rx: "2",
+				tabIndex: disabled ? -1 : 0,
+				role: "button",
+				"aria-label": `${end_0.label}, lightness ${(end_0.y * 100).toFixed(1)}. Drag or use arrow keys.`,
+				onPointerDown: startDrag(end_0.grip),
+				onKeyDown: nudge(end_0.grip)
+			}), /* @__PURE__ */ jsx("text", {
+				className: "studio-curve-label",
+				x: end_0.x ? toX(1) - 8 : toX(0) + 8,
+				y: end_0.x ? toY(end_0.y) - 10 : toY(end_0.y) + 18,
+				textAnchor: end_0.x ? "end" : "start",
+				children: `${end_0.x ? ordered.at(-1) : ordered[0]} · ${(end_0.y * 100).toFixed(1)}`
+			})] }, end_0.grip))
+		]
+	});
 }
-function _temp$1(t0) {
-	const { step } = t0;
-	return step;
+/**
+* Generates a whole base palette scale from one color. Advanced palette controls draw the scale from an editable
+* lightness curve instead and apply it live; until they are used, the classic weights apply with the base at 500.
+*/
+function _temp3(y_1) {
+	return /* @__PURE__ */ jsx("line", {
+		className: "studio-curve-grid",
+		x1: insetX,
+		x2: 306,
+		y1: toY(y_1),
+		y2: toY(y_1)
+	}, y_1);
+}
+function _temp2(t0, index) {
+	const [from, first, second, to] = t0;
+	return `${index ? "" : `M${toX(from.x)},${toY(from.y)} `}C${toX(first.x)},${toY(first.y)} ${toX(second.x)},${toY(second.y)} ${toX(to.x)},${toY(to.y)}`;
+}
+function _temp$1(a, b) {
+	return a - b;
+}
+function ShadesGenerator({ title, steps, initial, onApply }) {
+	const hexOf = (rgb) => isRgb(rgb) ? toHex(rgb).slice(1).toUpperCase() : "";
+	const parseHex = (value) => {
+		const hex = value.trim().replace(/^#/, "");
+		return /^[0-9a-f]{6}$/i.test(hex) ? toRgb(`#${hex}`) : /^[0-9a-f]{3}$/i.test(hex) ? toRgb(`#${hex.replace(/./g, "$&$&")}`) : null;
+	};
+	/** The color the palette is generated from; Hue and Saturation adjust it on top. */
+	const [source, setSource] = useState(isRgb(initial) ? initial : null);
+	/** What is being typed into the base field, while it has focus. */
+	const [draftText, setDraftText] = useState(null);
+	const [advanced, setAdvanced] = useState(false);
+	/** `null` until an advanced control is used: the classic generator. */
+	const [curve, setCurve] = useState(null);
+	/** The base the curve last applied from, so the button only offers changes to a new base. */
+	const [curveBase, setCurveBase] = useState(null);
+	const ownApply = useRef(null);
+	const [synced, setSynced] = useState(initial);
+	if (initial !== synced) {
+		setSynced(initial);
+		if (initial !== ownApply.current) {
+			setSource(isRgb(initial) ? initial : null);
+			setDraftText(null);
+			setCurve(null);
+			setCurveBase(null);
+		}
+	}
+	const base = source;
+	const shownBase = base && curve ? adjustBase(base, curve) : base;
+	const fieldText = draftText ?? (shownBase ? hexOf(shownBase) : "");
+	const invalid = draftText !== null ? !parseHex(draftText) : !base;
+	/** A base entered by hand replaces the adjusted one, so Hue and Saturation start again from it. */
+	const enterBase = (value_0) => {
+		setDraftText(value_0);
+		const parsed = parseHex(value_0);
+		if (!parsed) return;
+		setSource(parsed);
+		if (curve && (curve.hue !== 0 || curve.saturation !== 100)) setCurve({
+			...curve,
+			hue: 0,
+			saturation: 100
+		});
+	};
+	const numbers = steps.map(({ step }) => step);
+	const shadesFor = (from, using) => using ? generateCurveShades(from, numbers, using) : generateShades(from, numbers);
+	const shades = base ? shadesFor(base, curve) : null;
+	const pending = !!shades && (curve ? base !== curveBase : base !== initial);
+	const apply = (values, from_0) => {
+		ownApply.current = values[500] ?? null;
+		setCurveBase(from_0);
+		onApply(Object.fromEntries(steps.map(({ name, step: step_0 }) => [name, values[step_0]])));
+	};
+	const updateCurve = (next) => {
+		setCurve(next);
+		if (base) apply(generateCurveShades(base, numbers, next), base);
+	};
+	const resetCurve = () => {
+		setCurve(null);
+		setCurveBase(null);
+		if (base) apply(generateShades(base, numbers), base);
+	};
+	const active = curve ?? defaultShadeCurve;
+	const curveShades = base ? generateCurveShades(base, numbers, active) : null;
+	const baseLightness = shownBase ? rgbToOklch(shownBase.split(" ").map(Number))[0] : .5;
+	const panelId = `shades-advanced-${title.replaceAll(" ", "-")}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "studio-shades",
+		role: "group",
+		"aria-label": `Generate ${title} shades`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-shades-row",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						className: "studio-shades-label",
+						htmlFor: `shades-${title}`,
+						children: "Base"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "studio-shades-field",
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								type: "color",
+								"aria-label": "Pick base color",
+								value: shownBase ? toHex(shownBase) : "#000000",
+								onChange: (event) => {
+									enterBase(event.target.value.slice(1).toUpperCase());
+									setDraftText(null);
+								}
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: "#"
+							}),
+							/* @__PURE__ */ jsx("input", {
+								id: `shades-${title}`,
+								value: fieldText,
+								"aria-invalid": invalid,
+								spellCheck: false,
+								onFocus: () => setDraftText(fieldText),
+								onBlur: () => setDraftText(null),
+								onChange: (event_0) => enterBase(event_0.target.value.replace(/^#/, ""))
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "studio-primary studio-shades-apply",
+						disabled: !pending,
+						onClick: () => {
+							if (shades && base) apply(shades, base);
+						},
+						children: "Change shades"
+					})
+				]
+			}),
+			invalid && /* @__PURE__ */ jsx("p", {
+				className: "studio-error",
+				children: "Enter a hex color such as #75ACFF."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-shades-bar",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "studio-shades-advanced-toggle",
+					"aria-expanded": advanced,
+					"aria-controls": panelId,
+					onClick: () => setAdvanced((value_1) => !value_1),
+					children: [
+						/* @__PURE__ */ jsx(ChevronRight, {
+							size: 12,
+							"aria-hidden": "true"
+						}),
+						"Advanced palette controls",
+						curve && /* @__PURE__ */ jsx("span", {
+							className: "studio-group-changed",
+							"aria-label": "in use"
+						})
+					]
+				}), curve && /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "studio-shades-reset",
+					"aria-label": "Back to standard shades",
+					title: "Back to standard shades",
+					onClick: resetCurve,
+					children: [/* @__PURE__ */ jsx(RotateCcw, {
+						size: 12,
+						"aria-hidden": "true"
+					}), "Reset"]
+				})]
+			}),
+			advanced && /* @__PURE__ */ jsxs("div", {
+				id: panelId,
+				className: "studio-shades-advanced",
+				children: [
+					curveShades && /* @__PURE__ */ jsx(CurveEditor, {
+						curve: active,
+						steps: numbers,
+						shades: curveShades,
+						baseLightness,
+						disabled: !base,
+						onChange: updateCurve
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "studio-shades-hint",
+						children: curve ? "Drag the ends, their handles or any shade · double-click a moved shade to release it" : "Standard shades in use · drag the curve or a shade to switch to it"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "studio-slider-fields",
+						children: colorRows.map(({ field, label, min, max, step: step_1, unit }) => /* @__PURE__ */ jsx(SliderField, {
+							label,
+							value: active[field],
+							min,
+							max,
+							step: step_1,
+							display: `${active[field]}${unit}`,
+							disabled: !base,
+							onChange: (value_2) => updateCurve({
+								...active,
+								[field]: value_2
+							})
+						}, field))
+					})
+				]
+			})
+		]
+	});
 }
 //#endregion
 //#region src/configurator/ComponentPreview.tsx
-const ComponentGallery = lazy(() => import("./ComponentGallery-CzKU899_.js"));
+const ComponentGallery = lazy(() => import("./ComponentGallery-C_rXFvUY.js").then((n) => n.n));
 /** Every component, styled by a configuration; the configurator's preview and the App Canvas Components view. */
 function ComponentPreview(t0) {
 	const $ = c(14);
@@ -6213,6 +6707,7 @@ function ThemeVersionControls(t0) {
 	if ($[12] !== themes.versions) {
 		t5 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
 			className: "studio-version-popover",
+			"data-povio-inspector-ignore": "",
 			placement: "bottom start",
 			children: /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
 				className: "studio-version-list",
@@ -6469,6 +6964,7 @@ function ThemeVersionControls(t0) {
 	if ($[73] !== t14 || $[74] !== t15 || $[75] !== t31) {
 		t32 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
 			triggerRef: t14,
+			"data-povio-inspector-ignore": "",
 			placement: "bottom start",
 			offset: 6,
 			className: "studio-version-popover studio-version-dialog",
@@ -6977,7 +7473,7 @@ function PopoutOverlay(t0) {
 	} else t3 = $[5];
 	return t3;
 }
-function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating, onPopout, onDock, popupBlocked, themeVersions }) {
+function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating, onPopout, onDock, popupBlocked, themeVersions, editorOnly }) {
 	const Overlay = poppedOut || floating ? PopoutOverlay : $8b8d26808cb8cb53$export$8948f78d83984c69;
 	const Surface = poppedOut || floating ? "div" : $8b8d26808cb8cb53$export$2b77a92f1a5ad772;
 	const studioWindow = useStudioWindow(windowBounds, !poppedOut);
@@ -6992,7 +7488,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		return () => observer.disconnect();
 	}, [studioWindow.ref]);
 	const inherited = UIConfig.useConfig();
-	const { defaults, draft, setDraft, isOpen, apply, revision, tokenRequest, clearTokenRequest, componentsHosted } = useUIConfiguration();
+	const { defaults, draft, setDraft, isOpen, apply, revision, tokenRequest, clearTokenRequest } = useUIConfiguration();
 	const remembered = memory.current;
 	const [mode, setMode] = useState(remembered.mode ?? "light");
 	const [sizeUnit, setSizeUnit] = useState(remembered.sizeUnit ?? "px");
@@ -7280,7 +7776,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 			onApply: (values) => {
 				for (const [name_16, value_7] of Object.entries(values)) setToken(name_16, value_7);
 			}
-		}, base);
+		}, title);
 	};
 	const tokenGroups = [...groupedEntries.entries()].filter(([key_2, group_0]) => `${key_2} ${group_0.title} ${group_0.entries.map(([name_17]) => `${name_17} ${labelFor(name_17)}`).join(" ")}`.toLowerCase().includes(search.toLowerCase().trim()));
 	const visibleGroups = section === "Typography" ? tokenGroups : tokenGroups.map(([key_3, group_1]) => [key_3, {
@@ -7471,10 +7967,10 @@ 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,
+			"data-editor-only": editorOnly || void 0,
 			children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
 				className: "studio-dialog",
-				"data-compact-preview": compactPreview && !componentsHosted || void 0,
+				"data-compact-preview": compactPreview && !editorOnly || void 0,
 				style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
 				children: [
 					/* @__PURE__ */ jsxs("header", {
@@ -7510,7 +8006,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 										})
 									]
 								}),
-								!componentsHosted && /* @__PURE__ */ jsx("button", {
+								!editorOnly && /* @__PURE__ */ jsx("button", {
 									type: "button",
 									className: "studio-preview-tab",
 									"aria-current": compactPreview ? "page" : void 0,
@@ -7578,25 +8074,37 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 									}), 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", {
+									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_13) => ({
+													...current_13,
+													[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))
+										}),
+										section === "Colors" && !searching && activeSectionTab === semanticPaletteTab && /* @__PURE__ */ jsx("button", {
 											type: "button",
-											role: "tab",
-											"aria-selected": !searching && tab_0 === activeSectionTab,
-											disabled: searching,
-											onClick: () => setSectionTabs((current_13) => ({
-												...current_13,
-												[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]
+											className: "studio-theme-toggle",
+											onClick: () => setMode(mode === "dark" ? "light" : "dark"),
+											"aria-pressed": mode === "dark",
+											"aria-label": mode === "dark" ? "Dark" : "Light",
+											title: "Toggle semantic palette mode",
+											children: mode === "dark" ? /* @__PURE__ */ jsx(Moon, { size: 14 }) : /* @__PURE__ */ jsx(Sun, { size: 14 })
+										}),
+										toggleAllButton
+									]
 								}) : advancedSection ? /* @__PURE__ */ jsx("div", {
 									className: "studio-subtabs-bar",
 									children: /* @__PURE__ */ jsx("div", {
@@ -7873,7 +8381,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 									]
 								})
 							]
-						}), !componentsHosted && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("aside", {
+						}), !editorOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("aside", {
 							ref: previewRef,
 							className: "studio-preview",
 							onScroll: (event_6) => memory.current.previewScroll = event_6.currentTarget.scrollTop,
@@ -8067,23 +8575,24 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating,
 		})
 	});
 }
-/** Where a floating configurator first opens; an editor-only window (components shown by the host) is narrower. */
+/** Where a floating configurator first opens; an editor-only window is narrower. */
 const floatingDefault = {
 	left: 32,
 	top: 80,
 	width: 640,
 	height: 720
 };
-const hostedFloatingWidth = 360;
-function UIConfigurationModal() {
+const editorOnlyFloatingWidth = 360;
+function UIConfigurationModal({ editorOnly: editorOnlyProp = false } = {}) {
 	const { isOpen, revision, floating, componentsHosted } = useUIConfiguration();
+	const editorOnly = editorOnlyProp || componentsHosted;
 	const themeVersions = useThemeVersions();
 	const memory = useRef({});
 	const windowBounds = useRef(null);
 	const floatingBounds = useRef(floatingDefault);
-	if (componentsHosted && floatingBounds.current === floatingDefault) floatingBounds.current = {
+	if (editorOnly && floatingBounds.current === floatingDefault) floatingBounds.current = {
 		...floatingDefault,
-		width: hostedFloatingWidth
+		width: editorOnlyFloatingWidth
 	};
 	const popout = useStudioPopout(isOpen);
 	if (!isOpen) return null;
@@ -8095,7 +8604,8 @@ function UIConfigurationModal() {
 		onPopout: popout.open,
 		onDock: popout.dock,
 		popupBlocked: popout.blocked,
-		themeVersions
+		themeVersions,
+		editorOnly
 	}, revision);
 	return popout.popup ? createPortal(/* @__PURE__ */ jsx(StudioPopoutContext, {
 		value: true,
@@ -8106,4 +8616,450 @@ function UIConfigurationModal() {
 	}), popout.popup.document.body) : floating ? createPortal(content, document.body) : content;
 }
 //#endregion
-export { Moon as _, inspectElement as a, HighlightOverlay as c, useUIConfiguration as d, Trash as f, Pencil as g, Pin as h, resolveUIConfiguration as i, InspectorDetails as l, Plus as m, ColorModeSwitch as n, inspectTokens as o, Sun as p, useRepositoryStorage as r, getBoxHighlights as s, UIConfigurationModal as t, UIConfigurationProvider as u };
+//#region src/app-canvas/CanvasInspector.tsx
+/** Inspect the live iframe DOM using its own, unscaled viewport coordinates. */
+function useCanvasInspector(enabled, generation, isKnown) {
+	const [selection, setSelection] = useState(null);
+	const [measurement, setMeasurement] = useState(null);
+	const [pinned, setPinned] = useState(false);
+	const [highlightKey, setHighlightKey] = useState(null);
+	const hoverFrame = useRef(null);
+	const pending = useRef(null);
+	const clear = useCallback(() => {
+		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+		hoverFrame.current = null;
+		pending.current = null;
+		setSelection(null);
+		setMeasurement(null);
+		setPinned(false);
+		setHighlightKey(null);
+	}, []);
+	useEffect(() => {
+		if (!enabled) clear();
+	}, [enabled, clear]);
+	useEffect(() => {
+		clear();
+	}, [generation, clear]);
+	useEffect(() => () => {
+		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+	}, []);
+	/** Picks the element at a point in `doc`'s own viewport: an iframe's document, or the page itself. */
+	const pickInDocument = useCallback((pageId, doc, x, y, pin) => {
+		if (!enabled || pinned && !pin) return;
+		try {
+			const hit = doc.elementFromPoint(x, y);
+			const element = hit?.closest("button,input,textarea,select,a,label,[role],h1,h2,h3,h4,h5,h6,p") ?? hit;
+			if (!element || element === doc.documentElement || element === doc.body || element.namespaceURI !== "http://www.w3.org/1999/xhtml") return;
+			const target = element;
+			setSelection((current) => current?.element === target ? current : {
+				pageId,
+				element: target
+			});
+			setHighlightKey(null);
+			if (pin) setPinned((current_0) => !(current_0 && selection?.element === target));
+		} catch {
+			clear();
+		}
+	}, [
+		enabled,
+		pinned,
+		selection,
+		clear
+	]);
+	const pick = useCallback((pageId_0, frame, clientX, clientY, pin_0) => {
+		const bounds = frame.getBoundingClientRect();
+		if (!bounds.width || !bounds.height) return;
+		try {
+			const doc_0 = frame.contentDocument;
+			if (!doc_0) return;
+			const x_0 = (clientX - bounds.left) * frame.clientWidth / bounds.width;
+			const y_0 = (clientY - bounds.top) * frame.clientHeight / bounds.height;
+			pickInDocument(pageId_0, doc_0, x_0, y_0, pin_0);
+		} catch {
+			clear();
+		}
+	}, [pickInDocument, clear]);
+	const hover = useCallback((pageId_1, frame_0, x_1, y_1) => {
+		if (!enabled || pinned) return;
+		pending.current = () => pick(pageId_1, frame_0, x_1, y_1, false);
+		if (hoverFrame.current !== null) return;
+		hoverFrame.current = requestAnimationFrame(() => {
+			hoverFrame.current = null;
+			pending.current?.();
+			pending.current = null;
+		});
+	}, [
+		enabled,
+		pinned,
+		pick
+	]);
+	const select = useCallback((pageId_2, frame_1, x_2, y_2) => {
+		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+		hoverFrame.current = null;
+		pending.current = null;
+		pick(pageId_2, frame_1, x_2, y_2, true);
+	}, [pick]);
+	useEffect(() => {
+		if (!enabled || !selection) return;
+		const { element: element_0 } = selection;
+		const doc_1 = element_0.ownerDocument;
+		const owner = doc_1.defaultView;
+		if (!owner) return;
+		let scheduled = null;
+		const measure = () => {
+			scheduled = null;
+			if (!element_0.isConnected) {
+				clear();
+				return;
+			}
+			const rect = element_0.getBoundingClientRect();
+			const snapshot = inspectElement(element_0, isKnown);
+			const details = highlightKey ? getBoxHighlights(element_0, highlightKey) : null;
+			const spacing = highlightKey ? [] : [
+				"padding.top",
+				"padding.right",
+				"padding.bottom",
+				"padding.left",
+				"margin.top",
+				"margin.right",
+				"margin.bottom",
+				"margin.left",
+				"gap.row",
+				"gap.column"
+			].flatMap((key) => {
+				const [kind, side] = key.split(".");
+				const raw = kind === "padding" ? snapshot.box.padding[side] : kind === "margin" ? snapshot.box.margin[side] : snapshot.box.gap[side];
+				if (!(Math.abs(Number.parseFloat(raw)) > 0)) return [];
+				const details_0 = getBoxHighlights(element_0, key);
+				const regions = details_0.regions.filter((region) => region.width > 0 && region.height > 0);
+				return regions.length ? [{
+					key,
+					label: details_0.label,
+					regions
+				}] : [];
+			});
+			if (!highlightKey) {
+				const seen = new Set(spacing.flatMap((item) => item.regions.map((region_0) => `${item.key}:${region_0.left}:${region_0.top}:${region_0.width}:${region_0.height}`)));
+				for (const child of Array.from(element_0.children).slice(0, 80)) {
+					if (child.namespaceURI !== "http://www.w3.org/1999/xhtml" || !child.getClientRects().length) continue;
+					const style = owner.getComputedStyle(child);
+					if (style.display === "none" || style.visibility === "hidden" || /^(absolute|fixed)$/.test(style.position)) continue;
+					for (const side_0 of [
+						"top",
+						"right",
+						"bottom",
+						"left"
+					]) {
+						if (!(Math.abs(Number.parseFloat(style.getPropertyValue(`margin-${side_0}`))) > 0)) continue;
+						const key_0 = `margin.${side_0}`;
+						const details_1 = getBoxHighlights(child, key_0);
+						const regions_0 = details_1.regions.filter((region_1) => {
+							const id = `${key_0}:${region_1.left}:${region_1.top}:${region_1.width}:${region_1.height}`;
+							if (seen.has(id)) return false;
+							seen.add(id);
+							return region_1.width > 0 && region_1.height > 0;
+						});
+						if (regions_0.length) spacing.push({
+							key: key_0,
+							label: details_1.label,
+							regions: regions_0
+						});
+					}
+				}
+			}
+			const next = {
+				snapshot,
+				spacing,
+				outline: {
+					left: rect.left,
+					top: rect.top,
+					width: rect.width,
+					height: rect.height
+				},
+				highlight: details && highlightKey ? {
+					key: highlightKey,
+					...details
+				} : null
+			};
+			setMeasurement((current_1) => JSON.stringify(current_1) === JSON.stringify(next) ? current_1 : next);
+		};
+		const schedule = () => {
+			if (scheduled === null) scheduled = requestAnimationFrame(measure);
+		};
+		const mutations = new MutationObserver(schedule);
+		mutations.observe(doc_1.documentElement, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true
+		});
+		const resize = new ResizeObserver(schedule);
+		resize.observe(element_0);
+		owner.addEventListener("scroll", schedule, true);
+		measure();
+		return () => {
+			mutations.disconnect();
+			resize.disconnect();
+			owner.removeEventListener("scroll", schedule, true);
+			if (scheduled !== null) cancelAnimationFrame(scheduled);
+		};
+	}, [
+		enabled,
+		selection,
+		highlightKey,
+		clear,
+		isKnown
+	]);
+	return {
+		selection,
+		hoverPoint: useCallback((doc_2, x_3, y_3) => {
+			if (!enabled || pinned) return;
+			pending.current = () => pickInDocument("page", doc_2, x_3, y_3, false);
+			if (hoverFrame.current !== null) return;
+			hoverFrame.current = requestAnimationFrame(() => {
+				hoverFrame.current = null;
+				pending.current?.();
+				pending.current = null;
+			});
+		}, [
+			enabled,
+			pinned,
+			pickInDocument
+		]),
+		selectPoint: useCallback((doc_3, x_4, y_4) => {
+			if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+			hoverFrame.current = null;
+			pending.current = null;
+			pickInDocument("page", doc_3, x_4, y_4, true);
+		}, [pickInDocument]),
+		selectElement: (pageId_3, element_1) => {
+			setSelection({
+				pageId: pageId_3,
+				element: element_1
+			});
+			setPinned(true);
+			setHighlightKey(null);
+		},
+		measurement,
+		pinned,
+		hover,
+		select,
+		clear,
+		highlight: setHighlightKey,
+		togglePin: () => setPinned((value) => !value)
+	};
+}
+function CanvasInspectorPanel(t0) {
+	const $ = c(24);
+	const { inspector, onClose, onSelectToken, className: t1, emptyHint: t2 } = t0;
+	const className = t1 === void 0 ? "povio-canvas-inspector" : t1;
+	const emptyHint = t2 === void 0 ? "Inspect a live page to see its padding, margins, borders, radii and gaps." : t2;
+	const t3 = `studio-inspector-panel ${className}`;
+	let t4;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("strong", { children: "Inspector view" });
+		$[0] = t4;
+	} else t4 = $[0];
+	const t5 = !inspector.selection;
+	let t6;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Pin, { size: 14 });
+		$[1] = t6;
+	} else t6 = $[1];
+	let t7;
+	if ($[2] !== inspector.pinned || $[3] !== inspector.togglePin || $[4] !== t5) {
+		t7 = /* @__PURE__ */ jsx("button", {
+			"aria-label": "Pin inspected element",
+			"aria-pressed": inspector.pinned,
+			disabled: t5,
+			onClick: inspector.togglePin,
+			children: t6
+		});
+		$[2] = inspector.pinned;
+		$[3] = inspector.togglePin;
+		$[4] = t5;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(X, { size: 15 });
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] !== onClose) {
+		t9 = /* @__PURE__ */ jsx("button", {
+			"aria-label": "Close inspector view",
+			onClick: onClose,
+			children: t8
+		});
+		$[7] = onClose;
+		$[8] = t9;
+	} else t9 = $[8];
+	let t10;
+	if ($[9] !== t7 || $[10] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("header", { children: [
+			t4,
+			t7,
+			t9
+		] });
+		$[9] = t7;
+		$[10] = t9;
+		$[11] = t10;
+	} else t10 = $[11];
+	const t11 = inspector.pinned ? "Selection pinned · click it again to unpin" : "Hover a component · click to pin";
+	let t12;
+	if ($[12] !== t11) {
+		t12 = /* @__PURE__ */ jsx("p", {
+			className: "povio-canvas-inspect-hint",
+			children: t11
+		});
+		$[12] = t11;
+		$[13] = t12;
+	} else t12 = $[13];
+	let t13;
+	if ($[14] !== emptyHint || $[15] !== inspector.highlight || $[16] !== inspector.measurement || $[17] !== onSelectToken) {
+		t13 = inspector.measurement ? /* @__PURE__ */ jsx(InspectorDetails, {
+			snapshot: inspector.measurement.snapshot,
+			onSelect: onSelectToken,
+			onHighlight: inspector.highlight
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "povio-canvas-inspect-hint",
+			children: emptyHint
+		});
+		$[14] = emptyHint;
+		$[15] = inspector.highlight;
+		$[16] = inspector.measurement;
+		$[17] = onSelectToken;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== t10 || $[20] !== t12 || $[21] !== t13 || $[22] !== t3) {
+		t14 = /* @__PURE__ */ jsxs("aside", {
+			className: t3,
+			"data-povio-inspector-ignore": "",
+			"aria-label": "Inspector view",
+			children: [
+				t10,
+				t12,
+				t13
+			]
+		});
+		$[19] = t10;
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t3;
+		$[23] = t14;
+	} else t14 = $[23];
+	return t14;
+}
+function CanvasInspectionOverlay(t0) {
+	const $ = c(10);
+	const { measurement, width, className: t1 } = t0;
+	const className = t1 === void 0 ? "povio-canvas-inspection-overlay" : t1;
+	let t2;
+	if ($[0] !== measurement.outline) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "studio-hover-outline",
+			style: measurement.outline
+		});
+		$[0] = measurement.outline;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== measurement.highlight || $[3] !== measurement.spacing || $[4] !== width) {
+		t3 = measurement.highlight ? /* @__PURE__ */ jsx(HighlightOverlay, {
+			highlight: measurement.highlight,
+			width
+		}) : measurement.spacing.map((highlight) => /* @__PURE__ */ jsxs("div", {
+			className: "povio-canvas-auto-spacing",
+			children: [/* @__PURE__ */ jsx(HighlightOverlay, {
+				highlight,
+				width
+			}), highlight.regions.map((region) => /* @__PURE__ */ jsx("span", {
+				className: "povio-canvas-spacing-value",
+				style: {
+					left: region.left + region.width / 2,
+					top: region.top + region.height / 2
+				},
+				children: highlight.label.split(": ")[1]
+			}, `${region.left}:${region.top}:${region.width}:${region.height}`))]
+		}, `${highlight.key}:${highlight.label}:${highlight.regions[0]?.left}:${highlight.regions[0]?.top}`));
+		$[2] = measurement.highlight;
+		$[3] = measurement.spacing;
+		$[4] = width;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== className || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className,
+			"aria-hidden": "true",
+			children: [t2, t3]
+		});
+		$[6] = className;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+/** Temporary layer hover never replaces the pinned inspector selection. */
+function CanvasLayerHighlight(t0) {
+	const $ = c(5);
+	const { element } = t0;
+	const [bounds, setBounds] = useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== element) {
+		t1 = () => {
+			const owner = element.ownerDocument.defaultView;
+			const measure = () => {
+				if (!element.isConnected) {
+					setBounds(null);
+					return;
+				}
+				const rect = element.getBoundingClientRect();
+				setBounds({
+					left: rect.left,
+					top: rect.top,
+					width: rect.width,
+					height: rect.height
+				});
+			};
+			measure();
+			const observer = new ResizeObserver(measure);
+			observer.observe(element);
+			owner?.addEventListener("scroll", measure, true);
+			owner?.addEventListener("resize", measure);
+			return () => {
+				observer.disconnect();
+				owner?.removeEventListener("scroll", measure, true);
+				owner?.removeEventListener("resize", measure);
+			};
+		};
+		t2 = [element];
+		$[0] = element;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[3] !== bounds) {
+		t3 = bounds ? /* @__PURE__ */ jsx("div", {
+			className: "povio-canvas-inspection-overlay povio-canvas-layer-highlight",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "studio-hover-outline",
+				style: bounds
+			})
+		}) : null;
+		$[3] = bounds;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+//#endregion
+export { Moon as _, UIConfigurationModal as a, resolveUIConfiguration as c, Trash as d, Sun as f, Pencil as g, Plus as h, useCanvasInspector as i, UIConfigurationProvider as l, ScanLine as m, CanvasInspectorPanel as n, ColorModeSwitch as o, Settings2 as p, CanvasLayerHighlight as r, useRepositoryStorage as s, CanvasInspectionOverlay as t, useUIConfiguration as u, Frame as v };