refactor: migrate on: event directives to svelte 5 syntax

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AIProviderPicker.svelte

@@ -166,7 +166,7 @@
 	<!-- Provider Selection -->
 	<ToggleButtonGroup
 		selected={value?.kind}
-		onSelected={onProviderChange}
+		onselected={onProviderChange}
 		{disabled}
 		wrap
 		tabListClass="w-full"
@@ -232,7 +232,7 @@
 				bind:checked={useAsDefault}
 				options={{ right: 'Use as personal default for other new agents' }}
 				size="xs"
-				on:change={(e) => {
+				onchange={(e) => {
 					if (!e.detail) {
 						removeConfig()
 					} else {

frontend/src/lib/components/AddUser.svelte

@@ -11,6 +11,13 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { UserPlus } from 'lucide-svelte'
 
+	interface Props {
+		onnew?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	const dispatch = createEventDispatcher()
 
 	let email: string | undefined = $state()
@@ -117,7 +124,7 @@
 			<Button
 				variant="accent"
 				size="sm"
-				on:click={() => {
+				onclick={() => {
 					addUser().then(() => {
 						// @ts-ignore
 						email = undefined

frontend/src/lib/components/ApiConnectForm.svelte

@@ -143,7 +143,7 @@
 {#if !notFound}
 	<div class="w-full flex gap-2 flex-row-reverse items-center">
 		<Toggle
-			on:change={(e) => switchTab(e.detail)}
+			onchange={(e) => switchTab(e)}
 			options={{
 				right: 'As JSON'
 			}}
@@ -174,7 +174,7 @@
 									size="xs"
 									color="blue"
 									buttonType="button"
-									on:click={() => {
+									onclick={() => {
 										parseConnectionString(close)
 									}}
 									disabled={connectionString.length <= 0}

frontend/src/lib/components/AppConnectDrawer.svelte

@@ -9,9 +9,11 @@
 	interface Props {
 		expressOAuthSetup?: boolean
 		onclose?: (...args: any[]) => any
+		onrefresh?: (...args: any[]) => any
 	}
 
-	let { expressOAuthSetup = false, onclose = undefined }: Props = $props()
+	let { expressOAuthSetup = false, onclose = undefined,
+		onrefresh = undefined }: Props = $props()
 
 	let drawer: Drawer | undefined = $state()
 	let resourceType = $state('')
@@ -44,7 +46,7 @@
 
 <Drawer
 	bind:this={drawer}
-	on:close={() => {
+	onclose={() => {
 		step = 1
 		dispatch('close')
 		onclose?.()
@@ -54,7 +56,7 @@
 	<DrawerContent
 		title="Add a resource"
 		id="add-resource-drawer"
-		on:close={drawer.closeDrawer}
+		onclose={drawer.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 	>
@@ -65,14 +67,14 @@
 			bind:isGoogleSignin
 			bind:disabled
 			bind:manual
-			on:close={drawer?.closeDrawer}
-			on:refresh
+			onclose={drawer?.closeDrawer}
+			onrefresh={onrefresh}
 			express={expressOAuthSetup}
 		/>
 		{#snippet actions()}
 			<div class="flex gap-1">
 				{#if step > 1}
-					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
+					<Button variant="default" onclick={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
 					<button {disabled} onclick={appConnectInner?.next}>
@@ -83,7 +85,7 @@
 						/>
 					</button>
 				{:else}
-					<Button variant="accent" {disabled} on:click={appConnectInner?.next ?? (() => {})}>
+					<Button variant="accent" {disabled} onclick={appConnectInner?.next ?? (() => {})}>
 						{#if step == 2 && !manual}
 							Connect
 						{:else if step == 1}

frontend/src/lib/components/AppConnectInner.svelte

@@ -580,7 +580,7 @@
 						unifiedSize="md"
 						variant="default"
 						selected={key === resourceType}
-						on:click={() => {
+						onclick={() => {
 							manual = false
 							resourceType = key
 							next()
@@ -620,7 +620,7 @@
 							unifiedSize="md"
 							variant="default"
 							selected={key === resourceType}
-							on:click={() => {
+							onclick={() => {
 								manual = true
 								resourceType = key
 								next()
@@ -642,7 +642,7 @@
 							variant="default"
 							color={key === resourceType ? 'blue' : 'light'}
 							btnClasses={key === resourceType ? '!border-2' : 'm-[1px]'}
-							on:click={() => {
+							onclick={() => {
 								manual = true
 								resourceType = key
 								next()

frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte

@@ -9,9 +9,13 @@
 		resourceType?: string | undefined
 		workspace: string
 		express?: boolean
+		onerror?: (...args: any[]) => any
+		onrefresh?: (...args: any[]) => any
 	}
 
-	let { resourceType = $bindable(undefined), workspace, express = false }: Props = $props()
+	let { resourceType = $bindable(undefined), workspace, express = false,
+		onerror = undefined,
+		onrefresh = undefined }: Props = $props()
 
 	let step = $state(1)
 	let disabled = $state(false)
@@ -39,10 +43,10 @@
 		<div class="flex flex-row-reverse w-full pb-2">
 			<div class="flex gap-2">
 				{#if step > 2}
-					<Button variant="default" on:click={appConnect?.back ?? (() => {})}>Back</Button>
+					<Button variant="default" onclick={appConnect?.back ?? (() => {})}>Back</Button>
 				{/if}
 
-				<Button variant="accent" {disabled} on:click={appConnect?.next ?? (() => {})}>
+				<Button variant="accent" {disabled} onclick={appConnect?.next ?? (() => {})}>
 					{#if step == 2 && !manual}
 						Connect
 					{:else if step == 1}
@@ -61,7 +65,7 @@
 		bind:resourceType
 		bind:disabled
 		bind:manual
-		on:error
-		on:refresh
+		onerror={onerror}
+		onrefresh={onrefresh}
 	/>
 </div>

frontend/src/lib/components/AppTutorials.svelte

@@ -3,6 +3,13 @@
 	import BackgroundRunnablesTutorial from './tutorials/app/BackgroundRunnablesTutorial.svelte'
 	import ConnectionTutorial from './tutorials/app/ConnectionTutorial.svelte'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+		onerror?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	let tutorialRouter: TutorialRouter | undefined = $state(undefined)
 
 	export function runTutorialById(id: string, options?: { skipStepsCount?: number }) {

frontend/src/lib/components/ArgInfo.svelte

@@ -36,10 +36,10 @@
 </script>
 
 <Drawer bind:this={jsonViewer} size="800px">
-	<DrawerContent title="Argument Details" on:close={jsonViewer.closeDrawer}>
+	<DrawerContent title="Argument Details" onclose={jsonViewer.closeDrawer}>
 		{#snippet actions()}
 			<Button
-				on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
+				onclick={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
 				variant="subtle"
 				unifiedSize="md"
 				startIcon={{ icon: ClipboardCopy }}

frontend/src/lib/components/ArgInput.svelte

@@ -654,7 +654,7 @@
 			<div class="ml-auto flex gap-2">
 				{#if displayJsonToggleHeader}
 					<Toggle
-						on:change={(e) => {
+						onchange={(e) => {
 							// Once the user has changed the input type, we should not change it back automatically
 							if (!hasIsListJsonChanged) {
 								hasIsListJsonChanged = true
@@ -745,7 +745,7 @@
 		{:else if inputCat == 'boolean'}
 			<div class="w-full">
 				<Toggle
-					on:pointerdown={(e) => {
+					onpointerdown={(e) => {
 						e?.stopPropagation()
 					}}
 					{disabled}
@@ -791,7 +791,7 @@
 					editTab="inputEditor"
 					noPreview
 					addPropertyInEditorTab
-					on:delete={(e) => {
+					ondelete={(e) => {
 						// Handle property deletion
 						if (value && value.properties && value.properties[e.detail]) {
 							delete value.properties[e.detail]
@@ -926,11 +926,11 @@
 												{:else if Array.isArray(itemsType?.enum)}
 													<ArgEnum
 														create={extra['disableCreate'] != true}
-														on:focus={() => {
+														onfocus={() => {
 															dispatch('focus')
 															onfocus?.()
 														}}
-														on:blur={(e) => {
+														onblur={(e) => {
 															dispatch('blur')
 															onblur?.()
 														}}
@@ -962,11 +962,11 @@
 													{:then Module}
 														<Module.default
 															bind:editor
-															on:focus={(e) => {
+															onfocus={(e) => {
 																dispatch('focus')
 																onfocus?.()
 															}}
-															on:blur={(e) => {
+															onblur={(e) => {
 																dispatch('blur')
 																onblur?.()
 															}}
@@ -1023,7 +1023,7 @@
 							color="light"
 							size="xs"
 							wrapperClasses="w-full {Array.isArray(value) && value.length > 0 ? 'mt-1.5' : ''}"
-							on:click={() => {
+							onclick={() => {
 								if (value == undefined || !Array.isArray(value)) {
 									value = []
 								}
@@ -1053,7 +1053,7 @@
 				{#if !displayHeader}
 					<div class="block mt-2 pl-2">
 						<Toggle
-							on:change={(e) => {
+							onchange={(e) => {
 								// Once the user has changed the input type, we should not change it back automatically
 								if (!hasIsListJsonChanged) {
 									hasIsListJsonChanged = true
@@ -1098,7 +1098,7 @@
 							selected={oneOfSelected}
 							wrap
 							class="mb-4"
-							on:selected={({ detail }) => {
+							onselected={(detail) => {
 								oneOfSelected = detail
 								const selectedObjProperties =
 									oneOf?.find((o) => o.title == detail)?.properties ?? {}
@@ -1161,13 +1161,13 @@
 													? 'kind'
 													: 'label'
 											]}
-											on:reorder={(e) => {
+											onreorder={(e) => {
 												if (oneOf && oneOf[objIdx]) {
 													const keys = e.detail
 													oneOf[objIdx].order = keys
 												}
 											}}
-											on:nestedChange
+											onnestedChange={onnestedChange}
 											{shouldDispatchChanges}
 										/>
 									{:else}
@@ -1194,11 +1194,11 @@
 												}
 											}
 											{shouldDispatchChanges}
-											on:change={() => {
+											onchange={() => {
 												dispatch('nestedChange')
 												onnestedChange?.()
 											}}
-											on:nestedChange
+											onnestedChange={onnestedChange}
 										/>
 									{/if}
 								{/key}
@@ -1218,16 +1218,16 @@
 								{:then Module}
 									<Module.default
 										bind:editor
-										on:focus={(e) => {
+										onfocus={(e) => {
 											dispatch('focus')
 											onfocus?.()
 										}}
-										on:blur={(e) => {
+										onblur={(e) => {
 											dispatch('blur')
 											onblur?.()
 										}}
 										code={rawValue}
-										on:changeValue={(e) => {
+										onchangeValue={(e) => {
 											setNewValueFromCode(e.detail)
 										}}
 									/>
@@ -1242,16 +1242,16 @@
 						{:then Module}
 							<Module.default
 								bind:editor
-								on:focus={(e) => {
+								onfocus={(e) => {
 									dispatch('focus')
 									onfocus?.()
 								}}
-								on:blur={(e) => {
+								onblur={(e) => {
 									dispatch('blur')
 									onblur?.()
 								}}
 								code={rawValue}
-								on:change={(e) => {
+								onchange={(e) => {
 									value = e.detail
 								}}
 							/>
@@ -1276,20 +1276,20 @@
 								order
 							}}
 							bind:args={value}
-							on:reorder={(e) => {
+							onreorder={(e) => {
 								const keys = e.detail
 								order = keys
 							}}
 							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
-							on:acceptChange={(e) => {
+							onacceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
 								onacceptChange?.(e.detail)
 							}}
-							on:rejectChange={(e) => {
+							onrejectChange={(e) => {
 								dispatch('rejectChange', e.detail)
 								onrejectChange?.(e.detail)
 							}}
-							on:nestedChange
+							onnestedChange={onnestedChange}
 							nestedParent={{ label, nestedParent }}
 							{shouldDispatchChanges}
 						/>
@@ -1311,19 +1311,19 @@
 							bind:args={value}
 							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
 							nestedParent={{ label, nestedParent }}
-							on:acceptChange={(e) => {
+							onacceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
 								onacceptChange?.(e.detail)
 							}}
-							on:rejectChange={(e) => {
+							onrejectChange={(e) => {
 								dispatch('rejectChange', e.detail)
 								onrejectChange?.(e.detail)
 							}}
-							on:change={() => {
+							onchange={() => {
 								dispatch('nestedChange')
 								onnestedChange?.()
 							}}
-							on:nestedChange
+							onnestedChange={onnestedChange}
 							{shouldDispatchChanges}
 						/>
 					{/if}
@@ -1336,16 +1336,16 @@
 				{:then Module}
 					<Module.default
 						bind:editor
-						on:focus={(e) => {
+						onfocus={(e) => {
 							dispatch('focus')
 							onfocus?.()
 						}}
-						on:blur={(e) => {
+						onblur={(e) => {
 							dispatch('blur')
 							onblur?.()
 						}}
 						code={rawValue}
-						on:changeValue={(e) => {
+						onchangeValue={(e) => {
 							setNewValueFromCode(e.detail)
 						}}
 					/>
@@ -1354,7 +1354,7 @@
 			{#if inputCat == 'list' && !displayHeader}
 				<div class="block mt-2.5 pl-2">
 					<Toggle
-						on:change={(e) => {
+						onchange={(e) => {
 							isListJson = !isListJson
 						}}
 						checked={isListJson}
@@ -1378,11 +1378,11 @@
 					bind:value
 					{enum_}
 					{autofocus}
-					on:focus={() => {
+					onfocus={() => {
 						dispatch('focus')
 						onfocus?.()
 					}}
-					on:blur={(e) => {
+					onblur={(e) => {
 						dispatch('blur')
 						onblur?.()
 					}}
@@ -1406,15 +1406,15 @@
 						<Loader2 class="animate-spin" />
 					{:then Module}
 						<Module.default
-							on:focus={(e) => {
+							onfocus={(e) => {
 								dispatch('focus')
 								onfocus?.()
 							}}
-							on:blur={(e) => {
+							onblur={(e) => {
 								dispatch('blur')
 								onblur?.()
 							}}
-							on:change={(e) => {
+							onchange={(e) => {
 								setNewValueFromCode(e.detail?.code)
 							}}
 							bind:this={editor}

frontend/src/lib/components/ArrayTypeNarrowing.svelte

@@ -156,7 +156,7 @@
 				<Button
 					variant="default"
 					size="sm"
-					on:click={() => {
+					onclick={() => {
 						if (itemsType?.enum) {
 							let enum_ = itemsType.enum
 							let choice = `choice ${enum_?.length ? enum_?.length + 1 : 1}`
@@ -170,7 +170,7 @@
 					variant="default"
 					size="sm"
 					btnClasses="ml-2"
-					on:click={() => itemsType?.enum && (itemsType.enum = undefined)}
+					onclick={() => itemsType?.enum && (itemsType.enum = undefined)}
 				>
 					Clear
 				</Button>

frontend/src/lib/components/AssignableTags.svelte

@@ -10,9 +10,11 @@
 		placement?: 'bottom-end' | 'top-end'
 		variant?: 'default' | 'accent'
 		disabled?: boolean
+		onrefresh?: (...args: any[]) => any
 	}
 
-	let { placement = 'bottom-end', variant = 'default', disabled = false }: Props = $props()
+	let { placement = 'bottom-end', variant = 'default', disabled = false,
+		onrefresh = undefined }: Props = $props()
 </script>
 
 <Popover
@@ -34,6 +36,6 @@
 		</Button>
 	{/snippet}
 	{#snippet content()}
-		<AssignableTagsInner on:refresh />
+		<AssignableTagsInner onrefresh={onrefresh} />
 	{/snippet}
 </Popover>

frontend/src/lib/components/Auth0Setting.svelte

@@ -49,7 +49,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="auth0" after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '', domain: '', custom: false }
 				} else {
@@ -65,7 +65,7 @@
 					<div>
 						<ToggleButtonGroup
 							selected={value['custom'] ? 'custom' : 'org'}
-							on:selected={({ detail }) => {
+							onselected={(detail) => {
 								value['custom'] = detail === 'custom'
 							}}
 						>

frontend/src/lib/components/AuthSettings.svelte

@@ -470,7 +470,7 @@
 													'Allow workspace admins to setup Google native triggers using these credentials'
 											}}
 											checked={oauths[k]?.share_with_workspaces ?? false}
-											on:change={(e) => {
+											onchange={(e) => {
 												if (oauths && oauths[k]) {
 													oauths[k] = { ...oauths[k], share_with_workspaces: e.detail }
 												}

frontend/src/lib/components/AutheliaSetting.svelte

@@ -44,7 +44,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'authelia'} after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '' }
 				} else {

frontend/src/lib/components/AuthentikSetting.svelte

@@ -44,7 +44,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'authentik'} after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '' }
 				} else {

frontend/src/lib/components/AutoscalingConfigEditor.svelte

@@ -74,7 +74,7 @@
 				checked={config?.enabled ?? false}
 				options={{ right: 'Enabled' }}
 				{disabled}
-				on:change={(e) => {
+				onchange={(e) => {
 					if (e.detail) {
 						collapsed = false
 						if (!config) {

frontend/src/lib/components/AutoscalingEvents.svelte

@@ -56,7 +56,7 @@
 				}}
 				variant="subtle"
 				unifiedSize="sm"
-				on:click={() => loadEvents()}
+				onclick={() => loadEvents()}
 				iconOnly
 			/>
 		{/if}
@@ -98,7 +98,7 @@
 
 			{#if events.length >= limit && limit < 100}
 				<div class="flex">
-					<Button variant="subtle" unifiedSize="sm" on:click={() => (limit = limit + 25)}>
+					<Button variant="subtle" unifiedSize="sm" onclick={() => (limit = limit + 25)}>
 						Show more
 					</Button>
 				</div>

frontend/src/lib/components/BedrockCredentialsCheck.svelte

@@ -166,7 +166,7 @@
 <div class="flex flex-col gap-3 p-3 border rounded-md bg-surface-secondary">
 	<div class="flex items-center justify-between">
 		<h4 class="text-sm font-semibold">AWS Environment Credentials Check</h4>
-		<Button size="xs" variant="border" on:click={checkBoth} disabled={isChecking}>
+		<Button size="xs" variant="border" onclick={checkBoth} disabled={isChecking}>
 			{#if isChecking}
 				<LoaderCircle class="animate-spin mr-1.5 h-3.5 w-3.5" />
 			{/if}

frontend/src/lib/components/ChangeInstanceUsername.svelte

@@ -8,9 +8,11 @@
 		email: string
 		username: string
 		isConflict?: boolean
+		onrenamed?: (...args: any[]) => any
 	}
 
-	let { email, username, isConflict = false }: Props = $props()
+	let { email, username, isConflict = false,
+		onrenamed = undefined }: Props = $props()
 </script>
 
 <Popover
@@ -33,8 +35,8 @@
 			{email}
 			{username}
 			{isConflict}
-			on:close={() => close()}
-			on:renamed
+			onclose={() => close()}
+			onrenamed={onrenamed}
 		/>
 	{/snippet}
 </Popover>

frontend/src/lib/components/ChangeInstanceUsernameInner.svelte

@@ -136,7 +136,7 @@
 	<Button
 		variant="default"
 		unifiedSize="md"
-		on:click={() => {
+		onclick={() => {
 			renameUser().then(() => {
 				dispatch('close')
 				onclose?.()

frontend/src/lib/components/CompareWorkspaces.svelte

@@ -723,7 +723,7 @@
 						<ToggleButtonGroup
 							disabled={deploying}
 							selected="deploy_to"
-							onSelected={toggleDeploymentDirection}
+							onselected={toggleDeploymentDirection}
 							noWFull
 						>
 							{#snippet children({ item })}
@@ -960,7 +960,7 @@
 									(mergeIntoParent && !canDeployToParent) ||
 									hasUnselectedOnBehalfOf}
 								loading={deploying}
-								on:click={deployChanges}
+								onclick={deployChanges}
 							>
 								{mergeIntoParent ? 'Deploy' : 'Update'}
 								{selectedItems.length} Item{selectedItems.length !== 1 ? 's' : ''}
@@ -1080,8 +1080,8 @@
 		title="Delete trigger"
 		confirmationText="Delete"
 		open={!!triggerToDelete}
-		onConfirmed={confirmDeleteTrigger}
-		onCanceled={() => (triggerToDelete = undefined)}
+		onconfirmed={confirmDeleteTrigger}
+		oncanceled={() => (triggerToDelete = undefined)}
 	>
 		{#if triggerToDelete}
 			Are you sure you want to delete the {getTriggerDisplayName(triggerToDelete.triggerKind)} trigger

frontend/src/lib/components/ConnectionSection.svelte

@@ -170,7 +170,7 @@
 			bind:itemKind
 			bind:scriptPath
 			{initialPath}
-			on:select={onSelect}
+			onselect={onSelect}
 			disabled={!teamName || (!$enterpriseLicense && platform === 'teams')}
 			clearable
 		/>

frontend/src/lib/components/ContentSearchInner.svelte

@@ -247,13 +247,13 @@
 						<ContentSearchInnerItem
 							title={`Script: ${item.path}`}
 							href={`/scripts/get/${item.path}`}
-							on:close
+							onclose={onclose}
 						>
 							{#snippet actions()}
 								<Button
 									href={`/scripts/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => (dispatch('close'), onclose?.())}
+									onclick={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -274,7 +274,7 @@
 					{#if filteredScriptItems.length > showNbScripts}
 						<Button
 							color="light"
-							on:click={() => (showNbScripts += 30)}
+							onclick={() => (showNbScripts += 30)}
 							startIcon={{ icon: ArrowDown }}
 						>
 							Show more scripts ({showNbScripts} of {filteredScriptItems.length})
@@ -286,7 +286,7 @@
 						<ContentSearchInnerItem
 							title={`Resource: ${item.path}`}
 							href={`/resources#${item.path}`}
-							on:close
+							onclose={onclose}
 						>
 							{#snippet actions()}
 								<Button href={`/resources#${item.path}`} target="_blank" startIcon={{ icon: Edit }}>
@@ -302,7 +302,7 @@
 						<Button
 							color="light"
 							size="xs"
-							on:click={() => (showNbResources += 30)}
+							onclick={() => (showNbResources += 30)}
 							startIcon={{ icon: ArrowDown }}
 						>
 							Show more resources ({showNbResources} of {filteredResourceItems.length})
@@ -314,13 +314,13 @@
 						<ContentSearchInnerItem
 							title={`Flow: ${item.path}`}
 							href={`/flows/get/${item.path}`}
-							on:close
+							onclose={onclose}
 						>
 							{#snippet actions()}
 								<Button
 									href={`/flows/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => (dispatch('close'), onclose?.())}
+									onclick={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -342,7 +342,7 @@
 						<Button
 							color="light"
 							size="xs"
-							on:click={() => (showNbFlows += 30)}
+							onclick={() => (showNbFlows += 30)}
 							startIcon={{ icon: ArrowDown }}
 						>
 							Show more flows ({showNbFlows} of {filteredFlowItems.length})
@@ -354,13 +354,13 @@
 						<ContentSearchInnerItem
 							title={`App: ${item.path}`}
 							href={`/apps/get/${item.path}`}
-							on:close
+							onclose={onclose}
 						>
 							{#snippet actions()}
 								<Button
 									href={`/apps/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => (dispatch('close'), onclose?.())}
+									onclick={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -382,7 +382,7 @@
 						<Button
 							color="light"
 							size="xs"
-							on:click={() => (showNbApps += 30)}
+							onclick={() => (showNbApps += 30)}
 							startIcon={{ icon: ArrowDown }}
 						>
 							Show more apps ({showNbApps} of {filteredAppItems.length})

frontend/src/lib/components/ContextualVariableEditor.svelte

@@ -11,6 +11,12 @@
 	import Label from './Label.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 
+	interface Props {
+		onupdate?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	const dispatch = createEventDispatcher()
 
 	let edit: boolean = $state(false)
@@ -58,7 +64,7 @@
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update contextual variable ${name}` : 'Create a contextual variable'}
-		on:close={drawer?.closeDrawer}
+		onclose={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !edit}
@@ -76,7 +82,7 @@
 		</div>
 		{#snippet actions()}
 			<Button
-				on:click={() => updateVariable()}
+				onclick={() => updateVariable()}
 				disabled={value === '' || name === ''}
 				startIcon={{ icon: Save }}
 				variant="accent"

frontend/src/lib/components/CronInput.svelte

@@ -389,7 +389,7 @@
 				<Button
 					variant="accent"
 					size="xs"
-					on:click={() => {
+					onclick={() => {
 						schedule = nschedule
 						close()
 					}}

frontend/src/lib/components/DBManager.svelte

@@ -512,7 +512,7 @@
 		</div>
 		{#if !multiSelectMode}
 			<Button
-				on:click={() => (dbTableEditorState = { open: true })}
+				onclick={() => (dbTableEditorState = { open: true })}
 				wrapperClasses="mx-2 my-2 text-sm"
 				startIcon={{ icon: Plus }}
 				variant={tableKeys.length === 0 ? 'accent' : 'default'}
@@ -532,19 +532,19 @@
 <Portal>
 	<ConfirmationModal
 		{...askingForConfirmation ?? { confirmationText: '', title: '' }}
-		on:canceled={() => (askingForConfirmation = undefined)}
-		on:confirmed={askingForConfirmation?.onConfirm ?? (() => {})}
+		oncanceled={() => (askingForConfirmation = undefined)}
+		onconfirmed={askingForConfirmation?.onConfirm ?? (() => {})}
 	/>
 </Portal>
 
 <Drawer
 	size="600px"
 	open={dbTableEditorState.open}
-	on:close={() => (dbTableEditorState = { open: false })}
+	onclose={() => (dbTableEditorState = { open: false })}
 >
 	<DrawerContent
 		id="db-table-editor-drawer"
-		on:close={() => (dbTableEditorState = { open: false })}
+		onclose={() => (dbTableEditorState = { open: false })}
 		title={dbTableEditorState.alterTableKey
 			? `Alter ${dbTableEditorState.alterTableKey}`
 			: 'Create a new table'}
@@ -621,13 +621,13 @@
 <Drawer
 	size="400px"
 	open={newSchemaDialogOpen}
-	on:close={() => {
+	onclose={() => {
 		newSchemaDialogOpen = false
 		newSchemaName = ''
 	}}
 >
 	<DrawerContent
-		on:close={() => {
+		onclose={() => {
 			newSchemaDialogOpen = false
 			newSchemaName = ''
 		}}
@@ -642,7 +642,7 @@
 					bind:value={newSchemaName}
 					placeholder="Enter schema name..."
 					autofocus
-					on:keydown={(e) => {
+					onkeydown={(e) => {
 						if (e.key === 'Enter' && sanitizedNewSchemaName && !schemaAlreadyExists) {
 							askingForConfirmation = {
 								confirmationText: `Create ${sanitizedNewSchemaName}`,
@@ -681,7 +681,7 @@
 			<Button
 				color="blue"
 				disabled={!sanitizedNewSchemaName || schemaAlreadyExists}
-				on:click={() => {
+				onclick={() => {
 					askingForConfirmation = {
 						confirmationText: `Create ${sanitizedNewSchemaName}`,
 						type: 'reload',

frontend/src/lib/components/DBManagerDrawer.svelte

@@ -96,11 +96,11 @@
 	size={expand ? `${windowWidth}px` : '1200px'}
 	preventEscape
 	{offset}
-	on:close={closeDrawer}
+	onclose={closeDrawer}
 >
 	<DrawerContent
 		title={hasReplResult ? 'Query Result' : 'Database Manager'}
-		on:close={() => {
+		onclose={() => {
 			if (hasReplResult) {
 				dbManagerContent?.clearReplResult()
 			} else {
@@ -138,7 +138,7 @@
 		{#snippet actions()}
 			<Button
 				loading={dbManagerContent?.isLoading() ?? false}
-				on:click={() => {
+				onclick={() => {
 					dbManagerContent?.refresh()
 					dbManagerContent?.dbManager()?.dbTable()?.refresh()
 				}}
@@ -150,7 +150,7 @@
 			</Button>
 
 			<Button
-				on:click={() => (expand = !expand)}
+				onclick={() => (expand = !expand)}
 				startIcon={{ icon: expand ? Minimize : Expand }}
 				size="xs"
 				color="light"

frontend/src/lib/components/DBSchemaExplorer.svelte

@@ -23,7 +23,7 @@
 	<ToggleButtonGroup
 		class="mb-4"
 		selected={dbSchema.publicOnly ? 'dbo' : 'all'}
-		on:selected={handleSelected}
+		onselected={handleSelected}
 	>
 		{#snippet children({ item })}
 			<ToggleButton value="dbo" label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} {item} />

frontend/src/lib/components/DBTable.svelte

@@ -194,7 +194,7 @@
 						startIcon={{ icon: Download }}
 						color="light"
 						size="xs2"
-						on:click={() => api?.exportDataAsCsv()}
+						onclick={() => api?.exportDataAsCsv()}
 						iconOnly
 					/>
 				</Popover>

frontend/src/lib/components/DBTableEditor.svelte

@@ -270,7 +270,7 @@
 									startIcon={{ icon: X }}
 									wrapperClasses="w-fit ml-2"
 									btnClasses="delete-column-btn p-0"
-									on:click={() => values.columns.splice(i, 1)}
+									onclick={() => values.columns.splice(i, 1)}
 								/>
 							</Cell>
 						</tr>
@@ -281,7 +281,7 @@
 								wrapperClasses="mx-auto"
 								startIcon={{ icon: Plus }}
 								color="light"
-								on:click={() => addColumn({ name: '' })}
+								onclick={() => addColumn({ name: '' })}
 							>
 								Add
 							</Button>
@@ -398,7 +398,7 @@
 														startIcon={{ icon: X }}
 														wrapperClasses="w-fit ml-2"
 														btnClasses="fk-delete-btn p-0"
-														on:click={foreignKey.columns.length > 1
+														onclick={foreignKey.columns.length > 1
 															? () => foreignKey.columns.splice(columnIndex, 1)
 															: () => values.foreignKeys.splice(foreignKeyIndex, 1)}
 													/>
@@ -421,7 +421,7 @@
 									wrapperClasses="mx-auto"
 									startIcon={{ icon: Plus }}
 									color="light"
-									on:click={() =>
+									onclick={() =>
 										values.foreignKeys.push({
 											columns: [{}],
 											onDelete: 'NO ACTION',
@@ -440,7 +440,7 @@
 	<Button
 		disabled={!!errors || btnProps.current.disabled}
 		loading={btnProps.pending}
-		on:click={() => {
+		onclick={() => {
 			let preview = computePreview?.({ values })
 			askingForConfirmation = {
 				onConfirm: async () => {
@@ -469,8 +469,8 @@
 	<ConfirmationModal
 		id="db-table-editor-confirmation-modal"
 		{...askingForConfirmation ?? { confirmationText: '', title: '' }}
-		on:canceled={() => (askingForConfirmation = undefined)}
-		on:confirmed={askingForConfirmation?.onConfirm ?? (() => {})}
+		oncanceled={() => (askingForConfirmation = undefined)}
+		onconfirmed={askingForConfirmation?.onConfirm ?? (() => {})}
 	>
 		{#if askingForConfirmation?.alert}
 			<Alert title={askingForConfirmation.alert.title} type="error" class="mb-2">
@@ -483,7 +483,7 @@
 					{askingForConfirmation.codeContent}
 				</code>
 				<Button
-					on:click={() => copyToClipboard(askingForConfirmation?.codeContent)}
+					onclick={() => copyToClipboard(askingForConfirmation?.codeContent)}
 					size="xs"
 					startIcon={{ icon: ClipboardCopy }}
 					color="none"

frontend/src/lib/components/DateTimeInput.svelte

@@ -180,7 +180,7 @@
 					}
 				]
 			: undefined}
-		on:click={() => {
+		onclick={() => {
 			setTimeLater(0)
 		}}
 	>
@@ -194,7 +194,7 @@
 			{disabled}
 			iconOnly
 			endIcon={{ icon: X }}
-			on:click={() => {
+			onclick={() => {
 				value = null
 				dispatch('clear')
 				onclear?.()

frontend/src/lib/components/DedicatedWorkersSelector.svelte

@@ -522,14 +522,14 @@
 							>
 							{#if !loading && runnables.length > 0}
 								<div class="flex gap-1">
-									<Button size="xs2" color="light" on:click={selectAll} {disabled}>All</Button>
-									<Button size="xs2" color="light" on:click={deselectAll} {disabled}>None</Button>
+									<Button size="xs2" color="light" onclick={selectAll} {disabled}>All</Button>
+									<Button size="xs2" color="light" onclick={deselectAll} {disabled}>None</Button>
 									<Button
 										size="xs2"
 										color="light"
 										iconOnly
 										startIcon={{ icon: RefreshCcw }}
-										on:click={() => selectedWorkspace && loadRunnables(selectedWorkspace)}
+										onclick={() => selectedWorkspace && loadRunnables(selectedWorkspace)}
 										{disabled}
 									/>
 								</div>

frontend/src/lib/components/DefaultScripts.svelte

@@ -19,11 +19,11 @@
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
 	<Drawer bind:this={drawer} {placement}>
-		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
+		<DrawerContent title="Edit Default Scripts" onclose={drawer.closeDrawer}>
 			<DefaultScriptsInner />
 		</DrawerContent>
 	</Drawer>
-	<Button on:click={drawer?.openDrawer} startIcon={{ icon: SettingsIcon }} variant="subtle" {size}>
+	<Button onclick={drawer?.openDrawer} startIcon={{ icon: SettingsIcon }} variant="subtle" {size}>
 		{noText ? '' : 'defaults'}
 	</Button>
 {/if}

frontend/src/lib/components/DefaultScriptsInner.svelte

@@ -73,7 +73,7 @@
 					size="xs"
 					color="red"
 					checked={$defaultScripts?.hidden?.includes(lang)}
-					on:change={(e) => {
+					onchange={(e) => {
 						let toggled = e.detail
 						if (toggled) {
 							defaultScripts.update((s) => ({

frontend/src/lib/components/DefaultTagsInner.svelte

@@ -97,7 +97,7 @@
 			<Button
 				variant="accent"
 				unifiedSize="md"
-				on:click={handleSave}
+				onclick={handleSave}
 				startIcon={{ icon: Save }}
 				disabled={!hasChanges || !$enterpriseLicense || !$superadmin}
 			>

frontend/src/lib/components/DependenciesDeploymentWarning.svelte

@@ -184,8 +184,8 @@
 	{title}
 	confirmationText={confirmText}
 	type={isUnnamedDefault ? 'danger' : undefined}
-	onConfirmed={handleConfirm}
-	onCanceled={handleCancel}
+	onconfirmed={handleConfirm}
+	oncanceled={handleCancel}
 >
 	{#if loading}
 		<div class="flex items-center gap-2">

frontend/src/lib/components/DeployButton.svelte

@@ -34,7 +34,7 @@
 	variant="accent"
 	unifiedSize="md"
 	startIcon={{ icon: Save }}
-	on:click={() => (dispatch('save'), onsave?.())}
+	onclick={() => (dispatch('save'), onsave?.())}
 	dropdownItems={!newFlow ? dropdownItems : undefined}
 	tooltipPopover={{
 		placement: 'bottom-end',
@@ -42,7 +42,7 @@
 		closeDelay: 0,
 		portal: 'body'
 	}}
-	on:tooltipOpen={async ({ detail }) => {
+	ontooltipOpen={async ({ detail }) => {
 		if (detail) {
 			// Use setTimeout to ensure DOM is updated
 			setTimeout(() => {
@@ -54,7 +54,7 @@
 		}
 	}}
 	{hideDropdown}
-	on:dropdownOpen={({ detail }) => {
+	ondropdownOpen={(detail) => {
 		dropdownOpen = detail
 	}}
 >
@@ -76,7 +76,7 @@
 			<Button
 				unifiedSize="md"
 				variant="accent"
-				on:click={async () => (dispatch('save', deploymentMsg), onsave?.(deploymentMsg))}
+				onclick={async () => (dispatch('save', deploymentMsg), onsave?.(deploymentMsg))}
 				endIcon={{ icon: CornerDownLeft }}
 				loading={loadingSave}
 			>

frontend/src/lib/components/DeployToSetting.svelte

@@ -219,7 +219,7 @@
 					variant="default"
 					size="xs"
 					btnClasses="mt-1"
-					on:click={() => {
+					onclick={() => {
 						deployUiSettings.include_path = [...deployUiSettings.include_path, '']
 					}}
 					id="deploy-ui-add-path-filter"
@@ -251,7 +251,7 @@
 				<div class="flex gap-3">
 					<Toggle
 						bind:checked={deployUiSettings.include_type.variables}
-						on:change={(ev) => {
+						onchange={(ev) => {
 							if (!ev.detail) {
 								deployUiSettings.include_type.secrets = false
 							}

frontend/src/lib/components/DeployWorkspace.svelte

@@ -530,7 +530,7 @@
 			{#snippet footer()}
 				<div class="flex flex-col items-end gap-2">
 					{#if !hideButton}
-						<Button on:click={deployAll} disabled={!canDeployToWorkspace || hasUnselectedOnBehalfOf}
+						<Button onclick={deployAll} disabled={!canDeployToWorkspace || hasUnselectedOnBehalfOf}
 							>Deploy all toggled</Button
 						>
 					{/if}

frontend/src/lib/components/DeployWorkspaceDrawer.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <Drawer bind:this={drawer} size="900px">
-	<DrawerContent title="Deploy {initialPath}" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Deploy {initialPath}" onclose={drawer.closeDrawer}>
 		{#if (kind != 'trigger' && kind != undefined && initialPath != undefined) || (kind === 'trigger' && initialPath != undefined && additionalInformation?.triggers != undefined)}
 			<DeployWorkspace
 				hideButton={false}
@@ -41,7 +41,7 @@
 		{#snippet actions()}
 			<Button
 				disabled={workspaceToDeployTo == undefined || !canDeployToWorkspace}
-				on:click={() => deployWorkspace?.deployAll()}>Deploy All</Button
+				onclick={() => deployWorkspace?.deployAll()}>Deploy All</Button
 			>
 		{/snippet}
 	</DrawerContent>

frontend/src/lib/components/Dev.svelte

@@ -749,7 +749,7 @@
 			{/if}
 			<div class="flex justify-center pt-1">
 				{#if testIsLoading}
-					<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+					<Button onclick={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
 						<WindmillIcon
 							white={true}
 							class="mr-2 text-white"
@@ -763,7 +763,7 @@
 					<Button
 						disabled={currentScript === undefined}
 						variant="accent"
-						on:click={(e) => {
+						onclick={(e) => {
 							runTest()
 						}}
 						btnClasses="w-full"
@@ -796,7 +796,7 @@
 									rightTooltip: 'Fill args from JSON'
 								}}
 								lightMode
-								on:change={() => {
+								onchange={() => {
 									jsonEditor?.setCode(JSON.stringify(args ?? {}, null, '\t'))
 								}}
 							/>
@@ -805,7 +805,7 @@
 							<div class="py-2" style="height: {Math.max(schemaHeight, 300)}px">
 								<JsonInputs
 									bind:this={jsonEditor}
-									on:select={(e) => {
+									onselect={(e) => {
 										if (e.detail) {
 											args = e.detail
 										}
@@ -892,7 +892,7 @@
 							<FlowEditorPanel
 								enableAi
 								noEditor
-								on:applyArgs={(ev) => {
+								onapplyArgs={(ev) => {
 									if (ev.detail.kind === 'preprocessor') {
 										stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 										selectionManager.selectId('preprocessor')

frontend/src/lib/components/DiffDrawer.svelte

@@ -37,9 +37,11 @@
 		restoreDeployed?: () => Promise<void>
 		restoreDraft?: () => Promise<void>
 		isFlow?: boolean
+		onclose?: (...args: any[]) => any
 	}
 
-	let { restoreDeployed = undefined, restoreDraft = undefined, isFlow = false }: Props = $props()
+	let { restoreDeployed = undefined, restoreDraft = undefined, isFlow = false,
+		onclose = undefined }: Props = $props()
 
 	let data:
 		| {
@@ -132,8 +134,8 @@
 	}
 </script>
 
-<Drawer bind:this={diffViewer} size="1200px" on:close>
-	<DrawerContent title="Diff" on:close={diffViewer.closeDrawer}>
+<Drawer bind:this={diffViewer} size="1200px" onclose={onclose}>
+	<DrawerContent title="Diff" onclose={diffViewer.closeDrawer}>
 		<div class="flex flex-col gap-4 h-full">
 			{#if diffType && data}
 				<Tabs bind:selected={diffType} wrapperClass="shrink-0">

frontend/src/lib/components/DiffEditor.svelte

@@ -198,7 +198,7 @@
 			class="absolute flex flex-row gap-2 bottom-10 left-1/2 z-10 -translate-x-1/2 rounded-md p-1 w-full justify-center"
 		>
 			{#each buttons as button}
-				<Button on:click={button.onClick} variant="contained" size="sm" color={button.color}
+				<Button onclick={button.onClick} variant="contained" size="sm" color={button.color}
 					>{button.text}</Button
 				>
 			{/each}

frontend/src/lib/components/DisplayResult.svelte

@@ -518,7 +518,7 @@
 			<div class="text-primary text-sm">
 				<ToggleButtonGroup
 					selected={globalForceJson ? 'json' : 'pretty'}
-					on:selected={(ev) => {
+					onselected={(ev) => {
 						globalForceJson = ev.detail === 'json'
 					}}
 				>
@@ -564,7 +564,7 @@
 				>
 					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}<ToggleButtonGroup
 							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
-							on:selected={(ev) => {
+							onselected={(ev) => {
 								forceJson = ev.detail === 'json'
 							}}
 						>
@@ -595,7 +595,7 @@
 							{base}
 							{result}
 							{disableTooltips}
-							on:open-drawer={() => openDrawer()}
+							onopenDrawer={() => openDrawer()}
 						/>
 					{/if}
 				</div>
@@ -651,7 +651,7 @@
 									</p>
 								</div>
 								<div class="center-center">
-									<Button unifiedSize="md" variant="default" on:click={() => (enableHtml = true)}>
+									<Button unifiedSize="md" variant="default" onclick={() => (enableHtml = true)}>
 										Enable HTML rendering
 									</Button>
 								</div>
@@ -714,7 +714,7 @@
 						>{#if !noControls && !loading}
 							<div class="flex">
 								<Button
-									on:click={() =>
+									onclick={() =>
 										copyToClipboard(typeof result === 'string' ? result : result?.['result'])}
 									variant="subtle"
 									unifiedSize="sm"
@@ -783,7 +783,7 @@
 					>
 						<Button
 							variant="accent"
-							on:click={() =>
+							onclick={() =>
 								fetch(result['resume'], {
 									method: 'POST',
 									body: JSON.stringify({}),
@@ -792,7 +792,7 @@
 						>
 							Resume</Button
 						>
-						<Button variant="default" destructive on:click={() => fetch(result['cancel'])}
+						<Button variant="default" destructive onclick={() => fetch(result['cancel'])}
 							>Cancel</Button
 						>
 						<div class="center-center"
@@ -1039,7 +1039,7 @@
 				{:else if typeof result === 'string' && result.length > 0}
 					<pre class="text-sm">{result}</pre>{#if !noControls}<div class="flex">
 							<Button
-								on:click={() => copyToClipboard(result)}
+								onclick={() => copyToClipboard(result)}
 								variant="subtle"
 								unifiedSize="sm"
 								endIcon={{ icon: ClipboardCopy }}
@@ -1060,7 +1060,7 @@
 				{#if !noControls}
 					<div class="flex">
 						<Button
-							on:click={() => copyToClipboard(result)}
+							onclick={() => copyToClipboard(result)}
 							variant="subtle"
 							unifiedSize="md"
 							endIcon={{ icon: ClipboardCopy }}
@@ -1075,7 +1075,7 @@
 
 	{#if !disableExpand && !noControls}
 		<Drawer bind:this={jsonViewer} bind:open={drawerOpen} size="900px">
-			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+			<DrawerContent title="Expanded Result" onclose={jsonViewer.closeDrawer}>
 				{#snippet actions()}
 					{#if customUi?.disableDownload !== true}
 						<Button
@@ -1093,7 +1093,7 @@
 						</Button>
 					{/if}
 					<Button
-						on:click={() => copyToClipboard(toJsonStr(result))}
+						onclick={() => copyToClipboard(toJsonStr(result))}
 						variant="subtle"
 						unifiedSize="md"
 						startIcon={{

frontend/src/lib/components/EditableSchemaForm.svelte

@@ -82,6 +82,10 @@
 		oneditPanelSizeChanged?: (...args: any[]) => any
 		ondelete?: (...args: any[]) => any
 		onclick?: (...args: any[]) => any
+		onacceptChange?: (...args: any[]) => any
+		onrejectChange?: (...args: any[]) => any
+		onedit?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -121,7 +125,9 @@
 		onChange = undefined,
 		oneditPanelSizeChanged = undefined,
 		ondelete = undefined,
-		onclick = undefined
+		onclick = undefined,
+		onacceptChange = undefined,
+		onrejectChange = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -439,10 +445,10 @@
 							{disableDnd}
 							{onlyMaskPassword}
 							bind:args
-							on:click={(e) => {
+							onclick={(e) => {
 								opened = e.detail
 							}}
-							on:reorder={(e) => {
+							onreorder={(e) => {
 								let order = e.detail
 								let newProperties = {}
 								for (let key of order) {
@@ -462,8 +468,8 @@
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
 							{diff}
-							on:acceptChange
-							on:rejectChange
+							onacceptChange={onacceptChange}
+							onrejectChange={onrejectChange}
 							{shouldDispatchChanges}
 							bind:isValid
 							noVariablePicker={noVariablePicker || customUi?.disableVariablePicker === true}
@@ -495,7 +501,7 @@
 									{/if}
 									<ToggleButtonGroup
 										bind:selected={dynLang}
-										on:selected={({ detail }) => {
+										onselected={(detail) => {
 											dynCode = initDynFn(detail)
 										}}
 									>
@@ -558,7 +564,7 @@
 											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 									}}
 									lightMode
-									on:change={(e) => {
+									onchange={(e) => {
 										if (e.detail) {
 											schemaString = JSON.stringify(schema, null, '\t')
 											editor?.setCode(schemaString)
@@ -625,7 +631,7 @@
 																		<Button
 																			variant="default"
 																			size="xs"
-																			on:click={() => {
+																			onclick={() => {
 																				renameProperty(argName, argName + i)
 																				close()
 																			}}
@@ -834,7 +840,7 @@
 																	bind:order={schema.properties[argName].order}
 																	bind:requiredProperty={schema.properties[argName].required}
 																	{displayWebhookWarning}
-																	on:requiredChange={(event) => {
+																	onrequiredChange={(event) => {
 																		if (event.detail.required) {
 																			schema.required = schema.required ?? []
 																			schema.required.push(argName)
@@ -864,7 +870,7 @@
 									bind:this={editor}
 									small
 									fixedOverflowWidgets={false}
-									on:change={() => {
+									onchange={() => {
 										try {
 											schema = JSON.parse(schemaString)
 											error = ''
@@ -917,7 +923,7 @@
 					variant="default"
 					size="sm"
 					startIcon={{ icon: Plus }}
-					on:click={() => variableEditor?.initNew?.()}
+					onclick={() => variableEditor?.initNew?.()}
 				>
 					New variable
 				</Button>

frontend/src/lib/components/EditorBar.svelte

@@ -97,6 +97,8 @@
 		ontoggleCollabMode?: (...args: any[]) => any
 		oncollabPopup?: (...args: any[]) => any
 		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		onshowDiffMode?: (...args: any[]) => any
+		onhideDiffMode?: (...args: any[]) => any
 	}
 
 	let {
@@ -447,20 +449,20 @@
 
 {#if scriptPath}
 	<Drawer bind:open={showHistoryDrawer} size="1200px">
-		<DrawerContent title="Versions History" on:close={() => (showHistoryDrawer = false)}>
+		<DrawerContent title="Versions History" onclose={() => (showHistoryDrawer = false)}>
 			<ScriptVersionHistory {scriptPath} />
 		</DrawerContent>
 	</Drawer>
 {/if}
 
 <Drawer bind:this={scriptPicker} size="900px">
-	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
+	<DrawerContent title="Code" onclose={scriptPicker.closeDrawer}>
 		{#if pick_existing == 'hub'}
-			<PickHubScript bind:filter {kind} on:pick={onScriptPick}>
+			<PickHubScript bind:filter {kind} onpick={onScriptPick}>
 				<ToggleHubWorkspace bind:selected={pick_existing} />
 			</PickHubScript>
 		{:else}
-			<WorkspaceScriptPicker bind:filter {kind} on:pick={onScriptPick}>
+			<WorkspaceScriptPicker bind:filter {kind} onpick={onScriptPick}>
 				<ToggleHubWorkspace bind:selected={pick_existing} />
 			</WorkspaceScriptPicker>
 		{/if}
@@ -468,7 +470,7 @@
 </Drawer>
 
 <Drawer bind:this={codeViewer} size="600px">
-	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
+	<DrawerContent title="Code" onclose={codeViewer.closeDrawer}>
 		{#if codeObj}
 			<HighlightCode language={codeObj?.language} code={codeObj?.content} />
 		{:else}
@@ -595,7 +597,7 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 			<Button
 				variant="accent"
 				startIcon={{ icon: Plus }}
-				on:click={() => {
+				onclick={() => {
 					variableEditor?.initNew()
 				}}
 			>
@@ -709,8 +711,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
 	/>
 {/if}
-<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
-<VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditor} onrefresh={resourcePicker.openDrawer} />
+<VariableEditor bind:this={variableEditor} oncreate={variablePicker.openDrawer} />
 
 {#if showDucklakePicker}
 	<ItemPicker
@@ -856,7 +858,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiDescription="Add context variable"
 					title="Add context variable"
 					variant="subtle"
-					on:click={contextualVariablePicker.openDrawer}
+					onclick={contextualVariablePicker.openDrawer}
 					unifiedSize="sm"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
@@ -869,7 +871,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiDescription="Add variable"
 					title="Add variable"
 					variant="subtle"
-					on:click={variablePicker.openDrawer}
+					onclick={variablePicker.openDrawer}
 					unifiedSize="sm"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
@@ -884,7 +886,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiDescription="Add S3 Object"
 					title="Add S3 object"
 					variant="subtle"
-					on:click={() => s3FilePicker?.open()}
+					onclick={() => s3FilePicker?.open()}
 					unifiedSize="sm"
 					startIcon={{ icon: File }}
 					{iconOnly}
@@ -899,7 +901,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					title="Add resource"
 					unifiedSize="sm"
 					variant="subtle"
-					on:click={resourcePicker.openDrawer}
+					onclick={resourcePicker.openDrawer}
 					{iconOnly}
 					startIcon={{ icon: Package }}
 				>
@@ -910,7 +912,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{#if showGitRepoPicker && customUi?.resource != false}
 				<GitRepoPopoverPicker
 					bind:isOpen={gitRepoPickerOpen}
-					on:selected={(e) => insertDelegateToGitRepo(e.detail.resourcePath)}
+					onselected={(e) => insertDelegateToGitRepo(e.detail.resourcePath)}
 				>
 					<Button
 						aiId="editor-bar-add-git-repo"
@@ -918,7 +920,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						title="Delegate to Git repository"
 						unifiedSize="sm"
 						variant="subtle"
-						on:click={() => (gitRepoPickerOpen = true)}
+						onclick={() => (gitRepoPickerOpen = true)}
 						{iconOnly}
 						startIcon={{ icon: GitBranch }}
 					>
@@ -934,7 +936,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					title="Add resource type"
 					variant="subtle"
 					unifiedSize="sm"
-					on:click={() => resourceTypePicker?.openDrawer()}
+					onclick={() => resourceTypePicker?.openDrawer()}
 					{iconOnly}
 					startIcon={{ icon: Package }}
 				>
@@ -948,7 +950,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiDescription="Add database"
 					title="Add database"
 					variant="subtle"
-					on:click={() => databasePicker?.openDrawer()}
+					onclick={() => databasePicker?.openDrawer()}
 					unifiedSize="sm"
 					startIcon={{ icon: DatabaseIcon }}
 					{iconOnly}
@@ -962,7 +964,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiDescription="Use Ducklake"
 					title="Use Ducklake"
 					variant="subtle"
-					on:click={() => ducklakePicker?.openDrawer()}
+					onclick={() => ducklakePicker?.openDrawer()}
 					unifiedSize="sm"
 					startIcon={{ icon: DucklakeIcon }}
 					{iconOnly}
@@ -976,7 +978,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					aiDescription="Use DataTable"
 					title="Use DataTable"
 					variant="subtle"
-					on:click={() => dataTablePicker?.openDrawer()}
+					onclick={() => dataTablePicker?.openDrawer()}
 					unifiedSize="sm"
 					startIcon={{ icon: DatabaseIcon }}
 					{iconOnly}
@@ -991,7 +993,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					title="Reset Content"
 					unifiedSize="sm"
 					variant="subtle"
-					on:click={clearContent}
+					onclick={clearContent}
 					{iconOnly}
 					startIcon={{ icon: RotateCw }}
 				>
@@ -1006,7 +1008,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						aiDescription="Reload assistants"
 						unifiedSize="sm"
 						variant="subtle"
-						on:click={() => editor?.reloadWebsocket()}
+						onclick={() => editor?.reloadWebsocket()}
 						startIcon={{
 							icon: RotateCw,
 							classes: websocketAlive[lang] == false ? 'animate-spin' : ''
@@ -1040,7 +1042,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						size="sm"
 						checked={diffMode}
 						disabled={!lastDeployedCode}
-						on:change={(e) => {
+						onchange={(e) => {
 							const turnOn = e.detail
 							dispatch(turnOn ? 'showDiffMode' : 'hideDiffMode')
 						}}
@@ -1060,7 +1062,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						options={{ right: '' }}
 						size="xs"
 						checked={collabLive}
-						on:change={() => (dispatch('toggleCollabMode'), ontoggleCollabMode?.())}
+						onchange={() => (dispatch('toggleCollabMode'), ontoggleCollabMode?.())}
 					/>
 					<Popover>
 						{#snippet text()}
@@ -1107,7 +1109,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			<Button
 				unifiedSize="sm"
 				variant="subtle"
-				on:click={() => (showHistoryDrawer = true)}
+				onclick={() => (showHistoryDrawer = true)}
 				{iconOnly}
 				startIcon={{ icon: History }}
 				title="See history"
@@ -1119,7 +1121,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			<Button
 				unifiedSize="sm"
 				variant="subtle"
-				on:click={scriptPicker.openDrawer}
+				onclick={scriptPicker.openDrawer}
 				{iconOnly}
 				startIcon={{ icon: Library }}
 				title="Explore other scripts"
@@ -1132,7 +1134,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				unifiedSize="sm"
 				variant="subtle"
 				startIcon={{ icon: Save }}
-				on:click={() => (
+				onclick={() => (
 					dispatch('createScriptFromInlineScript'),
 					oncreateScriptFromInlineScript?.()
 				)}

frontend/src/lib/components/EditorTheme.svelte

@@ -21,4 +21,4 @@
 	})
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver onchange={onThemeChange} />

frontend/src/lib/components/ErrorOrRecoveryHandler.svelte

@@ -437,7 +437,7 @@
 					disabled={!$enterpriseLicense || !isEditable}
 					checked={isSlackHandler(handlerPath)}
 					options={{ right: toggleText }}
-					on:change={async (e) => {
+					onchange={async (e) => {
 						if (e.detail && errorOrRecovery === 'error') {
 							handlerPath = slackHandlerScriptPath
 						} else if (e.detail && errorOrRecovery === 'recovery') {
@@ -474,7 +474,7 @@
 							disabled={emptyString(handlerExtraArgs['channel'])}
 							wrapperClasses="w-fit"
 							variant="default"
-							on:click={() => sendSlackMessage(handlerExtraArgs['channel'])}
+							onclick={() => sendSlackMessage(handlerExtraArgs['channel'])}
 							unifiedSize="md">Send test message</Button
 						>
 						{#if connectionTestJob !== undefined}
@@ -521,7 +521,7 @@
 					disabled={!$enterpriseLicense || !isEditable}
 					checked={isTeamsHandler(handlerPath)}
 					options={{ right: toggleText }}
-					on:change={async (e) => {
+					onchange={async (e) => {
 						if (e.detail && errorOrRecovery === 'error') {
 							handlerPath = teamsHandlerScriptPath
 						} else if (e.detail && errorOrRecovery === 'recovery') {
@@ -570,7 +570,7 @@
 							disabled={emptyString(handlerExtraArgs['channel'])}
 							btnClasses="w-32 text-center whitespace-nowrap"
 							variant="default"
-							on:click={() => sendTeamsMessage(handlerExtraArgs['channel'] ?? '')}
+							onclick={() => sendTeamsMessage(handlerExtraArgs['channel'] ?? '')}
 							size="xs">Send test message</Button
 						>
 						{#if connectionTestJob !== undefined}

frontend/src/lib/components/ExploreAssetButton.svelte

@@ -56,7 +56,7 @@
 	wrapperClasses={className}
 	iconOnly={noText}
 	{btnClasses}
-	on:click={async () => {
+	onclick={async () => {
 		if (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)) {
 			let [resourcePath, specificTable] = asset.path.split('?table=')
 			dbManagerDrawer?.openDrawer({

frontend/src/lib/components/FirstStepInputs.svelte

@@ -10,6 +10,14 @@
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
 	import { Building } from 'lucide-svelte'
 
+	interface Props {
+		onconnectFirstNode?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()

frontend/src/lib/components/FlowBuilder.svelte

@@ -1115,10 +1115,10 @@
 	bind:open={draftTriggersModalOpen}
 	draftTriggers={triggersState.triggers.filter((t) => t.draftConfig)}
 	isFlow={true}
-	on:canceled={() => {
+	oncanceled={() => {
 		draftTriggersModalOpen = false
 	}}
-	on:confirmed={handleDraftTriggersConfirmed}
+	onconfirmed={handleDraftTriggersConfirmed}
 />
 
 <AIChangesWarningModal bind:open={aiChangesWarningOpen} onConfirm={aiChangesConfirmCallback} />
@@ -1156,7 +1156,7 @@
 							startIcon={{ icon: Calendar }}
 							variant="subtle"
 							size="xs"
-							on:click={async () => {
+							onclick={async () => {
 								select('Trigger')
 								const selected = primaryScheduleIndex ?? scheduleIndex
 								if (selected) {
@@ -1186,7 +1186,7 @@
 						<Button
 							variant="default"
 							unifiedSize="md"
-							on:click={async () => {
+							onclick={async () => {
 								if (!savedFlow) {
 									return
 								}
@@ -1218,7 +1218,7 @@
 					{/if}
 					<FlowPreviewButtons
 						{suspendStatus}
-						on:openTriggers={(e) => {
+						onopenTriggers={(e) => {
 							select('Trigger')
 							handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, e.detail.kind)
 							captureOn.set(true)
@@ -1242,7 +1242,7 @@
 							unifiedSize="md"
 							variant="accent"
 							startIcon={{ icon: Save }}
-							on:click={() => saveDraft()}
+							onclick={() => saveDraft()}
 							disabled={(!newFlow && !savedFlow) || loading}
 							shortCut={{ key: 'S' }}
 						>
@@ -1251,7 +1251,7 @@
 					{/if}
 
 					<DeployButton
-						on:save={async ({ detail }) => await handleSaveFlow(detail)}
+						onsave={async ({ detail }) => await handleSaveFlow(detail)}
 						{loading}
 						{loadingSave}
 						{newFlow}
@@ -1267,17 +1267,17 @@
 					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
 					{loading}
-					on:reload={() => {
+					onreload={() => {
 						renderCount += 1
 					}}
 					{newFlow}
-					on:applyArgs={(ev) => {
+					onapplyArgs={(ev) => {
 						if (ev.detail.kind === 'preprocessor') {
 							stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 							selectionManager.selectId('preprocessor')
 						}
 					}}
-					on:testWithArgs={(e) => {
+					ontestWithArgs={(e) => {
 						previewArgsStore.val = JSON.parse(JSON.stringify(e.detail))
 						flowPreviewButtons?.openPreview(true)
 					}}
@@ -1334,7 +1334,7 @@
 
 <FlowTutorials
 	bind:this={flowTutorials}
-	on:reload={() => {
+	onreload={() => {
 		renderCount += 1
 	}}
 />

frontend/src/lib/components/FlowGraphViewerStep.svelte

@@ -33,7 +33,7 @@
 <HighlightTheme />
 
 <Drawer bind:this={codeViewer} size="900px">
-	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+	<DrawerContent title={'Expanded Code'} onclose={codeViewer.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}
 			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
@@ -311,7 +311,7 @@
 					unifiedSize="sm"
 					startIcon={{ icon: Copy }}
 					variant="subtle"
-					on:click={() => {
+					onclick={() => {
 						if (typeof stepDetail !== 'string') {
 							const val = stepDetail?.value
 							if (val?.type == 'flow') {

frontend/src/lib/components/FlowHistoryJobPicker.svelte

@@ -60,7 +60,7 @@
 	{#snippet content()}
 		<div class="p-2 h-[400px] overflow-hidden w-80 border shadow-sm">
 			<HistoricInputs
-				on:select={(e) => {
+				onselect={(e) => {
 					if (e.detail) {
 						dispatch('select', { jobId: e.detail?.jobId, initial: false })
 						onselect?.({ jobId: e.detail?.jobId, initial: false })

frontend/src/lib/components/FlowLoopIterationPreview.svelte

@@ -114,7 +114,7 @@
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
 			<Button
-				on:click={() => (dispatch('close'), onclose?.())}
+				onclick={() => (dispatch('close'), onclose?.())}
 				startIcon={{ icon: X }}
 				iconOnly
 				unifiedSize="md"
@@ -127,7 +127,7 @@
 			<Button
 				variant="accent"
 				destructive
-				on:click={async () => {
+				onclick={async () => {
 					isRunning = false
 					try {
 						jobId &&
@@ -151,7 +151,7 @@
 				startIcon={{ icon: isRunning ? RefreshCw : Play }}
 				unifiedSize="md"
 				btnClasses="w-full max-w-lg"
-				on:click={() => runPreview(previewArgs, undefined)}
+				onclick={() => runPreview(previewArgs, undefined)}
 				id="flow-editor-test-flow-drawer"
 				shortCut={{
 					Icon: CornerDownLeft

frontend/src/lib/components/FlowPlugConnect.svelte

@@ -8,9 +8,11 @@
 		connecting: boolean;
 		id?: undefined | string;
 		wrapperClasses?: string;
+		onclick?: (...args: any[]) => any
 	}
 
-	let { connecting, id = undefined, wrapperClasses = '' }: Props = $props();
+	let { connecting, id = undefined, wrapperClasses = '',
+		onclick = undefined }: Props = $props();
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
@@ -20,7 +22,7 @@
 			connecting ? 'text-accent' : '',
 			'bg-surface hover:bg-surface-hover group/plug-btn overflow-clip flex p-0'
 		)}
-		on:click
+		onclick={onclick}
 		{...id ? { id } : {}}
 		{wrapperClasses}
 	>

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -66,6 +66,7 @@
 		}
 		suspendStatus: StateStore<Record<string, { job: Job; nb: number }>>
 		onclose?: (...args: any[]) => any
+		onopenTriggers?: (...args: any[]) => any
 	}
 
 	let {
@@ -88,7 +89,8 @@
 		onJobDone,
 		upToId = undefined,
 		suspendStatus,
-		onclose = undefined
+		onclose = undefined,
+		onopenTriggers = undefined
 	}: Props = $props()
 
 	let restartBranchNames: [number, string][] = []
@@ -386,7 +388,7 @@
 		<div class="flex flex-row w-full items-center gap-x-2 px-4">
 			<div class="w-8">
 				<Button
-					on:click={() => (dispatch('close'), onclose?.())}
+					onclick={() => (dispatch('close'), onclose?.())}
 					startIcon={{ icon: X }}
 					iconOnly
 					unifiedSize="md"
@@ -400,7 +402,7 @@
 					<Button
 						variant="accent"
 						destructive
-						on:click={async () => {
+						onclick={async () => {
 							cancelTest()
 						}}
 						unifiedSize="md"
@@ -439,7 +441,7 @@
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
 							size="sm"
 							btnClasses="w-full max-w-lg"
-							on:click={() =>
+							onclick={() =>
 								recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
 							id="flow-editor-test-flow-drawer"
 							shortCut={{ Icon: CornerDownLeft }}
@@ -461,7 +463,7 @@
 							variant="subtle"
 							unifiedSize="sm"
 							title="Download recording"
-							on:click={downloadRecording}
+							onclick={downloadRecording}
 							startIcon={{ icon: Download }}
 						>
 							Download recording
@@ -502,8 +504,8 @@
 						stablePathForCaptures={$initialPathStore || fakeInitialPath}
 						runnableType={'FlowPath'}
 						previewArgs={previewArgs.val}
-						on:openTriggers
-						on:select={(e) => {
+						onopenTriggers={onopenTriggers}
+						onselect={(e) => {
 							selectInput(e.detail.payload, e.detail?.type)
 						}}
 						{isValid}
@@ -523,7 +525,7 @@
 										rightTooltip: 'Fill args from JSON'
 									}}
 									lightMode
-									on:change={(e) => {
+									onchange={(e) => {
 										jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
 										refresh()
 									}}
@@ -534,7 +536,7 @@
 							<div class="py-2" style="height: {Math.max(schemaHeight, 100)}px" data-schema-picker>
 								<JsonInputs
 									bind:this={jsonEditor}
-									on:select={(e) => {
+									onselect={(e) => {
 										if (e.detail) {
 											previewArgs.val = e.detail
 										}
@@ -551,7 +553,7 @@
 										compact
 										schema={flowStore.val.schema}
 										bind:args={previewArgs.val}
-										on:change={() => {
+										onchange={() => {
 											savedArgs = $state.snapshot(previewArgs.val)
 										}}
 										bind:isValid
@@ -591,7 +593,7 @@
 				{/if}
 				<FlowHistoryJobPicker
 					selectInitial={jobId == undefined}
-					on:select={(e) => {
+					onselect={(e) => {
 						if (!currentJobId) {
 							currentJobId = jobId
 						}
@@ -601,7 +603,7 @@
 							stepHistoryLoader?.setFlowJobInitial(detail.initial)
 						}
 					}}
-					on:unselect={() => {
+					onunselect={() => {
 						jobId = currentJobId
 						currentJobId = undefined
 					}}

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -1445,7 +1445,7 @@
 				<div class="overflow-auto max-h-1/2">
 					{#each flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
 						{#if render && j + subflowsSize + 1 == (flowJobIds?.flowJobs.length ?? 0)}
-							<Button variant="default" on:click={() => (subflowsSize += 500)}
+							<Button variant="default" onclick={() => (subflowsSize += 500)}
 								>Load 500 more...</Button
 							>
 						{/if}
@@ -1458,7 +1458,7 @@
 										? 'dark'
 										: 'light'}
 								btnClasses="w-full flex justify-start"
-								on:click={async () => {
+								onclick={async () => {
 									let storedJob = storedListJobs[j]
 									if (!storedJob && !isReplay) {
 										storedJob = await JobService.getJob({
@@ -1584,7 +1584,7 @@
 										variant={retry_selected === failedRetry ? 'contained' : 'border'}
 										color="red"
 										btnClasses="w-full flex justify-start"
-										on:click={() => {
+										onclick={() => {
 											if (retry_selected == failedRetry) {
 												retry_selected = ''
 											} else {
@@ -1723,7 +1723,7 @@
 															? 'dark'
 															: 'light'}
 													btnClasses="w-full flex justify-start"
-													on:click={async () => {
+													onclick={async () => {
 														if (isSelected) {
 															selectedToolCall = undefined
 														} else {

frontend/src/lib/components/FlowStatusWaitingForEvents.svelte

@@ -143,7 +143,7 @@
 							disabled={!cancelUrl}
 							destructive
 							unifiedSize="md"
-							on:click={() => continu(false)}
+							onclick={() => continu(false)}
 						/>
 					</div>
 				{/if}

frontend/src/lib/components/FlowTutorials.svelte

@@ -3,6 +3,14 @@
 	import FlowBuilderLiveTutorial from './tutorials/FlowBuilderLiveTutorial.svelte'
 	import TroubleshootFlowTutorial from './tutorials/TroubleshootFlowTutorial.svelte'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	let tutorialRouter: TutorialRouter | undefined = $state(undefined)
 
 	export function runTutorialById(id: string) {

frontend/src/lib/components/FlowViewerInner.svelte

@@ -62,7 +62,7 @@
 <div>
 	<Tabs
 		bind:selected={rawType}
-		on:selected={() => {
+		onselected={() => {
 			maxLines = 100
 		}}
 	>
@@ -71,7 +71,7 @@
 		{#snippet content()}
 			<div class="relative pt-2">
 				<Button
-					on:click={() =>
+					onclick={() =>
 						copyToClipboard(
 							rawType === 'yaml'
 								? YAML.stringify(flowFiltered)
@@ -94,7 +94,7 @@
 				</div>
 				{#if shouldDisplayLoadMore}
 					<Button
-						on:click={() => {
+						onclick={() => {
 							maxLines += 500
 
 							// If the code is less than the max lines, we don't need to show the button

frontend/src/lib/components/FolderEditor.svelte

@@ -155,7 +155,7 @@
 <Drawer bind:this={newGroup}>
 	<DrawerContent
 		title="New Group"
-		on:close={() => {
+		onclose={() => {
 			newGroup?.closeDrawer()
 			groupCreated = undefined
 		}}
@@ -163,7 +163,7 @@
 		{#if !groupCreated}
 			<div class="flex flex-row">
 				<input class="mr-2" placeholder="New group name" bind:value={newGroupName} />
-				<Button size="md" startIcon={{ icon: Plus }} disabled={!newGroupName} on:click={addGroup}>
+				<Button size="md" startIcon={{ icon: Plus }} disabled={!newGroupName} onclick={addGroup}>
 					New&nbsp;group
 				</Button>
 			</div>
@@ -174,7 +174,7 @@
 </Drawer>
 
 <Drawer bind:this={viewGroup}>
-	<DrawerContent title="Group {ownerItem}" on:close={viewGroup.closeDrawer}>
+	<DrawerContent title="Group {ownerItem}" onclose={viewGroup.closeDrawer}>
 		<GroupEditor name={ownerItem} />
 	</DrawerContent>
 </Drawer>
@@ -187,7 +187,7 @@
 				bind:value={summary}
 				size="md"
 			/>
-			<Button variant="accent" unifiedSize="md" on:click={updateFolder} disabled={!can_write}
+			<Button variant="accent" unifiedSize="md" onclick={updateFolder} disabled={!can_write}
 				>Save</Button
 			>
 		</div>
@@ -201,7 +201,7 @@
 				</Alert>
 				<div class="flex items-center gap-1">
 					<div>
-						<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
+						<ToggleButtonGroup bind:selected={ownerKind} onselected={() => (ownerItem = '')}>
 							{#snippet children({ item })}
 								<ToggleButton value="user" label="User" {item} />
 								<ToggleButton value="group" label="Group" {item} />
@@ -221,14 +221,14 @@
 								variant="default"
 								unifiedSize="md"
 								disabled={!ownerItem || ownerItem == ''}
-								on:click={viewGroup.openDrawer}
+								onclick={viewGroup.openDrawer}
 								startIcon={{ icon: Eye }}
 								iconOnly
 							/>
 							<Button
 								title="New Group"
 								variant="default"
-								on:click={newGroup.openDrawer}
+								onclick={newGroup.openDrawer}
 								unifiedSize="md"
 								startIcon={{ icon: Plus }}
 								iconOnly
@@ -239,7 +239,7 @@
 						disabled={ownerItem == ''}
 						variant="accent"
 						unifiedSize="md"
-						on:click={addToFolder}
+						onclick={addToFolder}
 					>
 						Grant
 					</Button>
@@ -258,7 +258,7 @@
 					wrapperClasses="w-min"
 					startIcon={{ icon: Plus }}
 					size="xs"
-					on:click={() => {
+					onclick={() => {
 						FolderService.createFolder({
 							workspace: $workspaceStore ?? '',
 							requestBody: { name }
@@ -290,7 +290,7 @@
 													disabled={owner_name == 'u/' + $userStore?.username &&
 														!($userStore?.is_admin || $userStore?.is_super_admin)}
 													selected={role}
-													on:selected={async (e) => {
+													onselected={async (e) => {
 														const role = e.detail
 														// const wasInFolder = (folder?.owners ?? []).includes(folder)
 														// const inAcl = (
@@ -401,7 +401,7 @@
 			{#if can_write}
 				<div class="flex items-start">
 					<AutoComplete items={folders} bind:selectedItem={new_managing_folder} />
-					<Button variant="accent" size="sm" btnClasses="!ml-4" on:click={addToManagingFolder}>
+					<Button variant="accent" size="sm" btnClasses="!ml-4" onclick={addToManagingFolder}>
 						Add folder managing this folder
 					</Button>
 				</div>
@@ -423,7 +423,7 @@
 									{#if can_write}
 										<button
 											class="ml-2 text-red-500"
-											on:click={async () => {
+											onclick={async () => {
 												await GranularAclService.removeGranularAcls({
 													workspace: $workspaceStore ?? '',
 													path: name,

frontend/src/lib/components/FolderPicker.svelte

@@ -150,7 +150,7 @@
 <Drawer bind:this={newFolder} name="newFolder" offset={drawerOffset}>
 	<DrawerContent
 		title={folderCreated ? `Folder ${folderCreated}` : 'Create folder'}
-		on:close={() => {
+		onclose={() => {
 			newFolder?.closeDrawer()
 			folderCreated = undefined
 		}}
@@ -190,7 +190,7 @@
 </Drawer>
 
 <Drawer bind:this={viewFolder} offset={drawerOffset}>
-	<DrawerContent title="Folder {editingFolder}" on:close={viewFolder.closeDrawer}>
+	<DrawerContent title="Folder {editingFolder}" onclose={viewFolder.closeDrawer}>
 		<FolderEditor name={editingFolder} />
 	</DrawerContent>
 </Drawer>

frontend/src/lib/components/ForkWorkspaceBanner.svelte

@@ -193,7 +193,7 @@
 
 				<div class="flex items-center gap-2">
 					{#if comparison && comparison.summary.total_diffs > 0}
-						<Button size="xs" color="blue" on:click={openComparisonDrawer}>
+						<Button size="xs" color="blue" onclick={openComparisonDrawer}>
 							{#if comparison.summary.total_ahead > 0}
 								Review & Deploy Changes
 							{:else}

frontend/src/lib/components/FormatOnSave.svelte

@@ -11,7 +11,7 @@
 <Toggle
 	size="xs"
 	bind:checked={$formatOnSave}
-	on:change={() => {
+	onchange={() => {
 		storeSetting()
 	}}
 	options={{ right: 'auto-formatting' }}

frontend/src/lib/components/GitHubAppIntegration.svelte

@@ -168,7 +168,7 @@
 		<Button
 			variant="default"
 			size="xs"
-			on:click={handleRefreshInstallations}
+			onclick={handleRefreshInstallations}
 			disabled={!$enterpriseLicense}
 			startIcon={{ icon: RotateCw }}
 		/>
@@ -237,7 +237,7 @@
 											variant="accent"
 											buttonType="button"
 											disabled={!githubState.selectedGHAppRepository}
-											on:click={() => handleApplyRepositoryURL(close)}
+											onclick={() => handleApplyRepositoryURL(close)}
 										>
 											Apply
 										</Button>
@@ -265,7 +265,7 @@
 										}}
 										target="_blank"
 										disabled={githubState.isCheckingInstallation}
-										on:click={() => {
+										onclick={() => {
 											if ($workspaceStore) {
 												startInstallationCheck(githubState, $workspaceStore, () =>
 													loadGithubInstallations(githubState, $workspaceStore!)
@@ -322,7 +322,7 @@
 																		variant="accent"
 																		title="Export installation to other instance"
 																		startIcon={{ icon: Download }}
-																		on:click={() =>
+																		onclick={() =>
 																			handleExportInstallation(installation.installation_id)}
 																	>
 																		Export
@@ -333,7 +333,7 @@
 																		destructive
 																		title="Remove installation from workspace"
 																		startIcon={{ icon: Minus }}
-																		on:click={() =>
+																		onclick={() =>
 																			handleDeleteInstallation(installation.installation_id)}
 																	>
 																		Remove
@@ -392,7 +392,7 @@
 																	variant="accent"
 																	title="Add installation to workspace"
 																	startIcon={{ icon: Plus }}
-																	on:click={() => {
+																	onclick={() => {
 																		if (installation.workspace_id) {
 																			handleAddInstallation(
 																				installation.installation_id,
@@ -427,7 +427,7 @@
 								/>
 								<Button
 									variant="accent"
-									on:click={handleImportInstallation}
+									onclick={handleImportInstallation}
 									disabled={!githubState.importJwt}
 								>
 									Import
@@ -455,7 +455,7 @@
 			}}
 			href={githubState.githubInstallationUrl}
 			target="_blank"
-			on:click={handleInstallClickWithPopover}
+			onclick={handleInstallClickWithPopover}
 		>
 			{$enterpriseLicense
 				? githubState.isCheckingInstallation

frontend/src/lib/components/GitRepoResourcePicker.svelte

@@ -168,7 +168,7 @@
 <Drawer bind:this={drawer} size="600px">
 	<DrawerContent
 		title="Select Git Repository Resource"
-		on:close={handleClose}
+		onclose={handleClose}
 		tooltip="Select a git repository resource to delegate ansible execution to"
 	>
 		<div class="flex flex-col gap-4 p-4">
@@ -235,11 +235,11 @@
 
 			<!-- Inventories Location Configuration -->
 			<div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
-				<Button variant="default" on:click={handleClose}>Cancel</Button>
+				<Button variant="default" onclick={handleClose}>Cancel</Button>
 				<Button
 					variant="accent"
 					disabled={!selectedResource || loading}
-					on:click={handleSelect}
+					onclick={handleSelect}
 					startIcon={{ icon: GitBranch }}
 				>
 					Apply Configuration

frontend/src/lib/components/GroupEditor.svelte

@@ -135,7 +135,7 @@
 			<Button
 				unifiedSize="md"
 				variant="accent"
-				on:click={async () => {
+				onclick={async () => {
 					await GroupService.updateGroup({
 						workspace: $workspaceStore ?? '',
 						name,
@@ -154,7 +154,7 @@
 		{#if can_write}
 			<div class="flex items-start gap-1">
 				<Select items={safeSelectItems(usernames)} bind:value={username} size="md" class="grow" />
-				<Button variant="accent" color="blue" unifiedSize="md" on:click={addToGroup}>
+				<Button variant="accent" color="blue" unifiedSize="md" onclick={addToGroup}>
 					Add member
 				</Button>
 			</div>
@@ -177,7 +177,7 @@
 										<div>
 											<ToggleButtonGroup
 												selected={role}
-												on:selected={async (e) => {
+												onselected={async (e) => {
 													const role = e.detail
 													// const wasInGroup = (group?.members ?? []).includes(group)
 													// const inAcl = (

frontend/src/lib/components/HistoricInputs.svelte

@@ -149,7 +149,7 @@
 							{job}
 							selected={selected === job.id}
 							hovering={jobHovered === job.id}
-							on:select={(e) => handleSelected(e.detail)}
+							onselect={(e) => handleSelected(e)}
 						/>
 					{/each}
 					{#if jobs.length == 5}
@@ -167,8 +167,8 @@
 	<div class="min-h-0 grow" data-schema-picker>
 		<HistoricList
 			bind:this={historicList}
-			on:error={(e) => handleError(e.detail)}
-			on:select={(e) => handleSelected(e.detail)}
+			onerror={(e) => handleError(e)}
+			onselect={(e) => handleSelected(e)}
 			{runnableId}
 			{runnableType}
 			{selected}

frontend/src/lib/components/HistoricList.svelte

@@ -13,6 +13,8 @@
 		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
 		limitPayloadSize?: boolean
 		searchArgs?: Record<string, any> | undefined
+		onerror?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -22,7 +24,9 @@
 		showAuthor = false,
 		placement = 'bottom-start',
 		limitPayloadSize = false,
-		searchArgs = undefined
+		searchArgs = undefined,
+		onerror = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	let infiniteList: InfiniteList | undefined = $state(undefined)
@@ -118,7 +122,7 @@
 	})
 </script>
 
-<InfiniteList bind:this={infiniteList} selectedItemId={selected} on:error on:select>
+<InfiniteList bind:this={infiniteList} selectedItemId={selected} onerror={onerror} onselect={onselect}>
 	{#snippet columns()}
 		<colgroup>
 			<col class="w-8" />

frontend/src/lib/components/HttpAgentWorkerDrawer.svelte

@@ -303,7 +303,7 @@ BASE_INTERNAL_URL=<base url>
 										<Button
 											variant="accent"
 											unifiedSize="md"
-											on:click={addToBlacklist}
+											onclick={addToBlacklist}
 											disabled={!$superadmin || blacklistTokenError !== ''}>Blacklist</Button
 										>
 									</div>
@@ -329,7 +329,7 @@ BASE_INTERNAL_URL=<base url>
 									<Button
 										variant="subtle"
 										unifiedSize="sm"
-										on:click={loadBlacklistedTokens}
+										onclick={loadBlacklistedTokens}
 										disabled={isLoadingBlacklist}
 										title="Refresh blacklist"
 										startIcon={{ icon: RefreshCw }}
@@ -366,7 +366,7 @@ BASE_INTERNAL_URL=<base url>
 														variant="subtle"
 														destructive
 														unifiedSize="sm"
-														on:click={() => removeFromBlacklist(blacklistedToken.token)}
+														onclick={() => removeFromBlacklist(blacklistedToken.token)}
 														title="Remove from blacklist"
 														startIcon={{ icon: Trash }}
 													/>

frontend/src/lib/components/InfiniteList.svelte

@@ -169,7 +169,7 @@
 	infiniteScroll
 	{hasMore}
 	tableFixed={true}
-	on:loadMore={() => {
+	onloadMore={() => {
 		loadData()
 	}}
 	{loading}

frontend/src/lib/components/InputTransformForm.svelte

@@ -549,8 +549,8 @@
 							{focused}
 							{arg}
 							schemaProperty={schema?.properties?.[argName]}
-							on:showExpr={(e) => (suggestion = e.detail || undefined)}
-							on:setExpr={(e) => {
+							onshowExpr={(e) => (suggestion = e.detail || undefined)}
+							onsetExpr={(e) => {
 								arg = { type: 'javascript', expr: e.detail }
 								propertyType = 'javascript'
 								monaco?.setCode('')
@@ -575,7 +575,7 @@
 							)}
 							id="flow-editor-plug"
 							{connecting}
-							on:click={() => {
+							onclick={() => {
 								if ($propPickerConfig?.propName == argName) {
 									clearFocus()
 								} else {
@@ -594,7 +594,7 @@
 						<ToggleButtonGroup
 							selected={visiblePropertyType}
 							class="h-full"
-							on:selected={(e) => {
+							onselected={(e) => {
 								if (e.detail == propertyType || suggestion) return
 								const staticTemplate = isStaticTemplate(inputCat)
 
@@ -690,7 +690,7 @@
 										size="xs2"
 										color="light"
 										btnClasses="font-normal text-xs w-fit bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-300 dark:bg-green-700 dark:hover:bg-green-600"
-										on:click={() => setJavaScriptExpr(arg.value)}
+										onclick={() => setJavaScriptExpr(arg.value)}
 									>
 										<span class="font-normal whitespace-nowrap flex gap-2 items-center"
 											><FunctionSquare size={14} /> detected -
@@ -770,13 +770,13 @@
 									<TemplateEditor
 										bind:this={monacoTemplate}
 										{extraLib}
-										on:focus={onFocus}
-										on:blur={() => {
+										onfocus={onFocus}
+										onblur={() => {
 											focused = false
 										}}
 										bind:code={arg.value}
 										fontSize={12}
-										on:change={() => {
+										onchange={() => {
 											dispatch('change', { argName, arg })
 											onchange?.({ argName, arg })
 										}}
@@ -790,12 +790,12 @@
 								{resourceTypes}
 								noMargin
 								compact
-								on:focus={onFocus}
-								on:blur={() => {
+								onfocus={onFocus}
+								onblur={() => {
 									focused = false
 								}}
 								shouldDispatchChanges
-								on:change={() => {
+								onchange={() => {
 									dispatch('change', { argName, arg })
 									onchange?.({ argName, arg })
 								}}
@@ -863,15 +863,15 @@
 									shouldBindKey={false}
 									renderLineHighlight="none"
 									hideLineNumbers
-									on:focus={() => {
+									onfocus={() => {
 										focused = true
 										updatePropsBeingEdited(true)
 									}}
-									on:blur={() => {
+									onblur={() => {
 										focused = false
 										updatePropsBeingEdited(false)
 									}}
-									on:change={() => {
+									onchange={() => {
 										dispatch('change', { argName, arg })
 										onchange?.({ argName, arg })
 									}}
@@ -914,7 +914,7 @@
 								<Button
 									variant="default"
 									size="xs"
-									on:click={() => {
+									onclick={() => {
 										arg.expr = ''
 									}}>Set expr to empty string</Button
 								></div

frontend/src/lib/components/InputTransformSchemaForm.svelte

@@ -179,7 +179,7 @@
 				variant="accent"
 				size="sm"
 				startIcon={{ icon: Plus }}
-				on:click={() => {
+				onclick={() => {
 					variableEditor?.initNew?.()
 				}}
 			>

frontend/src/lib/components/InstanceGroupEditor.svelte

@@ -51,7 +51,7 @@
 			<div class="flex justify-end">
 				<Button
 					size="xs"
-					on:click={async () => {
+					onclick={async () => {
 						await GroupService.updateInstanceGroup({
 							name,
 							requestBody: { new_summary: instance_group?.summary ?? '' }
@@ -75,7 +75,7 @@
 				variant="accent"
 				size="sm"
 				btnClasses="!ml-4"
-				on:click={async () => {
+				onclick={async () => {
 					await GroupService.addUserToInstanceGroup({
 						name,
 						requestBody: { email: email }

frontend/src/lib/components/InstanceNameEditor.svelte

@@ -19,6 +19,7 @@
 		onsave?: (...args: any[]) => any
 		onrefresh?: (...args: any[]) => any
 		onkeydown?: (...args: any[]) => any
+		onrenamed?: (...args: any[]) => any
 	}
 
 	let {
@@ -29,7 +30,8 @@
 		login_type = $bindable(),
 		onsave = undefined,
 		onrefresh = undefined,
-		onkeydown = undefined
+		onkeydown = undefined,
+		onrenamed = undefined
 	}: Props = $props()
 
 	let password: string = $state('')
@@ -73,7 +75,7 @@
 	{#snippet content()}
 		<div class="flex flex-col gap-8 max-w-sm p-4">
 			{#if automateUsernameCreation && username}
-				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
+				<ChangeInstanceUsernameInner {email} {username} onrenamed={onrenamed} noPadding />
 			{/if}
 			<label class="block text-primary">
 				<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
@@ -130,7 +132,7 @@
 					buttonType="button"
 					btnClasses="mt-2 "
 					aria-label="Save ID"
-					on:click={() => {
+					onclick={() => {
 						savePassword()
 					}}
 				>
@@ -164,7 +166,7 @@
 					buttonType="button"
 					btnClasses="mt-2 "
 					aria-label="Save login type"
-					on:click={() => {
+					onclick={() => {
 						saveLoginType()
 					}}
 				>

frontend/src/lib/components/InstanceSetting.svelte

@@ -320,7 +320,7 @@
 								size="xs"
 								options={{ right: setting.advancedToggle.label }}
 								checked={setting.advancedToggle.checked($values)}
-								on:change={() => {
+								onchange={() => {
 									if (setting.advancedToggle) {
 										$values = setting.advancedToggle.onChange($values)
 									}
@@ -340,7 +340,7 @@
 						<div class="flex mt-2">
 							<Button
 								disabled={!$enterpriseLicense}
-								on:click={async (e) => {
+								onclick={async (e) => {
 									try {
 										const res = await SettingService.testMetadata({
 											requestBody: $values[setting.key]
@@ -379,7 +379,7 @@
 							variant="default"
 							unifiedSize="md"
 							disabled={!$values[setting.key]}
-							on:click={async () => {
+							onclick={async () => {
 								await SettingService.testLicenseKey({
 									requestBody: { license_key: $values[setting.key] }
 								})
@@ -492,10 +492,10 @@
 
 						{#if valid || expiration}
 							<div class="flex flex-row gap-2 mt-1">
-								<Button on:click={renewLicenseKey} loading={renewing} size="xs" variant="accent"
+								<Button onclick={renewLicenseKey} loading={renewing} size="xs" variant="accent"
 									>Renew key
 								</Button>
-								<Button variant="accent" size="xs" loading={opening} on:click={openCustomerPortal}>
+								<Button variant="accent" size="xs" loading={opening} onclick={openCustomerPortal}>
 									Open customer portal
 								</Button>
 							</div>
@@ -522,7 +522,7 @@
 								variant="default"
 								disabled={!$enterpriseLicense}
 								size="xs"
-								on:click={() => {
+								onclick={() => {
 									isCriticalAlertsUIOpen.set(true)
 									dispatch('closeDrawer')
 									oncloseDrawer?.()
@@ -630,7 +630,7 @@
 						<Toggle
 							id="otel_tracing_proxy_enabled"
 							checked={tracingProxyVal.enabled ?? false}
-							on:change={(e) => {
+							onchange={(e) => {
 								$values[setting.key] = { ...tracingProxyVal, enabled: e.detail }
 							}}
 							options={{ right: 'Enabled' }}

frontend/src/lib/components/InstanceSettings.svelte

@@ -844,7 +844,7 @@
 			<div class="flex items-center justify-end gap-4 mb-2">
 				<Toggle
 					checked={showSensitive}
-					on:change={(e) => handleShowSensitiveToggle(e.detail)}
+					onchange={(e) => handleShowSensitiveToggle(e)}
 					options={{ right: 'Show sensitive values' }}
 					size="xs"
 				/>
@@ -959,7 +959,7 @@
 				</div>
 				<div class="flex gap-2 mb-4">
 					<Button
-						on:click={sendStats}
+						onclick={sendStats}
 						variant="default"
 						btnClasses="w-auto"
 						loading={sendingStats}
@@ -968,7 +968,7 @@
 						Send usage
 					</Button>
 					<Button
-						on:click={downloadStats}
+						onclick={downloadStats}
 						variant="default"
 						btnClasses="w-auto"
 						loading={downloadingStats}
@@ -1015,7 +1015,7 @@
 					<div class="flex-col flex gap-6 pb-4">
 						{#each scimSamlSetting as setting}
 							<InstanceSetting
-								on:closeDrawer={() => closeDrawer?.()}
+								oncloseDrawer={() => closeDrawer?.()}
 								{loading}
 								{setting}
 								{values}
@@ -1034,7 +1034,7 @@
 				{#if setting.fieldType != 'slack_connect' && !(quickSetup && setting.hideInQuickSetup) && !(quickSetup && category === 'Core' && setting.key === 'license_key')}
 					<InstanceSetting
 						{openSmtpSettings}
-						on:closeDrawer={() => closeDrawer?.()}
+						oncloseDrawer={() => closeDrawer?.()}
 						{loading}
 						{setting}
 						{values}
@@ -1050,7 +1050,7 @@
 					{#if licenseKeySetting}
 						<InstanceSetting
 							{openSmtpSettings}
-							on:closeDrawer={() => closeDrawer?.()}
+							oncloseDrawer={() => closeDrawer?.()}
 							{loading}
 							setting={licenseKeySetting}
 							{values}
@@ -1070,7 +1070,7 @@
 				{#each extraSettings as setting}
 					<InstanceSetting
 						{openSmtpSettings}
-						on:closeDrawer={() => closeDrawer?.()}
+						oncloseDrawer={() => closeDrawer?.()}
 						{loading}
 						{setting}
 						{values}

frontend/src/lib/components/InviteGlobalUser.svelte

@@ -62,7 +62,7 @@
 	<Button
 		variant="accent"
 		size="sm"
-		on:click={addUser}
+		onclick={addUser}
 		disabled={$globalEmailInvite == '' || password == undefined}
 	>
 		Add user to instance

frontend/src/lib/components/InviteUser.svelte

@@ -73,7 +73,7 @@
 			<Button
 				variant="accent"
 				unifiedSize="md"
-				on:click={() => inviteUser(email, selected)}
+				onclick={() => inviteUser(email, selected)}
 				disabled={!email || email.trim() === ''}
 			>
 				Invite

frontend/src/lib/components/ItemPicker.svelte

@@ -79,7 +79,7 @@
 		{documentationLink}
 		overflow_y={false}
 		title="Search {itemName}s"
-		on:close={drawer.closeDrawer}
+		onclose={drawer.closeDrawer}
 	>
 		<div class="w-full h-full flex flex-col">
 			<div class="flex flex-row gap-2 pb-4">
@@ -92,7 +92,7 @@
 					autofocus
 				/>
 				<Button
-					on:click={() => {
+					onclick={() => {
 						refreshing = true
 						loadItems()
 							.then((v) => {
@@ -173,7 +173,7 @@
 											<Button
 												size="sm"
 												variant="default"
-												on:click={() => {
+												onclick={() => {
 													button(obj['path'] ?? '')
 												}}
 											>

frontend/src/lib/components/JobArgs.svelte

@@ -118,7 +118,7 @@ ${Object.entries(args)
 <HighlightTheme />
 
 <Drawer bind:this={jsonViewer} size="900px">
-	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
+	<DrawerContent title="Expanded Args" onclose={jsonViewer.closeDrawer}>
 		{#snippet actions()}
 			<Button
 				download="windmill-args.json"
@@ -132,7 +132,7 @@ ${Object.entries(args)
 				Download
 			</Button>
 			<Button
-				on:click={() => runLocally?.openDrawer()}
+				onclick={() => runLocally?.openDrawer()}
 				color="light"
 				size="xs"
 				startIcon={{ icon: ChevronRightSquare }}
@@ -140,7 +140,7 @@ ${Object.entries(args)
 				Use in a local script
 			</Button>
 			<Button
-				on:click={() => copyToClipboard(jsonStr)}
+				onclick={() => copyToClipboard(jsonStr)}
 				color="light"
 				size="xs"
 				startIcon={{ icon: ClipboardCopy }}
@@ -165,7 +165,7 @@ ${Object.entries(args)
 	</DrawerContent>
 </Drawer>
 <Drawer bind:this={runLocally} size="900px">
-	<DrawerContent title="Run locally" on:close={runLocally.closeDrawer}>
+	<DrawerContent title="Run locally" onclose={runLocally.closeDrawer}>
 		<h3 class="mb-2">Envs</h3>
 		If using the wmill client in your code, set the following env variables:
 		<pre

frontend/src/lib/components/JsonEditor.svelte

@@ -21,6 +21,7 @@
 		onchangeValue?: (...args: any[]) => any
 		onfocus?: (...args: any[]) => any
 		onblur?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -35,7 +36,8 @@
 		fixedOverflowWidgets = true,
 		onchangeValue = undefined,
 		onfocus = undefined,
-		onblur = undefined
+		onblur = undefined,
+		onchange = undefined
 	}: Props = $props()
 
 	let tooBig = $derived(code && code?.length > 1000000)
@@ -67,7 +69,7 @@
 {#if tooBig && !loadTooBigAnyway}
 	<div class="flex-1 text-sm">
 		JSON is too big
-		<Button size="xs2" variant="default" on:click={() => (loadTooBigAnyway = true)}>
+		<Button size="xs2" variant="default" onclick={() => (loadTooBigAnyway = true)}>
 			Load anyway
 		</Button>
 	</div>
@@ -82,10 +84,10 @@
 			<SimpleEditor
 				{loadAsync}
 				{small}
-				on:focus={() => ((dispatch('focus'), onfocus?.()), (focused = true))}
-				on:blur={() => ((dispatch('blur'), onblur?.()), (focused = false))}
+				onfocus={() => ((dispatch('focus'), onfocus?.()), (focused = true))}
+				onblur={() => ((dispatch('blur'), onblur?.()), (focused = false))}
 				bind:this={editor}
-				on:change
+				onchange={onchange}
 				autoHeight
 				lang="json"
 				bind:code

frontend/src/lib/components/JsonInputs.svelte

@@ -69,20 +69,20 @@
 <div class="h-full rounded-md border">
 	<SimpleEditor
 		bind:this={simpleEditor}
-		on:focus={() => {
+		onfocus={() => {
 			if (updateOnBlur) {
 				dispatch('focus')
 				onfocus?.()
 				updatePayloadFromJson(pendingJson)
 			}
 		}}
-		on:blur={async () => {
+		onblur={async () => {
 			if (updateOnBlur) {
 				dispatch('blur')
 				onblur?.()
 			}
 		}}
-		on:change={(e) => {
+		onchange={(e) => {
 			if (e.detail?.code !== undefined) {
 				updatePayloadFromJson(e.detail.code)
 			}

frontend/src/lib/components/KanidmSetting.svelte

@@ -54,7 +54,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '' }
 				} else {

frontend/src/lib/components/KeycloakSetting.svelte

@@ -44,7 +44,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '' }
 				} else {

frontend/src/lib/components/LightweightResourcePicker.svelte

@@ -82,11 +82,11 @@
 					workspace={appViewerContext?.workspace ?? $workspaceStore}
 					{resourceType}
 					express={true}
-					on:error={(e) => {
+					onerror={(e) => {
 						sendUserToast(e.detail, true)
 						open = false
 					}}
-					on:refresh={async (e) => {
+					onrefresh={async (e) => {
 						await loadResources(resourceType)
 						value = e.detail
 						open = false
@@ -99,7 +99,7 @@
 	<Drawer bind:this={drawer} size="800px">
 		<DrawerContent
 			title="Add a resource"
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 			tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 			documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 		>
@@ -110,10 +110,10 @@
 					workspace={appViewerContext?.workspace ?? $workspaceStore}
 					{resourceType}
 					express={false}
-					on:error={(e) => {
+					onerror={(e) => {
 						sendUserToast(e.detail, true)
 					}}
-					on:refresh={async (e) => {
+					onrefresh={async (e) => {
 						await loadResources(resourceType)
 						value = e.detail
 						drawer?.closeDrawer?.()
@@ -147,7 +147,7 @@
 				<Button
 					color="light"
 					size="sm"
-					on:click={() => {
+					onclick={() => {
 						const item = collection[0]
 						if (item) {
 							value = item.value
@@ -183,7 +183,7 @@
 					size="sm"
 					btnClasses="w-8 px-0.5 py-1.5"
 					iconOnly
-					on:click={async () => {
+					onclick={async () => {
 						if (value) {
 							await ResourceService.deleteResource({
 								workspace: appViewerContext?.workspace ?? $workspaceStore,
@@ -203,7 +203,7 @@
 					variant="contained"
 					btnClasses="w-8 px-0.5 py-1.5"
 					size="sm"
-					on:click={() => {
+					onclick={() => {
 						refreshCount += 1
 						open = true
 						drawer?.openDrawer?.()

frontend/src/lib/components/LogViewer.svelte

@@ -239,7 +239,7 @@
 </script>
 
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
-	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
+	<DrawerContent title="Expanded Logs" onclose={logViewer.closeDrawer}>
 		{#snippet actions()}
 			{#if jobId && download}
 				<Button
@@ -256,7 +256,7 @@
 			{/if}
 
 			<Button
-				on:click={() => copyToClipboard(content)}
+				onclick={() => copyToClipboard(content)}
 				color="light"
 				size="xs"
 				startIcon={{

frontend/src/lib/components/Login.svelte

@@ -319,7 +319,7 @@
 					<Button
 						variant="default"
 						startIcon={{ icon, classes: 'h-4' }}
-						on:click={() => storeRedirect(type)}
+						onclick={() => storeRedirect(type)}
 					>
 						{logins.find((login) => login.type === type)?.displayName}
 					</Button>
@@ -329,7 +329,7 @@
 				<Button
 					variant="default"
 					btnClasses="mt-2 w-full"
-					on:click={() => storeRedirect(login.type)}
+					onclick={() => storeRedirect(login.type)}
 				>
 					{login.displayName}
 				</Button>
@@ -339,7 +339,7 @@
 			<Button
 				variant="default"
 				btnClasses="mt-2 w-full"
-				on:click={() => {
+				onclick={() => {
 					if (saml) {
 						window.location.href = saml
 					} else {
@@ -356,7 +356,7 @@
 			<Button
 				size="xs"
 				variant="subtle"
-				on:click={() => {
+				onclick={() => {
 					showPassword = !showPassword
 				}}
 			>

frontend/src/lib/components/ManageTagsDrawer.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title="Manage tags" on:close={() => drawer?.closeDrawer?.()}>
+	<DrawerContent title="Manage tags" onclose={() => drawer?.closeDrawer?.()}>
 		<div class="flex flex-col h-full gap-6">
 			<!-- Overall Description -->
 			<div class="text-xs font-normal text-secondary">
@@ -52,7 +52,7 @@
 				<Section label="Custom tags">
 					<AssignableTagsInner
 						variant="drawer"
-						on:refresh={() => {
+						onrefresh={() => {
 							if (onRefresh) {
 								onRefresh()
 							}

frontend/src/lib/components/ModulePreview.svelte

@@ -65,7 +65,7 @@
 	{#if !hideRunButton}
 		<div class="w-full justify-center flex">
 			{#if testIsLoading}
-				<Button size="sm" on:click={moduleTest?.cancelJob} btnClasses="w-full" color="red">
+				<Button size="sm" onclick={moduleTest?.cancelJob} btnClasses="w-full" color="red">
 					<Loader2 size={16} class="animate-spin mr-1" />
 					Cancel
 				</Button>
@@ -74,7 +74,7 @@
 					variant="accent"
 					btnClasses="truncate"
 					size="sm"
-					on:click={runTestWithStepArgs}
+					onclick={runTestWithStepArgs}
 					shortCut={{
 						Icon: CornerDownLeft
 					}}

frontend/src/lib/components/ModulePreviewForm.svelte

@@ -156,7 +156,7 @@
 								{#snippet fieldHeaderActions()}
 									{#if stepsInputArgs?.isArgManuallySet(mod.id, argName)}
 										<Button
-											on:click={() => {
+											onclick={() => {
 												plugIt(argName)
 											}}
 											size="xs2"

frontend/src/lib/components/MoveDrawer.svelte

@@ -9,6 +9,13 @@
 	import Label from './Label.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 
+	interface Props {
+		onupdate?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	const dispatch = createEventDispatcher()
 
 	type Kind = 'script' | 'resource' | 'schedule' | 'variable' | 'flow' | 'app'
@@ -65,7 +72,7 @@
 </script>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Move/Rename {initialPath}" onclose={drawer.closeDrawer}>
 		{#if !own}
 			<Alert type="warning" title="Not owner" class="mb-4">
 				Since you do not own this item, you cannot move this item (you can however fork it)
@@ -91,7 +98,7 @@
 			<Path disabled={!own} {kind} {initialPath} bind:path bind:dirty={dirtyPath} />
 		</Label>
 		{#snippet actions()}
-			<Button variant="accent" disabled={!own || !hasChanges} on:click={updatePath}
+			<Button variant="accent" disabled={!own || !hasChanges} onclick={updatePath}
 				>Move/Rename</Button
 			>
 		{/snippet}

frontend/src/lib/components/NextcloudSetting.svelte

@@ -50,7 +50,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="nextcloud" after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '', domain: '' }
 				} else {

frontend/src/lib/components/NumberTypeNarrowing.svelte

@@ -74,7 +74,7 @@
 		{/snippet}
 		<ToggleButtonGroup
 			selected={mode ?? 'none'}
-			onSelected={(v) => onModeChange(v === 'none' ? undefined : v)}
+			onselected={(v) => onModeChange(v === 'none' ? undefined : v)}
 		>
 			{#snippet children({ item })}
 				<ToggleButton value="none" label="None" {item} size="sm" />

frontend/src/lib/components/OAuthSetting.svelte

@@ -83,7 +83,7 @@
 		<Toggle
 			checked={enabled}
 			disabled={eeOnly && !$enterpriseLicense}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					if (name === 'teams' || name === 'microsoft') {
 						value = { id: '', secret: '', tenant: '' }

frontend/src/lib/components/OauthExtraParams.svelte

@@ -23,7 +23,7 @@
 			variant="subtle"
 			destructive
 			unifiedSize="md"
-			on:click={() => {
+			onclick={() => {
 				extra_params_vec = extra_params_vec.filter((e) => e[0] != o[0])
 				sync()
 			}}
@@ -38,7 +38,7 @@
 		hover="yo"
 		size="sm"
 		endIcon={{ icon: Plus }}
-		on:click={() => {
+		onclick={() => {
 			extra_params_vec = (extra_params_vec ?? []).concat([['key', 'value']])
 			sync()
 		}}

frontend/src/lib/components/OauthScopes.svelte

@@ -17,7 +17,7 @@
 				variant="default"
 				size="xs"
 				btnClasses="mx-6"
-				on:click={() => {
+				onclick={() => {
 					scopes = scopes.filter((_, idx) => idx != i)
 				}}
 				startIcon={{ icon: Minus }}
@@ -33,7 +33,7 @@
 		hover="yo"
 		size="xs"
 		startIcon={{ icon: Plus }}
-		on:click={() => {
+		onclick={() => {
 			scopes = (scopes ?? []).concat('')
 		}}
 	>

frontend/src/lib/components/ObjectStoreConfigSettings.svelte

@@ -103,7 +103,7 @@
 		disabled={!$enterpriseLicense}
 		options={{ right: bucket_config ? '' : 'set object store' }}
 		checked={Boolean(bucket_config)}
-		on:change={(e) => {
+		onchange={(e) => {
 			if (e.detail) {
 				bucket_config = {
 					type: 'S3',
@@ -128,7 +128,7 @@
 				size="xs"
 				btnClasses="h-8"
 				variant="default"
-				on:click={testConnection}
+				onclick={testConnection}
 			>
 				{#if loading}
 					<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
@@ -147,7 +147,7 @@
 
 		<Tabs
 			selected={bucket_config?.type ?? 'S3'}
-			on:selected={(e) => {
+			onselected={(e) => {
 				if (e.detail === 'S3' && bucket_config?.type !== 'S3') {
 					bucket_config = {
 						type: 'S3',
@@ -257,7 +257,7 @@
 					<div>
 						<Toggle
 							checked={effectiveAllowHttp}
-							on:change={(e) => {
+							onchange={(e) => {
 								if (bucket_config?.type === 'S3') {
 									bucket_config = { ...bucket_config, allow_http: e.detail }
 								}
@@ -380,7 +380,7 @@
 						bind:this={simpleEditor}
 						lang="json"
 						bind:code={serviceAccountKeyCode}
-						on:change={(e) => {
+						onchange={(e) => {
 							if (bucket_config?.type === 'Gcs') {
 								if (e.detail.code === undefined || e.detail.code === '') {
 									bucket_config = { ...bucket_config, serviceAccountKey: undefined }

frontend/src/lib/components/OktaSetting.svelte

@@ -48,7 +48,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name="okta" after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '', domain: '', custom: false }
 				} else {
@@ -64,7 +64,7 @@
 					<div>
 						<ToggleButtonGroup
 							selected={value['custom'] ? 'custom' : 'org'}
-							on:selected={({ detail }) => {
+							onselected={(detail) => {
 								value['custom'] = detail === 'custom'
 							}}
 						>

frontend/src/lib/components/Path.svelte

@@ -410,7 +410,7 @@
 				<div class="block">
 					<ToggleButtonGroup
 						bind:selected={meta.ownerKind}
-						on:selected={(e) => {
+						onselected={(e) => {
 							setDirty()
 							const kind = e.detail
 							if (meta) {
@@ -592,7 +592,7 @@
 			<div class="flex pt-2">
 				<Button
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						openSearchWithPrefilledText('#')
 					}}
 					startIcon={{ icon: SearchCode }}