From ea2f71d8be424fe13772ec1b7eba85d55bc4eae4 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sun, 10 Aug 2025 23:14:16 +0000
Subject: [PATCH] fix: improve validate ID for id editors

---
 frontend/src/lib/components/IdEditorInput.svelte            | 6 +++++-
 .../apps/editor/contextPanel/components/IdEditor.svelte     | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/IdEditorInput.svelte b/frontend/src/lib/components/IdEditorInput.svelte
index 820e1fc671..15128a3468 100644
--- a/frontend/src/lib/components/IdEditorInput.svelte
+++ b/frontend/src/lib/components/IdEditorInput.svelte
@@ -11,6 +11,7 @@
 	interface Props {
 		initialId: string
 		reservedIds?: string[]
+		reservedPrefixes?: string[]
 		label?: string
 		value?: any
 		buttonText?: string
@@ -23,6 +24,7 @@
 	let {
 		initialId,
 		reservedIds = [],
+		reservedPrefixes = [],
 		label = 'Component ID',
 		value = $bindable(initialId),
 		buttonText = '',
@@ -44,6 +46,8 @@
 			error = 'The ID must include only letters and numbers and start with a letter'
 		} else if (forbiddenIds.includes(value)) {
 			error = 'This ID is reserved'
+		} else if (reservedPrefixes.some((prefix) => value.startsWith(prefix))) {
+			error = 'This ID uses a reserved prefix'
 		} else if (reservedIds.some((rid) => rid === value)) {
 			error = 'This ID is already in use'
 		} else {
@@ -54,7 +58,7 @@
 	let inputDiv: HTMLInputElement | undefined = $state(undefined)
 
 	$effect(() => {
-		untrack(() => validateId(value, reservedIds))
+		validateId(value, reservedIds, reservedPrefixes)
 	})
 	$effect(() => {
 		inputDiv?.focus()
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte
index 9caf4861ac..80acbfe23c 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte
@@ -44,6 +44,7 @@
 				onChange(e)
 				onClose?.()
 			}}
+			reservedPrefixes={['bg_', 'unused-']}
 			{reservedIds}
 		/>
 	{/snippet}