From 4429db15527171294d23d66f2edab36f2dba4fae Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Tue, 28 Jul 2026 18:15:50 +0530
Subject: [PATCH 1/7] fix: keep autocomplete lists full while filtering

Each getOptions implementation filtered and capped its own list.
Once an item is selected the list showed no extra options.

Add filterOptions, which puts the matches for a query first, fills the
rest of the list with the other options, and stops at 20 items.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../TypographySection.ts                      | 54 ++++-------
 .../src/components/DynamicValueDropdown.vue   |  8 +-
 .../components/Settings/AnalyticsFilters.vue  | 13 +--
 frontend/src/components/VisibilityInput.vue   | 50 +++-------
 frontend/src/utils/autocompleteOptions.ts     | 26 ++++++
 frontend/src/utils/colorOptions.ts            | 92 +++++++++----------
 frontend/src/utils/cssMetadata.ts             |  6 +-
 7 files changed, 112 insertions(+), 137 deletions(-)
 create mode 100644 frontend/src/utils/autocompleteOptions.ts

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 74c2d9642..a98ba50b0 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -5,6 +5,7 @@ import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import userFonts from "@/data/userFonts";
 import { UserFont } from "@/types/doctypes";
+import { filterOptions, MAX_OPTIONS } from "@/utils/autocompleteOptions";
 import blockController from "@/utils/blockController";
 import { setFont as _setFont, fontListItems, getFontWeightOptions, loadFontList } from "@/utils/fontManager";
 import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
@@ -44,41 +45,24 @@ const typographySectionProperties = [
 				propertyKey: "fontFamily",
 				getOptions: async (filterString: string) => {
 					await loadFontList();
-					const fontOptions = [] as { label: string; value: string }[];
-					userFonts.data?.forEach((font: UserFont) => {
-						if (fontOptions.length >= 20) {
-							return;
-						}
-						const fontName = font.font_name as string;
-						if (fontName.toLowerCase().includes(filterString.toLowerCase()) || !filterString) {
-							fontOptions.push({
-								label: fontName,
-								value: fontName,
-							});
-						}
-					});
-					if (fontOptions.length) {
-						fontOptions.unshift({
-							label: "Custom",
-							value: "_separator_1",
-						});
-						fontOptions.push({
-							label: "Default",
-							value: "_separator_2",
-						});
-					}
-					fontListItems.value.forEach((font) => {
-						if (fontOptions.length >= 20) {
-							return;
-						}
-						if (font.family.toLowerCase().includes(filterString.toLowerCase()) || !filterString) {
-							fontOptions.push({
-								label: font.family,
-								value: font.family,
-							});
-						}
-					});
-					return fontOptions;
+					const toOption = (family: string) => ({ label: family, value: family });
+					const userFontOptions = filterOptions(
+						(userFonts.data || []).map((font: UserFont) => toOption(font.font_name as string)),
+						filterString,
+					);
+					const defaultFontOptions = filterOptions(
+						fontListItems.value.map((font) => toOption(font.family)),
+						filterString,
+						Math.max(MAX_OPTIONS - userFontOptions.length, 0),
+					);
+
+					if (!userFontOptions.length) return defaultFontOptions;
+					return [
+						{ label: "Custom", value: "_separator_1" },
+						...userFontOptions,
+						{ label: "Default", value: "_separator_2" },
+						...defaultFontOptions,
+					];
 				},
 				actionButton: {
 					component: FontUploader,
diff --git a/frontend/src/components/DynamicValueDropdown.vue b/frontend/src/components/DynamicValueDropdown.vue
index cdf560e1e..453b4fb9e 100644
--- a/frontend/src/components/DynamicValueDropdown.vue
+++ b/frontend/src/components/DynamicValueDropdown.vue
@@ -30,6 +30,7 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import MiddleTruncate from "@/components/MiddleTruncate.vue";
 import usePageStore from "@/stores/pageStore";
+import { filterOptions } from "@/utils/autocompleteOptions";
 import blockController from "@/utils/blockController";
 import { getDataArray, getDefaultPropsList, getParentProps, getRepeaterScopedData } from "@/utils/helpers";
 import { computed, ref, watch } from "vue";
@@ -100,12 +101,7 @@ const dynamicOptions = computed(() => {
 	return options;
 });
 
-const getOptions = async (query: string) => {
-	const normalizedQuery = query.trim().toLowerCase();
-	return dynamicOptions.value.filter((option) => {
-		return !normalizedQuery || option.label.toLowerCase().includes(normalizedQuery);
-	});
-};
+const getOptions = async (query: string) => filterOptions(dynamicOptions.value, query);
 
 const handleModelValueUpdate = (value: string | null) => {
 	if (value == null) {
diff --git a/frontend/src/components/Settings/AnalyticsFilters.vue b/frontend/src/components/Settings/AnalyticsFilters.vue
index ff4cda140..085a955bc 100644
--- a/frontend/src/components/Settings/AnalyticsFilters.vue
+++ b/frontend/src/components/Settings/AnalyticsFilters.vue
@@ -25,6 +25,7 @@
 import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import { webPages } from "@/data/webPage";
 import { BuilderPage } from "@/types/doctypes";
+import { filterOptions } from "@/utils/autocompleteOptions";
 import { DateRangePicker, Select } from "frappe-ui";
 import { computed } from "vue";
 
@@ -101,14 +102,10 @@ const getRouteOptions = async (query: string) => {
 		await webPages.fetch();
 	}
 
-	const queryLower = query?.toLowerCase() || "";
-
-	return (webPages.data ?? [])
+	const routeOptions = (webPages.data ?? [])
 		.filter((page: BuilderPage) => page.route && !page.dynamic_route)
-		.map((page: BuilderPage) => ({ value: page.route as string, label: page.route as string }))
-		.filter(
-			(option: { value: string; label: string }) =>
-				!queryLower || option.label.toLowerCase().includes(queryLower),
-		);
+		.map((page: BuilderPage) => ({ value: page.route as string, label: page.route as string }));
+
+	return filterOptions(routeOptions, query || "");
 };
 </script>
diff --git a/frontend/src/components/VisibilityInput.vue b/frontend/src/components/VisibilityInput.vue
index 8bd5022ea..b409413fc 100644
--- a/frontend/src/components/VisibilityInput.vue
+++ b/frontend/src/components/VisibilityInput.vue
@@ -11,6 +11,7 @@
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import useCanvasStore from "@/stores/canvasStore";
 import usePageStore from "@/stores/pageStore";
+import { filterOptions } from "@/utils/autocompleteOptions";
 import blockController from "@/utils/blockController";
 import componentController from "@/utils/componentController";
 import { getDataArray, getDefaultPropsList, getParentProps, getRepeaterScopedData } from "@/utils/helpers";
@@ -66,46 +67,19 @@ const defaultProps = computed(() => {
 	}
 	return Object.keys(getDefaultPropsList(currentBlock.value));
 });
-const getOptions = async (query: string) => {
-	let options: { label: string; value: string }[] = [];
+const visibilityOptions = computed(() => {
+	const toOptions = (props: string[], comesFrom: string) =>
+		props.map((prop) => ({ label: prop, value: `${prop}--${comesFrom}` }));
+	const propsList = [...new Set([...ownProps.value, ...parentProps.value, ...defaultProps.value])];
 
-	pageDataArray.value.map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--dataScript`,
-			});
-		}
-	});
-	componentDataArray.value.map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--componentData`,
-			});
-		}
-	});
-	const combinedProps = [...new Set([...ownProps.value, ...parentProps.value])];
-
-	combinedProps.map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--props`,
-			});
-		}
-	});
-	defaultProps.value.map((prop) => {
-		if (query.trim() == "" || prop.toLowerCase().includes(query.toLowerCase())) {
-			options.push({
-				label: prop,
-				value: `${prop}--props`,
-			});
-		}
-	});
+	return [
+		...toOptions(pageDataArray.value, "dataScript"),
+		...toOptions(componentDataArray.value, "componentData"),
+		...toOptions(propsList, "props"),
+	];
+});
 
-	return options;
-};
+const getOptions = async (query: string) => filterOptions(visibilityOptions.value, query);
 
 const handleModelValueUpdate = (value: string | null) => {
 	if (value == null) {
diff --git a/frontend/src/utils/autocompleteOptions.ts b/frontend/src/utils/autocompleteOptions.ts
new file mode 100644
index 000000000..0eadca43c
--- /dev/null
+++ b/frontend/src/utils/autocompleteOptions.ts
@@ -0,0 +1,26 @@
+const MAX_OPTIONS = 20;
+
+// keeps every match for the query in the list, then fills the rest of the list with the
+// remaining options so the dropdown always offers something to browse
+function filterOptions<Option extends { label: string }>(
+	options: Option[],
+	query: string,
+	limit = MAX_OPTIONS,
+): Option[] {
+	const normalizedQuery = query.trim().toLowerCase();
+	if (!normalizedQuery) return options.slice(0, limit);
+
+	const matched: Option[] = [];
+	const rest: Option[] = [];
+	options.forEach((option) => {
+		if (option.label.toLowerCase().includes(normalizedQuery)) {
+			matched.push(option);
+		} else {
+			rest.push(option);
+		}
+	});
+
+	return [...matched, ...rest].slice(0, limit);
+}
+
+export { filterOptions, MAX_OPTIONS };
diff --git a/frontend/src/utils/colorOptions.ts b/frontend/src/utils/colorOptions.ts
index b31b2b581..ebd3bcfa5 100644
--- a/frontend/src/utils/colorOptions.ts
+++ b/frontend/src/utils/colorOptions.ts
@@ -1,4 +1,5 @@
 import { BuilderVariable } from "@/types/doctypes";
+import { filterOptions } from "@/utils/autocompleteOptions";
 import { defineComponent, h, shallowRef } from "vue";
 
 export function getColorVariableOptions(
@@ -11,52 +12,51 @@ export function getColorVariableOptions(
 	let processedQuery = query.replace(/^(--|var|\s+)/, "");
 	processedQuery = processedQuery.replace(/^--|\(|\s+/g, "");
 
-	return variables
-		.filter((builderVariable: BuilderVariable) => {
-			const label = (builderVariable.variable_name || "").toLowerCase();
-			const group = (builderVariable.group || "").toLowerCase();
-			const queryLower = processedQuery.toLowerCase();
-			return queryLower === "" || label.includes(queryLower) || group.includes(queryLower);
-		})
-		.map((builderVariable: BuilderVariable) => {
-			const varName = `var(--${builderVariable.name})`;
-			const resolvedLightColor = resolveVariableValue(varName);
-			const resolvedDarkColor = resolveVariableValue(varName, true);
+	// the group name is searchable along with the variable name
+	const searchableOptions = variables.map((builderVariable: BuilderVariable) => ({
+		label: `${builderVariable.variable_name || ""} ${builderVariable.group || ""}`,
+		variable: builderVariable,
+	}));
 
-			return {
-				label: `${builderVariable?.variable_name || ""}`,
-				value: varName,
-				prefix: shallowRef(
-					defineComponent({
-						setup() {
-							return () =>
-								h("div", {
-									class: "h-4 w-4 rounded shadow-sm border border-outline-gray-1 flex-shrink-0",
-									style: { background: isDark ? resolvedDarkColor : resolvedLightColor },
-								});
-						},
-					}),
-				),
-				suffix:
-					!builderVariable.is_standard && onEdit
-						? shallowRef(
-								defineComponent({
-									setup() {
-										return () =>
-											h(
-												"Button",
-												{
-													class: "hidden group-hover:inline-block",
-													onClick: (e: Event) => {
-														onEdit(builderVariable);
-													},
+	return filterOptions(searchableOptions, processedQuery).map(({ variable: builderVariable }) => {
+		const varName = `var(--${builderVariable.name})`;
+		const resolvedLightColor = resolveVariableValue(varName);
+		const resolvedDarkColor = resolveVariableValue(varName, true);
+
+		return {
+			label: `${builderVariable.variable_name || ""}`,
+			value: varName,
+			prefix: shallowRef(
+				defineComponent({
+					setup() {
+						return () =>
+							h("div", {
+								class: "h-4 w-4 rounded shadow-sm border border-outline-gray-1 flex-shrink-0",
+								style: { background: isDark ? resolvedDarkColor : resolvedLightColor },
+							});
+					},
+				}),
+			),
+			suffix:
+				!builderVariable.is_standard && onEdit
+					? shallowRef(
+							defineComponent({
+								setup() {
+									return () =>
+										h(
+											"Button",
+											{
+												class: "hidden group-hover:inline-block",
+												onClick: (e: Event) => {
+													onEdit(builderVariable);
 												},
-												"Edit",
-											);
-									},
-								}),
-							)
-						: undefined,
-			};
-		});
+											},
+											"Edit",
+										);
+								},
+							}),
+						)
+					: undefined,
+		};
+	});
 }
diff --git a/frontend/src/utils/cssMetadata.ts b/frontend/src/utils/cssMetadata.ts
index 393d7679c..f1f5f0cdd 100644
--- a/frontend/src/utils/cssMetadata.ts
+++ b/frontend/src/utils/cssMetadata.ts
@@ -2,6 +2,7 @@ import Autocomplete from "@/components/Controls/Autocomplete.vue";
 import ColorInput from "@/components/Controls/ColorInput.vue";
 import RangeInput from "@/components/Controls/RangeInput.vue";
 import cssPropertyMetadata from "@/data/cssPropertyMetadata.json";
+import { filterOptions } from "@/utils/autocompleteOptions";
 import {
 	BORDER_UNIT_OPTIONS,
 	BOX_UNIT_OPTIONS,
@@ -149,10 +150,7 @@ const getCSSPropertyOptions = (query: string, excludedProperties = new Set<strin
 };
 
 const getCSSValueOptions = (property: string, query: string) => {
-	const normalizedQuery = query.toLowerCase();
-	return getKeywordOptions(property)
-		.filter((option) => !normalizedQuery || option.label.toLowerCase().includes(normalizedQuery))
-		.slice(0, MAX_SEARCH_RESULTS);
+	return filterOptions(getKeywordOptions(property), query, MAX_SEARCH_RESULTS);
 };
 
 export type { StyleControlConfig };

From 93f06d2a9509bcc368cf6ced98a2bbd43a41abb6 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Tue, 28 Jul 2026 18:40:44 +0530
Subject: [PATCH 2/7] fix: give default fonts their own option limit

The default font list took whatever the user font list left over. Non-matching
user fonts fill that list, so 20 or more user fonts used the whole limit. A
default font that matched the query never reached the dropdown. Each list now
filters against its own limit.
---
 .../src/components/BlockPropertySections/TypographySection.ts  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index a98ba50b0..4b65d9fb7 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -5,7 +5,7 @@ import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import userFonts from "@/data/userFonts";
 import { UserFont } from "@/types/doctypes";
-import { filterOptions, MAX_OPTIONS } from "@/utils/autocompleteOptions";
+import { filterOptions } from "@/utils/autocompleteOptions";
 import blockController from "@/utils/blockController";
 import { setFont as _setFont, fontListItems, getFontWeightOptions, loadFontList } from "@/utils/fontManager";
 import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
@@ -53,7 +53,6 @@ const typographySectionProperties = [
 					const defaultFontOptions = filterOptions(
 						fontListItems.value.map((font) => toOption(font.family)),
 						filterString,
-						Math.max(MAX_OPTIONS - userFontOptions.length, 0),
 					);
 
 					if (!userFontOptions.length) return defaultFontOptions;

From bc61c7cbb333d863a764597da56f6a3470008ff1 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 30 Jul 2026 01:42:07 +0530
Subject: [PATCH 3/7] refactor: make autocomplete window opt-in

filterOptions now takes limit and windowRadius in one options object.
Without windowRadius it keeps the matches first, then fills the rest of
the list. With windowRadius it keeps each match at its original position
and shows the options around it.

Only the font family list passes windowRadius. The color picker, the
css keyword list, the analytics filters, the visibility input, and the
dynamic value dropdown keep their current behavior.
---
 .../TypographySection.ts                      |  2 ++
 frontend/src/utils/autocompleteOptions.ts     | 34 ++++++++++++++++---
 frontend/src/utils/cssMetadata.ts             |  2 +-
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 4b65d9fb7..2be71aa35 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -49,10 +49,12 @@ const typographySectionProperties = [
 					const userFontOptions = filterOptions(
 						(userFonts.data || []).map((font: UserFont) => toOption(font.font_name as string)),
 						filterString,
+						{ limit: 10, windowRadius: { upper: 4, lower: 5 } },
 					);
 					const defaultFontOptions = filterOptions(
 						fontListItems.value.map((font) => toOption(font.family)),
 						filterString,
+						{ limit: 20, windowRadius: { upper: 4, lower: 15 } },
 					);
 
 					if (!userFontOptions.length) return defaultFontOptions;
diff --git a/frontend/src/utils/autocompleteOptions.ts b/frontend/src/utils/autocompleteOptions.ts
index 0eadca43c..876773d75 100644
--- a/frontend/src/utils/autocompleteOptions.ts
+++ b/frontend/src/utils/autocompleteOptions.ts
@@ -1,26 +1,50 @@
 const MAX_OPTIONS = 20;
+const DEFAULT_RADIUS = { upper: 10, lower: 9 };
 
-// keeps every match for the query in the list, then fills the rest of the list with the
-// remaining options so the dropdown always offers something to browse
+type WindowRadius = {
+	upper?: number;
+	lower?: number;
+};
+
+type FilterOptionsConfig = {
+	limit?: number;
+	windowRadius?: WindowRadius;
+};
+
+// matches first, then the rest. pass windowRadius to keep each match in place and
+// show the options around it instead.
 function filterOptions<Option extends { label: string }>(
 	options: Option[],
 	query: string,
-	limit = MAX_OPTIONS,
+	{ limit = MAX_OPTIONS, windowRadius }: FilterOptionsConfig = {},
 ): Option[] {
 	const normalizedQuery = query.trim().toLowerCase();
 	if (!normalizedQuery) return options.slice(0, limit);
 
+	const matchIndexes: number[] = [];
 	const matched: Option[] = [];
 	const rest: Option[] = [];
-	options.forEach((option) => {
+	options.forEach((option, index) => {
 		if (option.label.toLowerCase().includes(normalizedQuery)) {
+			matchIndexes.push(index);
 			matched.push(option);
 		} else {
 			rest.push(option);
 		}
 	});
+	if (!matchIndexes.length) return options.slice(0, limit);
+	if (!windowRadius) return [...matched, ...rest].slice(0, limit);
 
-	return [...matched, ...rest].slice(0, limit);
+	const kept = new Set<number>();
+	const radius = { ...DEFAULT_RADIUS, ...windowRadius };
+	matchIndexes.forEach((matchIndex) => {
+		const start = Math.max(0, matchIndex - radius.upper);
+		const end = Math.min(options.length - 1, matchIndex + radius.lower);
+		for (let index = start; index <= end; index++) {
+			kept.add(index);
+		}
+	});
+	return options.filter((_, index) => kept.has(index)).slice(0, limit);
 }
 
 export { filterOptions, MAX_OPTIONS };
diff --git a/frontend/src/utils/cssMetadata.ts b/frontend/src/utils/cssMetadata.ts
index f1f5f0cdd..16115c580 100644
--- a/frontend/src/utils/cssMetadata.ts
+++ b/frontend/src/utils/cssMetadata.ts
@@ -150,7 +150,7 @@ const getCSSPropertyOptions = (query: string, excludedProperties = new Set<strin
 };
 
 const getCSSValueOptions = (property: string, query: string) => {
-	return filterOptions(getKeywordOptions(property), query, MAX_SEARCH_RESULTS);
+	return filterOptions(getKeywordOptions(property), query, { limit: MAX_SEARCH_RESULTS });
 };
 
 export type { StyleControlConfig };

From 747981cd692413284f7fa61322cad5fe17872f77 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 30 Jul 2026 16:52:19 +0530
Subject: [PATCH 4/7] refactor: window autocomplete options around each match

filterOptions kept matches in place only when a caller passed a radius,
and each caller had to tune the upper and lower halves itself. Now every
caller gets the same window: a limit-sized slice with the match a third
of the way down, so its neighbours stay visible.

Color variables come from the store newest-first, so a match had unrelated
neighbours. Sort them by name before filtering.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../TypographySection.ts                      |  2 -
 frontend/src/utils/autocompleteOptions.ts     | 44 +++++++------------
 frontend/src/utils/colorOptions.ts            | 11 +++--
 frontend/src/utils/cssMetadata.ts             |  2 +-
 4 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/BlockPropertySections/TypographySection.ts b/frontend/src/components/BlockPropertySections/TypographySection.ts
index 2be71aa35..4b65d9fb7 100644
--- a/frontend/src/components/BlockPropertySections/TypographySection.ts
+++ b/frontend/src/components/BlockPropertySections/TypographySection.ts
@@ -49,12 +49,10 @@ const typographySectionProperties = [
 					const userFontOptions = filterOptions(
 						(userFonts.data || []).map((font: UserFont) => toOption(font.font_name as string)),
 						filterString,
-						{ limit: 10, windowRadius: { upper: 4, lower: 5 } },
 					);
 					const defaultFontOptions = filterOptions(
 						fontListItems.value.map((font) => toOption(font.family)),
 						filterString,
-						{ limit: 20, windowRadius: { upper: 4, lower: 15 } },
 					);
 
 					if (!userFontOptions.length) return defaultFontOptions;
diff --git a/frontend/src/utils/autocompleteOptions.ts b/frontend/src/utils/autocompleteOptions.ts
index 876773d75..5348ab1b2 100644
--- a/frontend/src/utils/autocompleteOptions.ts
+++ b/frontend/src/utils/autocompleteOptions.ts
@@ -1,45 +1,31 @@
 const MAX_OPTIONS = 20;
-const DEFAULT_RADIUS = { upper: 10, lower: 9 };
+// how far down the window a match sits, so more of its neighbours show above it
+const MATCH_POSITION = 1 / 3;
 
-type WindowRadius = {
-	upper?: number;
-	lower?: number;
-};
-
-type FilterOptionsConfig = {
-	limit?: number;
-	windowRadius?: WindowRadius;
-};
+function windowAround(matchIndex: number, limit: number, total: number): [number, number] {
+	const offset = Math.floor((limit - 1) * MATCH_POSITION);
+	const start = Math.min(Math.max(0, matchIndex - offset), Math.max(0, total - limit));
+	return [start, Math.min(total - 1, start + limit - 1)];
+}
 
-// matches first, then the rest. pass windowRadius to keep each match in place and
-// show the options around it instead.
+// keeps every match in place and shows the options around it
 function filterOptions<Option extends { label: string }>(
 	options: Option[],
 	query: string,
-	{ limit = MAX_OPTIONS, windowRadius }: FilterOptionsConfig = {},
+	limit = MAX_OPTIONS,
 ): Option[] {
 	const normalizedQuery = query.trim().toLowerCase();
-	if (!normalizedQuery) return options.slice(0, limit);
+	if (!normalizedQuery || options.length <= limit) return options.slice(0, limit);
 
-	const matchIndexes: number[] = [];
-	const matched: Option[] = [];
-	const rest: Option[] = [];
-	options.forEach((option, index) => {
-		if (option.label.toLowerCase().includes(normalizedQuery)) {
-			matchIndexes.push(index);
-			matched.push(option);
-		} else {
-			rest.push(option);
-		}
-	});
+	const matchIndexes = options.reduce((indexes: number[], option, index) => {
+		if (option.label.toLowerCase().includes(normalizedQuery)) indexes.push(index);
+		return indexes;
+	}, []);
 	if (!matchIndexes.length) return options.slice(0, limit);
-	if (!windowRadius) return [...matched, ...rest].slice(0, limit);
 
 	const kept = new Set<number>();
-	const radius = { ...DEFAULT_RADIUS, ...windowRadius };
 	matchIndexes.forEach((matchIndex) => {
-		const start = Math.max(0, matchIndex - radius.upper);
-		const end = Math.min(options.length - 1, matchIndex + radius.lower);
+		const [start, end] = windowAround(matchIndex, limit, options.length);
 		for (let index = start; index <= end; index++) {
 			kept.add(index);
 		}
diff --git a/frontend/src/utils/colorOptions.ts b/frontend/src/utils/colorOptions.ts
index ebd3bcfa5..accf96b8d 100644
--- a/frontend/src/utils/colorOptions.ts
+++ b/frontend/src/utils/colorOptions.ts
@@ -13,10 +13,13 @@ export function getColorVariableOptions(
 	processedQuery = processedQuery.replace(/^--|\(|\s+/g, "");
 
 	// the group name is searchable along with the variable name
-	const searchableOptions = variables.map((builderVariable: BuilderVariable) => ({
-		label: `${builderVariable.variable_name || ""} ${builderVariable.group || ""}`,
-		variable: builderVariable,
-	}));
+	const searchableOptions = variables
+		.map((builderVariable: BuilderVariable) => ({
+			label: `${builderVariable.variable_name || ""} ${builderVariable.group || ""}`,
+			variable: builderVariable,
+		}))
+		// alphabetical, so the options around a match are related ones
+		.sort((a, b) => (a.variable.variable_name || "").localeCompare(b.variable.variable_name || ""));
 
 	return filterOptions(searchableOptions, processedQuery).map(({ variable: builderVariable }) => {
 		const varName = `var(--${builderVariable.name})`;
diff --git a/frontend/src/utils/cssMetadata.ts b/frontend/src/utils/cssMetadata.ts
index 16115c580..f1f5f0cdd 100644
--- a/frontend/src/utils/cssMetadata.ts
+++ b/frontend/src/utils/cssMetadata.ts
@@ -150,7 +150,7 @@ const getCSSPropertyOptions = (query: string, excludedProperties = new Set<strin
 };
 
 const getCSSValueOptions = (property: string, query: string) => {
-	return filterOptions(getKeywordOptions(property), query, { limit: MAX_SEARCH_RESULTS });
+	return filterOptions(getKeywordOptions(property), query, MAX_SEARCH_RESULTS);
 };
 
 export type { StyleControlConfig };

From 683eb562b85205d9f9205dec7a8c690ef4531396 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 30 Jul 2026 17:57:39 +0530
Subject: [PATCH 5/7] refactor: simplify autocomplete option filtering

A partial query now returns only the matching options. An exact
match, which is the selected value on focus, returns a window
around the selection: up to 3 neighbours above, the rest below,
clamped at both ends of the list.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/utils/autocompleteOptions.ts | 37 +++++++++--------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/frontend/src/utils/autocompleteOptions.ts b/frontend/src/utils/autocompleteOptions.ts
index 5348ab1b2..cea622221 100644
--- a/frontend/src/utils/autocompleteOptions.ts
+++ b/frontend/src/utils/autocompleteOptions.ts
@@ -1,36 +1,27 @@
 const MAX_OPTIONS = 20;
-// how far down the window a match sits, so more of its neighbours show above it
-const MATCH_POSITION = 1 / 3;
+// options kept above the selected option when the list is windowed around it
+const NEIGHBOURS_ABOVE = 3;
 
-function windowAround(matchIndex: number, limit: number, total: number): [number, number] {
-	const offset = Math.floor((limit - 1) * MATCH_POSITION);
-	const start = Math.min(Math.max(0, matchIndex - offset), Math.max(0, total - limit));
-	return [start, Math.min(total - 1, start + limit - 1)];
-}
-
-// keeps every match in place and shows the options around it
+// typing filters to matching options; an exact match (the current selection)
+// shows the list windowed around it instead, so its neighbours stay visible
 function filterOptions<Option extends { label: string }>(
 	options: Option[],
 	query: string,
 	limit = MAX_OPTIONS,
 ): Option[] {
 	const normalizedQuery = query.trim().toLowerCase();
-	if (!normalizedQuery || options.length <= limit) return options.slice(0, limit);
+	if (!normalizedQuery) return options.slice(0, limit);
 
-	const matchIndexes = options.reduce((indexes: number[], option, index) => {
-		if (option.label.toLowerCase().includes(normalizedQuery)) indexes.push(index);
-		return indexes;
-	}, []);
-	if (!matchIndexes.length) return options.slice(0, limit);
+	const selectedIndex = options.findIndex((option) => option.label.toLowerCase() === normalizedQuery);
+	if (selectedIndex !== -1) return windowAround(options, selectedIndex, limit);
+
+	return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery)).slice(0, limit);
+}
 
-	const kept = new Set<number>();
-	matchIndexes.forEach((matchIndex) => {
-		const [start, end] = windowAround(matchIndex, limit, options.length);
-		for (let index = start; index <= end; index++) {
-			kept.add(index);
-		}
-	});
-	return options.filter((_, index) => kept.has(index)).slice(0, limit);
+function windowAround<Option>(options: Option[], index: number, limit: number): Option[] {
+	const maxStart = Math.max(options.length - limit, 0);
+	const start = Math.min(Math.max(index - NEIGHBOURS_ABOVE, 0), maxStart);
+	return options.slice(start, start + limit);
 }
 
 export { filterOptions, MAX_OPTIONS };

From eae7c337a3373fe4c770b550a6b52353b750418e Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 30 Jul 2026 18:07:21 +0530
Subject: [PATCH 6/7] refactor: inline the window logic in filterOptions

Place the selection about a third of the window from the top
instead of a fixed neighbour count.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/utils/autocompleteOptions.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/utils/autocompleteOptions.ts b/frontend/src/utils/autocompleteOptions.ts
index cea622221..8df5b5e30 100644
--- a/frontend/src/utils/autocompleteOptions.ts
+++ b/frontend/src/utils/autocompleteOptions.ts
@@ -1,9 +1,7 @@
 const MAX_OPTIONS = 20;
-// options kept above the selected option when the list is windowed around it
-const NEIGHBOURS_ABOVE = 3;
 
 // typing filters to matching options; an exact match (the current selection)
-// shows the list windowed around it instead, so its neighbours stay visible
+// shows the list windowed around it, with about a third of the window above it
 function filterOptions<Option extends { label: string }>(
 	options: Option[],
 	query: string,
@@ -13,14 +11,12 @@ function filterOptions<Option extends { label: string }>(
 	if (!normalizedQuery) return options.slice(0, limit);
 
 	const selectedIndex = options.findIndex((option) => option.label.toLowerCase() === normalizedQuery);
-	if (selectedIndex !== -1) return windowAround(options, selectedIndex, limit);
+	if (selectedIndex === -1) {
+		return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery)).slice(0, limit);
+	}
 
-	return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery)).slice(0, limit);
-}
-
-function windowAround<Option>(options: Option[], index: number, limit: number): Option[] {
 	const maxStart = Math.max(options.length - limit, 0);
-	const start = Math.min(Math.max(index - NEIGHBOURS_ABOVE, 0), maxStart);
+	const start = Math.min(Math.max(selectedIndex - Math.floor(limit / 3), 0), maxStart);
 	return options.slice(start, start + limit);
 }
 

From 9e567464479e0076e9e55fba528878f571808971 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 30 Jul 2026 18:12:05 +0530
Subject: [PATCH 7/7] fix: window color variable options around the selection

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/utils/colorOptions.ts | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/utils/colorOptions.ts b/frontend/src/utils/colorOptions.ts
index accf96b8d..dd7c8758c 100644
--- a/frontend/src/utils/colorOptions.ts
+++ b/frontend/src/utils/colorOptions.ts
@@ -9,18 +9,34 @@ export function getColorVariableOptions(
 	isDark: boolean,
 	onEdit?: (variable: BuilderVariable) => void,
 ) {
-	let processedQuery = query.replace(/^(--|var|\s+)/, "");
-	processedQuery = processedQuery.replace(/^--|\(|\s+/g, "");
+	// strip var(--...) syntax, keep the rest of the query as typed
+	let processedQuery = query
+		.replace(/^\s*(var\()?\s*(--)?/, "")
+		.replace(/\)\s*$/, "")
+		.trim();
+
+	const searchableLabel = (builderVariable: BuilderVariable) =>
+		`${builderVariable.variable_name || ""} ${builderVariable.group || ""}`;
 
 	// the group name is searchable along with the variable name
 	const searchableOptions = variables
 		.map((builderVariable: BuilderVariable) => ({
-			label: `${builderVariable.variable_name || ""} ${builderVariable.group || ""}`,
+			label: searchableLabel(builderVariable),
 			variable: builderVariable,
 		}))
 		// alphabetical, so the options around a match are related ones
 		.sort((a, b) => (a.variable.variable_name || "").localeCompare(b.variable.variable_name || ""));
 
+	// the query is the current selection when it is the var() value or the
+	// variable's display name (what ColorInput shows on focus): use its full
+	// label so filterOptions windows the list around it
+	const normalizedQuery = processedQuery.toLowerCase();
+	const selectedVariable = variables.find(
+		(v) =>
+			query.trim() === `var(--${v.name})` || (v.variable_name || "").toLowerCase() === normalizedQuery,
+	);
+	if (selectedVariable) processedQuery = searchableLabel(selectedVariable);
+
 	return filterOptions(searchableOptions, processedQuery).map(({ variable: builderVariable }) => {
 		const varName = `var(--${builderVariable.name})`;
 		const resolvedLightColor = resolveVariableValue(varName);