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

package/dist/config/ui-configurator.js

@@ -3,13 +3,14 @@ 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 GripVertical } from "../grip-vertical-BVxcjdfr.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 { n as Minus } from "../CheckboxCheckmark-D_uc9pon.js";
+import { a as InspectorDetails, c as useUIConfiguration, d as cvaDefinitions, f as Sun, i as HighlightOverlay, l as exportCvaEdits, m as Moon, o as UIConfigurationProvider, p as Pin, r as getBoxHighlights, s as emptyConfiguration, t as inspectElement, u as resolveCvaDefinition } from "../inspection-model-LuI36xTg.js";
+import { i as Search } from "../selectDesktop.cva-CHAMxhfO.js";
 import { t as Upload } from "../upload-CXU83BJ4.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 { t as X } from "../x-B6vfz8Ps.js";
+import { 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";
 import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, d as $53e61d82d8b8611d$export$8b251419efc915eb, l as $542a13ca2fa5b484$export$9b9a0cd73afb7ca4, n as $f2ff30fde7b014be$export$3ddf2d174ce01153, r as $f2ff30fde7b014be$export$d2f961adcb0afbe } from "../Dialog-CKLkS00H.js";
 import { t as $43a3b93638fe5db9$export$75b6ee27786ba447 } from "../Label-B2-B-uFY.js";
@@ -17,38 +18,20 @@ import { n as $7705c033048f6da7$export$353f5b6fc5456de1, t as $7705c033048f6da7$
 import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "../Heading-nI1_VOaE.js";
 import { t as $efe09c6d1c304b50$export$9afb8bc826b033ea } from "../Text-D2MPZ3sY.js";
 import { n as $1f3c3b1a70cec653$export$ff05c3ac10437e03, t as $cdaed739b1139372$export$c24727297075ec6a } from "../Form-DlQcyN1f.js";
-import { t as Checkbox } from "../Checkbox-CV1ILXXO.js";
+import { t as Checkbox } from "../Checkbox-DYxXYfKL.js";
 import { a as $928221da08ecbc62$export$dca12b0bb56e4fc, i as $928221da08ecbc62$export$a11e76429ed99b4, n as $928221da08ecbc62$export$7c5906fe4f1f2af2, r as $928221da08ecbc62$export$7ff8f37d2d81a48d, t as $928221da08ecbc62$export$41f133550aa26f48 } from "../ListBox-CL8Ar4Q_.js";
 import { n as $8b8d26808cb8cb53$export$8948f78d83984c69, t as $8b8d26808cb8cb53$export$2b77a92f1a5ad772 } from "../Modal-w60dVQcb.js";
-import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "../RadioGroup-DOw3PRoX.js";
-import { n as switchDefinition, t as Switch } from "../Switch-CqnGEdeD.js";
-import { n as textAreaWrapperDefinition, t as TextArea } from "../TextArea-D8WkKsGn.js";
-import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "../breadcrumbs.cva-7zzdDhVR.js";
-import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "../dropdownMenu.cva-DvEmX0bs.js";
-import { i as tooltipTextDefinition, n as tooltipPointerHorizontalDefinition, r as tooltipPointerVerticalDefinition, t as tooltipDefinition } from "../tooltip.cva-BIzlOXHH.js";
-import { t as typographyDefinition } from "../typography.cva-iD15k56p.js";
-import { a as buttonSizeDefinition, i as buttonIconSizeDefinition, n as buttonContentDefinition, r as buttonDefinition, t as Button } from "../Button-C5rv4Cr2.js";
-import { r as badgeButtonDefinition } from "../badgeButton.cva-CvN4CTx5.js";
+import { t as RadioGroup } from "../RadioGroup-CUGNSJql.js";
+import { t as Switch } from "../Switch-CimmMqEk.js";
+import { t as TextArea } from "../TextArea-B3teIhsJ.js";
+import { t as Button } from "../Button-BPTvffuk.js";
 import { BadgeButton } from "../components/badge-button.js";
-import { n as formFieldErrorDefinition } from "../FormFieldError-DeOHHLo2.js";
-import { a as formFieldHeaderDefinition, i as labelDefinition, n as formFieldHelperDefinition } from "../FormField-B99dLt8o.js";
-import { n as tagDefinition, t as Tag } from "../Tag-DPg5sL1Z.js";
-import { a as inputSizeDefinition, i as inputSideDefinition, n as inputClearClassDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "../input.cva-DJA8ovm_.js";
-import { t as popoverDefinition } from "../popover.cva-Bhud1wnp.js";
+import { Tag } from "../components/tag.js";
 import { Input } from "../components/input.js";
-import { t as datePickerInputContentRowDefinition } from "../datePickerInput.cva-Cd7UUN61.js";
-import { a as progressTrackWrapperDefinition, i as progressTrackDefinition, n as progressDefinition, o as progressValueDefinition, r as progressFillDefinition, t as Progress } from "../Progress-B3mY9rIP.js";
-import { t as fileUploadDropZoneDefinition } from "../fileUpload.cva-ujmStxB1.js";
-import { n as toggleGroupItemDefinition, t as toggleGroupDefinition } from "../toggleGroup.cva-MbpaEBg1.js";
-import { a as accordionHeadingTitleDefinition, c as accordionPanelContentDefinition, i as accordionHeadingSubtitleDefinition, l as accordionPanelDefinition, n as accordionDefinition, o as accordionIconDefinition, r as accordionHeadingDefinition, s as accordionItemDefinition, t as accordionChevronDefinition, u as accordionTriggerDefinition } from "../accordion.cva-CL1bVscW.js";
-import { a as stepperSeparatorDefinition, i as stepperNumberDefinition, n as stepperIconDefinition, o as stepperSubtextDefinition, r as stepperItemDefinition, s as stepperTitleDefinition, t as stepperDefinition } from "../stepper.cva-CZ0Kj-s7.js";
-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 { 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 { t as Progress } from "../Progress-Du30L4_s.js";
+import { Alert } from "../components/alert.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 } from "../theme-model-DtYPxNvH.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";
@@ -69,7 +52,7 @@ import { UNSAFE_PortalProvider } from "react-aria";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$6 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -87,8 +70,8 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const ArrowDownToLine = createLucideIcon(__iconData$8);
+__iconData$6.node;
+const ArrowDownToLine = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -97,7 +80,7 @@ const ArrowDownToLine = createLucideIcon(__iconData$8);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$7 = {
+const __iconData$5 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -108,8 +91,8 @@ const __iconData$7 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$7.node;
-const ChevronsUpDown = createLucideIcon(__iconData$7);
+__iconData$5.node;
+const ChevronsUpDown = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/external-link.mjs
 /**
@@ -118,7 +101,7 @@ const ChevronsUpDown = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$4 = {
 	name: "external-link",
 	size: 24,
 	node: [
@@ -136,26 +119,8 @@ const __iconData$6 = {
 		}]
 	]
 };
-__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
-/**
-* @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: "moon",
-	size: 24,
-	node: [["path", {
-		d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
-		key: "kfwtm"
-	}]]
-};
-__iconData$5.node;
-const Moon = createLucideIcon(__iconData$5);
+__iconData$4.node;
+const ExternalLink = createLucideIcon(__iconData$4);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-top.mjs
 /**
@@ -164,7 +129,7 @@ const Moon = 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$3 = {
 	name: "panel-top",
 	size: 24,
 	node: [["rect", {
@@ -179,8 +144,8 @@ const __iconData$4 = {
 		key: "1pudct"
 	}]]
 };
-__iconData$4.node;
-const PanelTop = createLucideIcon(__iconData$4);
+__iconData$3.node;
+const PanelTop = createLucideIcon(__iconData$3);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/plus.mjs
 /**
@@ -189,7 +154,7 @@ const PanelTop = 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$2 = {
 	name: "plus",
 	size: 24,
 	node: [["path", {
@@ -200,8 +165,8 @@ const __iconData$3 = {
 		key: "s699le"
 	}]]
 };
-__iconData$3.node;
-const Plus = createLucideIcon(__iconData$3);
+__iconData$2.node;
+const Plus = createLucideIcon(__iconData$2);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/rotate-ccw.mjs
 /**
@@ -210,7 +175,7 @@ const Plus = createLucideIcon(__iconData$3);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$2 = {
+const __iconData$1 = {
 	name: "rotate-ccw",
 	size: 24,
 	node: [["path", {
@@ -221,8 +186,8 @@ const __iconData$2 = {
 		key: "1xhq8a"
 	}]]
 };
-__iconData$2.node;
-const RotateCcw = createLucideIcon(__iconData$2);
+__iconData$1.node;
+const RotateCcw = createLucideIcon(__iconData$1);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/sliders-horizontal.mjs
 /**
@@ -231,7 +196,7 @@ const RotateCcw = 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 = {
 	name: "sliders-horizontal",
 	size: 24,
 	node: [
@@ -273,62 +238,8 @@ const __iconData$1 = {
 		}]
 	]
 };
-__iconData$1.node;
-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
-/**
-* @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 = {
-	name: "sun",
-	size: 24,
-	node: [
-		["circle", {
-			cx: "12",
-			cy: "12",
-			r: "4",
-			key: "4exip2"
-		}],
-		["path", {
-			d: "M12 2v2",
-			key: "tus03m"
-		}],
-		["path", {
-			d: "M12 20v2",
-			key: "1lh1kg"
-		}],
-		["path", {
-			d: "m4.93 4.93 1.41 1.41",
-			key: "149t6j"
-		}],
-		["path", {
-			d: "m17.66 17.66 1.41 1.41",
-			key: "ptbguv"
-		}],
-		["path", {
-			d: "M2 12h2",
-			key: "1t8f8n"
-		}],
-		["path", {
-			d: "M20 12h2",
-			key: "1q8mjw"
-		}],
-		["path", {
-			d: "m6.34 17.66-1.41 1.41",
-			key: "1m8zz5"
-		}],
-		["path", {
-			d: "m19.07 4.93-1.41 1.41",
-			key: "1shlcs"
-		}]
-	]
-};
 __iconData.node;
-const Sun = createLucideIcon(__iconData);
+const SlidersHorizontal = createLucideIcon(__iconData);
 //#endregion
 //#region ../../node_modules/.bun/react-aria-components@1.21.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Select.mjs
 const $c8bb816105474884$export$7540cee5be7dc19b = /*#__PURE__*/ createContext(null);
@@ -452,270 +363,319 @@ function $c8bb816105474884$var$SelectInner({ props, selectRef: ref, collection }
 }
 const $c8bb816105474884$export$f8f745c04421623f = /*#__PURE__*/ createContext(null);
 //#endregion
-//#region src/configurator/cva-definitions.ts
-const cvaDefinitions = {
-	"datePickerInput.contentRowCva": datePickerInputContentRowDefinition,
-	"select.tagsContentWrapperCva": selectInputTagsContentWrapperDefinition,
-	"tooltip.pointerHorizontalCva": tooltipPointerHorizontalDefinition,
-	"accordion.chevronCva": accordionChevronDefinition,
-	"accordion.cva": accordionDefinition,
-	"accordion.headingCva": accordionHeadingDefinition,
-	"accordion.headingSubtitleCva": accordionHeadingSubtitleDefinition,
-	"accordion.headingTitleCva": accordionHeadingTitleDefinition,
-	"accordion.iconCva": accordionIconDefinition,
-	"accordion.itemCva": accordionItemDefinition,
-	"accordion.panelContentCva": accordionPanelContentDefinition,
-	"accordion.panelCva": accordionPanelDefinition,
-	"accordion.triggerCva": accordionTriggerDefinition,
-	"alert.cva": alertDefinition,
-	"breadcrumbs.chevronCva": breadcrumbChevronDefinition,
-	"breadcrumbs.cva": breadcrumbsDefinition,
-	"breadcrumbs.iconCva": breadcrumbIconDefinition,
-	"breadcrumbs.itemCva": breadcrumbItemDefinition,
-	"breadcrumbs.segmentCva": breadcrumbSegmentDefinition,
-	"button.contentCva": buttonContentDefinition,
-	"button.cva": buttonDefinition,
-	"button.iconSize": buttonIconSizeDefinition,
-	"button.sizeCva": buttonSizeDefinition,
-	"checkbox.contentRowCva": checkboxContentRowDefinition,
-	"checkbox.contentWrapperCva": checkboxContentWrapperDefinition,
-	"checkbox.cva": checkboxDefinition,
-	"checkbox.groupLabelCva": checkboxGroupLabelDefinition,
-	"checkbox.iconCva": checkboxIconDefinition,
-	"dialog.contentCva": dialogContentDefinition,
-	"dialog.mainCva": dialogMainDefinition,
-	"dialog.overlayCva": dialogOverlayDefinition,
-	"dropdownMenu.cva": dropdownMenuDefinition,
-	"dropdownMenu.itemCva": menuItemDefinition,
-	"dropdownMenu.popoverCva": menuPopoverDefinition,
-	"dropdownMenu.popoverWrapperCva": menuPopoverWrapperDefinition,
-	"fileUpload.dropZoneCva": fileUploadDropZoneDefinition,
-	"formField.errorLabelCva": formFieldErrorDefinition,
-	"formField.headerCva": formFieldHeaderDefinition,
-	"formField.helperLabelCva": formFieldHelperDefinition,
-	"input.baseCva": inputBaseDefinition,
-	"input.clearClassCva": inputClearClassDefinition,
-	"input.contentWrapperCva": inputContentWrapperDefinition,
-	"input.sideCva": inputSideDefinition,
-	"input.sizeCva": inputSizeDefinition,
-	"label.cva": labelDefinition,
-	"link.cva": linkDefinition,
-	"badgeButton.cva": badgeButtonDefinition,
-	"popover.cva": popoverDefinition,
-	"progress.cva": progressDefinition,
-	"progress.fillCva": progressFillDefinition,
-	"progress.trackCva": progressTrackDefinition,
-	"progress.trackWrapperCva": progressTrackWrapperDefinition,
-	"progress.valueCva": progressValueDefinition,
-	"radio.contentRowCva": radioContentRowDefinition,
-	"radio.contentWrapperCva": radioContentWrapperDefinition,
-	"radio.cva": radioDefinition,
-	"select.listBoxItemCva": selectListBoxItemDefinition,
-	"select.popoverCva": selectPopoverDefinition,
-	"status.iconCva": statusIconDefinition,
-	"status.separatorCva": statusSeparatorDefinition,
-	"stepper.cva": stepperDefinition,
-	"stepper.iconCva": stepperIconDefinition,
-	"stepper.itemCva": stepperItemDefinition,
-	"stepper.numberCva": stepperNumberDefinition,
-	"stepper.separatorCva": stepperSeparatorDefinition,
-	"stepper.subtextCva": stepperSubtextDefinition,
-	"stepper.titleCva": stepperTitleDefinition,
-	"switch.cva": switchDefinition,
-	"table.cellTextCva": tableCellTextDefinition,
-	"table.dataCva": tableDataDefinition,
-	"table.headDataCva": tableHeadDataDefinition,
-	"table.headRowCva": tableHeadRowDefinition,
-	"table.headerTextCva": tableHeaderTextDefinition,
-	"table.rowCva": tableRowDefinition,
-	"table.theadCva": theadDefinition,
-	"tag.cva": tagDefinition,
-	"textArea.wrapperCva": textAreaWrapperDefinition,
-	"toast.containerCva": toastContainerDefinition,
-	"toast.cva": toastDefinition,
-	"toggleGroup.cva": toggleGroupDefinition,
-	"toggleGroup.itemCva": toggleGroupItemDefinition,
-	"tooltip.cva": tooltipDefinition,
-	"tooltip.pointerVerticalCva": tooltipPointerVerticalDefinition,
-	"tooltip.textCva": tooltipTextDefinition,
-	"tooltipWrapper.triggerCva": tooltipWrapperTriggerDefinition,
-	"typography.cva": typographyDefinition
-};
-//#endregion
-//#region src/configurator/cva-model.ts
-function resolveCvaDefinition(slot, inherited) {
-	const [component, part] = slot.split(".");
-	const override = (inherited?.[component])?.[part];
-	if (typeof override === "function") return null;
-	const fallback = cvaDefinitions[slot];
-	const definition = override && typeof override === "object" && "mode" in override ? StyleMergeUtils.mergeCvaDefinition(fallback, override) : fallback;
-	const config = definition.config;
-	return {
-		base: [...definition.base],
-		config: {
-			variants: Object.fromEntries(Object.entries(config?.variants ?? {}).map(([name, options]) => [name, Object.fromEntries(Object.entries(options).map(([value, classes]) => [value, clsx(classes)]))])),
-			defaultVariants: config?.defaultVariants ?? {},
-			compoundVariants: (config?.compoundVariants ?? []).map(({ class: classes, className, ...selectors }) => Object.assign(selectors, { className: clsx(classes, className) }))
-		}
-	};
-}
-function applyCvaEdits(inherited, edits = {}) {
-	const result = { ...inherited };
-	for (const [slot, definition] of Object.entries(edits)) {
-		const [component, part] = slot.split(".");
-		const key = component;
-		result[key] = {
-			...result[key],
-			[part]: {
-				mode: "overrideCva",
-				...definition
-			}
-		};
+//#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;
 	}
-	return result;
-}
-function exportCvaEdits(edits = {}) {
-	const overrides = applyCvaEdits(void 0, edits);
-	const components = Object.keys(overrides).map((name) => `    ${name}: { ...existing.${name}, ...edited.${name} },`).join("\n");
-	return `import { UIOverrides } from "@povio/ui/ui-overrides";\n\nconst edited = ${JSON.stringify(overrides, null, 2)} satisfies UIOverrides.Config;\n\nexport function withUIOverrides(existing: UIOverrides.Config = {}): UIOverrides.Config {\n  return {\n    ...existing,\n${components}\n  };\n}\n\n// <UIOverrides.Provider config={withUIOverrides(appOverrides)}>{children}</UIOverrides.Provider>\n`;
+	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;
 }
-//#endregion
-//#region src/configurator/configuration.context.tsx
-const emptyConfiguration = () => ({
-	theme: emptyTheme(),
-	config: {}
-});
-const ConfigurationContext = createContext(null);
-function UIConfigurationProvider(t0) {
-	const $ = c(34);
-	const { defaults, initialValue, onApply, children } = t0;
-	const inheritedOverrides = UIOverrides.useConfig();
-	const [applied, setApplied] = useState(initialValue ?? emptyConfiguration);
-	const [draft, setDraft] = useState(applied);
-	const [isOpen, setOpen] = useState(false);
-	const [revision, setRevision] = useState(0);
-	const active = isOpen ? draft : applied;
-	let t1;
-	if ($[0] !== applied) {
-		t1 = () => {
-			setDraft(structuredClone(applied));
-			setRevision(_temp$6);
-			setOpen(true);
-		};
-		$[0] = applied;
-		$[1] = t1;
-	} else t1 = $[1];
-	const open = t1;
-	let t2;
-	if ($[2] !== applied) {
-		t2 = () => {
-			setDraft(structuredClone(applied));
-			setOpen(false);
-		};
-		$[2] = applied;
-		$[3] = t2;
-	} else t2 = $[3];
-	const cancel = t2;
-	let t3;
-	if ($[4] !== draft || $[5] !== onApply) {
-		t3 = () => {
-			onApply?.(structuredClone(draft));
-			setApplied(structuredClone(draft));
-			setOpen(false);
-		};
-		$[4] = draft;
-		$[5] = onApply;
-		$[6] = t3;
-	} else t3 = $[6];
-	const apply = t3;
-	let t4;
-	if ($[7] !== active.overrides || $[8] !== inheritedOverrides) {
-		t4 = applyCvaEdits(inheritedOverrides, active.overrides);
-		$[7] = active.overrides;
-		$[8] = inheritedOverrides;
-		$[9] = t4;
-	} else t4 = $[9];
-	const overrides = t4;
-	let t5;
-	if ($[10] !== apply || $[11] !== cancel || $[12] !== defaults || $[13] !== draft || $[14] !== inheritedOverrides || $[15] !== isOpen || $[16] !== open || $[17] !== revision) {
-		t5 = {
-			defaults,
-			inheritedOverrides,
-			draft,
-			setDraft,
-			isOpen,
-			open,
-			cancel,
-			apply,
-			revision
-		};
-		$[10] = apply;
-		$[11] = cancel;
-		$[12] = defaults;
-		$[13] = draft;
-		$[14] = inheritedOverrides;
-		$[15] = isOpen;
-		$[16] = open;
-		$[17] = revision;
-		$[18] = t5;
-	} else t5 = $[18];
-	const contextValue = t5;
-	let t6;
-	if ($[19] !== active.theme || $[20] !== defaults) {
-		t6 = runtimeCss(defaults, active.theme);
-		$[19] = active.theme;
-		$[20] = defaults;
-		$[21] = t6;
-	} else t6 = $[21];
-	let t7;
-	if ($[22] !== t6) {
-		t7 = /* @__PURE__ */ jsx("style", {
-			"data-povio-ui-configuration": true,
-			children: t6
+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
 		});
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	let t8;
-	if ($[24] !== active.config || $[25] !== children) {
-		t8 = /* @__PURE__ */ jsx(UIConfig.Provider, {
-			config: active.config,
-			children
+		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();
 		});
-		$[24] = active.config;
-		$[25] = children;
-		$[26] = t8;
-	} else t8 = $[26];
-	let t9;
-	if ($[27] !== overrides || $[28] !== t8) {
-		t9 = /* @__PURE__ */ jsx(UIOverrides.Provider, {
-			config: overrides,
-			children: t8
+	}, [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();
 		});
-		$[27] = overrides;
-		$[28] = t8;
-		$[29] = t9;
-	} else t9 = $[29];
-	let t10;
-	if ($[30] !== contextValue || $[31] !== t7 || $[32] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(ConfigurationContext.Provider, {
-			value: contextValue,
-			children: [t7, t9]
+		mutations.observe(root_1, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true
 		});
-		$[30] = contextValue;
-		$[31] = t7;
-		$[32] = t9;
-		$[33] = t10;
-	} else t10 = $[33];
-	return t10;
-}
-function _temp$6(value) {
-	return value + 1;
-}
-function useUIConfiguration() {
-	const context = use(ConfigurationContext);
-	if (!context) throw new Error("useUIConfiguration requires UIConfigurationProvider");
-	return context;
+		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__ */ jsx(InspectorDetails, {
+						snapshot,
+						onSelect,
+						onHighlight: showHighlight
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "studio-inspector-empty",
+						children: "Hover an element in the preview to inspect it. Click to pin your selection."
+					})
+				]
+			})
+		]
+	});
 }
 //#endregion
 //#region src/configurator/ConfigurationLauncher.tsx
@@ -4066,7 +4026,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-C2tjrHWn.js"));
+const ComponentGallery = lazy(() => import("../ComponentGallery-Da70Y4_Q.js"));
 function ComponentPreview(t0) {
 	const $ = c(14);
 	const { value, mode, inspector } = t0;
@@ -4311,22 +4271,24 @@ function TokenField({ name, value, original, changed, onChange, onReset, onValid
 	});
 }
 function PopoutOverlay(t0) {
-	const $ = c(2);
-	const { children } = t0;
-	let t1;
-	if ($[0] !== children) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			className: "studio-overlay",
+	const $ = c(3);
+	const { children, className } = t0;
+	const t1 = className ?? "studio-overlay";
+	let t2;
+	if ($[0] !== children || $[1] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
 			children
 		});
 		$[0] = children;
 		$[1] = t1;
-	} else t1 = $[1];
-	return t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
 }
-function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout, onDock, onMinimize, popupBlocked }) {
-	const Overlay = poppedOut ? PopoutOverlay : $8b8d26808cb8cb53$export$8948f78d83984c69;
-	const Surface = poppedOut ? "div" : $8b8d26808cb8cb53$export$2b77a92f1a5ad772;
+function ConfigurationModalContent({ memory, windowBounds, poppedOut, floating, onPopout, onDock, onMinimize, popupBlocked }) {
+	const Overlay = poppedOut || floating ? PopoutOverlay : $8b8d26808cb8cb53$export$8948f78d83984c69;
+	const Surface = poppedOut || floating ? "div" : $8b8d26808cb8cb53$export$2b77a92f1a5ad772;
 	const studioWindow = useStudioWindow(windowBounds, !poppedOut);
 	const [compactPreview, setCompactPreview] = useState(false);
 	useEffect(() => {
@@ -4401,7 +4363,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout,
 	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]);
@@ -4717,7 +4679,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout,
 		})]
 	}, `${key_11}-${field_1}`);
 	return /* @__PURE__ */ jsx(Overlay, {
-		className: "studio-overlay",
+		className: `studio-overlay${floating && !poppedOut ? " studio-overlay-floating" : ""}`,
 		isOpen,
 		onOpenChange: (next_2) => {
 			if (!next_2) cancel();
@@ -5143,26 +5105,34 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout,
 											})]
 										})]
 									}),
-									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."
 									})
 								]
 							}),
@@ -5281,8 +5251,8 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout,
 	});
 }
 function UIConfigurationModal() {
-	const $ = c(22);
-	const { isOpen, revision, open } = useUIConfiguration();
+	const $ = c(28);
+	const { isOpen, revision, open, openFloating, floating } = useUIConfiguration();
 	const [minimized, setMinimized] = useState(false);
 	const [hasLauncher, setHasLauncher] = useState(false);
 	const restorePopout = useRef(false);
@@ -5306,88 +5276,109 @@ function UIConfigurationModal() {
 	} else t2 = $[3];
 	const memory = useRef(t2);
 	const windowBounds = useRef(null);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			left: 32,
+			top: 80,
+			width: 640,
+			height: 720
+		};
+		$[4] = t3;
+	} else t3 = $[4];
+	const floatingBounds = useRef(t3);
 	const popout = useStudioPopout(isOpen && !minimized);
 	if ((!isOpen || minimized) && hasLauncher) {
-		let t3;
-		if ($[4] !== isOpen || $[5] !== open || $[6] !== popout) {
-			t3 = createPortal(/* @__PURE__ */ jsx(ConfigurationLauncher, {
+		let t4;
+		if ($[5] !== floating || $[6] !== isOpen || $[7] !== open || $[8] !== openFloating || $[9] !== popout) {
+			t4 = createPortal(/* @__PURE__ */ jsx(ConfigurationLauncher, {
 				position: launcherPosition,
 				onOpen: () => {
 					setMinimized(false);
-					if (!isOpen) open();
+					if (!isOpen) {
+						if (floating) openFloating();
+						else open();
+					}
 					if (restorePopout.current) popout.open();
 				}
 			}), document.body);
-			$[4] = isOpen;
-			$[5] = open;
-			$[6] = popout;
-			$[7] = t3;
-		} else t3 = $[7];
-		return t3;
+			$[5] = floating;
+			$[6] = isOpen;
+			$[7] = open;
+			$[8] = openFloating;
+			$[9] = popout;
+			$[10] = t4;
+		} else t4 = $[10];
+		return t4;
 	}
 	if (!isOpen) return null;
-	const t3 = !!popout.popup;
-	let t4;
-	let t5;
+	const t4 = floating ? floatingBounds : windowBounds;
+	const t5 = !!popout.popup;
 	let t6;
-	if ($[8] !== popout) {
-		t4 = () => {
+	let t7;
+	let t8;
+	if ($[11] !== popout) {
+		t6 = () => {
 			restorePopout.current = true;
 			popout.open();
 		};
-		t5 = () => {
+		t7 = () => {
 			restorePopout.current = false;
 			popout.dock();
 		};
-		t6 = () => {
+		t8 = () => {
 			restorePopout.current = !!popout.popup;
 			setHasLauncher(true);
 			setMinimized(true);
 			popout.dock();
 		};
-		$[8] = popout;
-		$[9] = t4;
-		$[10] = t5;
-		$[11] = t6;
+		$[11] = popout;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
 	} else {
-		t4 = $[9];
-		t5 = $[10];
-		t6 = $[11];
+		t6 = $[12];
+		t7 = $[13];
+		t8 = $[14];
 	}
-	let t7;
-	if ($[12] !== popout.blocked || $[13] !== revision || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsx(ConfigurationModalContent, {
+	let t9;
+	if ($[15] !== floating || $[16] !== popout.blocked || $[17] !== revision || $[18] !== t4 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx(ConfigurationModalContent, {
 			memory,
-			windowBounds,
-			poppedOut: t3,
-			onPopout: t4,
-			onDock: t5,
-			onMinimize: t6,
+			windowBounds: t4,
+			floating,
+			poppedOut: t5,
+			onPopout: t6,
+			onDock: t7,
+			onMinimize: t8,
 			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, {
+		$[15] = floating;
+		$[16] = popout.blocked;
+		$[17] = revision;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	const content = t9;
+	let t10;
+	if ($[24] !== content || $[25] !== floating || $[26] !== popout.popup) {
+		t10 = popout.popup ? createPortal(/* @__PURE__ */ jsx(StudioPopoutContext, {
 			value: true,
 			children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
 				getContainer: () => popout.popup.document.body,
 				children: content
 			})
-		}), popout.popup.document.body) : content;
-		$[19] = content;
-		$[20] = popout.popup;
-		$[21] = t8;
-	} else t8 = $[21];
-	return t8;
+		}), popout.popup.document.body) : floating ? createPortal(content, document.body) : content;
+		$[24] = content;
+		$[25] = floating;
+		$[26] = popout.popup;
+		$[27] = t10;
+	} else t10 = $[27];
+	return t10;
 }
 //#endregion
 export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };