sculpted 0.3.1 → 0.3.2

package/dist/{runtime-C911j-aR.d.mts → runtime-C1gUOAc9.d.mts}

@@ -45,7 +45,8 @@ declare class SculptedRuntime {
   requestTokenConfigEdit(request: TokenConfigEditRequest, write: boolean): Promise<TokenConfigEditResponse>;
   openSourceLocation(request: OpenSourceLocationRequest): Promise<OpenSourceLocationResponse>;
   selectElement(element: Element): Promise<SelectedElementInfo>;
-  startInspecting(onSelect?: (info: SelectedElementInfo, element: Element) => void, onStop?: () => void): () => void;
+  inspectElementEvidence(element: Element): SelectedElementInfo['evidence'];
+  startInspecting(onSelect?: (info: SelectedElementInfo, element: Element) => void, onStop?: () => void, onInspect?: (element: Element, evidence: SelectedElementInfo['evidence']) => void): () => void;
   stopInspecting(): void;
   highlightElement(element: Element): void;
   highlightElements(elements: readonly Element[]): void;

package/dist/runtime.d.mts

@@ -1,2 +1,2 @@
-import { i as installSculptedRuntime, n as RuntimeInspectorOptions, r as SculptedRuntime, t as RuntimeEnvironment } from "./runtime-C911j-aR.mjs";
+import { i as installSculptedRuntime, n as RuntimeInspectorOptions, r as SculptedRuntime, t as RuntimeEnvironment } from "./runtime-C1gUOAc9.mjs";
 export { RuntimeEnvironment, RuntimeInspectorOptions, SculptedRuntime, installSculptedRuntime };

package/dist/runtime.mjs

@@ -262,7 +262,10 @@ var SculptedRuntime = class {
 			message: target?.reason ?? "Selected Panda source target is not editable."
 		};
 	}
-	startInspecting(onSelect, onStop) {
+	inspectElementEvidence(element) {
+		return this.#elementEvidence(element);
+	}
+	startInspecting(onSelect, onStop, onInspect) {
 		this.stopInspecting();
 		const { window } = this.#environment;
 		const onPointerMove = (event) => {
@@ -279,6 +282,7 @@ var SculptedRuntime = class {
 			event.preventDefault();
 			event.stopPropagation();
 			this.stopInspecting();
+			onInspect?.(element, this.#elementEvidence(element));
 			this.selectElement(element).then((info) => {
 				onSelect?.(info, element);
 			});

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-C911j-aR.mjs";
+import { r as SculptedRuntime } from "./runtime-C1gUOAc9.mjs";
 
 //#region src/ui/inspectorPanel.d.ts
 type ReadonlyInspectorPanelOptions = {

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
@@ -7461,6 +7478,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 +7595,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 +7640,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();
@@ -7923,6 +7971,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 +8024,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 +8069,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 +8107,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 +8117,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);
@@ -8469,8 +8535,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 +8549,7 @@ function InspectorPanel(props) {
 				disabled: saving,
 				onUndoPreview: undoPreviewChange,
 				onRedoPreview: redoPreviewChange,
+				onSettings: openSettings,
 				onToggleDocked: toggleDocked,
 				onToggleSide: () => {
 					snapPanelSide(side.value === "right" ? "left" : "right");
@@ -8494,11 +8563,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,
@@ -9015,6 +9088,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 +9153,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;
@@ -10977,11 +11099,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 +11161,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
 			})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sculpted",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Experimental alpha dev inspector for editing Panda CSS styles and writing safe source updates.",
   "license": "FSL-1.1-ALv2",
   "author": "Alec Larson",