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

package/dist/config/ui-configurator.js

@@ -3,14 +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 X } from "../x-B6vfz8Ps.js";
-import { t as clsx } from "../clsx-CnD0nOiA.js";
-import { n as StyleMergeUtils, r as cva, t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
+import { 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";
@@ -18,38 +18,19 @@ 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 { n as splitVariants, t as inspectTokens } from "../token-classes-Bfcx0get.js";
+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";
@@ -71,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$9 = {
+const __iconData$6 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -89,8 +70,8 @@ const __iconData$9 = {
 		}]
 	]
 };
-__iconData$9.node;
-const ArrowDownToLine = createLucideIcon(__iconData$9);
+__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
 /**
@@ -99,7 +80,7 @@ const ArrowDownToLine = createLucideIcon(__iconData$9);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$5 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -110,8 +91,8 @@ const __iconData$8 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$8.node;
-const ChevronsUpDown = createLucideIcon(__iconData$8);
+__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
 /**
@@ -120,7 +101,7 @@ const ChevronsUpDown = 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$4 = {
 	name: "external-link",
 	size: 24,
 	node: [
@@ -138,26 +119,8 @@ const __iconData$7 = {
 		}]
 	]
 };
-__iconData$7.node;
-const ExternalLink = createLucideIcon(__iconData$7);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/moon.mjs
-/**
-* @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: "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$6.node;
-const Moon = createLucideIcon(__iconData$6);
+__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
 /**
@@ -166,7 +129,7 @@ const Moon = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$3 = {
 	name: "panel-top",
 	size: 24,
 	node: [["rect", {
@@ -181,29 +144,8 @@ const __iconData$5 = {
 		key: "1pudct"
 	}]]
 };
-__iconData$5.node;
-const PanelTop = createLucideIcon(__iconData$5);
-//#endregion
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pin.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData$4 = {
-	name: "pin",
-	size: 24,
-	node: [["path", {
-		d: "M12 17v5",
-		key: "bb1du9"
-	}], ["path", {
-		d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z",
-		key: "1nkz8b"
-	}]]
-};
-__iconData$4.node;
-const Pin = createLucideIcon(__iconData$4);
+__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
 /**
@@ -212,7 +154,7 @@ const Pin = createLucideIcon(__iconData$4);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$3 = {
+const __iconData$2 = {
 	name: "plus",
 	size: 24,
 	node: [["path", {
@@ -223,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
 /**
@@ -233,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", {
@@ -244,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
 /**
@@ -254,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: [
@@ -296,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);
@@ -475,736 +363,6 @@ 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
-			}
-		};
-	}
-	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`;
-}
-//#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$7);
-			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
-		});
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	let t8;
-	if ($[24] !== active.config || $[25] !== children) {
-		t8 = /* @__PURE__ */ jsx(UIConfig.Provider, {
-			config: active.config,
-			children
-		});
-		$[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
-		});
-		$[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]
-		});
-		$[30] = contextValue;
-		$[31] = t7;
-		$[32] = t9;
-		$[33] = t10;
-	} else t10 = $[33];
-	return t10;
-}
-function _temp$7(value) {
-	return value + 1;
-}
-function useUIConfiguration() {
-	const context = use(ConfigurationContext);
-	if (!context) throw new Error("useUIConfiguration requires UIConfigurationProvider");
-	return context;
-}
-//#endregion
-//#region src/configurator/inspector/HighlightOverlay.tsx
-const arcs = {
-	topLeft: "M0 100 A100 100 0 0 1 100 0",
-	topRight: "M0 0 A100 100 0 0 1 100 100",
-	bottomRight: "M100 0 A100 100 0 0 1 0 100",
-	bottomLeft: "M100 100 A100 100 0 0 1 0 0"
-};
-function HighlightOverlay(t0) {
-	const $ = c(17);
-	const { highlight, width } = t0;
-	const first = highlight.regions[0];
-	let t1;
-	if ($[0] !== highlight.key) {
-		t1 = highlight.key.split(".");
-		$[0] = highlight.key;
-		$[1] = t1;
-	} else t1 = $[1];
-	const kind = t1[0];
-	const t2 = highlight.key;
-	let t3;
-	if ($[2] !== highlight.regions || $[3] !== kind) {
-		let t4;
-		if ($[5] !== kind) {
-			t4 = (region) => /* @__PURE__ */ jsx("div", {
-				className: `studio-measure-region is-${kind}${region.line ? ` is-${region.line}` : ""}${region.corner ? " is-corner" : ""}`,
-				style: {
-					left: region.left,
-					top: region.top,
-					width: region.width,
-					height: region.height
-				},
-				children: region.corner && /* @__PURE__ */ jsx("svg", {
-					viewBox: "0 0 100 100",
-					preserveAspectRatio: "none",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ jsx("path", {
-						d: arcs[region.corner],
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2",
-						vectorEffect: "non-scaling-stroke"
-					})
-				})
-			}, `${region.left}:${region.top}:${region.width}:${region.height}`);
-			$[5] = kind;
-			$[6] = t4;
-		} else t4 = $[6];
-		t3 = highlight.regions.map(t4);
-		$[2] = highlight.regions;
-		$[3] = kind;
-		$[4] = t3;
-	} else t3 = $[4];
-	const t4 = Math.max(4, Math.min(first?.left ?? 4, width - 220));
-	const t5 = Math.max(4, (first?.top ?? 26) - 22);
-	let t6;
-	if ($[7] !== t4 || $[8] !== t5) {
-		t6 = {
-			left: t4,
-			top: t5
-		};
-		$[7] = t4;
-		$[8] = t5;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== highlight.label || $[11] !== t6) {
-		t7 = /* @__PURE__ */ jsx("span", {
-			className: "studio-measure-label",
-			style: t6,
-			children: highlight.label
-		});
-		$[10] = highlight.label;
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== highlight.key || $[14] !== t3 || $[15] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "studio-measure-regions",
-			"data-property": t2,
-			children: [t3, t7]
-		});
-		$[13] = highlight.key;
-		$[14] = t3;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
-	return t8;
-}
-//#endregion
-//#region src/configurator/inspector/box-highlights.ts
-const sides = [
-	"top",
-	"right",
-	"bottom",
-	"left"
-];
-const corners = [
-	"topLeft",
-	"topRight",
-	"bottomRight",
-	"bottomLeft"
-];
-const numeric = (value) => Number.parseFloat(value) || 0;
-const formatted = (value) => String(Math.round(value * 100) / 100);
-/** Read-only geometry in the inspected element's viewport (including pop-out documents). */
-function getBoxHighlights(element, key) {
-	const view = element.ownerDocument.defaultView;
-	if (!view) return {
-		regions: [],
-		label: ""
-	};
-	const style = view.getComputedStyle(element);
-	const rect = element.getBoundingClientRect();
-	const sx = element.offsetWidth ? rect.width / element.offsetWidth : 1;
-	const sy = element.offsetHeight ? rect.height / element.offsetHeight : 1;
-	const read = (name) => style.getPropertyValue(name);
-	const scale = (side) => side === "left" || side === "right" ? sx : sy;
-	const values = (prefix, suffix = "") => Object.fromEntries(sides.map((side) => [side, numeric(read(`${prefix}-${side}${suffix}`)) * scale(side)]));
-	const border = values("border", "-width");
-	const padding = values("padding");
-	const inner = {
-		left: rect.left + border.left,
-		top: rect.top + border.top,
-		width: Math.max(0, rect.width - border.left - border.right),
-		height: Math.max(0, rect.height - border.top - border.bottom)
-	};
-	const content = {
-		left: inner.left + padding.left,
-		top: inner.top + padding.top,
-		width: Math.max(0, inner.width - padding.left - padding.right),
-		height: Math.max(0, inner.height - padding.top - padding.bottom)
-	};
-	const [kind, part] = key.split(".");
-	let regions = [];
-	let value = "";
-	if (kind === "width" || kind === "height") {
-		value = formatted(content[kind] / (kind === "width" ? sx : sy));
-		regions = [{
-			left: content.left,
-			top: content.top,
-			width: kind === "width" ? content.width : 1,
-			height: kind === "height" ? content.height : 1,
-			line: kind === "width" ? "horizontal" : "vertical"
-		}];
-	} else if (kind === "radius") {
-		const radii = corners.map((corner) => {
-			const cssCorner = corner.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-			const components = read(`border-${cssCorner}-radius`).trim().split(/\s+/);
-			const resolve = (raw, dimension, factor) => raw.endsWith("%") ? numeric(raw) / 100 * dimension : numeric(raw) * factor;
-			return [resolve(components[0] || "0", rect.width, sx), resolve(components[1] || components[0] || "0", rect.height, sy)];
-		});
-		const factor = Math.min(1, rect.width / (radii[0][0] + radii[1][0] || 1), rect.width / (radii[3][0] + radii[2][0] || 1), rect.height / (radii[0][1] + radii[3][1] || 1), rect.height / (radii[1][1] + radii[2][1] || 1));
-		const corner = part;
-		const radius = radii[corners.indexOf(corner)];
-		const width = Math.max(1, radius[0] * factor);
-		const height = Math.max(1, radius[1] * factor);
-		value = `${formatted(radius[0] * factor / sx)} × ${formatted(radius[1] * factor / sy)}`;
-		regions = [{
-			left: rect.left + (corner.endsWith("Right") ? rect.width - width : 0),
-			top: rect.top + (corner.startsWith("bottom") ? rect.height - height : 0),
-			width,
-			height,
-			corner
-		}];
-	} else if (kind === "gap") {
-		const row = part === "row";
-		const rawGap = read(`${part}-gap`);
-		const gap = rawGap.endsWith("%") ? numeric(rawGap) / 100 * (row ? content.height / sy : content.width / sx) : numeric(rawGap);
-		const size = gap * (row ? sy : sx);
-		value = formatted(gap);
-		if (size > 0 && /^(inline-)?(flex|grid)$/.test(read("display"))) {
-			const children = Array.from(element.children).slice(0, 80).flatMap((child) => {
-				const childStyle = view.getComputedStyle(child);
-				const box = child.getBoundingClientRect();
-				return childStyle.display === "none" || childStyle.visibility === "hidden" || /^(absolute|fixed)$/.test(childStyle.position) || !box.width || !box.height ? [] : [box];
-			}).sort((a, b) => row ? a.top - b.top : a.left - b.left);
-			const seen = /* @__PURE__ */ new Set();
-			for (let i = 0; i < children.length; i++) {
-				const a = children[i];
-				for (let j = i + 1; j < children.length; j++) {
-					const b = children[j];
-					const start = row ? a.bottom : a.right;
-					const end = row ? b.top : b.left;
-					const crossStart = Math.max(row ? a.left : a.top, row ? b.left : b.top, row ? content.left : content.top);
-					const crossEnd = Math.min(row ? a.right : a.bottom, row ? b.right : b.bottom, row ? content.left + content.width : content.top + content.height);
-					if (end - start < size - .5 || crossEnd <= crossStart) continue;
-					if (children.some((c, index) => index !== i && index !== j && (row ? c.top >= start && c.bottom <= end && c.right > crossStart && c.left < crossEnd : c.left >= start && c.right <= end && c.bottom > crossStart && c.top < crossEnd))) continue;
-					const axisStart = Math.max((start + end - size) / 2, row ? content.top : content.left);
-					const axisEnd = Math.min((start + end + size) / 2, row ? content.top + content.height : content.left + content.width);
-					if (axisEnd <= axisStart) continue;
-					const region = row ? {
-						left: crossStart,
-						top: axisStart,
-						width: crossEnd - crossStart,
-						height: axisEnd - axisStart
-					} : {
-						left: axisStart,
-						top: crossStart,
-						width: axisEnd - axisStart,
-						height: crossEnd - crossStart
-					};
-					const id = Object.values(region).map(formatted).join(",");
-					if (!seen.has(id)) {
-						seen.add(id);
-						regions.push(region);
-					}
-				}
-			}
-		}
-	} else {
-		const side = part;
-		const horizontal = side === "top" || side === "bottom";
-		const raw = read(kind === "position" ? side : `${kind}-${side}${kind === "border" ? "-width" : ""}`);
-		const amount = numeric(raw) * scale(side);
-		value = formatted(numeric(raw));
-		const base = kind === "padding" ? inner : rect;
-		const outward = kind === "margin" || kind === "position";
-		const thickness = Math.max(1, Math.abs(amount));
-		const positiveEdge = side === "bottom" || side === "right";
-		const edge = horizontal ? base.top + (positiveEdge ? base.height : 0) : base.left + (positiveEdge ? base.width : 0);
-		const offset = outward ? positiveEdge ? amount < 0 ? -thickness : 0 : amount < 0 ? 0 : -thickness : positiveEdge ? -thickness : 0;
-		regions = [{
-			left: horizontal ? base.left : edge + offset,
-			top: horizontal ? edge + offset : base.top,
-			width: horizontal ? base.width : thickness,
-			height: horizontal ? thickness : base.height
-		}];
-		if (kind === "position") {
-			if (raw === "auto" || read("position") === "static") regions = [];
-			else if (read("position") === "absolute" || read("position") === "fixed") {
-				const parent = element.offsetParent;
-				const parentRect = parent?.getBoundingClientRect();
-				const parentStyle = parent ? view.getComputedStyle(parent) : null;
-				const parentScale = parent && "offsetWidth" in parent && parent.offsetWidth ? parentRect.width / Number(parent.offsetWidth) : 1;
-				const parentScaleY = parent && "offsetHeight" in parent && parent.offsetHeight ? parentRect.height / Number(parent.offsetHeight) : 1;
-				const referenceEdge = (parentRect ? {
-					left: parentRect.left + numeric(parentStyle.getPropertyValue("border-left-width")) * parentScale,
-					right: parentRect.right - numeric(parentStyle.getPropertyValue("border-right-width")) * parentScale,
-					top: parentRect.top + numeric(parentStyle.getPropertyValue("border-top-width")) * parentScaleY,
-					bottom: parentRect.bottom - numeric(parentStyle.getPropertyValue("border-bottom-width")) * parentScaleY
-				} : {
-					left: 0,
-					top: 0,
-					right: view.innerWidth,
-					bottom: view.innerHeight
-				})[side];
-				const targetEdge = edge + (positiveEdge ? 1 : -1) * numeric(read(`margin-${side}`)) * scale(side);
-				const start = Math.min(referenceEdge, targetEdge);
-				const length = Math.max(1, Math.abs(referenceEdge - targetEdge));
-				regions = [{
-					left: horizontal ? rect.left : start,
-					top: horizontal ? start : rect.top,
-					width: horizontal ? rect.width : length,
-					height: horizontal ? length : rect.height
-				}];
-			}
-		}
-	}
-	const name = key.replace(".", " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
-	return {
-		regions,
-		label: `${name}: ${value} px`
-	};
-}
-//#endregion
-//#region src/configurator/inspector/inspection-model.ts
-function readableColor(value) {
-	const rgb = value.trim().match(/^rgb\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*\)$/);
-	if (!rgb) return value;
-	return `#${rgb.slice(1).map((channel) => Number(channel).toString(16).padStart(2, "0")).join("")}`;
-}
-function resolveToken(style, name, seen = /* @__PURE__ */ new Set()) {
-	if (seen.has(name)) return "";
-	seen.add(name);
-	const value = style.getPropertyValue(name).trim();
-	const reference = value.match(/^var\((--[\w-]+)\)$/);
-	return reference ? resolveToken(style, reference[1], seen) : value;
-}
-/** Read-only inspection; always use the element's window, including detached previews. */
-function inspectElement(element, isKnown) {
-	const view = element.ownerDocument.defaultView;
-	if (!view) throw new Error("The inspected element has no document window.");
-	const style = view.getComputedStyle(element);
-	const rootFontSize = Number.parseFloat(view.getComputedStyle(element.ownerDocument.documentElement).fontSize) || 16;
-	const bounds = element.getBoundingClientRect();
-	const sides = [
-		"top",
-		"right",
-		"bottom",
-		"left"
-	];
-	const readSides = (prefix, suffix = "") => Object.fromEntries(sides.map((side) => [side, style.getPropertyValue(`${prefix}${side}${suffix}`) || "0px"]));
-	const padding = readSides("padding-");
-	const border = readSides("border-", "-width");
-	const margin = readSides("margin-");
-	const contentDimension = (axis) => {
-		const value = style.getPropertyValue(axis);
-		const dimension = Number.parseFloat(value);
-		const hasPixelDimension = /^\d+(?:\.\d+)?px$/.test(value);
-		if (hasPixelDimension && style.getPropertyValue("box-sizing") !== "border-box") return dimension;
-		const inset = (axis === "width" ? ["left", "right"] : ["top", "bottom"]).reduce((total, side) => total + (Number.parseFloat(padding[side]) || 0) + (Number.parseFloat(border[side]) || 0), 0);
-		return Math.max(0, (hasPixelDimension ? dimension : bounds[axis]) - inset);
-	};
-	const box = {
-		content: {
-			width: contentDimension("width"),
-			height: contentDimension("height")
-		},
-		padding,
-		border,
-		margin,
-		radius: {
-			topLeft: style.getPropertyValue("border-top-left-radius") || "0px",
-			topRight: style.getPropertyValue("border-top-right-radius") || "0px",
-			bottomRight: style.getPropertyValue("border-bottom-right-radius") || "0px",
-			bottomLeft: style.getPropertyValue("border-bottom-left-radius") || "0px"
-		},
-		gap: {
-			row: style.getPropertyValue("row-gap") || "normal",
-			column: style.getPropertyValue("column-gap") || "normal"
-		}
-	};
-	const position = style.getPropertyValue("position");
-	if (position && position !== "static") box.position = readSides("");
-	const classes = Array.from(element.classList);
-	const plainClasses = classes.filter((name) => !splitVariants(name).variants.length && !name.includes("["));
-	const spacing = inspectTokens(plainClasses.join(" "), isKnown);
-	const candidates = (prefix, namespaces) => plainClasses.flatMap((raw) => {
-		const utility = raw.replace(/^!|!$/g, "");
-		if (!utility.startsWith(`${prefix}-`)) return [];
-		const suffix = utility.slice(prefix.length + 1);
-		return namespaces.map((namespace) => `--${namespace}${suffix}`);
-	});
-	const variantsAffect = (prefixes) => classes.some((raw) => {
-		const { variants, utility } = splitVariants(raw);
-		return variants.length > 0 && prefixes.some((prefix) => utility.replace(/^!/, "").startsWith(`${prefix}-`));
-	});
-	const equivalent = (value, computed, property) => {
-		if (!value) return false;
-		if (property.includes("color")) {
-			if (value.match(/^\d+(?:\.\d+)?\s+\d+(?:\.\d+)?\s+\d+(?:\.\d+)?$/)) value = `rgb(${value})`;
-			return readableColor(value).toLowerCase() === readableColor(computed).toLowerCase();
-		}
-		const length = value.match(/^(-?\d+(?:\.\d+)?)(rem|px|em)$/);
-		if (length && computed.endsWith("px")) {
-			let factor = 1;
-			if (length[2] === "rem") factor = rootFontSize;
-			if (length[2] === "em") factor = Number.parseFloat(style.fontSize);
-			return Math.abs(Number(length[1]) * factor - Number.parseFloat(computed)) < .02;
-		}
-		return value.replace(/["']/g, "").replace(/\s+/g, " ") === computed.replace(/["']/g, "").replace(/\s+/g, " ");
-	};
-	const property = (label, css, tokens = [], prefixes = []) => {
-		const computed = style.getPropertyValue(css);
-		const matching = variantsAffect(prefixes) ? [] : tokens.filter((token) => !!token && isKnown(token) && equivalent(resolveToken(style, token), computed, css));
-		const token = [...new Set(matching)][0];
-		const isColor = css.includes("color");
-		return {
-			label,
-			value: isColor ? readableColor(computed) : computed,
-			...token ? { token } : {},
-			...isColor ? { color: computed } : {}
-		};
-	};
-	const tag = element.tagName.toLowerCase();
-	const role = element.getAttribute("role");
-	const context = element.closest("[data-inspector-name]")?.getAttribute("data-inspector-name") || element.closest(".studio-gallery-card")?.querySelector(".studio-gallery-card-title")?.textContent?.trim();
-	const description = (element.getAttribute("aria-label") || element.innerText || element.textContent || "").trim().replace(/\s+/g, " ").slice(0, 100);
-	const name = context || role || tag;
-	const paddingPrefixes = [
-		"p",
-		"px",
-		"py",
-		"pt",
-		"pr",
-		"pb",
-		"pl",
-		"ps",
-		"pe"
-	];
-	const layout = [
-		{
-			label: "Width",
-			value: style.getPropertyValue("width") || `${bounds.width}px`
-		},
-		{
-			label: "Height",
-			value: style.getPropertyValue("height") || `${bounds.height}px`
-		},
-		property("Display", "display"),
-		property("Position", "position"),
-		...sides.map((side) => property(`Padding ${side}`, `padding-${side}`, [spacing.padding[side]], paddingPrefixes)),
-		...sides.map((side) => property(`Margin ${side}`, `margin-${side}`)),
-		property("Row gap", "row-gap", [spacing.gap.row], ["gap"]),
-		property("Column gap", "column-gap", [spacing.gap.column], ["gap"]),
-		property("Radius", "border-radius", [spacing.radius], ["rounded"]),
-		...sides.map((side) => property(`Border ${side} width`, `border-${side}-width`))
-	];
-	const typography = [
-		property("Font", "font-family", candidates("font", ["font-"]), ["font"]),
-		property("Size", "font-size", candidates("text", ["text-"]), ["text"]),
-		property("Weight", "font-weight", candidates("font", ["font-weight-"]), ["font"]),
-		property("Line height", "line-height"),
-		property("Letter spacing", "letter-spacing"),
-		property("Alignment", "text-align")
-	];
-	const appearance = [
-		property("Text", "color", candidates("text", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["text"]),
-		property("Fill", "background-color", candidates("bg", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["bg"]),
-		property("Border", "border-top-color", candidates("border", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["border"]),
-		property("Opacity", "opacity"),
-		property("Shadow", "box-shadow")
-	];
-	const isZero = (value) => value.split(/\s+/).every((part) => /^-?0(?:\.0+)?(?:px|rem|em|%)?$/.test(part));
-	const visibleProperty = (row) => {
-		if (row.label === "Width" || row.label === "Height" || row.token) return true;
-		const value = row.value.trim();
-		if (!value) return false;
-		if (/^(Padding|Margin|Border .* width|Row gap|Column gap|Radius)/.test(row.label) && (isZero(value) || value === "normal")) return false;
-		if (row.label === "Position" && value === "static") return false;
-		if (row.label === "Display" && ["inline", "block"].includes(value)) return false;
-		if (row.label === "Shadow" && value === "none") return false;
-		if (row.label === "Opacity" && Number(value) === 1) return false;
-		if (row.label === "Fill" && (value === "transparent" || /^rgba?\([^)]*[,/]\s*0(?:\.0+)?%?\s*\)$/.test(value))) return false;
-		if (row.label === "Border" && !(Number.parseFloat(border.top) > 0)) return false;
-		if (row.label === "Line height" && value === "normal") return false;
-		if (row.label === "Letter spacing" && (value === "normal" || isZero(value))) return false;
-		if (row.label === "Alignment" && [
-			"normal",
-			"start",
-			"left"
-		].includes(value)) return false;
-		if (row.label === "Weight" && ["400", "normal"].includes(value)) return false;
-		return true;
-	};
-	return {
-		name,
-		display: style.display,
-		tag,
-		description,
-		width: bounds.width,
-		height: bounds.height,
-		box,
-		groups: [
-			{
-				name: "Layout",
-				properties: layout
-			},
-			{
-				name: "Typography",
-				properties: typography
-			},
-			{
-				name: "Appearance",
-				properties: appearance
-			}
-		].map((group) => ({
-			name: group.name,
-			properties: group.properties.filter(visibleProperty)
-		})).filter((group) => group.properties.length > 0)
-	};
-}
-//#endregion
 //#region src/configurator/inspector/PreviewInspector.tsx
 /** Read the real element underneath the inert gallery's stretched zoom button. */
 function elementAtPoint(root, x, y) {
@@ -1506,41 +664,11 @@ function PreviewInspector({ children, revision, isKnown, onSelect, onScroll }) {
 							children: /* @__PURE__ */ jsx(X, { size: 15 })
 						})
 					] }),
-					snapshot ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
-						className: "studio-inspector-layout",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "studio-inspector-section-heading",
-							children: [/* @__PURE__ */ jsx("h3", { children: "Layout" }), /* @__PURE__ */ jsx("span", {
-								title: "CSS display",
-								children: snapshot.display
-							})]
-						}), /* @__PURE__ */ jsx(BoxModel, {
-							snapshot,
-							onSelect,
-							onHighlight: showHighlight
-						})]
-					}), snapshot.groups.map((group) => ({
-						name: group.name,
-						properties: group.properties.filter((property) => group.name !== "Layout" || ![
-							"Width",
-							"Height",
-							"Margin",
-							"Border width",
-							"Radius",
-							"Row gap",
-							"Column gap",
-							"Display"
-						].includes(property.label) && !/^(Padding |Margin |Border .* width$)/.test(property.label))
-					})).filter((group_0) => group_0.properties.length).map((group_1) => /* @__PURE__ */ jsxs("section", { children: [group_1.name !== "Layout" && /* @__PURE__ */ jsx("h3", { children: group_1.name }), /* @__PURE__ */ jsx("dl", { children: group_1.properties.map((property_0) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: property_0.label }), /* @__PURE__ */ jsxs("dd", { children: [
-						property_0.color && /* @__PURE__ */ jsx("i", { style: { background: property_0.color } }),
-						/* @__PURE__ */ jsx("span", { children: property_0.value }),
-						property_0.token && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							title: `Edit ${property_0.token}`,
-							onClick: () => onSelect(property_0.token),
-							children: property_0.token.replace(/^--/, "")
-						})
-					] })] }, property_0.label)) })] }, group_1.name))] }) : /* @__PURE__ */ jsx("p", {
+					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."
 					})
@@ -1549,204 +677,6 @@ function PreviewInspector({ children, revision, isKnown, onSelect, onScroll }) {
 		]
 	});
 }
-function BoxModel(t0) {
-	const $ = c(39);
-	const { snapshot, onSelect, onHighlight } = t0;
-	const box = snapshot.box;
-	const number = _temp2$4;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	if ($[0] !== box.border || $[1] !== box.content.height || $[2] !== box.content.width || $[3] !== box.gap.column || $[4] !== box.gap.row || $[5] !== box.margin || $[6] !== box.padding || $[7] !== box.position || $[8] !== box.radius || $[9] !== onHighlight || $[10] !== onSelect || $[11] !== snapshot.groups) {
-		const properties = snapshot.groups.flatMap(_temp3$3);
-		const tokenFor = (label) => properties.find((property) => property.label === label)?.token;
-		const nonzero = _temp5$1;
-		let t5;
-		if ($[16] !== onHighlight || $[17] !== onSelect) {
-			t5 = (text, label_0, className, token, key) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className,
-				title: token ? `Edit ${token}` : `${label_0}: ${text}`,
-				"aria-label": `${label_0}: ${text}`,
-				"data-token": token,
-				"data-box-highlight": key,
-				onPointerEnter: () => onHighlight(key ?? null),
-				onPointerLeave: () => onHighlight(null),
-				onFocus: () => onHighlight(key ?? null),
-				onBlur: () => onHighlight(null),
-				onClick: () => token ? onSelect(token) : onHighlight(key ?? null),
-				children: number(text)
-			});
-			$[16] = onHighlight;
-			$[17] = onSelect;
-			$[18] = t5;
-		} else t5 = $[18];
-		const value_1 = t5;
-		const layer = (name, values, children) => /* @__PURE__ */ jsxs("div", {
-			className: `studio-box-layer is-${name}`,
-			style: name === "border" ? { borderRadius: [
-				box.radius.topLeft,
-				box.radius.topRight,
-				box.radius.bottomRight,
-				box.radius.bottomLeft
-			].map((radius) => nonzero(radius) ? "12px" : "0px").join(" ") } : void 0,
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "studio-box-name",
-					children: name
-				}),
-				[
-					"top",
-					"right",
-					"bottom",
-					"left"
-				].map((side) => /* @__PURE__ */ jsx("span", { children: value_1(values[side], `${name} ${side}`, `studio-box-value is-${side}`, tokenFor(`${name[0].toUpperCase()}${name.slice(1)} ${side}`), `${name}.${side}`) }, side)),
-				name === "border" && Object.values(box.radius).some(nonzero) && Object.entries(box.radius).map((t6) => {
-					const [corner, radius_0] = t6;
-					return /* @__PURE__ */ jsx("span", { children: value_1(radius_0, `Radius ${corner}`, `studio-box-radius is-${corner}`, tokenFor("Radius"), `radius.${corner}`) }, corner);
-				}),
-				children
-			]
-		});
-		let t7;
-		if ($[19] !== box.gap.row) {
-			t7 = nonzero(box.gap.row);
-			$[19] = box.gap.row;
-			$[20] = t7;
-		} else t7 = $[20];
-		const hasRowGap = t7;
-		let t8;
-		if ($[21] !== box.gap.column) {
-			t8 = nonzero(box.gap.column);
-			$[21] = box.gap.column;
-			$[22] = t8;
-		} else t8 = $[22];
-		const hasColumnGap = t8;
-		const t9 = `${Math.round(box.content.width * 10) / 10}px`;
-		let t10;
-		if ($[23] !== t9 || $[24] !== value_1) {
-			t10 = value_1(t9, "Content width", "studio-box-dimension-value", void 0, "width");
-			$[23] = t9;
-			$[24] = value_1;
-			$[25] = t10;
-		} else t10 = $[25];
-		let t11;
-		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-			t11 = /* @__PURE__ */ jsx("span", { children: "×" });
-			$[26] = t11;
-		} else t11 = $[26];
-		const t12 = `${Math.round(box.content.height * 10) / 10}px`;
-		let t13;
-		if ($[27] !== t12 || $[28] !== value_1) {
-			t13 = value_1(t12, "Content height", "studio-box-dimension-value", void 0, "height");
-			$[27] = t12;
-			$[28] = value_1;
-			$[29] = t13;
-		} else t13 = $[29];
-		let t14;
-		if ($[30] !== t10 || $[31] !== t13) {
-			t14 = /* @__PURE__ */ jsx("div", {
-				className: "studio-box-content",
-				title: "Content width × height",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "studio-box-dimensions",
-					children: [
-						t10,
-						t11,
-						t13
-					]
-				})
-			});
-			$[30] = t10;
-			$[31] = t13;
-			$[32] = t14;
-		} else t14 = $[32];
-		const content = t14;
-		const diagram = layer("margin", box.margin, layer("border", box.border, layer("padding", box.padding, content)));
-		t1 = "studio-box-model";
-		t2 = "Box model";
-		t3 = box.position ? layer("position", box.position, diagram) : diagram;
-		t4 = (hasRowGap || hasColumnGap) && /* @__PURE__ */ jsx("div", {
-			className: "studio-box-gaps",
-			"aria-label": "Layout gaps",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "studio-gap-grid",
-				style: {
-					gridTemplateColumns: `minmax(0,1fr) ${hasColumnGap ? 28 : 0}px minmax(0,1fr)`,
-					gridTemplateRows: `20px ${hasRowGap ? 22 : 0}px 20px`
-				},
-				children: [
-					/* @__PURE__ */ jsx("i", {}),
-					/* @__PURE__ */ jsx("i", {}),
-					/* @__PURE__ */ jsx("i", {}),
-					/* @__PURE__ */ jsx("i", {}),
-					hasColumnGap && value_1(box.gap.column, "Column gap", "studio-gap-number is-column", tokenFor("Column gap"), "gap.column"),
-					hasRowGap && value_1(box.gap.row, "Row gap", "studio-gap-number is-row", tokenFor("Row gap"), "gap.row")
-				]
-			})
-		});
-		$[0] = box.border;
-		$[1] = box.content.height;
-		$[2] = box.content.width;
-		$[3] = box.gap.column;
-		$[4] = box.gap.row;
-		$[5] = box.margin;
-		$[6] = box.padding;
-		$[7] = box.position;
-		$[8] = box.radius;
-		$[9] = onHighlight;
-		$[10] = onSelect;
-		$[11] = snapshot.groups;
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-	} else {
-		t1 = $[12];
-		t2 = $[13];
-		t3 = $[14];
-		t4 = $[15];
-	}
-	let t5;
-	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx("figcaption", { children: "Box model · px" });
-		$[33] = t5;
-	} else t5 = $[33];
-	let t6;
-	if ($[34] !== t1 || $[35] !== t2 || $[36] !== t3 || $[37] !== t4) {
-		t6 = /* @__PURE__ */ jsxs("figure", {
-			className: t1,
-			"aria-label": t2,
-			children: [
-				t3,
-				t4,
-				t5
-			]
-		});
-		$[34] = t1;
-		$[35] = t2;
-		$[36] = t3;
-		$[37] = t4;
-		$[38] = t6;
-	} else t6 = $[38];
-	return t6;
-}
-function _temp5$1(value_0) {
-	return value_0 !== "normal" && value_0.split(/\s+/).some(_temp4$3);
-}
-function _temp4$3(part) {
-	return parseFloat(part) !== 0 && Number.isFinite(parseFloat(part));
-}
-function _temp3$3(group) {
-	return group.properties;
-}
-function _temp2$4(value) {
-	return value.replace(/(-?\d*\.?\d+)px/g, _temp$6);
-}
-function _temp$6(_, amount) {
-	return String(Math.round(Number(amount) * 10) / 10);
-}
 //#endregion
 //#region src/configurator/ConfigurationLauncher.tsx
 function ConfigurationLauncher({ position, onOpen }) {
@@ -5096,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-Dp0kZVZM.js"));
+const ComponentGallery = lazy(() => import("../ComponentGallery-Da70Y4_Q.js"));
 function ComponentPreview(t0) {
 	const $ = c(14);
 	const { value, mode, inspector } = t0;
@@ -5341,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(() => {
@@ -5747,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();
@@ -6319,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);
@@ -6344,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 };