sculpted 0.3.2 → 0.3.3

package/dist/{types-CdByW0ji.d.mts → types-0a4hNfAF.d.mts}

@@ -171,6 +171,7 @@ type RuntimeStyleEvidence = {
   readonly bounds?: RuntimeElementBounds;
   readonly ancestors?: readonly string[];
   readonly componentLayers?: readonly RuntimeComponentLayer[];
+  readonly inheritedStyleSources?: readonly RuntimeInheritedStyleSource[];
 };
 type RuntimeCssDeclaration = {
   readonly property: string;
@@ -198,6 +199,14 @@ type RuntimeComponentLayerElement = {
   readonly element?: Element;
   readonly inspected?: boolean;
 };
+type RuntimeInheritedStyleSource = {
+  readonly target: PandaCssSourceTarget;
+  readonly depth: number;
+  readonly tagName: string;
+  readonly source?: string;
+  readonly component?: string;
+  readonly computedStyles: readonly RuntimeCssDeclaration[];
+};
 type RuntimeAttribute = {
   readonly name: string;
   readonly value: string;
@@ -235,6 +244,7 @@ type InlineCssSourceCreateRequest = {
   readonly editId: string;
   readonly kind: 'panda-css-inline-source';
   readonly jsxSource: string;
+  readonly edits?: readonly StyleEdit[];
   readonly options?: Pick<StyleEditOptions, 'write' | 'format'>;
 };
 type StyleModuleSourceCreateRequest = {
@@ -378,4 +388,4 @@ type PreviewStyleSheet = {
   readonly rules: readonly PreviewStyleRule[];
 };
 //#endregion
-export { StyleModuleEditRequest as $, RuntimeAttribute as A, SourcePosition as B, OpenSourceLocationRequest as C, PreviewStyleCondition as D, PandaStyleObject as E, RuntimePropertyContext as F, StyleEdit as G, SourceTarget as H, RuntimeStyleEvidence as I, StyleEditError as J, StyleEditBatchRequest as K, SelectedElementInfo as L, RuntimeComponentLayerElement as M, RuntimeCssDeclaration as N, PreviewStyleRule as O, RuntimeElementBounds as P, StyleEditResponse as Q, SelectedElementState as R, OpenSourceLocationErrorCode as S, PandaCssSourceTarget as T, SourceTargetBase as U, SourceRange as V, SourceTargetKind as W, StyleEditOptions as X, StyleEditErrorCode as Y, StyleEditRequest as Z, InspectorManifest as _, EditorColorTokenMetadata as a, TokenConfigEditResponse as at, JsonValue as b, EditorMetadataUnavailableReason as c, EditorPropertyMetadata as d, StyleModuleSourceAttachRequest as et, EditorTokenSourceSection as f, InspectorEditorMetadata as g, InlineCssSourceCreateRequest as h, DynamicSourceTarget as i, TokenConfigEditRequest as it, RuntimeComponentLayer as j, PreviewStyleSheet as k, EditorMetadataUpdateEvent as l, ExternalSourceTarget as m, ComponentStyleModuleSource as n, StyleModuleSourceDetachRequest as nt, EditorFontTokenMetadata as o, UnsupportedReason as ot, EditorTokenSourceTarget as p, StyleEditBatchResponse as q, Confidence as r, StyleValueSource as rt, EditorMetadataSection as s, UnsupportedSourceTarget as st, ComponentStyleModuleResponse as t, StyleModuleSourceCreateRequest as tt, EditorPropertyCategory as u, InspectorManifestEntry as v, OpenSourceLocationResponse as w, ManifestUpdateEvent as x, JsonPrimitive as y, SourceLocation as z };
+export { StyleEditResponse as $, RuntimeAttribute as A, SourceLocation as B, OpenSourceLocationRequest as C, PreviewStyleCondition as D, PandaStyleObject as E, RuntimeInheritedStyleSource as F, SourceTargetKind as G, SourceRange as H, RuntimePropertyContext as I, StyleEditBatchResponse as J, StyleEdit as K, RuntimeStyleEvidence as L, RuntimeComponentLayerElement as M, RuntimeCssDeclaration as N, PreviewStyleRule as O, RuntimeElementBounds as P, StyleEditRequest as Q, SelectedElementInfo as R, OpenSourceLocationErrorCode as S, PandaCssSourceTarget as T, SourceTarget as U, SourcePosition as V, SourceTargetBase as W, StyleEditErrorCode as X, StyleEditError as Y, StyleEditOptions as Z, InspectorManifest as _, EditorColorTokenMetadata as a, TokenConfigEditRequest as at, JsonValue as b, EditorMetadataUnavailableReason as c, UnsupportedSourceTarget as ct, EditorPropertyMetadata as d, StyleModuleEditRequest as et, EditorTokenSourceSection as f, InspectorEditorMetadata as g, InlineCssSourceCreateRequest as h, DynamicSourceTarget as i, StyleValueSource as it, RuntimeComponentLayer as j, PreviewStyleSheet as k, EditorMetadataUpdateEvent as l, ExternalSourceTarget as m, ComponentStyleModuleSource as n, StyleModuleSourceCreateRequest as nt, EditorFontTokenMetadata as o, TokenConfigEditResponse as ot, EditorTokenSourceTarget as p, StyleEditBatchRequest as q, Confidence as r, StyleModuleSourceDetachRequest as rt, EditorMetadataSection as s, UnsupportedReason as st, ComponentStyleModuleResponse as t, StyleModuleSourceAttachRequest as tt, EditorPropertyCategory as u, InspectorManifestEntry as v, OpenSourceLocationResponse as w, ManifestUpdateEvent as x, JsonPrimitive as y, SelectedElementState as z };

package/dist/ui.d.mts

@@ -1,5 +1,5 @@
-import { F as RuntimePropertyContext, L as SelectedElementInfo, N as RuntimeCssDeclaration, j as RuntimeComponentLayer } from "./types-CdByW0ji.mjs";
-import { r as SculptedRuntime } from "./runtime-C1gUOAc9.mjs";
+import { I as RuntimePropertyContext, N as RuntimeCssDeclaration, R as SelectedElementInfo, j as RuntimeComponentLayer } from "./types-0a4hNfAF.mjs";
+import { r as SculptedRuntime } from "./runtime-Cpxddehp.mjs";
 
 //#region src/ui/inspectorPanel.d.ts
 type ReadonlyInspectorPanelOptions = {
@@ -17,6 +17,7 @@ type ReadonlyInspectorPanelView = {
   readonly editable: boolean;
   readonly styleRows: readonly ReadonlyInspectorPanelRow[];
   readonly editableTargets: readonly ReadonlyInspectorPanelTarget[];
+  readonly inheritedTargets: readonly ReadonlyInspectorPanelInheritedTarget[];
   readonly inlineSourceCreate?: ReadonlyInspectorPanelInlineSourceCreate;
   readonly inspectedJsxSource?: string;
   readonly inspectedComponentSource?: string;
@@ -44,6 +45,10 @@ type ReadonlyInspectorPanelTarget = {
   readonly jsxSourceAliases?: readonly string[];
   readonly styleRows: readonly ReadonlyInspectorPanelRow[];
 };
+type ReadonlyInspectorPanelInheritedTarget = ReadonlyInspectorPanelTarget & {
+  readonly depth: number;
+  readonly inheritedFrom: string;
+};
 type ReadonlyInspectorPanelReadonlyTarget = {
   readonly id: string;
   readonly kind: string;

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);
@@ -8246,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]);
@@ -8274,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
 			}];
 		});
 	};
@@ -8330,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 = {
@@ -8347,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",
@@ -8357,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)
@@ -8367,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)
@@ -8403,6 +8534,7 @@ function InspectorPanel(props) {
 				module: response
 			};
 		}, (error) => {
+			logUnexpectedInspectorError("Failed to open style module.", error);
 			styleModulePanel.value = {
 				status: "error",
 				component,
@@ -8698,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,
@@ -9251,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,
@@ -9364,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;
@@ -9373,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);
@@ -9385,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: [
@@ -9396,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: {
@@ -9431,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: {
@@ -9497,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",
@@ -9904,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)) });
 				})()]
@@ -10009,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({
@@ -10020,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) => {
@@ -10428,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) => {
@@ -10555,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;
@@ -10571,7 +10788,8 @@ function AttachStyleSourceMenu(props) {
 						style: {
 							minWidth: 0,
 							display: "grid",
-							gap: "2px"
+							gap: "2px",
+							textAlign: "left"
 						},
 						children: [/* @__PURE__ */ u("code", {
 							style: { color: "#172033" },
@@ -10675,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);
@@ -11245,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;
 }

package/dist/vite.d.mts

@@ -1,4 +1,4 @@
-import { l as SourceSyntaxOption } from "./sourceSyntax-U2iybN9L.mjs";
+import { l as SourceSyntaxOption } from "./sourceSyntax-DKIh-VKA.mjs";
 
 //#region src/vite/types.d.ts
 type InspectorVitePluginOptions = {