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

package/dist/config/ui-configurator.js

@@ -8,6 +8,7 @@ import { t as Info } from "../info-iUmX3uDk.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition, u as Minus } from "../CheckboxCheckmark-CpC3wlMs.js";
 import { i as Search, n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "../selectDesktop.cva-CHAMxhfO.js";
 import { t as Upload } from "../upload-CXU83BJ4.js";
+import { t as X } from "../x-B6vfz8Ps.js";
 import { t as clsx } from "../clsx-CnD0nOiA.js";
 import { n as StyleMergeUtils, r as cva, t as UIOverrides } from "../uiOverrides.context-BTCH9y5a.js";
 import { c as $7230ffa83bc0c2cf$export$ef03459518577ad4, i as $7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8, l as $7230ffa83bc0c2cf$export$fabf2dc03a41866e, n as $7230ffa83bc0c2cf$export$29f1550f4b0d4415, r as $7230ffa83bc0c2cf$export$4d86445c2cf5e3, s as $7230ffa83bc0c2cf$export$df3a06d6289f983e, t as $7230ffa83bc0c2cf$export$2881499e37b75b9a } from "../utils-Czcqspm7.js";
@@ -48,7 +49,8 @@ import { a as toastDefinition, i as toastContainerDefinition } from "../toast.cv
 import { t as linkDefinition } from "../link.cva-DMTHZiJG.js";
 import { t as tooltipWrapperTriggerDefinition } from "../tooltipWrapper.cva-BBQ4ic3D.js";
 import { C as validToken, S as toRgb, _ as parseThemeCss, a as generateShades, b as spacingLevels, c as isFontSizeToken, d as layoutKindFor, f as layoutKinds, g as listedLayoutToken, h as linkedLayoutTokens, i as exportCss, l as isRgb, m as layoutScales, n as controlHeightCounterpart, o as groupFor, p as layoutLevelFor, r as emptyTheme, s as groups, t as baseColorNames, u as labelFor, v as previewTokens, x as toHex, y as runtimeCss } from "../theme-model-DtYPxNvH.js";
-import $ahdqC$react, { Suspense, createContext, lazy, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { n as splitVariants, t as inspectTokens } from "../token-classes-Bfcx0get.js";
+import $ahdqC$react, { Suspense, createContext, lazy, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "react-aria/mergeProps";
@@ -69,7 +71,7 @@ import { UNSAFE_PortalProvider } from "react-aria";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$9 = {
 	name: "arrow-down-to-line",
 	size: 24,
 	node: [
@@ -87,8 +89,8 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const ArrowDownToLine = createLucideIcon(__iconData$8);
+__iconData$9.node;
+const ArrowDownToLine = createLucideIcon(__iconData$9);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.mjs
 /**
@@ -97,7 +99,7 @@ const ArrowDownToLine = createLucideIcon(__iconData$8);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$7 = {
+const __iconData$8 = {
 	name: "chevrons-up-down",
 	size: 24,
 	node: [["path", {
@@ -108,8 +110,8 @@ const __iconData$7 = {
 		key: "sgt6xg"
 	}]]
 };
-__iconData$7.node;
-const ChevronsUpDown = createLucideIcon(__iconData$7);
+__iconData$8.node;
+const ChevronsUpDown = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/external-link.mjs
 /**
@@ -118,7 +120,7 @@ const ChevronsUpDown = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$7 = {
 	name: "external-link",
 	size: 24,
 	node: [
@@ -136,8 +138,8 @@ const __iconData$6 = {
 		}]
 	]
 };
-__iconData$6.node;
-const ExternalLink = createLucideIcon(__iconData$6);
+__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
 /**
@@ -146,7 +148,7 @@ const ExternalLink = 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$6 = {
 	name: "moon",
 	size: 24,
 	node: [["path", {
@@ -154,8 +156,8 @@ const __iconData$5 = {
 		key: "kfwtm"
 	}]]
 };
-__iconData$5.node;
-const Moon = createLucideIcon(__iconData$5);
+__iconData$6.node;
+const Moon = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-top.mjs
 /**
@@ -164,7 +166,7 @@ const Moon = createLucideIcon(__iconData$5);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$4 = {
+const __iconData$5 = {
 	name: "panel-top",
 	size: 24,
 	node: [["rect", {
@@ -179,8 +181,29 @@ const __iconData$4 = {
 		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 PanelTop = createLucideIcon(__iconData$4);
+const Pin = createLucideIcon(__iconData$4);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/plus.mjs
 /**
@@ -599,7 +622,7 @@ function UIConfigurationProvider(t0) {
 	if ($[0] !== applied) {
 		t1 = () => {
 			setDraft(structuredClone(applied));
-			setRevision(_temp$6);
+			setRevision(_temp$7);
 			setOpen(true);
 		};
 		$[0] = applied;
@@ -709,7 +732,7 @@ function UIConfigurationProvider(t0) {
 	} else t10 = $[33];
 	return t10;
 }
-function _temp$6(value) {
+function _temp$7(value) {
 	return value + 1;
 }
 function useUIConfiguration() {
@@ -718,6 +741,1013 @@ function useUIConfiguration() {
 	return context;
 }
 //#endregion
+//#region src/configurator/inspector/HighlightOverlay.tsx
+const arcs = {
+	topLeft: "M0 100 A100 100 0 0 1 100 0",
+	topRight: "M0 0 A100 100 0 0 1 100 100",
+	bottomRight: "M100 0 A100 100 0 0 1 0 100",
+	bottomLeft: "M100 100 A100 100 0 0 1 0 0"
+};
+function HighlightOverlay(t0) {
+	const $ = c(17);
+	const { highlight, width } = t0;
+	const first = highlight.regions[0];
+	let t1;
+	if ($[0] !== highlight.key) {
+		t1 = highlight.key.split(".");
+		$[0] = highlight.key;
+		$[1] = t1;
+	} else t1 = $[1];
+	const kind = t1[0];
+	const t2 = highlight.key;
+	let t3;
+	if ($[2] !== highlight.regions || $[3] !== kind) {
+		let t4;
+		if ($[5] !== kind) {
+			t4 = (region) => /* @__PURE__ */ jsx("div", {
+				className: `studio-measure-region is-${kind}${region.line ? ` is-${region.line}` : ""}${region.corner ? " is-corner" : ""}`,
+				style: {
+					left: region.left,
+					top: region.top,
+					width: region.width,
+					height: region.height
+				},
+				children: region.corner && /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 100 100",
+					preserveAspectRatio: "none",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", {
+						d: arcs[region.corner],
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						vectorEffect: "non-scaling-stroke"
+					})
+				})
+			}, `${region.left}:${region.top}:${region.width}:${region.height}`);
+			$[5] = kind;
+			$[6] = t4;
+		} else t4 = $[6];
+		t3 = highlight.regions.map(t4);
+		$[2] = highlight.regions;
+		$[3] = kind;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = Math.max(4, Math.min(first?.left ?? 4, width - 220));
+	const t5 = Math.max(4, (first?.top ?? 26) - 22);
+	let t6;
+	if ($[7] !== t4 || $[8] !== t5) {
+		t6 = {
+			left: t4,
+			top: t5
+		};
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== highlight.label || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: "studio-measure-label",
+			style: t6,
+			children: highlight.label
+		});
+		$[10] = highlight.label;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== highlight.key || $[14] !== t3 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "studio-measure-regions",
+			"data-property": t2,
+			children: [t3, t7]
+		});
+		$[13] = highlight.key;
+		$[14] = t3;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
+}
+//#endregion
+//#region src/configurator/inspector/box-highlights.ts
+const sides = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const corners = [
+	"topLeft",
+	"topRight",
+	"bottomRight",
+	"bottomLeft"
+];
+const numeric = (value) => Number.parseFloat(value) || 0;
+const formatted = (value) => String(Math.round(value * 100) / 100);
+/** Read-only geometry in the inspected element's viewport (including pop-out documents). */
+function getBoxHighlights(element, key) {
+	const view = element.ownerDocument.defaultView;
+	if (!view) return {
+		regions: [],
+		label: ""
+	};
+	const style = view.getComputedStyle(element);
+	const rect = element.getBoundingClientRect();
+	const sx = element.offsetWidth ? rect.width / element.offsetWidth : 1;
+	const sy = element.offsetHeight ? rect.height / element.offsetHeight : 1;
+	const read = (name) => style.getPropertyValue(name);
+	const scale = (side) => side === "left" || side === "right" ? sx : sy;
+	const values = (prefix, suffix = "") => Object.fromEntries(sides.map((side) => [side, numeric(read(`${prefix}-${side}${suffix}`)) * scale(side)]));
+	const border = values("border", "-width");
+	const padding = values("padding");
+	const inner = {
+		left: rect.left + border.left,
+		top: rect.top + border.top,
+		width: Math.max(0, rect.width - border.left - border.right),
+		height: Math.max(0, rect.height - border.top - border.bottom)
+	};
+	const content = {
+		left: inner.left + padding.left,
+		top: inner.top + padding.top,
+		width: Math.max(0, inner.width - padding.left - padding.right),
+		height: Math.max(0, inner.height - padding.top - padding.bottom)
+	};
+	const [kind, part] = key.split(".");
+	let regions = [];
+	let value = "";
+	if (kind === "width" || kind === "height") {
+		value = formatted(content[kind] / (kind === "width" ? sx : sy));
+		regions = [{
+			left: content.left,
+			top: content.top,
+			width: kind === "width" ? content.width : 1,
+			height: kind === "height" ? content.height : 1,
+			line: kind === "width" ? "horizontal" : "vertical"
+		}];
+	} else if (kind === "radius") {
+		const radii = corners.map((corner) => {
+			const cssCorner = corner.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+			const components = read(`border-${cssCorner}-radius`).trim().split(/\s+/);
+			const resolve = (raw, dimension, factor) => raw.endsWith("%") ? numeric(raw) / 100 * dimension : numeric(raw) * factor;
+			return [resolve(components[0] || "0", rect.width, sx), resolve(components[1] || components[0] || "0", rect.height, sy)];
+		});
+		const factor = Math.min(1, rect.width / (radii[0][0] + radii[1][0] || 1), rect.width / (radii[3][0] + radii[2][0] || 1), rect.height / (radii[0][1] + radii[3][1] || 1), rect.height / (radii[1][1] + radii[2][1] || 1));
+		const corner = part;
+		const radius = radii[corners.indexOf(corner)];
+		const width = Math.max(1, radius[0] * factor);
+		const height = Math.max(1, radius[1] * factor);
+		value = `${formatted(radius[0] * factor / sx)} × ${formatted(radius[1] * factor / sy)}`;
+		regions = [{
+			left: rect.left + (corner.endsWith("Right") ? rect.width - width : 0),
+			top: rect.top + (corner.startsWith("bottom") ? rect.height - height : 0),
+			width,
+			height,
+			corner
+		}];
+	} else if (kind === "gap") {
+		const row = part === "row";
+		const rawGap = read(`${part}-gap`);
+		const gap = rawGap.endsWith("%") ? numeric(rawGap) / 100 * (row ? content.height / sy : content.width / sx) : numeric(rawGap);
+		const size = gap * (row ? sy : sx);
+		value = formatted(gap);
+		if (size > 0 && /^(inline-)?(flex|grid)$/.test(read("display"))) {
+			const children = Array.from(element.children).slice(0, 80).flatMap((child) => {
+				const childStyle = view.getComputedStyle(child);
+				const box = child.getBoundingClientRect();
+				return childStyle.display === "none" || childStyle.visibility === "hidden" || /^(absolute|fixed)$/.test(childStyle.position) || !box.width || !box.height ? [] : [box];
+			}).sort((a, b) => row ? a.top - b.top : a.left - b.left);
+			const seen = /* @__PURE__ */ new Set();
+			for (let i = 0; i < children.length; i++) {
+				const a = children[i];
+				for (let j = i + 1; j < children.length; j++) {
+					const b = children[j];
+					const start = row ? a.bottom : a.right;
+					const end = row ? b.top : b.left;
+					const crossStart = Math.max(row ? a.left : a.top, row ? b.left : b.top, row ? content.left : content.top);
+					const crossEnd = Math.min(row ? a.right : a.bottom, row ? b.right : b.bottom, row ? content.left + content.width : content.top + content.height);
+					if (end - start < size - .5 || crossEnd <= crossStart) continue;
+					if (children.some((c, index) => index !== i && index !== j && (row ? c.top >= start && c.bottom <= end && c.right > crossStart && c.left < crossEnd : c.left >= start && c.right <= end && c.bottom > crossStart && c.top < crossEnd))) continue;
+					const axisStart = Math.max((start + end - size) / 2, row ? content.top : content.left);
+					const axisEnd = Math.min((start + end + size) / 2, row ? content.top + content.height : content.left + content.width);
+					if (axisEnd <= axisStart) continue;
+					const region = row ? {
+						left: crossStart,
+						top: axisStart,
+						width: crossEnd - crossStart,
+						height: axisEnd - axisStart
+					} : {
+						left: axisStart,
+						top: crossStart,
+						width: axisEnd - axisStart,
+						height: crossEnd - crossStart
+					};
+					const id = Object.values(region).map(formatted).join(",");
+					if (!seen.has(id)) {
+						seen.add(id);
+						regions.push(region);
+					}
+				}
+			}
+		}
+	} else {
+		const side = part;
+		const horizontal = side === "top" || side === "bottom";
+		const raw = read(kind === "position" ? side : `${kind}-${side}${kind === "border" ? "-width" : ""}`);
+		const amount = numeric(raw) * scale(side);
+		value = formatted(numeric(raw));
+		const base = kind === "padding" ? inner : rect;
+		const outward = kind === "margin" || kind === "position";
+		const thickness = Math.max(1, Math.abs(amount));
+		const positiveEdge = side === "bottom" || side === "right";
+		const edge = horizontal ? base.top + (positiveEdge ? base.height : 0) : base.left + (positiveEdge ? base.width : 0);
+		const offset = outward ? positiveEdge ? amount < 0 ? -thickness : 0 : amount < 0 ? 0 : -thickness : positiveEdge ? -thickness : 0;
+		regions = [{
+			left: horizontal ? base.left : edge + offset,
+			top: horizontal ? edge + offset : base.top,
+			width: horizontal ? base.width : thickness,
+			height: horizontal ? thickness : base.height
+		}];
+		if (kind === "position") {
+			if (raw === "auto" || read("position") === "static") regions = [];
+			else if (read("position") === "absolute" || read("position") === "fixed") {
+				const parent = element.offsetParent;
+				const parentRect = parent?.getBoundingClientRect();
+				const parentStyle = parent ? view.getComputedStyle(parent) : null;
+				const parentScale = parent && "offsetWidth" in parent && parent.offsetWidth ? parentRect.width / Number(parent.offsetWidth) : 1;
+				const parentScaleY = parent && "offsetHeight" in parent && parent.offsetHeight ? parentRect.height / Number(parent.offsetHeight) : 1;
+				const referenceEdge = (parentRect ? {
+					left: parentRect.left + numeric(parentStyle.getPropertyValue("border-left-width")) * parentScale,
+					right: parentRect.right - numeric(parentStyle.getPropertyValue("border-right-width")) * parentScale,
+					top: parentRect.top + numeric(parentStyle.getPropertyValue("border-top-width")) * parentScaleY,
+					bottom: parentRect.bottom - numeric(parentStyle.getPropertyValue("border-bottom-width")) * parentScaleY
+				} : {
+					left: 0,
+					top: 0,
+					right: view.innerWidth,
+					bottom: view.innerHeight
+				})[side];
+				const targetEdge = edge + (positiveEdge ? 1 : -1) * numeric(read(`margin-${side}`)) * scale(side);
+				const start = Math.min(referenceEdge, targetEdge);
+				const length = Math.max(1, Math.abs(referenceEdge - targetEdge));
+				regions = [{
+					left: horizontal ? rect.left : start,
+					top: horizontal ? start : rect.top,
+					width: horizontal ? rect.width : length,
+					height: horizontal ? length : rect.height
+				}];
+			}
+		}
+	}
+	const name = key.replace(".", " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase();
+	return {
+		regions,
+		label: `${name}: ${value} px`
+	};
+}
+//#endregion
+//#region src/configurator/inspector/inspection-model.ts
+function readableColor(value) {
+	const rgb = value.trim().match(/^rgb\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)\s*\)$/);
+	if (!rgb) return value;
+	return `#${rgb.slice(1).map((channel) => Number(channel).toString(16).padStart(2, "0")).join("")}`;
+}
+function resolveToken(style, name, seen = /* @__PURE__ */ new Set()) {
+	if (seen.has(name)) return "";
+	seen.add(name);
+	const value = style.getPropertyValue(name).trim();
+	const reference = value.match(/^var\((--[\w-]+)\)$/);
+	return reference ? resolveToken(style, reference[1], seen) : value;
+}
+/** Read-only inspection; always use the element's window, including detached previews. */
+function inspectElement(element, isKnown) {
+	const view = element.ownerDocument.defaultView;
+	if (!view) throw new Error("The inspected element has no document window.");
+	const style = view.getComputedStyle(element);
+	const rootFontSize = Number.parseFloat(view.getComputedStyle(element.ownerDocument.documentElement).fontSize) || 16;
+	const bounds = element.getBoundingClientRect();
+	const sides = [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	];
+	const readSides = (prefix, suffix = "") => Object.fromEntries(sides.map((side) => [side, style.getPropertyValue(`${prefix}${side}${suffix}`) || "0px"]));
+	const padding = readSides("padding-");
+	const border = readSides("border-", "-width");
+	const margin = readSides("margin-");
+	const contentDimension = (axis) => {
+		const value = style.getPropertyValue(axis);
+		const dimension = Number.parseFloat(value);
+		const hasPixelDimension = /^\d+(?:\.\d+)?px$/.test(value);
+		if (hasPixelDimension && style.getPropertyValue("box-sizing") !== "border-box") return dimension;
+		const inset = (axis === "width" ? ["left", "right"] : ["top", "bottom"]).reduce((total, side) => total + (Number.parseFloat(padding[side]) || 0) + (Number.parseFloat(border[side]) || 0), 0);
+		return Math.max(0, (hasPixelDimension ? dimension : bounds[axis]) - inset);
+	};
+	const box = {
+		content: {
+			width: contentDimension("width"),
+			height: contentDimension("height")
+		},
+		padding,
+		border,
+		margin,
+		radius: {
+			topLeft: style.getPropertyValue("border-top-left-radius") || "0px",
+			topRight: style.getPropertyValue("border-top-right-radius") || "0px",
+			bottomRight: style.getPropertyValue("border-bottom-right-radius") || "0px",
+			bottomLeft: style.getPropertyValue("border-bottom-left-radius") || "0px"
+		},
+		gap: {
+			row: style.getPropertyValue("row-gap") || "normal",
+			column: style.getPropertyValue("column-gap") || "normal"
+		}
+	};
+	const position = style.getPropertyValue("position");
+	if (position && position !== "static") box.position = readSides("");
+	const classes = Array.from(element.classList);
+	const plainClasses = classes.filter((name) => !splitVariants(name).variants.length && !name.includes("["));
+	const spacing = inspectTokens(plainClasses.join(" "), isKnown);
+	const candidates = (prefix, namespaces) => plainClasses.flatMap((raw) => {
+		const utility = raw.replace(/^!|!$/g, "");
+		if (!utility.startsWith(`${prefix}-`)) return [];
+		const suffix = utility.slice(prefix.length + 1);
+		return namespaces.map((namespace) => `--${namespace}${suffix}`);
+	});
+	const variantsAffect = (prefixes) => classes.some((raw) => {
+		const { variants, utility } = splitVariants(raw);
+		return variants.length > 0 && prefixes.some((prefix) => utility.replace(/^!/, "").startsWith(`${prefix}-`));
+	});
+	const equivalent = (value, computed, property) => {
+		if (!value) return false;
+		if (property.includes("color")) {
+			if (value.match(/^\d+(?:\.\d+)?\s+\d+(?:\.\d+)?\s+\d+(?:\.\d+)?$/)) value = `rgb(${value})`;
+			return readableColor(value).toLowerCase() === readableColor(computed).toLowerCase();
+		}
+		const length = value.match(/^(-?\d+(?:\.\d+)?)(rem|px|em)$/);
+		if (length && computed.endsWith("px")) {
+			let factor = 1;
+			if (length[2] === "rem") factor = rootFontSize;
+			if (length[2] === "em") factor = Number.parseFloat(style.fontSize);
+			return Math.abs(Number(length[1]) * factor - Number.parseFloat(computed)) < .02;
+		}
+		return value.replace(/["']/g, "").replace(/\s+/g, " ") === computed.replace(/["']/g, "").replace(/\s+/g, " ");
+	};
+	const property = (label, css, tokens = [], prefixes = []) => {
+		const computed = style.getPropertyValue(css);
+		const matching = variantsAffect(prefixes) ? [] : tokens.filter((token) => !!token && isKnown(token) && equivalent(resolveToken(style, token), computed, css));
+		const token = [...new Set(matching)][0];
+		const isColor = css.includes("color");
+		return {
+			label,
+			value: isColor ? readableColor(computed) : computed,
+			...token ? { token } : {},
+			...isColor ? { color: computed } : {}
+		};
+	};
+	const tag = element.tagName.toLowerCase();
+	const role = element.getAttribute("role");
+	const context = element.closest("[data-inspector-name]")?.getAttribute("data-inspector-name") || element.closest(".studio-gallery-card")?.querySelector(".studio-gallery-card-title")?.textContent?.trim();
+	const description = (element.getAttribute("aria-label") || element.innerText || element.textContent || "").trim().replace(/\s+/g, " ").slice(0, 100);
+	const name = context || role || tag;
+	const paddingPrefixes = [
+		"p",
+		"px",
+		"py",
+		"pt",
+		"pr",
+		"pb",
+		"pl",
+		"ps",
+		"pe"
+	];
+	const layout = [
+		{
+			label: "Width",
+			value: style.getPropertyValue("width") || `${bounds.width}px`
+		},
+		{
+			label: "Height",
+			value: style.getPropertyValue("height") || `${bounds.height}px`
+		},
+		property("Display", "display"),
+		property("Position", "position"),
+		...sides.map((side) => property(`Padding ${side}`, `padding-${side}`, [spacing.padding[side]], paddingPrefixes)),
+		...sides.map((side) => property(`Margin ${side}`, `margin-${side}`)),
+		property("Row gap", "row-gap", [spacing.gap.row], ["gap"]),
+		property("Column gap", "column-gap", [spacing.gap.column], ["gap"]),
+		property("Radius", "border-radius", [spacing.radius], ["rounded"]),
+		...sides.map((side) => property(`Border ${side} width`, `border-${side}-width`))
+	];
+	const typography = [
+		property("Font", "font-family", candidates("font", ["font-"]), ["font"]),
+		property("Size", "font-size", candidates("text", ["text-"]), ["text"]),
+		property("Weight", "font-weight", candidates("font", ["font-weight-"]), ["font"]),
+		property("Line height", "line-height"),
+		property("Letter spacing", "letter-spacing"),
+		property("Alignment", "text-align")
+	];
+	const appearance = [
+		property("Text", "color", candidates("text", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["text"]),
+		property("Fill", "background-color", candidates("bg", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["bg"]),
+		property("Border", "border-top-color", candidates("border", ["color-", ""]).flatMap((token) => [token, `${token}-base`]), ["border"]),
+		property("Opacity", "opacity"),
+		property("Shadow", "box-shadow")
+	];
+	const isZero = (value) => value.split(/\s+/).every((part) => /^-?0(?:\.0+)?(?:px|rem|em|%)?$/.test(part));
+	const visibleProperty = (row) => {
+		if (row.label === "Width" || row.label === "Height" || row.token) return true;
+		const value = row.value.trim();
+		if (!value) return false;
+		if (/^(Padding|Margin|Border .* width|Row gap|Column gap|Radius)/.test(row.label) && (isZero(value) || value === "normal")) return false;
+		if (row.label === "Position" && value === "static") return false;
+		if (row.label === "Display" && ["inline", "block"].includes(value)) return false;
+		if (row.label === "Shadow" && value === "none") return false;
+		if (row.label === "Opacity" && Number(value) === 1) return false;
+		if (row.label === "Fill" && (value === "transparent" || /^rgba?\([^)]*[,/]\s*0(?:\.0+)?%?\s*\)$/.test(value))) return false;
+		if (row.label === "Border" && !(Number.parseFloat(border.top) > 0)) return false;
+		if (row.label === "Line height" && value === "normal") return false;
+		if (row.label === "Letter spacing" && (value === "normal" || isZero(value))) return false;
+		if (row.label === "Alignment" && [
+			"normal",
+			"start",
+			"left"
+		].includes(value)) return false;
+		if (row.label === "Weight" && ["400", "normal"].includes(value)) return false;
+		return true;
+	};
+	return {
+		name,
+		display: style.display,
+		tag,
+		description,
+		width: bounds.width,
+		height: bounds.height,
+		box,
+		groups: [
+			{
+				name: "Layout",
+				properties: layout
+			},
+			{
+				name: "Typography",
+				properties: typography
+			},
+			{
+				name: "Appearance",
+				properties: appearance
+			}
+		].map((group) => ({
+			name: group.name,
+			properties: group.properties.filter(visibleProperty)
+		})).filter((group) => group.properties.length > 0)
+	};
+}
+//#endregion
+//#region src/configurator/inspector/PreviewInspector.tsx
+/** Read the real element underneath the inert gallery's stretched zoom button. */
+function elementAtPoint(root, x, y) {
+	const direct = root.ownerDocument.elementsFromPoint(x, y).find((element) => root.contains(element));
+	if (!direct || direct.closest(".studio-inspect-layer")) return null;
+	const demo = direct.closest(".studio-gallery-card")?.querySelector(".studio-gallery-demo");
+	let hit = direct;
+	if (demo) {
+		const found = [demo, ...demo.querySelectorAll("*")].reverse().find((element) => {
+			if (element.namespaceURI !== "http://www.w3.org/1999/xhtml" || element.closest(".sr-only")) return false;
+			const rect = element.getBoundingClientRect();
+			return rect.width > 1 && rect.height > 1 && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+		});
+		if (!found) return null;
+		hit = found;
+	}
+	const semantic = hit.closest("button,input,textarea,select,a,label,[role],h1,h2,h3,h4,h5,h6,p");
+	if (semantic && root.contains(semantic) && (!demo || demo.contains(semantic))) hit = semantic;
+	if (hit.namespaceURI !== "http://www.w3.org/1999/xhtml" || hit === root || hit.classList.contains("studio-gallery-card-hit")) return null;
+	return hit;
+}
+function PreviewInspector({ children, revision, isKnown, onSelect, onScroll }) {
+	const selectionDescriptionId = useId();
+	const rootRef = useRef(null);
+	const targetRef = useRef(null);
+	const frameRef = useRef(null);
+	const pendingPoint = useRef(null);
+	const pinnedRef = useRef(false);
+	const [pinned, setPinned] = useState(false);
+	const [inspectMode, setInspectMode] = useState(true);
+	const [snapshot, setSnapshot] = useState(null);
+	const [outline, setOutline] = useState(null);
+	const highlightKey = useRef(null);
+	const [highlight, setHighlight] = useState(null);
+	const measure = useCallback(() => {
+		const root = rootRef.current;
+		const target = targetRef.current;
+		if (!root || !target?.isConnected || !root.contains(target)) {
+			targetRef.current = null;
+			pinnedRef.current = false;
+			setPinned(false);
+			setSnapshot(null);
+			setOutline(null);
+			highlightKey.current = null;
+			setHighlight(null);
+			return;
+		}
+		const rect = target.getBoundingClientRect();
+		if (!rect.width || !rect.height) {
+			setSnapshot(null);
+			setOutline(null);
+			highlightKey.current = null;
+			setHighlight(null);
+			return;
+		}
+		const origin = root.getBoundingClientRect();
+		const next = inspectElement(target, isKnown);
+		setSnapshot((current) => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+		setOutline({
+			left: rect.left - origin.left,
+			top: rect.top - origin.top,
+			width: rect.width,
+			height: rect.height
+		});
+		if (highlightKey.current) {
+			const details = getBoxHighlights(target, highlightKey.current);
+			setHighlight({
+				key: highlightKey.current,
+				label: details.label,
+				regions: details.regions.map((region) => ({
+					width: region.width,
+					height: region.height,
+					corner: region.corner,
+					line: region.line,
+					left: region.left - origin.left,
+					top: region.top - origin.top
+				}))
+			});
+		}
+	}, [isKnown]);
+	const schedule = useCallback(() => {
+		const owner = rootRef.current?.ownerDocument.defaultView;
+		if (!owner || frameRef.current !== null) return;
+		frameRef.current = owner.requestAnimationFrame(() => {
+			frameRef.current = null;
+			const root_0 = rootRef.current;
+			const point = pendingPoint.current;
+			pendingPoint.current = null;
+			if (root_0 && point && !pinnedRef.current) {
+				const hit = elementAtPoint(root_0, point.x, point.y);
+				if (hit) targetRef.current = hit;
+			}
+			measure();
+		});
+	}, [measure]);
+	useLayoutEffect(schedule, [schedule, revision]);
+	useEffect(() => {
+		const root_1 = rootRef.current;
+		const owner_0 = root_1?.ownerDocument.defaultView;
+		if (!root_1 || !owner_0) return;
+		const observer = new ResizeObserver(schedule);
+		observer.observe(root_1);
+		const modal = root_1.closest(".studio-modal");
+		if (modal) observer.observe(modal);
+		const mutations = new MutationObserver((records) => {
+			if (records.some((record) => {
+				return !(record.target.nodeType === 1 ? record.target : record.target.parentElement)?.closest(".studio-hover-outline-layer");
+			})) schedule();
+		});
+		mutations.observe(root_1, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true
+		});
+		owner_0.addEventListener("scroll", schedule, true);
+		owner_0.addEventListener("resize", schedule);
+		return () => {
+			observer.disconnect();
+			mutations.disconnect();
+			owner_0.removeEventListener("scroll", schedule, true);
+			owner_0.removeEventListener("resize", schedule);
+			if (frameRef.current !== null) owner_0.cancelAnimationFrame(frameRef.current);
+			frameRef.current = null;
+		};
+	}, [schedule]);
+	const showHighlight = useCallback((key) => {
+		highlightKey.current = key;
+		if (!key) {
+			setHighlight(null);
+			return;
+		}
+		const target_0 = targetRef.current;
+		const canvas = rootRef.current;
+		if (target_0 && canvas) {
+			const rect_0 = target_0.getBoundingClientRect();
+			const view = canvas.getBoundingClientRect();
+			if (rect_0.bottom < view.top || rect_0.top > view.bottom || rect_0.right < view.left || rect_0.left > view.right) target_0.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+		schedule();
+	}, [schedule]);
+	const dismiss = () => {
+		targetRef.current = null;
+		pendingPoint.current = null;
+		pinnedRef.current = false;
+		setPinned(false);
+		setSnapshot(null);
+		setOutline(null);
+		highlightKey.current = null;
+		setHighlight(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `studio-hover-inspector${inspectMode || snapshot ? " has-inspector" : ""}`,
+		onPointerMoveCapture: (event) => {
+			if (event.target.closest(".studio-inspector-panel, .studio-inspector-toolbar")) return;
+			if (!inspectMode) return;
+			if (!pinnedRef.current) pendingPoint.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			schedule();
+		},
+		onFocusCapture: (event_0) => {
+			if (event_0.target.closest(".studio-inspector-panel, .studio-inspector-toolbar") || !inspectMode) return;
+			if (pinnedRef.current || !rootRef.current) return;
+			const element_0 = event_0.target;
+			const rect_1 = element_0.getBoundingClientRect();
+			targetRef.current = elementAtPoint(rootRef.current, rect_1.left + rect_1.width / 2, rect_1.top + rect_1.height / 2) ?? element_0;
+			schedule();
+		},
+		onPointerDownCapture: (event_1) => {
+			if (!inspectMode || event_1.target.closest(".studio-inspector-panel, .studio-inspector-toolbar, .studio-inspect-region")) return;
+			event_1.preventDefault();
+			event_1.stopPropagation();
+		},
+		onClickCapture: (event_2) => {
+			const element_1 = event_2.target;
+			if (!inspectMode || element_1.closest(".studio-inspector-panel, .studio-inspector-toolbar, .studio-inspect-region")) return;
+			const root_2 = rootRef.current;
+			if (!root_2) return;
+			const rect_2 = element_1.getBoundingClientRect();
+			const hit_0 = elementAtPoint(root_2, event_2.detail ? event_2.clientX : rect_2.left + rect_2.width / 2, event_2.detail ? event_2.clientY : rect_2.top + rect_2.height / 2);
+			if (!hit_0) return;
+			event_2.preventDefault();
+			event_2.stopPropagation();
+			if (pinnedRef.current && targetRef.current === hit_0) {
+				pinnedRef.current = false;
+				setPinned(false);
+				schedule();
+				return;
+			}
+			targetRef.current = hit_0;
+			pendingPoint.current = null;
+			pinnedRef.current = true;
+			setPinned(true);
+			schedule();
+		},
+		onKeyDownCapture: (event_3) => {
+			if (inspectMode && rootRef.current?.contains(event_3.target) && [
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown"
+			].includes(event_3.key)) {
+				event_3.preventDefault();
+				event_3.stopPropagation();
+				return;
+			}
+			if (event_3.key === "Escape" && snapshot && inspectMode) {
+				event_3.preventDefault();
+				event_3.stopPropagation();
+				dismiss();
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-inspector-toolbar",
+				children: [/* @__PURE__ */ jsx("span", { children: pinned ? "Selection pinned" : "Hover to inspect · click to select" }), /* @__PURE__ */ jsxs("div", {
+					className: "studio-mode",
+					role: "group",
+					"aria-label": "Preview interaction",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": inspectMode,
+						onClick: () => setInspectMode(true),
+						children: "Inspect"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": !inspectMode,
+						onClick: () => setInspectMode(false),
+						children: "Interact"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "studio-inspector-canvas-shell",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: rootRef,
+					className: "studio-inspector-canvas",
+					onScroll: (event_4) => onScroll?.(event_4.currentTarget.scrollTop),
+					children
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "studio-hover-outline-layer",
+					"aria-hidden": "true",
+					children: [outline && snapshot && /* @__PURE__ */ jsx("div", {
+						className: "studio-hover-outline",
+						style: outline,
+						children: !highlight && /* @__PURE__ */ jsxs("span", { children: [
+							snapshot.name,
+							" · ",
+							Math.round(snapshot.width),
+							" × ",
+							Math.round(snapshot.height)
+						] })
+					}), highlight && /* @__PURE__ */ jsx(HighlightOverlay, {
+						highlight,
+						width: rootRef.current?.clientWidth ?? 0
+					})]
+				})]
+			}),
+			(inspectMode || snapshot) && /* @__PURE__ */ jsxs("aside", {
+				className: "studio-inspector-panel",
+				"aria-label": "Inspector view",
+				"aria-describedby": selectionDescriptionId,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						id: selectionDescriptionId,
+						hidden: true,
+						children: snapshot ? `Inspecting ${snapshot.name}` : "No selected element"
+					}),
+					/* @__PURE__ */ jsxs("header", { children: [
+						/* @__PURE__ */ jsx("strong", { children: "Inspector view" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Pin inspected element",
+							"aria-pressed": pinned,
+							disabled: !snapshot,
+							title: "Pin inspected element",
+							onClick: () => {
+								pinnedRef.current = !pinned;
+								setPinned(!pinned);
+							},
+							children: /* @__PURE__ */ jsx(Pin, { size: 14 })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Close inspector view",
+							onClick: () => {
+								dismiss();
+								setInspectMode(false);
+							},
+							children: /* @__PURE__ */ jsx(X, { size: 15 })
+						})
+					] }),
+					snapshot ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("section", {
+						className: "studio-inspector-layout",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "studio-inspector-section-heading",
+							children: [/* @__PURE__ */ jsx("h3", { children: "Layout" }), /* @__PURE__ */ jsx("span", {
+								title: "CSS display",
+								children: snapshot.display
+							})]
+						}), /* @__PURE__ */ jsx(BoxModel, {
+							snapshot,
+							onSelect,
+							onHighlight: showHighlight
+						})]
+					}), snapshot.groups.map((group) => ({
+						name: group.name,
+						properties: group.properties.filter((property) => group.name !== "Layout" || ![
+							"Width",
+							"Height",
+							"Margin",
+							"Border width",
+							"Radius",
+							"Row gap",
+							"Column gap",
+							"Display"
+						].includes(property.label) && !/^(Padding |Margin |Border .* width$)/.test(property.label))
+					})).filter((group_0) => group_0.properties.length).map((group_1) => /* @__PURE__ */ jsxs("section", { children: [group_1.name !== "Layout" && /* @__PURE__ */ jsx("h3", { children: group_1.name }), /* @__PURE__ */ jsx("dl", { children: group_1.properties.map((property_0) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: property_0.label }), /* @__PURE__ */ jsxs("dd", { children: [
+						property_0.color && /* @__PURE__ */ jsx("i", { style: { background: property_0.color } }),
+						/* @__PURE__ */ jsx("span", { children: property_0.value }),
+						property_0.token && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							title: `Edit ${property_0.token}`,
+							onClick: () => onSelect(property_0.token),
+							children: property_0.token.replace(/^--/, "")
+						})
+					] })] }, property_0.label)) })] }, group_1.name))] }) : /* @__PURE__ */ jsx("p", {
+						className: "studio-inspector-empty",
+						children: "Hover an element in the preview to inspect it. Click to pin your selection."
+					})
+				]
+			})
+		]
+	});
+}
+function BoxModel(t0) {
+	const $ = c(39);
+	const { snapshot, onSelect, onHighlight } = t0;
+	const box = snapshot.box;
+	const number = _temp2$4;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== box.border || $[1] !== box.content.height || $[2] !== box.content.width || $[3] !== box.gap.column || $[4] !== box.gap.row || $[5] !== box.margin || $[6] !== box.padding || $[7] !== box.position || $[8] !== box.radius || $[9] !== onHighlight || $[10] !== onSelect || $[11] !== snapshot.groups) {
+		const properties = snapshot.groups.flatMap(_temp3$3);
+		const tokenFor = (label) => properties.find((property) => property.label === label)?.token;
+		const nonzero = _temp5$1;
+		let t5;
+		if ($[16] !== onHighlight || $[17] !== onSelect) {
+			t5 = (text, label_0, className, token, key) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className,
+				title: token ? `Edit ${token}` : `${label_0}: ${text}`,
+				"aria-label": `${label_0}: ${text}`,
+				"data-token": token,
+				"data-box-highlight": key,
+				onPointerEnter: () => onHighlight(key ?? null),
+				onPointerLeave: () => onHighlight(null),
+				onFocus: () => onHighlight(key ?? null),
+				onBlur: () => onHighlight(null),
+				onClick: () => token ? onSelect(token) : onHighlight(key ?? null),
+				children: number(text)
+			});
+			$[16] = onHighlight;
+			$[17] = onSelect;
+			$[18] = t5;
+		} else t5 = $[18];
+		const value_1 = t5;
+		const layer = (name, values, children) => /* @__PURE__ */ jsxs("div", {
+			className: `studio-box-layer is-${name}`,
+			style: name === "border" ? { borderRadius: [
+				box.radius.topLeft,
+				box.radius.topRight,
+				box.radius.bottomRight,
+				box.radius.bottomLeft
+			].map((radius) => nonzero(radius) ? "12px" : "0px").join(" ") } : void 0,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "studio-box-name",
+					children: name
+				}),
+				[
+					"top",
+					"right",
+					"bottom",
+					"left"
+				].map((side) => /* @__PURE__ */ jsx("span", { children: value_1(values[side], `${name} ${side}`, `studio-box-value is-${side}`, tokenFor(`${name[0].toUpperCase()}${name.slice(1)} ${side}`), `${name}.${side}`) }, side)),
+				name === "border" && Object.values(box.radius).some(nonzero) && Object.entries(box.radius).map((t6) => {
+					const [corner, radius_0] = t6;
+					return /* @__PURE__ */ jsx("span", { children: value_1(radius_0, `Radius ${corner}`, `studio-box-radius is-${corner}`, tokenFor("Radius"), `radius.${corner}`) }, corner);
+				}),
+				children
+			]
+		});
+		let t7;
+		if ($[19] !== box.gap.row) {
+			t7 = nonzero(box.gap.row);
+			$[19] = box.gap.row;
+			$[20] = t7;
+		} else t7 = $[20];
+		const hasRowGap = t7;
+		let t8;
+		if ($[21] !== box.gap.column) {
+			t8 = nonzero(box.gap.column);
+			$[21] = box.gap.column;
+			$[22] = t8;
+		} else t8 = $[22];
+		const hasColumnGap = t8;
+		const t9 = `${Math.round(box.content.width * 10) / 10}px`;
+		let t10;
+		if ($[23] !== t9 || $[24] !== value_1) {
+			t10 = value_1(t9, "Content width", "studio-box-dimension-value", void 0, "width");
+			$[23] = t9;
+			$[24] = value_1;
+			$[25] = t10;
+		} else t10 = $[25];
+		let t11;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t11 = /* @__PURE__ */ jsx("span", { children: "×" });
+			$[26] = t11;
+		} else t11 = $[26];
+		const t12 = `${Math.round(box.content.height * 10) / 10}px`;
+		let t13;
+		if ($[27] !== t12 || $[28] !== value_1) {
+			t13 = value_1(t12, "Content height", "studio-box-dimension-value", void 0, "height");
+			$[27] = t12;
+			$[28] = value_1;
+			$[29] = t13;
+		} else t13 = $[29];
+		let t14;
+		if ($[30] !== t10 || $[31] !== t13) {
+			t14 = /* @__PURE__ */ jsx("div", {
+				className: "studio-box-content",
+				title: "Content width × height",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "studio-box-dimensions",
+					children: [
+						t10,
+						t11,
+						t13
+					]
+				})
+			});
+			$[30] = t10;
+			$[31] = t13;
+			$[32] = t14;
+		} else t14 = $[32];
+		const content = t14;
+		const diagram = layer("margin", box.margin, layer("border", box.border, layer("padding", box.padding, content)));
+		t1 = "studio-box-model";
+		t2 = "Box model";
+		t3 = box.position ? layer("position", box.position, diagram) : diagram;
+		t4 = (hasRowGap || hasColumnGap) && /* @__PURE__ */ jsx("div", {
+			className: "studio-box-gaps",
+			"aria-label": "Layout gaps",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "studio-gap-grid",
+				style: {
+					gridTemplateColumns: `minmax(0,1fr) ${hasColumnGap ? 28 : 0}px minmax(0,1fr)`,
+					gridTemplateRows: `20px ${hasRowGap ? 22 : 0}px 20px`
+				},
+				children: [
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					/* @__PURE__ */ jsx("i", {}),
+					hasColumnGap && value_1(box.gap.column, "Column gap", "studio-gap-number is-column", tokenFor("Column gap"), "gap.column"),
+					hasRowGap && value_1(box.gap.row, "Row gap", "studio-gap-number is-row", tokenFor("Row gap"), "gap.row")
+				]
+			})
+		});
+		$[0] = box.border;
+		$[1] = box.content.height;
+		$[2] = box.content.width;
+		$[3] = box.gap.column;
+		$[4] = box.gap.row;
+		$[5] = box.margin;
+		$[6] = box.padding;
+		$[7] = box.position;
+		$[8] = box.radius;
+		$[9] = onHighlight;
+		$[10] = onSelect;
+		$[11] = snapshot.groups;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else {
+		t1 = $[12];
+		t2 = $[13];
+		t3 = $[14];
+		t4 = $[15];
+	}
+	let t5;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("figcaption", { children: "Box model · px" });
+		$[33] = t5;
+	} else t5 = $[33];
+	let t6;
+	if ($[34] !== t1 || $[35] !== t2 || $[36] !== t3 || $[37] !== t4) {
+		t6 = /* @__PURE__ */ jsxs("figure", {
+			className: t1,
+			"aria-label": t2,
+			children: [
+				t3,
+				t4,
+				t5
+			]
+		});
+		$[34] = t1;
+		$[35] = t2;
+		$[36] = t3;
+		$[37] = t4;
+		$[38] = t6;
+	} else t6 = $[38];
+	return t6;
+}
+function _temp5$1(value_0) {
+	return value_0 !== "normal" && value_0.split(/\s+/).some(_temp4$3);
+}
+function _temp4$3(part) {
+	return parseFloat(part) !== 0 && Number.isFinite(parseFloat(part));
+}
+function _temp3$3(group) {
+	return group.properties;
+}
+function _temp2$4(value) {
+	return value.replace(/(-?\d*\.?\d+)px/g, _temp$6);
+}
+function _temp$6(_, amount) {
+	return String(Math.round(Number(amount) * 10) / 10);
+}
+//#endregion
 //#region src/configurator/ConfigurationLauncher.tsx
 function ConfigurationLauncher({ position, onOpen }) {
 	const ref = useRef(null);
@@ -4066,7 +5096,7 @@ function groupKeyFor(section, name, defaults) {
 	const textStyle = section === "Typography" ? name.match(/^--text-(.+?)(?:--.+)?$/)?.[1] : void 0;
 	return textStyle ? `--text-${textStyle}` : section === "Typography" ? name.startsWith("--font-weight-") ? "Font weights" : name.startsWith("--font-") ? "Font families" : "Letter spacing" : section === "Colors" ? baseColorNames(defaults).has(name) ? `Base system · ${name.slice(2).split("-")[0]}` : colorNamespaces[name.slice(2).split("-")[0]] ?? "Other" : section === "Spacing" || section === "Radius" || section === "Sizing" ? componentToken(name).title : section === "Effects" ? effectToken(name).title : "tokens";
 }
-const ComponentGallery = lazy(() => import("../ComponentGallery-C2tjrHWn.js"));
+const ComponentGallery = lazy(() => import("../ComponentGallery-Dp0kZVZM.js"));
 function ComponentPreview(t0) {
 	const $ = c(14);
 	const { value, mode, inspector } = t0;
@@ -4401,7 +5431,7 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout,
 	useLayoutEffect(() => {
 		const frame = requestAnimationFrame(() => {
 			editorRef.current?.scrollTo({ top: memory.current.editorScroll ?? 0 });
-			previewRef.current?.scrollTo({ top: memory.current.previewScroll ?? 0 });
+			previewRef.current?.querySelector(".studio-inspector-canvas")?.scrollTo({ top: memory.current.previewScroll ?? 0 });
 		});
 		return () => cancelAnimationFrame(frame);
 	}, [memory]);
@@ -5143,26 +6173,34 @@ function ConfigurationModalContent({ memory, windowBounds, poppedOut, onPopout,
 											})]
 										})]
 									}),
-									section === "Variants & overrides" || isTokenSection(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
-										variants: cvaVariants,
-										setVariants: setCvaVariants,
-										section,
-										slot: cvaSlot,
-										mode,
-										entries: visibleGroups.flatMap(([, group_6]) => group_6.entries)
-									}) : /* @__PURE__ */ jsx(ComponentPreview, {
-										value: draft,
-										mode,
-										inspector: {
-											isKnown: isInspectable,
-											describe: describeToken,
-											onSelect: focusToken,
-											revision: draft
-										}
+									/* @__PURE__ */ jsx(PreviewInspector, {
+										revision: draft,
+										isKnown: isInspectable,
+										onSelect: focusToken,
+										onScroll: (scrollTop) => {
+											memory.current.previewScroll = scrollTop;
+										},
+										children: section === "Variants & overrides" || isTokenSection(section) && previewMode === "focused" ? /* @__PURE__ */ jsx(ContextualPreview, {
+											variants: cvaVariants,
+											setVariants: setCvaVariants,
+											section,
+											slot: cvaSlot,
+											mode,
+											entries: visibleGroups.flatMap(([, group_6]) => group_6.entries)
+										}) : /* @__PURE__ */ jsx(ComponentPreview, {
+											value: draft,
+											mode,
+											inspector: {
+												isKnown: isInspectable,
+												describe: describeToken,
+												onSelect: focusToken,
+												revision: draft
+											}
+										})
 									}),
 									/* @__PURE__ */ jsx("p", {
 										className: "studio-preview-note",
-										children: section === "Variants & overrides" || previewMode === "focused" ? "Preview follows the current section. Variant controls affect only the preview." : "Click a component to inspect its padding, gaps and radius."
+										children: section === "Variants & overrides" || previewMode === "focused" ? "Preview follows the current section. Variant controls affect only the preview." : "Click to pin or unpin an element. Use Interact to try components."
 									})
 								]
 							}),