sculpted 0.3.1 → 0.3.3

package/dist/ui.mjs

@@ -1011,6 +1011,23 @@ const RefreshCw = createLucideIcon("refresh-cw", [
 	}]
 ]);
 //#endregion
+//#region node_modules/.pnpm/lucide-preact@1.16.0_preact@10.29.2/node_modules/lucide-preact/dist/esm/icons/settings.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 Settings = createLucideIcon("settings", [["path", {
+	d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+	key: "1i5ecw"
+}], ["circle", {
+	cx: "12",
+	cy: "12",
+	r: "3",
+	key: "1v7zrd"
+}]]);
+//#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
@@ -7240,6 +7257,7 @@ function selectedElementPanelView(info) {
 		editable: false,
 		styleRows: [],
 		editableTargets: [],
+		inheritedTargets: [],
 		inlineSourceCreate: void 0,
 		inspectedJsxSource: void 0,
 		inspectedComponentSource: void 0,
@@ -7269,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");
@@ -7279,6 +7298,7 @@ function selectedElementPanelView(info) {
 		editable,
 		styleRows,
 		editableTargets,
+		inheritedTargets,
 		inlineSourceCreate: inspectedJsxSource && !hasInlineEditableSource ? { jsxSource: inspectedJsxSource } : void 0,
 		inspectedJsxSource,
 		inspectedComponentSource,
@@ -7344,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) {
@@ -7395,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",
@@ -7426,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";
 }
@@ -7461,6 +7575,9 @@ const INSPECTOR_DIALOG_PORTAL_ROOT = "data-sculpted-dialog-root";
 const INSPECTOR_MENU_PORTAL_ROOT = "data-sculpted-menu-root";
 const INLINE_SOURCE_PREVIEW_PATH = ["__inlineSource"];
 const STYLE_MODULE_ACTION_PREVIEW_PATH = ["__styleModuleAction"];
+const COPY_ELEMENT_PATH_AFTER_INSPECT_STORAGE_KEY = "sculpted.copyElementPathAfterInspect";
+const PANEL_DOCKED_STORAGE_KEY = "sculpted.panelDocked";
+const PANEL_SIDE_STORAGE_KEY = "sculpted.panelSide";
 function installReadonlyInspectorPanel(runtime, options = {}) {
 	let panel = null;
 	let previousBodyMarginLeft;
@@ -7575,14 +7692,41 @@ function applyInspectorPanelFrame(panel, state) {
 	panel.style.borderRadius = "8px";
 	panel.style.boxShadow = "0 18px 54px rgba(15, 23, 42, 0.18)";
 }
+function loadBooleanPreference(storageKey, defaultValue) {
+	try {
+		const stored = window.localStorage.getItem(storageKey);
+		if (stored === "true") return true;
+		if (stored === "false") return false;
+	} catch {}
+	return defaultValue;
+}
+function saveBooleanPreference(storageKey, value) {
+	try {
+		window.localStorage.setItem(storageKey, value ? "true" : "false");
+	} catch {}
+}
+function loadPanelSidePreference(defaultValue) {
+	try {
+		const stored = window.localStorage.getItem(PANEL_SIDE_STORAGE_KEY);
+		if (stored === "left" || stored === "right") return stored;
+	} catch {}
+	return defaultValue;
+}
+function savePanelSidePreference(value) {
+	try {
+		window.localStorage.setItem(PANEL_SIDE_STORAGE_KEY, value);
+	} catch {}
+}
 function InspectorPanel(props) {
 	const { runtime, title, onFrameChange } = props;
 	const selected = useSignal();
 	const visible = useSignal(false);
-	const docked = useSignal(false);
-	const side = useSignal("right");
+	const docked = useSignal(loadBooleanPreference(PANEL_DOCKED_STORAGE_KEY, false));
+	const side = useSignal(loadPanelSidePreference("right"));
 	const isInspecting = useSignal(false);
+	const settingsOpen = useSignal(false);
 	const previewEnabled = useSignal(true);
+	const copyElementPathAfterInspect = useSignal(loadBooleanPreference(COPY_ELEMENT_PATH_AFTER_INSPECT_STORAGE_KEY, false));
 	const forcedPreviewStates = useSignal(/* @__PURE__ */ new Set());
 	const pendingPreviewChanges = useSignal(/* @__PURE__ */ new Map());
 	const expandedShorthandInputs = useSignal(/* @__PURE__ */ new Set());
@@ -7593,6 +7737,7 @@ function InspectorPanel(props) {
 	const elementStyleModule = useSignal({ status: "idle" });
 	const showingStyleModulePage = useComputed(() => styleModulePanel.value.status !== "idle");
 	const panelHeaderTitle = useComputed(() => {
+		if (settingsOpen.value) return "Settings";
 		return styleModulePanel.value.status === "idle" ? title : "Style List";
 	});
 	const editorMetadata = useSignal();
@@ -7614,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");
@@ -7668,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,
@@ -7676,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;
@@ -7692,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) => {
@@ -7754,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);
@@ -7923,6 +8068,11 @@ function InspectorPanel(props) {
 		isInspecting.value = false;
 		clearInspectCursor();
 	};
+	const copyInspectedElementPath = (evidence) => {
+		if (!copyElementPathAfterInspect.value) return;
+		const identity = inspectedElementIdentityFromLayers(evidence?.componentLayers ?? []);
+		if (identity) navigator.clipboard?.writeText(identity).catch(() => {});
+	};
 	const isPanelEditableFocused = () => {
 		const root = shell.current?.getRootNode();
 		const active = root && isShadowRoot(root) ? root.activeElement : document.activeElement;
@@ -7971,6 +8121,7 @@ function InspectorPanel(props) {
 			document.getSelection()?.removeAllRanges();
 			stopActiveInspecting();
 			clearModifierPreview();
+			copyInspectedElementPath(typeof runtime.inspectElementEvidence === "function" ? runtime.inspectElementEvidence(element) : void 0);
 			runtime.selectElement(element).then((info) => {
 				selectedElement.current = element;
 				selectedElementAutofocusRevision.value += 1;
@@ -8015,9 +8166,12 @@ function InspectorPanel(props) {
 			selectedElement.current = element;
 			selectedElementAutofocusRevision.value += 1;
 			selected.value = info;
+			settingsOpen.value = false;
 			applyPreviewChanges(pendingPreviewChanges.value, previewEnabled.value);
 			setPanelVisible(true);
-		}, onStopInspecting);
+		}, onStopInspecting, (_element, evidence) => {
+			copyInspectedElementPath(evidence);
+		});
 		isInspecting.value = true;
 		setInspectCursor();
 	};
@@ -8050,6 +8204,7 @@ function InspectorPanel(props) {
 	};
 	const toggleDocked = () => {
 		docked.value = !docked.value;
+		saveBooleanPreference(PANEL_DOCKED_STORAGE_KEY, docked.value);
 		onFrameChange({
 			visible: visible.value,
 			docked: docked.value,
@@ -8059,12 +8214,20 @@ function InspectorPanel(props) {
 	const snapPanelSide = (nextSide) => {
 		if (side.value === nextSide) return;
 		side.value = nextSide;
+		savePanelSidePreference(nextSide);
 		onFrameChange({
 			visible: visible.value,
 			docked: docked.value,
 			side: nextSide
 		});
 	};
+	const openSettings = () => {
+		settingsOpen.value = true;
+	};
+	const updateCopyElementPathAfterInspect = (enabled) => {
+		copyElementPathAfterInspect.value = enabled;
+		saveBooleanPreference(COPY_ELEMENT_PATH_AFTER_INSPECT_STORAGE_KEY, enabled);
+	};
 	const togglePreview = (enabled) => {
 		previewEnabled.value = enabled;
 		applyPreviewChanges(pendingPreviewChanges.value, enabled);
@@ -8180,6 +8343,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]);
@@ -8208,10 +8372,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
 			}];
 		});
 	};
@@ -8264,15 +8442,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 = {
@@ -8281,6 +8473,9 @@ function InspectorPanel(props) {
 				};
 				return;
 			}
+			return allResponses;
+		})().then(async (allResponses) => {
+			if (!allResponses) return;
 			if (allResponses.find((response) => !response.manifestUpdate)) {
 				saveFlow.value = {
 					status: "error",
@@ -8291,6 +8486,7 @@ function InspectorPanel(props) {
 			try {
 				await refreshSelectedElementInfo();
 			} catch (error) {
+				logUnexpectedInspectorError("Failed to refresh selection after save.", error);
 				saveFlow.value = {
 					status: "error",
 					message: errorMessage(error)
@@ -8301,6 +8497,7 @@ function InspectorPanel(props) {
 			resetPreviewHistory();
 			saveFlow.value = { status: "idle" };
 		}, (error) => {
+			logUnexpectedInspectorError("Failed to save preview changes.", error);
 			saveFlow.value = {
 				status: "error",
 				message: errorMessage(error)
@@ -8337,6 +8534,7 @@ function InspectorPanel(props) {
 				module: response
 			};
 		}, (error) => {
+			logUnexpectedInspectorError("Failed to open style module.", error);
 			styleModulePanel.value = {
 				status: "error",
 				component,
@@ -8469,8 +8667,10 @@ function InspectorPanel(props) {
 				title: panelHeaderTitle,
 				isInspecting,
 				docked,
-				showInspect: !showingStyleModulePage.value,
-				onBack: showingStyleModulePage.value ? () => {
+				showInspect: !showingStyleModulePage.value && !settingsOpen.value,
+				onBack: settingsOpen.value ? () => {
+					settingsOpen.value = false;
+				} : showingStyleModulePage.value ? () => {
 					styleModulePanel.value = { status: "idle" };
 				} : void 0,
 				onInspect: toggleInspecting,
@@ -8481,6 +8681,7 @@ function InspectorPanel(props) {
 				disabled: saving,
 				onUndoPreview: undoPreviewChange,
 				onRedoPreview: redoPreviewChange,
+				onSettings: openSettings,
 				onToggleDocked: toggleDocked,
 				onToggleSide: () => {
 					snapPanelSide(side.value === "right" ? "left" : "right");
@@ -8494,11 +8695,15 @@ function InspectorPanel(props) {
 					flex: "1 1 auto",
 					padding: "12px",
 					display: "grid",
+					alignContent: "start",
 					gap: "12px",
 					overflow: "auto",
 					minHeight: 0
 				},
-				children: [/* @__PURE__ */ u(SaveStatusSection, { saveFlow }), showingStyleModulePage.value ? /* @__PURE__ */ u(StyleModuleSection, {
+				children: [/* @__PURE__ */ u(SaveStatusSection, { saveFlow }), settingsOpen.value ? /* @__PURE__ */ u(SettingsSection, {
+					copyElementPathAfterInspect,
+					onCopyElementPathAfterInspectChange: updateCopyElementPathAfterInspect
+				}) : showingStyleModulePage.value ? /* @__PURE__ */ u(StyleModuleSection, {
 					state: styleModulePanel,
 					pendingChanges: pendingPreviewChanges,
 					preview,
@@ -8625,6 +8830,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,
@@ -9015,6 +9281,22 @@ function PanelHeader(props) {
 										children: "Clear"
 									})]
 								})
+							}),
+							/* @__PURE__ */ u(ShadowMenuItem, {
+								class: "sculpted-menu-item",
+								disabled: props.disabled.value,
+								onSelect: props.onSettings,
+								children: /* @__PURE__ */ u("span", {
+									"data-menu-action": "settings",
+									style: { display: "contents" },
+									children: [/* @__PURE__ */ u(Settings, {
+										size: 15,
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ u("span", {
+										style: { font: "inherit" },
+										children: "Settings"
+									})]
+								})
 							})
 						]
 					})]
@@ -9064,6 +9346,39 @@ function SaveStatusSection(props) {
 		children: /* @__PURE__ */ u("div", { children: state.message })
 	});
 }
+function SettingsSection(props) {
+	return /* @__PURE__ */ u("section", {
+		"data-settings-section": "true",
+		style: {
+			display: "grid",
+			gap: "10px"
+		},
+		children: /* @__PURE__ */ u("label", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: "12px",
+				border: "1px solid #d6dde8",
+				borderRadius: "6px",
+				padding: "10px",
+				cursor: "pointer"
+			},
+			children: [/* @__PURE__ */ u("span", {
+				style: { fontWeight: 700 },
+				children: "Copy element path after inspect"
+			}), /* @__PURE__ */ u("input", {
+				type: "checkbox",
+				"data-setting": "copy-element-path-after-inspect",
+				checked: props.copyElementPathAfterInspect.value,
+				onChange: (event) => {
+					props.onCopyElementPathAfterInspectChange(event.currentTarget.checked);
+				},
+				style: { margin: 0 }
+			})]
+		})
+	});
+}
 function StyleModuleSection(props) {
 	const { state, pendingChanges, preview, forcedPreviewStates, expandedShorthandInputs, shorthandFocusRequest, colorTokenOptions, fontTokenOptions, tokenSources, propertyOptions, saving, addedInputActivationRequest, onPreviewInput, onCreateColorToken, onAddedInputActivationHandled, onAddProperty, onRemoveProperty, onFocusRestoreButton, onFocusPreviewControl, onRestoreProperty, onHighlightSourceTarget, onClearHighlight, onOpenSource, onInputMenuOpenChange, onToggleShorthandInput, onExpandShorthandInput, onCollapseShorthandInput, onRequestShorthandFocus, onShorthandFocusRequestHandled, onAddSource } = props;
 	if (state.value.status === "idle") return null;
@@ -9129,6 +9444,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,
@@ -9242,7 +9558,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;
@@ -9251,7 +9569,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);
@@ -9263,7 +9581,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: [
@@ -9274,19 +9611,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: {
@@ -9309,40 +9646,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) => /* @__PURE__ */ u("div", {
 				"data-editable-target-panel": "true",
 				"data-editable-target-id": target.id,
 				style: {
@@ -9375,6 +9679,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",
@@ -9782,18 +10093,20 @@ 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,
 								onAddProperty,
 								onMenuOpenChange: onInputMenuOpenChange
-							})
+							}) : null
 						]
 					}, group.key)) });
 				})()]
@@ -9887,6 +10200,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({
@@ -9898,6 +10212,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) => {
@@ -10306,6 +10640,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) => {
@@ -10433,6 +10771,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;
@@ -10449,7 +10788,8 @@ function AttachStyleSourceMenu(props) {
 						style: {
 							minWidth: 0,
 							display: "grid",
-							gap: "2px"
+							gap: "2px",
+							textAlign: "left"
 						},
 						children: [/* @__PURE__ */ u("code", {
 							style: { color: "#172033" },
@@ -10553,7 +10893,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);
@@ -10977,11 +11317,19 @@ function ComponentLayersSection(props) {
 	})] });
 }
 function componentLayerElementIdentity(view, layerIndex, elementIndex, jsxSource) {
-	const layers = view.componentLayers;
+	return componentLayerElementIdentityFromLayers(view.componentLayers, layerIndex, elementIndex, jsxSource);
+}
+function componentLayerElementIdentityFromLayers(layers, layerIndex, elementIndex, jsxSource) {
 	const parentComponents = layers.slice(layerIndex).toReversed().map((layer) => layer.component);
 	const elementPath = layers[layerIndex]?.elements.slice(elementIndex).toReversed().map((element) => element.tagName);
 	return `I want to edit the following JSX element:\n    ${[...parentComponents, ...elementPath ?? []].join(" → ")}${sourceLocationAvailable(jsxSource) ? `\n    (found at ${jsxSource})` : ""}\n\n\n`;
 }
+function inspectedElementIdentityFromLayers(layers) {
+	for (const [layerIndex, layer] of layers.entries()) {
+		const elementIndex = layer.elements.findIndex((element) => element.inspected === true);
+		if (elementIndex !== -1) return componentLayerElementIdentityFromLayers(layers, layerIndex, elementIndex, layer.elements[elementIndex]?.source);
+	}
+}
 function componentLayerSource(layer) {
 	return layer.elements.find((element) => sourceLocationAvailable(element.source))?.source;
 }
@@ -11031,12 +11379,19 @@ function ComputedRowsSection(props) {
 				gridTemplateColumns: "120px 1fr",
 				gap: "8px",
 				marginTop: "4px",
-				color: "#526070"
+				color: "#526070",
+				userSelect: "text"
 			},
-			children: [/* @__PURE__ */ u("code", { children: row.property }), /* @__PURE__ */ u("code", {
+			children: [/* @__PURE__ */ u("code", {
+				"data-computed-css-property": "true",
+				style: { userSelect: "text" },
+				children: row.property
+			}), /* @__PURE__ */ u("code", {
+				"data-computed-css-value": "true",
 				style: {
 					whiteSpace: "normal",
-					wordBreak: "break-word"
+					wordBreak: "break-word",
+					userSelect: "text"
 				},
 				children: row.value
 			})]
@@ -11108,6 +11463,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;
 }