@povio/ui 5.0.0-rc.4 → 5.0.0-rc.6

package/dist/config/ui-configurator.js

@@ -3,6 +3,7 @@ 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";
@@ -44,7 +45,6 @@ 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";
@@ -56,10 +56,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 +69,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$8 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -85,8 +87,8 @@ const __iconData$5 = {
 		}]
 	]
 };
-__iconData$5.node;
-const ArrowDownToLine = createLucideIcon(__iconData$5);
+__iconData$8.node;
+const ArrowDownToLine = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -95,7 +97,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$7 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -106,8 +108,36 @@ const __iconData$4 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$4.node;
-const ChevronsUpDown = createLucideIcon(__iconData$4);
+__iconData$7.node;
+const ChevronsUpDown = createLucideIcon(__iconData$7);
+//#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$6 = {
+	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$6.node;
+const ExternalLink = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.mjs
 /**
@@ -116,7 +146,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$5 = {
 	name: "moon",
 	size: 24,
 	node: [["path", {
@@ -124,8 +154,33 @@ const __iconData$3 = {
 		key: "kfwtm"
 	}]]
 };
-__iconData$3.node;
-const Moon = createLucideIcon(__iconData$3);
+__iconData$5.node;
+const Moon = createLucideIcon(__iconData$5);
+//#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$4 = {
+	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$4.node;
+const PanelTop = 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 +189,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 +200,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 +210,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 +221,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
 /**
@@ -611,6 +718,461 @@ function useUIConfiguration() {
 	return context;
 }
 //#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 +1192,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 +1957,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 +2169,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 +2473,7 @@ function _temp3$1(name) {
 		children: title(name)
 	}, name);
 }
-function _temp2$1(key) {
+function _temp2$2(key) {
 	return key.split(".")[0];
 }
 //#endregion
@@ -2153,8 +2715,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 +2738,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 +2843,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 +2881,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 +2894,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 +2907,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 +4066,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-C2tjrHWn.js"));
 function ComponentPreview(t0) {
 	const $ = c(14);
 	const { value, mode, inspector } = t0;
@@ -3646,7 +4310,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 +4356,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);
@@ -3711,6 +4410,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 +4439,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 +4467,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 +4560,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 +4569,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 +4661,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 +4692,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 +4716,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 +4744,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 +4902,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,
@@ -4473,7 +5190,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 +5206,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 +5281,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 };