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

package/dist/inspection-model-LuI36xTg.js

@@ -0,0 +1,1339 @@
+import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
+import { t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
+import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.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 { i as buttonSizeDefinition, n as buttonDefinition, r as buttonIconSizeDefinition, t as buttonContentDefinition } from "./button.cva-rv5Uq4aW.js";
+import { r as badgeButtonDefinition } from "./badgeButton.cva-CvN4CTx5.js";
+import { t as formFieldErrorDefinition } from "./formFieldError.cva-CsXaQRHX.js";
+import { i as formFieldHeaderDefinition, n as labelDefinition, t as formFieldHelperDefinition } from "./formFieldHelper.cva-B8F9LmsE.js";
+import { t as tagDefinition } from "./tag.cva-B3MudLeC.js";
+import { a as inputSizeDefinition, i as inputSideDefinition, n as inputClearClassDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-DJA8ovm_.js";
+import { a as checkboxGroupLabelDefinition, i as checkboxDefinition, n as checkboxContentRowDefinition, o as checkboxIconDefinition, r as checkboxContentWrapperDefinition } from "./checkbox.cva-IfOByVLA.js";
+import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
+import { t as datePickerInputContentRowDefinition } from "./datePickerInput.cva-Cd7UUN61.js";
+import { n as switchDefinition } from "./switch.cva-BX3HOxbL.js";
+import { a as progressValueDefinition, i as progressTrackWrapperDefinition, n as progressFillDefinition, r as progressTrackDefinition, t as progressDefinition } from "./progress.cva-WQB8BGbk.js";
+import { t as fileUploadDropZoneDefinition } from "./fileUpload.cva-ujmStxB1.js";
+import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition } from "./radio.cva-DGbvTymp.js";
+import { n as toggleGroupItemDefinition, t as toggleGroupDefinition } from "./toggleGroup.cva-MbpaEBg1.js";
+import { t as textAreaWrapperDefinition } from "./TextArea.cva-Bb73hriz.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 { n as statusSeparatorDefinition, r as alertDefinition, t as statusIconDefinition } from "./status.cva-6HxNR4EP.js";
+import { a as toastDefinition, i as toastContainerDefinition } from "./toast.cva-C_L_RffH.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, s as theadDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
+import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
+import { t as tooltipWrapperTriggerDefinition } from "./tooltipWrapper.cva-BBQ4ic3D.js";
+import { r as emptyTheme, y as runtimeCss } from "./theme-model-DtYPxNvH.js";
+import { createContext, use, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#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$2 = {
+	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$2.node;
+const Moon = createLucideIcon(__iconData$2);
+//#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$1 = {
+	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$1.node;
+const Pin = 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);
+//#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(40);
+	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 [floating, setFloating] = useState(false);
+	const [revision, setRevision] = useState(0);
+	const [previewConfiguration, setPreviewConfiguration] = useState(null);
+	const active = previewConfiguration ?? (isOpen ? draft : applied);
+	let t1;
+	if ($[0] !== applied) {
+		t1 = () => {
+			setFloating(false);
+			setDraft(structuredClone(applied));
+			setRevision(_temp$1);
+			setOpen(true);
+		};
+		$[0] = applied;
+		$[1] = t1;
+	} else t1 = $[1];
+	const open = t1;
+	let t2;
+	if ($[2] !== isOpen || $[3] !== open) {
+		t2 = () => {
+			if (isOpen) setRevision(_temp2$1);
+			else open();
+			setFloating(true);
+		};
+		$[2] = isOpen;
+		$[3] = open;
+		$[4] = t2;
+	} else t2 = $[4];
+	const openFloating = t2;
+	let t3;
+	if ($[5] !== applied) {
+		t3 = () => {
+			setDraft(structuredClone(applied));
+			setOpen(false);
+		};
+		$[5] = applied;
+		$[6] = t3;
+	} else t3 = $[6];
+	const cancel = t3;
+	let t4;
+	if ($[7] !== draft || $[8] !== onApply) {
+		t4 = () => {
+			onApply?.(structuredClone(draft));
+			setApplied(structuredClone(draft));
+			setOpen(false);
+		};
+		$[7] = draft;
+		$[8] = onApply;
+		$[9] = t4;
+	} else t4 = $[9];
+	const apply = t4;
+	let t5;
+	if ($[10] !== active.overrides || $[11] !== inheritedOverrides) {
+		t5 = applyCvaEdits(inheritedOverrides, active.overrides);
+		$[10] = active.overrides;
+		$[11] = inheritedOverrides;
+		$[12] = t5;
+	} else t5 = $[12];
+	const overrides = t5;
+	let t6;
+	if ($[13] !== active || $[14] !== apply || $[15] !== cancel || $[16] !== defaults || $[17] !== draft || $[18] !== floating || $[19] !== inheritedOverrides || $[20] !== isOpen || $[21] !== open || $[22] !== openFloating || $[23] !== revision) {
+		t6 = {
+			defaults,
+			inheritedOverrides,
+			draft,
+			active,
+			setPreviewConfiguration,
+			setDraft,
+			isOpen,
+			open,
+			openFloating,
+			floating,
+			cancel,
+			apply,
+			revision
+		};
+		$[13] = active;
+		$[14] = apply;
+		$[15] = cancel;
+		$[16] = defaults;
+		$[17] = draft;
+		$[18] = floating;
+		$[19] = inheritedOverrides;
+		$[20] = isOpen;
+		$[21] = open;
+		$[22] = openFloating;
+		$[23] = revision;
+		$[24] = t6;
+	} else t6 = $[24];
+	const contextValue = t6;
+	let t7;
+	if ($[25] !== active.theme || $[26] !== defaults) {
+		t7 = runtimeCss(defaults, active.theme);
+		$[25] = active.theme;
+		$[26] = defaults;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== t7) {
+		t8 = /* @__PURE__ */ jsx("style", {
+			"data-povio-ui-configuration": true,
+			children: t7
+		});
+		$[28] = t7;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== active.config || $[31] !== children) {
+		t9 = /* @__PURE__ */ jsx(UIConfig.Provider, {
+			config: active.config,
+			children
+		});
+		$[30] = active.config;
+		$[31] = children;
+		$[32] = t9;
+	} else t9 = $[32];
+	let t10;
+	if ($[33] !== overrides || $[34] !== t9) {
+		t10 = /* @__PURE__ */ jsx(UIOverrides.Provider, {
+			config: overrides,
+			children: t9
+		});
+		$[33] = overrides;
+		$[34] = t9;
+		$[35] = t10;
+	} else t10 = $[35];
+	let t11;
+	if ($[36] !== contextValue || $[37] !== t10 || $[38] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(ConfigurationContext.Provider, {
+			value: contextValue,
+			children: [t8, t10]
+		});
+		$[36] = contextValue;
+		$[37] = t10;
+		$[38] = t8;
+		$[39] = t11;
+	} else t11 = $[39];
+	return t11;
+}
+function _temp2$1(value_0) {
+	return value_0 + 1;
+}
+function _temp$1(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/InspectorDetails.tsx
+/** Shared inspector measurements and property groups for preview and app canvas. */
+function InspectorDetails(t0) {
+	const $ = c(18);
+	const { snapshot, onSelect, onHighlight } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("h3", { children: "Layout" });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== snapshot.display) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-inspector-section-heading",
+			children: [t1, /* @__PURE__ */ jsx("span", {
+				title: "CSS display",
+				children: snapshot.display
+			})]
+		});
+		$[1] = snapshot.display;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== onHighlight || $[4] !== onSelect || $[5] !== snapshot) {
+		t3 = /* @__PURE__ */ jsx(BoxModel, {
+			snapshot,
+			onSelect,
+			onHighlight
+		});
+		$[3] = onHighlight;
+		$[4] = onSelect;
+		$[5] = snapshot;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("section", {
+			className: "studio-inspector-layout",
+			children: [t2, t3]
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== onSelect || $[11] !== snapshot.groups) {
+		let t6;
+		if ($[13] !== onSelect) {
+			t6 = (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);
+			$[13] = onSelect;
+			$[14] = t6;
+		} else t6 = $[14];
+		t5 = snapshot.groups.map(_temp).filter(_temp2).map(t6);
+		$[10] = onSelect;
+		$[11] = snapshot.groups;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t4, t5] });
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+function _temp2(group_0) {
+	return group_0.properties.length;
+}
+function _temp(group) {
+	return {
+		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))
+	};
+}
+function BoxModel(t0) {
+	const $ = c(39);
+	const { snapshot, onSelect, onHighlight } = t0;
+	const box = snapshot.box;
+	const number = _temp4;
+	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(_temp5);
+		const tokenFor = (label) => properties.find((property) => property.label === label)?.token;
+		const nonzero = _temp7;
+		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 _temp7(value_0) {
+	return value_0 !== "normal" && value_0.split(/\s+/).some(_temp6);
+}
+function _temp6(part) {
+	return parseFloat(part) !== 0 && Number.isFinite(parseFloat(part));
+}
+function _temp5(group) {
+	return group.properties;
+}
+function _temp4(value) {
+	return value.replace(/(-?\d*\.?\d+)px/g, _temp3);
+}
+function _temp3(_, amount) {
+	return String(Math.round(Number(amount) * 10) / 10);
+}
+//#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/token-classes.ts
+/** Tailwind breakpoints from the Atlas base theme, in rem. */
+const breakpoints = {
+	sm: 23.75,
+	md: 37.5,
+	lg: 80,
+	xl: 105
+};
+/** Utility prefix → the slots it sets, its specificity, and the theme namespace its value lives in. */
+const utilities = [
+	[
+		"p",
+		[
+			"padding.top",
+			"padding.right",
+			"padding.bottom",
+			"padding.left"
+		],
+		0,
+		"spacing"
+	],
+	[
+		"px",
+		["padding.left", "padding.right"],
+		1,
+		"spacing"
+	],
+	[
+		"py",
+		["padding.top", "padding.bottom"],
+		1,
+		"spacing"
+	],
+	[
+		"pt",
+		["padding.top"],
+		2,
+		"spacing"
+	],
+	[
+		"pr",
+		["padding.right"],
+		2,
+		"spacing"
+	],
+	[
+		"pe",
+		["padding.right"],
+		2,
+		"spacing"
+	],
+	[
+		"pb",
+		["padding.bottom"],
+		2,
+		"spacing"
+	],
+	[
+		"pl",
+		["padding.left"],
+		2,
+		"spacing"
+	],
+	[
+		"ps",
+		["padding.left"],
+		2,
+		"spacing"
+	],
+	[
+		"gap",
+		["gap.row", "gap.column"],
+		0,
+		"spacing"
+	],
+	[
+		"gap-x",
+		["gap.column"],
+		1,
+		"spacing"
+	],
+	[
+		"gap-y",
+		["gap.row"],
+		1,
+		"spacing"
+	],
+	[
+		"rounded",
+		["radius"],
+		0,
+		"radius"
+	]
+];
+/** Splits `md:hover:px-4` into its variants and utility, ignoring colons inside `[...]` / `(...)`. */
+function splitVariants(className) {
+	const parts = [];
+	let depth = 0;
+	let current = "";
+	for (const char of className) {
+		if (char === "[" || char === "(") depth++;
+		if (char === "]" || char === ")") depth--;
+		if (char === ":" && depth === 0) {
+			parts.push(current);
+			current = "";
+		} else current += char;
+	}
+	return {
+		variants: parts,
+		utility: current
+	};
+}
+/** Breakpoint weight when every variant is an active breakpoint; `undefined` for state variants or inactive breakpoints. */
+function variantWeight(variants, viewportWidth, rootFontSize) {
+	let weight = 0;
+	for (const variant of variants) {
+		const max = variant.startsWith("max-");
+		const size = breakpoints[max ? variant.slice(4) : variant];
+		if (size === void 0) return void 0;
+		if (!(max ? viewportWidth < size * rootFontSize : viewportWidth >= size * rootFontSize)) return void 0;
+		weight = Math.max(weight, size);
+	}
+	return weight;
+}
+function tokenFor(value, namespace, isKnown) {
+	const referenced = value.match(/^\[.*?var\((--[\w-]+)/)?.[1] ?? value.match(/^\((--[\w-]+)\)$/)?.[1];
+	if (referenced) return isKnown(referenced) ? referenced : void 0;
+	const name = `--${namespace}-${value}`;
+	return isKnown(name) ? name : void 0;
+}
+/**
+* Resolves which theme tokens drive an element's padding, gap and radius from its rendered Tailwind classes.
+* Only tokens accepted by `isKnown` are returned, so every result can be opened in the editor.
+*/
+function inspectTokens(className, isKnown, viewportWidth = Infinity, rootFontSize = 16) {
+	const winners = /* @__PURE__ */ new Map();
+	for (const raw of className.split(/\s+/).filter(Boolean)) {
+		const { variants, utility } = splitVariants(raw);
+		const weight = variantWeight(variants, viewportWidth, rootFontSize);
+		if (weight === void 0) continue;
+		const clean = utility.replace(/^!|!$/g, "");
+		for (const [prefix, slots, specificity, namespace] of utilities) {
+			if (!clean.startsWith(`${prefix}-`)) continue;
+			const token = tokenFor(clean.slice(prefix.length + 1), namespace, isKnown);
+			if (!token) continue;
+			const rank = weight * 10 + specificity;
+			for (const slot of slots) if ((winners.get(slot)?.rank ?? -1) <= rank) winners.set(slot, {
+				token,
+				rank
+			});
+		}
+	}
+	const result = {
+		padding: {},
+		gap: {}
+	};
+	for (const [slot, { token }] of winners) if (slot === "radius") result.radius = token;
+	else if (slot.startsWith("gap.")) result.gap[slot.slice(4)] = token;
+	else result.padding[slot.slice(8)] = token;
+	return result;
+}
+//#endregion
+//#region src/configurator/inspector/inspection-model.ts
+function readableColor(value) {
+	const rgb = value.trim().match(/^rgb\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*\)$/);
+	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
+export { InspectorDetails as a, useUIConfiguration as c, cvaDefinitions as d, Sun as f, HighlightOverlay as i, exportCvaEdits as l, Moon as m, inspectTokens as n, UIConfigurationProvider as o, Pin as p, getBoxHighlights as r, emptyConfiguration as s, inspectElement as t, resolveCvaDefinition as u };