sculpted 0.3.2 → 0.3.4

package/dist/ui.mjs

@@ -7257,6 +7257,7 @@ function selectedElementPanelView(info) {
 		editable: false,
 		styleRows: [],
 		editableTargets: [],
+		inheritedTargets: [],
 		inlineSourceCreate: void 0,
 		inspectedJsxSource: void 0,
 		inspectedComponentSource: void 0,
@@ -7286,6 +7287,7 @@ function selectedElementPanelView(info) {
 	const editable = editableTargets.length > 0;
 	const styleRows = editableTargets.flatMap((editableTarget) => editableTarget.styleRows);
 	const editableComputedProperties = editableComputedPropertySet(editableTargets);
+	const inheritedTargets = inheritedEditableTargets(info.evidence?.inheritedStyleSources ?? [], info.evidence?.computedStyles ?? [], editableComputedProperties);
 	const inspectedJsxSource = inspectedComponentLayerSource(info.evidence?.componentLayers ?? []);
 	const inspectedComponentSource = inspectedComponentSourceLocation(info.evidence?.componentLayers ?? []);
 	const hasInlineEditableSource = editableTargets.some((editableTarget) => editableTarget.attribute === "class" || editableTarget.attribute === "className");
@@ -7296,6 +7298,7 @@ function selectedElementPanelView(info) {
 		editable,
 		styleRows,
 		editableTargets,
+		inheritedTargets,
 		inlineSourceCreate: inspectedJsxSource && !hasInlineEditableSource ? { jsxSource: inspectedJsxSource } : void 0,
 		inspectedJsxSource,
 		inspectedComponentSource,
@@ -7361,6 +7364,52 @@ function previewInputValue(value, path) {
 function visibleComputedRows(computedStyles, editableComputedProperties = /* @__PURE__ */ new Set()) {
 	return computedStyles.filter((row) => !isKnownInitialComputedValue(row) && !editableComputedProperties.has(row.property.toLowerCase())).slice(0, 16);
 }
+function inheritedEditableTargets(sources, inspectedComputedStyles, ownComputedProperties) {
+	if (sources.length === 0 || inspectedComputedStyles.length === 0) return [];
+	const inspectedComputed = declarationValueMap(inspectedComputedStyles);
+	const claimedProperties = /* @__PURE__ */ new Set();
+	const inheritedTargets = [];
+	for (const source of sources) {
+		const ancestorComputed = declarationValueMap(source.computedStyles);
+		const inheritedRows = [];
+		const targetRows = styleObjectRows(source.target.styleObject);
+		for (const row of targetRows) {
+			if (row.previewValue === void 0) continue;
+			const inheritedProperties = previewDeclarationsForPandaInput(row.path.split("."), row.previewValue).flatMap((declaration) => expandedComputedProperties(declaration.property)).filter((property) => INHERITED_COMPUTED_PROPERTIES.has(property));
+			if (inheritedProperties.length === 0) continue;
+			const matchingProperties = inheritedProperties.filter((property) => {
+				if (ownComputedProperties.has(property) || claimedProperties.has(property)) return false;
+				const inspectedValue = inspectedComputed.get(property);
+				if (!inspectedValue) return false;
+				return inspectedValue === ancestorComputed.get(property);
+			});
+			if (matchingProperties.length === 0) continue;
+			inheritedRows.push(row);
+			matchingProperties.forEach((property) => {
+				claimedProperties.add(property);
+			});
+		}
+		if (inheritedRows.length === 0) continue;
+		inheritedTargets.push({
+			id: source.target.id,
+			name: source.target.name,
+			source: source.target.file,
+			sourceLocation: sourceLocationLabel(source.target.file, source.target.loc),
+			attribute: source.target.attribute,
+			jsxSource: source.target.jsxSource,
+			jsxSourceAliases: source.target.jsxSourceAliases,
+			styleRows: inheritedRows,
+			depth: source.depth,
+			inheritedFrom: source.component ?? source.source ?? `${source.tagName}${source.depth === 1 ? " parent" : ` ancestor ${source.depth}`}`
+		});
+	}
+	return inheritedTargets;
+}
+function declarationValueMap(declarations) {
+	const values = /* @__PURE__ */ new Map();
+	for (const declaration of declarations) values.set(declaration.property.toLowerCase(), declaration.value.trim());
+	return values;
+}
 function editableComputedPropertySet(targets) {
 	const properties = /* @__PURE__ */ new Set();
 	for (const target of targets) for (const row of target.styleRows) {
@@ -7412,6 +7461,21 @@ const KNOWN_COMPUTED_INITIAL_VALUES = {
 	"z-index": "auto"
 };
 const COMPUTED_PROPERTY_EXPANSIONS = {
+	font: [
+		"font-family",
+		"font-size",
+		"font-stretch",
+		"font-style",
+		"font-variant",
+		"font-weight",
+		"line-height"
+	],
+	"list-style": [
+		"list-style-image",
+		"list-style-position",
+		"list-style-type"
+	],
+	text: ["color"],
 	border: [
 		"border-bottom-color",
 		"border-bottom-style",
@@ -7443,6 +7507,39 @@ const COMPUTED_PROPERTY_EXPANSIONS = {
 	"padding-inline": ["padding-left", "padding-right"],
 	"padding-block": ["padding-bottom", "padding-top"]
 };
+const INHERITED_COMPUTED_PROPERTIES = new Set([
+	"border-collapse",
+	"border-spacing",
+	"caption-side",
+	"color",
+	"cursor",
+	"direction",
+	"empty-cells",
+	"font-family",
+	"font-feature-settings",
+	"font-kerning",
+	"font-size",
+	"font-stretch",
+	"font-style",
+	"font-variant",
+	"font-variant-caps",
+	"font-weight",
+	"letter-spacing",
+	"line-height",
+	"list-style-image",
+	"list-style-position",
+	"list-style-type",
+	"quotes",
+	"tab-size",
+	"text-align",
+	"text-indent",
+	"text-rendering",
+	"text-transform",
+	"visibility",
+	"white-space",
+	"word-break",
+	"word-spacing"
+]);
 function isStyleValue(value) {
 	return value.kind === "literal" || value.kind === "unsupported";
 }
@@ -7662,11 +7759,11 @@ function InspectorPanel(props) {
 	const contentScroller = A$1(null);
 	const previousPreviewBarVisible = A$1(false);
 	const pendingPreviewBarScrollDelta = A$1(0);
-	const inputMenuOpenCount = useSignal(0);
-	const previewBarVisible = useSignal(false);
+	const inputMenuOpen = useSignal(false);
 	const view = useComputed(() => selectedElementPanelView(selected.value));
 	const inspectedComponentSource = useComputed(() => view.value.inspectedComponentSource);
 	const previewChangeCount = useComputed(() => pendingPreviewChanges.value.size);
+	const previewBarVisible = useComputed(() => previewChangeCount.value > 0 && !inputMenuOpen.value);
 	const canUndoPreview = useComputed(() => previewUndoStack.value.length > 0 || previewHistoryBatchOpen.value);
 	const canRedoPreview = useComputed(() => previewRedoStack.value.length > 0);
 	const saving = useComputed(() => saveFlow.value.status === "saving");
@@ -7716,6 +7813,7 @@ function InspectorPanel(props) {
 			};
 		}, (error) => {
 			if (inspectedComponentSource.value !== componentSource) return;
+			logUnexpectedInspectorError("Failed to load component style module.", error);
 			elementStyleModule.value = {
 				status: "error",
 				componentSource,
@@ -7724,13 +7822,11 @@ function InspectorPanel(props) {
 		});
 	}, [inspectedComponentSource.value]);
 	_$2(() => {
-		const visible = previewChangeCount.value > 0;
-		if (inputMenuOpenCount.value > 0) return;
+		const visible = previewBarVisible.value;
 		if (visible === previousPreviewBarVisible.current) return;
 		pendingPreviewBarScrollDelta.current += visible ? PREVIEW_CHANGES_BAR_HEIGHT : -45;
 		previousPreviewBarVisible.current = visible;
-		previewBarVisible.value = visible;
-	}, [previewChangeCount.value > 0, inputMenuOpenCount.value]);
+	}, [previewBarVisible.value]);
 	_$2(() => {
 		const scrollDelta = pendingPreviewBarScrollDelta.current;
 		if (scrollDelta === 0) return;
@@ -7740,7 +7836,7 @@ function InspectorPanel(props) {
 		scroller.scrollTop = Math.max(0, scroller.scrollTop + scrollDelta);
 	}, [previewBarVisible.value]);
 	const onInputMenuOpenChange = (open) => {
-		inputMenuOpenCount.value = Math.max(0, inputMenuOpenCount.value + (open ? 1 : -1));
+		inputMenuOpen.value = open;
 	};
 	_$2(() => {
 		const onAddPropertyShortcut = (event) => {
@@ -7802,7 +7898,8 @@ function InspectorPanel(props) {
 		runtime.applyForcedStates?.(selectedElement.current, Array.from(forcedPreviewStates.value));
 		const declarationsByEditId = /* @__PURE__ */ new Map();
 		const includedChangeKeys = /* @__PURE__ */ new Set();
-		for (const target of view.value.editableTargets) for (const row of target.styleRows) {
+		const previewTargets = editableTargetsWithPendingInlineSource(view.value, pendingPreviewChanges.value);
+		for (const target of previewTargets) for (const row of target.styleRows) {
 			if (row.previewValue === void 0) continue;
 			const path = row.path.split(".");
 			const condition = pandaPreviewCondition(path);
@@ -8188,7 +8285,10 @@ function InspectorPanel(props) {
 		if (saving.value) return;
 		const before = pendingPreviewChanges.value;
 		const next = new Map(before);
-		next.set(previewChangeKey(editId, path), {
+		const key = previewChangeKey(editId, path);
+		const existingChange = before.get(key);
+		if (existingChange?.op === "set" && existingChange.originalValue === void 0) next.delete(key);
+		else next.set(key, {
 			editId,
 			path,
 			op: "delete",
@@ -8246,6 +8346,7 @@ function InspectorPanel(props) {
 		const changesByEditId = /* @__PURE__ */ new Map();
 		for (const change of pendingPreviewChanges.value.values()) {
 			if (isInlineSourcePreviewChange(change)) continue;
+			if (change.editId.startsWith("inline-source:")) continue;
 			if (isStyleModulePreviewChange(change)) continue;
 			if (styleModuleCreateEditIds.has(change.editId)) continue;
 			changesByEditId.set(change.editId, [...changesByEditId.get(change.editId) ?? [], change]);
@@ -8274,10 +8375,24 @@ function InspectorPanel(props) {
 		flushPreviewHistoryBatch();
 		return Array.from(pendingPreviewChanges.value.values()).flatMap((change) => {
 			if (!isInlineSourcePreviewChange(change)) return [];
+			const edits = Array.from(pendingPreviewChanges.value.values()).flatMap((propertyChange) => {
+				if (propertyChange.editId !== change.editId) return [];
+				if (isInlineSourcePreviewChange(propertyChange)) return [];
+				if (propertyChange.op === "delete") return [{
+					op: "delete",
+					path: propertyChange.path
+				}];
+				return [{
+					op: "set",
+					path: propertyChange.path,
+					value: propertyChange.value
+				}];
+			});
 			return [{
 				editId: change.editId,
 				kind: "panda-css-inline-source",
-				jsxSource: change.value
+				jsxSource: change.value,
+				edits: edits.length > 0 ? edits : void 0
 			}];
 		});
 	};
@@ -8330,15 +8445,29 @@ function InspectorPanel(props) {
 		const styleModuleRequests = createStyleModuleRequests();
 		if (requests.length === 0 && inlineSourceRequests.length === 0 && styleModuleRequests.length === 0) return;
 		saveFlow.value = { status: "saving" };
-		const styleResponses = requests.length > 0 ? runtime.requestStyleEditBatch(requests, true) : Promise.resolve([]);
-		const inlineSourceResponses = Promise.all(inlineSourceRequests.map((request) => runtime.requestInlineCssSource(request, true)));
-		const styleModuleResponses = Promise.all(styleModuleRequests.map((request) => runtime.requestStyleModuleEdit(request, true)));
-		Promise.all([
-			styleResponses,
-			inlineSourceResponses,
-			styleModuleResponses
-		]).then(async (responses) => {
-			const allResponses = responses.flat();
+		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 () => {
+			if (saveOperationCount > 1) {
+				const dryRunFailure = (await requestResponses(false)).find((response) => !response.ok);
+				if (dryRunFailure) {
+					saveFlow.value = {
+						status: "error",
+						message: styleEditResponseMessage(dryRunFailure)
+					};
+					return;
+				}
+			}
+			const allResponses = await requestResponses(true);
 			const failure = allResponses.find((response) => !response.ok);
 			if (failure) {
 				saveFlow.value = {
@@ -8347,6 +8476,9 @@ function InspectorPanel(props) {
 				};
 				return;
 			}
+			return allResponses;
+		})().then(async (allResponses) => {
+			if (!allResponses) return;
 			if (allResponses.find((response) => !response.manifestUpdate)) {
 				saveFlow.value = {
 					status: "error",
@@ -8357,6 +8489,7 @@ function InspectorPanel(props) {
 			try {
 				await refreshSelectedElementInfo();
 			} catch (error) {
+				logUnexpectedInspectorError("Failed to refresh selection after save.", error);
 				saveFlow.value = {
 					status: "error",
 					message: errorMessage(error)
@@ -8367,6 +8500,7 @@ function InspectorPanel(props) {
 			resetPreviewHistory();
 			saveFlow.value = { status: "idle" };
 		}, (error) => {
+			logUnexpectedInspectorError("Failed to save preview changes.", error);
 			saveFlow.value = {
 				status: "error",
 				message: errorMessage(error)
@@ -8403,6 +8537,7 @@ function InspectorPanel(props) {
 				module: response
 			};
 		}, (error) => {
+			logUnexpectedInspectorError("Failed to open style module.", error);
 			styleModulePanel.value = {
 				status: "error",
 				component,
@@ -8698,6 +8833,67 @@ function InspectorPanel(props) {
 							shorthandFocusRequest.value = null;
 						}
 					}),
+					/* @__PURE__ */ u(EditableTargetsSection, {
+						heading: "Inherited Styles",
+						targets: view.value.inheritedTargets,
+						view,
+						preview,
+						forcedPreviewStates,
+						expandedShorthandInputs,
+						shorthandFocusRequest,
+						colorTokenOptions,
+						fontTokenOptions,
+						tokenSources,
+						propertyOptions,
+						saving,
+						addedInputActivationRequest,
+						onPreviewInput: updatePreviewInput,
+						onCreateColorToken: createColorToken,
+						onAddedInputActivationHandled: () => {
+							addedInputActivationRequest.value = null;
+						},
+						onAddProperty: addPreviewProperty,
+						onCreateInlineSource: createInlineSource,
+						onRemoveProperty: removePreviewProperty,
+						onFocusRestoreButton: focusRestoreButton,
+						onFocusPreviewControl: focusPreviewControlByTarget,
+						onRestoreProperty: restorePreviewProperty,
+						onHighlightSourceTarget: (editId) => {
+							runtime.highlightSourceTarget(editId);
+						},
+						onClearHighlight: () => {
+							runtime.clearHighlight();
+						},
+						onOpenSource: (source) => {
+							runtime.openSourceLocation({
+								kind: "source",
+								source
+							});
+						},
+						onInputMenuOpenChange,
+						onToggleShorthandInput: (key) => {
+							const next = new Set(expandedShorthandInputs.value);
+							if (next.has(key)) next.delete(key);
+							else next.add(key);
+							expandedShorthandInputs.value = next;
+						},
+						onExpandShorthandInput: (key) => {
+							if (expandedShorthandInputs.value.has(key)) return;
+							expandedShorthandInputs.value = new Set([...expandedShorthandInputs.value, key]);
+						},
+						onCollapseShorthandInput: (key) => {
+							if (!expandedShorthandInputs.value.has(key)) return;
+							const next = new Set(expandedShorthandInputs.value);
+							next.delete(key);
+							expandedShorthandInputs.value = next;
+						},
+						onRequestShorthandFocus: (request) => {
+							shorthandFocusRequest.value = request;
+						},
+						onShorthandFocusRequestHandled: () => {
+							shorthandFocusRequest.value = null;
+						}
+					}),
 					/* @__PURE__ */ u(ComponentLayersSection, {
 						view,
 						onOpenStyleModule: openStyleModule,
@@ -9251,6 +9447,7 @@ function StyleModuleSection(props) {
 		editable: editableStyleTargets.length > 0,
 		styleRows: editableStyleTargets.flatMap((target) => target.styleRows),
 		editableTargets: editableStyleTargets,
+		inheritedTargets: [],
 		inlineSourceCreate: void 0,
 		inspectedJsxSource: void 0,
 		inspectedComponentSource: void 0,
@@ -9364,7 +9561,9 @@ function StyleModuleSection(props) {
 	});
 }
 function EditableTargetsSection(props) {
-	const { view, 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, 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;
 	const inspectedComponentSource = view.value.inspectedComponentSource;
 	const readyElementStyleModule = elementStyleModule?.value.status === "ready" && elementStyleModule.value.componentSource === inspectedComponentSource && elementStyleModule.value.module.exists ? elementStyleModule.value.module : void 0;
@@ -9373,7 +9572,7 @@ function EditableTargetsSection(props) {
 		const action = styleModuleActionForPreviewChange(change);
 		if (action && action.kind !== "create" && action.componentSource === inspectedComponentSource && action.jsxSource === inspectedJsxSource) styleModulePendingActions.push(action);
 	}
-	const attachedStyleSourceNames = new Set(view.value.editableTargets.flatMap((target) => target.name && inspectedJsxSource && (target.jsxSource === inspectedJsxSource || (target.jsxSourceAliases ?? []).includes(inspectedJsxSource)) ? [target.name] : []));
+	const attachedStyleSourceNames = new Set(baseEditableTargets.flatMap((target) => target.name && inspectedJsxSource && (target.jsxSource === inspectedJsxSource || (target.jsxSourceAliases ?? []).includes(inspectedJsxSource)) ? [target.name] : []));
 	for (const action of styleModulePendingActions) {
 		if (action.kind === "attach") attachedStyleSourceNames.add(action.name);
 		if (action.kind === "detach") attachedStyleSourceNames.delete(action.name);
@@ -9385,7 +9584,26 @@ function EditableTargetsSection(props) {
 	} : void 0;
 	const canAttachStyleSource = attachStyleSourceContext !== void 0;
 	const pendingAttachedStyleSources = styleModulePendingActions.filter((action) => action.kind === "attach");
-	if (view.value.editableTargets.length === 0 && !view.value.inlineSourceCreate && !canAttachStyleSource) return null;
+	const pendingAttachedStyleSourceTargets = sourceManagementEnabled && inspectedJsxSource ? pendingAttachedStyleSources.flatMap((action) => {
+		const source = readyElementStyleModule?.sources.find((candidate) => candidate.name === action.name);
+		if (!source?.editId || !source.styleObject) return [];
+		return [{
+			id: source.editId,
+			name: source.name,
+			source: source.file,
+			sourceLocation: source.editId,
+			jsxSource: inspectedJsxSource,
+			styleRows: styleObjectRows(source.styleObject)
+		}];
+	}) : [];
+	const pendingInlineSourceTarget = sourceManagementEnabled ? pendingInlineSourceTargetForView(view.value, preview.changes.value) : void 0;
+	const editableTargets = [
+		...baseEditableTargets,
+		...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;
 	return /* @__PURE__ */ u("section", {
 		"data-editable-sources-section": "true",
 		children: [
@@ -9396,19 +9614,19 @@ function EditableTargetsSection(props) {
 				},
 				children: heading
 			}) : null,
-			view.value.inlineSourceCreate || canAttachStyleSource ? /* @__PURE__ */ u("div", {
+			sourceManagementEnabled && (inlineSourceCreate || canAttachStyleSource) ? /* @__PURE__ */ u("div", {
 				style: {
 					display: "flex",
 					flexWrap: "wrap",
 					gap: "6px",
 					marginTop: "4px"
 				},
-				children: [view.value.inlineSourceCreate ? /* @__PURE__ */ u("button", {
+				children: [inlineSourceCreate ? /* @__PURE__ */ u("button", {
 					type: "button",
 					"data-action": "create-inline-source",
 					disabled: saving.value,
 					onClick: () => {
-						if (view.value.inlineSourceCreate) onCreateInlineSource(view.value.inlineSourceCreate.jsxSource);
+						onCreateInlineSource(inlineSourceCreate.jsxSource);
 					},
 					children: /* @__PURE__ */ u("span", {
 						style: {
@@ -9431,40 +9649,7 @@ function EditableTargetsSection(props) {
 					onMenuOpenChange: onInputMenuOpenChange
 				}) : null]
 			}) : null,
-			pendingAttachedStyleSources.length > 0 && onDetachStyleModuleSource ? /* @__PURE__ */ u("div", {
-				style: {
-					display: "grid",
-					gap: "4px",
-					marginTop: "8px"
-				},
-				children: pendingAttachedStyleSources.map((action) => /* @__PURE__ */ u("div", {
-					"data-pending-attached-style-source": "true",
-					style: {
-						display: "grid",
-						gridTemplateColumns: "minmax(0, 1fr) 24px",
-						alignItems: "center",
-						gap: "6px",
-						color: "#526070"
-					},
-					children: [/* @__PURE__ */ u("code", { children: [action.name, " (pending)"] }), /* @__PURE__ */ u("button", {
-						type: "button",
-						"data-action": "detach-style-source",
-						"data-style-source-name": action.name,
-						"data-icon-button": "true",
-						"aria-label": `Remove ${action.name} style source`,
-						title: `Remove ${action.name} style source`,
-						disabled: saving.value,
-						onClick: () => {
-							onDetachStyleModuleSource(action.componentSource, action.jsxSource, action.name);
-						},
-						children: /* @__PURE__ */ u(Trash2, {
-							size: 13,
-							"aria-hidden": "true"
-						})
-					})]
-				}, `${action.componentSource}:${action.jsxSource}:${action.name}`))
-			}) : null,
-			view.value.editableTargets.map((target) => /* @__PURE__ */ u("div", {
+			editableTargets.map((target, targetIndex) => /* @__PURE__ */ u("div", {
 				"data-editable-target-panel": "true",
 				"data-editable-target-id": target.id,
 				style: {
@@ -9497,6 +9682,13 @@ function EditableTargetsSection(props) {
 								style: { color: "#172033" },
 								children: target.name
 							}) : null,
+							"inheritedFrom" in target ? /* @__PURE__ */ u("span", {
+								style: {
+									color: "#667085",
+									fontSize: "12px"
+								},
+								children: ["Inherited from ", target.inheritedFrom]
+							}) : null,
 							/* @__PURE__ */ u("button", {
 								type: "button",
 								"data-action": "open-editable-source-location",
@@ -9904,18 +10096,21 @@ function EditableTargetsSection(props) {
 								options: propertyOptions,
 								propertyContext: previewPropertyContext,
 								saving,
+								autoOpen: target.id === pendingInlineSourceTarget?.id,
 								onAddProperty,
 								onMenuOpenChange: onInputMenuOpenChange
-							}) : /* @__PURE__ */ u(AddPropertyMenu, {
+							}) : sourceManagementEnabled ? /* @__PURE__ */ u(AddPropertyMenu, {
 								targetId: target.id,
 								pathPrefix: defaultAddPropertyPathPrefix,
 								existingPaths,
 								options: propertyOptions,
 								propertyContext: previewPropertyContext,
 								saving,
+								autoOpen: target.id === pendingInlineSourceTarget?.id,
+								showShortcutHint: targetIndex === 0,
 								onAddProperty,
 								onMenuOpenChange: onInputMenuOpenChange
-							})
+							}) : null
 						]
 					}, group.key)) });
 				})()]
@@ -10009,6 +10204,7 @@ function targetRowsWithPendingChanges(target, changes) {
 	for (const change of changes.values()) {
 		if (change.editId !== target.id || change.op !== "set") continue;
 		if (isStyleModulePreviewChange(change)) continue;
+		if (isInlineSourcePreviewChange(change)) continue;
 		const path = change.path.join(".");
 		if (existingPaths.has(path)) continue;
 		rows.push({
@@ -10020,6 +10216,26 @@ function targetRowsWithPendingChanges(target, changes) {
 	}
 	return rows;
 }
+function editableTargetsWithPendingInlineSource(view, changes) {
+	const pendingInlineSourceTarget = pendingInlineSourceTargetForView(view, changes);
+	return pendingInlineSourceTarget ? [...view.editableTargets, pendingInlineSourceTarget] : view.editableTargets;
+}
+function pendingInlineSourceTargetForView(view, changes) {
+	const inlineSourceCreate = view.inlineSourceCreate;
+	if (!inlineSourceCreate) return void 0;
+	const editId = inlineSourcePreviewEditId(inlineSourceCreate.jsxSource);
+	const createChange = changes.get(previewChangeKey(editId, INLINE_SOURCE_PREVIEW_PATH));
+	if (!createChange || !isInlineSourcePreviewChange(createChange)) return void 0;
+	return {
+		id: editId,
+		name: "Inline source (new)",
+		source: inlineSourceCreate.jsxSource.replace(/:\d+:\d+$/, ""),
+		sourceLocation: inlineSourceCreate.jsxSource,
+		attribute: "className",
+		jsxSource: inlineSourceCreate.jsxSource,
+		styleRows: []
+	};
+}
 function propertySelectorOptions(metadata) {
 	if (metadata?.properties.status !== "available") return [];
 	return metadata.properties.items.flatMap((property) => {
@@ -10031,13 +10247,8 @@ function propertySelectorOptions(metadata) {
 			label: property.label,
 			groupLabel: propertyGroupLabel(property),
 			detail: property.cssProperty ?? property.category,
-			searchText: [
-				property.name,
-				property.cssProperty,
-				property.category,
-				...property.aliases
-			].filter(Boolean).join(" "),
-			defaultValue
+			defaultValue,
+			commonness: property.commonness ?? 1
 		}];
 	});
 }
@@ -10191,28 +10402,51 @@ function defaultPropertyUnit(property) {
 function preparePropertyOption(option) {
 	return {
 		option,
-		label: prepare(option.label),
-		detail: prepare(option.detail),
-		searchText: prepare(option.searchText)
+		label: prepare(option.label)
 	};
 }
 function filteredPropertyOptions(query, preparedOptions, propertyContext) {
 	const queryText = query.trim();
 	if (!queryText) return preparedOptions.map((preparedOption) => preparedOption.option).filter((option) => propertyVisibleByContext(option, propertyContext));
-	return searchFields(queryText, preparedOptions, [
-		{
-			key: "label",
-			extract: (item) => item.label
-		},
-		{
-			key: "detail",
-			extract: (item) => item.detail
-		},
-		{
-			key: "searchText",
-			extract: (item) => item.searchText
-		}
-	], { limit: preparedOptions.length }).items.map((match) => match.value.option);
+	return searchFields(queryText, preparedOptions, [{
+		key: "label",
+		extract: (item) => item.label
+	}], { limit: preparedOptions.length }).items.map((match, index) => ({
+		match,
+		index
+	})).sort((left, right) => {
+		const leftExactness = propertyOptionExactness(queryText, left.match.value.option, propertyContext);
+		const rightExactness = propertyOptionExactness(queryText, right.match.value.option, propertyContext);
+		if (rightExactness !== leftExactness) return rightExactness - leftExactness;
+		const rightScore = propertyOptionSearchScore(right.match, propertyVisibleByContext(right.match.value.option, propertyContext), propertyDeboostedByContext(right.match.value.option, propertyContext));
+		const leftScore = propertyOptionSearchScore(left.match, propertyVisibleByContext(left.match.value.option, propertyContext), propertyDeboostedByContext(left.match.value.option, propertyContext));
+		if (rightScore !== leftScore) return rightScore - leftScore;
+		return left.index - right.index;
+	}).map(({ match }) => match.value.option);
+}
+function propertyOptionExactness(query, option, context) {
+	const normalizedQuery = query.toLowerCase();
+	const exactTargets = [option.label].flatMap((target) => [
+		target,
+		target.replaceAll("-", ""),
+		target.replaceAll(" ", "")
+	]).map((target) => target.toLowerCase());
+	const exactWordTargets = option.label.split(/[\s-]+/).map((target) => target.toLowerCase()).filter(Boolean);
+	const exactness = exactTargets.some((target) => target === normalizedQuery) ? 4 : exactWordTargets.some((target) => target === normalizedQuery) ? 3 : exactTargets.some((target) => target.startsWith(normalizedQuery)) ? 2 : exactWordTargets.some((target) => target.startsWith(normalizedQuery)) ? 1 : 0;
+	return propertyDeboostedByContext(option, context) ? exactness - 2 : exactness;
+}
+function propertyOptionSearchScore(match, applyCommonness, applyContextDeboost) {
+	const contextDeboost = applyContextDeboost ? 1 : 0;
+	if (!applyCommonness || applyContextDeboost) return match.score - contextDeboost;
+	const commonness = match.value.option.commonness;
+	const boundedCommonness = Number.isFinite(commonness) ? Math.max(.25, commonness) : 1;
+	return match.score + Math.log2(boundedCommonness) * .03;
+}
+function propertyDeboostedByContext(option, context) {
+	if (!INSET_OFFSET_PROPERTIES.has(option.name)) return false;
+	if (!context) return false;
+	const position = context.position.trim();
+	return position === "static" || position === "relative";
 }
 function propertyVisibleByContext(option, context) {
 	if (!context) return true;
@@ -10428,6 +10662,10 @@ function AttachStyleSourceMenu(props) {
 		if (props.saving.value) return;
 		menuOpen.value = false;
 		query.value = "";
+		if (previousMenuOpen.current) {
+			props.onMenuOpenChange(false);
+			previousMenuOpen.current = false;
+		}
 		props.onAttach(props.componentSource, props.jsxSource, option.name);
 	};
 	const moveActiveOption = (direction) => {
@@ -10555,6 +10793,7 @@ function AttachStyleSourceMenu(props) {
 					children: "No matching style sources."
 				}) : filteredOptions.map((option) => /* @__PURE__ */ u(ShadowMenuItem, {
 					active: activeSelectableOptionId === option.id,
+					class: "panda-property-selector-menu-item",
 					disabled: props.saving.value,
 					onPreview: () => {
 						activeOptionId.value = option.id;
@@ -10571,7 +10810,8 @@ function AttachStyleSourceMenu(props) {
 						style: {
 							minWidth: 0,
 							display: "grid",
-							gap: "2px"
+							gap: "2px",
+							textAlign: "left"
 						},
 						children: [/* @__PURE__ */ u("code", {
 							style: { color: "#172033" },
@@ -10620,6 +10860,13 @@ const STATIC_POSITIONED_PROPERTIES = new Set([
 	"left",
 	"zIndex"
 ]);
+const INSET_OFFSET_PROPERTIES = new Set([
+	"inset",
+	"top",
+	"right",
+	"bottom",
+	"left"
+]);
 const FLEX_CONTAINER_PROPERTIES = new Set([
 	"flexDirection",
 	"flexWrap",
@@ -10675,7 +10922,7 @@ function isVerticalAlignDisplay(display) {
 	return display === "inline" || display === "inline-block" || display === "table-cell";
 }
 function AddPropertyMenu(props) {
-	const menuOpen = useSignal(false);
+	const menuOpen = useSignal(props.autoOpen === true);
 	const query = useSignal("");
 	const activeOptionId = useSignal();
 	const trigger = A$1(null);
@@ -10691,6 +10938,7 @@ function AddPropertyMenu(props) {
 	});
 	const preparedOptions = availableOptions.map(preparePropertyOption);
 	const filteredOptions = filteredPropertyOptions(query.value, preparedOptions, props.propertyContext);
+	const hasQuery = query.value.trim().length > 0;
 	const groupedOptions = groupedPropertyOptions(filteredOptions);
 	const activeSelectableOptionId = filteredOptions.some((option) => option.id === activeOptionId.value) ? activeOptionId.value : filteredOptions[0]?.id;
 	const selectOption = (option) => {
@@ -10714,6 +10962,42 @@ function AddPropertyMenu(props) {
 		const option = filteredOptions.find((item) => item.id === activeSelectableOptionId);
 		if (option) selectOption(option);
 	};
+	const renderOption = (option) => /* @__PURE__ */ u(ShadowMenuItem, {
+		active: activeSelectableOptionId === option.id,
+		class: "panda-property-selector-menu-item",
+		disabled: props.saving.value,
+		onSelect: () => {
+			selectOption(option);
+		},
+		children: /* @__PURE__ */ u("span", {
+			"data-property-selector-option": "true",
+			"data-property-selector-option-id": option.id,
+			"data-property-selector-active": activeSelectableOptionId === option.id ? "true" : "false",
+			onClick: (event) => {
+				event.stopPropagation();
+				selectOption(option);
+			},
+			style: {
+				minWidth: 0,
+				display: "grid",
+				gridTemplateColumns: "1fr auto",
+				alignItems: "center",
+				gap: "8px"
+			},
+			children: [/* @__PURE__ */ u("span", {
+				style: {
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: option.label
+			}), /* @__PURE__ */ u("code", {
+				style: { color: "#667085" },
+				children: option.name
+			})]
+		})
+	}, option.id);
 	_$2(() => {
 		if (menuOpen.value) {
 			if (!previousMenuOpen.current) props.onMenuOpenChange(true);
@@ -10755,10 +11039,22 @@ function AddPropertyMenu(props) {
 					gap: "6px",
 					font: "inherit"
 				},
-				children: [/* @__PURE__ */ u(Plus, {
-					size: 14,
-					"aria-hidden": "true"
-				}), pathPrefixLabel ? `Add ${statePathLabel(pathPrefixLabel)} property` : "Add property"]
+				children: [
+					/* @__PURE__ */ u(Plus, {
+						size: 14,
+						"aria-hidden": "true"
+					}),
+					pathPrefixLabel ? `Add ${statePathLabel(pathPrefixLabel)} property` : "Add property",
+					props.showShortcutHint ? /* @__PURE__ */ u("span", {
+						style: {
+							color: "#98a2b3",
+							fontSize: "11px",
+							fontWeight: 600,
+							transform: "translateY(2px)"
+						},
+						children: "⇧A"
+					}) : null
+				]
 			})
 		}), menuOpen.value ? /* @__PURE__ */ u(ShadowMenu, {
 			open: menuOpen,
@@ -10830,7 +11126,7 @@ function AddPropertyMenu(props) {
 						padding: "7px 8px"
 					},
 					children: "No matching properties."
-				}) : groupedOptions.map((group) => /* @__PURE__ */ u("div", {
+				}) : hasQuery ? filteredOptions.map((option) => renderOption(option)) : groupedOptions.map((group) => /* @__PURE__ */ u("div", {
 					"data-property-selector-group": group.label,
 					children: [/* @__PURE__ */ u("div", {
 						"data-property-selector-group-label": "true",
@@ -10842,42 +11138,7 @@ function AddPropertyMenu(props) {
 							textTransform: "uppercase"
 						},
 						children: group.label
-					}), group.options.map((option) => /* @__PURE__ */ u(ShadowMenuItem, {
-						active: activeSelectableOptionId === option.id,
-						class: "panda-property-selector-menu-item",
-						disabled: props.saving.value,
-						onSelect: () => {
-							selectOption(option);
-						},
-						children: /* @__PURE__ */ u("span", {
-							"data-property-selector-option": "true",
-							"data-property-selector-option-id": option.id,
-							"data-property-selector-active": activeSelectableOptionId === option.id ? "true" : "false",
-							onClick: (event) => {
-								event.stopPropagation();
-								selectOption(option);
-							},
-							style: {
-								minWidth: 0,
-								display: "grid",
-								gridTemplateColumns: "1fr auto",
-								alignItems: "center",
-								gap: "8px"
-							},
-							children: [/* @__PURE__ */ u("span", {
-								style: {
-									minWidth: 0,
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									whiteSpace: "nowrap"
-								},
-								children: option.label
-							}), /* @__PURE__ */ u("code", {
-								style: { color: "#667085" },
-								children: option.name
-							})]
-						})
-					}, option.id))]
+					}), group.options.map((option) => renderOption(option))]
 				}, group.label))
 			})]
 		}) : null]
@@ -11245,6 +11506,9 @@ function isInspectorOwnedElement(element) {
 function isShadowRoot(root) {
 	return typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot;
 }
+function logUnexpectedInspectorError(message, error) {
+	console.error(`[sculpted] ${message}`, error);
+}
 function isOnlyShiftAlt(event) {
 	return event.shiftKey && event.altKey && !event.ctrlKey && !event.metaKey;
 }