@povio/ui 5.0.0-rc.5 → 5.0.0-rc.7

package/dist/config/ui-configurator.js

@@ -3,10 +3,12 @@ import { t as UIConfig } from "../uiConfig.context-BS3r_kTS.js";
 import { t as Check } from "../check-DYMBkp_Z.js";
 import { t as ChevronDown } from "../chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "../chevron-right-3nKJR5Bb.js";
+import { a as tableHeaderTextDefinition, c as GripVertical, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "../table.cva-D5oQ-QvA.js";
 import { t as Info } from "../info-iUmX3uDk.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition, u as Minus } from "../CheckboxCheckmark-CpC3wlMs.js";
 import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "../selectDesktop.cva-CHAMxhfO.js";
 import { t as Upload } from "../upload-CXU83BJ4.js";
+import { t as X } from "../x-B6vfz8Ps.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
 import { n as StyleMergeUtils, r as cva, t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
 import { c as $7230ffa83bc0c2cf$export$ef03459518577ad4, i as $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8, l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "../utils-Czcqspm7.js";
@@ -44,11 +46,11 @@ import { a as stepperSeparatorDefinition, i as stepperNumberDefinition, n as ste
 import { i as dialogOverlayDefinition, n as dialogMainDefinition, t as dialogContentDefinition } from "../dialog.cva-COhDZaVl.js";
 import { i as alertDefinition, n as statusIconDefinition, r as statusSeparatorDefinition, t as Alert } from "../Alert-CnvEb1D_.js";
 import { a as toastDefinition, i as toastContainerDefinition } from "../toast.cva-C_L_RffH.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "../table.cva-DlMT-zLD.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, _ as parseThemeCss, 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, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { n as splitVariants, t as inspectTokens } from "../token-classes-Bfcx0get.js";
+import $ahdqC$react, { 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";
@@ -56,10 +58,12 @@ import { CollectionBuilder } from "react-aria/CollectionBuilder";
 import { filterDOMProps } from "react-aria/filterDOMProps";
 import { useFocusRing } from "react-aria/useFocusRing";
 import { createHideableComponent } from "react-aria/private/collections/Hidden";
+import { createPortal } from "react-dom";
 import "react-aria/useLocalizedStringFormatter";
 import "react-aria/useListFormatter";
 import { HiddenSelect, useSelect } from "react-aria/useSelect";
 import { useSelectState } from "react-stately/useSelectState";
+import { UNSAFE_PortalProvider } from "react-aria";
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/arrow-down-to-line.mjs
 /**
 * @license lucide-react v1.43.0 - ISC
@@ -67,7 +71,7 @@ import { useSelectState } from "react-stately/useSelectState";
 * 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$9 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -85,8 +89,8 @@ const __iconData$5 = {
 		}]
 	]
 };
-__iconData$5.node;
-const ArrowDownToLine = createLucideIcon(__iconData$5);
+__iconData$9.node;
+const ArrowDownToLine = createLucideIcon(__iconData$9);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -95,7 +99,7 @@ const ArrowDownToLine = 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$8 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -106,8 +110,36 @@ const __iconData$4 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$4.node;
-const ChevronsUpDown = createLucideIcon(__iconData$4);
+__iconData$8.node;
+const ChevronsUpDown = createLucideIcon(__iconData$8);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/external-link.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$7 = {
+	name: "external-link",
+	size: 24,
+	node: [
+		["path", {
+			d: "M15 3h6v6",
+			key: "1q9fwt"
+		}],
+		["path", {
+			d: "M10 14 21 3",
+			key: "gplh6r"
+		}],
+		["path", {
+			d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",
+			key: "a6xqqp"
+		}]
+	]
+};
+__iconData$7.node;
+const ExternalLink = createLucideIcon(__iconData$7);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.mjs
 /**
@@ -116,7 +148,7 @@ const ChevronsUpDown = 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$6 = {
 	name: "moon",
 	size: 24,
 	node: [["path", {
@@ -124,8 +156,54 @@ const __iconData$3 = {
 		key: "kfwtm"
 	}]]
 };
-__iconData$3.node;
-const Moon = createLucideIcon(__iconData$3);
+__iconData$6.node;
+const Moon = createLucideIcon(__iconData$6);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-top.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$5 = {
+	name: "panel-top",
+	size: 24,
+	node: [["rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2",
+		key: "afitv7"
+	}], ["path", {
+		d: "M3 9h18",
+		key: "1pudct"
+	}]]
+};
+__iconData$5.node;
+const PanelTop = createLucideIcon(__iconData$5);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pin.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$4 = {
+	name: "pin",
+	size: 24,
+	node: [["path", {
+		d: "M12 17v5",
+		key: "bb1du9"
+	}], ["path", {
+		d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
+		key: "1nkz8b"
+	}]]
+};
+__iconData$4.node;
+const Pin = createLucideIcon(__iconData$4);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/plus.mjs
 /**
@@ -134,7 +212,7 @@ const Moon = 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$3 = {
 	name: "plus",
 	size: 24,
 	node: [["path", {
@@ -145,8 +223,8 @@ const __iconData$2 = {
 		key: "s699le"
 	}]]
 };
-__iconData$2.node;
-const Plus = createLucideIcon(__iconData$2);
+__iconData$3.node;
+const Plus = createLucideIcon(__iconData$3);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rotate-ccw.mjs
 /**
@@ -155,7 +233,7 @@ const Plus = createLucideIcon(__iconData$2);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$1 = {
+const __iconData$2 = {
 	name: "rotate-ccw",
 	size: 24,
 	node: [["path", {
@@ -166,8 +244,60 @@ const __iconData$1 = {
 		key: "1xhq8a"
 	}]]
 };
+__iconData$2.node;
+const RotateCcw = createLucideIcon(__iconData$2);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sliders-horizontal.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$1 = {
+	name: "sliders-horizontal",
+	size: 24,
+	node: [
+		["path", {
+			d: "M10 5H3",
+			key: "1qgfaw"
+		}],
+		["path", {
+			d: "M12 19H3",
+			key: "yhmn1j"
+		}],
+		["path", {
+			d: "M14 3v4",
+			key: "1sua03"
+		}],
+		["path", {
+			d: "M16 17v4",
+			key: "1q0r14"
+		}],
+		["path", {
+			d: "M21 12h-9",
+			key: "1o4lsq"
+		}],
+		["path", {
+			d: "M21 19h-5",
+			key: "1rlt1p"
+		}],
+		["path", {
+			d: "M21 5h-7",
+			key: "1oszz2"
+		}],
+		["path", {
+			d: "M8 10v4",
+			key: "tgpxqk"
+		}],
+		["path", {
+			d: "M8 12H3",
+			key: "a7s4jb"
+		}]
+	]
+};
 __iconData$1.node;
-const RotateCcw = createLucideIcon(__iconData$1);
+const SlidersHorizontal = createLucideIcon(__iconData$1);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sun.mjs
 /**
@@ -492,7 +622,7 @@ function UIConfigurationProvider(t0) {
 	if ($[0] !== applied) {
 		t1 = () => {
 			setDraft(structuredClone(applied));
-			setRevision(_temp$6);
+			setRevision(_temp$7);
 			setOpen(true);
 		};
 		$[0] = applied;
@@ -602,7 +732,7 @@ function UIConfigurationProvider(t0) {
 	} else t10 = $[33];
 	return t10;
 }
-function _temp$6(value) {
+function _temp$7(value) {
 	return value + 1;
 }
 function useUIConfiguration() {
@@ -611,6 +741,1468 @@ function useUIConfiguration() {
 	return context;
 }
 //#endregion
+//#region src/configurator/inspector/HighlightOverlay.tsx
+const arcs = {
+	topLeft: "M0 100 A100 100 0 0 1 100 0",
+	topRight: "M0 0 A100 100 0 0 1 100 100",
+	bottomRight: "M100 0 A100 100 0 0 1 0 100",
+	bottomLeft: "M100 100 A100 100 0 0 1 0 0"
+};
+function HighlightOverlay(t0) {
+	const $ = c(17);
+	const { highlight, width } = t0;
+	const first = highlight.regions[0];
+	let t1;
+	if ($[0] !== highlight.key) {
+		t1 = highlight.key.split(".");
+		$[0] = highlight.key;
+		$[1] = t1;
+	} else t1 = $[1];
+	const kind = t1[0];
+	const t2 = highlight.key;
+	let t3;
+	if ($[2] !== highlight.regions || $[3] !== kind) {
+		let t4;
+		if ($[5] !== kind) {
+			t4 = (region) => /* @__PURE__ */ jsx("div", {
+				className: `studio-measure-region is-${kind}${region.line ? ` is-${region.line}` : ""}${region.corner ? " is-corner" : ""}`,
+				style: {
+					left: region.left,
+					top: region.top,
+					width: region.width,
+					height: region.height
+				},
+				children: region.corner && /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 100 100",
+					preserveAspectRatio: "none",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", {
+						d: arcs[region.corner],
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						vectorEffect: "non-scaling-stroke"
+					})
+				})
+			}, `${region.left}:${region.top}:${region.width}:${region.height}`);
+			$[5] = kind;
+			$[6] = t4;
+		} else t4 = $[6];
+		t3 = highlight.regions.map(t4);
+		$[2] = highlight.regions;
+		$[3] = kind;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = Math.max(4, Math.min(first?.left ?? 4, width - 220));
+	const t5 = Math.max(4, (first?.top ?? 26) - 22);
+	let t6;
+	if ($[7] !== t4 || $[8] !== t5) {
+		t6 = {
+			left: t4,
+			top: t5
+		};
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== highlight.label || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: "studio-measure-label",
+			style: t6,
+			children: highlight.label
+		});
+		$[10] = highlight.label;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== highlight.key || $[14] !== t3 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-measure-regions",
+			"data-property": t2,
+			children: [t3, t7]
+		});
+		$[13] = highlight.key;
+		$[14] = t3;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
+}
+//#endregion
+//#region src/configurator/inspector/box-highlights.ts
+const sides = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const corners = [
+	"topLeft",
+	"topRight",
+	"bottomRight",
+	"bottomLeft"
+];
+const numeric = (value) => Number.parseFloat(value) || 0;
+const formatted = (value) => String(Math.round(value * 100) / 100);
+/** Read-only geometry in the inspected element's viewport (including pop-out documents). */
+function getBoxHighlights(element, key) {
+	const view = element.ownerDocument.defaultView;
+	if (!view) return {
+		regions: [],
+		label: ""
+	};
+	const style = view.getComputedStyle(element);
+	const rect = element.getBoundingClientRect();
+	const sx = element.offsetWidth ? rect.width / element.offsetWidth : 1;
+	const sy = element.offsetHeight ? rect.height / element.offsetHeight : 1;
+	const read = (name) => style.getPropertyValue(name);
+	const scale = (side) => side === "left" || side === "right" ? sx : sy;
+	const values = (prefix, suffix = "") => Object.fromEntries(sides.map((side) => [side, numeric(read(`${prefix}-${side}${suffix}`)) * scale(side)]));
+	const border = values("border", "-width");
+	const padding = values("padding");
+	const inner = {
+		left: rect.left + border.left,
+		top: rect.top + border.top,
+		width: Math.max(0, rect.width - border.left - border.right),
+		height: Math.max(0, rect.height - border.top - border.bottom)
+	};
+	const content = {
+		left: inner.left + padding.left,
+		top: inner.top + padding.top,
+		width: Math.max(0, inner.width - padding.left - padding.right),
+		height: Math.max(0, inner.height - padding.top - padding.bottom)
+	};
+	const [kind, part] = key.split(".");
+	let regions = [];
+	let value = "";
+	if (kind === "width" || kind === "height") {
+		value = formatted(content[kind] / (kind === "width" ? sx : sy));
+		regions = [{
+			left: content.left,
+			top: content.top,
+			width: kind === "width" ? content.width : 1,
+			height: kind === "height" ? content.height : 1,
+			line: kind === "width" ? "horizontal" : "vertical"
+		}];
+	} else if (kind === "radius") {
+		const radii = corners.map((corner) => {
+			const cssCorner = corner.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+			const components = read(`border-${cssCorner}-radius`).trim().split(/\s+/);
+			const resolve = (raw, dimension, factor) => raw.endsWith("%") ? numeric(raw) / 100 * dimension : numeric(raw) * factor;
+			return [resolve(components[0] || "0", rect.width, sx), resolve(components[1] || components[0] || "0", rect.height, sy)];
+		});
+		const factor = Math.min(1, rect.width / (radii[0][0] + radii[1][0] || 1), rect.width / (radii[3][0] + radii[2][0] || 1), rect.height / (radii[0][1] + radii[3][1] || 1), rect.height / (radii[1][1] + radii[2][1] || 1));
+		const corner = part;
+		const radius = radii[corners.indexOf(corner)];
+		const width = Math.max(1, radius[0] * factor);
+		const height = Math.max(1, radius[1] * factor);
+		value = `${formatted(radius[0] * factor / sx)} × ${formatted(radius[1] * factor / sy)}`;
+		regions = [{
+			left: rect.left + (corner.endsWith("Right") ? rect.width - width : 0),
+			top: rect.top + (corner.startsWith("bottom") ? rect.height - height : 0),
+			width,
+			height,
+			corner
+		}];
+	} else if (kind === "gap") {
+		const row = part === "row";
+		const rawGap = read(`${part}-gap`);
+		const gap = rawGap.endsWith("%") ? numeric(rawGap) / 100 * (row ? content.height / sy : content.width / sx) : numeric(rawGap);
+		const size = gap * (row ? sy : sx);
+		value = formatted(gap);
+		if (size > 0 && /^(inline-)?(flex|grid)$/.test(read("display"))) {
+			const children = Array.from(element.children).slice(0, 80).flatMap((child) => {
+				const childStyle = view.getComputedStyle(child);
+				const box = child.getBoundingClientRect();
+				return childStyle.display === "none" || childStyle.visibility === "hidden" || /^(absolute|fixed)$/.test(childStyle.position) || !box.width || !box.height ? [] : [box];
+			}).sort((a, b) => row ? a.top - b.top : a.left - b.left);
+			const seen = /* @__PURE__ */ new Set();
+			for (let i = 0; i < children.length; i++) {
+				const a = children[i];
+				for (let j = i + 1; j < children.length; j++) {
+					const b = children[j];
+					const start = row ? a.bottom : a.right;
+					const end = row ? b.top : b.left;
+					const crossStart = Math.max(row ? a.left : a.top, row ? b.left : b.top, row ? content.left : content.top);
+					const crossEnd = Math.min(row ? a.right : a.bottom, row ? b.right : b.bottom, row ? content.left + content.width : content.top + content.height);
+					if (end - start < size - .5 || crossEnd <= crossStart) continue;
+					if (children.some((c, index) => index !== i && index !== j && (row ? c.top >= start && c.bottom <= end && c.right > crossStart && c.left < crossEnd : c.left >= start && c.right <= end && c.bottom > crossStart && c.top < crossEnd))) continue;
+					const axisStart = Math.max((start + end - size) / 2, row ? content.top : content.left);
+					const axisEnd = Math.min((start + end + size) / 2, row ? content.top + content.height : content.left + content.width);
+					if (axisEnd <= axisStart) continue;
+					const region = row ? {
+						left: crossStart,
+						top: axisStart,
+						width: crossEnd - crossStart,
+						height: axisEnd - axisStart
+					} : {
+						left: axisStart,
+						top: crossStart,
+						width: axisEnd - axisStart,
+						height: crossEnd - crossStart
+					};
+					const id = Object.values(region).map(formatted).join(",");
+					if (!seen.has(id)) {
+						seen.add(id);
+						regions.push(region);
+					}
+				}
+			}
+		}
+	} else {
+		const side = part;
+		const horizontal = side === "top" || side === "bottom";
+		const raw = read(kind === "position" ? side : `${kind}-${side}${kind === "border" ? "-width" : ""}`);
+		const amount = numeric(raw) * scale(side);
+		value = formatted(numeric(raw));
+		const base = kind === "padding" ? inner : rect;
+		const outward = kind === "margin" || kind === "position";
+		const thickness = Math.max(1, Math.abs(amount));
+		const positiveEdge = side === "bottom" || side === "right";
+		const edge = horizontal ? base.top + (positiveEdge ? base.height : 0) : base.left + (positiveEdge ? base.width : 0);
+		const offset = outward ? positiveEdge ? amount < 0 ? -thickness : 0 : amount < 0 ? 0 : -thickness : positiveEdge ? -thickness : 0;
+		regions = [{
+			left: horizontal ? base.left : edge + offset,
+			top: horizontal ? edge + offset : base.top,
+			width: horizontal ? base.width : thickness,
+			height: horizontal ? thickness : base.height
+		}];
+		if (kind === "position") {
+			if (raw === "auto" || read("position") === "static") regions = [];
+			else if (read("position") === "absolute" || read("position") === "fixed") {
+				const parent = element.offsetParent;
+				const parentRect = parent?.getBoundingClientRect();
+				const parentStyle = parent ? view.getComputedStyle(parent) : null;
+				const parentScale = parent && "offsetWidth" in parent && parent.offsetWidth ? parentRect.width / Number(parent.offsetWidth) : 1;
+				const parentScaleY = parent && "offsetHeight" in parent && parent.offsetHeight ? parentRect.height / Number(parent.offsetHeight) : 1;
+				const referenceEdge = (parentRect ? {
+					left: parentRect.left + numeric(parentStyle.getPropertyValue("border-left-width")) * parentScale,
+					right: parentRect.right - numeric(parentStyle.getPropertyValue("border-right-width")) * parentScale,
+					top: parentRect.top + numeric(parentStyle.getPropertyValue("border-top-width")) * parentScaleY,
+					bottom: parentRect.bottom - numeric(parentStyle.getPropertyValue("border-bottom-width")) * parentScaleY
+				} : {
+					left: 0,
+					top: 0,
+					right: view.innerWidth,
+					bottom: view.innerHeight
+				})[side];
+				const targetEdge = edge + (positiveEdge ? 1 : -1) * numeric(read(`margin-${side}`)) * scale(side);
+				const start = Math.min(referenceEdge, targetEdge);
+				const length = Math.max(1, Math.abs(referenceEdge - targetEdge));
+				regions = [{
+					left: horizontal ? rect.left : start,
+					top: horizontal ? start : rect.top,
+					width: horizontal ? rect.width : length,
+					height: horizontal ? length : rect.height
+				}];
+			}
+		}
+	}
+	const name = key.replace(".", " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+	return {
+		regions,
+		label: `${name}: ${value} px`
+	};
+}
+//#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*\)$/);
+	if (!rgb) return value;
+	return `#${rgb.slice(1).map((channel) => Number(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+function resolveToken(style, name, seen = /* @__PURE__ */ new Set()) {
+	if (seen.has(name)) return "";
+	seen.add(name);
+	const value = style.getPropertyValue(name).trim();
+	const reference = value.match(/^var\((--[\w-]+)\)$/);
+	return reference ? resolveToken(style, reference[1], seen) : value;
+}
+/** Read-only inspection; always use the element's window, including detached previews. */
+function inspectElement(element, isKnown) {
+	const view = element.ownerDocument.defaultView;
+	if (!view) throw new Error("The inspected element has no document window.");
+	const style = view.getComputedStyle(element);
+	const rootFontSize = Number.parseFloat(view.getComputedStyle(element.ownerDocument.documentElement).fontSize) || 16;
+	const bounds = element.getBoundingClientRect();
+	const sides = [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	];
+	const readSides = (prefix, suffix = "") => Object.fromEntries(sides.map((side) => [side, style.getPropertyValue(`${prefix}${side}${suffix}`) || "0px"]));
+	const padding = readSides("padding-");
+	const border = readSides("border-", "-width");
+	const margin = readSides("margin-");
+	const contentDimension = (axis) => {
+		const value = style.getPropertyValue(axis);
+		const dimension = Number.parseFloat(value);
+		const hasPixelDimension = /^\d+(?:\.\d+)?px$/.test(value);
+		if (hasPixelDimension && style.getPropertyValue("box-sizing") !== "border-box") return dimension;
+		const inset = (axis === "width" ? ["left", "right"] : ["top", "bottom"]).reduce((total, side) => total + (Number.parseFloat(padding[side]) || 0) + (Number.parseFloat(border[side]) || 0), 0);
+		return Math.max(0, (hasPixelDimension ? dimension : bounds[axis]) - inset);
+	};
+	const box = {
+		content: {
+			width: contentDimension("width"),
+			height: contentDimension("height")
+		},
+		padding,
+		border,
+		margin,
+		radius: {
+			topLeft: style.getPropertyValue("border-top-left-radius") || "0px",
+			topRight: style.getPropertyValue("border-top-right-radius") || "0px",
+			bottomRight: style.getPropertyValue("border-bottom-right-radius") || "0px",
+			bottomLeft: style.getPropertyValue("border-bottom-left-radius") || "0px"
+		},
+		gap: {
+			row: style.getPropertyValue("row-gap") || "normal",
+			column: style.getPropertyValue("column-gap") || "normal"
+		}
+	};
+	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 spacing = inspectTokens(plainClasses.join(" "), isKnown);
+	const candidates = (prefix, namespaces) => plainClasses.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 variantsAffect = (prefixes) => classes.some((raw) => {
+		const { variants, utility } = splitVariants(raw);
+		return variants.length > 0 && prefixes.some((prefix) => utility.replace(/^!/, "").startsWith(`${prefix}-`));
+	});
+	const equivalent = (value, computed, property) => {
+		if (!value) return false;
+		if (property.includes("color")) {
+			if (value.match(/^\d+(?:\.\d+)?\s+\d+(?:\.\d+)?\s+\d+(?:\.\d+)?$/)) value = `rgb(${value})`;
+			return readableColor(value).toLowerCase() === readableColor(computed).toLowerCase();
+		}
+		const length = value.match(/^(-?\d+(?:\.\d+)?)(rem|px|em)$/);
+		if (length && computed.endsWith("px")) {
+			let factor = 1;
+			if (length[2] === "rem") factor = rootFontSize;
+			if (length[2] === "em") factor = Number.parseFloat(style.fontSize);
+			return Math.abs(Number(length[1]) * factor - Number.parseFloat(computed)) < .02;
+		}
+		return value.replace(/["']/g, "").replace(/\s+/g, " ") === computed.replace(/["']/g, "").replace(/\s+/g, " ");
+	};
+	const property = (label, css, tokens = [], prefixes = []) => {
+		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 isColor = css.includes("color");
+		return {
+			label,
+			value: isColor ? readableColor(computed) : computed,
+			...token ? { token } : {},
+			...isColor ? { color: computed } : {}
+		};
+	};
+	const tag = element.tagName.toLowerCase();
+	const role = element.getAttribute("role");
+	const context = element.closest("[data-inspector-name]")?.getAttribute("data-inspector-name") || element.closest(".studio-gallery-card")?.querySelector(".studio-gallery-card-title")?.textContent?.trim();
+	const description = (element.getAttribute("aria-label") || element.innerText || element.textContent || "").trim().replace(/\s+/g, " ").slice(0, 100);
+	const name = context || role || tag;
+	const paddingPrefixes = [
+		"p",
+		"px",
+		"py",
+		"pt",
+		"pr",
+		"pb",
+		"pl",
+		"ps",
+		"pe"
+	];
+	const layout = [
+		{
+			label: "Width",
+			value: style.getPropertyValue("width") || `${bounds.width}px`
+		},
+		{
+			label: "Height",
+			value: style.getPropertyValue("height") || `${bounds.height}px`
+		},
+		property("Display", "display"),
+		property("Position", "position"),
+		...sides.map((side) => property(`Padding ${side}`, `padding-${side}`, [spacing.padding[side]], paddingPrefixes)),
+		...sides.map((side) => property(`Margin ${side}`, `margin-${side}`)),
+		property("Row gap", "row-gap", [spacing.gap.row], ["gap"]),
+		property("Column gap", "column-gap", [spacing.gap.column], ["gap"]),
+		property("Radius", "border-radius", [spacing.radius], ["rounded"]),
+		...sides.map((side) => property(`Border ${side} width`, `border-${side}-width`))
+	];
+	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("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("Opacity", "opacity"),
+		property("Shadow", "box-shadow")
+	];
+	const isZero = (value) => value.split(/\s+/).every((part) => /^-?0(?:\.0+)?(?:px|rem|em|%)?$/.test(part));
+	const visibleProperty = (row) => {
+		if (row.label === "Width" || row.label === "Height" || row.token) return true;
+		const value = row.value.trim();
+		if (!value) return false;
+		if (/^(Padding|Margin|Border .* width|Row gap|Column gap|Radius)/.test(row.label) && (isZero(value) || value === "normal")) return false;
+		if (row.label === "Position" && value === "static") return false;
+		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;
+		if (row.label === "Line height" && value === "normal") return false;
+		if (row.label === "Letter spacing" && (value === "normal" || isZero(value))) return false;
+		if (row.label === "Alignment" && [
+			"normal",
+			"start",
+			"left"
+		].includes(value)) return false;
+		if (row.label === "Weight" && ["400", "normal"].includes(value)) return false;
+		return true;
+	};
+	return {
+		name,
+		display: style.display,
+		tag,
+		description,
+		width: bounds.width,
+		height: bounds.height,
+		box,
+		groups: [
+			{
+				name: "Layout",
+				properties: layout
+			},
+			{
+				name: "Typography",
+				properties: typography
+			},
+			{
+				name: "Appearance",
+				properties: appearance
+			}
+		].map((group) => ({
+			name: group.name,
+			properties: group.properties.filter(visibleProperty)
+		})).filter((group) => group.properties.length > 0)
+	};
+}
+//#endregion
+//#region src/configurator/inspector/PreviewInspector.tsx
+/** Read the real element underneath the inert gallery's stretched zoom button. */
+function elementAtPoint(root, x, y) {
+	const direct = root.ownerDocument.elementsFromPoint(x, y).find((element) => root.contains(element));
+	if (!direct || direct.closest(".studio-inspect-layer")) return null;
+	const demo = direct.closest(".studio-gallery-card")?.querySelector(".studio-gallery-demo");
+	let hit = direct;
+	if (demo) {
+		const found = [demo, ...demo.querySelectorAll("*")].reverse().find((element) => {
+			if (element.namespaceURI !== "http://www.w3.org/1999/xhtml" || element.closest(".sr-only")) return false;
+			const rect = element.getBoundingClientRect();
+			return rect.width > 1 && rect.height > 1 && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+		});
+		if (!found) return null;
+		hit = found;
+	}
+	const semantic = hit.closest("button,input,textarea,select,a,label,[role],h1,h2,h3,h4,h5,h6,p");
+	if (semantic && root.contains(semantic) && (!demo || demo.contains(semantic))) hit = semantic;
+	if (hit.namespaceURI !== "http://www.w3.org/1999/xhtml" || hit === root || hit.classList.contains("studio-gallery-card-hit")) return null;
+	return hit;
+}
+function PreviewInspector({ children, revision, isKnown, onSelect, onScroll }) {
+	const selectionDescriptionId = useId();
+	const rootRef = useRef(null);
+	const targetRef = useRef(null);
+	const frameRef = useRef(null);
+	const pendingPoint = useRef(null);
+	const pinnedRef = useRef(false);
+	const [pinned, setPinned] = useState(false);
+	const [inspectMode, setInspectMode] = useState(true);
+	const [snapshot, setSnapshot] = useState(null);
+	const [outline, setOutline] = useState(null);
+	const highlightKey = useRef(null);
+	const [highlight, setHighlight] = useState(null);
+	const measure = useCallback(() => {
+		const root = rootRef.current;
+		const target = targetRef.current;
+		if (!root || !target?.isConnected || !root.contains(target)) {
+			targetRef.current = null;
+			pinnedRef.current = false;
+			setPinned(false);
+			setSnapshot(null);
+			setOutline(null);
+			highlightKey.current = null;
+			setHighlight(null);
+			return;
+		}
+		const rect = target.getBoundingClientRect();
+		if (!rect.width || !rect.height) {
+			setSnapshot(null);
+			setOutline(null);
+			highlightKey.current = null;
+			setHighlight(null);
+			return;
+		}
+		const origin = root.getBoundingClientRect();
+		const next = inspectElement(target, isKnown);
+		setSnapshot((current) => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+		setOutline({
+			left: rect.left - origin.left,
+			top: rect.top - origin.top,
+			width: rect.width,
+			height: rect.height
+		});
+		if (highlightKey.current) {
+			const details = getBoxHighlights(target, highlightKey.current);
+			setHighlight({
+				key: highlightKey.current,
+				label: details.label,
+				regions: details.regions.map((region) => ({
+					width: region.width,
+					height: region.height,
+					corner: region.corner,
+					line: region.line,
+					left: region.left - origin.left,
+					top: region.top - origin.top
+				}))
+			});
+		}
+	}, [isKnown]);
+	const schedule = useCallback(() => {
+		const owner = rootRef.current?.ownerDocument.defaultView;
+		if (!owner || frameRef.current !== null) return;
+		frameRef.current = owner.requestAnimationFrame(() => {
+			frameRef.current = null;
+			const root_0 = rootRef.current;
+			const point = pendingPoint.current;
+			pendingPoint.current = null;
+			if (root_0 && point && !pinnedRef.current) {
+				const hit = elementAtPoint(root_0, point.x, point.y);
+				if (hit) targetRef.current = hit;
+			}
+			measure();
+		});
+	}, [measure]);
+	useLayoutEffect(schedule, [schedule, revision]);
+	useEffect(() => {
+		const root_1 = rootRef.current;
+		const owner_0 = root_1?.ownerDocument.defaultView;
+		if (!root_1 || !owner_0) return;
+		const observer = new ResizeObserver(schedule);
+		observer.observe(root_1);
+		const modal = root_1.closest(".studio-modal");
+		if (modal) observer.observe(modal);
+		const mutations = new MutationObserver((records) => {
+			if (records.some((record) => {
+				return !(record.target.nodeType === 1 ? record.target : record.target.parentElement)?.closest(".studio-hover-outline-layer");
+			})) schedule();
+		});
+		mutations.observe(root_1, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true
+		});
+		owner_0.addEventListener("scroll", schedule, true);
+		owner_0.addEventListener("resize", schedule);
+		return () => {
+			observer.disconnect();
+			mutations.disconnect();
+			owner_0.removeEventListener("scroll", schedule, true);
+			owner_0.removeEventListener("resize", schedule);
+			if (frameRef.current !== null) owner_0.cancelAnimationFrame(frameRef.current);
+			frameRef.current = null;
+		};
+	}, [schedule]);
+	const showHighlight = useCallback((key) => {
+		highlightKey.current = key;
+		if (!key) {
+			setHighlight(null);
+			return;
+		}
+		const target_0 = targetRef.current;
+		const canvas = rootRef.current;
+		if (target_0 && canvas) {
+			const rect_0 = target_0.getBoundingClientRect();
+			const view = canvas.getBoundingClientRect();
+			if (rect_0.bottom < view.top || rect_0.top > view.bottom || rect_0.right < view.left || rect_0.left > view.right) target_0.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+		schedule();
+	}, [schedule]);
+	const dismiss = () => {
+		targetRef.current = null;
+		pendingPoint.current = null;
+		pinnedRef.current = false;
+		setPinned(false);
+		setSnapshot(null);
+		setOutline(null);
+		highlightKey.current = null;
+		setHighlight(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `studio-hover-inspector${inspectMode || snapshot ? " has-inspector" : ""}`,
+		onPointerMoveCapture: (event) => {
+			if (event.target.closest(".studio-inspector-panel, .studio-inspector-toolbar")) return;
+			if (!inspectMode) return;
+			if (!pinnedRef.current) pendingPoint.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			schedule();
+		},
+		onFocusCapture: (event_0) => {
+			if (event_0.target.closest(".studio-inspector-panel, .studio-inspector-toolbar") || !inspectMode) return;
+			if (pinnedRef.current || !rootRef.current) return;
+			const element_0 = event_0.target;
+			const rect_1 = element_0.getBoundingClientRect();
+			targetRef.current = elementAtPoint(rootRef.current, rect_1.left + rect_1.width / 2, rect_1.top + rect_1.height / 2) ?? element_0;
+			schedule();
+		},
+		onPointerDownCapture: (event_1) => {
+			if (!inspectMode || event_1.target.closest(".studio-inspector-panel, .studio-inspector-toolbar, .studio-inspect-region")) return;
+			event_1.preventDefault();
+			event_1.stopPropagation();
+		},
+		onClickCapture: (event_2) => {
+			const element_1 = event_2.target;
+			if (!inspectMode || element_1.closest(".studio-inspector-panel, .studio-inspector-toolbar, .studio-inspect-region")) return;
+			const root_2 = rootRef.current;
+			if (!root_2) return;
+			const rect_2 = element_1.getBoundingClientRect();
+			const hit_0 = elementAtPoint(root_2, event_2.detail ? event_2.clientX : rect_2.left + rect_2.width / 2, event_2.detail ? event_2.clientY : rect_2.top + rect_2.height / 2);
+			if (!hit_0) return;
+			event_2.preventDefault();
+			event_2.stopPropagation();
+			if (pinnedRef.current && targetRef.current === hit_0) {
+				pinnedRef.current = false;
+				setPinned(false);
+				schedule();
+				return;
+			}
+			targetRef.current = hit_0;
+			pendingPoint.current = null;
+			pinnedRef.current = true;
+			setPinned(true);
+			schedule();
+		},
+		onKeyDownCapture: (event_3) => {
+			if (inspectMode && rootRef.current?.contains(event_3.target) && [
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown"
+			].includes(event_3.key)) {
+				event_3.preventDefault();
+				event_3.stopPropagation();
+				return;
+			}
+			if (event_3.key === "Escape" && snapshot && inspectMode) {
+				event_3.preventDefault();
+				event_3.stopPropagation();
+				dismiss();
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-inspector-toolbar",
+				children: [/* @__PURE__ */ jsx("span", { children: pinned ? "Selection pinned" : "Hover to inspect · click to select" }), /* @__PURE__ */ jsxs("div", {
+					className: "studio-mode",
+					role: "group",
+					"aria-label": "Preview interaction",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": inspectMode,
+						onClick: () => setInspectMode(true),
+						children: "Inspect"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": !inspectMode,
+						onClick: () => setInspectMode(false),
+						children: "Interact"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-inspector-canvas-shell",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: rootRef,
+					className: "studio-inspector-canvas",
+					onScroll: (event_4) => onScroll?.(event_4.currentTarget.scrollTop),
+					children
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "studio-hover-outline-layer",
+					"aria-hidden": "true",
+					children: [outline && snapshot && /* @__PURE__ */ jsx("div", {
+						className: "studio-hover-outline",
+						style: outline,
+						children: !highlight && /* @__PURE__ */ jsxs("span", { children: [
+							snapshot.name,
+							" · ",
+							Math.round(snapshot.width),
+							" × ",
+							Math.round(snapshot.height)
+						] })
+					}), highlight && /* @__PURE__ */ jsx(HighlightOverlay, {
+						highlight,
+						width: rootRef.current?.clientWidth ?? 0
+					})]
+				})]
+			}),
+			(inspectMode || snapshot) && /* @__PURE__ */ jsxs("aside", {
+				className: "studio-inspector-panel",
+				"aria-label": "Inspector view",
+				"aria-describedby": selectionDescriptionId,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						id: selectionDescriptionId,
+						hidden: true,
+						children: snapshot ? `Inspecting ${snapshot.name}` : "No selected element"
+					}),
+					/* @__PURE__ */ jsxs("header", { children: [
+						/* @__PURE__ */ jsx("strong", { children: "Inspector view" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Pin inspected element",
+							"aria-pressed": pinned,
+							disabled: !snapshot,
+							title: "Pin inspected element",
+							onClick: () => {
+								pinnedRef.current = !pinned;
+								setPinned(!pinned);
+							},
+							children: /* @__PURE__ */ jsx(Pin, { size: 14 })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Close inspector view",
+							onClick: () => {
+								dismiss();
+								setInspectMode(false);
+							},
+							children: /* @__PURE__ */ jsx(X, { size: 15 })
+						})
+					] }),
+					snapshot ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
+						className: "studio-inspector-layout",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "studio-inspector-section-heading",
+							children: [/* @__PURE__ */ jsx("h3", { children: "Layout" }), /* @__PURE__ */ jsx("span", {
+								title: "CSS display",
+								children: snapshot.display
+							})]
+						}), /* @__PURE__ */ jsx(BoxModel, {
+							snapshot,
+							onSelect,
+							onHighlight: showHighlight
+						})]
+					}), snapshot.groups.map((group) => ({
+						name: group.name,
+						properties: group.properties.filter((property) => group.name !== "Layout" || ![
+							"Width",
+							"Height",
+							"Margin",
+							"Border width",
+							"Radius",
+							"Row gap",
+							"Column gap",
+							"Display"
+						].includes(property.label) && !/^(Padding |Margin |Border .* width$)/.test(property.label))
+					})).filter((group_0) => group_0.properties.length).map((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))] }) : /* @__PURE__ */ jsx("p", {
+						className: "studio-inspector-empty",
+						children: "Hover an element in the preview to inspect it. Click to pin your selection."
+					})
+				]
+			})
+		]
+	});
+}
+function BoxModel(t0) {
+	const $ = c(39);
+	const { snapshot, onSelect, onHighlight } = t0;
+	const box = snapshot.box;
+	const number = _temp2$4;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== box.border || $[1] !== box.content.height || $[2] !== box.content.width || $[3] !== box.gap.column || $[4] !== box.gap.row || $[5] !== box.margin || $[6] !== box.padding || $[7] !== box.position || $[8] !== box.radius || $[9] !== onHighlight || $[10] !== onSelect || $[11] !== snapshot.groups) {
+		const properties = snapshot.groups.flatMap(_temp3$3);
+		const tokenFor = (label) => properties.find((property) => property.label === label)?.token;
+		const nonzero = _temp5$1;
+		let t5;
+		if ($[16] !== onHighlight || $[17] !== onSelect) {
+			t5 = (text, label_0, className, token, key) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className,
+				title: token ? `Edit ${token}` : `${label_0}: ${text}`,
+				"aria-label": `${label_0}: ${text}`,
+				"data-token": token,
+				"data-box-highlight": key,
+				onPointerEnter: () => onHighlight(key ?? null),
+				onPointerLeave: () => onHighlight(null),
+				onFocus: () => onHighlight(key ?? null),
+				onBlur: () => onHighlight(null),
+				onClick: () => token ? onSelect(token) : onHighlight(key ?? null),
+				children: number(text)
+			});
+			$[16] = onHighlight;
+			$[17] = onSelect;
+			$[18] = t5;
+		} else t5 = $[18];
+		const value_1 = t5;
+		const layer = (name, values, children) => /* @__PURE__ */ jsxs("div", {
+			className: `studio-box-layer is-${name}`,
+			style: name === "border" ? { borderRadius: [
+				box.radius.topLeft,
+				box.radius.topRight,
+				box.radius.bottomRight,
+				box.radius.bottomLeft
+			].map((radius) => nonzero(radius) ? "12px" : "0px").join(" ") } : void 0,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "studio-box-name",
+					children: name
+				}),
+				[
+					"top",
+					"right",
+					"bottom",
+					"left"
+				].map((side) => /* @__PURE__ */ jsx("span", { children: value_1(values[side], `${name} ${side}`, `studio-box-value is-${side}`, tokenFor(`${name[0].toUpperCase()}${name.slice(1)} ${side}`), `${name}.${side}`) }, side)),
+				name === "border" && Object.values(box.radius).some(nonzero) && Object.entries(box.radius).map((t6) => {
+					const [corner, radius_0] = t6;
+					return /* @__PURE__ */ jsx("span", { children: value_1(radius_0, `Radius ${corner}`, `studio-box-radius is-${corner}`, tokenFor("Radius"), `radius.${corner}`) }, corner);
+				}),
+				children
+			]
+		});
+		let t7;
+		if ($[19] !== box.gap.row) {
+			t7 = nonzero(box.gap.row);
+			$[19] = box.gap.row;
+			$[20] = t7;
+		} else t7 = $[20];
+		const hasRowGap = t7;
+		let t8;
+		if ($[21] !== box.gap.column) {
+			t8 = nonzero(box.gap.column);
+			$[21] = box.gap.column;
+			$[22] = t8;
+		} else t8 = $[22];
+		const hasColumnGap = t8;
+		const t9 = `${Math.round(box.content.width * 10) / 10}px`;
+		let t10;
+		if ($[23] !== t9 || $[24] !== value_1) {
+			t10 = value_1(t9, "Content width", "studio-box-dimension-value", void 0, "width");
+			$[23] = t9;
+			$[24] = value_1;
+			$[25] = t10;
+		} else t10 = $[25];
+		let t11;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = /* @__PURE__ */ jsx("span", { children: "×" });
+			$[26] = t11;
+		} else t11 = $[26];
+		const t12 = `${Math.round(box.content.height * 10) / 10}px`;
+		let t13;
+		if ($[27] !== t12 || $[28] !== value_1) {
+			t13 = value_1(t12, "Content height", "studio-box-dimension-value", void 0, "height");
+			$[27] = t12;
+			$[28] = value_1;
+			$[29] = t13;
+		} else t13 = $[29];
+		let t14;
+		if ($[30] !== t10 || $[31] !== t13) {
+			t14 = /* @__PURE__ */ jsx("div", {
+				className: "studio-box-content",
+				title: "Content width × height",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "studio-box-dimensions",
+					children: [
+						t10,
+						t11,
+						t13
+					]
+				})
+			});
+			$[30] = t10;
+			$[31] = t13;
+			$[32] = t14;
+		} else t14 = $[32];
+		const content = t14;
+		const diagram = layer("margin", box.margin, layer("border", box.border, layer("padding", box.padding, content)));
+		t1 = "studio-box-model";
+		t2 = "Box model";
+		t3 = box.position ? layer("position", box.position, diagram) : diagram;
+		t4 = (hasRowGap || hasColumnGap) && /* @__PURE__ */ jsx("div", {
+			className: "studio-box-gaps",
+			"aria-label": "Layout gaps",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "studio-gap-grid",
+				style: {
+					gridTemplateColumns: `minmax(0,1fr) ${hasColumnGap ? 28 : 0}px minmax(0,1fr)`,
+					gridTemplateRows: `20px ${hasRowGap ? 22 : 0}px 20px`
+				},
+				children: [
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					hasColumnGap && value_1(box.gap.column, "Column gap", "studio-gap-number is-column", tokenFor("Column gap"), "gap.column"),
+					hasRowGap && value_1(box.gap.row, "Row gap", "studio-gap-number is-row", tokenFor("Row gap"), "gap.row")
+				]
+			})
+		});
+		$[0] = box.border;
+		$[1] = box.content.height;
+		$[2] = box.content.width;
+		$[3] = box.gap.column;
+		$[4] = box.gap.row;
+		$[5] = box.margin;
+		$[6] = box.padding;
+		$[7] = box.position;
+		$[8] = box.radius;
+		$[9] = onHighlight;
+		$[10] = onSelect;
+		$[11] = snapshot.groups;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else {
+		t1 = $[12];
+		t2 = $[13];
+		t3 = $[14];
+		t4 = $[15];
+	}
+	let t5;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("figcaption", { children: "Box model · px" });
+		$[33] = t5;
+	} else t5 = $[33];
+	let t6;
+	if ($[34] !== t1 || $[35] !== t2 || $[36] !== t3 || $[37] !== t4) {
+		t6 = /* @__PURE__ */ jsxs("figure", {
+			className: t1,
+			"aria-label": t2,
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[34] = t1;
+		$[35] = t2;
+		$[36] = t3;
+		$[37] = t4;
+		$[38] = t6;
+	} else t6 = $[38];
+	return t6;
+}
+function _temp5$1(value_0) {
+	return value_0 !== "normal" && value_0.split(/\s+/).some(_temp4$3);
+}
+function _temp4$3(part) {
+	return parseFloat(part) !== 0 && Number.isFinite(parseFloat(part));
+}
+function _temp3$3(group) {
+	return group.properties;
+}
+function _temp2$4(value) {
+	return value.replace(/(-?\d*\.?\d+)px/g, _temp$6);
+}
+function _temp$6(_, amount) {
+	return String(Math.round(Number(amount) * 10) / 10);
+}
+//#endregion
+//#region src/configurator/ConfigurationLauncher.tsx
+function ConfigurationLauncher({ position, onOpen }) {
+	const ref = useRef(null);
+	const gesture = useRef(null);
+	const dragged = useRef(false);
+	const pending = useRef(null);
+	const frame = useRef(null);
+	const place = useCallback((next) => {
+		const element = ref.current;
+		if (!element) return;
+		const left = Math.max(8, Math.min(next.left, window.innerWidth - element.offsetWidth - 8));
+		const top = Math.max(8, Math.min(next.top, window.innerHeight - element.offsetHeight - 8));
+		position.current = {
+			left,
+			top
+		};
+		element.style.left = `${left}px`;
+		element.style.top = `${top}px`;
+	}, [position]);
+	function finish() {
+		if (frame.current !== null) cancelAnimationFrame(frame.current);
+		frame.current = null;
+		if (pending.current) place(pending.current);
+		pending.current = null;
+		gesture.current = null;
+	}
+	useLayoutEffect(() => {
+		const element_0 = ref.current;
+		if (!element_0) return;
+		const resize = () => place(position.current ?? {
+			left: window.innerWidth - element_0.offsetWidth - 24,
+			top: window.innerHeight - element_0.offsetHeight - 24
+		});
+		resize();
+		window.addEventListener("resize", resize);
+		return () => {
+			window.removeEventListener("resize", resize);
+			if (frame.current !== null) cancelAnimationFrame(frame.current);
+			if (pending.current) position.current = pending.current;
+		};
+	}, [place, position]);
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		className: "studio-floating-launcher",
+		"aria-label": "Open Povio UI configuration",
+		title: "Open Povio UI · Drag to move",
+		onClick: (event) => {
+			if (dragged.current && event.detail !== 0) {
+				dragged.current = false;
+				return;
+			}
+			onOpen();
+		},
+		onPointerDown: (event_0) => {
+			if (event_0.button !== 0) return;
+			const rect = event_0.currentTarget.getBoundingClientRect();
+			dragged.current = false;
+			gesture.current = {
+				x: event_0.clientX,
+				y: event_0.clientY,
+				left: rect.left,
+				top: rect.top,
+				pointerId: event_0.pointerId
+			};
+			event_0.currentTarget.setPointerCapture(event_0.pointerId);
+		},
+		onPointerMove: (event_1) => {
+			const start = gesture.current;
+			if (!start || start.pointerId !== event_1.pointerId) return;
+			const x = event_1.clientX - start.x;
+			const y = event_1.clientY - start.y;
+			if (!dragged.current && Math.hypot(x, y) < 5) return;
+			dragged.current = true;
+			pending.current = {
+				left: start.left + x,
+				top: start.top + y
+			};
+			if (frame.current !== null) return;
+			frame.current = requestAnimationFrame(() => {
+				frame.current = null;
+				if (pending.current) place(pending.current);
+			});
+		},
+		onPointerUp: (event_2) => {
+			if (gesture.current?.pointerId !== event_2.pointerId) return;
+			finish();
+			if (event_2.currentTarget.hasPointerCapture(event_2.pointerId)) event_2.currentTarget.releasePointerCapture(event_2.pointerId);
+		},
+		onPointerCancel: finish,
+		onLostPointerCapture: finish,
+		onKeyDown: (event_3) => {
+			const move = {
+				ArrowLeft: [-1, 0],
+				ArrowRight: [1, 0],
+				ArrowUp: [0, -1],
+				ArrowDown: [0, 1]
+			}[event_3.key];
+			if (!move || !position.current) return;
+			event_3.preventDefault();
+			const step = event_3.shiftKey ? 40 : 10;
+			place({
+				left: position.current.left + move[0] * step,
+				top: position.current.top + move[1] * step
+			});
+		},
+		children: [
+			/* @__PURE__ */ jsx(SlidersHorizontal, { size: 18 }),
+			/* @__PURE__ */ jsx("span", { children: "Povio UI" }),
+			/* @__PURE__ */ jsx(GripVertical, { size: 16 })
+		]
+	});
+}
+//#endregion
+//#region src/configurator/useStudioPopout.ts
+const StudioPopoutContext = createContext(false);
+/** Keep the popup's styles current without copying scripts or starting a second app. */
+function mirrorStyles(source, target) {
+	const base = target.createElement("base");
+	base.href = source.baseURI;
+	target.head.append(base);
+	const copies = /* @__PURE__ */ new Map();
+	const sync = () => {
+		target.documentElement.className = source.documentElement.className;
+		target.documentElement.style.cssText = source.documentElement.style.cssText;
+		const originals = new Set(source.querySelectorAll("style, link[rel=\"stylesheet\"]"));
+		for (const [original, copy] of copies) if (!originals.has(original)) {
+			copy.remove();
+			copies.delete(original);
+		}
+		for (const original of originals) {
+			let copy = copies.get(original);
+			if (!copy) {
+				copy = original.cloneNode(true);
+				copies.set(original, copy);
+				target.head.append(copy);
+			} else if (!copy.isEqualNode(original)) {
+				const replacement = original.cloneNode(true);
+				copy.replaceWith(replacement);
+				copies.set(original, replacement);
+			}
+		}
+		source.fonts.forEach((font) => target.fonts.add(font));
+	};
+	sync();
+	const observer = new MutationObserver((records) => {
+		if (records.some((record) => {
+			const element = record.target.nodeType === 1 ? record.target : record.target.parentElement;
+			return element === source.documentElement || element?.closest("style, link[rel=\"stylesheet\"]") || [...record.addedNodes, ...record.removedNodes].some((node) => node.nodeType === 1 && (node.matches("style, link[rel=\"stylesheet\"]") || node.querySelector("style, link[rel=\"stylesheet\"]")));
+		})) sync();
+	});
+	observer.observe(source.documentElement, {
+		childList: true,
+		subtree: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"style",
+			"href",
+			"media",
+			"disabled"
+		]
+	});
+	source.fonts.addEventListener("loadingdone", sync);
+	return () => {
+		observer.disconnect();
+		source.fonts.removeEventListener("loadingdone", sync);
+	};
+}
+function useStudioPopout(isOpen) {
+	const $ = c(11);
+	const geometry = useRef(null);
+	const [popup, setPopup] = useState(null);
+	const [blocked, setBlocked] = useState(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const saved = geometry.current;
+			const dimensions = saved ? `width=${saved.width},height=${saved.height},left=${saved.left},top=${saved.top}` : "width=1200,height=850";
+			const child = window.open("", "_blank", `popup=yes,${dimensions},resizable=yes,scrollbars=yes`);
+			if (!child) {
+				setBlocked(true);
+				return;
+			}
+			child.document.title = "Povio UI Configuration";
+			child.document.documentElement.dataset.povioUiPopout = "";
+			child.document.body.style.margin = "0";
+			setBlocked(false);
+			setPopup(child);
+			child.focus();
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const open = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => setPopup(null);
+		$[1] = t1;
+	} else t1 = $[1];
+	const dock = t1;
+	let t2;
+	let t3;
+	if ($[2] !== popup) {
+		t2 = () => {
+			if (!popup) return;
+			const stopMirroring = mirrorStyles(document, popup.document);
+			const remember = () => {
+				if (!popup.closed && popup.innerWidth > 0 && popup.innerHeight > 0) geometry.current = {
+					width: popup.innerWidth,
+					height: popup.innerHeight,
+					left: popup.screenX,
+					top: popup.screenY
+				};
+			};
+			const close = () => {
+				remember();
+				setPopup(null);
+			};
+			const closeWithHost = () => popup.close();
+			popup.addEventListener("pagehide", close);
+			popup.addEventListener("resize", remember);
+			popup.addEventListener("blur", remember);
+			window.addEventListener("pagehide", closeWithHost);
+			return () => {
+				remember();
+				stopMirroring();
+				popup.removeEventListener("pagehide", close);
+				popup.removeEventListener("resize", remember);
+				popup.removeEventListener("blur", remember);
+				window.removeEventListener("pagehide", closeWithHost);
+				if (!popup.closed) popup.close();
+			};
+		};
+		t3 = [popup];
+		$[2] = popup;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[5] !== isOpen) {
+		t4 = () => {
+			if (!isOpen) setPopup(null);
+		};
+		t5 = [isOpen];
+		$[5] = isOpen;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t4 = $[6];
+		t5 = $[7];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] !== blocked || $[9] !== popup) {
+		t6 = {
+			popup,
+			blocked,
+			open,
+			dock
+		};
+		$[8] = blocked;
+		$[9] = popup;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
+}
+//#endregion
+//#region src/configurator/useStudioWindow.ts
+const windowEdges = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+function constrain(bounds) {
+	const margin = 8;
+	const width = Math.min(Math.max(360, bounds.width), window.innerWidth - 16);
+	const height = Math.min(Math.max(360, bounds.height), window.innerHeight - 16);
+	return {
+		width,
+		height,
+		left: Math.max(margin, Math.min(bounds.left, window.innerWidth - width - margin)),
+		top: Math.max(margin, Math.min(bounds.top, window.innerHeight - height - margin))
+	};
+}
+function writeBounds(element, bounds) {
+	Object.assign(element.style, {
+		position: "fixed",
+		left: `${bounds.left}px`,
+		top: `${bounds.top}px`,
+		width: `${bounds.width}px`,
+		height: `${bounds.height}px`,
+		transform: "",
+		willChange: ""
+	});
+}
+function adjust(start, action, x, y) {
+	if (action === "move") return constrain({
+		...start,
+		left: start.left + x,
+		top: start.top + y
+	});
+	const margin = 8;
+	const minWidth = Math.min(360, window.innerWidth - 16);
+	const minHeight = Math.min(360, window.innerHeight - 16);
+	const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+	let { left, top } = start;
+	let right = left + start.width;
+	let bottom = top + start.height;
+	if (action.includes("w")) left = clamp(left + x, margin, right - minWidth);
+	if (action.includes("e")) right = clamp(right + x, left + minWidth, window.innerWidth - margin);
+	if (action.includes("n")) top = clamp(top + y, margin, bottom - minHeight);
+	if (action.includes("s")) bottom = clamp(bottom + y, top + minHeight, window.innerHeight - margin);
+	return {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function useStudioWindow(bounds, enabled = true) {
+	const ref = useRef(null);
+	const gesture = useRef(null);
+	const frame = useRef(null);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!enabled || !element) return;
+		if (bounds.current) {
+			bounds.current = constrain(bounds.current);
+			writeBounds(element, bounds.current);
+		}
+		return () => {
+			const rect = element.getBoundingClientRect();
+			bounds.current = gesture.current?.latest ?? {
+				left: rect.left,
+				top: rect.top,
+				width: rect.width,
+				height: rect.height
+			};
+		};
+	}, [bounds, enabled]);
+	useEffect(() => {
+		if (!enabled) return;
+		const resize = () => {
+			if (frame.current !== null) cancelAnimationFrame(frame.current);
+			frame.current = null;
+			const current = gesture.current?.latest ?? bounds.current;
+			gesture.current = null;
+			if (current && ref.current) {
+				bounds.current = constrain(current);
+				writeBounds(ref.current, bounds.current);
+			}
+		};
+		window.addEventListener("resize", resize);
+		return () => {
+			window.removeEventListener("resize", resize);
+			if (frame.current !== null) cancelAnimationFrame(frame.current);
+		};
+	}, [bounds, enabled]);
+	function currentBounds() {
+		const rect_0 = ref.current?.getBoundingClientRect();
+		return rect_0 ? {
+			left: rect_0.left,
+			top: rect_0.top,
+			width: rect_0.width,
+			height: rect_0.height
+		} : null;
+	}
+	function finish() {
+		if (frame.current !== null) cancelAnimationFrame(frame.current);
+		frame.current = null;
+		const current_0 = gesture.current;
+		gesture.current = null;
+		if (!current_0 || !ref.current) return;
+		bounds.current = current_0.latest;
+		writeBounds(ref.current, current_0.latest);
+	}
+	function controls(action) {
+		return {
+			onPointerDown(event) {
+				if (event.button !== 0 || gesture.current) return;
+				const start = currentBounds();
+				if (!start || !ref.current) return;
+				event.preventDefault();
+				event.currentTarget.focus({ preventScroll: true });
+				event.currentTarget.setPointerCapture(event.pointerId);
+				writeBounds(ref.current, start);
+				if (action === "move") ref.current.style.willChange = "transform";
+				gesture.current = {
+					action,
+					x: event.clientX,
+					y: event.clientY,
+					bounds: start,
+					latest: start,
+					pointerId: event.pointerId
+				};
+			},
+			onPointerMove(event_0) {
+				const start_0 = gesture.current;
+				if (!start_0 || start_0.pointerId !== event_0.pointerId) return;
+				start_0.latest = adjust(start_0.bounds, start_0.action, event_0.clientX - start_0.x, event_0.clientY - start_0.y);
+				if (frame.current !== null) return;
+				frame.current = requestAnimationFrame(() => {
+					frame.current = null;
+					const current_1 = gesture.current;
+					if (!current_1 || !ref.current) return;
+					if (current_1.action === "move") {
+						const x = current_1.latest.left - current_1.bounds.left;
+						const y = current_1.latest.top - current_1.bounds.top;
+						ref.current.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+					} else writeBounds(ref.current, current_1.latest);
+				});
+			},
+			onPointerUp(event_1) {
+				if (gesture.current?.pointerId !== event_1.pointerId) return;
+				finish();
+				if (event_1.currentTarget.hasPointerCapture(event_1.pointerId)) event_1.currentTarget.releasePointerCapture(event_1.pointerId);
+			},
+			onLostPointerCapture: finish,
+			onPointerCancel: finish,
+			onKeyDown(event_2) {
+				const direction = {
+					ArrowLeft: [-1, 0],
+					ArrowRight: [1, 0],
+					ArrowUp: [0, -1],
+					ArrowDown: [0, 1]
+				}[event_2.key];
+				if (!direction || gesture.current) return;
+				event_2.preventDefault();
+				const start_1 = currentBounds();
+				const step = event_2.shiftKey ? 40 : 10;
+				if (start_1 && ref.current) {
+					bounds.current = adjust(start_1, action, direction[0] * step, direction[1] * step);
+					writeBounds(ref.current, bounds.current);
+				}
+			}
+		};
+	}
+	return {
+		ref,
+		move: controls("move"),
+		resize: (edge) => controls(edge)
+	};
+}
+//#endregion
 //#region src/configurator/ContextualPreview.tsx
 function CvaPreview(t0) {
 	const $ = c(84);
@@ -630,7 +2222,7 @@ function CvaPreview(t0) {
 		component = slot.split(".")[0];
 		const props = {
 			...definition?.config.defaultVariants,
-			...Object.fromEntries(Object.entries(variants).filter(_temp$5).map(_temp2$2))
+			...Object.fromEntries(Object.entries(variants).filter(_temp$5).map(_temp2$3))
 		};
 		const classes = (key, t4) => {
 			const extra = t4 === void 0 ? {} : t4;
@@ -1395,7 +2987,7 @@ function _temp4$2(value_2) {
 function _temp3$2(event_1) {
 	return event_1.preventDefault();
 }
-function _temp2$2(t0) {
+function _temp2$3(t0) {
 	const [name, value_0] = t0;
 	return [name, value_0 === "true" ? true : value_0 === "false" ? false : value_0];
 }
@@ -1607,7 +3199,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$1))];
+		const components = [...new Set(slots.map(_temp2$2))];
 		let t10;
 		if ($[20] !== inheritedOverrides || $[21] !== slot) {
 			t10 = resolveCvaDefinition(slot, inheritedOverrides);
@@ -1911,7 +3503,7 @@ function _temp3$1(name) {
 		children: title(name)
 	}, name);
 }
-function _temp2$1(key) {
+function _temp2$2(key) {
 	return key.split(".")[0];
 }
 //#endregion
@@ -2153,8 +3745,9 @@ function scrollSelectedIntoView(list) {
 }
 /** Picks a base palette color for a semantic token, showing each option's swatch, step and hex value. */
 function PaletteSelect(t0) {
-	const $ = c(28);
+	const $ = c(50);
 	const { id, label, options, selected, onSelect } = t0;
+	const poppedOut = use(StudioPopoutContext);
 	let current;
 	let t1;
 	if ($[0] !== options || $[1] !== selected) {
@@ -2175,15 +3768,99 @@ function PaletteSelect(t0) {
 		t1 = $[3];
 	}
 	const [, family, step] = t1;
+	if (poppedOut) {
+		const t2 = `studio-palette-picker studio-palette-native ${current ? "" : "is-custom"}`;
+		let t3;
+		if ($[6] !== current || $[7] !== family || $[8] !== step) {
+			t3 = current && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "studio-palette-swatch",
+				style: { backgroundColor: `rgb(${current.value})` }
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "studio-palette-trigger-label",
+				children: [
+					family,
+					" ",
+					step
+				]
+			})] });
+			$[6] = current;
+			$[7] = family;
+			$[8] = step;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx(ChevronDown, { size: 13 });
+			$[10] = t4;
+		} else t4 = $[10];
+		let t5;
+		if ($[11] !== t3) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				className: "studio-palette-trigger",
+				"aria-hidden": "true",
+				children: [t3, t4]
+			});
+			$[11] = t3;
+			$[12] = t5;
+		} else t5 = $[12];
+		let t6;
+		if ($[13] !== onSelect) {
+			t6 = (event) => onSelect(event.target.value);
+			$[13] = onSelect;
+			$[14] = t6;
+		} else t6 = $[14];
+		let t7;
+		if ($[15] !== options) {
+			t7 = paletteFamilies(options).map(_temp$2);
+			$[15] = options;
+			$[16] = t7;
+		} else t7 = $[16];
+		let t8;
+		if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+			t8 = /* @__PURE__ */ jsx("option", {
+				value: customPaletteKey,
+				children: "Custom value…"
+			});
+			$[17] = t8;
+		} else t8 = $[17];
+		let t9;
+		if ($[18] !== id || $[19] !== label || $[20] !== selected || $[21] !== t6 || $[22] !== t7) {
+			t9 = /* @__PURE__ */ jsxs("select", {
+				id,
+				"aria-label": label,
+				value: selected,
+				onChange: t6,
+				children: [t7, t8]
+			});
+			$[18] = id;
+			$[19] = label;
+			$[20] = selected;
+			$[21] = t6;
+			$[22] = t7;
+			$[23] = t9;
+		} else t9 = $[23];
+		let t10;
+		if ($[24] !== t2 || $[25] !== t5 || $[26] !== t9) {
+			t10 = /* @__PURE__ */ jsxs("div", {
+				className: t2,
+				children: [t5, t9]
+			});
+			$[24] = t2;
+			$[25] = t5;
+			$[26] = t9;
+			$[27] = t10;
+		} else t10 = $[27];
+		return t10;
+	}
 	const t2 = `studio-palette-picker ${current ? "" : "is-custom"}`;
 	let t3;
-	if ($[6] !== onSelect) {
+	if ($[28] !== onSelect) {
 		t3 = (key) => key !== null && onSelect(String(key));
-		$[6] = onSelect;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[28] = onSelect;
+		$[29] = t3;
+	} else t3 = $[29];
 	let t4;
-	if ($[8] !== current || $[9] !== family || $[10] !== step) {
+	if ($[30] !== current || $[31] !== family || $[32] !== step) {
 		t4 = current && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			className: "studio-palette-swatch",
 			style: { backgroundColor: `rgb(${current.value})` },
@@ -2196,36 +3873,36 @@ function PaletteSelect(t0) {
 				step
 			]
 		})] });
-		$[8] = current;
-		$[9] = family;
-		$[10] = step;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[30] = current;
+		$[31] = family;
+		$[32] = step;
+		$[33] = t4;
+	} else t4 = $[33];
 	let t5;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = /* @__PURE__ */ jsx(ChevronDown, {
 			size: 13,
 			"aria-hidden": "true"
 		});
-		$[12] = t5;
-	} else t5 = $[12];
+		$[34] = t5;
+	} else t5 = $[34];
 	let t6;
-	if ($[13] !== t4) {
+	if ($[35] !== t4) {
 		t6 = /* @__PURE__ */ jsxs($7705c033048f6da7$export$353f5b6fc5456de1, {
 			className: "studio-palette-trigger",
 			children: [t4, t5]
 		});
-		$[13] = t4;
-		$[14] = t6;
-	} else t6 = $[14];
+		$[35] = t4;
+		$[36] = t6;
+	} else t6 = $[36];
 	let t7;
-	if ($[15] !== options) {
-		t7 = paletteFamilies(options).map(_temp$2);
-		$[15] = options;
-		$[16] = t7;
-	} else t7 = $[16];
+	if ($[37] !== options) {
+		t7 = paletteFamilies(options).map(_temp2$1);
+		$[37] = options;
+		$[38] = t7;
+	} else t7 = $[38];
 	let t8;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = /* @__PURE__ */ jsx($928221da08ecbc62$export$dca12b0bb56e4fc, {
 			id: "other",
 			children: /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
@@ -2234,10 +3911,10 @@ function PaletteSelect(t0) {
 				children: "Custom value…"
 			})
 		});
-		$[17] = t8;
-	} else t8 = $[17];
+		$[39] = t8;
+	} else t8 = $[39];
 	let t9;
-	if ($[18] !== t7) {
+	if ($[40] !== t7) {
 		t9 = /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
 			className: "studio-palette-popover",
 			placement: "bottom end",
@@ -2247,11 +3924,11 @@ function PaletteSelect(t0) {
 				children: [t7, t8]
 			})
 		});
-		$[18] = t7;
-		$[19] = t9;
-	} else t9 = $[19];
+		$[40] = t7;
+		$[41] = t9;
+	} else t9 = $[41];
 	let t10;
-	if ($[20] !== id || $[21] !== label || $[22] !== selected || $[23] !== t2 || $[24] !== t3 || $[25] !== t6 || $[26] !== t9) {
+	if ($[42] !== id || $[43] !== label || $[44] !== selected || $[45] !== t2 || $[46] !== t3 || $[47] !== t6 || $[48] !== t9) {
 		t10 = /* @__PURE__ */ jsxs($c8bb816105474884$export$ef9b1a59e592288f, {
 			id,
 			"aria-label": label,
@@ -2260,39 +3937,56 @@ function PaletteSelect(t0) {
 			onSelectionChange: t3,
 			children: [t6, t9]
 		});
-		$[20] = id;
-		$[21] = label;
-		$[22] = selected;
-		$[23] = t2;
-		$[24] = t3;
-		$[25] = t6;
-		$[26] = t9;
-		$[27] = t10;
-	} else t10 = $[27];
+		$[42] = id;
+		$[43] = label;
+		$[44] = selected;
+		$[45] = t2;
+		$[46] = t3;
+		$[47] = t6;
+		$[48] = t9;
+		$[49] = t10;
+	} else t10 = $[49];
 	return t10;
 }
-function _temp$2(t0) {
-	const { family: name, steps } = t0;
+function _temp2$1(t0) {
+	const { family: name_0, steps: steps_0 } = t0;
 	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, {
-		id: name,
-		children: [/* @__PURE__ */ jsxs($53e61d82d8b8611d$export$8b251419efc915eb, { children: ["Base palette / ", name] }), steps.map((t1) => {
-			const { step: value, option: option_0 } = t1;
+		id: name_0,
+		children: [/* @__PURE__ */ jsxs($53e61d82d8b8611d$export$8b251419efc915eb, { children: ["Base palette / ", name_0] }), steps_0.map((t1) => {
+			const { step: value_0, option: option_1 } = t1;
 			return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
-				id: option_0.name,
-				textValue: `${name} ${value}`,
-				"aria-label": `${name} ${value}`,
+				id: option_1.name,
+				textValue: `${name_0} ${value_0}`,
+				"aria-label": `${name_0} ${value_0}`,
 				className: "studio-palette-item",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "studio-palette-swatch",
-						style: { backgroundColor: `rgb(${option_0.value})` },
+						style: { backgroundColor: `rgb(${option_1.value})` },
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ jsx("span", { children: value }),
-					/* @__PURE__ */ jsx("code", { children: toHex(option_0.value).toUpperCase() })
+					/* @__PURE__ */ jsx("span", { children: value_0 }),
+					/* @__PURE__ */ jsx("code", { children: toHex(option_1.value).toUpperCase() })
 				]
-			}, option_0.name);
+			}, option_1.name);
 		})]
+	}, name_0);
+}
+function _temp$2(t0) {
+	const { family: name, steps } = t0;
+	return /* @__PURE__ */ jsx("optgroup", {
+		label: `Base palette / ${name}`,
+		children: steps.map((t1) => {
+			const { step: value, option: option_0 } = t1;
+			return /* @__PURE__ */ jsxs("option", {
+				value: option_0.name,
+				children: [
+					name,
+					" ",
+					value
+				]
+			}, option_0.name);
+		})
 	}, name);
 }
 //#endregion
@@ -3402,7 +5096,7 @@ 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-BWiPGUL8.js"));
+const ComponentGallery = lazy(() => import("../ComponentGallery-Dp0kZVZM.js"));
 function ComponentPreview(t0) {
 	const $ = c(14);
 	const { value, mode, inspector } = t0;
@@ -3646,7 +5340,34 @@ function TokenField({ name, value, original, changed, onChange, onReset, onValid
 		]
 	});
 }
-function ConfigurationModalContent({ memory }) {
+function PopoutOverlay(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "studio-overlay",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout, onDock, onMinimize, popupBlocked }) {
+	const Overlay = poppedOut ? PopoutOverlay : $8b8d26808cb8cb53$export$8948f78d83984c69;
+	const Surface = poppedOut ? "div" : $8b8d26808cb8cb53$export$2b77a92f1a5ad772;
+	const studioWindow = useStudioWindow(windowBounds, !poppedOut);
+	const [compactPreview, setCompactPreview] = useState(false);
+	useEffect(() => {
+		const modal = studioWindow.ref.current;
+		if (!modal) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (entry && entry.contentRect.width > 800) setCompactPreview(false);
+		});
+		observer.observe(modal);
+		return () => observer.disconnect();
+	}, [studioWindow.ref]);
 	const inherited = UIConfig.useConfig();
 	const { defaults, draft, setDraft, isOpen, cancel, apply, revision } = useUIConfiguration();
 	const remembered = memory.current;
@@ -3665,7 +5386,15 @@ function ConfigurationModalContent({ memory }) {
 	const [expandedGroups, setExpandedGroups] = useState(remembered.expandedGroups ?? {});
 	const [sectionTabs, setSectionTabs] = useState(remembered.sectionTabs ?? {});
 	const [resetRevision, setResetRevision] = useState(0);
-	const [invalidFields, setInvalidFields] = useState({});
+	const [invalidFields, setInvalidFields] = useState(remembered.invalidRevision === revision ? remembered.invalidFields ?? {} : {});
+	useLayoutEffect(() => {
+		memory.current.invalidRevision = revision;
+		memory.current.invalidFields = invalidFields;
+	}, [
+		memory,
+		revision,
+		invalidFields
+	]);
 	const [message, setMessage] = useState("");
 	const [themeWriter, setThemeWriter] = useState(null);
 	const [savingTheme, setSavingTheme] = useState(false);
@@ -3702,7 +5431,7 @@ function ConfigurationModalContent({ memory }) {
 	useLayoutEffect(() => {
 		const frame = requestAnimationFrame(() => {
 			editorRef.current?.scrollTo({ top: memory.current.editorScroll ?? 0 });
-			previewRef.current?.scrollTo({ top: memory.current.previewScroll ?? 0 });
+			previewRef.current?.querySelector(".studio-inspector-canvas")?.scrollTo({ top: memory.current.previewScroll ?? 0 });
 		});
 		return () => cancelAnimationFrame(frame);
 	}, [memory]);
@@ -3711,6 +5440,8 @@ function ConfigurationModalContent({ memory }) {
 	const config = inherited;
 	const exportText = exportTab === "css" ? exportCss(draft.theme, defaults) : exportTab === "overrides" ? exportCvaEdits(draft.overrides) : `import { UIConfig } from "@povio/ui/ui-config";\n\nconst config = ${JSON.stringify(draft.config, null, 2)} satisfies Partial<UIConfig.Options>;\n\n// Wrap your application:\n// <UIConfig.Provider config={config}>{children}</UIConfig.Provider>\n`;
 	const changeSection = (next) => {
+		if (compactPreview && bodyRef.current?.parentElement) bodyRef.current.parentElement.scrollTop = 0;
+		setCompactPreview(false);
 		if (isLayoutKind(next)) setSectionTabs((current) => ({
 			...current,
 			Layout: next
@@ -3738,6 +5469,7 @@ function ConfigurationModalContent({ memory }) {
 	]);
 	/** Opens the editor on a token picked in the inspector: its section, its group, scrolled into view and highlighted. */
 	const focusToken = useCallback((picked) => {
+		setCompactPreview(false);
 		const name_1 = listedLayoutToken(picked, defaults);
 		const next_0 = sectionFor(name_1);
 		if (isLayoutKind(next_0)) setSectionTabs((current_1) => ({
@@ -3765,7 +5497,7 @@ function ConfigurationModalContent({ memory }) {
 	useEffect(() => {
 		if (!highlightedToken) return;
 		const frame_0 = requestAnimationFrame(() => {
-			(document.getElementById(`token-${highlightedToken}`)?.closest(".studio-token"))?.scrollIntoView({
+			(editorRef.current?.ownerDocument.getElementById(`token-${highlightedToken}`)?.closest(".studio-token"))?.scrollIntoView({
 				block: "center",
 				behavior: "smooth"
 			});
@@ -3858,8 +5590,8 @@ function ConfigurationModalContent({ memory }) {
 		...defaults.theme
 	}).filter(([name_9]) => (section === "Font size" ? isFontSizeToken(name_9) : section === "Spacing" || section === "Sizing" ? layoutKindFor(name_9) === section && listedLayoutToken(name_9, defaults) === name_9 : groupFor(name_9) === section) && !name_9.startsWith("--color-"));
 	const groupedEntries = /* @__PURE__ */ new Map();
-	for (const entry of sectionEntries) {
-		const [name_10] = entry;
+	for (const entry_0 of sectionEntries) {
+		const [name_10] = entry_0;
 		const textStyle = section === "Typography" ? name_10.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
 		const key_1 = groupKeyFor(section, name_10, defaults);
 		if (!groupedEntries.has(key_1)) groupedEntries.set(key_1, {
@@ -3867,7 +5599,7 @@ function ConfigurationModalContent({ memory }) {
 			compact: !!textStyle,
 			entries: []
 		});
-		groupedEntries.get(key_1).entries.push(entry);
+		groupedEntries.get(key_1).entries.push(entry_0);
 	}
 	const paletteStep = (name_11) => Number(name_11.match(/-(\d+)-base$/)?.[1]);
 	const isPaletteGroup = (entries) => entries.every(([name_12]) => palette.has(name_12));
@@ -3959,7 +5691,7 @@ function ConfigurationModalContent({ memory }) {
 	const renderFontFamilies = (entries_2) => {
 		const isFamily = ([name_22, value_10]) => value_10.includes(`var(${name_22}-base)`);
 		const families = entries_2.filter(isFamily);
-		const roles = entries_2.filter((entry_0) => !isFamily(entry_0));
+		const roles = entries_2.filter((entry_1) => !isFamily(entry_1));
 		const themeFonts = families.map(([name_23]) => ({
 			name: name_23,
 			label: familyName(name_23.replace(/^--font-/, "")),
@@ -3990,7 +5722,7 @@ function ConfigurationModalContent({ memory }) {
 					}, `${revision}-${resetRevision}-${name_24}`))
 				}),
 				/* @__PURE__ */ jsx(FontUpload, { onUpload: refreshLoadedFonts }),
-				!!families.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("hr", { className: "studio-font-divider" }), families.map((entry_1) => renderToken(entry_1))] })
+				!!families.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("hr", { className: "studio-font-divider" }), families.map((entry_2) => renderToken(entry_2))] })
 			]
 		}, "font-families");
 	};
@@ -4014,17 +5746,19 @@ function ConfigurationModalContent({ memory }) {
 			children: options_0.map((option) => /* @__PURE__ */ jsx("option", { children: option }, option))
 		})]
 	}, `${key_11}-${field_1}`);
-	return /* @__PURE__ */ jsx($8b8d26808cb8cb53$export$8948f78d83984c69, {
+	return /* @__PURE__ */ jsx(Overlay, {
 		className: "studio-overlay",
 		isOpen,
 		onOpenChange: (next_2) => {
 			if (!next_2) cancel();
 		},
 		isDismissable: false,
-		children: /* @__PURE__ */ jsx($8b8d26808cb8cb53$export$2b77a92f1a5ad772, {
-			className: "studio-modal",
+		children: /* @__PURE__ */ jsx(Surface, {
+			className: `studio-modal${poppedOut ? " studio-modal-popout" : ""}`,
+			ref: studioWindow.ref,
 			children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$3ddf2d174ce01153, {
 				className: "studio-dialog",
+				"data-compact-preview": compactPreview || void 0,
 				style: { "--studio-editor-track": editorWidth ? `minmax(260px, ${editorWidth}px)` : void 0 },
 				children: [
 					/* @__PURE__ */ jsxs("header", {
@@ -4040,22 +5774,35 @@ function ConfigurationModalContent({ memory }) {
 							/* @__PURE__ */ jsxs("nav", {
 								className: "studio-nav",
 								"aria-label": "Configuration sections",
-								children: [
-									navSections.map((group_3) => /* @__PURE__ */ jsx("button", {
-										"aria-current": (group_3 === "Layout" ? isLayoutKind(section) : section === group_3) ? "page" : void 0,
-										onClick: () => changeSection(group_3 === "Layout" ? lastLayoutSection : group_3),
-										children: group_3
-									}, group_3)),
-									/* @__PURE__ */ jsx("span", {
-										className: "studio-nav-divider",
-										"aria-hidden": "true"
-									}),
-									/* @__PURE__ */ jsx("button", {
-										"aria-current": advancedSection ? "page" : void 0,
-										onClick: () => changeSection(isAdvancedSection(sectionTabs.Advanced ?? "") ? sectionTabs.Advanced : advancedSections[0][0]),
-										children: "Advanced"
-									})
-								]
+								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)),
+										/* @__PURE__ */ jsx("span", {
+											className: "studio-nav-divider",
+											"aria-hidden": "true"
+										}),
+										/* @__PURE__ */ jsx("button", {
+											"aria-current": !compactPreview && advancedSection ? "page" : void 0,
+											onClick: () => changeSection(isAdvancedSection(sectionTabs.Advanced ?? "") ? sectionTabs.Advanced : advancedSections[0][0]),
+											children: "Advanced"
+										})
+									]
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "studio-preview-tab",
+									"aria-current": compactPreview ? "page" : void 0,
+									onClick: () => {
+										setCompactPreview(true);
+										const dialog = bodyRef.current?.parentElement;
+										if (dialog) dialog.scrollTop = 0;
+									},
+									children: "Live preview"
+								})]
 							}),
 							/* @__PURE__ */ jsx("div", {
 								className: "studio-topbar-controls",
@@ -4185,9 +5932,9 @@ function ConfigurationModalContent({ memory }) {
 												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_2) => renderToken(entry_2, group_5.compact))]
+												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_3) => renderToken(entry_3))), !orderedGroups.length && /* @__PURE__ */ jsx("p", { children: "No matching tokens. Try a component name such as “button”." })]
+										}, 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,
@@ -4426,26 +6173,34 @@ function ConfigurationModalContent({ memory }) {
 											})]
 										})]
 									}),
-									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(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 a component to inspect its padding, gaps and radius."
+										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."
 									})
 								]
 							}),
@@ -4473,7 +6228,7 @@ function ConfigurationModalContent({ memory }) {
 							}),
 							/* @__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." : message || `${changedCount} overrides · Changes stay in this session`
+								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`
 							}),
 							/* @__PURE__ */ jsx("button", {
 								onClick: () => cancel(),
@@ -4489,6 +6244,36 @@ function ConfigurationModalContent({ memory }) {
 							})
 						]
 					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "studio-window-minimize",
+						"aria-label": "Minimize UI configuration",
+						title: "Minimize to floating button",
+						onClick: onMinimize,
+						children: /* @__PURE__ */ jsx(Minus, { size: 17 })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "studio-window-popout",
+						"aria-label": poppedOut ? "Dock configuration back in page" : "Pop out UI configuration",
+						title: poppedOut ? "Dock back in page" : "Open in a separate window",
+						onClick: poppedOut ? onDock : onPopout,
+						children: poppedOut ? /* @__PURE__ */ jsx(PanelTop, { size: 17 }) : /* @__PURE__ */ jsx(ExternalLink, { size: 17 })
+					}),
+					!poppedOut && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "studio-window-grip",
+						"aria-label": "Move UI configuration",
+						title: "Drag to move, or use arrow keys",
+						...studioWindow.move,
+						children: /* @__PURE__ */ jsx(GripVertical, { size: 20 })
+					}), windowEdges.map((edge) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `studio-window-resize studio-window-resize-${edge}`,
+						"aria-label": `Resize UI configuration ${edge}`,
+						title: "Drag to resize, or use arrow keys",
+						...studioWindow.resize(edge)
+					}, edge))] }),
 					/* @__PURE__ */ jsx($8b8d26808cb8cb53$export$8948f78d83984c69, {
 						className: "studio-overlay studio-confirm-overlay",
 						isOpen: confirmingReset,
@@ -4534,22 +6319,113 @@ function ConfigurationModalContent({ memory }) {
 	});
 }
 function UIConfigurationModal() {
-	const $ = c(4);
-	const { isOpen, revision } = useUIConfiguration();
+	const $ = c(22);
+	const { isOpen, revision, open } = 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 = {};
+		t0 = () => setMinimized(false);
 		$[0] = t0;
 	} else t0 = $[0];
-	const memory = useRef(t0);
 	let t1;
-	if ($[1] !== isOpen || $[2] !== revision) {
-		t1 = isOpen ? /* @__PURE__ */ jsx(ConfigurationModalContent, { memory }, revision) : null;
-		$[1] = isOpen;
-		$[2] = revision;
-		$[3] = t1;
-	} else t1 = $[3];
-	return 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);
+	const windowBounds = useRef(null);
+	const popout = useStudioPopout(isOpen && !minimized);
+	if ((!isOpen || minimized) && hasLauncher) {
+		let t3;
+		if ($[4] !== isOpen || $[5] !== open || $[6] !== popout) {
+			t3 = createPortal(/* @__PURE__ */ jsx(ConfigurationLauncher, {
+				position: launcherPosition,
+				onOpen: () => {
+					setMinimized(false);
+					if (!isOpen) open();
+					if (restorePopout.current) popout.open();
+				}
+			}), document.body);
+			$[4] = isOpen;
+			$[5] = open;
+			$[6] = popout;
+			$[7] = t3;
+		} else t3 = $[7];
+		return t3;
+	}
+	if (!isOpen) return null;
+	const t3 = !!popout.popup;
+	let t4;
+	let t5;
+	let t6;
+	if ($[8] !== popout) {
+		t4 = () => {
+			restorePopout.current = true;
+			popout.open();
+		};
+		t5 = () => {
+			restorePopout.current = false;
+			popout.dock();
+		};
+		t6 = () => {
+			restorePopout.current = !!popout.popup;
+			setHasLauncher(true);
+			setMinimized(true);
+			popout.dock();
+		};
+		$[8] = popout;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t4 = $[9];
+		t5 = $[10];
+		t6 = $[11];
+	}
+	let t7;
+	if ($[12] !== popout.blocked || $[13] !== revision || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ConfigurationModalContent, {
+			memory,
+			windowBounds,
+			poppedOut: t3,
+			onPopout: t4,
+			onDock: t5,
+			onMinimize: t6,
+			popupBlocked: popout.blocked
+		}, revision);
+		$[12] = popout.blocked;
+		$[13] = revision;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	const content = t7;
+	let t8;
+	if ($[19] !== content || $[20] !== popout.popup) {
+		t8 = popout.popup ? createPortal(/* @__PURE__ */ jsx(StudioPopoutContext, {
+			value: true,
+			children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
+				getContainer: () => popout.popup.document.body,
+				children: content
+			})
+		}), popout.popup.document.body) : content;
+		$[19] = content;
+		$[20] = popout.popup;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
 }
 //#endregion
 export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };