sculpted 0.3.4 → 0.3.5

package/dist/ui.mjs

@@ -707,6 +707,21 @@ const createLucideIcon = (iconName, iconNode) => {
 	return Component;
 };
 //#endregion
+//#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/arrow-down.mjs
+/**
+* @license lucide-preact v1.16.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const ArrowDown = createLucideIcon("arrow-down", [["path", {
+	d: "M12 5v14",
+	key: "s699le"
+}], ["path", {
+	d: "m19 12-7 7-7-7",
+	key: "1idqje"
+}]]);
+//#endregion
 //#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/arrow-left.mjs
 /**
 * @license lucide-preact v1.16.0 - ISC
@@ -722,6 +737,21 @@ const ArrowLeft = createLucideIcon("arrow-left", [["path", {
 	key: "x3x0zl"
 }]]);
 //#endregion
+//#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/arrow-up.mjs
+/**
+* @license lucide-preact v1.16.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const ArrowUp = createLucideIcon("arrow-up", [["path", {
+	d: "m5 12 7-7 7 7",
+	key: "hav0vg"
+}], ["path", {
+	d: "M12 19V5",
+	key: "x0mq9r"
+}]]);
+//#endregion
 //#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/brush-cleaning.mjs
 /**
 * @license lucide-preact v1.16.0 - ISC
@@ -1028,6 +1058,50 @@ const Settings = createLucideIcon("settings", [["path", {
 	key: "1v7zrd"
 }]]);
 //#endregion
+//#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/square-arrow-right-enter.mjs
+/**
+* @license lucide-preact v1.16.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const SquareArrowRightEnter = createLucideIcon("square-arrow-right-enter", [
+	["path", {
+		d: "m10 16 4-4-4-4",
+		key: "w9835o"
+	}],
+	["path", {
+		d: "M3 12h11",
+		key: "pmja8f"
+	}],
+	["path", {
+		d: "M3 8V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3",
+		key: "1bqs5q"
+	}]
+]);
+//#endregion
+//#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/square-arrow-right-exit.mjs
+/**
+* @license lucide-preact v1.16.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const SquareArrowRightExit = createLucideIcon("square-arrow-right-exit", [
+	["path", {
+		d: "M10 12h11",
+		key: "6m4ad9"
+	}],
+	["path", {
+		d: "m17 16 4-4-4-4",
+		key: "iin4zf"
+	}],
+	["path", {
+		d: "M21 6.344V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.344",
+		key: "1ojbhp"
+	}]
+]);
+//#endregion
 //#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/square-dashed-mouse-pointer.mjs
 /**
 * @license lucide-preact v1.16.0 - ISC
@@ -4222,18 +4296,78 @@ function resolveThreshold(threshold) {
 	return threshold;
 }
 //#endregion
+//#region src/ui/inputs/pandaTokenReference.ts
+const TOKEN_PATH_PATTERN = "[A-Za-z_][\\w-]*(?:\\.[A-Za-z0-9_][\\w-]*)*";
+const TOKEN_REFERENCE_PATTERN = new RegExp(`^token\\(\\s*(${TOKEN_PATH_PATTERN})\\s*\\)$`);
+const COLOR_TOKEN_VALUE_PATTERN = new RegExp(`^(${TOKEN_PATH_PATTERN})(?:/([0-9]{1,3}))?$`);
+const COLOR_TOKEN_REFERENCE_PATTERN = new RegExp(`^token\\(\\s*(colors\\.(${TOKEN_PATH_PATTERN})(?:/([0-9]{1,3}))?)\\s*\\)$`);
+function pandaTokenPathFromValue(value, category) {
+	const match = value.trim().match(TOKEN_REFERENCE_PATTERN);
+	if (!match) return void 0;
+	const path = match[1];
+	const prefix = `${category}.`;
+	return path?.startsWith(prefix) ? path.slice(prefix.length) : void 0;
+}
+function tokenPathFromValueOrTokenReference(value, category) {
+	if (category === "colors") {
+		const colorValue = pandaColorTokenValueFromString(value);
+		if (colorValue) return colorValue.tokenPath;
+	}
+	return pandaTokenPathFromValue(value, category) ?? value;
+}
+function tokenValueForCurrentSyntax(currentValue, category, tokenPath) {
+	return pandaTokenPathFromValue(currentValue, category) === void 0 ? tokenPath : `token(${category}.${tokenPath})`;
+}
+function pandaColorTokenValueFromString(value) {
+	const trimmed = value.trim();
+	const wrappedMatch = trimmed.match(COLOR_TOKEN_REFERENCE_PATTERN);
+	if (wrappedMatch) {
+		const tokenPath = wrappedMatch[2];
+		const opacity = normalizedColorTokenOpacity(wrappedMatch[3]);
+		return tokenPath && opacity ? {
+			tokenPath,
+			opacity,
+			wrapped: true
+		} : void 0;
+	}
+	const unwrappedMatch = trimmed.match(COLOR_TOKEN_VALUE_PATTERN);
+	if (!unwrappedMatch) return void 0;
+	const tokenPath = unwrappedMatch[1];
+	const opacity = normalizedColorTokenOpacity(unwrappedMatch[2]);
+	return tokenPath && opacity ? {
+		tokenPath,
+		opacity,
+		wrapped: false
+	} : void 0;
+}
+function colorTokenValueForCurrentSyntax(currentValue, tokenPath, opacity) {
+	const current = pandaColorTokenValueFromString(currentValue);
+	const nextOpacity = normalizedColorTokenOpacity(opacity ?? current?.opacity) ?? "100";
+	const suffix = nextOpacity === "100" ? "" : `/${nextOpacity}`;
+	return current?.wrapped ? `token(colors.${tokenPath}${suffix})` : `${tokenPath}${suffix}`;
+}
+function normalizedColorTokenOpacity(opacity) {
+	if (opacity === void 0 || opacity === "") return "100";
+	if (!/^\d{1,3}$/.test(opacity)) return void 0;
+	const number = Number(opacity);
+	if (!Number.isInteger(number) || number < 0 || number > 100) return void 0;
+	return String(number);
+}
+//#endregion
 //#region src/ui/previewModel.ts
 const PREVIEW_STYLE_CONDITIONS = [
 	"hover",
 	"focus",
 	"focus-visible",
-	"active"
+	"active",
+	"disabled"
 ];
 const PANDA_CONDITION_BY_PATH_SEGMENT = {
 	_hover: "hover",
 	_focus: "focus",
 	_focusVisible: "focus-visible",
-	_active: "active"
+	_active: "active",
+	_disabled: "disabled"
 };
 function previewDeclarationsForPandaInput(path, inputValue) {
 	const previewPath = pandaPreviewPath(path);
@@ -4453,8 +4587,18 @@ function pandaPreviewValue(kind, inputValue) {
 	if (/^(var|calc|min|max|clamp)\(/.test(value) || /^(#|rgb\(|hsl\()/.test(value)) return value;
 	if (/^-?\d*\.?\d+(px|rem|em|%|vh|vw|svh|svw|dvh|dvw|ch|lh)$/.test(value)) return value;
 	if (kind === "color" && /^[a-zA-Z][\w.-]*$/.test(value)) return `var(--colors-${tokenPathToCssVariableSuffix(value)})`;
+	const colorTokenValue = kind === "color" ? pandaColorTokenValueFromString(value) : void 0;
+	if (colorTokenValue) return pandaColorTokenPreviewValue(colorTokenValue.tokenPath, colorTokenValue.opacity);
 	if (kind === "spacing" && /^[\w.-]+$/.test(value)) return `var(--spacing-${tokenPathToCssVariableSuffix(value)})`;
-	return value.replace(/\btoken\(\s*(colors\.[A-Za-z_][\w-]*(?:\.[A-Za-z0-9_][\w-]*)*)\s*\)/g, (_match, tokenPath) => `var(--${tokenPathToCssVariableSuffix(tokenPath)})`);
+	return value.replace(/\btoken\(\s*colors\.([A-Za-z_][\w-]*(?:\.[A-Za-z0-9_][\w-]*)*(?:\/[0-9]{1,3})?)\s*\)/g, (match, colorTokenPath) => {
+		const colorTokenValue = pandaColorTokenValueFromString(colorTokenPath);
+		if (!colorTokenValue) return match;
+		return pandaColorTokenPreviewValue(colorTokenValue.tokenPath, colorTokenValue.opacity);
+	});
+}
+function pandaColorTokenPreviewValue(tokenPath, opacity) {
+	const variable = `var(--colors-${tokenPathToCssVariableSuffix(tokenPath)})`;
+	return opacity === "100" ? variable : `color-mix(in srgb, ${variable} ${opacity}%, transparent)`;
 }
 function tokenPathToCssVariableSuffix(value) {
 	return value.replace(/\./g, "-");
@@ -4589,90 +4733,530 @@ function ShadowMenuItem(props) {
 	});
 }
 //#endregion
-//#region src/ui/inputs/pandaTokenReference.ts
-function pandaTokenPathFromValue(value, category) {
-	const match = value.trim().match(/^token\(\s*([A-Za-z_][\w-]*(?:\.[A-Za-z0-9_][\w-]*)*)\s*\)$/);
-	if (!match) return void 0;
-	const path = match[1];
-	const prefix = `${category}.`;
-	return path?.startsWith(prefix) ? path.slice(prefix.length) : void 0;
-}
-function tokenPathFromValueOrTokenReference(value, category) {
-	return pandaTokenPathFromValue(value, category) ?? value;
-}
-function tokenValueForCurrentSyntax(currentValue, category, tokenPath) {
-	return pandaTokenPathFromValue(currentValue, category) === void 0 ? tokenPath : `token(${category}.${tokenPath})`;
-}
-//#endregion
-//#region src/ui/inputs/colorTokenInput.tsx
-const COLOR_TOKEN_PROPERTIES = new Set([
-	"color",
-	"backgroundColor",
-	"bg",
-	"borderColor",
-	"outlineColor"
+//#region src/ui/inputs/rawValueInput.tsx
+const NUMERIC_INPUT_PATTERN = /^(?<number>[+-]?(?:\d+(?:\.\d+)?|\.\d+))(?<unit>px|rem|em|%|vh|vw|svh|svw|dvh|dvw|ch|lh|deg)?$/;
+const NON_NEGATIVE_NUMERIC_PROPERTIES = new Set([
+	"p",
+	"padding",
+	"paddingBlock",
+	"paddingBlockEnd",
+	"paddingBlockStart",
+	"paddingBottom",
+	"paddingInline",
+	"paddingInlineEnd",
+	"paddingInlineStart",
+	"paddingLeft",
+	"paddingRight",
+	"paddingTop",
+	"paddingX",
+	"paddingY",
+	"padding-block",
+	"padding-block-end",
+	"padding-block-start",
+	"padding-bottom",
+	"padding-inline",
+	"padding-inline-end",
+	"padding-inline-start",
+	"padding-left",
+	"padding-right",
+	"padding-top",
+	"pb",
+	"pl",
+	"pr",
+	"pt",
+	"px",
+	"py",
+	"gap",
+	"rowGap",
+	"columnGap",
+	"row-gap",
+	"column-gap",
+	"width",
+	"w",
+	"height",
+	"h",
+	"minWidth",
+	"minW",
+	"min-width",
+	"maxWidth",
+	"maxW",
+	"max-width",
+	"minHeight",
+	"minH",
+	"min-height",
+	"maxHeight",
+	"maxH",
+	"max-height",
+	"flexBasis",
+	"flex-basis",
+	"fontSize",
+	"font-size",
+	"lineHeight",
+	"line-height",
+	"aspectRatio",
+	"aspect-ratio",
+	"borderWidth",
+	"borderTopWidth",
+	"borderRightWidth",
+	"borderBottomWidth",
+	"borderLeftWidth",
+	"outlineWidth",
+	"boxShadowBlur",
+	"boxShadowSpread",
+	"border-width",
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"outline-width",
+	"borderRadius",
+	"borderTopRadius",
+	"borderRightRadius",
+	"borderBottomRadius",
+	"borderLeftRadius",
+	"border-radius",
+	"border-top-radius",
+	"border-right-radius",
+	"border-bottom-radius",
+	"border-left-radius",
+	"rounded",
+	"roundedTop",
+	"roundedRight",
+	"roundedBottom",
+	"roundedLeft",
+	"colorTokenOpacity"
 ]);
-function colorTokenSelectorOptions(metadata) {
-	if (!metadata) return [];
-	return [...metadata.semanticColorTokens.items.map(colorTokenSelectorOption), ...metadata.colorTokens.items.map(colorTokenSelectorOption)];
-}
-function shouldUseColorTokenSelector(path, value, options) {
-	const property = pandaPreviewRootProperty(path);
-	if (!property || !COLOR_TOKEN_PROPERTIES.has(property)) return false;
-	const tokenPath = tokenPathFromValueOrTokenReference(value, "colors");
-	return options.some((option) => option.tokenPath === tokenPath);
-}
-function colorTokenSelectorOption(token) {
-	const value = jsonPrimitiveText$1(token.value);
-	const swatch = (token.kind === "semantic-token" ? token.cssVariable : void 0) ?? token.swatch ?? token.conditions?.find((condition) => condition.swatch)?.swatch ?? token.conditions?.map((condition) => jsonPrimitiveText$1(condition.value)).find((conditionValue) => conditionValue?.startsWith("#"));
-	const detail = token.conditions?.map((condition) => {
-		const conditionValue = jsonPrimitiveText$1(condition.value);
-		return conditionValue ? `${condition.condition}: ${conditionValue}` : void 0;
-	}).filter((item) => item !== void 0).join(" · ") || value || token.cssVariable || token.kind;
-	const kindLabel = token.kind === "token" ? "Color token" : "Semantic color";
-	const groupLabel = token.kind === "token" ? "Color tokens" : "Semantic colors";
-	return {
-		id: `${token.kind}:${token.path}`,
-		label: token.label,
-		groupLabel,
-		presetName: token.presetName,
-		detail,
-		searchText: [
-			token.path,
-			token.cssVariable,
-			searchableTokenValue(value),
-			...token.conditions?.map((condition) => searchableTokenValue(jsonPrimitiveText$1(condition.value))) ?? [],
-			kindLabel,
-			token.kind
-		].filter(Boolean).join(" "),
-		swatch,
-		tokenPath: token.path
-	};
-}
-function prepareColorTokenOption(option) {
-	return {
-		option,
-		label: prepare(option.label),
-		detail: option.detail ? prepare(option.detail) : void 0,
-		searchText: option.searchText ? prepare(option.searchText) : void 0
+function RawValueInput(props) {
+	const focused = useSignal(false);
+	const input = A$1(null);
+	const showInvalid = props.invalid && !focused.value;
+	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
+	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
+	const property = props.numericProperty ?? pandaPreviewRootProperty(props.path) ?? "";
+	const numeric = isSteppableNumericInput(property, props.value);
+	const stepValue = (direction, shiftKey = false, altKey = false) => {
+		const nextValue = steppedNumericInputValue({
+			property,
+			value: props.value,
+			direction,
+			shiftKey,
+			altKey
+		});
+		if (!nextValue) return;
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, nextValue, "input");
 	};
-}
-function filteredColorTokenOptions(query, preparedOptions) {
-	const queryText = query.trim();
-	if (!queryText) return preparedOptions.map((preparedOption) => preparedOption.option);
-	return searchFields(queryText, preparedOptions, queryText.startsWith("#") ? [
-		{
-			key: "label",
-			extract: (item) => item.label
-		},
-		{
-			key: "detail",
-			extract: (item) => item.detail
-		},
-		{
-			key: "searchText",
-			extract: (item) => item.searchText
-		}
+	_$2(() => {
+		if (props.saving.value) return;
+		const request = props.autoFocus.value;
+		if (!request || request.targetId !== props.targetId || request.pathLabel !== props.pathLabel) return;
+		const timer = setTimeout(() => {
+			input.current?.focus();
+			input.current?.select();
+			props.onAutoFocusHandled();
+		}, 0);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [props.autoFocus.value, props.saving.value]);
+	return /* @__PURE__ */ u("div", {
+		style: {
+			position: "relative",
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ u("input", {
+			ref: (element) => {
+				input.current = element;
+				if (typeof props.inputRef === "function") props.inputRef(element);
+				else if (props.inputRef) props.inputRef.current = element;
+			},
+			"data-preview-target-id": props.targetId,
+			"data-preview-path": props.pathLabel,
+			"data-preview-shorthand-part": props.shorthandPart,
+			"data-preview-changed": props.changed ? "true" : "false",
+			"data-preview-invalid": showInvalid ? "true" : "false",
+			"data-preview-original-value": props.originalValue,
+			disabled: props.saving.value,
+			value: props.value,
+			onFocus: () => {
+				focused.value = true;
+				props.onFocus?.();
+			},
+			onBlur: () => {
+				focused.value = false;
+				props.onBlur?.();
+			},
+			onInput: (event) => {
+				props.onPreviewInput(props.targetId, props.path, props.originalValue, event.currentTarget.value, "input");
+			},
+			onKeyDown: (event) => {
+				if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
+					event.preventDefault();
+					props.onModBackspace();
+					return;
+				}
+				if ((event.metaKey || event.ctrlKey) && event.key === "ArrowRight" && props.onArrowRight) {
+					event.preventDefault();
+					props.onArrowRight();
+					return;
+				}
+				if ((event.metaKey || event.ctrlKey) && event.key === "ArrowLeft" && props.onArrowLeft) {
+					event.preventDefault();
+					props.onArrowLeft();
+					return;
+				}
+				if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+				const nextValue = steppedNumericInputValue({
+					property,
+					value: event.currentTarget.value,
+					direction: event.key === "ArrowUp" ? 1 : -1,
+					shiftKey: event.shiftKey,
+					altKey: event.altKey
+				});
+				if (!nextValue) return;
+				event.preventDefault();
+				props.onPreviewInput(props.targetId, props.path, props.originalValue, nextValue, "input");
+			},
+			style: {
+				minWidth: 0,
+				width: "100%",
+				boxSizing: "border-box",
+				border: `1px solid ${borderColor}`,
+				borderRadius: "6px",
+				minHeight: numeric ? "30px" : void 0,
+				padding: numeric ? "4px 32px 4px 6px" : "4px 6px",
+				font: "inherit",
+				color: "#172033",
+				background
+			}
+		}), numeric ? /* @__PURE__ */ u("div", {
+			"data-numeric-stepper": "true",
+			style: {
+				position: "absolute",
+				top: "2px",
+				right: "2px",
+				bottom: "2px",
+				width: "24px",
+				display: "grid",
+				gridTemplateRows: "1fr 1fr"
+			},
+			children: [/* @__PURE__ */ u(NumericStepperButton, {
+				action: "increment",
+				disabled: props.saving.value,
+				direction: "up",
+				label: `Increment ${props.pathLabel}`,
+				onStep: (shiftKey, altKey) => {
+					stepValue(1, shiftKey, altKey);
+				},
+				onKeepFocus: () => {
+					input.current?.focus();
+				}
+			}), /* @__PURE__ */ u(NumericStepperButton, {
+				action: "decrement",
+				disabled: props.saving.value,
+				direction: "down",
+				label: `Decrement ${props.pathLabel}`,
+				onStep: (shiftKey, altKey) => {
+					stepValue(-1, shiftKey, altKey);
+				},
+				onKeepFocus: () => {
+					input.current?.focus();
+				}
+			})]
+		}) : null]
+	});
+}
+function SteppableNumericInput(props) {
+	const input = A$1(null);
+	const numeric = isSteppableNumericInput(props.property, props.value);
+	const stepValue = (direction, shiftKey = false, altKey = false) => {
+		const nextValue = steppedNumericInputValue({
+			property: props.property,
+			value: props.value,
+			direction,
+			shiftKey,
+			altKey
+		});
+		if (!nextValue) return;
+		props.onInput(nextValue);
+	};
+	return /* @__PURE__ */ u("div", {
+		style: {
+			position: "relative",
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ u("input", {
+			ref: input,
+			...props.dataAttributes,
+			disabled: props.disabled,
+			value: props.value,
+			onInput: (event) => {
+				props.onInput(event.currentTarget.value);
+			},
+			onKeyDown: (event) => {
+				if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+				const nextValue = steppedNumericInputValue({
+					property: props.property,
+					value: event.currentTarget.value,
+					direction: event.key === "ArrowUp" ? 1 : -1,
+					shiftKey: event.shiftKey,
+					altKey: event.altKey
+				});
+				if (!nextValue) return;
+				event.preventDefault();
+				props.onInput(nextValue);
+			},
+			style: {
+				minWidth: 0,
+				width: "100%",
+				boxSizing: "border-box",
+				border: "1px solid #d6dde8",
+				borderRadius: "6px",
+				minHeight: numeric ? "30px" : void 0,
+				padding: numeric ? "4px 32px 4px 6px" : "4px 6px",
+				font: "inherit",
+				color: "#172033",
+				background: "#fff"
+			}
+		}), numeric ? /* @__PURE__ */ u("div", {
+			"data-numeric-stepper": "true",
+			style: {
+				position: "absolute",
+				top: "2px",
+				right: "2px",
+				bottom: "2px",
+				width: "24px",
+				display: "grid",
+				gridTemplateRows: "1fr 1fr"
+			},
+			children: [/* @__PURE__ */ u(NumericStepperButton, {
+				action: "increment",
+				disabled: props.disabled,
+				direction: "up",
+				label: `Increment ${props.label}`,
+				onStep: (shiftKey, altKey) => {
+					stepValue(1, shiftKey, altKey);
+				},
+				onKeepFocus: () => {
+					input.current?.focus();
+				}
+			}), /* @__PURE__ */ u(NumericStepperButton, {
+				action: "decrement",
+				disabled: props.disabled,
+				direction: "down",
+				label: `Decrement ${props.label}`,
+				onStep: (shiftKey, altKey) => {
+					stepValue(-1, shiftKey, altKey);
+				},
+				onKeepFocus: () => {
+					input.current?.focus();
+				}
+			})]
+		}) : null]
+	});
+}
+function NumericStepperButton(props) {
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		"data-action": `numeric-${props.action}`,
+		tabIndex: -1,
+		disabled: props.disabled,
+		"aria-label": props.label,
+		onPointerDown: (event) => {
+			event.preventDefault();
+			props.onKeepFocus();
+		},
+		onClick: (event) => {
+			props.onStep(event.shiftKey, event.altKey);
+		},
+		style: {
+			width: "100%",
+			minWidth: 0,
+			height: "100%",
+			display: "grid",
+			placeItems: "center",
+			boxSizing: "border-box",
+			border: 0,
+			padding: 0,
+			background: "transparent"
+		},
+		children: /* @__PURE__ */ u("span", {
+			style: {
+				width: "100%",
+				alignSelf: "stretch",
+				justifySelf: "stretch",
+				display: "grid",
+				placeItems: "center",
+				borderRadius: "3px",
+				background: "#dbe3ef",
+				marginBottom: props.direction === "up" ? "1px" : 0,
+				marginTop: props.direction === "down" ? "1px" : 0
+			},
+			children: /* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				style: {
+					width: 0,
+					height: 0,
+					borderLeft: "3px solid transparent",
+					borderRight: "3px solid transparent",
+					borderBottom: props.direction === "up" ? "4px solid #344054" : void 0,
+					borderTop: props.direction === "down" ? "4px solid #344054" : void 0
+				}
+			})
+		})
+	});
+}
+function steppedNumericInputValue(input) {
+	const trimmedValue = input.value.trim();
+	const match = NUMERIC_INPUT_PATTERN.exec(trimmedValue);
+	if (!match?.groups) return void 0;
+	const current = Number(match.groups.number);
+	if (!Number.isFinite(current)) return void 0;
+	const unit = match.groups.unit ?? "";
+	if (input.property === "opacity" && unit) return void 0;
+	const step = numericInputStep(input.property, input.shiftKey === true, input.altKey === true);
+	return `${formatSteppedNumber(input.property === "hue" ? wrappedHueInputValue(current, input.direction, step) : boundedNumericInputValue(input.property, current + input.direction * step), match.groups.number, step)}${unit}`;
+}
+function isSteppableNumericInput(property, value) {
+	return steppedNumericInputValue({
+		property,
+		value,
+		direction: 1
+	}) !== void 0;
+}
+function numericInputStep(property, shiftKey, altKey) {
+	if (property === "opacity") {
+		if (shiftKey && altKey) return 1e-4;
+		if (shiftKey) return .1;
+		if (altKey) return .001;
+		return .01;
+	}
+	if (property === "lineHeight") {
+		if (shiftKey && altKey) return 1e-4;
+		if (shiftKey) return .1;
+		if (altKey) return .001;
+		return .01;
+	}
+	const step = shiftKey && altKey ? .01 : shiftKey ? 10 : altKey ? .1 : 1;
+	if (property === "fontWeight") return shiftKey && !altKey ? 100 : Math.max(step, 10);
+	return step;
+}
+function boundedNumericInputValue(property, value) {
+	if (property === "opacity") return Math.min(1, Math.max(0, value));
+	if (property === "colorTokenOpacity") return Math.min(100, Math.max(0, value));
+	if (NON_NEGATIVE_NUMERIC_PROPERTIES.has(property)) return Math.max(0, value);
+	return value;
+}
+function wrappedHueInputValue(current, direction, step) {
+	if (current === 360 && direction === 1) return 0;
+	if (current === 0 && direction === -1) return 360;
+	const next = current + direction * step;
+	if (next > 360) return next - 360;
+	if (next < 0) return next + 360;
+	return next;
+}
+function formatSteppedNumber(value, originalNumber, step) {
+	const precision = Math.max(decimalPlaces(originalNumber), decimalPlaces(String(step)));
+	const fixed = value.toFixed(precision);
+	return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
+}
+function decimalPlaces(value) {
+	return value.includes(".") ? value.split(".")[1]?.length ?? 0 : 0;
+}
+//#endregion
+//#region src/ui/inputs/colorTokenInput.tsx
+const COLOR_TOKEN_PROPERTIES = new Set([
+	"color",
+	"backgroundColor",
+	"bg",
+	"borderColor",
+	"outlineColor"
+]);
+const CREATE_DIALOG_INPUT_STYLE = {
+	minWidth: 0,
+	width: "100%",
+	boxSizing: "border-box",
+	border: "1px solid #d6dde8",
+	borderRadius: "6px",
+	padding: "4px 6px",
+	font: "inherit",
+	color: "#172033",
+	background: "#fff"
+};
+const CREATE_DIALOG_RANGE_STYLE = {
+	minWidth: 0,
+	width: "100%",
+	height: "18px"
+};
+function colorTokenSelectorOptions(metadata) {
+	if (!metadata) return [];
+	return [...metadata.semanticColorTokens.items.map(colorTokenSelectorOption), ...metadata.colorTokens.items.map(colorTokenSelectorOption)];
+}
+function shouldUseColorTokenSelector(path, value, options) {
+	const property = pandaPreviewRootProperty(path);
+	if (!property || !COLOR_TOKEN_PROPERTIES.has(property)) return false;
+	const tokenPath = tokenPathFromValueOrTokenReference(value, "colors");
+	return options.some((option) => option.tokenPath === tokenPath);
+}
+function colorTokenOpacityInputValue(value) {
+	const colorTokenValue = pandaColorTokenValueFromString(value);
+	if (!colorTokenValue) return void 0;
+	return {
+		tokenPath: colorTokenValue.tokenPath,
+		opacity: colorTokenValue.opacity,
+		collapsedEditable: colorTokenValue.opacity === "100"
+	};
+}
+function colorTokenSelectorOption(token) {
+	const value = jsonPrimitiveText$1(token.value);
+	const swatch = (token.kind === "semantic-token" ? token.cssVariable : void 0) ?? token.swatch ?? token.conditions?.find((condition) => condition.swatch)?.swatch ?? token.conditions?.map((condition) => jsonPrimitiveText$1(condition.value)).find((conditionValue) => conditionValue?.startsWith("#"));
+	const detail = token.conditions?.map((condition) => {
+		const conditionValue = jsonPrimitiveText$1(condition.value);
+		return conditionValue ? `${condition.condition}: ${conditionValue}` : void 0;
+	}).filter((item) => item !== void 0).join(" · ") || value || token.cssVariable || token.kind;
+	const kindLabel = token.kind === "token" ? "Color token" : "Semantic color";
+	const groupLabel = token.kind === "token" ? "Color tokens" : "Semantic colors";
+	return {
+		id: `${token.kind}:${token.path}`,
+		label: token.label,
+		groupLabel,
+		presetName: token.presetName,
+		detail,
+		searchText: [
+			token.path,
+			token.cssVariable,
+			searchableTokenValue(value),
+			...token.conditions?.map((condition) => searchableTokenValue(jsonPrimitiveText$1(condition.value))) ?? [],
+			kindLabel,
+			token.kind
+		].filter(Boolean).join(" "),
+		swatch,
+		tokenPath: token.path
+	};
+}
+function prepareColorTokenOption(option) {
+	return {
+		option,
+		label: prepare(option.label),
+		detail: option.detail ? prepare(option.detail) : void 0,
+		searchText: option.searchText ? prepare(option.searchText) : void 0
+	};
+}
+function filteredColorTokenOptions(query, preparedOptions) {
+	const queryText = query.trim();
+	if (!queryText) return preparedOptions.map((preparedOption) => preparedOption.option);
+	return searchFields(queryText, preparedOptions, queryText.startsWith("#") ? [
+		{
+			key: "label",
+			extract: (item) => item.label
+		},
+		{
+			key: "detail",
+			extract: (item) => item.detail
+		},
+		{
+			key: "searchText",
+			extract: (item) => item.searchText
+		}
 	] : [{
 		key: "label",
 		extract: (item) => item.label
@@ -4699,24 +5283,356 @@ function groupedColorTokenOptions(options) {
 			options: groupOptions
 		});
 	}
-	return groups;
-}
-function searchableTokenValue(value) {
-	return value?.startsWith("#") ? void 0 : value;
-}
-function validHexColor(value) {
-	return /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value.trim());
-}
-function validTokenPath(value) {
-	return /^[A-Za-z_][\w-]*(?:\.[A-Za-z0-9_][\w-]*)*$/.test(value.trim());
-}
-function jsonPrimitiveText$1(value) {
-	if (value === void 0) return void 0;
-	if (typeof value === "string") return value;
-	if (typeof value === "number" || typeof value === "boolean" || value === null) return String(value);
-}
-function tokenSourceTargetLabel(source) {
-	return `${source.file} - ${source.configPath}`;
+	return groups;
+}
+function searchableTokenValue(value) {
+	return value?.startsWith("#") ? void 0 : value;
+}
+function validHexColor(value) {
+	return /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value.trim());
+}
+function clampNumber(value, min, max) {
+	if (Number.isNaN(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+function hexPair(value) {
+	return Math.round(value).toString(16).padStart(2, "0");
+}
+function expandHexColor(value) {
+	const hex = value.trim().replace(/^#/, "");
+	if (hex.length === 3 || hex.length === 4) return hex.split("").map((digit) => `${digit}${digit}`).join("");
+	return hex;
+}
+function hsvaFromHexColor(value) {
+	const hex = expandHexColor(validHexColor(value) ? value : "#000000");
+	const red = Number.parseInt(hex.slice(0, 2), 16) / 255;
+	const green = Number.parseInt(hex.slice(2, 4), 16) / 255;
+	const blue = Number.parseInt(hex.slice(4, 6), 16) / 255;
+	const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 * 100 : 100;
+	const max = Math.max(red, green, blue);
+	const delta = max - Math.min(red, green, blue);
+	let hue = 0;
+	if (delta !== 0) {
+		if (max === red) hue = (green - blue) / delta % 6;
+		else if (max === green) hue = (blue - red) / delta + 2;
+		else hue = (red - green) / delta + 4;
+		hue = hue * 60;
+		if (hue < 0) hue += 360;
+	}
+	return {
+		hue,
+		saturation: max === 0 ? 0 : delta / max * 100,
+		value: max * 100,
+		alpha
+	};
+}
+function hexColorFromHsva(color) {
+	const hue = (clampNumber(color.hue, 0, 360) % 360 + 360) % 360;
+	const saturation = clampNumber(color.saturation, 0, 100) / 100;
+	const value = clampNumber(color.value, 0, 100) / 100;
+	const chroma = value * saturation;
+	const hueSegment = hue / 60;
+	const x = chroma * (1 - Math.abs(hueSegment % 2 - 1));
+	const match = value - chroma;
+	let red = 0;
+	let green = 0;
+	let blue = 0;
+	if (hueSegment < 1) {
+		red = chroma;
+		green = x;
+	} else if (hueSegment < 2) {
+		red = x;
+		green = chroma;
+	} else if (hueSegment < 3) {
+		green = chroma;
+		blue = x;
+	} else if (hueSegment < 4) {
+		green = x;
+		blue = chroma;
+	} else if (hueSegment < 5) {
+		red = x;
+		blue = chroma;
+	} else {
+		red = chroma;
+		blue = x;
+	}
+	const alpha = clampNumber(color.alpha, 0, 100);
+	const hex = `#${hexPair((red + match) * 255)}${hexPair((green + match) * 255)}${hexPair((blue + match) * 255)}`;
+	return alpha >= 100 ? hex : `${hex}${hexPair(alpha / 100 * 255)}`;
+}
+function opaqueHexColorFromHsva(color) {
+	return hexColorFromHsva({
+		...color,
+		alpha: 100
+	});
+}
+function validTokenPath(value) {
+	return /^[A-Za-z_][\w-]*(?:\.[A-Za-z0-9_][\w-]*)*$/.test(value.trim());
+}
+function jsonPrimitiveText$1(value) {
+	if (value === void 0) return void 0;
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "boolean" || value === null) return String(value);
+}
+function tokenSourceTargetLabel(source) {
+	return `${source.file} - ${source.configPath}`;
+}
+function ColorComponentSlider(props) {
+	const track = A$1(null);
+	const valuePercent = props.max === props.min ? 0 : (props.value - props.min) / (props.max - props.min) * 100;
+	const updateFromClientX = (clientX) => {
+		const rect = track.current?.getBoundingClientRect();
+		if (!rect) return;
+		const width = rect.width || 1;
+		const ratio = clampNumber((clientX - rect.left) / width, 0, 1);
+		props.onInput(String(Math.round(props.min + ratio * (props.max - props.min))));
+	};
+	const stepBy = (direction, amount) => {
+		props.onInput(String(Math.round(clampNumber(props.value + direction * amount, props.min, props.max))));
+	};
+	return /* @__PURE__ */ u("div", {
+		ref: track,
+		role: "slider",
+		tabIndex: props.disabled ? -1 : 0,
+		"aria-label": props.label,
+		"aria-valuemin": props.min,
+		"aria-valuemax": props.max,
+		"aria-valuenow": Math.round(props.value),
+		"aria-disabled": props.disabled ? "true" : "false",
+		[props.dataAttribute]: "true",
+		onPointerDown: (event) => {
+			if (props.disabled) return;
+			event.preventDefault();
+			track.current?.focus();
+			updateFromClientX(event.clientX);
+			const move = (moveEvent) => {
+				updateFromClientX(moveEvent.clientX);
+			};
+			const up = () => {
+				window.removeEventListener("pointermove", move);
+				window.removeEventListener("pointerup", up);
+			};
+			window.addEventListener("pointermove", move);
+			window.addEventListener("pointerup", up);
+		},
+		onKeyDown: (event) => {
+			if (props.disabled) return;
+			if (event.key === "Home") {
+				event.preventDefault();
+				props.onInput(String(props.min));
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				props.onInput(String(props.max));
+				return;
+			}
+			if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+				event.preventDefault();
+				stepBy(1, event.shiftKey ? 10 : 1);
+				return;
+			}
+			if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+				event.preventDefault();
+				stepBy(-1, event.shiftKey ? 10 : 1);
+			}
+		},
+		style: {
+			...CREATE_DIALOG_RANGE_STYLE,
+			position: "relative",
+			borderRadius: "999px",
+			background: props.background,
+			backgroundPosition: props.backgroundPosition,
+			backgroundSize: props.backgroundSize,
+			boxShadow: "inset 0 0 0 1px rgba(15, 23, 42, 0.14)",
+			cursor: props.disabled ? "not-allowed" : "pointer",
+			opacity: props.disabled ? .62 : 1
+		},
+		children: /* @__PURE__ */ u("span", {
+			"aria-hidden": "true",
+			style: {
+				position: "absolute",
+				top: "50%",
+				left: `${clampNumber(valuePercent, 0, 100)}%`,
+				width: "14px",
+				height: "14px",
+				border: "2px solid #fff",
+				borderRadius: "999px",
+				background: "#172033",
+				boxShadow: "0 1px 4px rgba(15, 23, 42, 0.28)",
+				transform: "translate(-50%, -50%)",
+				pointerEvents: "none"
+			}
+		})
+	});
+}
+function ColorTokenOpacityInput(props) {
+	const expandedRoot = A$1(null);
+	const variant = props.variant ?? "full";
+	const noAutoOpen = useSignal(null);
+	const colorTokenValue = pandaColorTokenValueFromString(props.value);
+	if (!colorTokenValue) return null;
+	const colorOnlyValue = colorTokenValue.wrapped ? `token(colors.${colorTokenValue.tokenPath})` : colorTokenValue.tokenPath;
+	const showInvalid = props.invalid;
+	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
+	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
+	const collapsedStyle = {
+		minWidth: 0,
+		width: props.inputWidth,
+		boxSizing: "border-box",
+		border: `1px solid ${borderColor}`,
+		borderRadius: "6px",
+		padding: "4px 6px",
+		textAlign: "left",
+		font: "inherit",
+		color: "#172033",
+		background
+	};
+	const updateToken = (tokenValue, mode) => {
+		const nextToken = pandaColorTokenValueFromString(tokenValue);
+		if (!nextToken) return;
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, nextToken.tokenPath, colorTokenValue.opacity), mode);
+	};
+	const updateOpacity = (opacity) => {
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, colorTokenValue.tokenPath, opacity), "input");
+	};
+	_$2(() => {
+		if (!props.expanded || variant !== "expanded-parts") return;
+		(expandedRoot.current?.querySelector("button:not(:disabled), input:not(:disabled)"))?.focus();
+	}, []);
+	if (!props.expanded || variant === "placeholder") {
+		if (colorTokenValue.opacity === "100" && variant !== "placeholder") return /* @__PURE__ */ u(ColorTokenValueInput, {
+			targetId: props.targetId,
+			path: props.path,
+			pathLabel: props.pathLabel,
+			originalValue: props.originalValue,
+			value: props.value,
+			changed: props.changed,
+			invalid: props.invalid,
+			autoOpen: props.autoOpen,
+			options: props.options,
+			tokenSources: props.tokenSources,
+			saving: props.saving,
+			onAutoOpenHandled: props.onAutoOpenHandled,
+			onPreviewInput: props.onPreviewInput,
+			onModBackspace: props.onModBackspace,
+			onCreateToken: props.onCreateToken,
+			onMenuOpenChange: props.onMenuOpenChange,
+			onArrowRight: props.onExpand
+		});
+		return /* @__PURE__ */ u("button", {
+			type: "button",
+			"data-color-token-opacity-collapsed": "true",
+			"data-preview-target-id": props.targetId,
+			"data-preview-path": props.pathLabel,
+			"data-preview-changed": props.changed ? "true" : "false",
+			"data-preview-invalid": showInvalid ? "true" : "false",
+			"data-preview-original-value": props.originalValue,
+			tabIndex: variant === "placeholder" ? -1 : void 0,
+			disabled: props.saving.value,
+			"aria-hidden": variant === "placeholder" ? "true" : void 0,
+			onClick: props.onExpand,
+			onKeyDown: (event) => {
+				if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
+					event.preventDefault();
+					props.onModBackspace();
+					return;
+				}
+				if (!event.metaKey && !event.ctrlKey) return;
+				if (event.key !== "ArrowRight") return;
+				event.preventDefault();
+				props.onExpand();
+			},
+			style: variant === "placeholder" ? {
+				...collapsedStyle,
+				visibility: "hidden",
+				pointerEvents: "none"
+			} : collapsedStyle,
+			children: props.value
+		});
+	}
+	return /* @__PURE__ */ u("div", {
+		ref: expandedRoot,
+		"data-color-token-opacity-expanded": "true",
+		style: {
+			display: "grid",
+			gap: "4px",
+			minWidth: 0,
+			width: `calc(48px + 6px + ${props.inputWidth})`
+		},
+		children: [/* @__PURE__ */ u("label", {
+			style: {
+				minWidth: 0,
+				display: "grid",
+				gridTemplateColumns: `48px ${props.inputWidth}`,
+				alignItems: "center",
+				gap: "6px"
+			},
+			children: [/* @__PURE__ */ u("span", {
+				style: {
+					color: "#667085",
+					fontSize: "11px",
+					fontWeight: 700
+				},
+				children: "Color"
+			}), /* @__PURE__ */ u(ColorTokenValueInput, {
+				targetId: props.targetId,
+				path: props.path,
+				pathLabel: props.pathLabel,
+				originalValue: props.originalValue,
+				value: colorOnlyValue,
+				changed: props.changed,
+				invalid: props.invalid,
+				autoOpen: noAutoOpen,
+				options: props.options,
+				tokenSources: props.tokenSources,
+				saving: props.saving,
+				onAutoOpenHandled: () => {},
+				onPreviewInput: (_editId, _path, _originalValue, value, mode) => {
+					updateToken(value, mode);
+				},
+				onModBackspace: props.onModBackspace,
+				onCreateToken: props.onCreateToken,
+				onMenuOpenChange: props.onMenuOpenChange,
+				onArrowLeft: props.onCollapse
+			})]
+		}), /* @__PURE__ */ u("label", {
+			style: {
+				minWidth: 0,
+				display: "grid",
+				gridTemplateColumns: `48px ${props.inputWidth}`,
+				alignItems: "center",
+				gap: "6px"
+			},
+			children: [/* @__PURE__ */ u("span", {
+				style: {
+					color: "#667085",
+					fontSize: "11px",
+					fontWeight: 700
+				},
+				children: "Opacity"
+			}), /* @__PURE__ */ u("div", {
+				"data-color-token-opacity-control": "true",
+				children: /* @__PURE__ */ u(SteppableNumericInput, {
+					property: "colorTokenOpacity",
+					value: colorTokenValue.opacity,
+					disabled: props.saving.value,
+					label: `${props.pathLabel} opacity`,
+					dataAttributes: {
+						"data-color-token-opacity-input": "true",
+						"data-preview-target-id": props.targetId,
+						"data-preview-path": props.pathLabel,
+						"data-preview-changed": props.changed ? "true" : "false",
+						"data-preview-invalid": showInvalid ? "true" : "false",
+						"data-preview-original-value": props.originalValue
+					},
+					onInput: (nextValue) => {
+						updateOpacity(nextValue);
+					}
+				})
+			})]
+		})]
+	});
 }
 function ColorTokenValueInput(props) {
 	const menuOpen = useSignal(false);
@@ -4726,6 +5642,8 @@ function ColorTokenValueInput(props) {
 	const createDialogOpen = useSignal(false);
 	const createTokenPath = useSignal("");
 	const createTokenKind = useSignal("token");
+	const createColor = useSignal(hsvaFromHexColor("#ff0000"));
+	const createColorHex = useSignal("#ff0000");
 	const createSourceTargetId = useSignal("");
 	const createApplyToInput = useSignal(false);
 	const createError = useSignal("");
@@ -4756,9 +5674,11 @@ function ColorTokenValueInput(props) {
 	});
 	const createOptionVisible = useComputed(() => {
 		const value = query.value.trim();
-		return value.startsWith("#") && validHexColor(value) && filteredOptions.value.length === 0 && writableTokenSources.value.length > 0;
+		if (writableTokenSources.value.length === 0) return false;
+		if (value.length === 0) return true;
+		return value.startsWith("#") && validHexColor(value) && filteredOptions.value.length === 0;
 	});
-	const selectableOptionIds = useComputed(() => createOptionVisible.value ? ["create-token"] : filteredOptions.value.filter((option) => option.disabled !== true).map((option) => option.id));
+	const selectableOptionIds = useComputed(() => createOptionVisible.value ? ["create-token", ...filteredOptions.value.filter((option) => option.disabled !== true).map((option) => option.id)] : filteredOptions.value.filter((option) => option.disabled !== true).map((option) => option.id));
 	const activeSelectableOptionId = useComputed(() => selectableOptionIds.value.includes(activeOptionId.value ?? "") ? activeOptionId.value : selectableOptionIds.value[0]);
 	const showInvalid = props.invalid && !focused.value;
 	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
@@ -4768,7 +5688,7 @@ function ColorTokenValueInput(props) {
 	const selectedOptionId = selectedOption?.id;
 	const previewOption = (option) => {
 		if (!option.tokenPath || props.saving.value) return;
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, tokenValueForCurrentSyntax(props.value, "colors", option.tokenPath), "transient");
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, option.tokenPath), "transient");
 	};
 	const selectOption = (option) => {
 		if (!option.tokenPath || props.saving.value) return;
@@ -4776,13 +5696,16 @@ function ColorTokenValueInput(props) {
 		if (baselineValue !== void 0) props.onPreviewInput(props.targetId, props.path, props.originalValue, baselineValue, "transient");
 		menuSelectionConfirmed.current = true;
 		menuOpen.value = false;
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, tokenValueForCurrentSyntax(props.value, "colors", option.tokenPath), "immediate");
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, option.tokenPath), "immediate");
 	};
 	const openCreateDialog = () => {
+		const initialHex = validHexColor(query.value) ? query.value.trim() : "#ff0000";
 		createTokenPath.value = "";
 		createTokenKind.value = "token";
+		createColor.value = hsvaFromHexColor(initialHex);
+		createColorHex.value = initialHex;
 		createSourceTargetId.value = selectedCreateSource.value?.id ?? "";
-		createApplyToInput.value = false;
+		createApplyToInput.value = true;
 		createError.value = "";
 		createSaving.value = false;
 		createDialogOpen.value = true;
@@ -4820,7 +5743,7 @@ function ColorTokenValueInput(props) {
 	};
 	const submitCreateToken = () => {
 		const tokenPath = createTokenPath.value.trim();
-		const value = query.value.trim();
+		const value = createColorHex.value.trim();
 		const section = createTokenKind.value === "token" ? "tokens.colors" : "semanticTokens.colors";
 		const source = selectedCreateSource.value;
 		if (!validHexColor(value)) {
@@ -4853,7 +5776,7 @@ function ColorTokenValueInput(props) {
 				createError.value = response.error?.message ?? "Token creation failed.";
 				return;
 			}
-			if (createApplyToInput.value) props.onPreviewInput(props.targetId, props.path, props.originalValue, tokenValueForCurrentSyntax(props.value, "colors", tokenPath), "immediate");
+			if (createApplyToInput.value) props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, tokenPath), "immediate");
 			closeCreateDialog();
 		}, (error) => {
 			createSaving.value = false;
@@ -4928,6 +5851,42 @@ function ColorTokenValueInput(props) {
 			})
 		}, option.id);
 	};
+	const updateCreateColor = (component, value) => {
+		const max = component === "hue" ? 360 : 100;
+		const nextColor = {
+			...createColor.value,
+			[component]: clampNumber(Number.parseFloat(value), 0, max)
+		};
+		createColor.value = nextColor;
+		createColorHex.value = hexColorFromHsva(nextColor);
+	};
+	const updateCreateColorFromSlider = (component, value) => {
+		updateCreateColor(component, String(Math.round(Number.parseFloat(value))));
+	};
+	const updateCreateColorHex = (value) => {
+		createColorHex.value = value;
+		if (validHexColor(value)) createColor.value = hsvaFromHexColor(value);
+	};
+	const hueSliderBackground = "linear-gradient(90deg, #f00, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00)";
+	const saturationSliderBackground = `linear-gradient(90deg, ${opaqueHexColorFromHsva({
+		hue: createColor.value.hue,
+		saturation: 0,
+		value: createColor.value.value
+	})}, ${opaqueHexColorFromHsva({
+		hue: createColor.value.hue,
+		saturation: 100,
+		value: createColor.value.value
+	})})`;
+	const valueSliderBackground = `linear-gradient(90deg, #000000, ${opaqueHexColorFromHsva({
+		hue: createColor.value.hue,
+		saturation: createColor.value.saturation,
+		value: 100
+	})})`;
+	const alphaSliderBackground = "linear-gradient(90deg, transparent, " + opaqueHexColorFromHsva({
+		hue: createColor.value.hue,
+		saturation: createColor.value.saturation,
+		value: createColor.value.value
+	}) + "), linear-gradient(45deg, #d6dde8 25%, transparent 25%), linear-gradient(-45deg, #d6dde8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d6dde8 75%), linear-gradient(-45deg, transparent 75%, #d6dde8 75%)";
 	_$2(() => {
 		if (menuOpen.value) {
 			if (!previousMenuOpen.current) {
@@ -5142,7 +6101,7 @@ function ColorTokenValueInput(props) {
 						overflow: "auto",
 						minHeight: "32px"
 					},
-					children: createOptionVisible.value ? /* @__PURE__ */ u(ShadowMenuItem, {
+					children: [createOptionVisible.value ? /* @__PURE__ */ u(ShadowMenuItem, {
 						active: activeSelectableOptionId.value === "create-token",
 						class: "panda-token-selector-menu-item",
 						disabled: props.saving.value,
@@ -5155,21 +6114,21 @@ function ColorTokenValueInput(props) {
 							},
 							children: "Create color token..."
 						})
-					}) : props.options.value.length === 0 ? /* @__PURE__ */ u("div", {
+					}) : null, props.options.value.length === 0 && !createOptionVisible.value ? /* @__PURE__ */ u("div", {
 						"data-fuzzy-selector-empty": "true",
 						style: {
 							color: "#667085",
 							padding: "7px 8px"
 						},
 						children: "No color tokens available."
-					}) : filteredOptions.value.length === 0 ? /* @__PURE__ */ u("div", {
+					}) : filteredOptions.value.length === 0 && !createOptionVisible.value ? /* @__PURE__ */ u("div", {
 						"data-fuzzy-selector-no-matches": "true",
 						style: {
 							color: "#667085",
 							padding: "7px 8px"
 						},
 						children: "No matching color tokens."
-					}) : hasFilterQuery.value ? filteredOptions.value.map((option) => renderTokenOption(option)) : groupedOptions.value.map((group) => /* @__PURE__ */ u("div", {
+					}) : filteredOptions.value.length === 0 ? null : hasFilterQuery.value ? filteredOptions.value.map((option) => renderTokenOption(option)) : groupedOptions.value.map((group) => /* @__PURE__ */ u("div", {
 						"data-fuzzy-selector-group": group.presetName ? `${group.presetName} / ${group.label}` : group.label,
 						children: [
 							group.presetName ? /* @__PURE__ */ u("div", {
@@ -5196,7 +6155,7 @@ function ColorTokenValueInput(props) {
 							}),
 							group.options.map((option) => renderTokenOption(option))
 						]
-					}, `${group.label}:${group.presetName ?? ""}`))
+					}, `${group.label}:${group.presetName ?? ""}`))]
 				})]
 			}),
 			createDialogOpen.value ? /* @__PURE__ */ u("div", {
@@ -5243,7 +6202,8 @@ function ColorTokenValueInput(props) {
 								placeholder: "brand.600",
 								onInput: (event) => {
 									createTokenPath.value = event.currentTarget.value;
-								}
+								},
+								style: CREATE_DIALOG_INPUT_STYLE
 							})]
 						}),
 						/* @__PURE__ */ u("label", {
@@ -5258,6 +6218,7 @@ function ColorTokenValueInput(props) {
 								onChange: (event) => {
 									createTokenKind.value = event.currentTarget.value;
 								},
+								style: CREATE_DIALOG_INPUT_STYLE,
 								children: [/* @__PURE__ */ u("option", {
 									value: "token",
 									children: "Color token"
@@ -5275,10 +6236,166 @@ function ColorTokenValueInput(props) {
 							children: [/* @__PURE__ */ u("span", { children: "Value" }), /* @__PURE__ */ u("input", {
 								type: "text",
 								"data-create-color-token-value": "true",
-								value: query.value.trim(),
-								disabled: true
+								value: createColorHex.value,
+								disabled: createSaving.value,
+								onInput: (event) => {
+									updateCreateColorHex(event.currentTarget.value);
+								},
+								style: CREATE_DIALOG_INPUT_STYLE
 							})]
 						}),
+						/* @__PURE__ */ u("div", {
+							"data-create-color-token-preview": "true",
+							style: {
+								height: "44px",
+								border: "1px solid #d6dde8",
+								borderRadius: "6px",
+								backgroundImage: "linear-gradient(45deg, #d6dde8 25%, transparent 25%), linear-gradient(-45deg, #d6dde8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d6dde8 75%), linear-gradient(-45deg, transparent 75%, #d6dde8 75%)",
+								backgroundPosition: "0 0, 0 6px, 6px -6px, -6px 0",
+								backgroundSize: "12px 12px",
+								overflow: "hidden"
+							},
+							children: /* @__PURE__ */ u("div", { style: {
+								width: "100%",
+								height: "100%",
+								backgroundColor: validHexColor(createColorHex.value) ? createColorHex.value : "transparent"
+							} })
+						}),
+						/* @__PURE__ */ u("div", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+								gap: "8px"
+							},
+							children: [
+								/* @__PURE__ */ u("label", {
+									style: {
+										display: "grid",
+										gap: "4px",
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ u("span", { children: "Hue" }), /* @__PURE__ */ u(SteppableNumericInput, {
+										dataAttributes: { "data-create-color-token-hue": "true" },
+										property: "hue",
+										label: "hue",
+										value: String(createColor.value.hue),
+										disabled: createSaving.value,
+										onInput: (value) => {
+											updateCreateColor("hue", value);
+										}
+									})]
+								}),
+								/* @__PURE__ */ u("label", {
+									style: {
+										display: "grid",
+										gap: "4px",
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ u("span", { children: "Sat" }), /* @__PURE__ */ u(SteppableNumericInput, {
+										dataAttributes: { "data-create-color-token-saturation": "true" },
+										property: "saturation",
+										label: "saturation",
+										value: String(createColor.value.saturation),
+										disabled: createSaving.value,
+										onInput: (value) => {
+											updateCreateColor("saturation", value);
+										}
+									})]
+								}),
+								/* @__PURE__ */ u("label", {
+									style: {
+										display: "grid",
+										gap: "4px",
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ u("span", { children: "Value" }), /* @__PURE__ */ u(SteppableNumericInput, {
+										dataAttributes: { "data-create-color-token-brightness": "true" },
+										property: "value",
+										label: "value",
+										value: String(createColor.value.value),
+										disabled: createSaving.value,
+										onInput: (value) => {
+											updateCreateColor("value", value);
+										}
+									})]
+								}),
+								/* @__PURE__ */ u("label", {
+									style: {
+										display: "grid",
+										gap: "4px",
+										minWidth: 0
+									},
+									children: [/* @__PURE__ */ u("span", { children: "Alpha" }), /* @__PURE__ */ u(SteppableNumericInput, {
+										dataAttributes: { "data-create-color-token-alpha": "true" },
+										property: "alpha",
+										label: "alpha",
+										value: String(createColor.value.alpha),
+										disabled: createSaving.value,
+										onInput: (value) => {
+											updateCreateColor("alpha", value);
+										}
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ u("div", {
+							style: {
+								display: "grid",
+								gap: "8px"
+							},
+							children: [
+								/* @__PURE__ */ u(ColorComponentSlider, {
+									dataAttribute: "data-create-color-token-hue-slider",
+									label: "Hue",
+									min: 0,
+									max: 360,
+									value: createColor.value.hue,
+									disabled: createSaving.value,
+									background: hueSliderBackground,
+									onInput: (value) => {
+										updateCreateColorFromSlider("hue", value);
+									}
+								}),
+								/* @__PURE__ */ u(ColorComponentSlider, {
+									dataAttribute: "data-create-color-token-saturation-slider",
+									label: "Saturation",
+									min: 0,
+									max: 100,
+									value: createColor.value.saturation,
+									disabled: createSaving.value,
+									background: saturationSliderBackground,
+									onInput: (value) => {
+										updateCreateColorFromSlider("saturation", value);
+									}
+								}),
+								/* @__PURE__ */ u(ColorComponentSlider, {
+									dataAttribute: "data-create-color-token-brightness-slider",
+									label: "Value",
+									min: 0,
+									max: 100,
+									value: createColor.value.value,
+									disabled: createSaving.value,
+									background: valueSliderBackground,
+									onInput: (value) => {
+										updateCreateColorFromSlider("value", value);
+									}
+								}),
+								/* @__PURE__ */ u(ColorComponentSlider, {
+									dataAttribute: "data-create-color-token-alpha-slider",
+									label: "Alpha",
+									min: 0,
+									max: 100,
+									value: createColor.value.alpha,
+									disabled: createSaving.value,
+									background: alphaSliderBackground,
+									backgroundPosition: "0 0, 0 0, 0 6px, 6px -6px, -6px 0",
+									backgroundSize: "auto, 12px 12px, 12px 12px, 12px 12px, 12px 12px",
+									onInput: (value) => {
+										updateCreateColorFromSlider("alpha", value);
+									}
+								})
+							]
+						}),
 						createTargetSources.value.length > 1 ? /* @__PURE__ */ u("label", {
 							style: {
 								display: "grid",
@@ -5291,6 +6408,7 @@ function ColorTokenValueInput(props) {
 								onChange: (event) => {
 									createSourceTargetId.value = event.currentTarget.value;
 								},
+								style: CREATE_DIALOG_INPUT_STYLE,
 								children: createTargetSources.value.map((source) => /* @__PURE__ */ u("option", {
 									value: source.id,
 									children: tokenSourceTargetLabel(source)
@@ -5345,6 +6463,570 @@ function ColorTokenValueInput(props) {
 	});
 }
 //#endregion
+//#region src/ui/inputs/boxShadowInput.tsx
+const SHADOW_LENGTH_PATTERN = /^[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|%|vh|vw|svh|svw|dvh|dvw|ch|lh)?$/i;
+const SHADOW_LENGTH_FUNCTION_PATTERN = /^(?:calc|clamp|min|max)\(/i;
+function shouldUseBoxShadowInput(path) {
+	return pandaPreviewRootProperty(path) === "boxShadow";
+}
+function parseBoxShadowValue(value) {
+	const trimmed = value.trim();
+	if (!trimmed || trimmed.toLowerCase() === "none") return {
+		kind: "layers",
+		layers: []
+	};
+	const layerValues = splitTopLevel(trimmed, ",");
+	const layers = [];
+	for (const layerValue of layerValues) {
+		const layer = parseBoxShadowLayer(layerValue);
+		if (!layer) return {
+			kind: "raw",
+			value
+		};
+		layers.push(layer);
+	}
+	return {
+		kind: "layers",
+		layers
+	};
+}
+function serializeBoxShadowLayers(layers) {
+	if (layers.length === 0) return "none";
+	return layers.map((layer) => [
+		layer.inset ? "inset" : "",
+		layer.x,
+		layer.y,
+		layer.blur,
+		layer.spread,
+		layer.color
+	].filter((part) => part.trim() !== "").join(" ")).join(", ");
+}
+function BoxShadowInput(props) {
+	const firstExpandedInput = A$1(null);
+	const inactiveAutoActivation = useSignal(null);
+	const draft = useSignal(null);
+	const lastEmittedValue = A$1(null);
+	const parsed = draft.value && props.value === lastEmittedValue.current ? {
+		kind: "layers",
+		layers: draft.value.layers
+	} : parseBoxShadowValue(props.value);
+	const showInvalid = props.invalid;
+	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
+	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
+	_$2(() => {
+		if (props.value === lastEmittedValue.current) return;
+		const parsedValue = parseBoxShadowValue(props.value);
+		draft.value = parsedValue.kind === "layers" ? { layers: parsedValue.layers } : null;
+		lastEmittedValue.current = null;
+	}, [props.value]);
+	_$2(() => {
+		if (props.saving.value || props.focusRequest !== "expanded-first") return;
+		const timer = setTimeout(() => {
+			firstExpandedInput.current?.focus();
+			firstExpandedInput.current?.select();
+			props.onFocusRequestHandled();
+		}, 0);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [props.focusRequest, props.saving.value]);
+	const previewLayers = (layers, mode = "input") => {
+		const value = serializeBoxShadowLayers(layers);
+		draft.value = { layers };
+		lastEmittedValue.current = value;
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, value, mode);
+	};
+	const previewRaw = (value) => {
+		lastEmittedValue.current = value;
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, value, "input");
+	};
+	const previewLayerPart = (layers, index, layer, value, part, mode = "input") => {
+		previewLayers(replaceLayer(layers, index, {
+			...layer,
+			[part]: value
+		}), mode);
+	};
+	if (props.variant === "placeholder") return /* @__PURE__ */ u("button", {
+		type: "button",
+		"data-box-shadow-collapsed": "true",
+		"data-preview-target-id": props.targetId,
+		"data-preview-path": props.pathLabel,
+		"data-preview-changed": props.changed ? "true" : "false",
+		"data-preview-invalid": showInvalid ? "true" : "false",
+		disabled: props.saving.value,
+		onClick: () => {
+			props.onExpand();
+		},
+		onKeyDown: (event) => {
+			if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
+				event.preventDefault();
+				props.onModBackspace();
+			}
+		},
+		style: {
+			minWidth: 0,
+			width: "100%",
+			boxSizing: "border-box",
+			border: `1px solid ${borderColor}`,
+			borderRadius: "6px",
+			padding: "4px 6px",
+			font: "inherit",
+			color: "#172033",
+			background,
+			textAlign: "left",
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis"
+		},
+		children: props.value
+	});
+	if (parsed.kind === "raw") return /* @__PURE__ */ u("input", {
+		ref: firstExpandedInput,
+		"data-box-shadow-raw": "true",
+		"data-preview-target-id": props.targetId,
+		"data-preview-path": props.pathLabel,
+		"data-preview-changed": props.changed ? "true" : "false",
+		"data-preview-invalid": showInvalid ? "true" : "false",
+		disabled: props.saving.value,
+		value: props.value,
+		onInput: (event) => {
+			previewRaw(event.currentTarget.value);
+		},
+		onKeyDown: (event) => {
+			if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
+				event.preventDefault();
+				props.onModBackspace();
+				return;
+			}
+			if ((event.metaKey || event.ctrlKey) && event.key === "ArrowLeft") {
+				event.preventDefault();
+				props.onCollapse();
+			}
+		},
+		style: inputStyle(borderColor, background)
+	});
+	return /* @__PURE__ */ u("div", {
+		"data-box-shadow-input": "true",
+		style: {
+			display: "grid",
+			gap: "6px",
+			minWidth: 0
+		},
+		children: [parsed.layers.length === 0 ? /* @__PURE__ */ u("button", {
+			type: "button",
+			"data-action": "add-box-shadow-layer",
+			disabled: props.saving.value,
+			onClick: () => {
+				previewLayers([defaultBoxShadowLayer()]);
+			},
+			style: secondaryButtonStyle,
+			children: [/* @__PURE__ */ u(Plus, {
+				size: 13,
+				"aria-hidden": "true"
+			}), " Add shadow"]
+		}) : parsed.layers.map((layer, index) => /* @__PURE__ */ u("div", {
+			"data-box-shadow-layer": index,
+			style: {
+				display: "grid",
+				gridTemplateColumns: "minmax(0, 1fr)",
+				gap: "6px",
+				minWidth: 0,
+				padding: "6px",
+				border: "1px solid #eef2f7",
+				borderRadius: "6px"
+			},
+			children: [
+				/* @__PURE__ */ u("div", {
+					style: shadowPartRowStyle,
+					children: [/* @__PURE__ */ u(ShadowNumericInput, {
+						inputRef: index === 0 ? firstExpandedInput : void 0,
+						targetId: props.targetId,
+						path: props.path,
+						pathLabel: props.pathLabel,
+						part: "x",
+						layerIndex: index,
+						originalValue: layer.x,
+						value: layer.x,
+						changed: props.changed,
+						invalid: props.invalid,
+						saving: props.saving,
+						autoFocus: inactiveAutoActivation,
+						onAutoFocusHandled: () => {},
+						onPreviewInput: (value) => {
+							previewLayerPart(parsed.layers, index, layer, value, "x");
+						},
+						onModBackspace: props.onModBackspace,
+						onCollapse: props.onCollapse
+					}), /* @__PURE__ */ u(ShadowNumericInput, {
+						targetId: props.targetId,
+						path: props.path,
+						pathLabel: props.pathLabel,
+						part: "y",
+						layerIndex: index,
+						originalValue: layer.y,
+						value: layer.y,
+						changed: props.changed,
+						invalid: props.invalid,
+						saving: props.saving,
+						autoFocus: inactiveAutoActivation,
+						onAutoFocusHandled: () => {},
+						onPreviewInput: (value) => {
+							previewLayerPart(parsed.layers, index, layer, value, "y");
+						},
+						onModBackspace: props.onModBackspace,
+						onCollapse: props.onCollapse
+					})]
+				}),
+				/* @__PURE__ */ u("div", {
+					style: shadowPartRowStyle,
+					children: [/* @__PURE__ */ u(ShadowNumericInput, {
+						targetId: props.targetId,
+						path: props.path,
+						pathLabel: props.pathLabel,
+						part: "blur",
+						layerIndex: index,
+						originalValue: layer.blur || "0px",
+						value: layer.blur || "0px",
+						changed: props.changed,
+						invalid: props.invalid,
+						saving: props.saving,
+						autoFocus: inactiveAutoActivation,
+						onAutoFocusHandled: () => {},
+						onPreviewInput: (value) => {
+							previewLayerPart(parsed.layers, index, layer, value, "blur");
+						},
+						onModBackspace: props.onModBackspace,
+						onCollapse: props.onCollapse
+					}), /* @__PURE__ */ u(ShadowNumericInput, {
+						targetId: props.targetId,
+						path: props.path,
+						pathLabel: props.pathLabel,
+						part: "spread",
+						layerIndex: index,
+						originalValue: layer.spread || "0px",
+						value: layer.spread || "0px",
+						changed: props.changed,
+						invalid: props.invalid,
+						saving: props.saving,
+						autoFocus: inactiveAutoActivation,
+						onAutoFocusHandled: () => {},
+						onPreviewInput: (value) => {
+							previewLayerPart(parsed.layers, index, layer, value, "spread");
+						},
+						onModBackspace: props.onModBackspace,
+						onCollapse: props.onCollapse
+					})]
+				}),
+				/* @__PURE__ */ u("div", {
+					"data-box-shadow-part": "color",
+					children: /* @__PURE__ */ u(ColorTokenValueInput, {
+						targetId: props.targetId,
+						path: props.path,
+						pathLabel: `${props.pathLabel}.${index}.color`,
+						originalValue: layer.color,
+						value: layer.color,
+						changed: props.changed,
+						invalid: props.invalid,
+						autoOpen: inactiveAutoActivation,
+						options: props.colorTokenOptions,
+						tokenSources: props.tokenSources,
+						saving: props.saving,
+						onAutoOpenHandled: () => {},
+						onPreviewInput: (_editId, _path, _originalValue, value, mode = "input") => {
+							previewLayerPart(parsed.layers, index, layer, value, "color", mode);
+						},
+						onModBackspace: props.onModBackspace,
+						onCreateToken: props.onCreateToken,
+						onMenuOpenChange: props.onMenuOpenChange,
+						onArrowLeft: props.onCollapse
+					})
+				}),
+				/* @__PURE__ */ u("div", {
+					style: {
+						display: "inline-flex",
+						gap: "4px",
+						justifyContent: "flex-end",
+						alignItems: "center"
+					},
+					children: [
+						/* @__PURE__ */ u(IconButton, {
+							action: "toggle-box-shadow-inset",
+							label: layer.inset ? `Use outset shadow ${index + 1}` : `Use inset shadow ${index + 1}`,
+							disabled: props.saving.value,
+							onClick: () => {
+								previewLayers(replaceLayer(parsed.layers, index, {
+									...layer,
+									inset: !layer.inset
+								}));
+							},
+							children: layer.inset ? /* @__PURE__ */ u(SquareArrowRightEnter, {
+								size: 13,
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ u(SquareArrowRightExit, {
+								size: 13,
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ u(IconButton, {
+							action: "move-box-shadow-layer-up",
+							label: `Move shadow ${index + 1} up`,
+							disabled: props.saving.value || index === 0,
+							onClick: () => {
+								previewLayers(moveLayer(parsed.layers, index, index - 1));
+							},
+							children: /* @__PURE__ */ u(ArrowUp, {
+								size: 13,
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ u(IconButton, {
+							action: "move-box-shadow-layer-down",
+							label: `Move shadow ${index + 1} down`,
+							disabled: props.saving.value || index === parsed.layers.length - 1,
+							onClick: () => {
+								previewLayers(moveLayer(parsed.layers, index, index + 1));
+							},
+							children: /* @__PURE__ */ u(ArrowDown, {
+								size: 13,
+								"aria-hidden": "true"
+							})
+						}),
+						/* @__PURE__ */ u(IconButton, {
+							action: "remove-box-shadow-layer",
+							label: `Remove shadow ${index + 1}`,
+							disabled: props.saving.value,
+							onClick: () => {
+								previewLayers(parsed.layers.filter((_, layerIndex) => layerIndex !== index));
+							},
+							children: /* @__PURE__ */ u(Trash2, {
+								size: 13,
+								"aria-hidden": "true"
+							})
+						})
+					]
+				})
+			]
+		}, index)), parsed.layers.length > 0 ? /* @__PURE__ */ u("button", {
+			type: "button",
+			"data-action": "add-box-shadow-layer",
+			disabled: props.saving.value,
+			onClick: () => {
+				previewLayers([...parsed.layers, defaultBoxShadowLayer()]);
+			},
+			style: {
+				...secondaryButtonStyle,
+				justifySelf: "start"
+			},
+			children: [/* @__PURE__ */ u(Plus, {
+				size: 13,
+				"aria-hidden": "true"
+			}), " Add shadow"]
+		}) : null]
+	});
+}
+function ShadowNumericInput(props) {
+	const pathLabel = `${props.pathLabel}.${props.layerIndex}.${props.part}`;
+	const label = props.part === "x" ? "X" : props.part === "y" ? "Y" : props.part;
+	return /* @__PURE__ */ u("label", {
+		"data-box-shadow-part": props.part,
+		style: {
+			display: "grid",
+			gridTemplateColumns: "44px minmax(0, 1fr)",
+			gap: "4px",
+			alignItems: "center",
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ u("span", {
+			style: {
+				color: "#526070",
+				fontSize: "12px"
+			},
+			children: label
+		}), /* @__PURE__ */ u(RawValueInput, {
+			targetId: props.targetId,
+			path: props.path,
+			pathLabel,
+			numericProperty: props.part === "blur" ? "boxShadowBlur" : props.part === "spread" ? "boxShadowSpread" : void 0,
+			originalValue: props.originalValue,
+			value: props.value,
+			changed: props.changed,
+			invalid: props.invalid,
+			autoFocus: props.autoFocus,
+			inputRef: props.inputRef,
+			saving: props.saving,
+			onAutoFocusHandled: props.onAutoFocusHandled,
+			onPreviewInput: (_editId, _path, _originalValue, value) => {
+				props.onPreviewInput(clampedShadowPartValue(props.part, value));
+			},
+			onModBackspace: props.onModBackspace,
+			onArrowLeft: props.onCollapse
+		})]
+	});
+}
+function IconButton(props) {
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		"data-action": props.action,
+		"data-icon-button": "true",
+		"aria-label": props.label,
+		disabled: props.disabled,
+		onClick: props.onClick,
+		children: props.children
+	});
+}
+function parseBoxShadowLayer(value) {
+	const tokens = splitWhitespaceTopLevel(value.trim());
+	if (tokens.length === 0) return void 0;
+	const lengthTokens = [];
+	let inset = false;
+	tokens.forEach((token, index) => {
+		if (token.toLowerCase() === "inset") {
+			inset = true;
+			return;
+		}
+		if (lengthTokens.length < 4 && isShadowLengthToken(token)) lengthTokens.push({
+			index,
+			value: token
+		});
+	});
+	if (lengthTokens.length < 2) return void 0;
+	const lengthIndexes = new Set(lengthTokens.map((token) => token.index));
+	const color = tokens.filter((token, index) => token.toLowerCase() !== "inset" && !lengthIndexes.has(index)).join(" ");
+	return {
+		inset,
+		x: lengthTokens[0]?.value ?? "",
+		y: lengthTokens[1]?.value ?? "",
+		blur: clampedShadowPartValue("blur", lengthTokens[2]?.value ?? ""),
+		spread: clampedShadowPartValue("spread", lengthTokens[3]?.value ?? ""),
+		color
+	};
+}
+function splitTopLevel(value, separator) {
+	const parts = [];
+	let current = "";
+	let depth = 0;
+	let quote;
+	for (let index = 0; index < value.length; index += 1) {
+		const char = value[index];
+		const previous = value[index - 1];
+		if (quote) {
+			current += char;
+			if (char === quote && previous !== "\\") quote = void 0;
+			continue;
+		}
+		if (char === "\"" || char === "'") {
+			quote = char;
+			current += char;
+			continue;
+		}
+		if (char === "(" || char === "[") depth += 1;
+		else if (char === ")" || char === "]") depth = Math.max(0, depth - 1);
+		if (char === separator && depth === 0) {
+			parts.push(current.trim());
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	parts.push(current.trim());
+	return parts.filter((part) => part !== "");
+}
+function splitWhitespaceTopLevel(value) {
+	const parts = [];
+	let current = "";
+	let depth = 0;
+	let quote;
+	for (let index = 0; index < value.length; index += 1) {
+		const char = value[index];
+		const previous = value[index - 1];
+		if (quote) {
+			current += char;
+			if (char === quote && previous !== "\\") quote = void 0;
+			continue;
+		}
+		if (char === "\"" || char === "'") {
+			quote = char;
+			current += char;
+			continue;
+		}
+		if (char === "(" || char === "[") depth += 1;
+		else if (char === ")" || char === "]") depth = Math.max(0, depth - 1);
+		if (/\s/.test(char) && depth === 0) {
+			if (current) {
+				parts.push(current);
+				current = "";
+			}
+			continue;
+		}
+		current += char;
+	}
+	if (current) parts.push(current);
+	return parts;
+}
+function isShadowLengthToken(token) {
+	if (SHADOW_LENGTH_PATTERN.test(token)) return true;
+	return SHADOW_LENGTH_FUNCTION_PATTERN.test(token);
+}
+function clampedShadowPartValue(part, value) {
+	if (part !== "blur" && part !== "spread") return value;
+	const match = /^(?<number>[+-]?(?:\d+(?:\.\d+)?|\.\d+))(?<unit>.*)$/.exec(value.trim());
+	if (!match?.groups || !match.groups.number.startsWith("-")) return value;
+	return `0${match.groups.unit}`;
+}
+function replaceLayer(layers, index, layer) {
+	return layers.map((existing, layerIndex) => layerIndex === index ? layer : existing);
+}
+function moveLayer(layers, fromIndex, toIndex) {
+	if (toIndex < 0 || toIndex >= layers.length) return layers;
+	const next = [...layers];
+	const [layer] = next.splice(fromIndex, 1);
+	if (!layer) return layers;
+	next.splice(toIndex, 0, layer);
+	return next;
+}
+function defaultBoxShadowLayer() {
+	return {
+		inset: false,
+		x: "0px",
+		y: "4px",
+		blur: "12px",
+		spread: "0px",
+		color: "rgba(15, 23, 42, 0.16)"
+	};
+}
+function inputStyle(borderColor, background) {
+	return {
+		minWidth: 0,
+		width: "100%",
+		boxSizing: "border-box",
+		border: `1px solid ${borderColor}`,
+		borderRadius: "6px",
+		padding: "4px 6px",
+		font: "inherit",
+		color: "#172033",
+		background
+	};
+}
+const shadowPartRowStyle = {
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+	gap: "6px",
+	minWidth: 0
+};
+const secondaryButtonStyle = {
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "4px",
+	minWidth: 0,
+	justifyContent: "center",
+	border: "1px solid #d6dde8",
+	borderRadius: "6px",
+	padding: "4px 6px",
+	font: "inherit",
+	color: "#172033",
+	background: "#fff"
+};
+//#endregion
 //#region src/ui/inputs/finiteValueInput.tsx
 const GLOBAL_VALUE_GROUP = "Global";
 const GLOBAL_VALUES = [
@@ -6244,416 +7926,110 @@ function FontTokenValueInput(props) {
 	};
 	const selectActiveOption = () => {
 		const option = filteredOptions.value.find((item) => item.id === activeSelectableOptionId.value);
-		if (option) selectOption(option);
-	};
-	const renderTokenOption = (option) => {
-		const selected = selectedOption?.id === option.id;
-		return /* @__PURE__ */ u(ShadowMenuItem, {
-			active: activeSelectableOptionId.value === option.id,
-			class: "panda-token-selector-menu-item",
-			disabled: props.saving.value,
-			onPreview: () => {
-				activeOptionId.value = option.id;
-				previewOption(option);
-			},
-			onSelect: () => {
-				selectOption(option);
-			},
-			children: /* @__PURE__ */ u("span", {
-				"data-font-token-option": "true",
-				"data-font-token-option-id": option.id,
-				"aria-selected": selected,
-				onClick: (event) => {
-					event.stopPropagation();
-					selectOption(option);
-				},
-				style: {
-					minWidth: 0,
-					display: "grid",
-					gridTemplateColumns: "minmax(0, 1fr) auto",
-					alignItems: "center",
-					gap: "8px"
-				},
-				children: [/* @__PURE__ */ u("span", {
-					style: {
-						minWidth: 0,
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-						fontWeight: selected ? 700 : 400
-					},
-					children: option.label
-				}), option.detail ? /* @__PURE__ */ u("span", {
-					style: {
-						minWidth: 0,
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-						color: "#667085"
-					},
-					children: option.detail
-				}) : null]
-			})
-		}, option.id);
-	};
-	_$2(() => {
-		if (menuOpen.value) {
-			if (!previousMenuOpen.current) {
-				menuBaselineValue.current = props.value;
-				menuSelectionConfirmed.current = false;
-				props.onMenuOpenChange(true);
-			}
-			previousMenuOpen.current = true;
-			searchInput.current?.focus();
-			return;
-		}
-		if (previousMenuOpen.current && !menuSelectionConfirmed.current) props.onPreviewInput(props.targetId, props.path, props.originalValue, menuBaselineValue.current ?? props.value, "transient");
-		if (previousMenuOpen.current) {
-			trigger.current?.focus();
-			props.onMenuOpenChange(false);
-		}
-		previousMenuOpen.current = false;
-		menuBaselineValue.current = void 0;
-		menuSelectionConfirmed.current = false;
-	}, [menuOpen.value]);
-	_$2(() => {
-		if (props.saving.value) return;
-		const request = props.autoOpen.value;
-		if (!request || request.targetId !== props.targetId || request.pathLabel !== props.pathLabel) return;
-		menuOpen.value = true;
-		props.onAutoOpenHandled();
-	}, [props.autoOpen.value, props.saving.value]);
-	_$2(() => () => {
-		if (previousMenuOpen.current) props.onMenuOpenChange(false);
-	}, []);
-	_$2(() => {
-		if (optionList.current) optionList.current.scrollTop = 0;
-	}, [query.value]);
-	return /* @__PURE__ */ u("div", {
-		style: {
-			position: "relative",
-			minWidth: 0
-		},
-		children: [/* @__PURE__ */ u("button", {
-			ref: trigger,
-			type: "button",
-			"data-preview-target-id": props.targetId,
-			"data-preview-path": props.pathLabel,
-			"data-preview-font-token-selector": "true",
-			"data-preview-changed": props.changed ? "true" : "false",
-			"data-preview-invalid": showInvalid ? "true" : "false",
-			"data-preview-original-value": props.originalValue,
-			disabled: props.saving.value,
-			"aria-haspopup": "listbox",
-			"aria-expanded": menuOpen.value,
-			onClick: () => {
-				menuOpen.value = !menuOpen.value;
-			},
-			onKeyDown: (event) => {
-				if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
-					event.preventDefault();
-					props.onModBackspace();
-					return;
-				}
-				if (event.key === "Enter" && !menuOpen.value) {
-					event.preventDefault();
-					menuOpen.value = true;
-				}
-			},
-			onFocus: () => {
-				focused.value = true;
-			},
-			onBlur: () => {
-				focused.value = false;
-			},
-			style: {
-				minWidth: 0,
-				width: "100%",
-				display: "grid",
-				gridTemplateColumns: "1fr auto",
-				alignItems: "center",
-				gap: "8px",
-				boxSizing: "border-box",
-				border: `1px solid ${borderColor}`,
-				borderRadius: "6px",
-				padding: "4px 6px",
-				font: "inherit",
-				color: "#172033",
-				background,
-				textAlign: "left"
-			},
-			children: [/* @__PURE__ */ u("span", {
-				style: {
-					minWidth: 0,
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-					whiteSpace: "nowrap"
-				},
-				children: props.value
-			}), /* @__PURE__ */ u(Type, {
-				size: 14,
-				"aria-hidden": "true"
-			})]
-		}), /* @__PURE__ */ u(ShadowMenu, {
-			open: menuOpen,
-			onOpenChange: (open) => {
-				menuOpen.value = open;
-			},
-			anchor: () => trigger.current,
-			ariaLabel: "Font token selector",
-			class: "panda-token-selector-menu",
-			initialFocus: () => searchInput.current,
-			children: [/* @__PURE__ */ u("input", {
-				ref: searchInput,
-				type: "text",
-				"data-font-token-search": "true",
-				value: query.value,
-				placeholder: "Filter font tokens...",
-				disabled: props.saving.value,
-				onInput: (event) => {
-					query.value = event.currentTarget.value;
-					activeOptionId.value = void 0;
-				},
-				onKeyDown: (event) => {
-					if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
-						event.preventDefault();
-						menuOpen.value = false;
-						props.onModBackspace();
-						return;
-					}
-					if (event.key === "Escape") {
-						event.preventDefault();
-						menuOpen.value = false;
-						return;
-					}
-					if (event.key === "ArrowDown") {
-						event.preventDefault();
-						event.stopPropagation();
-						moveActiveOption(1);
-						return;
-					}
-					if (event.key === "ArrowUp") {
-						event.preventDefault();
-						event.stopPropagation();
-						moveActiveOption(-1);
-						return;
-					}
-					if (event.key === "Enter") {
-						event.preventDefault();
-						selectActiveOption();
-					}
+		if (option) selectOption(option);
+	};
+	const renderTokenOption = (option) => {
+		const selected = selectedOption?.id === option.id;
+		return /* @__PURE__ */ u(ShadowMenuItem, {
+			active: activeSelectableOptionId.value === option.id,
+			class: "panda-token-selector-menu-item",
+			disabled: props.saving.value,
+			onPreview: () => {
+				activeOptionId.value = option.id;
+				previewOption(option);
+			},
+			onSelect: () => {
+				selectOption(option);
+			},
+			children: /* @__PURE__ */ u("span", {
+				"data-font-token-option": "true",
+				"data-font-token-option-id": option.id,
+				"aria-selected": selected,
+				onClick: (event) => {
+					event.stopPropagation();
+					selectOption(option);
 				},
 				style: {
 					minWidth: 0,
-					width: "100%",
-					border: "1px solid #d6dde8",
-					borderRadius: "5px",
-					padding: "5px 7px",
-					color: "#172033",
-					background: "#fff"
-				}
-			}), /* @__PURE__ */ u("div", {
-				ref: optionList,
-				role: "listbox",
-				"data-font-token-list": "true",
-				style: {
 					display: "grid",
-					gap: "2px",
-					maxHeight: "232px",
-					overflow: "auto",
-					minHeight: "32px"
+					gridTemplateColumns: "minmax(0, 1fr) auto",
+					alignItems: "center",
+					gap: "8px"
 				},
-				children: filteredOptions.value.length === 0 ? /* @__PURE__ */ u("div", {
-					"data-font-token-no-matches": "true",
+				children: [/* @__PURE__ */ u("span", {
 					style: {
-						color: "#667085",
-						padding: "7px 8px"
+						minWidth: 0,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						fontWeight: selected ? 700 : 400
 					},
-					children: "No matching font tokens."
-				}) : hasFilterQuery.value ? filteredOptions.value.map((option) => renderTokenOption(option)) : groupedOptions.value.map((group) => /* @__PURE__ */ u("div", {
-					"data-font-token-group": group.presetName ? `${group.presetName} / ${group.label}` : group.label,
-					children: [
-						group.presetName ? /* @__PURE__ */ u("div", {
-							"data-font-token-preset-label": "true",
-							style: {
-								borderTop: "1px solid #e6ebf2",
-								color: "#344054",
-								fontSize: "11px",
-								fontWeight: 700,
-								padding: "8px 8px 1px"
-							},
-							children: group.presetName
-						}) : null,
-						/* @__PURE__ */ u("div", {
-							"data-font-token-group-label": "true",
-							style: {
-								color: "#667085",
-								fontSize: "11px",
-								fontWeight: 700,
-								padding: "6px 8px 2px",
-								textTransform: "uppercase"
-							},
-							children: group.label
-						}),
-						group.options.map((option) => renderTokenOption(option))
-					]
-				}, `${group.label}:${group.presetName ?? ""}`))
-			})]
-		})]
-	});
-}
-//#endregion
-//#region src/ui/inputs/rawValueInput.tsx
-const NUMERIC_INPUT_PATTERN = /^(?<number>[+-]?(?:\d+(?:\.\d+)?|\.\d+))(?<unit>px|rem|em|%|vh|vw|svh|svw|dvh|dvw|ch|lh|deg)?$/;
-const NON_NEGATIVE_NUMERIC_PROPERTIES = new Set([
-	"p",
-	"padding",
-	"paddingBlock",
-	"paddingBlockEnd",
-	"paddingBlockStart",
-	"paddingBottom",
-	"paddingInline",
-	"paddingInlineEnd",
-	"paddingInlineStart",
-	"paddingLeft",
-	"paddingRight",
-	"paddingTop",
-	"paddingX",
-	"paddingY",
-	"padding-block",
-	"padding-block-end",
-	"padding-block-start",
-	"padding-bottom",
-	"padding-inline",
-	"padding-inline-end",
-	"padding-inline-start",
-	"padding-left",
-	"padding-right",
-	"padding-top",
-	"pb",
-	"pl",
-	"pr",
-	"pt",
-	"px",
-	"py",
-	"gap",
-	"rowGap",
-	"columnGap",
-	"row-gap",
-	"column-gap",
-	"width",
-	"w",
-	"height",
-	"h",
-	"minWidth",
-	"minW",
-	"min-width",
-	"maxWidth",
-	"maxW",
-	"max-width",
-	"minHeight",
-	"minH",
-	"min-height",
-	"maxHeight",
-	"maxH",
-	"max-height",
-	"flexBasis",
-	"flex-basis",
-	"fontSize",
-	"font-size",
-	"lineHeight",
-	"line-height",
-	"aspectRatio",
-	"aspect-ratio",
-	"borderWidth",
-	"borderTopWidth",
-	"borderRightWidth",
-	"borderBottomWidth",
-	"borderLeftWidth",
-	"outlineWidth",
-	"border-width",
-	"border-top-width",
-	"border-right-width",
-	"border-bottom-width",
-	"border-left-width",
-	"outline-width",
-	"borderRadius",
-	"borderTopRadius",
-	"borderRightRadius",
-	"borderBottomRadius",
-	"borderLeftRadius",
-	"border-radius",
-	"border-top-radius",
-	"border-right-radius",
-	"border-bottom-radius",
-	"border-left-radius",
-	"rounded",
-	"roundedTop",
-	"roundedRight",
-	"roundedBottom",
-	"roundedLeft"
-]);
-function RawValueInput(props) {
-	const focused = useSignal(false);
-	const input = A$1(null);
-	const showInvalid = props.invalid && !focused.value;
-	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
-	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
-	const property = pandaPreviewRootProperty(props.path) ?? "";
-	const numeric = isSteppableNumericInput(property, props.value);
-	const stepValue = (direction, shiftKey = false, altKey = false) => {
-		const nextValue = steppedNumericInputValue({
-			property,
-			value: props.value,
-			direction,
-			shiftKey,
-			altKey
-		});
-		if (!nextValue) return;
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, nextValue, "input");
+					children: option.label
+				}), option.detail ? /* @__PURE__ */ u("span", {
+					style: {
+						minWidth: 0,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						color: "#667085"
+					},
+					children: option.detail
+				}) : null]
+			})
+		}, option.id);
 	};
+	_$2(() => {
+		if (menuOpen.value) {
+			if (!previousMenuOpen.current) {
+				menuBaselineValue.current = props.value;
+				menuSelectionConfirmed.current = false;
+				props.onMenuOpenChange(true);
+			}
+			previousMenuOpen.current = true;
+			searchInput.current?.focus();
+			return;
+		}
+		if (previousMenuOpen.current && !menuSelectionConfirmed.current) props.onPreviewInput(props.targetId, props.path, props.originalValue, menuBaselineValue.current ?? props.value, "transient");
+		if (previousMenuOpen.current) {
+			trigger.current?.focus();
+			props.onMenuOpenChange(false);
+		}
+		previousMenuOpen.current = false;
+		menuBaselineValue.current = void 0;
+		menuSelectionConfirmed.current = false;
+	}, [menuOpen.value]);
 	_$2(() => {
 		if (props.saving.value) return;
-		const request = props.autoFocus.value;
+		const request = props.autoOpen.value;
 		if (!request || request.targetId !== props.targetId || request.pathLabel !== props.pathLabel) return;
-		const timer = setTimeout(() => {
-			input.current?.focus();
-			input.current?.select();
-			props.onAutoFocusHandled();
-		}, 0);
-		return () => {
-			clearTimeout(timer);
-		};
-	}, [props.autoFocus.value, props.saving.value]);
-	return /* @__PURE__ */ u("div", {
-		style: {
-			position: "relative",
-			minWidth: 0
-		},
-		children: [/* @__PURE__ */ u("input", {
-			ref: (element) => {
-				input.current = element;
-				if (typeof props.inputRef === "function") props.inputRef(element);
-				else if (props.inputRef) props.inputRef.current = element;
-			},
+		menuOpen.value = true;
+		props.onAutoOpenHandled();
+	}, [props.autoOpen.value, props.saving.value]);
+	_$2(() => () => {
+		if (previousMenuOpen.current) props.onMenuOpenChange(false);
+	}, []);
+	_$2(() => {
+		if (optionList.current) optionList.current.scrollTop = 0;
+	}, [query.value]);
+	return /* @__PURE__ */ u("div", {
+		style: {
+			position: "relative",
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ u("button", {
+			ref: trigger,
+			type: "button",
 			"data-preview-target-id": props.targetId,
 			"data-preview-path": props.pathLabel,
-			"data-preview-shorthand-part": props.shorthandPart,
+			"data-preview-font-token-selector": "true",
 			"data-preview-changed": props.changed ? "true" : "false",
 			"data-preview-invalid": showInvalid ? "true" : "false",
 			"data-preview-original-value": props.originalValue,
 			disabled: props.saving.value,
-			value: props.value,
-			onFocus: () => {
-				focused.value = true;
-				props.onFocus?.();
-			},
-			onBlur: () => {
-				focused.value = false;
-				props.onBlur?.();
-			},
-			onInput: (event) => {
-				props.onPreviewInput(props.targetId, props.path, props.originalValue, event.currentTarget.value, "input");
+			"aria-haspopup": "listbox",
+			"aria-expanded": menuOpen.value,
+			onClick: () => {
+				menuOpen.value = !menuOpen.value;
 			},
 			onKeyDown: (event) => {
 				if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
@@ -6661,176 +8037,153 @@ function RawValueInput(props) {
 					props.onModBackspace();
 					return;
 				}
-				if ((event.metaKey || event.ctrlKey) && event.key === "ArrowRight" && props.onArrowRight) {
-					event.preventDefault();
-					props.onArrowRight();
-					return;
-				}
-				if ((event.metaKey || event.ctrlKey) && event.key === "ArrowLeft" && props.onArrowLeft) {
+				if (event.key === "Enter" && !menuOpen.value) {
 					event.preventDefault();
-					props.onArrowLeft();
-					return;
+					menuOpen.value = true;
 				}
-				if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
-				const nextValue = steppedNumericInputValue({
-					property,
-					value: event.currentTarget.value,
-					direction: event.key === "ArrowUp" ? 1 : -1,
-					shiftKey: event.shiftKey,
-					altKey: event.altKey
-				});
-				if (!nextValue) return;
-				event.preventDefault();
-				props.onPreviewInput(props.targetId, props.path, props.originalValue, nextValue, "input");
+			},
+			onFocus: () => {
+				focused.value = true;
+			},
+			onBlur: () => {
+				focused.value = false;
 			},
 			style: {
 				minWidth: 0,
 				width: "100%",
+				display: "grid",
+				gridTemplateColumns: "1fr auto",
+				alignItems: "center",
+				gap: "8px",
 				boxSizing: "border-box",
 				border: `1px solid ${borderColor}`,
 				borderRadius: "6px",
-				minHeight: numeric ? "30px" : void 0,
-				padding: numeric ? "4px 32px 4px 6px" : "4px 6px",
+				padding: "4px 6px",
 				font: "inherit",
 				color: "#172033",
-				background
-			}
-		}), numeric ? /* @__PURE__ */ u("div", {
-			"data-numeric-stepper": "true",
-			style: {
-				position: "absolute",
-				top: "2px",
-				right: "2px",
-				bottom: "2px",
-				width: "24px",
-				display: "grid",
-				gridTemplateRows: "1fr 1fr"
+				background,
+				textAlign: "left"
 			},
-			children: [/* @__PURE__ */ u(NumericStepperButton, {
-				action: "increment",
-				disabled: props.saving.value,
-				direction: "up",
-				label: `Increment ${props.pathLabel}`,
-				onStep: (shiftKey, altKey) => {
-					stepValue(1, shiftKey, altKey);
-				},
-				onKeepFocus: () => {
-					input.current?.focus();
-				}
-			}), /* @__PURE__ */ u(NumericStepperButton, {
-				action: "decrement",
-				disabled: props.saving.value,
-				direction: "down",
-				label: `Decrement ${props.pathLabel}`,
-				onStep: (shiftKey, altKey) => {
-					stepValue(-1, shiftKey, altKey);
+			children: [/* @__PURE__ */ u("span", {
+				style: {
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
 				},
-				onKeepFocus: () => {
-					input.current?.focus();
-				}
+				children: props.value
+			}), /* @__PURE__ */ u(Type, {
+				size: 14,
+				"aria-hidden": "true"
 			})]
-		}) : null]
-	});
-}
-function NumericStepperButton(props) {
-	return /* @__PURE__ */ u("button", {
-		type: "button",
-		"data-action": `numeric-${props.action}`,
-		tabIndex: -1,
-		disabled: props.disabled,
-		"aria-label": props.label,
-		onPointerDown: (event) => {
-			event.preventDefault();
-			props.onKeepFocus();
-		},
-		onClick: (event) => {
-			props.onStep(event.shiftKey, event.altKey);
-		},
-		style: {
-			width: "100%",
-			minWidth: 0,
-			height: "100%",
-			display: "grid",
-			placeItems: "center",
-			boxSizing: "border-box",
-			border: 0,
-			padding: 0,
-			background: "transparent"
-		},
-		children: /* @__PURE__ */ u("span", {
-			style: {
-				width: "100%",
-				alignSelf: "stretch",
-				justifySelf: "stretch",
-				display: "grid",
-				placeItems: "center",
-				borderRadius: "3px",
-				background: "#dbe3ef",
-				marginBottom: props.direction === "up" ? "1px" : 0,
-				marginTop: props.direction === "down" ? "1px" : 0
+		}), /* @__PURE__ */ u(ShadowMenu, {
+			open: menuOpen,
+			onOpenChange: (open) => {
+				menuOpen.value = open;
 			},
-			children: /* @__PURE__ */ u("span", {
-				"aria-hidden": "true",
+			anchor: () => trigger.current,
+			ariaLabel: "Font token selector",
+			class: "panda-token-selector-menu",
+			initialFocus: () => searchInput.current,
+			children: [/* @__PURE__ */ u("input", {
+				ref: searchInput,
+				type: "text",
+				"data-font-token-search": "true",
+				value: query.value,
+				placeholder: "Filter font tokens...",
+				disabled: props.saving.value,
+				onInput: (event) => {
+					query.value = event.currentTarget.value;
+					activeOptionId.value = void 0;
+				},
+				onKeyDown: (event) => {
+					if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
+						event.preventDefault();
+						menuOpen.value = false;
+						props.onModBackspace();
+						return;
+					}
+					if (event.key === "Escape") {
+						event.preventDefault();
+						menuOpen.value = false;
+						return;
+					}
+					if (event.key === "ArrowDown") {
+						event.preventDefault();
+						event.stopPropagation();
+						moveActiveOption(1);
+						return;
+					}
+					if (event.key === "ArrowUp") {
+						event.preventDefault();
+						event.stopPropagation();
+						moveActiveOption(-1);
+						return;
+					}
+					if (event.key === "Enter") {
+						event.preventDefault();
+						selectActiveOption();
+					}
+				},
 				style: {
-					width: 0,
-					height: 0,
-					borderLeft: "3px solid transparent",
-					borderRight: "3px solid transparent",
-					borderBottom: props.direction === "up" ? "4px solid #344054" : void 0,
-					borderTop: props.direction === "down" ? "4px solid #344054" : void 0
+					minWidth: 0,
+					width: "100%",
+					border: "1px solid #d6dde8",
+					borderRadius: "5px",
+					padding: "5px 7px",
+					color: "#172033",
+					background: "#fff"
 				}
-			})
-		})
+			}), /* @__PURE__ */ u("div", {
+				ref: optionList,
+				role: "listbox",
+				"data-font-token-list": "true",
+				style: {
+					display: "grid",
+					gap: "2px",
+					maxHeight: "232px",
+					overflow: "auto",
+					minHeight: "32px"
+				},
+				children: filteredOptions.value.length === 0 ? /* @__PURE__ */ u("div", {
+					"data-font-token-no-matches": "true",
+					style: {
+						color: "#667085",
+						padding: "7px 8px"
+					},
+					children: "No matching font tokens."
+				}) : hasFilterQuery.value ? filteredOptions.value.map((option) => renderTokenOption(option)) : groupedOptions.value.map((group) => /* @__PURE__ */ u("div", {
+					"data-font-token-group": group.presetName ? `${group.presetName} / ${group.label}` : group.label,
+					children: [
+						group.presetName ? /* @__PURE__ */ u("div", {
+							"data-font-token-preset-label": "true",
+							style: {
+								borderTop: "1px solid #e6ebf2",
+								color: "#344054",
+								fontSize: "11px",
+								fontWeight: 700,
+								padding: "8px 8px 1px"
+							},
+							children: group.presetName
+						}) : null,
+						/* @__PURE__ */ u("div", {
+							"data-font-token-group-label": "true",
+							style: {
+								color: "#667085",
+								fontSize: "11px",
+								fontWeight: 700,
+								padding: "6px 8px 2px",
+								textTransform: "uppercase"
+							},
+							children: group.label
+						}),
+						group.options.map((option) => renderTokenOption(option))
+					]
+				}, `${group.label}:${group.presetName ?? ""}`))
+			})]
+		})]
 	});
 }
-function steppedNumericInputValue(input) {
-	const trimmedValue = input.value.trim();
-	const match = NUMERIC_INPUT_PATTERN.exec(trimmedValue);
-	if (!match?.groups) return void 0;
-	const current = Number(match.groups.number);
-	if (!Number.isFinite(current)) return void 0;
-	const unit = match.groups.unit ?? "";
-	if (input.property === "opacity" && unit) return void 0;
-	const step = numericInputStep(input.property, input.shiftKey === true, input.altKey === true);
-	return `${formatSteppedNumber(boundedNumericInputValue(input.property, current + input.direction * step), match.groups.number, step)}${unit}`;
-}
-function isSteppableNumericInput(property, value) {
-	return steppedNumericInputValue({
-		property,
-		value,
-		direction: 1
-	}) !== void 0;
-}
-function numericInputStep(property, shiftKey, altKey) {
-	if (property === "opacity") {
-		if (shiftKey && altKey) return 1e-4;
-		if (shiftKey) return .1;
-		if (altKey) return .001;
-		return .01;
-	}
-	if (property === "lineHeight") {
-		if (shiftKey && altKey) return 1e-4;
-		if (shiftKey) return .1;
-		if (altKey) return .001;
-		return .01;
-	}
-	const step = shiftKey && altKey ? .01 : shiftKey ? 10 : altKey ? .1 : 1;
-	if (property === "fontWeight") return shiftKey && !altKey ? 100 : Math.max(step, 10);
-	return step;
-}
-function boundedNumericInputValue(property, value) {
-	if (property === "opacity") return Math.min(1, Math.max(0, value));
-	if (NON_NEGATIVE_NUMERIC_PROPERTIES.has(property)) return Math.max(0, value);
-	return value;
-}
-function formatSteppedNumber(value, originalNumber, step) {
-	const precision = Math.max(decimalPlaces(originalNumber), decimalPlaces(String(step)));
-	const fixed = value.toFixed(precision);
-	return fixed.includes(".") ? fixed.replace(/\.?0+$/, "") : fixed;
-}
-function decimalPlaces(value) {
-	return value.includes(".") ? value.split(".")[1]?.length ?? 0 : 0;
-}
 //#endregion
 //#region src/ui/inputs/shorthandValueInput.tsx
 const BOX_SHORTHAND_PROPERTIES = new Set([
@@ -6838,8 +8191,7 @@ const BOX_SHORTHAND_PROPERTIES = new Set([
 	"margin",
 	"inset",
 	"borderWidth",
-	"borderStyle",
-	"borderColor"
+	"borderStyle"
 ]);
 const RADIUS_SHORTHAND_PROPERTIES = new Set(["borderRadius"]);
 const BORDER_COMPOUND_SHORTHAND_PROPERTIES = new Set(["border", "outline"]);
@@ -6869,6 +8221,9 @@ function ShorthandValueInput(props) {
 	const showInvalid = props.invalid && focusedPart.value === void 0;
 	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
 	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
+	const expandedWidth = model?.lockableBox ? `calc(48px + 6px + ${props.inputWidth} + 6px + 22px)` : `calc(48px + 6px + ${props.inputWidth})`;
+	const inputWidthPixels = props.inputWidth.match(/^(\d+(?:\.\d+)?)px$/)?.[1];
+	const nestedPartInputWidth = inputWidthPixels ? `${Math.max(0, Number(inputWidthPixels) - 54)}px` : `calc(${props.inputWidth} - 54px)`;
 	const focusFirstExpandedControl = () => {
 		const control = firstInput.current ?? expandedRoot.current?.querySelector("input:not(:disabled), button:not(:disabled)");
 		control?.focus();
@@ -6876,10 +8231,14 @@ function ShorthandValueInput(props) {
 	};
 	_$2(() => {
 		if (variant !== "placeholder" && props.focusRequest === "expanded-first") {
-			focusFirstExpandedControl();
-			props.onFocusRequestHandled();
+			const timer = setTimeout(() => {
+				focusFirstExpandedControl();
+				props.onFocusRequestHandled();
+			}, 0);
 			wasExpanded.current = props.expanded;
-			return;
+			return () => {
+				clearTimeout(timer);
+			};
 		}
 		if (variant === "placeholder" || !props.expanded || wasExpanded.current) {
 			wasExpanded.current = props.expanded;
@@ -6887,7 +8246,7 @@ function ShorthandValueInput(props) {
 		}
 		focusFirstExpandedControl();
 		wasExpanded.current = props.expanded;
-	}, [props.expanded]);
+	}, [props.expanded, props.focusRequest]);
 	if (!model) return null;
 	const collapsedValue = model.serialize(model.parts);
 	const updatePart = (key, value, mode = "input") => {
@@ -6959,7 +8318,7 @@ function ShorthandValueInput(props) {
 			display: "grid",
 			gap: "4px",
 			minWidth: 0,
-			width: `calc(48px + 6px + ${props.inputWidth})`
+			width: expandedWidth
 		},
 		children: model.parts.map((part) => /* @__PURE__ */ u("label", {
 			style: {
@@ -6978,7 +8337,31 @@ function ShorthandValueInput(props) {
 					},
 					children: part.label
 				}),
-				shouldUseColorTokenSelector(part.inputPath, part.value, props.colorTokenOptions.value) ? /* @__PURE__ */ u(ColorTokenValueInput, {
+				shouldUseColorTokenSelector(part.inputPath, part.value, props.colorTokenOptions.value) && colorTokenOpacityInputValue(part.value) ? /* @__PURE__ */ u(ColorTokenOpacityInput, {
+					targetId: props.targetId,
+					path: part.inputPath,
+					pathLabel: props.pathLabel,
+					originalValue: props.originalValue,
+					value: part.value,
+					changed: props.changed,
+					invalid: props.invalid,
+					expanded: true,
+					variant: "expanded-parts",
+					inputWidth: nestedPartInputWidth,
+					autoOpen: noAutoFocus,
+					options: props.colorTokenOptions,
+					tokenSources: props.tokenSources,
+					saving: props.saving,
+					onAutoOpenHandled: () => {},
+					onExpand: () => {},
+					onCollapse: props.onCollapse,
+					onPreviewInput: (_editId, _path, _originalValue, value, mode) => {
+						updatePart(part.key, value, mode);
+					},
+					onModBackspace: props.onModBackspace,
+					onCreateToken: props.onCreateToken,
+					onMenuOpenChange: props.onMenuOpenChange
+				}) : shouldUseColorTokenSelector(part.inputPath, part.value, props.colorTokenOptions.value) ? /* @__PURE__ */ u(ColorTokenValueInput, {
 					targetId: props.targetId,
 					path: part.inputPath,
 					pathLabel: props.pathLabel,
@@ -7219,7 +8602,7 @@ function splitShorthandValue(value) {
 	return parts;
 }
 function isSupportedPandaTokenReference(value) {
-	return pandaTokenPathFromValue(value, "colors") !== void 0 || pandaTokenPathFromValue(value, "fonts") !== void 0;
+	return pandaColorTokenValueFromString(value) !== void 0 || pandaTokenPathFromValue(value, "colors") !== void 0 || pandaTokenPathFromValue(value, "fonts") !== void 0;
 }
 function expandBoxValues(parts) {
 	const top = parts[0] ?? "";
@@ -7755,6 +9138,7 @@ function InspectorPanel(props) {
 	const inspectCursorActive = A$1(false);
 	const selectedElement = A$1();
 	const selectedElementAutofocusRevision = useSignal(0);
+	const propertyFilterQuery = useSignal("");
 	const shell = A$1(null);
 	const contentScroller = A$1(null);
 	const previousPreviewBarVisible = A$1(false);
@@ -8275,7 +9659,12 @@ function InspectorPanel(props) {
 		});
 		commitPreviewHistoryStep(before, next);
 		applyPreviewState(next);
-		addedInputActivationRequest.value = {
+		if (pandaPreviewRootProperty(path) === "boxShadow" || shorthandValueInputBehavior(path, value) !== void 0) {
+			const key = previewChangeKey(editId, path);
+			expandedShorthandInputs.value = new Set([...expandedShorthandInputs.value, key]);
+			shorthandFocusRequest.value = { key };
+			addedInputActivationRequest.value = null;
+		} else addedInputActivationRequest.value = {
 			targetId: editId,
 			pathLabel: path.join(".")
 		};
@@ -8351,25 +9740,33 @@ function InspectorPanel(props) {
 			if (styleModuleCreateEditIds.has(change.editId)) continue;
 			changesByEditId.set(change.editId, [...changesByEditId.get(change.editId) ?? [], change]);
 		}
-		return Array.from(changesByEditId, ([editId, changes]) => {
-			const entry = runtime.getEntry(editId);
-			return {
-				editId,
-				kind: "panda-css",
-				edits: changes.map((change) => {
-					if (change.op === "delete") return {
-						op: "delete",
-						path: change.path
-					};
-					return {
-						op: "set",
-						path: change.path,
-						value: change.value
-					};
-				}),
-				options: { expectedSourceHash: entry?.sourceHash }
-			};
-		});
+		const missingTargetIds = Array.from(changesByEditId.keys()).filter((editId) => !runtime.getEntry(editId));
+		if (missingTargetIds.length > 0) return {
+			ok: false,
+			missingTargetIds
+		};
+		return {
+			ok: true,
+			requests: Array.from(changesByEditId, ([editId, changes]) => {
+				const entry = runtime.getEntry(editId);
+				return {
+					editId,
+					kind: "panda-css",
+					edits: changes.map((change) => {
+						if (change.op === "delete") return {
+							op: "delete",
+							path: change.path
+						};
+						return {
+							op: "set",
+							path: change.path,
+							value: change.value
+						};
+					}),
+					options: { expectedSourceHash: entry?.sourceHash }
+				};
+			})
+		};
 	};
 	const createInlineSourceRequests = () => {
 		flushPreviewHistoryBatch();
@@ -8440,23 +9837,36 @@ function InspectorPanel(props) {
 		});
 	};
 	const savePreviewChanges = () => {
-		const requests = createStyleEditRequests();
 		const inlineSourceRequests = createInlineSourceRequests();
 		const styleModuleRequests = createStyleModuleRequests();
-		if (requests.length === 0 && inlineSourceRequests.length === 0 && styleModuleRequests.length === 0) return;
 		saveFlow.value = { status: "saving" };
-		const saveOperationCount = (requests.length > 0 ? 1 : 0) + inlineSourceRequests.length + styleModuleRequests.length;
-		const requestResponses = (write) => {
-			const styleResponses = requests.length > 0 ? runtime.requestStyleEditBatch(requests, write) : Promise.resolve([]);
-			const inlineSourceResponses = Promise.all(inlineSourceRequests.map((request) => runtime.requestInlineCssSource(request, write)));
-			const styleModuleResponses = Promise.all(styleModuleRequests.map((request) => runtime.requestStyleModuleEdit(request, write)));
-			return Promise.all([
-				styleResponses,
-				inlineSourceResponses,
-				styleModuleResponses
-			]).then((responses) => responses.flat());
-		};
 		(async () => {
+			await runtime.loadManifest();
+			const styleRequestResult = createStyleEditRequests();
+			if (!styleRequestResult.ok) {
+				saveFlow.value = {
+					status: "error",
+					message: `Selected source target is stale: ${styleRequestResult.missingTargetIds.join(" ")}`
+				};
+				await refreshSelectedElementInfo();
+				return;
+			}
+			const requests = styleRequestResult.requests;
+			if (requests.length === 0 && inlineSourceRequests.length === 0 && styleModuleRequests.length === 0) {
+				saveFlow.value = { status: "idle" };
+				return;
+			}
+			const saveOperationCount = (requests.length > 0 ? 1 : 0) + inlineSourceRequests.length + styleModuleRequests.length;
+			const requestResponses = (write) => {
+				const styleResponses = requests.length > 0 ? runtime.requestStyleEditBatch(requests, write) : Promise.resolve([]);
+				const inlineSourceResponses = Promise.all(inlineSourceRequests.map((request) => runtime.requestInlineCssSource(request, write)));
+				const styleModuleResponses = Promise.all(styleModuleRequests.map((request) => runtime.requestStyleModuleEdit(request, write)));
+				return Promise.all([
+					styleResponses,
+					inlineSourceResponses,
+					styleModuleResponses
+				]).then((responses) => responses.flat());
+			};
 			if (saveOperationCount > 1) {
 				const dryRunFailure = (await requestResponses(false)).find((response) => !response.ok);
 				if (dryRunFailure) {
@@ -8771,8 +10181,13 @@ function InspectorPanel(props) {
 						disabled: saving,
 						onToggle: toggleForcedPreviewState
 					}) : null,
+					view.value.editableTargets.length > 0 || view.value.inheritedTargets.length > 0 ? /* @__PURE__ */ u(PropertyFilterInput, {
+						query: propertyFilterQuery,
+						saving
+					}) : null,
 					/* @__PURE__ */ u(EditableTargetsSection, {
 						view,
+						propertyFilterQuery,
 						preview,
 						elementStyleModule,
 						forcedPreviewStates,
@@ -8837,6 +10252,7 @@ function InspectorPanel(props) {
 						heading: "Inherited Styles",
 						targets: view.value.inheritedTargets,
 						view,
+						propertyFilterQuery,
 						preview,
 						forcedPreviewStates,
 						expandedShorthandInputs,
@@ -9022,6 +10438,12 @@ function selectedElementAutofocusKey(info, selectionRevision) {
 }
 function focusInitialInspectorEditControl(shell) {
 	if (!shell) return;
+	const propertyFilter = shell.querySelector("input[data-inspector-property-filter=\"true\"]:not(:disabled)");
+	if (propertyFilter) {
+		propertyFilter.focus();
+		propertyFilter.select();
+		return;
+	}
 	const firstPropertyControl = shell.querySelector([
 		"input[data-preview-target-id][data-preview-path]:not(:disabled)",
 		"button[data-preview-target-id][data-preview-path]:not(:disabled):not([data-action])",
@@ -9034,6 +10456,15 @@ function focusInitialInspectorEditControl(shell) {
 	}
 	shell.querySelector("button[data-action=\"create-inline-source\"]:not(:disabled)")?.focus();
 }
+function focusFirstVisiblePropertyMatch(shell) {
+	const firstVisibleRow = shell.querySelector("[data-preview-row-path]");
+	(firstVisibleRow?.querySelector([
+		"input[data-preview-target-id][data-preview-path]:not(:disabled)",
+		"button[data-preview-target-id][data-preview-path]:not(:disabled):not([data-action])",
+		"select[data-preview-target-id][data-preview-path]:not(:disabled)",
+		"textarea[data-preview-target-id][data-preview-path]:not(:disabled)"
+	].join(",")) ?? firstVisibleRow?.querySelector("button[data-preview-path-label]:not(:disabled)"))?.focus();
+}
 function isPreviewValueControl(element) {
 	if (!element.hasAttribute("data-preview-target-id")) return false;
 	if (!element.hasAttribute("data-preview-path")) return false;
@@ -9561,7 +10992,7 @@ function StyleModuleSection(props) {
 	});
 }
 function EditableTargetsSection(props) {
-	const { view, targets, preview, elementStyleModule, heading = "Style Sources", forcedPreviewStates, expandedShorthandInputs, shorthandFocusRequest, colorTokenOptions, fontTokenOptions, tokenSources, propertyOptions, saving, addedInputActivationRequest, onPreviewInput, onCreateColorToken, onAddedInputActivationHandled, onAddProperty, onCreateInlineSource, onAttachStyleModuleSource, onDetachStyleModuleSource, onRemoveProperty, onFocusRestoreButton, onFocusPreviewControl, onRestoreProperty, onHighlightSourceTarget, onClearHighlight, onOpenSource, onInputMenuOpenChange, onToggleShorthandInput, onExpandShorthandInput, onCollapseShorthandInput, onRequestShorthandFocus, onShorthandFocusRequestHandled } = props;
+	const { view, targets, propertyFilterQuery, preview, elementStyleModule, heading = "Style Sources", forcedPreviewStates, expandedShorthandInputs, shorthandFocusRequest, colorTokenOptions, fontTokenOptions, tokenSources, propertyOptions, saving, addedInputActivationRequest, onPreviewInput, onCreateColorToken, onAddedInputActivationHandled, onAddProperty, onCreateInlineSource, onAttachStyleModuleSource, onDetachStyleModuleSource, onRemoveProperty, onFocusRestoreButton, onFocusPreviewControl, onRestoreProperty, onHighlightSourceTarget, onClearHighlight, onOpenSource, onInputMenuOpenChange, onToggleShorthandInput, onExpandShorthandInput, onCollapseShorthandInput, onRequestShorthandFocus, onShorthandFocusRequestHandled } = props;
 	const sourceManagementEnabled = targets === void 0;
 	const baseEditableTargets = targets ?? view.value.editableTargets;
 	const inspectedJsxSource = view.value.inspectedJsxSource;
@@ -9602,8 +11033,21 @@ function EditableTargetsSection(props) {
 		...pendingAttachedStyleSourceTargets,
 		...pendingInlineSourceTarget ? [pendingInlineSourceTarget] : []
 	];
-	const inlineSourceCreate = sourceManagementEnabled && view.value.inlineSourceCreate && !pendingInlineSourceTarget ? view.value.inlineSourceCreate : void 0;
-	if (editableTargets.length === 0 && (!sourceManagementEnabled || !inlineSourceCreate) && (!sourceManagementEnabled || !canAttachStyleSource)) return null;
+	const propertyFilterText = propertyFilterQuery?.value.trim() ?? "";
+	const propertyFilterActive = propertyFilterText.length > 0;
+	const targetPanels = editableTargets.flatMap((target) => {
+		const rows = targetRowsWithPendingChanges(target, preview.changes.value);
+		const visibleRows = propertyFilterActive ? filteredPropertyRows(propertyFilterText, rows) : rows;
+		if (propertyFilterActive && visibleRows.length === 0) return [];
+		return [{
+			target,
+			rows,
+			rowGroups: groupedEditableRows(visibleRows)
+		}];
+	});
+	const inspectedElementSourceLocation = sourceManagementEnabled && editableTargets.length === 0 && inspectedJsxSource ? inspectedJsxSource : void 0;
+	const inlineSourceCreate = sourceManagementEnabled && !propertyFilterActive && view.value.inlineSourceCreate && !pendingInlineSourceTarget ? view.value.inlineSourceCreate : void 0;
+	if (targetPanels.length === 0 && !inspectedElementSourceLocation && (!sourceManagementEnabled || !inlineSourceCreate) && (!sourceManagementEnabled || propertyFilterActive || !canAttachStyleSource)) return null;
 	return /* @__PURE__ */ u("section", {
 		"data-editable-sources-section": "true",
 		children: [
@@ -9614,7 +11058,7 @@ function EditableTargetsSection(props) {
 				},
 				children: heading
 			}) : null,
-			sourceManagementEnabled && (inlineSourceCreate || canAttachStyleSource) ? /* @__PURE__ */ u("div", {
+			sourceManagementEnabled && !propertyFilterActive && (inlineSourceCreate || canAttachStyleSource) ? /* @__PURE__ */ u("div", {
 				style: {
 					display: "flex",
 					flexWrap: "wrap",
@@ -9649,7 +11093,43 @@ function EditableTargetsSection(props) {
 					onMenuOpenChange: onInputMenuOpenChange
 				}) : null]
 			}) : null,
-			editableTargets.map((target, targetIndex) => /* @__PURE__ */ u("div", {
+			inspectedElementSourceLocation ? /* @__PURE__ */ u("div", {
+				"data-inspected-jsx-source-panel": "true",
+				style: {
+					display: "grid",
+					gap: "2px",
+					marginTop: "8px",
+					paddingTop: "8px",
+					borderTop: "1px solid #eef2f7"
+				},
+				children: [/* @__PURE__ */ u("span", {
+					style: {
+						color: "#667085",
+						fontSize: "12px"
+					},
+					children: "JSX element"
+				}), /* @__PURE__ */ u("button", {
+					type: "button",
+					"data-action": "open-inspected-jsx-source-location",
+					onClick: () => {
+						onOpenSource(inspectedElementSourceLocation);
+					},
+					style: {
+						minWidth: 0,
+						justifySelf: "start",
+						border: 0,
+						padding: 0,
+						background: "transparent",
+						textAlign: "left",
+						font: "inherit",
+						whiteSpace: "normal",
+						wordBreak: "break-word",
+						color: "#475467"
+					},
+					children: /* @__PURE__ */ u("code", { children: inspectedElementSourceLocation })
+				})]
+			}) : null,
+			targetPanels.map(({ target, rows, rowGroups }, targetIndex) => /* @__PURE__ */ u("div", {
 				"data-editable-target-panel": "true",
 				"data-editable-target-id": target.id,
 				style: {
@@ -9694,6 +11174,7 @@ function EditableTargetsSection(props) {
 								"data-action": "open-editable-source-location",
 								"data-editable-source-identity": target.name ? void 0 : "true",
 								"data-editable-source-target-id": target.name ? void 0 : target.id,
+								tabIndex: -1,
 								onMouseEnter: target.name ? void 0 : () => {
 									onHighlightSourceTarget(target.id);
 								},
@@ -9735,8 +11216,6 @@ function EditableTargetsSection(props) {
 						]
 					});
 				})(), (() => {
-					const rows = targetRowsWithPendingChanges(target, preview.changes.value);
-					const rowGroups = groupedEditableRows(rows);
 					const activeAddPropertyPathPrefix = addPropertyPathPrefix(forcedPreviewStates.value);
 					const defaultAddPropertyPathPrefix = rowGroups.some((group) => group.pathPrefix.join(".") === activeAddPropertyPathPrefix.join(".")) ? [] : activeAddPropertyPathPrefix;
 					const existingPaths = rows.map((row) => row.path);
@@ -9751,13 +11230,22 @@ function EditableTargetsSection(props) {
 						const value = row.previewValue === void 0 ? row.value : previewChange?.value ?? row.previewValue;
 						const editable = row.previewValue !== void 0 && !removed;
 						const invalid = editable && !isPreviewInputCssValid(path, value);
+						const boxShadowInput = editable && shouldUseBoxShadowInput(path);
 						const shorthandInputBehavior = editable ? shorthandValueInputBehavior(path, value) : void 0;
 						const shorthandInput = shorthandInputBehavior !== void 0;
-						const shorthandKey = previewChangeKey(target.id, path);
-						const shorthandExpanded = shorthandInputBehavior === "expanded" || expandedShorthandInputs.value.has(shorthandKey);
+						const expandableInputKey = previewChangeKey(target.id, path);
+						const shorthandExpanded = shorthandInputBehavior === "expanded" || expandedShorthandInputs.value.has(expandableInputKey);
+						const boxShadowExpanded = boxShadowInput && expandedShorthandInputs.value.has(expandableInputKey);
 						const collapsedShorthandInput = shorthandInput && !shorthandExpanded ? shorthandCollapsedValueInput(path, value) : void 0;
+						const colorTokenOpacityInput = editable && shouldUseColorTokenSelector(path, value, colorTokenOptions.value) ? colorTokenOpacityInputValue(value) : void 0;
+						const colorTokenOpacityExpanded = colorTokenOpacityInput !== void 0 && expandedShorthandInputs.value.has(expandableInputKey);
+						const rowExpandable = shorthandInputBehavior === "collapsible" || boxShadowInput || colorTokenOpacityInput !== void 0;
+						const rowExpanded = shorthandExpanded || boxShadowExpanded || colorTokenOpacityExpanded;
 						const labelOwnLine = displayPath.length > 18;
 						const shorthandExpandedArea = shorthandInput && shorthandExpanded && row.previewValue !== void 0;
+						const boxShadowExpandedArea = boxShadowExpanded && row.previewValue !== void 0;
+						const colorTokenOpacityExpandedArea = colorTokenOpacityExpanded && row.previewValue !== void 0;
+						const expandedInputArea = shorthandExpandedArea || boxShadowExpandedArea || colorTokenOpacityExpandedArea;
 						const handleModBackspace = () => {
 							if (changed && !added) {
 								onRestoreProperty(target.id, path);
@@ -9775,7 +11263,7 @@ function EditableTargetsSection(props) {
 							style: {
 								display: "grid",
 								gridTemplateColumns: labelOwnLine ? "minmax(0, 1fr) 24px" : `minmax(0, 1fr) ${PROPERTY_INPUT_WIDTH} 24px`,
-								gridTemplateAreas: shorthandExpandedArea ? labelOwnLine ? "\"label action\" \"value value\" \"expanded expanded\"" : "\"label value action\" \"expanded expanded expanded\"" : labelOwnLine ? "\"label action\" \"value value\"" : "\"label value action\"",
+								gridTemplateAreas: expandedInputArea ? labelOwnLine ? "\"label action\" \"value value\" \"expanded expanded\"" : "\"label value action\" \"expanded expanded expanded\"" : labelOwnLine ? "\"label action\" \"value value\"" : "\"label value action\"",
 								columnGap: labelOwnLine ? "0" : "8px",
 								rowGap: "4px",
 								marginTop: "4px",
@@ -9794,9 +11282,9 @@ function EditableTargetsSection(props) {
 											onRestoreProperty(target.id, path);
 											return;
 										}
-										if (shorthandInputBehavior !== "collapsible") return;
+										if (!rowExpandable) return;
 										event.preventDefault();
-										onToggleShorthandInput(shorthandKey);
+										onToggleShorthandInput(expandableInputKey);
 									},
 									style: {
 										gridArea: "label",
@@ -9812,17 +11300,17 @@ function EditableTargetsSection(props) {
 										font: "inherit",
 										background: "transparent",
 										color: "inherit",
-										cursor: shorthandInputBehavior === "collapsible" ? "pointer" : "default",
+										cursor: rowExpandable ? "pointer" : "default",
 										whiteSpace: labelOwnLine ? "normal" : "nowrap",
 										overflowWrap: "anywhere",
 										textDecoration: removed ? "line-through" : "none"
 									},
-									children: [/* @__PURE__ */ u("code", { children: displayPath }), shorthandInputBehavior === "collapsible" ? /* @__PURE__ */ u(ChevronRight, {
+									children: [/* @__PURE__ */ u("code", { children: displayPath }), rowExpandable ? /* @__PURE__ */ u(ChevronRight, {
 										size: 13,
 										"aria-hidden": "true",
 										style: {
 											flex: "0 0 auto",
-											transform: shorthandExpanded ? "rotate(90deg)" : void 0
+											transform: rowExpanded ? "rotate(90deg)" : void 0
 										}
 									}) : null]
 								}),
@@ -9842,6 +11330,33 @@ function EditableTargetsSection(props) {
 											wordBreak: "break-word"
 										},
 										children: row.value
+									}) : colorTokenOpacityInput ? /* @__PURE__ */ u(ColorTokenOpacityInput, {
+										targetId: target.id,
+										path,
+										pathLabel: row.path,
+										originalValue: row.previewValue,
+										value,
+										changed,
+										invalid,
+										expanded: colorTokenOpacityExpanded,
+										variant: colorTokenOpacityExpanded ? "placeholder" : "full",
+										inputWidth: PROPERTY_INPUT_WIDTH,
+										autoOpen: addedInputActivationRequest,
+										options: colorTokenOptions,
+										tokenSources,
+										saving,
+										onAutoOpenHandled: onAddedInputActivationHandled,
+										onExpand: () => {
+											onExpandShorthandInput(expandableInputKey);
+										},
+										onCollapse: () => {
+											onCollapseShorthandInput(expandableInputKey);
+											onFocusPreviewControl(target.id, path);
+										},
+										onPreviewInput,
+										onModBackspace: handleModBackspace,
+										onCreateToken: onCreateColorToken,
+										onMenuOpenChange: onInputMenuOpenChange
 									}) : collapsedShorthandInput?.editable && shouldUseColorTokenSelector(path, collapsedShorthandInput.value, colorTokenOptions.value) ? /* @__PURE__ */ u(ColorTokenValueInput, {
 										targetId: target.id,
 										path,
@@ -9860,8 +11375,8 @@ function EditableTargetsSection(props) {
 										onCreateToken: onCreateColorToken,
 										onMenuOpenChange: onInputMenuOpenChange,
 										onArrowRight: () => {
-											onExpandShorthandInput(shorthandKey);
-											onRequestShorthandFocus({ key: shorthandKey });
+											onExpandShorthandInput(expandableInputKey);
+											onRequestShorthandFocus({ key: expandableInputKey });
 										}
 									}) : collapsedShorthandInput?.editable ? /* @__PURE__ */ u(RawValueInput, {
 										targetId: target.id,
@@ -9877,8 +11392,8 @@ function EditableTargetsSection(props) {
 										onPreviewInput,
 										onModBackspace: handleModBackspace,
 										onArrowRight: () => {
-											onExpandShorthandInput(shorthandKey);
-											onRequestShorthandFocus({ key: shorthandKey });
+											onExpandShorthandInput(expandableInputKey);
+											onRequestShorthandFocus({ key: expandableInputKey });
 										}
 									}) : shorthandInput ? /* @__PURE__ */ u(ShorthandValueInput, {
 										targetId: target.id,
@@ -9890,15 +11405,15 @@ function EditableTargetsSection(props) {
 										invalid,
 										expanded: shorthandExpanded,
 										variant: shorthandExpanded ? "placeholder" : "full",
-										focusRequest: shorthandFocusRequest.value?.key === shorthandKey ? "expanded-first" : null,
+										focusRequest: shorthandFocusRequest.value?.key === expandableInputKey ? "expanded-first" : null,
 										colorTokenOptions,
 										tokenSources,
 										saving,
 										onExpand: () => {
-											onExpandShorthandInput(shorthandKey);
+											onExpandShorthandInput(expandableInputKey);
 										},
 										onCollapse: () => {
-											onCollapseShorthandInput(shorthandKey);
+											onCollapseShorthandInput(expandableInputKey);
 											onFocusPreviewControl(target.id, path);
 										},
 										onFocusRequestHandled: onShorthandFocusRequestHandled,
@@ -9907,6 +11422,32 @@ function EditableTargetsSection(props) {
 										onCreateToken: onCreateColorToken,
 										onMenuOpenChange: onInputMenuOpenChange,
 										inputWidth: PROPERTY_INPUT_WIDTH
+									}) : boxShadowInput ? /* @__PURE__ */ u(BoxShadowInput, {
+										targetId: target.id,
+										path,
+										pathLabel: row.path,
+										originalValue: row.previewValue,
+										value,
+										changed,
+										invalid,
+										variant: "placeholder",
+										focusRequest: null,
+										saving,
+										onExpand: () => {
+											onExpandShorthandInput(expandableInputKey);
+											onRequestShorthandFocus({ key: expandableInputKey });
+										},
+										onCollapse: () => {
+											onCollapseShorthandInput(expandableInputKey);
+											onFocusPreviewControl(target.id, path);
+										},
+										onFocusRequestHandled: onShorthandFocusRequestHandled,
+										onPreviewInput,
+										colorTokenOptions,
+										tokenSources,
+										onCreateToken: onCreateColorToken,
+										onMenuOpenChange: onInputMenuOpenChange,
+										onModBackspace: handleModBackspace
 									}) : shouldUseColorTokenSelector(path, value, colorTokenOptions.value) ? /* @__PURE__ */ u(ColorTokenValueInput, {
 										targetId: target.id,
 										path,
@@ -10049,15 +11590,15 @@ function EditableTargetsSection(props) {
 										invalid,
 										expanded: true,
 										variant: "expanded-parts",
-										focusRequest: shorthandFocusRequest.value?.key === shorthandKey ? "expanded-first" : null,
+										focusRequest: shorthandFocusRequest.value?.key === expandableInputKey ? "expanded-first" : null,
 										colorTokenOptions,
 										tokenSources,
 										saving,
 										onExpand: () => {
-											onExpandShorthandInput(shorthandKey);
+											onExpandShorthandInput(expandableInputKey);
 										},
 										onCollapse: () => {
-											onCollapseShorthandInput(shorthandKey);
+											onCollapseShorthandInput(expandableInputKey);
 											onFocusPreviewControl(target.id, path);
 										},
 										onFocusRequestHandled: onShorthandFocusRequestHandled,
@@ -10067,6 +11608,72 @@ function EditableTargetsSection(props) {
 										onMenuOpenChange: onInputMenuOpenChange,
 										inputWidth: PROPERTY_INPUT_WIDTH
 									})
+								}) : boxShadowExpandedArea && row.previewValue !== void 0 ? /* @__PURE__ */ u("div", {
+									"data-box-shadow-expanded-area": "true",
+									style: {
+										gridArea: "expanded",
+										minWidth: 0
+									},
+									children: /* @__PURE__ */ u(BoxShadowInput, {
+										targetId: target.id,
+										path,
+										pathLabel: row.path,
+										originalValue: row.previewValue,
+										value,
+										changed,
+										invalid,
+										variant: "expanded",
+										focusRequest: shorthandFocusRequest.value?.key === expandableInputKey ? "expanded-first" : null,
+										saving,
+										onExpand: () => {
+											onExpandShorthandInput(expandableInputKey);
+										},
+										onCollapse: () => {
+											onCollapseShorthandInput(expandableInputKey);
+											onFocusPreviewControl(target.id, path);
+										},
+										onFocusRequestHandled: onShorthandFocusRequestHandled,
+										onPreviewInput,
+										colorTokenOptions,
+										tokenSources,
+										onCreateToken: onCreateColorToken,
+										onMenuOpenChange: onInputMenuOpenChange,
+										onModBackspace: handleModBackspace
+									})
+								}) : colorTokenOpacityExpandedArea && row.previewValue !== void 0 ? /* @__PURE__ */ u("div", {
+									"data-color-token-opacity-expanded-area": "true",
+									style: {
+										gridArea: "expanded",
+										minWidth: 0
+									},
+									children: /* @__PURE__ */ u(ColorTokenOpacityInput, {
+										targetId: target.id,
+										path,
+										pathLabel: row.path,
+										originalValue: row.previewValue,
+										value,
+										changed,
+										invalid,
+										expanded: true,
+										variant: "expanded-parts",
+										inputWidth: PROPERTY_INPUT_WIDTH,
+										autoOpen: addedInputActivationRequest,
+										options: colorTokenOptions,
+										tokenSources,
+										saving,
+										onAutoOpenHandled: onAddedInputActivationHandled,
+										onExpand: () => {
+											onExpandShorthandInput(expandableInputKey);
+										},
+										onCollapse: () => {
+											onCollapseShorthandInput(expandableInputKey);
+											onFocusPreviewControl(target.id, path);
+										},
+										onPreviewInput,
+										onModBackspace: handleModBackspace,
+										onCreateToken: onCreateColorToken,
+										onMenuOpenChange: onInputMenuOpenChange
+									})
 								}) : null
 							]
 						}, row.path);
@@ -10089,7 +11696,7 @@ function EditableTargetsSection(props) {
 								children: ["On ", statePathLabel(group.pathPrefix.join("."))]
 							}) : null,
 							group.rows.map((row) => renderEditableRow(row)),
-							group.condition ? /* @__PURE__ */ u(AddPropertyMenu, {
+							group.condition && !propertyFilterActive ? /* @__PURE__ */ u(AddPropertyMenu, {
 								targetId: target.id,
 								pathPrefix: group.pathPrefix,
 								existingPaths,
@@ -10099,7 +11706,7 @@ function EditableTargetsSection(props) {
 								autoOpen: target.id === pendingInlineSourceTarget?.id,
 								onAddProperty,
 								onMenuOpenChange: onInputMenuOpenChange
-							}) : sourceManagementEnabled ? /* @__PURE__ */ u(AddPropertyMenu, {
+							}) : sourceManagementEnabled && !propertyFilterActive ? /* @__PURE__ */ u(AddPropertyMenu, {
 								targetId: target.id,
 								pathPrefix: defaultAddPropertyPathPrefix,
 								existingPaths,
@@ -10159,13 +11766,15 @@ function pandaPathSegmentForPreviewCondition(condition) {
 	if (condition === "hover") return "_hover";
 	if (condition === "focus") return "_focus";
 	if (condition === "focus-visible") return "_focusVisible";
-	return "_active";
+	if (condition === "active") return "_active";
+	return "_disabled";
 }
 function statePathLabel(pathPrefixLabel) {
 	if (pathPrefixLabel === "_hover") return "hover";
 	if (pathPrefixLabel === "_focus") return "focus";
 	if (pathPrefixLabel === "_focusVisible") return "focus-visible";
 	if (pathPrefixLabel === "_active") return "active";
+	if (pathPrefixLabel === "_disabled") return "disabled";
 	return pathPrefixLabel;
 }
 function groupedEditableRows(rows) {
@@ -10346,7 +11955,7 @@ function defaultPropertyValue(property) {
 	if (property.name === "backgroundRepeat") return "no-repeat";
 	if (property.name === "backgroundAttachment") return "scroll";
 	if (property.name === "backgroundClip") return "border-box";
-	if (property.name === "boxShadow") return "none";
+	if (property.name === "boxShadow") return "0px 4px 12px 0px rgba(15, 23, 42, 0.16)";
 	if (property.name === "outline") return "0 solid transparent";
 	if (property.name === "outlineStyle") return "solid";
 	if (property.name === "outlineWidth" || property.name === "outlineOffset") return "0";
@@ -10405,6 +12014,26 @@ function preparePropertyOption(option) {
 		label: prepare(option.label)
 	};
 }
+function filteredPropertyRows(query, rows) {
+	const queryText = query.trim();
+	if (!queryText) return rows;
+	const preparedRows = rows.map((row) => {
+		const path = row.path.split(".");
+		const displayPath = pandaPreviewCondition(path) ? path.slice(1).join(".") : row.path;
+		return {
+			row,
+			path: prepare(row.path),
+			displayPath: prepare(displayPath)
+		};
+	});
+	return searchFields(queryText, preparedRows, [{
+		key: "path",
+		extract: (item) => item.path
+	}, {
+		key: "displayPath",
+		extract: (item) => item.displayPath
+	}], { limit: preparedRows.length }).items.map((match) => match.value.row);
+}
 function filteredPropertyOptions(query, preparedOptions, propertyContext) {
 	const queryText = query.trim();
 	if (!queryText) return preparedOptions.map((preparedOption) => preparedOption.option).filter((option) => propertyVisibleByContext(option, propertyContext));
@@ -11144,6 +12773,41 @@ function AddPropertyMenu(props) {
 		}) : null]
 	});
 }
+function PropertyFilterInput(props) {
+	return /* @__PURE__ */ u("div", {
+		style: {
+			display: "grid",
+			gap: "4px",
+			marginTop: "8px"
+		},
+		children: /* @__PURE__ */ u("input", {
+			type: "search",
+			"data-inspector-property-filter": "true",
+			value: props.query.value,
+			placeholder: "Filter properties",
+			disabled: props.saving.value,
+			onInput: (event) => {
+				props.query.value = event.currentTarget.value;
+			},
+			onKeyDown: (event) => {
+				if (event.key !== "Enter") return;
+				const shell = event.currentTarget.closest("[data-sculpted-shell=\"true\"]");
+				if (!shell) return;
+				event.preventDefault();
+				focusFirstVisiblePropertyMatch(shell);
+			},
+			style: {
+				minWidth: 0,
+				width: "100%",
+				border: "1px solid #d6dde8",
+				borderRadius: "5px",
+				padding: "6px 8px",
+				color: "#172033",
+				background: "#fff"
+			}
+		})
+	});
+}
 function ReadonlyTargetsSection(props) {
 	const { view } = props;
 	if (view.value.readonlyTargets.length === 0 && view.value.missingTargetIds.length === 0) return null;