[Claude PR] Fix incorrect $props generic syntax in Svelte 5 components (#5975)

* fix: correct $props generic syntax in Svelte 5 components

Replace incorrect `$props<T>()` syntax with correct `let x: T = $props()` syntax
to ensure proper TypeScript typing instead of falling back to `any` types.

This affects 11 Svelte 5 components throughout the frontend codebase.

Fixes #5974

Co-authored-by: Diego Imbert <diegoimbert@users.noreply.github.com>

* fix claude pr

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Diego Imbert <diegoimbert@users.noreply.github.com>
Co-authored-by: Diego Imbert <diego@windmill.dev>
Co-authored-by: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>

frontend/src/lib/components/DeployButton.svelte

@@ -8,7 +8,7 @@
 		loadingSave = false,
 		newFlow = false,
 		dropdownItems = []
-	} = $props<{
+	}: {
 		loading?: boolean
 		loadingSave?: boolean
 		newFlow?: boolean
@@ -16,7 +16,7 @@
 			label: string
 			onClick: () => void
 		}>
-	}>()
+	} = $props()
 
 	const dispatch = createEventDispatcher()
 

frontend/src/lib/components/SimpleEditor.svelte

@@ -115,7 +115,7 @@
 		tailwindClasses = [],
 		class: className = '',
 		loadAsync = false
-	} = $props<{
+	}: {
 		lang: string
 		code?: string
 		hash?: string
@@ -137,7 +137,7 @@
 		tailwindClasses?: string[]
 		class?: string
 		loadAsync?: boolean
-	}>()
+	} = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -343,7 +343,7 @@
 		// 	})
 		// }
 		try {
-			model = meditor.createModel(code, lang, mUri.parse(uri))
+			model = meditor.createModel(code ?? '', lang, mUri.parse(uri))
 		} catch (err) {
 			console.log('model already existed', err)
 			const nmodel = meditor.getModel(mUri.parse(uri))
@@ -361,7 +361,7 @@
 		}
 		try {
 			editor = meditor.create(divEl as HTMLDivElement, {
-				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
+				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets),
 				model,
 				lineDecorationsWidth: 6,
 				lineNumbersMinChars: 2,
@@ -546,7 +546,7 @@
 		})
 	}
 
-	let previousExtraLib = undefined
+	let previousExtraLib: string | undefined = undefined
 	function loadExtraLib() {
 		if (lang == 'javascript') {
 			const stdLib = { content: libStdContent, filePath: 'es6.d.ts' }
@@ -609,11 +609,11 @@
 		}
 	}
 
-	updatePlaceholderVisibility(code)
+	updatePlaceholderVisibility(code ?? '')
 </script>
 
 <EditorTheme />
-{#if editor && suggestion && code.length === 0}
+{#if editor && suggestion && code?.length === 0}
 	<div
 		class="absolute top-[0.05rem] left-[2.05rem] z-10 text-sm text-[#0007] italic font-mono dark:text-[#ffffff56] text-ellipsis overflow-hidden whitespace-nowrap"
 		style={`max-width: calc(${width}px - 2.05rem)`}

frontend/src/lib/components/TriggerableByAI.svelte

@@ -7,13 +7,13 @@
 		onTrigger,
 		children,
 		showAnimation = true
-	} = $props<{
+	}: {
 		id: string | undefined
 		description: string | undefined
 		onTrigger?: (value?: string) => void // Function to call when the trigger is activated, if not provided, the component is discoverable for information purposes only
 		children?: () => any
 		showAnimation?: boolean
-	}>()
+	} = $props()
 
 	let isAnimating = $state(false)
 

frontend/src/lib/components/WorkerTagSelect.svelte

@@ -10,12 +10,12 @@
 		noLabel = false,
 		nullTag = undefined,
 		disabled = false
-	} = $props<{
+	}: {
 		tag: string | undefined
 		noLabel?: boolean
 		nullTag?: string | undefined
 		disabled?: boolean
-	}>()
+	} = $props()
 
 	loadWorkerGroups()
 

frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte

@@ -7,11 +7,11 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 
-	let { id, configuration, render } = $props<{
+	let { id, configuration, render }: {
 		id: string
 		configuration: RichConfigurations
 		render: boolean
-	}>()
+	} = $props()
 
 	const { componentControl, worldStore, selectedComponent, connectingInput, mode } =
 		getContext<AppViewerContext>('AppViewerContext')

frontend/src/lib/components/apps/editor/settingsPanel/EventHandlerItem.svelte

@@ -5,12 +5,12 @@
 	import { twMerge } from 'tailwind-merge'
 
 
-	let { items, value = $bindable(), title, tooltip } = $props<{
+	let { items, value = $bindable(), title, tooltip }: {
 		items: string[]
 		value: string[] | undefined
 		title: string
 		tooltip: string
-	}>()
+	} = $props()
 
 	let width = $state(0)
 	const inputWidth = 280

frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte

@@ -5,10 +5,10 @@
 	import { WorkerService } from '$lib/gen'
 	import WorkerTagSelect from '$lib/components/WorkerTagSelect.svelte'
 
-	let { tag = $bindable(), nullTag = $bindable() } = $props<{
+	let { tag = $bindable(), nullTag = $bindable() }: {
 		tag: string | undefined
 		nullTag?: string | undefined
-	}>()
+	} = $props()
 
 	const { flowStore, selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 

frontend/src/lib/components/multiselect/MultiSelectWrapper.svelte

@@ -14,14 +14,14 @@
 		target = undefined,
 		topPlacement = false,
 		allowUserOptions = undefined
-	} = $props<{
+	}: {
 		items: any[]
 		value?: string[]
 		placeholder?: string
 		target?: string | HTMLElement
 		topPlacement?: boolean
 		allowUserOptions?: boolean | 'append'
-	}>()
+	} = $props()
 
 	$effect.pre(() => {
 		if (value === undefined) value = []
@@ -72,7 +72,7 @@
 				--sms-selected-bg={darkMode ? '#c7d2fe' : '#e0e7ff'}
 				--sms-selected-text-color={darkMode ? '#312e81' : '#3730a3'}
 				bind:selected={
-					() => [...value],
+					() => [...(value ?? [])],
 					(newVal) => {
 						if (!deepEqual(value, newVal)) {
 							value = newVal

frontend/src/lib/components/scripts/CreateActionsScript.svelte

@@ -3,7 +3,7 @@
 	import Button from '../common/button/Button.svelte'
 	import { base } from '$lib/base'
 
-	let { aiId, aiDescription } = $props<{ aiId: string; aiDescription: string }>()
+	let { aiId, aiDescription }: { aiId: string; aiDescription: string } = $props()
 </script>
 
 <!-- Buttons -->

frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte

@@ -7,7 +7,7 @@
 	import { Pen } from 'lucide-svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 
-	let { open = false } = $props<{ open?: boolean }>()
+	let { open = false }: { open?: boolean } = $props()
 
 	let colorEnabled = $state(false)
 	let editingColor = $state<string | undefined>(undefined)

frontend/src/lib/components/settings/ChangeWorkspaceName.svelte

@@ -7,7 +7,7 @@
 	import { Pen } from 'lucide-svelte'
 	import { untrack } from 'svelte'
 
-	let { open = false } = $props<{ open?: boolean }>()
+	let { open = false }: { open?: boolean } = $props()
 
 	let newName = $state('')
 	let currentName = $state('')