sculpted 0.3.3 → 0.3.4

package/dist/{sourceSyntax-DKIh-VKA.d.mts → sourceSyntax-BpjcDJyk.d.mts}

@@ -1,4 +1,4 @@
-import { B as SourceLocation, H as SourceRange } from "./types-0a4hNfAF.mjs";
+import { B as SourceLocation, H as SourceRange } from "./types-BWXru9cn.mjs";
 import ts from "typescript";
 
 //#region src/sourceSyntax.d.ts

package/dist/tsrx.d.mts

@@ -1,4 +1,4 @@
-import { s as SourceParserAdapter } from "./sourceSyntax-DKIh-VKA.mjs";
+import { s as SourceParserAdapter } from "./sourceSyntax-BpjcDJyk.mjs";
 
 //#region src/tsrx.d.ts
 declare const sourceSyntax: SourceParserAdapter;

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

@@ -142,6 +142,7 @@ type EditorPropertyMetadata = {
   readonly aliases: readonly string[];
   readonly tokenCategory?: string;
   readonly defaultUnit?: string;
+  readonly commonness?: number;
 };
 type InspectorEditorMetadata = {
   readonly version: number;

package/dist/ui.d.mts

@@ -1,5 +1,5 @@
-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";
+import { I as RuntimePropertyContext, N as RuntimeCssDeclaration, R as SelectedElementInfo, j as RuntimeComponentLayer } from "./types-BWXru9cn.mjs";
+import { r as SculptedRuntime } from "./runtime-C5jlEq5d.mjs";
 
 //#region src/ui/inspectorPanel.d.ts
 type ReadonlyInspectorPanelOptions = {

package/dist/ui.mjs

@@ -8285,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",
@@ -9646,7 +9649,7 @@ function EditableTargetsSection(props) {
 					onMenuOpenChange: onInputMenuOpenChange
 				}) : null]
 			}) : null,
-			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: {
@@ -10104,6 +10107,7 @@ function EditableTargetsSection(props) {
 								propertyContext: previewPropertyContext,
 								saving,
 								autoOpen: target.id === pendingInlineSourceTarget?.id,
+								showShortcutHint: targetIndex === 0,
 								onAddProperty,
 								onMenuOpenChange: onInputMenuOpenChange
 							}) : null
@@ -10243,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
 		}];
 	});
 }
@@ -10403,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;
@@ -10838,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",
@@ -10909,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) => {
@@ -10932,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);
@@ -10973,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,
@@ -11048,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",
@@ -11060,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]

package/dist/vite.d.mts

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

package/dist/vite.mjs

@@ -21,6 +21,61 @@ const DEFAULT_PANDA_CONFIG_FILES = [
 ];
 //#endregion
 //#region src/vite/editorProperties.ts
+const EDITOR_PROPERTY_COMMONNESS = {
+	display: 2.2,
+	color: 2.1,
+	background: 2,
+	backgroundColor: 2,
+	padding: 2,
+	paddingX: 1.9,
+	paddingY: 1.9,
+	paddingTop: 1.8,
+	paddingRight: 1.8,
+	paddingBottom: 1.8,
+	paddingLeft: 1.8,
+	margin: 1.9,
+	marginX: 1.8,
+	marginY: 1.8,
+	marginTop: 1.7,
+	marginRight: 1.7,
+	marginBottom: 1.7,
+	marginLeft: 1.7,
+	width: 1.9,
+	height: 1.8,
+	borderRadius: 1.8,
+	gap: 1.8,
+	fontSize: 1.8,
+	fontWeight: 1.7,
+	lineHeight: 1.7,
+	position: 1.7,
+	opacity: 1.7,
+	border: 1.6,
+	boxShadow: 1.5,
+	alignItems: 1.5,
+	justifyContent: 1.5,
+	flexDirection: 1.4,
+	overflow: 1.4,
+	cursor: 1.3,
+	transform: 1.3,
+	maxWidth: 1.3,
+	minWidth: 1.3,
+	top: 1.2,
+	right: 1.2,
+	bottom: 1.2,
+	left: 1.2,
+	inset: 1.2,
+	zIndex: 1.2,
+	backgroundImage: 1.1,
+	outline: 1.1,
+	transition: 1.1,
+	pointerEvents: 1.1,
+	userSelect: 1.1,
+	backdropFilter: .8,
+	mixBlendMode: .8,
+	backgroundAttachment: .7,
+	transitionTimingFunction: .7,
+	cornerShape: .6
+};
 function editorProperty(name, label, category, cssProperty, aliases = [], tokenCategory) {
 	return {
 		name,
@@ -29,9 +84,13 @@ function editorProperty(name, label, category, cssProperty, aliases = [], tokenC
 		cssProperty,
 		aliases,
 		tokenCategory,
-		defaultUnit: defaultEditorPropertyUnit(name, category)
+		defaultUnit: defaultEditorPropertyUnit(name, category),
+		commonness: editorPropertyCommonness(name)
 	};
 }
+function editorPropertyCommonness(name) {
+	return EDITOR_PROPERTY_COMMONNESS[name] ?? 1;
+}
 function defaultEditorPropertyUnit(name, category) {
 	if ([
 		"zIndex",

package/docs/vite-plugin.md

@@ -24,8 +24,17 @@ framework-rendered document. Add the runtime script explicitly in development:
 
 ```tsx
 // app/root.tsx
-<Scripts />
-{import.meta.env.DEV && <script src="/@sculpted/runtime" type="module" />}
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Scripts />
+        {import.meta.env.DEV ? <script src="/@sculpted/runtime" type="module" /> : null}
+      </body>
+    </html>
+  )
+}
 ```
 
 Keep `sculpted()` before `reactRouter()` in `vite.config.ts` so route modules are instrumented

package/examples/vite-preact-pandacss/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sculpted-vite-preact-pandacss",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
     "prepare": "panda codegen",

package/examples/vite-preact-pandacss/postcss.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    '@pandacss/dev/postcss': {}
-  }
+    '@pandacss/dev/postcss': {},
+  },
 }

package/examples/vite-preact-pandacss/src/index.css

@@ -3,6 +3,11 @@
 body {
   margin: 0;
   font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
     sans-serif;
 }

package/examples/vite-preact-pandacss/vite.config.ts

@@ -2,7 +2,7 @@ import preact from '@preact/preset-vite'
 import tsrx from '@tsrx/vite-plugin-preact'
 import { sourceSyntax } from 'sculpted/tsrx'
 import { sculpted } from 'sculpted/vite'
-import { defineConfig, } from 'vite'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
@@ -11,10 +11,10 @@ export default defineConfig({
       include: ['src/**/*.{ts,tsx,tsrx}'],
       sourceSyntax: [sourceSyntax],
       panda: {
-        cssImportSources: ['../styled-system/css']
-      }
+        cssImportSources: ['../styled-system/css'],
+      },
     }),
     tsrx(),
-    preact()
-  ]
+    preact(),
+  ],
 })

package/examples/vite-react-pandacss/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sculpted-vite-react-pandacss",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
     "prepare": "panda codegen",

package/examples/vite-react-pandacss/src/index.css

@@ -3,6 +3,11 @@
 body {
   margin: 0;
   font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
     sans-serif;
 }

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "sculpted",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Experimental alpha dev inspector for editing Panda CSS styles and writing safe source updates.",
-  "license": "FSL-1.1-ALv2",
-  "author": "Alec Larson",
-  "packageManager": "pnpm@11.5.1",
   "keywords": [
+    "css-editor",
+    "inspector",
     "panda-css",
-    "vite",
     "preact",
-    "inspector",
-    "css-editor",
-    "source-writeback"
+    "source-writeback",
+    "vite"
   ],
+  "license": "FSL-1.1-ALv2",
+  "author": "Alec Larson",
   "repository": {
     "type": "git",
     "url": "https://github.com/aleclarson/sculpted.git"
@@ -59,15 +58,6 @@
     "@pandacss/node": "1.11.1",
     "zod": "4.4.3"
   },
-  "peerDependencies": {
-    "@tsrx/core": ">=0.1.0",
-    "typescript": ">=5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@tsrx/core": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@goddard-ai/ui-primitives": "0.1.1",
     "@pandacss/dev": "^1.11.1",
@@ -84,5 +74,15 @@
     "tsdown": "^0.22.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.7"
-  }
+  },
+  "peerDependencies": {
+    "@tsrx/core": ">=0.1.0",
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tsrx/core": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@11.5.1"
 }