From f0a74b3461348712c7c3d25c6f3ff930fa5abf9c Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Fri, 27 Feb 2026 17:23:50 +0100
Subject: [PATCH] refactor: migrate on: event directives to svelte 5 syntax

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../lib/components/AIProviderPicker.svelte    |   4 +-
 frontend/src/lib/components/AddUser.svelte    |   9 +-
 .../src/lib/components/ApiConnectForm.svelte  |   4 +-
 .../lib/components/AppConnectDrawer.svelte    |  16 ++-
 .../src/lib/components/AppConnectInner.svelte |   6 +-
 ...AppConnectLightweightResourcePicker.svelte |  14 +-
 .../src/lib/components/AppTutorials.svelte    |   7 +
 frontend/src/lib/components/ArgInfo.svelte    |   4 +-
 frontend/src/lib/components/ArgInput.svelte   |  74 +++++------
 .../lib/components/ArrayTypeNarrowing.svelte  |   4 +-
 .../src/lib/components/AssignableTags.svelte  |   6 +-
 .../src/lib/components/Auth0Setting.svelte    |   4 +-
 .../src/lib/components/AuthSettings.svelte    |   2 +-
 .../src/lib/components/AutheliaSetting.svelte |   2 +-
 .../lib/components/AuthentikSetting.svelte    |   2 +-
 .../components/AutoscalingConfigEditor.svelte |   2 +-
 .../lib/components/AutoscalingEvents.svelte   |   4 +-
 .../components/BedrockCredentialsCheck.svelte |   2 +-
 .../components/ChangeInstanceUsername.svelte  |   8 +-
 .../ChangeInstanceUsernameInner.svelte        |   2 +-
 .../lib/components/CompareWorkspaces.svelte   |   8 +-
 .../lib/components/ConnectionSection.svelte   |   2 +-
 .../lib/components/ContentSearchInner.svelte  |  22 ++--
 .../ContextualVariableEditor.svelte           |  10 +-
 frontend/src/lib/components/CronInput.svelte  |   2 +-
 frontend/src/lib/components/DBManager.svelte  |  18 +--
 .../src/lib/components/DBManagerDrawer.svelte |   8 +-
 .../lib/components/DBSchemaExplorer.svelte    |   2 +-
 frontend/src/lib/components/DBTable.svelte    |   2 +-
 .../src/lib/components/DBTableEditor.svelte   |  16 +--
 .../src/lib/components/DateTimeInput.svelte   |   4 +-
 .../DedicatedWorkersSelector.svelte           |   6 +-
 .../src/lib/components/DefaultScripts.svelte  |   4 +-
 .../lib/components/DefaultScriptsInner.svelte |   2 +-
 .../lib/components/DefaultTagsInner.svelte    |   2 +-
 .../DependenciesDeploymentWarning.svelte      |   4 +-
 .../src/lib/components/DeployButton.svelte    |   8 +-
 .../src/lib/components/DeployToSetting.svelte |   4 +-
 .../src/lib/components/DeployWorkspace.svelte |   2 +-
 .../components/DeployWorkspaceDrawer.svelte   |   4 +-
 frontend/src/lib/components/Dev.svelte        |  10 +-
 frontend/src/lib/components/DiffDrawer.svelte |   8 +-
 frontend/src/lib/components/DiffEditor.svelte |   2 +-
 .../src/lib/components/DisplayResult.svelte   |  22 ++--
 .../lib/components/EditableSchemaForm.svelte  |  28 ++--
 frontend/src/lib/components/EditorBar.svelte  |  52 ++++----
 .../src/lib/components/EditorTheme.svelte     |   2 +-
 .../components/ErrorOrRecoveryHandler.svelte  |   8 +-
 .../lib/components/ExploreAssetButton.svelte  |   2 +-
 .../src/lib/components/FirstStepInputs.svelte |   8 ++
 .../src/lib/components/FlowBuilder.svelte     |  22 ++--
 .../lib/components/FlowGraphViewerStep.svelte |   4 +-
 .../components/FlowHistoryJobPicker.svelte    |   2 +-
 .../FlowLoopIterationPreview.svelte           |   6 +-
 .../src/lib/components/FlowPlugConnect.svelte |   6 +-
 .../lib/components/FlowPreviewContent.svelte  |  26 ++--
 .../components/FlowStatusViewerInner.svelte   |   8 +-
 .../FlowStatusWaitingForEvents.svelte         |   2 +-
 .../src/lib/components/FlowTutorials.svelte   |   8 ++
 .../src/lib/components/FlowViewerInner.svelte |   6 +-
 .../src/lib/components/FolderEditor.svelte    |  24 ++--
 .../src/lib/components/FolderPicker.svelte    |   4 +-
 .../lib/components/ForkWorkspaceBanner.svelte |   2 +-
 .../src/lib/components/FormatOnSave.svelte    |   2 +-
 .../components/GitHubAppIntegration.svelte    |  16 +--
 .../components/GitRepoResourcePicker.svelte   |   6 +-
 .../src/lib/components/GroupEditor.svelte     |   6 +-
 .../src/lib/components/HistoricInputs.svelte  |   6 +-
 .../src/lib/components/HistoricList.svelte    |   8 +-
 .../components/HttpAgentWorkerDrawer.svelte   |   6 +-
 .../src/lib/components/InfiniteList.svelte    |   2 +-
 .../lib/components/InputTransformForm.svelte  |  30 ++---
 .../InputTransformSchemaForm.svelte           |   2 +-
 .../lib/components/InstanceGroupEditor.svelte |   4 +-
 .../lib/components/InstanceNameEditor.svelte  |  10 +-
 .../src/lib/components/InstanceSetting.svelte |  14 +-
 .../lib/components/InstanceSettings.svelte    |  14 +-
 .../lib/components/InviteGlobalUser.svelte    |   2 +-
 frontend/src/lib/components/InviteUser.svelte |   2 +-
 frontend/src/lib/components/ItemPicker.svelte |   6 +-
 frontend/src/lib/components/JobArgs.svelte    |   8 +-
 frontend/src/lib/components/JsonEditor.svelte |  12 +-
 frontend/src/lib/components/JsonInputs.svelte |   6 +-
 .../src/lib/components/KanidmSetting.svelte   |   2 +-
 .../src/lib/components/KeycloakSetting.svelte |   2 +-
 .../LightweightResourcePicker.svelte          |  16 +--
 frontend/src/lib/components/LogViewer.svelte  |   4 +-
 frontend/src/lib/components/Login.svelte      |   8 +-
 .../lib/components/ManageTagsDrawer.svelte    |   4 +-
 .../src/lib/components/ModulePreview.svelte   |   4 +-
 .../lib/components/ModulePreviewForm.svelte   |   2 +-
 frontend/src/lib/components/MoveDrawer.svelte |  11 +-
 .../lib/components/NextcloudSetting.svelte    |   2 +-
 .../lib/components/NumberTypeNarrowing.svelte |   2 +-
 .../src/lib/components/OAuthSetting.svelte    |   2 +-
 .../lib/components/OauthExtraParams.svelte    |   4 +-
 .../src/lib/components/OauthScopes.svelte     |   4 +-
 .../ObjectStoreConfigSettings.svelte          |  10 +-
 .../src/lib/components/OktaSetting.svelte     |   4 +-
 frontend/src/lib/components/Path.svelte       |   4 +-
 .../components/PersistentScriptDrawer.svelte  |   8 +-
 .../src/lib/components/PocketIdSetting.svelte |   2 +-
 .../lib/components/QueueMetricsDrawer.svelte  |   2 +-
 frontend/src/lib/components/Range.svelte      |   2 +-
 .../lib/components/RelativeLineNumbers.svelte |   2 +-
 .../src/lib/components/ResourceEditor.svelte  |   4 +-
 .../components/ResourceEditorDrawer.svelte    |  14 +-
 .../lib/components/ResourceNarrowing.svelte   |   2 +-
 .../src/lib/components/ResourcePicker.svelte  |  12 +-
 .../lib/components/ResourceTypePicker.svelte  |   4 +-
 frontend/src/lib/components/RunForm.svelte    |   8 +-
 .../components/RunFormAdvancedPopup.svelte    |   4 +-
 .../lib/components/RunPageTutorials.svelte    |  16 ++-
 frontend/src/lib/components/RunsPage.svelte   |  28 ++--
 .../src/lib/components/S3FilePicker.svelte    |  10 +-
 .../lib/components/S3FilePickerInner.svelte   |  18 +--
 .../src/lib/components/S3ObjectPicker.svelte  |   8 +-
 .../lib/components/SaveInputsButton.svelte    |   2 +-
 .../src/lib/components/SaveToWorkspace.svelte |   2 +-
 .../lib/components/SavedInputsPicker.svelte   |  12 +-
 .../src/lib/components/SavedInputsV2.svelte   |  12 +-
 frontend/src/lib/components/SchemaForm.svelte |  18 +--
 .../components/SchemaFormWithArgPicker.svelte |  12 +-
 .../src/lib/components/SchemaViewer.svelte    |   2 +-
 .../src/lib/components/ScriptBuilder.svelte   |  52 ++++----
 .../src/lib/components/ScriptEditor.svelte    |  58 +++++----
 .../src/lib/components/ScriptPicker.svelte    |  12 +-
 .../components/ScriptVersionHistory.svelte    |   8 +-
 .../lib/components/ServiceLogsInner.svelte    |   8 +-
 frontend/src/lib/components/ShareModal.svelte |  16 ++-
 frontend/src/lib/components/Slider.svelte     |   2 +-
 frontend/src/lib/components/SqlRepl.svelte    |   4 +-
 .../lib/components/StringTypeNarrowing.svelte |  16 +--
 .../src/lib/components/SupabaseConnect.svelte |  14 +-
 .../lib/components/SuperadminSettings.svelte  |  10 +-
 .../components/SuperadminSettingsInner.svelte |  24 ++--
 .../src/lib/components/TestConnection.svelte  |   2 +-
 frontend/src/lib/components/Toggle.svelte     |   1 +
 .../src/lib/components/UserSettings.svelte    |   4 +-
 .../src/lib/components/VariableEditor.svelte  |  14 +-
 frontend/src/lib/components/VimMode.svelte    |   2 +-
 .../src/lib/components/WorkerGroup.svelte     |  42 +++---
 frontend/src/lib/components/WorkerRepl.svelte |  20 +--
 .../src/lib/components/WorkerTagPicker.svelte |   2 +-
 .../src/lib/components/WorkerTagSelect.svelte |   2 +-
 .../WorkspaceDependenciesEditor.svelte        |  15 ++-
 .../WorkspaceDependenciesViewer.svelte        |   6 +-
 .../src/lib/components/ZitadelSetting.svelte  |   2 +-
 .../apps/components/buttons/AppButton.svelte  |  12 +-
 .../apps/components/buttons/AppForm.svelte    |   4 +-
 .../components/buttons/AppFormButton.svelte   |   6 +-
 .../components/display/AppCarouselList.svelte |   6 +-
 .../apps/components/display/AppChat.svelte    |   6 +-
 .../components/display/AppDownload.svelte     |   2 +-
 .../apps/components/display/AppMenu.svelte    |   2 +-
 .../components/display/AppNavbarItem.svelte   |   2 +-
 .../apps/components/display/AppPdf.svelte     |   4 +-
 .../apps/components/display/AppText.svelte    |   2 +-
 .../display/InsertRowDrawerButton.svelte      |   6 +-
 .../display/charts/AppAgCharts.svelte         |   2 +-
 .../display/dbtable/AppDbExplorer.svelte      |  10 +-
 .../table/AppAggridExplorerTable.svelte       |   2 +-
 .../table/AppAggridInfiniteTable.svelte       |   2 +-
 .../display/table/AppAggridTable.svelte       |  10 +-
 .../table/AppAggridTableActions.svelte        |   2 +-
 .../components/display/table/AppTable.svelte  |   8 +-
 .../display/table/AppTableFooter.svelte       |   8 +-
 .../display/table/SyncColumnDefs.svelte       |   6 +-
 .../components/helpers/RefreshButton.svelte   |   8 +-
 .../helpers/RunnableComponent.svelte          |   2 +-
 .../components/helpers/RunnableWrapper.svelte |  32 +++--
 .../apps/components/inputs/AppCheckbox.svelte |   2 +-
 .../components/inputs/AppDateTimeInput.svelte |   4 +-
 .../components/inputs/AppS3FileInput.svelte   |   6 +-
 .../components/inputs/AppSelectStep.svelte    |   2 +-
 .../components/layout/AppDecisionTree.svelte  |   4 +-
 .../apps/components/layout/AppDrawer.svelte   |  10 +-
 .../apps/components/layout/AppList.svelte     |   4 +-
 .../apps/components/layout/AppModal.svelte    |   4 +-
 .../apps/components/layout/AppStepper.svelte  |   6 +-
 .../apps/editor/AppDeploymentHistory.svelte   |   6 +-
 .../components/apps/editor/AppEditor.svelte   |  43 ++++---
 .../apps/editor/AppEditorBottomPanel.svelte   |   8 +-
 .../apps/editor/AppEditorHeader.svelte        |  50 ++++----
 .../apps/editor/AppEditorHeaderDeploy.svelte  |   4 +-
 .../apps/editor/AppEditorTutorial.svelte      |  16 ++-
 .../apps/editor/AppExportButton.svelte        |   4 +-
 .../apps/editor/AppJobsDrawer.svelte          |  10 +-
 .../apps/editor/AppJsonEditor.svelte          |  13 +-
 .../components/apps/editor/AppPreview.svelte  |   4 +-
 .../apps/editor/AppReportsDrawerInner.svelte  |  12 +-
 .../apps/editor/ComponentHeader.svelte        |   4 +-
 .../apps/editor/DeploymentHistory.svelte      |   9 +-
 .../components/apps/editor/GridEditor.svelte  |  12 +-
 .../apps/editor/PreviewToggle.svelte          |   2 +-
 .../apps/editor/RecomputeAllButton.svelte     |   6 +-
 .../apps/editor/RecomputeAllComponents.svelte |   4 +-
 .../apps/editor/RecomputeAllWrapper.svelte    |   4 +-
 .../apps/editor/SettingsPanel.svelte          |   6 +
 .../apps/editor/SubGridEditor.svelte          |   6 +-
 .../apps/editor/component/Component.svelte    |  14 +-
 .../editor/component/ComponentInner.svelte    |   2 +-
 .../editor/component/ComponentRendered.svelte |  18 ++-
 .../componentsPanel/ComponentList.svelte      |   4 +-
 .../componentsPanel/CssHelperPanel.svelte     |  13 +-
 .../editor/componentsPanel/CssProperty.svelte |  10 +-
 .../editor/componentsPanel/CssSettings.svelte |   8 +-
 .../componentsPanel/CustomComponentRow.svelte |   2 +-
 .../CustomComponentsList.svelte               |  10 +-
 .../editor/componentsPanel/GroupList.svelte   |   4 +-
 .../GroupManagementDrawer.svelte              |   2 +-
 .../editor/componentsPanel/GroupRow.svelte    |   2 +-
 .../editor/componentsPanel/NameEditor.svelte  |   2 +-
 .../componentsPanel/QuickStyleProperty.svelte |   8 +-
 .../editor/componentsPanel/ThemeDrawer.svelte |   2 +-
 .../editor/componentsPanel/ThemeList.svelte   |  16 ++-
 .../componentsPanel/ThemeNameEditor.svelte    |   2 +-
 .../editor/componentsPanel/ThemeRow.svelte    |   8 +-
 .../contextPanel/ComponentOutput.svelte       |   2 +-
 .../contextPanel/ComponentOutputViewer.svelte |   6 +-
 .../editor/contextPanel/ContextPanel.svelte   |  13 +-
 .../editor/contextPanel/DebugPanel.svelte     |   4 +-
 .../editor/contextPanel/LazyModePanel.svelte  |   2 +-
 .../components/BackgroundScriptOutput.svelte  |   2 +-
 .../contextPanel/components/Output.svelte     |   2 +-
 .../inlineScriptsPanel/CacheTtlPopup.svelte   |   2 +-
 .../EmptyInlineScript.svelte                  |  20 +--
 .../InlineScriptEditor.svelte                 |  12 +-
 .../InlineScriptEditorDrawer.svelte           |   8 +-
 .../InlineScriptEditorPanel.svelte            |  14 +-
 .../InlineScriptHiddenRunnable.svelte         |  20 +--
 .../InlineScriptRunnableByPath.svelte         |  18 +--
 .../InlineScriptsPanel.svelte                 |  18 +--
 .../InlineScriptsPanelList.svelte             |  15 ++-
 .../InlineScriptsPanelWithTable.svelte        |  12 +-
 .../inlineScriptsPanel/RunButton.svelte       |   4 +-
 .../settingsPanel/AlignmentEditor.svelte      |   4 +-
 .../ArrayStaticInputEditor.svelte             |   8 +-
 .../settingsPanel/CSSMigrationModal.svelte    |   8 +-
 .../settingsPanel/ComponentControl.svelte     |   2 +-
 .../ComponentInputTypeEditor.svelte           |   2 +-
 .../settingsPanel/ComponentPanel.svelte       |   8 +-
 .../ComponentPanelDataSource.svelte           |   6 +-
 .../settingsPanel/CssPropertyWrapper.svelte   |  10 +-
 .../DecisionTreeGraphEditor.svelte            |   8 +-
 .../DecisionTreeGraphHeader.svelte            |   4 +-
 .../DecisionTreeGraphNode.svelte              |   6 +-
 .../editor/settingsPanel/GridCondition.svelte |   2 +-
 .../editor/settingsPanel/GridGroup.svelte     |   8 +-
 .../editor/settingsPanel/GridNavbar.svelte    |   4 +-
 .../apps/editor/settingsPanel/GridPane.svelte |   4 +-
 .../apps/editor/settingsPanel/GridTab.svelte  |   4 +-
 .../settingsPanel/GridTabDisabled.svelte      |   2 +-
 .../editor/settingsPanel/GridTabHidden.svelte |   2 +-
 .../editor/settingsPanel/HideButton.svelte    |   6 +-
 .../settingsPanel/InputsSpecEditor.svelte     |   4 +-
 .../settingsPanel/InputsSpecsEditor.svelte    |   2 +-
 .../editor/settingsPanel/MenuItems.svelte     |   4 +-
 .../settingsPanel/QuickAddColumn.svelte       |   2 +-
 .../RefreshDatabaseStudioTable.svelte         |   2 +-
 .../editor/settingsPanel/StylePanel.svelte    |  18 +--
 .../editor/settingsPanel/SubTypeEditor.svelte |   6 +-
 .../editor/settingsPanel/TableActions.svelte  |  10 +-
 .../inputEditor/ColorInput.svelte             |   2 +-
 .../inputEditor/ConnectedInputEditor.svelte   |   4 +-
 .../inputEditor/EvalInputEditor.svelte        |   2 +-
 .../inputEditor/EvalV2InputEditor.svelte      |  12 +-
 .../inputEditor/IconSelectInput.svelte        |   4 +-
 .../inputEditor/RunnableInputEditor.svelte    |   2 +-
 .../inputEditor/StaticInputEditor.svelte      |  20 +--
 .../inputEditor/UploadInputEditor.svelte      |   2 +-
 .../mainInput/RunnableSelector.svelte         |  14 +-
 .../script/BackgroundScriptSettings.svelte    |   2 +-
 .../script/ComponentScriptSettings.svelte     |   2 +-
 .../shared/ScriptRunConfiguration.svelte      |   4 +-
 .../shared/ScriptSettingsActions.svelte       |   2 +-
 .../script/shared/ScriptTransformer.svelte    |   2 +-
 .../script/shared/ScriptTriggers.svelte       |   2 +-
 .../secondaryMenu/SecondaryMenu.svelte        |   2 +-
 frontend/src/lib/components/apps/types.ts     |   1 +
 .../lib/components/assets/AssetButtons.svelte |   2 +-
 .../assets/AssetsUsageDrawer.svelte           |   4 +-
 .../auditLogs/AuditLogsFilters.svelte         |   2 +-
 .../auditLogs/AuditLogsTable.svelte           |   8 +-
 .../src/lib/components/chat/ChatInput.svelte  |   4 +-
 .../lib/components/common/CloseButton.svelte  |   4 +-
 .../common/button/ConnectionButton.svelte     |   2 +-
 .../common/button/RefreshButton.svelte        |   4 +-
 .../components/common/button/UndoRedo.svelte  |   4 +-
 .../calendarPicker/CalendarPicker.svelte      |   4 +-
 .../ConfirmationModal.svelte                  |  16 +--
 .../DeployOverrideConfirmationModal.svelte    |   6 +-
 .../DraftTriggersConfirmationModal.svelte     |   6 +-
 .../UnsavedConfirmationModal.svelte           |   6 +-
 .../asyncConfirmationModal.svelte.ts          |   6 +-
 .../common/drawer/DrawerContent.svelte        |   2 +-
 .../common/fileUpload/FileUpload.svelte       |  14 +-
 .../common/fileUpload/FileUploadModal.svelte  |   6 +-
 .../common/fileUpload/S3ArgInput.svelte       |  12 +-
 .../lib/components/common/modal/Modal.svelte  |   4 +-
 .../common/seconds/SecondsInput.svelte        |   2 +-
 .../lib/components/common/table/AppRow.svelte |   2 +-
 .../components/common/table/ScriptRow.svelte  |   4 +-
 .../src/lib/components/common/tabs/Tab.svelte |   6 +-
 .../toggleButton-v2/ToggleButtonGroup.svelte  |   6 +-
 .../components/copilot/AIFormAssistant.svelte |   2 +-
 .../components/copilot/AIFormSettings.svelte  |   2 +-
 .../lib/components/copilot/AskAiButton.svelte |   2 +-
 .../copilot/CodeCompletionStatus.svelte       |   4 +-
 .../src/lib/components/copilot/CronGen.svelte |   4 +-
 .../copilot/FlowCopilotInputsModal.svelte     |  10 +-
 .../lib/components/copilot/IteratorGen.svelte |  10 +-
 .../components/copilot/PredicateGen.svelte    |   4 +-
 .../lib/components/copilot/RegexGen.svelte    |  13 +-
 .../lib/components/copilot/ScriptFix.svelte   |   2 +-
 .../lib/components/copilot/ScriptGen.svelte   |  18 +--
 .../components/copilot/StepGenQuick.svelte    |   1 +
 .../components/copilot/StepInputGen.svelte    |  12 +-
 .../components/copilot/StepInputsGen.svelte   |   8 +-
 .../lib/components/copilot/TestAIKey.svelte   |   2 +-
 .../lib/components/copilot/chat/AIChat.svelte |   2 +-
 .../copilot/chat/AIChatDisplay.svelte         |  10 +-
 .../copilot/chat/AIChatMessage.svelte         |   2 +-
 .../copilot/chat/ChatQuickActions.svelte      |   6 +-
 .../chat/DatatableCreationPolicy.svelte       |   2 +-
 .../copilot/chat/ToolExecutionDisplay.svelte  |   4 +-
 .../details/DetailPageHeader.svelte           |   2 +-
 .../details/ErrorHandlerToggleButton.svelte   |   2 +-
 .../details/ErrorHandlerToggleButtonV2.svelte |   2 +-
 .../lib/components/display/PdfViewer.svelte   |  14 +-
 .../components/flows/CreateActionsApp.svelte  |   6 +-
 .../components/flows/CreateActionsFlow.svelte |   4 +-
 .../lib/components/flows/DebounceLimit.svelte |   2 +-
 .../lib/components/flows/FlowEditor.svelte    |  16 ++-
 .../flows/FlowEditorTutorial.svelte           |  18 ++-
 .../lib/components/flows/FlowHistory.svelte   |   2 +-
 .../components/flows/FlowHistoryInner.svelte  |   8 +-
 .../components/flows/common/FlowCard.svelte   |  10 +-
 .../flows/common/FlowCardHeader.svelte        |  10 +-
 .../content/BranchPredicateEditor.svelte      |  12 +-
 .../flows/content/DynamicInputHelpBox.svelte  |   2 +-
 .../flows/content/FlowBranchOneWrapper.svelte |   2 +-
 .../content/FlowBranchesOneWrapper.svelte     |   2 +-
 .../flows/content/FlowEditorDrawer.svelte     |  11 +-
 .../flows/content/FlowEditorPanel.svelte      |  18 ++-
 .../content/FlowEnvironmentVariables.svelte   |   2 +-
 .../components/flows/content/FlowInput.svelte |  51 ++++----
 .../flows/content/FlowInputs.svelte           |  10 +-
 .../flows/content/FlowInputsQuick.svelte      |  23 ++--
 .../components/flows/content/FlowLoop.svelte  |  26 ++--
 .../flows/content/FlowModuleCache.svelte      |   2 +-
 .../flows/content/FlowModuleComponent.svelte  |  46 +++----
 .../content/FlowModuleDeleteAfterUse.svelte   |   2 +-
 .../flows/content/FlowModuleEarlyStop.svelte  |  12 +-
 .../flows/content/FlowModuleHeader.svelte     |  13 +-
 .../flows/content/FlowModuleMock.svelte       |   4 +-
 .../flows/content/FlowModuleSkip.svelte       |   4 +-
 .../flows/content/FlowModuleSleep.svelte      |   4 +-
 .../flows/content/FlowModuleSuspend.svelte    |  14 +-
 .../flows/content/FlowModuleTimeout.svelte    |   4 +-
 .../content/FlowModuleWorkerTagSelect.svelte  |   2 +-
 .../flows/content/FlowModuleWrapper.svelte    |   6 +-
 .../flows/content/FlowRetries.svelte          |   6 +-
 .../flows/content/FlowSettings.svelte         |  20 +--
 .../flows/content/FlowWhileLoop.svelte        |   6 +-
 .../flows/content/ScriptEditorDrawer.svelte   |  25 ++--
 .../flows/content/SuspendDrawer.svelte        |   4 +-
 .../flows/header/FlowImportExportMenu.svelte  |   2 +-
 .../flows/header/FlowPreviewButtons.svelte    |   6 +-
 .../flows/header/FlowYamlEditor.svelte        |   8 +-
 .../flows/map/FlowErrorHandlerItem.svelte     |   4 +-
 .../flows/map/FlowGraphPreviewButton.svelte   |   4 +-
 .../flows/map/FlowModuleSchemaItem.svelte     |   7 +-
 .../flows/map/FlowModuleSchemaMap.svelte      |  12 +-
 .../flows/map/FlowStickyNode.svelte           |   6 +-
 .../flows/map/InsertModuleInner.svelte        |  20 ++-
 .../flows/map/InsertModulePopover.svelte      |  20 ++-
 .../lib/components/flows/map/MapItem.svelte   |  41 +++---
 .../components/flows/map/VirtualItem.svelte   |   7 +-
 .../flows/pickers/FlowScriptPicker.svelte     |   6 +-
 .../flows/propPicker/OutputPickerInner.svelte |  22 ++--
 .../flows/propPicker/PropPickerWrapper.svelte |   4 +-
 .../flows/propPicker/StepHistory.svelte       |   8 +-
 .../git_sync/GitSyncRepositoryCard.svelte     |   2 +-
 .../lib/components/graph/FlowGraphV2.svelte   |   2 +-
 .../graph/renderers/edges/BaseEdge.svelte     |   6 +-
 .../renderers/nodes/BranchAllEndNode.svelte   |   2 +-
 .../renderers/nodes/BranchAllStart.svelte     |   4 +-
 .../renderers/nodes/BranchOneStart.svelte     |   2 +-
 .../renderers/nodes/ForLoopEndNode.svelte     |   4 +-
 .../renderers/nodes/ForLoopStartNode.svelte   |   2 +-
 .../graph/renderers/nodes/InputNode.svelte    |   8 +-
 .../graph/renderers/nodes/ModuleNode.svelte   |   8 +-
 .../renderers/nodes/NewAIToolNode.svelte      |  14 +-
 .../graph/renderers/nodes/NoBranchNode.svelte |   2 +-
 .../graph/renderers/nodes/ResultNode.svelte   |   2 +-
 .../graph/renderers/nodes/SubflowBound.svelte |   2 +-
 .../graph/renderers/nodes/TriggersNode.svelte |  10 +-
 .../renderers/nodes/branchOneEndNode.svelte   |   2 +-
 .../renderers/triggers/TriggersWrapper.svelte |   6 +-
 frontend/src/lib/components/home/Item.svelte  |  15 ++-
 .../src/lib/components/home/ItemsList.svelte  |  30 ++---
 .../src/lib/components/home/TreeView.svelte   |  42 +++---
 .../lib/components/home/TreeViewRoot.svelte   |  22 +++-
 .../IndexerMemorySettings.svelte              |  12 +-
 .../SecretBackendConfig.svelte                |  12 +-
 .../instanceSettings/SmtpSettings.svelte      |   2 +-
 .../propertyPicker/ObjectViewer.svelte        |  14 +-
 .../propertyPicker/PropPicker.svelte          |  38 +++---
 .../propertyPicker/PropPickerResult.svelte    |  10 +-
 .../raw_apps/RawAppDataTableDrawer.svelte     |   8 +-
 .../components/raw_apps/RawAppEditor.svelte   |  10 +-
 .../raw_apps/RawAppEditorHeader.svelte        |  36 +++---
 .../raw_apps/RawAppInlineScriptEditor.svelte  |  19 +--
 .../RawAppInlineScriptPanelList.svelte        |   2 +-
 .../RawAppInlineScriptRunnable.svelte         |  20 +--
 .../raw_apps/RawAppInlineScriptsPanel.svelte  |   4 +-
 .../raw_apps/RawAppInputsSpecEditor.svelte    |   2 +-
 .../components/raw_apps/RawAppSidebar.svelte  |   2 +-
 .../recording/FlowRecordingReplay.svelte      |   4 +-
 .../runs/BatchReRunOptionsPane.svelte         |   4 +-
 .../runs/PreprocessedArgsDisplay.svelte       |   6 +-
 .../src/lib/components/runs/RunRow.svelte     |   5 +-
 .../src/lib/components/runs/RunsQueue.svelte  |   4 +-
 .../src/lib/components/runs/RunsTable.svelte  |  33 +++--
 .../lib/components/schema/AddProperty.svelte  |   2 +-
 .../components/schema/AddPropertyForm.svelte  |   9 +-
 .../schema/AddPropertyFormV2.svelte           |   2 +-
 .../components/schema/AddPropertyV2.svelte    |   2 +-
 .../schema/EditableSchemaDrawer.svelte        |  16 +--
 .../schema/EditableSchemaWrapper.svelte       |   4 +-
 .../schema/FlowPropertyEditor.svelte          |  22 ++--
 .../schema/InputSelectedBadge.svelte          |   2 +-
 .../components/schema/PropertyEditor.svelte   |   4 +-
 .../components/schema/SchemaFormDND.svelte    |  28 ++--
 .../components/scriptEditor/LogPanel.svelte   |   2 +-
 .../search/GlobalSearchModal.svelte           |   2 +-
 .../components/select/DraggableTags.svelte    |   2 +-
 .../lib/components/select/MultiSelect.svelte  |   2 +-
 .../src/lib/components/select/Select.svelte   |   2 +-
 .../components/settings/AIUserSettings.svelte |   6 +-
 .../settings/ChangeWorkspaceColor.svelte      |   6 +-
 .../settings/ChangeWorkspaceId.svelte         |   4 +-
 .../settings/ChangeWorkspaceName.svelte       |   4 +-
 .../components/settings/CreateToken.svelte    |  12 +-
 .../components/settings/PremiumInfo.svelte    |   6 +-
 .../components/settings/TokensTable.svelte    |   6 +-
 .../settings/UserInfoSettings.svelte          |   2 +-
 .../settings/WorkspaceOperatorSettings.svelte |   4 +-
 .../settings/WorkspaceUserSettings.svelte     |  46 +++----
 .../sidebar/CriticalAlertModal.svelte         |   4 +-
 .../sidebar/CriticalAlertTable.svelte         |   8 +-
 .../components/sidebar/SidebarContent.svelte  |   8 +-
 .../lib/components/table/AutoDataTable.svelte |   6 +-
 .../src/lib/components/table/DataTable.svelte |   7 +-
 .../lib/components/table/DownloadCsv.svelte   |   2 +-
 .../components/triggers/CaptureSection.svelte |  10 +-
 .../components/triggers/CaptureTable.svelte   |  18 +--
 .../components/triggers/CaptureWrapper.svelte | 120 ++++++++++--------
 .../triggers/DeleteTriggerButton.svelte       |   6 +-
 .../triggers/TestTriggerConnection.svelte     |   2 +-
 .../triggers/TriggerEditorToolbar.svelte      |   6 +-
 .../triggers/TriggerModeToggle.svelte         |   4 +-
 .../triggers/TriggerSuspendedJobsAlert.svelte |   2 +-
 .../triggers/TriggerSuspendedJobsModal.svelte |  12 +-
 .../components/triggers/TriggersEditor.svelte |  18 ++-
 .../components/triggers/TriggersTable.svelte  |   2 +-
 .../triggers/TriggersWrapper.svelte           |   2 +
 .../triggers/email/DefaultEmailCapture.svelte |  22 +++-
 .../email/DefaultEmailConfigSection.svelte    |   2 +-
 .../triggers/email/DefaultEmailPanel.svelte   |   2 +-
 .../triggers/email/EmailCapture.svelte        |  22 +++-
 .../EmailTriggerEditorConfigSection.svelte    |   2 +-
 .../email/EmailTriggerEditorInner.svelte      |   2 +-
 .../components/triggers/gcp/GcpCapture.svelte |  22 +++-
 .../gcp/GcpTriggerEditorConfigSection.svelte  |   6 +-
 .../triggers/gcp/GcpTriggerEditorInner.svelte |   2 +-
 .../triggers/http/OpenAPISpecGenerator.svelte |  22 ++--
 .../http/RouteBodyTransformerOption.svelte    |   4 +-
 .../triggers/http/RouteCapture.svelte         |  22 +++-
 .../http/RouteEditorConfigSection.svelte      |   2 +-
 .../triggers/http/RouteEditorInner.svelte     |  24 ++--
 .../triggers/http/RoutesGenerator.svelte      |  12 +-
 .../triggers/kafka/KafkaCapture.svelte        |  22 +++-
 .../kafka/KafkaTriggerEditorInner.svelte      |   2 +-
 .../triggers/mqtt/MqttCapture.svelte          |  22 +++-
 .../mqtt/MqttEditorConfigSection.svelte       |   2 +-
 .../mqtt/MqttTriggerEditorInner.svelte        |   8 +-
 .../native/NativeTriggerEditor.svelte         |   4 +-
 .../triggers/native/NativeTriggerTable.svelte |   8 +-
 .../nextcloud/NextcloudTriggerForm.svelte     |   2 +-
 .../triggers/nats/NatsCapture.svelte          |  22 +++-
 .../nats/NatsTriggerEditorInner.svelte        |   4 +-
 .../postgres/CheckPostgresRequirement.svelte  |   2 +-
 .../triggers/postgres/PostgresCapture.svelte  |  22 +++-
 .../PostgresTriggerEditorInner.svelte         |  12 +-
 .../postgres/PublicationPicker.svelte         |   6 +-
 .../triggers/postgres/RelationPicker.svelte   |  10 +-
 .../triggers/postgres/SlotPicker.svelte       |   4 +-
 .../schedules/ScheduleEditorInner.svelte      |   8 +-
 .../components/triggers/sqs/SqsCapture.svelte |  22 +++-
 .../sqs/SqsTriggerEditorConfigSection.svelte  |   8 +-
 .../triggers/sqs/SqsTriggerEditorInner.svelte |   2 +-
 .../triggers/webhook/WebhooksCapture.svelte   |  22 +++-
 .../webhook/WebhooksConfigSection.svelte      |   4 +-
 .../websocket/WebsocketCapture.svelte         |  22 +++-
 .../WebsocketEditorConfigSection.svelte       |   4 +-
 .../WebsocketTriggerEditorInner.svelte        |  12 +-
 .../tutorials/FlowBuilderLiveTutorial.svelte  |  10 +-
 .../components/tutorials/RunsTutorial.svelte  |  10 +-
 .../components/tutorials/SkipTutorials.svelte |   4 +-
 .../tutorials/TroubleshootFlowTutorial.svelte |  11 +-
 .../tutorials/TutorialControls.svelte         |   4 +-
 .../tutorials/TutorialWrapper.svelte          |  12 +-
 .../app/BackgroundRunnablesTutorial.svelte    |  10 +-
 .../tutorials/app/ConnectionTutorial.svelte   |  10 +-
 .../app/ExpressionEvaluationTutorial.svelte   |  10 +-
 ...WorkspaceOnboardingOperatorTutorial.svelte |   6 +-
 .../WorkspaceOnboardingTutorial.svelte        |   6 +-
 .../components/wizards/AgChartWizard.svelte   |   2 +-
 .../components/wizards/AgGridWizard.svelte    |   8 +-
 .../components/wizards/ChartJSWizard.svelte   |   2 +-
 .../wizards/DBExplorerWizard.svelte           |  14 +-
 .../components/wizards/PlotlyWizard.svelte    |   6 +-
 .../wizards/TableActionsWizard.svelte         |   4 +-
 .../wizards/TableColumnWizard.svelte          |   2 +-
 .../workspaceSettings/AISettings.svelte       |   4 +-
 .../workspaceSettings/CreateWorkspace.svelte  |   8 +-
 .../DataTableSettings.svelte                  |   4 +-
 .../workspaceSettings/DucklakeSettings.svelte |   4 +-
 .../GitSyncFilterSettings.svelte              |  28 ++--
 .../workspaceSettings/RulesetEditor.svelte    |   2 +-
 .../workspaceSettings/StorageSettings.svelte  |   6 +-
 .../WorkspaceDependenciesSettings.svelte      |  16 +--
 .../WorkspaceRulesets.svelte                  |   4 +-
 .../src/routes/(root)/(logged)/+layout.svelte |  12 +-
 .../src/routes/(root)/(logged)/+page.svelte   |  14 +-
 .../(logged)/apps/edit/[...path]/+page.svelte |   2 +-
 .../(root)/(logged)/apps_raw/add/+page.svelte |   6 +-
 .../apps_raw/edit/[...path]/+page.svelte      |   4 +-
 .../(root)/(logged)/audit_logs/+page.svelte   |   2 +-
 .../(logged)/concurrency_groups/+page.svelte  |   4 +-
 .../(logged)/email_triggers/+page.svelte      |   8 +-
 .../(logged)/flows/get/[...path]/+page.svelte |  16 +--
 .../(root)/(logged)/folders/+page.svelte      |   6 +-
 .../(logged)/forks/compare/+page.svelte       |   2 +-
 .../(root)/(logged)/gcp_triggers/+page.svelte |  12 +-
 .../(root)/(logged)/groups/+page.svelte       |   6 +-
 .../(logged)/instance_groups/+page.svelte     |   8 +-
 .../(logged)/kafka_triggers/+page.svelte      |   6 +-
 .../(logged)/mqtt_triggers/+page.svelte       |   6 +-
 .../[service_name]/+page.svelte               |   2 +-
 .../(logged)/nats_triggers/+page.svelte       |   6 +-
 .../(logged)/postgres_triggers/+page.svelte   |  10 +-
 .../(root)/(logged)/replay/+page.svelte       |   2 +-
 .../(root)/(logged)/resources/+page.svelte    |  38 +++---
 .../(root)/(logged)/routes/+page.svelte       |  12 +-
 .../(root)/(logged)/run/[...run]/+page.svelte |  20 +--
 .../(root)/(logged)/schedules/+page.svelte    |  10 +-
 .../scripts/get/[...hash]/+page.svelte        |  14 +-
 .../(root)/(logged)/sqs_triggers/+page.svelte |   6 +-
 .../svix/create-webhook/+page@(root).svelte   |   8 +-
 .../(root)/(logged)/tutorials/+page.svelte    |   2 +-
 .../user/(user)/first-time/+page.svelte       |   6 +-
 .../(user)/instance_settings/+page.svelte     |   4 +-
 .../user/(user)/onboarding/+page.svelte       |  10 +-
 .../user/(user)/workspaces/+page.svelte       |   6 +-
 .../(root)/(logged)/user/cli/+page.svelte     |   2 +-
 .../(root)/(logged)/variables/+page.svelte    |  14 +-
 .../(logged)/websocket_triggers/+page.svelte  |   6 +-
 .../(root)/(logged)/workers/+page.svelte      |  22 ++--
 .../(logged)/workspace_settings/+page.svelte  |  14 +-
 .../[job]/[resume]/[hmac]/+page.svelte        |   4 +-
 frontend/src/routes/flows/dev/+page.svelte    |   4 +-
 frontend/src/routes/user/close/+page.svelte   |   2 +-
 .../routes/user/forgot-password/+page.svelte  |   6 +-
 .../routes/user/reset-password/+page.svelte   |   8 +-
 577 files changed, 2790 insertions(+), 2213 deletions(-)

diff --git a/frontend/src/lib/components/AIProviderPicker.svelte b/frontend/src/lib/components/AIProviderPicker.svelte
index f6f2a4f43c..ecc6114ed7 100644
--- a/frontend/src/lib/components/AIProviderPicker.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
index 42f0e0430a..0a6dbaae6c 100644
--- a/frontend/src/lib/components/AddUser.svelte
+++ b/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
diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte
index d8429a5ebf..d3d5fdea43 100644
--- a/frontend/src/lib/components/ApiConnectForm.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte
index ef52111c3b..3286a70a23 100644
--- a/frontend/src/lib/components/AppConnectDrawer.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte
index f47db3ee42..c87fd7add7 100644
--- a/frontend/src/lib/components/AppConnectInner.svelte
+++ b/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()
diff --git a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
index 81dd26c04b..fd0855ecee 100644
--- a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/AppTutorials.svelte b/frontend/src/lib/components/AppTutorials.svelte
index 25d06e0167..900718bea1 100644
--- a/frontend/src/lib/components/AppTutorials.svelte
+++ b/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 }) {
diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index c99f994728..d39302c424 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/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 }}
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 08fe9125b5..9f016644a9 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
index 639e11ca2d..2d79168039 100644
--- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/AssignableTags.svelte b/frontend/src/lib/components/AssignableTags.svelte
index 2f05a2c1db..4d5ba794af 100644
--- a/frontend/src/lib/components/AssignableTags.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/Auth0Setting.svelte b/frontend/src/lib/components/Auth0Setting.svelte
index beb9ec03f9..ab27ebe633 100644
--- a/frontend/src/lib/components/Auth0Setting.svelte
+++ b/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'
 							}}
 						>
diff --git a/frontend/src/lib/components/AuthSettings.svelte b/frontend/src/lib/components/AuthSettings.svelte
index d3d4890e9c..0615493eaf 100644
--- a/frontend/src/lib/components/AuthSettings.svelte
+++ b/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 }
 												}
diff --git a/frontend/src/lib/components/AutheliaSetting.svelte b/frontend/src/lib/components/AutheliaSetting.svelte
index 2c30bf30bc..3bce3e08a7 100644
--- a/frontend/src/lib/components/AutheliaSetting.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/AuthentikSetting.svelte b/frontend/src/lib/components/AuthentikSetting.svelte
index fd5aa78b9f..afbf7c89c5 100644
--- a/frontend/src/lib/components/AuthentikSetting.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/AutoscalingConfigEditor.svelte b/frontend/src/lib/components/AutoscalingConfigEditor.svelte
index 20fb30f3e7..f1cf550bef 100644
--- a/frontend/src/lib/components/AutoscalingConfigEditor.svelte
+++ b/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) {
diff --git a/frontend/src/lib/components/AutoscalingEvents.svelte b/frontend/src/lib/components/AutoscalingEvents.svelte
index 47626dbb44..0c7d4efe66 100644
--- a/frontend/src/lib/components/AutoscalingEvents.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/BedrockCredentialsCheck.svelte b/frontend/src/lib/components/BedrockCredentialsCheck.svelte
index 877ca9ff72..ac41cd4431 100644
--- a/frontend/src/lib/components/BedrockCredentialsCheck.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/ChangeInstanceUsername.svelte b/frontend/src/lib/components/ChangeInstanceUsername.svelte
index 1fcd726cea..478fd61eb6 100644
--- a/frontend/src/lib/components/ChangeInstanceUsername.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
index 52513ce37a..deb17e7d75 100644
--- a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
+++ b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
@@ -136,7 +136,7 @@
 	<Button
 		variant="default"
 		unifiedSize="md"
-		on:click={() => {
+		onclick={() => {
 			renameUser().then(() => {
 				dispatch('close')
 				onclose?.()
diff --git a/frontend/src/lib/components/CompareWorkspaces.svelte b/frontend/src/lib/components/CompareWorkspaces.svelte
index 85e7f05143..478e94f404 100644
--- a/frontend/src/lib/components/CompareWorkspaces.svelte
+++ b/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
diff --git a/frontend/src/lib/components/ConnectionSection.svelte b/frontend/src/lib/components/ConnectionSection.svelte
index e904071d8f..64a9cfc71f 100644
--- a/frontend/src/lib/components/ConnectionSection.svelte
+++ b/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
 		/>
diff --git a/frontend/src/lib/components/ContentSearchInner.svelte b/frontend/src/lib/components/ContentSearchInner.svelte
index 34393b2e92..12eb420833 100644
--- a/frontend/src/lib/components/ContentSearchInner.svelte
+++ b/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})
diff --git a/frontend/src/lib/components/ContextualVariableEditor.svelte b/frontend/src/lib/components/ContextualVariableEditor.svelte
index 43277787ba..689d29b01a 100644
--- a/frontend/src/lib/components/ContextualVariableEditor.svelte
+++ b/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"
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index b7febcdaca..9d58a8b243 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -389,7 +389,7 @@
 				<Button
 					variant="accent"
 					size="xs"
-					on:click={() => {
+					onclick={() => {
 						schedule = nschedule
 						close()
 					}}
diff --git a/frontend/src/lib/components/DBManager.svelte b/frontend/src/lib/components/DBManager.svelte
index 3000eb2d5f..9686b55420 100644
--- a/frontend/src/lib/components/DBManager.svelte
+++ b/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',
diff --git a/frontend/src/lib/components/DBManagerDrawer.svelte b/frontend/src/lib/components/DBManagerDrawer.svelte
index c5986e18a4..e86309cd30 100644
--- a/frontend/src/lib/components/DBManagerDrawer.svelte
+++ b/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"
diff --git a/frontend/src/lib/components/DBSchemaExplorer.svelte b/frontend/src/lib/components/DBSchemaExplorer.svelte
index b1fc1a60da..2ba0db00a2 100644
--- a/frontend/src/lib/components/DBSchemaExplorer.svelte
+++ b/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} />
diff --git a/frontend/src/lib/components/DBTable.svelte b/frontend/src/lib/components/DBTable.svelte
index 72bd3aa370..27f6afc3ed 100644
--- a/frontend/src/lib/components/DBTable.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/DBTableEditor.svelte b/frontend/src/lib/components/DBTableEditor.svelte
index 893d571a5b..1b609ac85a 100644
--- a/frontend/src/lib/components/DBTableEditor.svelte
+++ b/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"
diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index e654503262..11bf0fd468 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/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?.()
diff --git a/frontend/src/lib/components/DedicatedWorkersSelector.svelte b/frontend/src/lib/components/DedicatedWorkersSelector.svelte
index 1ed9d36a7c..4a103bba80 100644
--- a/frontend/src/lib/components/DedicatedWorkersSelector.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/DefaultScripts.svelte b/frontend/src/lib/components/DefaultScripts.svelte
index 3ae5e876f3..040ad09f93 100644
--- a/frontend/src/lib/components/DefaultScripts.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/DefaultScriptsInner.svelte b/frontend/src/lib/components/DefaultScriptsInner.svelte
index 1a451d8264..d7929e5fba 100644
--- a/frontend/src/lib/components/DefaultScriptsInner.svelte
+++ b/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) => ({
diff --git a/frontend/src/lib/components/DefaultTagsInner.svelte b/frontend/src/lib/components/DefaultTagsInner.svelte
index ab2d403ec8..b8657ebd29 100644
--- a/frontend/src/lib/components/DefaultTagsInner.svelte
+++ b/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}
 			>
diff --git a/frontend/src/lib/components/DependenciesDeploymentWarning.svelte b/frontend/src/lib/components/DependenciesDeploymentWarning.svelte
index a10592482d..1d31765dc8 100644
--- a/frontend/src/lib/components/DependenciesDeploymentWarning.svelte
+++ b/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">
diff --git a/frontend/src/lib/components/DeployButton.svelte b/frontend/src/lib/components/DeployButton.svelte
index ec5be21392..87f106bc22 100644
--- a/frontend/src/lib/components/DeployButton.svelte
+++ b/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}
 			>
diff --git a/frontend/src/lib/components/DeployToSetting.svelte b/frontend/src/lib/components/DeployToSetting.svelte
index 71b71983aa..9e5686fd22 100644
--- a/frontend/src/lib/components/DeployToSetting.svelte
+++ b/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
 							}
diff --git a/frontend/src/lib/components/DeployWorkspace.svelte b/frontend/src/lib/components/DeployWorkspace.svelte
index 6b5b44f675..45f4d0e071 100644
--- a/frontend/src/lib/components/DeployWorkspace.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/DeployWorkspaceDrawer.svelte b/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
index 8fdc594e56..69ee5f9ffd 100644
--- a/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index c899c725c0..d57def2634 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/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')
diff --git a/frontend/src/lib/components/DiffDrawer.svelte b/frontend/src/lib/components/DiffDrawer.svelte
index 0f89cfc3dd..ecd1826b8f 100644
--- a/frontend/src/lib/components/DiffDrawer.svelte
+++ b/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">
diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte
index 1d252d082a..2d2a6ebb2d 100644
--- a/frontend/src/lib/components/DiffEditor.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 01879329fc..e80edbf2e7 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/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={{
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index 79efdf8749..5e1ce9b9cf 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 18ba5ba64d..1be1b5126d 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/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?.()
 				)}
diff --git a/frontend/src/lib/components/EditorTheme.svelte b/frontend/src/lib/components/EditorTheme.svelte
index 9b24acab45..f14f501af8 100644
--- a/frontend/src/lib/components/EditorTheme.svelte
+++ b/frontend/src/lib/components/EditorTheme.svelte
@@ -21,4 +21,4 @@
 	})
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver onchange={onThemeChange} />
diff --git a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte b/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
index 6c0f3fb5ce..bd3d9439fb 100644
--- a/frontend/src/lib/components/ErrorOrRecoveryHandler.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/ExploreAssetButton.svelte b/frontend/src/lib/components/ExploreAssetButton.svelte
index ba623b4e4e..ef690e83ae 100644
--- a/frontend/src/lib/components/ExploreAssetButton.svelte
+++ b/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({
diff --git a/frontend/src/lib/components/FirstStepInputs.svelte b/frontend/src/lib/components/FirstStepInputs.svelte
index 30399e20f7..af1257a835 100644
--- a/frontend/src/lib/components/FirstStepInputs.svelte
+++ b/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()
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 5266f4f169..52a62c203f 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/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
 	}}
 />
diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
index 611f657ff8..51e4568bd2 100644
--- a/frontend/src/lib/components/FlowGraphViewerStep.svelte
+++ b/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') {
diff --git a/frontend/src/lib/components/FlowHistoryJobPicker.svelte b/frontend/src/lib/components/FlowHistoryJobPicker.svelte
index 80fbfc83e3..014a9e24a8 100644
--- a/frontend/src/lib/components/FlowHistoryJobPicker.svelte
+++ b/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 })
diff --git a/frontend/src/lib/components/FlowLoopIterationPreview.svelte b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
index e1c29d8fcd..5c5d4c4142 100644
--- a/frontend/src/lib/components/FlowLoopIterationPreview.svelte
+++ b/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
diff --git a/frontend/src/lib/components/FlowPlugConnect.svelte b/frontend/src/lib/components/FlowPlugConnect.svelte
index cd44f3d1bd..d778daa9cc 100644
--- a/frontend/src/lib/components/FlowPlugConnect.svelte
+++ b/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}
 	>
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index d4b40a504d..2625e8e18d 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/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
 					}}
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 410ba822ab..2b1c1b7cfe 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
index 60f30b1adc..b3ab3429d3 100644
--- a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
+++ b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
@@ -143,7 +143,7 @@
 							disabled={!cancelUrl}
 							destructive
 							unifiedSize="md"
-							on:click={() => continu(false)}
+							onclick={() => continu(false)}
 						/>
 					</div>
 				{/if}
diff --git a/frontend/src/lib/components/FlowTutorials.svelte b/frontend/src/lib/components/FlowTutorials.svelte
index 8bb4fe7220..7d48916b94 100644
--- a/frontend/src/lib/components/FlowTutorials.svelte
+++ b/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) {
diff --git a/frontend/src/lib/components/FlowViewerInner.svelte b/frontend/src/lib/components/FlowViewerInner.svelte
index 07052a42d4..59805d0ebf 100644
--- a/frontend/src/lib/components/FlowViewerInner.svelte
+++ b/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
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index 6fb9e58eca..f1dde597f0 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/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,
diff --git a/frontend/src/lib/components/FolderPicker.svelte b/frontend/src/lib/components/FolderPicker.svelte
index 206e02f825..fcca1b1269 100644
--- a/frontend/src/lib/components/FolderPicker.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/ForkWorkspaceBanner.svelte b/frontend/src/lib/components/ForkWorkspaceBanner.svelte
index 29f6d68d89..af3a86a818 100644
--- a/frontend/src/lib/components/ForkWorkspaceBanner.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/FormatOnSave.svelte b/frontend/src/lib/components/FormatOnSave.svelte
index e0a8a711ea..543bc19692 100644
--- a/frontend/src/lib/components/FormatOnSave.svelte
+++ b/frontend/src/lib/components/FormatOnSave.svelte
@@ -11,7 +11,7 @@
 <Toggle
 	size="xs"
 	bind:checked={$formatOnSave}
-	on:change={() => {
+	onchange={() => {
 		storeSetting()
 	}}
 	options={{ right: 'auto-formatting' }}
diff --git a/frontend/src/lib/components/GitHubAppIntegration.svelte b/frontend/src/lib/components/GitHubAppIntegration.svelte
index 7b35dbf84c..8d0254b2a9 100644
--- a/frontend/src/lib/components/GitHubAppIntegration.svelte
+++ b/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
diff --git a/frontend/src/lib/components/GitRepoResourcePicker.svelte b/frontend/src/lib/components/GitRepoResourcePicker.svelte
index c72d6b039b..5fd6af1707 100644
--- a/frontend/src/lib/components/GitRepoResourcePicker.svelte
+++ b/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
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index 5e1400f666..b269e4e262 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/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 = (
diff --git a/frontend/src/lib/components/HistoricInputs.svelte b/frontend/src/lib/components/HistoricInputs.svelte
index d11cb8b54f..60e8ac8cf6 100644
--- a/frontend/src/lib/components/HistoricInputs.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/HistoricList.svelte b/frontend/src/lib/components/HistoricList.svelte
index 676e7b4d7a..bf7591a54b 100644
--- a/frontend/src/lib/components/HistoricList.svelte
+++ b/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" />
diff --git a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte b/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
index ed6abfda70..9ff6672cf8 100644
--- a/frontend/src/lib/components/HttpAgentWorkerDrawer.svelte
+++ b/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 }}
 													/>
diff --git a/frontend/src/lib/components/InfiniteList.svelte b/frontend/src/lib/components/InfiniteList.svelte
index 382b0b901e..e455373938 100644
--- a/frontend/src/lib/components/InfiniteList.svelte
+++ b/frontend/src/lib/components/InfiniteList.svelte
@@ -169,7 +169,7 @@
 	infiniteScroll
 	{hasMore}
 	tableFixed={true}
-	on:loadMore={() => {
+	onloadMore={() => {
 		loadData()
 	}}
 	{loading}
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 9d9c0f58e9..df29f11341 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/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
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index 20dd353b99..d853cb61ab 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -179,7 +179,7 @@
 				variant="accent"
 				size="sm"
 				startIcon={{ icon: Plus }}
-				on:click={() => {
+				onclick={() => {
 					variableEditor?.initNew?.()
 				}}
 			>
diff --git a/frontend/src/lib/components/InstanceGroupEditor.svelte b/frontend/src/lib/components/InstanceGroupEditor.svelte
index ac9ee8606f..aed1eeba73 100644
--- a/frontend/src/lib/components/InstanceGroupEditor.svelte
+++ b/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 }
diff --git a/frontend/src/lib/components/InstanceNameEditor.svelte b/frontend/src/lib/components/InstanceNameEditor.svelte
index 8cab0ea5d4..9139679ad6 100644
--- a/frontend/src/lib/components/InstanceNameEditor.svelte
+++ b/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()
 					}}
 				>
diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte
index 307098350a..21028a110c 100644
--- a/frontend/src/lib/components/InstanceSetting.svelte
+++ b/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' }}
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index 4dd6289c7c..676429c2aa 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index 0b5d8ca7b4..3b01233200 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/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
diff --git a/frontend/src/lib/components/InviteUser.svelte b/frontend/src/lib/components/InviteUser.svelte
index 7aded95461..39b4ae0edd 100644
--- a/frontend/src/lib/components/InviteUser.svelte
+++ b/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
diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index 3c647539ab..b53673f736 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/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'] ?? '')
 												}}
 											>
diff --git a/frontend/src/lib/components/JobArgs.svelte b/frontend/src/lib/components/JobArgs.svelte
index 68ca3c078f..e9820b643e 100644
--- a/frontend/src/lib/components/JobArgs.svelte
+++ b/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
diff --git a/frontend/src/lib/components/JsonEditor.svelte b/frontend/src/lib/components/JsonEditor.svelte
index a7e679d556..9e7f4089ae 100644
--- a/frontend/src/lib/components/JsonEditor.svelte
+++ b/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
diff --git a/frontend/src/lib/components/JsonInputs.svelte b/frontend/src/lib/components/JsonInputs.svelte
index 49769e189f..052c5591dc 100644
--- a/frontend/src/lib/components/JsonInputs.svelte
+++ b/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)
 			}
diff --git a/frontend/src/lib/components/KanidmSetting.svelte b/frontend/src/lib/components/KanidmSetting.svelte
index 883041762d..2f7c1bfc08 100644
--- a/frontend/src/lib/components/KanidmSetting.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/KeycloakSetting.svelte b/frontend/src/lib/components/KeycloakSetting.svelte
index e7fa9a7991..361d8e1569 100644
--- a/frontend/src/lib/components/KeycloakSetting.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte
index 09fbaa1de4..9f9d5cc4c4 100644
--- a/frontend/src/lib/components/LightweightResourcePicker.svelte
+++ b/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?.()
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 0118c32cb8..8b9470b8a0 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/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={{
diff --git a/frontend/src/lib/components/Login.svelte b/frontend/src/lib/components/Login.svelte
index b9c0de018d..0e112fc832 100644
--- a/frontend/src/lib/components/Login.svelte
+++ b/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
 				}}
 			>
diff --git a/frontend/src/lib/components/ManageTagsDrawer.svelte b/frontend/src/lib/components/ManageTagsDrawer.svelte
index f6fee2fe38..d758d540dc 100644
--- a/frontend/src/lib/components/ManageTagsDrawer.svelte
+++ b/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()
 							}
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index a9b769a4a5..d55aeb32ce 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/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
 					}}
diff --git a/frontend/src/lib/components/ModulePreviewForm.svelte b/frontend/src/lib/components/ModulePreviewForm.svelte
index b8867c75e4..29c0d91ef5 100644
--- a/frontend/src/lib/components/ModulePreviewForm.svelte
+++ b/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"
diff --git a/frontend/src/lib/components/MoveDrawer.svelte b/frontend/src/lib/components/MoveDrawer.svelte
index f661ae4817..63f25313a5 100644
--- a/frontend/src/lib/components/MoveDrawer.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/NextcloudSetting.svelte b/frontend/src/lib/components/NextcloudSetting.svelte
index f52ffec7ae..89a59e3f27 100644
--- a/frontend/src/lib/components/NextcloudSetting.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/NumberTypeNarrowing.svelte b/frontend/src/lib/components/NumberTypeNarrowing.svelte
index e7a07a6d16..fa3ed55aa4 100644
--- a/frontend/src/lib/components/NumberTypeNarrowing.svelte
+++ b/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" />
diff --git a/frontend/src/lib/components/OAuthSetting.svelte b/frontend/src/lib/components/OAuthSetting.svelte
index ebdbfb3223..6fdf71a853 100644
--- a/frontend/src/lib/components/OAuthSetting.svelte
+++ b/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: '' }
diff --git a/frontend/src/lib/components/OauthExtraParams.svelte b/frontend/src/lib/components/OauthExtraParams.svelte
index eec9cd47b8..6466b84377 100644
--- a/frontend/src/lib/components/OauthExtraParams.svelte
+++ b/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()
 		}}
diff --git a/frontend/src/lib/components/OauthScopes.svelte b/frontend/src/lib/components/OauthScopes.svelte
index 870fec679d..d2adfd108e 100644
--- a/frontend/src/lib/components/OauthScopes.svelte
+++ b/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('')
 		}}
 	>
diff --git a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
index 6f34d2f4e5..4e88b70f8b 100644
--- a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
+++ b/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 }
diff --git a/frontend/src/lib/components/OktaSetting.svelte b/frontend/src/lib/components/OktaSetting.svelte
index 8f19ce5666..ceb176c1c2 100644
--- a/frontend/src/lib/components/OktaSetting.svelte
+++ b/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'
 							}}
 						>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 9a2990c018..a02c7500d8 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/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 }}
diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte
index b93c402ec4..9a08aa8685 100644
--- a/frontend/src/lib/components/PersistentScriptDrawer.svelte
+++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte
@@ -103,7 +103,7 @@
 
 <Drawer
 	bind:this={drawer}
-	on:close={() => {
+	onclose={() => {
 		loadQueuedJobs = false
 		dispatch('close')
 	}}
@@ -112,14 +112,14 @@
 	<DrawerContent
 		title="Persistent script"
 		overflow_y={false}
-		on:close={exit}
+		onclose={exit}
 		tooltip="Manage runs of persistent scripts. Scaling a persistent script to zero will cancel all current runs of this script based on the script path."
 	>
 		<div class="flex gap-2 items-center justify-between">
 			<h2>
 				Queued jobs for {script?.path}
 			</h2>
-			<Button size="md" btnClasses="w-full h-8" variant="default" on:click={loadQueuedJobsOnce}>
+			<Button size="md" btnClasses="w-full h-8" variant="default" onclick={loadQueuedJobsOnce}>
 				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
@@ -175,7 +175,7 @@
 				<Button
 					color="red"
 					disabled={cancellingInProgress === true || queuedJobs.length === 0}
-					on:click={scaleToZero}
+					onclick={scaleToZero}
 				>
 					{#if cancellingInProgress}
 						<Loader2 class="animate-spin" /> Stopping jobs
diff --git a/frontend/src/lib/components/PocketIdSetting.svelte b/frontend/src/lib/components/PocketIdSetting.svelte
index 812bc6c734..ebccb75a3f 100644
--- a/frontend/src/lib/components/PocketIdSetting.svelte
+++ b/frontend/src/lib/components/PocketIdSetting.svelte
@@ -50,7 +50,7 @@
 	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center">
 		<div class="w-[120px]"><IconedResourceType name="pocketid" after={true} /></div>
-		<Toggle checked={enabled} on:change={handleToggle} />
+		<Toggle checked={enabled} onchange={handleToggle} />
 	</label>
 	{#if enabled}
 		<SettingCard class="flex flex-col gap-6">
diff --git a/frontend/src/lib/components/QueueMetricsDrawer.svelte b/frontend/src/lib/components/QueueMetricsDrawer.svelte
index 314a2985a7..b671c0455d 100644
--- a/frontend/src/lib/components/QueueMetricsDrawer.svelte
+++ b/frontend/src/lib/components/QueueMetricsDrawer.svelte
@@ -12,7 +12,7 @@
 <Drawer bind:this={drawer} size="1000px">
 	<DrawerContent
 		title="Queues"
-		on:close={drawer.closeDrawer}
+		onclose={drawer.closeDrawer}
 		documentationLink="https://www.windmill.dev/docs/core_concepts/worker_groups#queue-metrics"
 	>
 		<QueueAlerts />
diff --git a/frontend/src/lib/components/Range.svelte b/frontend/src/lib/components/Range.svelte
index cbede4830c..4e17f100cc 100644
--- a/frontend/src/lib/components/Range.svelte
+++ b/frontend/src/lib/components/Range.svelte
@@ -84,7 +84,7 @@
 				bind:slider
 				min={min == undefined ? 0 : +min}
 				max={max == undefined ? 1 : +max}
-				on:change={(e) => {
+				onchange={(e) => {
 					value = e.detail.value
 				}}
 				{defaultValue}
diff --git a/frontend/src/lib/components/RelativeLineNumbers.svelte b/frontend/src/lib/components/RelativeLineNumbers.svelte
index 96d68764ae..d89ab0023e 100644
--- a/frontend/src/lib/components/RelativeLineNumbers.svelte
+++ b/frontend/src/lib/components/RelativeLineNumbers.svelte
@@ -11,7 +11,7 @@
 <Toggle
 	size="xs"
 	bind:checked={$relativeLineNumbers}
-	on:change={() => {
+	onchange={() => {
 		storeSetting()
 	}}
 	options={{ right: 'relative line numbers' }}
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 0517f24e66..b5baecd27a 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -240,7 +240,7 @@
 						unifiedSize="xs"
 						btnClasses={editDescription ? 'bg-surface-hover' : ''}
 						startIcon={{ icon: Pen }}
-						on:click={() => (editDescription = !editDescription)}
+						onclick={() => (editDescription = !editDescription)}
 					/>
 				{/if}
 			</h4>
@@ -267,7 +267,7 @@
 		<div class="flex flex-col gap-1">
 			<div class="w-full flex gap-4 flex-row-reverse items-center">
 				<Toggle
-					on:change={(e) => switchTab(e.detail)}
+					onchange={(e) => switchTab(e)}
 					options={{
 						right: 'As JSON'
 					}}
diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index c003d69792..52acc3d020 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte
@@ -5,6 +5,14 @@
 
 	import { Loader2, Save } from 'lucide-svelte'
 
+	interface Props {
+		onrefresh?: (...args: any[]) => any
+	}
+
+	let {
+		onrefresh = undefined
+	}: Props = $props()
+
 	let drawer: Drawer | undefined = $state()
 	let canSave = $state(true)
 	let resource_type: string | undefined = $state(undefined)
@@ -40,7 +48,7 @@
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
-		on:close={drawer?.closeDrawer}
+		onclose={drawer?.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
@@ -50,7 +58,7 @@
 				{path}
 				{resource_type}
 				{defaultValues}
-				on:refresh
+				onrefresh={onrefresh}
 				bind:this={resourceEditor}
 				bind:canSave
 			/>
@@ -60,7 +68,7 @@
 				variant="accent"
 				unifiedSize="md"
 				startIcon={{ icon: Save }}
-				on:click={() => {
+				onclick={() => {
 					if (mode == 'edit') {
 						resourceEditor?.editResource()
 					} else {
diff --git a/frontend/src/lib/components/ResourceNarrowing.svelte b/frontend/src/lib/components/ResourceNarrowing.svelte
index a2443ce7e1..ff39123ff2 100644
--- a/frontend/src/lib/components/ResourceNarrowing.svelte
+++ b/frontend/src/lib/components/ResourceNarrowing.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <ResourceTypePicker
-	on:click={(e) => {
+	onclick={(e) => {
 		resource = e.detail
 		format = `resource-${resource ?? ''}`
 	}}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 062e39804b..fbecfe1805 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -180,7 +180,7 @@
 </script>
 
 <AppConnect
-	on:refresh={async (e) => {
+	onrefresh={async (e) => {
 		await loadResources(resourceType)
 		value = e.detail
 		valueType = collection.find((x) => x?.value == value)?.type
@@ -190,7 +190,7 @@
 />
 <ResourceEditorDrawer
 	bind:this={resourceEditor}
-	on:refresh={async (e) => {
+	onrefresh={async (e) => {
 		await loadResources(resourceType)
 		if (e.detail) {
 			value = e.detail
@@ -239,7 +239,7 @@
 						size="xs2"
 						wrapperClasses="-mr-2 pl-1 -my-2"
 						btnClasses="hover:bg-surface-tertiary"
-						on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
+						onclick={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
 						startIcon={{ icon: Pen }}
 						iconOnly
 					/>
@@ -278,7 +278,7 @@
 							wrapperClasses="flex-1"
 							btnClasses="rounded-none"
 							size="sm"
-							on:click={() => (appConnect?.open?.(resourceType), close())}
+							onclick={() => (appConnect?.open?.(resourceType), close())}
 							startIcon={{ icon: Plus }}
 						>
 							Add a {resourceType} resource
@@ -289,7 +289,7 @@
 						color="light"
 						btnClasses="rounded-none"
 						size="sm"
-						on:click={() => {
+						onclick={() => {
 							loadResources(resourceType)
 						}}
 						startIcon={loading ? { icon: Loader2, classes: 'animate-spin' } : { icon: RotateCw }}
@@ -305,7 +305,7 @@
 					size="xs2"
 					wrapperClasses="pl-1"
 					btnClasses="hover:bg-surface-tertiary"
-					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
+					onclick={() => resourceEditor?.initEdit?.(value ?? '')}
 					startIcon={{ icon: Pen }}
 					iconOnly
 				/>
diff --git a/frontend/src/lib/components/ResourceTypePicker.svelte b/frontend/src/lib/components/ResourceTypePicker.svelte
index 3eb92b9a50..f6b92d6da1 100644
--- a/frontend/src/lib/components/ResourceTypePicker.svelte
+++ b/frontend/src/lib/components/ResourceTypePicker.svelte
@@ -76,7 +76,7 @@
 						variant="default"
 						selected={isPicked}
 						disabled={notPickable}
-						on:click={() => {
+						onclick={() => {
 							onClick(undefined)
 							close()
 						}}
@@ -91,7 +91,7 @@
 						variant="default"
 						selected={isPicked}
 						disabled={notPickable}
-						on:click={() => {
+						onclick={() => {
 							onClick(r)
 							close()
 						}}
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index da0c87a15f..0eb1ee04be 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -154,7 +154,7 @@
 		}}
 		size="xs2"
 		btnClasses="border border-gray-200 dark:border-gray-600 !bg-surface text-primary"
-		on:click={() => {
+		onclick={() => {
 			showInputSelectedBadge = false
 			savedPreviousArgs = undefined
 		}}
@@ -233,7 +233,7 @@
 			>
 				<JsonInputs
 					bind:this={jsonEditor}
-					on:select={(e) => {
+					onselect={(e) => {
 						if (e.detail) {
 							args = e.detail
 						}
@@ -276,7 +276,7 @@
 					unifiedSize="md"
 					btnClasses="!inline-flex"
 					disabled={!isValid && !jsonView}
-					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
+					onclick={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
 					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
 					{scheduledForStr ? 'Schedule to run later' : buttonText}
@@ -315,7 +315,7 @@
 			btnClasses="!px-6 !py-1 w-full"
 			variant="accent"
 			disabled={!isValid && !jsonView}
-			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
+			onclick={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>
 			{buttonText}
diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
index 399e55f772..da80a83911 100644
--- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte
+++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
@@ -55,7 +55,7 @@
 						<label for="run-time"></label>
 						<DateTimeInput
 							value={scheduledForStr}
-							on:change={(e) => {
+							onchange={(e) => {
 								console.log('e.detail', e.detail)
 								scheduledForStr = e.detail
 							}}
@@ -65,7 +65,7 @@
 						variant="default"
 						size="xs"
 						btnClasses="mx-2 "
-						on:click={() => {
+						onclick={() => {
 							scheduledForStr = undefined
 						}}
 					>
diff --git a/frontend/src/lib/components/RunPageTutorials.svelte b/frontend/src/lib/components/RunPageTutorials.svelte
index e46b1c9019..b407ff1ff4 100644
--- a/frontend/src/lib/components/RunPageTutorials.svelte
+++ b/frontend/src/lib/components/RunPageTutorials.svelte
@@ -3,6 +3,16 @@
 	import TroubleshootFlowTutorial from './tutorials/TroubleshootFlowTutorial.svelte'
 	import { getTutorialIndex } from '$lib/tutorials/config'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+		onerror?: (...args: any[]) => any
+	}
+
+	let {
+		onreload = undefined,
+		onerror = undefined
+	}: Props = $props()
+
 	let troubleshootFlowTutorial: TroubleshootFlowTutorial | undefined = $state(undefined)
 
 	export function runTutorialById(id: string) {
@@ -19,7 +29,7 @@
 <TroubleshootFlowTutorial
 	bind:this={troubleshootFlowTutorial}
 	index={getTutorialIndex('troubleshoot-flow')}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
+	onerror={onerror}
+	onskipAll={skipAll}
+	onreload={onreload}
 />
diff --git a/frontend/src/lib/components/RunsPage.svelte b/frontend/src/lib/components/RunsPage.svelte
index 120bdd4e9e..a3af812b11 100644
--- a/frontend/src/lib/components/RunsPage.svelte
+++ b/frontend/src/lib/components/RunsPage.svelte
@@ -494,14 +494,14 @@
 	title={askingForConfirmation?.title ?? ''}
 	confirmationText={askingForConfirmation?.confirmBtnText ?? ''}
 	open={!!askingForConfirmation}
-	on:confirmed={async () => {
+	onconfirmed={async () => {
 		const func = askingForConfirmation?.onConfirm
 		await func?.(forceCancelInPopup)
 		askingForConfirmation = undefined
 	}}
 	type={askingForConfirmation?.type}
 	loading={askingForConfirmation?.loading}
-	on:canceled={() => {
+	oncanceled={() => {
 		askingForConfirmation = undefined
 	}}
 >
@@ -532,7 +532,7 @@
 </ConfirmationModal>
 
 <Drawer bind:this={runDrawer}>
-	<DrawerContent title="Run details" on:close={runDrawer.closeDrawer}>
+	<DrawerContent title="Run details" onclose={runDrawer.closeDrawer}>
 		{#if selectedIds.length === 1}
 			{#if selectedIds[0] === '-'}
 				<div class="p-4">There is no information available for this job</div>
@@ -833,15 +833,15 @@
 										{lastFetchWentToEnd}
 										bind:selectedIds
 										bind:selectedWorkspace
-										on:loadExtra={loadExtra}
-										on:filterByPath={filterByPath}
-										on:filterByUser={filterByUser}
-										on:filterByFolder={filterByFolder}
-										on:filterByLabel={filterByLabel}
-										on:filterByConcurrencyKey={filterByConcurrencyKey}
-										on:filterByTag={filterByTag}
-										on:filterBySchedule={filterBySchedule}
-										on:filterByWorker={filterByWorker}
+										onloadExtra={loadExtra}
+										onfilterByPath={filterByPath}
+										onfilterByUser={filterByUser}
+										onfilterByFolder={filterByFolder}
+										onfilterByLabel={filterByLabel}
+										onfilterByConcurrencyKey={filterByConcurrencyKey}
+										onfilterByTag={filterByTag}
+										onfilterBySchedule={filterBySchedule}
+										onfilterByWorker={filterByWorker}
 										bind:this={runsTable}
 										perPage={perPage.val}
 										bind:batchRerunOptionsIsOpen
@@ -966,8 +966,8 @@
 								<JobRunsPreview
 									id={selectedIds[0]}
 									workspace={selectedWorkspace}
-									on:filterByConcurrencyKey={filterByConcurrencyKey}
-									on:filterByWorker={filterByWorker}
+									onfilterByConcurrencyKey={filterByConcurrencyKey}
+									onfilterByWorker={filterByWorker}
 								/>
 							{/if}
 						{:else if selectedIds.length > 1}
diff --git a/frontend/src/lib/components/S3FilePicker.svelte b/frontend/src/lib/components/S3FilePicker.svelte
index a07ea85d25..5cceadd4e1 100644
--- a/frontend/src/lib/components/S3FilePicker.svelte
+++ b/frontend/src/lib/components/S3FilePicker.svelte
@@ -71,7 +71,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <Drawer
 	bind:this={drawer}
-	on:close={() => {
+	onclose={() => {
 		onClose?.()
 		s3FilePickerInner?.close?.()
 	}}
@@ -79,7 +79,7 @@
 >
 	<DrawerContent
 		title="S3 file browser"
-		on:close={() => {
+		onclose={() => {
 			s3FilePickerInner?.exit?.()
 			drawer?.closeDrawer?.()
 		}}
@@ -88,7 +88,7 @@
 	>
 		<S3FilePickerInner
 			bind:this={s3FilePickerInner}
-			on:selectAndClose={(e) => {
+			onselectAndClose={(e) => {
 				onSelectAndClose?.(e.detail)
 				drawer?.closeDrawer?.()
 			}}
@@ -129,7 +129,7 @@
 						color="light"
 						disabled={workspaceSettingsInitialized === false}
 						startIcon={{ icon: FileUp }}
-						on:click={() => {
+						onclick={() => {
 							uploadModalOpen = true
 						}}>Upload File</Button
 					>
@@ -138,7 +138,7 @@
 							disabled={selectedFileKey === undefined ||
 								emptyString(selectedFileKey.s3) ||
 								(folderOnly && allFilesByKey[selectedFileKey.s3]?.type !== 'folder')}
-							on:click={s3FilePickerInner.selectAndClose}>Select</Button
+							onclick={s3FilePickerInner.selectAndClose}>Select</Button
 						>
 					{/if}
 				{/if}
diff --git a/frontend/src/lib/components/S3FilePickerInner.svelte b/frontend/src/lib/components/S3FilePickerInner.svelte
index 0b6a5d198d..516abea1ef 100644
--- a/frontend/src/lib/components/S3FilePickerInner.svelte
+++ b/frontend/src/lib/components/S3FilePickerInner.svelte
@@ -553,7 +553,7 @@
 						href="{base}/workspace_settings?tab=windmill_lfs">configure it here</a
 					>.
 				</p>
-				<Button variant="default" on:click={reloadContent} startIcon={{ icon: RotateCw }} />
+				<Button variant="default" onclick={reloadContent} startIcon={{ icon: RotateCw }} />
 			</div>
 		</Alert>
 	{/if}
@@ -668,7 +668,7 @@
 								<Button
 									variant="default"
 									size="xs2"
-									on:click={() => {
+									onclick={() => {
 										page += 1
 										loadFiles()
 									}}
@@ -717,7 +717,7 @@
 										<Button
 											title="Move file"
 											variant="default"
-											on:click={() => {
+											onclick={() => {
 												moveDestKey = fileMetadata?.fileKey ?? ''
 												moveModalOpen = true
 											}}
@@ -727,7 +727,7 @@
 										<Button
 											title="Delete file from S3"
 											variant="default"
-											on:click={() => {
+											onclick={() => {
 												deletionModalOpen = true
 											}}
 											startIcon={{ icon: Trash }}
@@ -835,10 +835,10 @@
 	open={deletionModalOpen}
 	title="Permanently delete file"
 	confirmationText="Delete permanently"
-	on:canceled={() => {
+	oncanceled={() => {
 		deletionModalOpen = false
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		deleteFileFromS3(fileMetadata?.fileKey)
 	}}
 	keyListen={false}
@@ -855,10 +855,10 @@
 	open={moveModalOpen}
 	title="Move file to new location"
 	confirmationText="Move"
-	on:canceled={() => {
+	oncanceled={() => {
 		moveModalOpen = false
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		moveS3File(fileMetadata?.fileKey, moveDestKey)
 	}}
 	keyListen={false}
@@ -881,7 +881,7 @@
 <FileUploadModal
 	open={uploadModalOpen}
 	title="Upload file to S3 bucket"
-	on:close={async (evt) => {
+	onclose={async (evt) => {
 		uploadModalOpen = false
 		if (evt.detail !== undefined && evt.detail !== null) {
 			selectedFileKey = { s3: evt.detail, storage }
diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte
index 356ab8bc39..9149fa2d38 100644
--- a/frontend/src/lib/components/S3ObjectPicker.svelte
+++ b/frontend/src/lib/components/S3ObjectPicker.svelte
@@ -64,7 +64,7 @@
 		{:then Module}
 			<Module.default
 				bind:editor
-				on:focus={(e) => {
+				onfocus={(e) => {
 					dispatch('focus')
 					onfocus?.()
 				}}
@@ -76,12 +76,12 @@
 		<FileUpload
 			allowMultiple={false}
 			randomFileKey={true}
-			on:addition={(evt) => {
+			onaddition={(evt) => {
 				value = {
 					s3: evt.detail?.path ?? ''
 				}
 			}}
-			on:deletion={(evt) => {
+			ondeletion={(evt) => {
 				value = {
 					s3: ''
 				}
@@ -92,7 +92,7 @@
 	<Button
 		variant="default"
 		unifiedSize="sm"
-		on:click={() => {
+		onclick={() => {
 			s3FilePicker?.open?.(value)
 		}}
 		startIcon={{ icon: Pipette }}
diff --git a/frontend/src/lib/components/SaveInputsButton.svelte b/frontend/src/lib/components/SaveInputsButton.svelte
index 47c713c156..eb95bce8cc 100644
--- a/frontend/src/lib/components/SaveInputsButton.svelte
+++ b/frontend/src/lib/components/SaveInputsButton.svelte
@@ -59,7 +59,7 @@
 </script>
 
 <Button
-	on:click={() => saveInput(args)}
+	onclick={() => saveInput(args)}
 	{disabled}
 	loading={savingInputs}
 	startIcon={{ icon: Save }}
diff --git a/frontend/src/lib/components/SaveToWorkspace.svelte b/frontend/src/lib/components/SaveToWorkspace.svelte
index b1edfd583b..47cb23ca49 100644
--- a/frontend/src/lib/components/SaveToWorkspace.svelte
+++ b/frontend/src/lib/components/SaveToWorkspace.svelte
@@ -9,7 +9,7 @@
 	size="xs"
 	color="light"
 	startIcon={{ icon: Save }}
-	on:click={(e) => saveToWorkspace('')}
+	onclick={(e) => saveToWorkspace('')}
 	iconOnly={false}
 >
 	Save to workspace
diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte
index bba06fef67..4957d1c8d8 100644
--- a/frontend/src/lib/components/SavedInputsPicker.svelte
+++ b/frontend/src/lib/components/SavedInputsPicker.svelte
@@ -231,7 +231,7 @@
 					{runnableType}
 					args={previewArgs ?? {}}
 					disabled={!previewArgs || !runnableId || !isValid || jsonView}
-					on:update={() => {
+					onupdate={() => {
 						refresh()
 					}}
 					showTooltip={true}
@@ -244,8 +244,8 @@
 			<InfiniteList
 				bind:this={infiniteList}
 				selectedItemId={selectedInput}
-				on:error={(e) => handleError(e.detail)}
-				on:select={(e) => handleSelect(e.detail)}
+				onerror={(e) => handleError(e)}
+				onselect={(e) => handleSelect(e)}
 			>
 				{#snippet columns()}
 					<colgroup>
@@ -306,7 +306,7 @@
 													size="xs"
 													options={{ right: 'shared' }}
 													checked={item.is_public}
-													on:change={(e) => {
+													onchange={(e) => {
 														updateInput({ ...item, is_public: e.detail })
 													}}
 												/>
@@ -319,7 +319,7 @@
 											variant="subtle"
 											spacingSize="xs2"
 											btnClasses={hover || openStates[item.id] ? 'block -my-2 ' : 'hidden'}
-											on:click={(e) => {
+											onclick={(e) => {
 												e.stopPropagation()
 												if (isEditing?.id === item.id) {
 													updateInput(isEditing)
@@ -339,7 +339,7 @@
 													: 'hidden'
 											)}
 											destructive
-											on:click={() => {
+											onclick={() => {
 												infiniteList?.deleteItem(item.id)
 											}}
 											startIcon={{ icon: Trash2 }}
diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte
index 525365af38..b49c89e15a 100644
--- a/frontend/src/lib/components/SavedInputsV2.svelte
+++ b/frontend/src/lib/components/SavedInputsV2.svelte
@@ -119,7 +119,7 @@
 										<div class="flex flex-wrap gap-x-2">
 											{#if !emptySearchArgs}
 												<Button
-													on:click={async () => {
+													onclick={async () => {
 														searchArgs = {}
 														appliedSearchArgs = {}
 														await tick()
@@ -131,7 +131,7 @@
 												>
 											{/if}
 											<Button
-												on:click={async () => {
+												onclick={async () => {
 													appliedSearchArgs = structuredClone($state.snapshot(searchArgs))
 													await tick()
 													historicInputs?.refresh(true)
@@ -162,7 +162,7 @@
 						<Button
 							unifiedSize="sm"
 							endIcon={{ icon: ExternalLink }}
-							on:click={() => {
+							onclick={() => {
 								window.open(`/runs/${runnableId}`, '_blank')
 							}}
 						>
@@ -174,7 +174,7 @@
 					bind:this={historicInputs}
 					{runnableId}
 					{runnableType}
-					on:select={(e) => {
+					onselect={(e) => {
 						if (e.detail) savedInputsPicker?.resetSelected()
 						selectArgs(e.detail?.args, e.detail ? 'history' : undefined)
 					}}
@@ -197,7 +197,7 @@
 						disabled={!isValid || jsonView}
 						{runnableId}
 						{runnableType}
-						on:update={() => {
+						onupdate={() => {
 							savedInputsPicker?.refresh()
 						}}
 					/>
@@ -209,7 +209,7 @@
 					{runnableId}
 					{runnableType}
 					{isValid}
-					on:select={(e) => {
+					onselect={(e) => {
 						if (e.detail) historicInputs?.resetSelected()
 						selectArgs(e.detail, e.detail ? 'saved' : undefined)
 					}}
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index f0c3388500..900d6d5620 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -77,6 +77,8 @@
 		onkeydownCmdEnter?: (...args: any[]) => any
 		onfinalize?: (...args: any[]) => any
 		onconsider?: (...args: any[]) => any
+		onreorder?: (...args: any[]) => any
+		oninputClicked?: (...args: any[]) => any
 	}
 
 	let {
@@ -287,7 +289,7 @@
 
 {#if showReset}
 	<div class="flex flex-row-reverse w-full">
-		<Button size="xs" color="light" on:click={() => setDefaults()}>
+		<Button size="xs" color="light" onclick={() => setDefaults()}>
 			Reset args to runnable's defaults
 		</Button>
 	</div>
@@ -384,23 +386,23 @@
 							{#if !hidden[argName]}
 								<ArgInput
 									{lightHeaderFont}
-									on:change={() => {
+									onchange={() => {
 										dispatch('change')
 										onchange?.()
 									}}
-									on:nestedChange={() => {
+									onnestedChange={() => {
 										dispatch('nestedChange')
 										onnestedChange?.()
 									}}
-									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:keydownCmdEnter={() => (dispatch('keydownCmdEnter'), onkeydownCmdEnter?.())}
+									onkeydownCmdEnter={() => (dispatch('keydownCmdEnter'), onkeydownCmdEnter?.())}
 									{disablePortal}
 									{resourceTypes}
 									{prettifyHeader}
@@ -466,7 +468,7 @@
 											<div class="relative">
 												<ToggleButtonGroup
 													selected={linkedSecret == argName ? 'secret' : 'inlined'}
-													on:selected={(e) => {
+													onselected={(e) => {
 														if (e.detail === 'secret') {
 															linkedSecret = argName
 														} else if (linkedSecret == argName) {
@@ -528,7 +530,7 @@
 					variant="default"
 					unifiedSize="md"
 					startIcon={{ icon: Plus }}
-					on:click={() => variableEditor?.initNew?.()}
+					onclick={() => variableEditor?.initNew?.()}
 				>
 					New variable
 				</Button>
diff --git a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
index 28363afe4e..5831257354 100644
--- a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
+++ b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
@@ -20,6 +20,7 @@
 		jsonView?: boolean
 		children?: import('svelte').Snippet
 		onselect?: (...args: any[]) => any
+		onopenTriggers?: (...args: any[]) => any
 	}
 
 	let {
@@ -30,7 +31,8 @@
 		isValid = true,
 		jsonView = false,
 		children,
-		onselect = undefined
+		onselect = undefined,
+		onopenTriggers = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -142,7 +144,7 @@
 								bind:this={historicInputs}
 								{runnableId}
 								{runnableType}
-								on:select={(e) => {
+								onselect={(e) => {
 									dispatch('select', { payload: e.detail?.args, type: 'history' })
 									onselect?.({ payload: e.detail?.args, type: 'history' })
 								}}
@@ -156,7 +158,7 @@
 								{runnableType}
 								{previewArgs}
 								bind:this={savedInputsPicker}
-								on:select={(e) => {
+								onselect={(e) => {
 									dispatch('select', { payload: e.detail, type: 'saved' })
 									onselect?.({ payload: e.detail, type: 'saved' })
 								}}
@@ -168,14 +170,14 @@
 							{#snippet action()}
 								<svelete:fragment>
 									<div class="center-center">
-										<CaptureButton on:openTriggers small={true} />
+										<CaptureButton onopenTriggers={onopenTriggers} small={true} />
 									</div>
 								</svelete:fragment>
 							{/snippet}
 							<div class="h-full">
 								<CaptureTable
 									path={stablePathForCaptures}
-									on:select={(e) => {
+									onselect={(e) => {
 										dispatch('select', { payload: e.detail, type: 'captures' })
 										onselect?.({ payload: e.detail, type: 'captures' })
 									}}
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index 2a5ebc2d01..bf6956f39a 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -98,7 +98,7 @@
 					<div class="h-full relative">
 						<Button
 							wrapperClasses="absolute top-2 right-2 z-20"
-							on:click={() => copyToClipboard(JSON.stringify(schema, null, 4))}
+							onclick={() => copyToClipboard(JSON.stringify(schema, null, 4))}
 							color="light"
 							size="xs2"
 							startIcon={{
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index a53b273f2d..914018b54c 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1008,10 +1008,10 @@
 <DraftTriggersConfirmationModal
 	bind:open={draftTriggersModalOpen}
 	draftTriggers={triggersState.triggers.filter((t) => t.draftConfig)}
-	on:canceled={() => {
+	oncanceled={() => {
 		draftTriggersModalOpen = false
 	}}
-	on:confirmed={handleDraftTriggersConfirmed}
+	onconfirmed={handleDraftTriggersConfirmed}
 />
 
 {#if !$userStore?.operator}
@@ -1023,7 +1023,7 @@
 		<DrawerContent
 			noPadding
 			title="Settings"
-			on:close={() => (metadataOpen = false)}
+			onclose={() => (metadataOpen = false)}
 			aiId="script-builder-settings"
 			aiDescription="Script builder settings"
 		>
@@ -1170,7 +1170,7 @@
 															variant="default"
 															selected={isPicked}
 															btnClasses={isPicked ? '' : 'm-[1px]'}
-															on:click={() => onScriptLanguageTrigger(lang)}
+															onclick={() => onScriptLanguageTrigger(lang)}
 															disabled={lockedLanguage ||
 																(enterpriseLangs.includes(lang) && !$enterpriseLicense) ||
 																(script.kind == 'preprocessor' && !canHavePreprocessor(lang))}
@@ -1204,7 +1204,7 @@
 											{/snippet}
 											<ToggleButtonGroup
 												selected={script.kind}
-												on:selected={({ detail }) => {
+												onselected={(detail) => {
 													template = 'script'
 													script.kind = detail
 													initContent(script.language, detail, template)
@@ -1276,7 +1276,7 @@
 										<Toggle
 											size="sm"
 											checked={Boolean(script.concurrent_limit)}
-											on:change={() => {
+											onchange={() => {
 												if (script.concurrent_limit && script.concurrent_limit != undefined) {
 													script.concurrent_limit = undefined
 													script.concurrency_time_window_s = undefined
@@ -1375,7 +1375,7 @@
 											<Toggle
 												size="sm"
 												checked={Boolean(script.timeout)}
-												on:change={() => {
+												onchange={() => {
 													if (script.timeout && script.timeout != undefined) {
 														script.timeout = undefined
 													} else {
@@ -1431,7 +1431,7 @@
 											<Toggle
 												size="sm"
 												checked={Boolean(script.restart_unless_cancelled)}
-												on:change={() => {
+												onchange={() => {
 													if (script.restart_unless_cancelled) {
 														script.restart_unless_cancelled = undefined
 													} else {
@@ -1454,7 +1454,7 @@
 													script.language != 'deno')}
 											size="sm"
 											checked={Boolean(script.dedicated_worker)}
-											on:change={() => {
+											onchange={() => {
 												if (script.dedicated_worker) {
 													script.dedicated_worker = undefined
 												} else {
@@ -1512,7 +1512,7 @@
 												disabled={!$enterpriseLicense}
 												size="sm"
 												checked={Boolean(script.delete_after_use)}
-												on:change={() => {
+												onchange={() => {
 													if (script.delete_after_use) {
 														script.delete_after_use = undefined
 													} else {
@@ -1531,7 +1531,7 @@
 												disabled={!$enterpriseLicense || isCloudHosted()}
 												size="sm"
 												checked={script.priority !== undefined && script.priority > 0}
-												on:change={() => {
+												onchange={() => {
 													if (script.priority) {
 														script.priority = undefined
 													} else {
@@ -1587,7 +1587,7 @@
 											<Toggle
 												size="sm"
 												checked={Boolean(script.visible_to_runner_only)}
-												on:change={() => {
+												onchange={() => {
 													if (script.visible_to_runner_only) {
 														script.visible_to_runner_only = undefined
 													} else {
@@ -1612,7 +1612,7 @@
 												<Toggle
 													size="sm"
 													checked={Boolean(script.on_behalf_of_email)}
-													on:change={() => {
+													onchange={() => {
 														if (script.on_behalf_of_email) {
 															script.on_behalf_of_email = undefined
 															preserveOnBehalfOf = false
@@ -1702,7 +1702,7 @@
 												<Button
 													variant="default"
 													size="xs"
-													on:click={() => {
+													onclick={() => {
 														if (script.envs == undefined || !Array.isArray(script.envs)) {
 															script.envs = []
 														}
@@ -1727,9 +1727,9 @@
 							</TabContent>
 							<TabContent value="triggers" class="h-full">
 								<TriggersEditor
-									on:applyArgs={applyArgs}
-									on:addPreprocessor={addPreprocessor}
-									on:exitTriggers={() => {
+									onapplyArgs={applyArgs}
+									onaddPreprocessor={addPreprocessor}
+									onexitTriggers={() => {
 										captureTable?.loadCaptures(true)
 									}}
 									currentPath={script.path}
@@ -1790,7 +1790,7 @@
 							variant="contained"
 							color="light"
 							size="xs"
-							on:click={async () => {
+							onclick={async () => {
 								metadataOpen = true
 								selectedTab = 'triggers'
 								triggersState.selectedTriggerIndex = primarySchedule ?? schedule
@@ -1857,7 +1857,7 @@
 						aiDescription="Script builder settings to configure metadata, runtime, triggers, and generated UI."
 						variant="default"
 						unifiedSize="md"
-						on:click={() => (metadataOpen = true)}
+						onclick={() => (metadataOpen = true)}
 						startIcon={{ icon: Settings }}
 					>
 						<span class="hidden lg:flex"> Settings </span>
@@ -1868,7 +1868,7 @@
 					unifiedSize="md"
 					variant="accent"
 					startIcon={{ icon: Save }}
-					on:click={() => saveDraft()}
+					onclick={() => saveDraft()}
 					disabled={initialPath != '' && !savedScript}
 					shortCut={{ key: 'S' }}
 				>
@@ -1880,7 +1880,7 @@
 					{loadingSave}
 					newFlow={false}
 					dropdownItems={computeDropdownItems(initialPath, savedScript, diffDrawer)}
-					on:save={({ detail }) => handleEditScript(false, detail)}
+					onsave={(detail) => handleEditScript(false, detail)}
 				/>
 			</div>
 		</div>
@@ -1891,15 +1891,15 @@
 			{customUi}
 			collabMode
 			edit={initialPath != ''}
-			on:format={() => {
+			onformat={() => {
 				saveDraft()
 			}}
-			on:saveDraft={() => {
+			onsaveDraft={() => {
 				saveDraft()
 			}}
-			on:openTriggers={openTriggers}
-			on:applyArgs={applyArgs}
-			on:addPreprocessor={addPreprocessor}
+			onopenTriggers={openTriggers}
+			onapplyArgs={applyArgs}
+			onaddPreprocessor={addPreprocessor}
 			bind:editor
 			bind:this={scriptEditor}
 			bind:schema={script.schema}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 391365b2c9..186ef96a89 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -121,6 +121,12 @@
 		enablePreprocessorSnippet?: boolean
 		onchange?: (...args: any[]) => any
 		onformat?: (...args: any[]) => any
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		onopenTriggers?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		onsaveDraft?: (...args: any[]) => any
 	}
 
 	let {
@@ -154,7 +160,13 @@
 		editor_bar_right,
 		enablePreprocessorSnippet = false,
 		onchange = undefined,
-		onformat = undefined
+		onformat = undefined,
+		oncreateScriptFromInlineScript = undefined,
+		onopenTriggers = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		onsaveDraft = undefined
 	}: Props = $props()
 
 	let initialArgs = structuredClone($state.snapshot(args))
@@ -953,7 +965,7 @@
 			color="light"
 			startIcon={{ icon: Copy }}
 			iconOnly
-			on:click={() => copyToClipboard(collabUrl())}
+			onclick={() => copyToClipboard(collabUrl())}
 		/>
 	</div>
 </Modal>
@@ -976,7 +988,7 @@
 		</div>
 	</div>
 	{#snippet actions()}
-		<Button size="sm" on:click={confirmDebugBetaWarning}>Continue</Button>
+		<Button size="sm" onclick={confirmDebugBetaWarning}>Continue</Button>
 	{/snippet}
 </Modal>
 
@@ -985,24 +997,24 @@
 		{#if args}
 			<EditorBar
 				scriptPath={edit ? path : undefined}
-				on:toggleCollabMode={() => {
+				ontoggleCollabMode={() => {
 					if (wsProvider?.shouldConnect) {
 						disableCollaboration()
 					} else {
 						setCollaborationMode()
 					}
 				}}
-				on:showDiffMode={showDiffMode}
-				on:hideDiffMode={hideDiffMode}
+				onshowDiffMode={showDiffMode}
+				onhideDiffMode={hideDiffMode}
 				customUi={customUi?.editorBar}
 				collabLive={wsProvider?.shouldConnect}
 				{collabMode}
 				{validCode}
 				iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
-				on:collabPopup={() => (showCollabPopup = true)}
+				oncollabPopup={() => (showCollabPopup = true)}
 				{editor}
 				{lang}
-				on:createScriptFromInlineScript
+				oncreateScriptFromInlineScript={oncreateScriptFromInlineScript}
 				{websocketAlive}
 				collabUsers={peers}
 				kind={asKind(kind)}
@@ -1109,7 +1121,7 @@
 							panelName="Test"
 							shortcut="U"
 							size="md"
-							on:click={() => {
+							onclick={() => {
 								toggleTestPanel()
 							}}
 						/>
@@ -1117,7 +1129,7 @@
 					{#if !(debugMode && isDebuggableScript)}
 						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
 							{#if testIsLoading}
-								<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
+								<Button onclick={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
 									<WindmillIcon
 										white={true}
 										class="mr-2 text-white"
@@ -1131,7 +1143,7 @@
 								{@const disableTriggerButton =
 									customUi?.previewPanel?.disableTriggerButton === true}
 								<Button
-									on:click={() => runTest()}
+									onclick={() => runTest()}
 									unifiedSize="md"
 									btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
 									variant="accent-secondary"
@@ -1141,7 +1153,7 @@
 									Test
 								</Button>
 								{#if !disableTriggerButton}
-									<CaptureButton on:openTriggers />
+									<CaptureButton onopenTriggers={onopenTriggers} />
 								{/if}
 							{/if}
 						</div>
@@ -1162,7 +1174,7 @@
 								data-schema-picker
 							>
 								<JsonInputs
-									on:select={(e) => {
+									onselect={(e) => {
 										if (e.detail) {
 											args = e.detail
 										}
@@ -1236,9 +1248,9 @@
 										isFlow={false}
 										path={stablePathForCaptures}
 										canEdit={true}
-										on:applyArgs
-										on:updateSchema
-										on:addPreprocessor
+										onapplyArgs={onapplyArgs}
+										onupdateSchema={onupdateSchema}
+										onaddPreprocessor={onaddPreprocessor}
 									/>
 								</div>
 							{/snippet}
@@ -1312,7 +1324,7 @@
 					customHiddenIcon={{
 						icon: PlayIcon
 					}}
-					on:click={() => {
+					onclick={() => {
 						toggleTestPanel()
 					}}
 					btnClasses="bg-marine-400 hover:bg-marine-200 !text-primary-inverse hover:!text-primary-inverse hover:dark:!text-primary-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70"
@@ -1332,7 +1344,7 @@
 							icon: WandSparkles
 						}}
 						btnClasses="!text-ai border border-gray-200 dark:border-gray-600 bg-surface"
-						on:click={() => {
+						onclick={() => {
 							if (!aiChatManager.open) {
 								aiChatManager.changeMode(AIMode.SCRIPT)
 							}
@@ -1391,15 +1403,15 @@
 			bind:this={editor}
 			{yContent}
 			awareness={wsProvider?.awareness}
-			on:change={(e) => {
+			onchange={(e) => {
 				inferSchema(e.detail)
 				// Refresh breakpoint positions when code changes (decorations track their lines)
 				if (debugMode && breakpointDecorations.length > 0) {
 					refreshBreakpointPositions()
 				}
 			}}
-			on:saveDraft
-			on:toggleTestPanel={toggleTestPanel}
+			onsaveDraft={onsaveDraft}
+			ontoggleTestPanel={toggleTestPanel}
 			cmdEnterAction={async () => {
 				await inferSchema(code)
 				runTest()
@@ -1458,8 +1470,8 @@
 	currentInventories={ansibleAlternativeExecutionMode?.inventories_location}
 	currentPlaybook={ansibleAlternativeExecutionMode?.playbook}
 	gitSshIdentity={ansibleGitSshIdentity}
-	on:selected={handleDelegateConfigUpdate}
-	on:addInventories={handleAddInventories}
+	onselected={handleDelegateConfigUpdate}
+	onaddInventories={handleAddInventories}
 />
 
 <style global>
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index d04f4b2cd7..6487db4ec4 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -94,13 +94,13 @@
 <DarkModeObserver bind:darkMode />
 
 <Drawer bind:this={drawerViewer} size="900px">
-	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
+	<DrawerContent title="Script {scriptPath}" onclose={drawerViewer.closeDrawer}>
 		<HighlightCode {code} language={lang} />
 	</DrawerContent>
 </Drawer>
 
 <Drawer bind:this={drawerFlowViewer} size="900px">
-	<DrawerContent title="Flow {scriptPath}" on:close={drawerFlowViewer.closeDrawer}>
+	<DrawerContent title="Flow {scriptPath}" onclose={drawerFlowViewer.closeDrawer}>
 		<FlowPathViewer path={scriptPath ?? ''} />
 	</DrawerContent>
 </Drawer>
@@ -110,7 +110,7 @@
 		<div>
 			<ToggleButtonGroup
 				bind:selected={itemKind}
-				on:selected={() => {
+				onselected={() => {
 					scriptPath = ''
 				}}
 			>
@@ -146,7 +146,7 @@
 		<Button
 			variant="subtle"
 			unifiedSize="md"
-			on:click={loadItems}
+			onclick={loadItems}
 			startIcon={{ icon: RefreshCw }}
 			iconOnly
 		/>
@@ -168,7 +168,7 @@
 					<Button
 						variant="default"
 						size="xs"
-						on:click={async () => {
+						onclick={async () => {
 							drawerFlowViewer?.openDrawer()
 						}}
 					>
@@ -219,7 +219,7 @@
 						variant="default"
 						size="xs"
 						startIcon={{ icon: Code }}
-						on:click={async () => {
+						onclick={async () => {
 							const { language, content } = await getScriptByPath(scriptPath ?? '')
 							code = content
 							lang = language
diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index eaafb2fe2f..ae3a002855 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -108,7 +108,7 @@
 								</span>
 								{#if openDetails}
 									<Button
-										on:click={() => {
+										onclick={() => {
 											dispatch('openDetails', { version: version.script_hash })
 											onopenDetails?.({ version: version.script_hash })
 										}}
@@ -160,7 +160,7 @@
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
 										aria-label="Save deployment message"
-										on:click={() => {
+										onclick={() => {
 											updateDeploymentMsg(selectedVersion?.script_hash)
 										}}
 									>
@@ -172,7 +172,7 @@
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
 										aria-label="Abort"
-										on:click={() => {
+										onclick={() => {
 											deploymentMsgUpdateMode = false
 											deploymentMsgUpdate = undefined
 										}}
@@ -205,7 +205,7 @@
 								<div class="w-min">
 									<ToggleButtonGroup
 										selected={showDiff ? 'diff' : 'code'}
-										on:selected={({ detail }) => {
+										onselected={(detail) => {
 											showDiff = detail === 'diff'
 										}}
 									>
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index e8c8bb77c0..6a91640e93 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -454,10 +454,10 @@
 </script>
 
 <Drawer bind:this={logDrawer} bind:open={logDrawerOpen} size="1400px">
-	<DrawerContent title="See context" on:close={logDrawer.closeDrawer}>
+	<DrawerContent title="See context" onclose={logDrawer.closeDrawer}>
 		{#snippet actions()}
 			<Button
-				on:click={() => copyToClipboard(content)}
+				onclick={() => copyToClipboard(content)}
 				color="light"
 				size="xs"
 				startIcon={{
@@ -505,7 +505,7 @@
 					size="xs"
 					bind:checked={withError}
 					options={{ right: 'errors > 0' }}
-					on:change={() => {
+					onchange={() => {
 						allLogs = undefined
 						getAllLogs(minTs, maxTs)
 					}}
@@ -514,7 +514,7 @@
 					size="xs"
 					bind:checked={autoRefresh}
 					disabled={searchTerm != ''}
-					on:change={(e) => {
+					onchange={(e) => {
 						if (e.detail) {
 							getAllLogs(maxTs, undefined)
 						} else {
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index 0389ec5168..75a7f8900b 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -37,6 +37,12 @@
 		| 'email_trigger'
 	let kind: Kind
 
+	interface Props {
+		onchange?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	let path: string = $state('')
 
 	let ownerKind: 'user' | 'group' = $state('user')
@@ -109,7 +115,7 @@
 </script>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Share {path}" on:close={drawer?.closeDrawer}>
+	<DrawerContent title="Share {path}" onclose={drawer?.closeDrawer}>
 		<div class="flex flex-col gap-2">
 			<h1 class="text-sm font-semibold text-emphasis">{path}</h1>
 			<span class="text-xs font-semibold text-emphasis"
@@ -128,7 +134,7 @@
 				{#if own}
 					<div class="flex flex-row flex-wrap gap-2 items-center">
 						<div>
-							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
+							<ToggleButtonGroup bind:selected={ownerKind} onselected={() => (owner = '')}>
 								{#snippet children({ item })}
 									<ToggleButton value="user" label="User" {item} />
 									<ToggleButton value="group" label="Group" {item} />
@@ -148,7 +154,7 @@
 							size="lg"
 							variant="accent"
 							disabled={!newOwner}
-							on:click={() => addAcl(newOwner, write)}>Add permission</Button
+							onclick={() => addAcl(newOwner, write)}>Add permission</Button
 						>
 					</div>
 				{/if}
@@ -171,7 +177,7 @@
 												<div>
 													<ToggleButtonGroup
 														selected={write ? 'writer' : 'viewer'}
-														on:selected={async (e) => {
+														onselected={async (e) => {
 															const role = e.detail
 															if (role == 'writer') {
 																await addAcl(owner, true)
@@ -195,7 +201,7 @@
 													variant="default"
 													destructive
 													size="xs"
-													on:click={() => deleteAcl(owner)}
+													onclick={() => deleteAcl(owner)}
 													startIcon={{ icon: Trash }}
 												/>
 											{/if}
diff --git a/frontend/src/lib/components/Slider.svelte b/frontend/src/lib/components/Slider.svelte
index a96b93805d..3315e791cb 100644
--- a/frontend/src/lib/components/Slider.svelte
+++ b/frontend/src/lib/components/Slider.svelte
@@ -24,7 +24,7 @@
 
 <Button
 	color="light"
-	on:click={() => (view = !view)}
+	onclick={() => (view = !view)}
 	{size}
 	variant="border"
 	endIcon={{
diff --git a/frontend/src/lib/components/SqlRepl.svelte b/frontend/src/lib/components/SqlRepl.svelte
index 661b0ccd2c..96c4f1b8b4 100644
--- a/frontend/src/lib/components/SqlRepl.svelte
+++ b/frontend/src/lib/components/SqlRepl.svelte
@@ -181,7 +181,7 @@
 			variant="accent"
 			destructive={isRunning}
 			shortCut={{ Icon: CornerDownLeft }}
-			on:click={() => run()}
+			onclick={() => run()}
 		>
 			{isRunning ? 'Running...' : 'Run'}
 		</Button>
@@ -189,7 +189,7 @@
 	<Pane size={24} minSize={16}>
 		<StepHistory
 			staticInputs={runHistory}
-			on:select={(e) => {
+			onselect={(e) => {
 				const data = e.detail as (typeof runHistory)[number]
 				editor?.setCode(data.code)
 				onData(data.result)
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index bce364d44f..2de70df79a 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -136,7 +136,7 @@
 			tabListClass="flex-wrap"
 			class="h-auto"
 			bind:selected={kind}
-			on:selected={(e) => {
+			onselected={(e) => {
 				if (e.detail != 'enum') {
 					enum_ = undefined
 				}
@@ -185,7 +185,7 @@
 					bind:value={patternStr}
 				/>
 				<RegexGen
-					on:gen={(e) => {
+					ongen={(e) => {
 						const { res, prompt } = e.detail
 						patternStr = res
 						customErrorMessage = 'does not match: ' + prompt
@@ -205,7 +205,7 @@
 					size="xs"
 					options={{ right: 'Enable' }}
 					checked={customErrorMessage != undefined && customErrorMessage != ''}
-					on:change={(e) => {
+					onchange={(e) => {
 						if (e.detail) {
 							customErrorMessage = 'Custom error message'
 						} else {
@@ -264,7 +264,7 @@
 								{#if allowKindChange}
 									<Button
 										size="sm"
-										on:click={() => enum_ && typeof enum_[i] === 'string' && remove(enum_[i])}
+										onclick={() => enum_ && typeof enum_[i] === 'string' && remove(enum_[i])}
 										>-</Button
 									>
 								{/if}
@@ -279,7 +279,7 @@
 			</div>
 			{#if allowKindChange}
 				<div class="flex flex-row my-1">
-					<Button color="light" size="sm" on:click={add}>+</Button>
+					<Button color="light" size="sm" onclick={add}>+</Button>
 				</div>
 			{/if}
 		</Label>
@@ -288,7 +288,7 @@
 				size="xs"
 				options={{ right: 'Disallow creating custom values' }}
 				checked={disableCreate}
-				on:change={(e) => {
+				onchange={(e) => {
 					if (e.detail) {
 						disableCreate = true
 					} else {
@@ -365,7 +365,7 @@
 			size="xs"
 			options={{ right: 'Disable variable picker' }}
 			checked={disableVariablePicker}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					disableVariablePicker = true
 				} else {
@@ -385,7 +385,7 @@
 					'The value will be stored as an ephemeral secret variable in the user space of the caller of the job, only viewable by him.'
 			}}
 			checked={password}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					password = true
 				} else {
diff --git a/frontend/src/lib/components/SupabaseConnect.svelte b/frontend/src/lib/components/SupabaseConnect.svelte
index 7eaddc73ce..579f96b490 100644
--- a/frontend/src/lib/components/SupabaseConnect.svelte
+++ b/frontend/src/lib/components/SupabaseConnect.svelte
@@ -16,6 +16,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import HighlightTheme from './HighlightTheme.svelte'
 
+	interface Props {
+		onrefresh?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	let drawer: Drawer | undefined = $state()
 	let token: undefined | string = $state(undefined)
 	export async function open() {
@@ -105,11 +111,11 @@
 <HighlightTheme />
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title="Add a Supabase Database" on:close={drawer?.closeDrawer}>
+	<DrawerContent title="Add a Supabase Database" onclose={drawer?.closeDrawer}>
 		{#if step === 'init' || selectedDatabase == undefined}
 			<h2
 				>Connect an existing database <div class="inline-block ml-2"
-					><Button variant="default" wrapperClasses="self-stretch" on:click={listDatabases}
+					><Button variant="default" wrapperClasses="self-stretch" onclick={listDatabases}
 						><RotateCwIcon size={12} /></Button
 					></div
 				>
@@ -178,9 +184,9 @@
 		{#snippet actions()}
 			<div class="flex gap-1">
 				{#if step == 'resource' && selectedDatabase != undefined}
-					<Button variant="default" on:click={() => (step = 'init')}>Back</Button>
+					<Button variant="default" onclick={() => (step = 'init')}>Back</Button>
 
-					<Button {disabled} on:click={save} variant="accent">Save</Button>
+					<Button {disabled} onclick={save} variant="accent">Save</Button>
 				{/if}
 			</div>
 		{/snippet}
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index c6cbe9f421..c8883c83c9 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -88,8 +88,8 @@
 	}
 </script>
 
-<Drawer bind:this={drawer} size="1200px" {disableChatOffset} on:close={handleDrawerClose}>
-	<DrawerContent noPadding overflow_y={false} title="Instance settings" on:close={handleClose}>
+<Drawer bind:this={drawer} size="1200px" {disableChatOffset} onclose={handleDrawerClose}>
+	<DrawerContent noPadding overflow_y={false} title="Instance settings" onclose={handleClose}>
 		{#snippet titleExtra()}
 			<MeltTooltip disablePopup={!uptodateVersion}>
 				<div class="text-xs text-secondary flex items-center gap-1 ml-6">
@@ -152,7 +152,7 @@
 </Drawer>
 
 <Drawer bind:this={diffDrawer} size="1200px">
-	<DrawerContent title="Review changes" on:close={() => diffDrawer?.closeDrawer()}>
+	<DrawerContent title="Review changes" onclose={() => diffDrawer?.closeDrawer()}>
 		{#snippet actions()}
 			<Toggle
 				bind:checked={inlineDiff}
@@ -185,10 +185,10 @@
 		open={showCloseConfirmModal}
 		title="Unsaved changes"
 		confirmationText="Discard & close"
-		on:canceled={() => {
+		oncanceled={() => {
 			showCloseConfirmModal = false
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			innerComponent?.discardAll()
 			showCloseConfirmModal = false
 			closeDrawer()
diff --git a/frontend/src/lib/components/SuperadminSettingsInner.svelte b/frontend/src/lib/components/SuperadminSettingsInner.svelte
index 1f33e768d8..9ca1d8d5ee 100644
--- a/frontend/src/lib/components/SuperadminSettingsInner.svelte
+++ b/frontend/src/lib/components/SuperadminSettingsInner.svelte
@@ -252,7 +252,7 @@
 										btnClasses="w-auto"
 										size="sm"
 										variant="accent"
-										on:click={() => {
+										onclick={() => {
 											automateUsernameModalOpen = true
 										}}
 									>
@@ -260,11 +260,11 @@
 									</Button>
 									<ConfirmationModal
 										open={automateUsernameModalOpen}
-										on:confirmed={() => {
+										onconfirmed={() => {
 											automateUsernameModalOpen = false
 											enableAutomateUsernameCreationSetting()
 										}}
-										on:canceled={() => (automateUsernameModalOpen = false)}
+										oncanceled={() => (automateUsernameModalOpen = false)}
 										title="Automatic username creation"
 										confirmationText="Enable"
 									>
@@ -308,7 +308,7 @@
 										</Button>
 									{/snippet}
 									{#snippet content()}
-										<InviteGlobalUser on:new={() => listUsers(activeOnly)} />
+										<InviteGlobalUser onnew={() => listUsers(activeOnly)} />
 									{/snippet}
 								</Popover>
 							</div>
@@ -319,7 +319,7 @@
 								<DataTable
 									shouldLoadMore={(filteredUsers?.length ?? 0) > 50}
 									loadMore={50}
-									on:loadMore={() => {
+									onloadMore={() => {
 										nbDisplayed += 50
 									}}
 								>
@@ -359,7 +359,7 @@
 																		username=""
 																		{email}
 																		isConflict
-																		on:renamed={() => {
+																		onrenamed={() => {
 																			listUsers(activeOnly)
 																		}}
 																	/>
@@ -388,7 +388,7 @@
 													<Cell>
 														<ToggleButtonGroup
 															selected={super_admin ? 'super_admin' : devops ? 'devops' : 'user'}
-															on:selected={async (e) => {
+															onselected={async (e) => {
 																if (email == $userStore?.email) {
 																	sendUserToast('You cannot demote yourself', true)
 																	listUsers(activeOnly)
@@ -454,13 +454,13 @@
 																	value={name}
 																	{username}
 																	{email}
-																	on:refresh={() => {
+																	onrefresh={() => {
 																		listUsers(activeOnly)
 																	}}
-																	on:save={(e) => {
+																	onsave={(e) => {
 																		updateName(e.detail, email)
 																	}}
-																	on:renamed={() => {
+																	onrenamed={() => {
 																		listUsers(activeOnly)
 																	}}
 																	{automateUsernameCreation}
@@ -530,10 +530,10 @@
 	open={Boolean(deleteConfirmedCallback)}
 	title="Remove user"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		deleteConfirmedCallback = undefined
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		if (deleteConfirmedCallback) {
 			deleteConfirmedCallback()
 		}
diff --git a/frontend/src/lib/components/TestConnection.svelte b/frontend/src/lib/components/TestConnection.svelte
index 7c59a2a324..97f139207b 100644
--- a/frontend/src/lib/components/TestConnection.svelte
+++ b/frontend/src/lib/components/TestConnection.svelte
@@ -237,7 +237,7 @@ export async function main(bucket: any) {
 </script>
 
 {#if Object.keys(scripts).includes(resourceType || '')}
-	<Button spacingSize="sm" size="xs" unifiedSize="md" variant="default" on:click={testConnection}>
+	<Button spacingSize="sm" size="xs" unifiedSize="md" variant="default" onclick={testConnection}>
 		{#if loading}
 			<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
 		{:else}
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index e41cb0315f..7a3993fd9f 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -34,6 +34,7 @@
 		onchange?: (...args: any[]) => any
 		onclick?: (...args: any[]) => any
 		onfocus?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index 96abb24ac3..c3cf323dd2 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -54,8 +54,8 @@
 	}
 </script>
 
-<Drawer bind:this={drawer} size="900px" on:close={removeHash} {disableChatOffset}>
-	<DrawerContent title="User settings" on:close={closeDrawer}>
+<Drawer bind:this={drawer} size="900px" onclose={removeHash} {disableChatOffset}>
+	<DrawerContent title="User settings" onclose={closeDrawer}>
 		<div class="flex flex-col gap-6 pb-8">
 			{#if scopes == undefined}
 				<div
diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index b7282fee48..431dc11f63 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -16,6 +16,12 @@
 	import { Loader2, Save } from 'lucide-svelte'
 	import autosize from '$lib/autosize'
 
+	interface Props {
+		oncreate?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	const dispatch = createEventDispatcher()
 
 	let path: string = $state('')
@@ -134,7 +140,7 @@
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update variable at ${initialPath}` : 'Add a variable'}
-		on:close={drawer?.closeDrawer}
+		onclose={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !can_write}
@@ -157,7 +163,7 @@
 			<label class="flex flex-col gap-1">
 				<span class="text-xs font-semibold text-emphasis">Secret</span>
 				<Toggle
-					on:change={() => edit && loadVariable(initialPath)}
+					onchange={() => edit && loadVariable(initialPath)}
 					bind:checked={variable.is_secret}
 					disabled={edit && $userStore?.operator}
 				/>
@@ -182,7 +188,7 @@
 						{#if $userStore?.operator}
 							<div class="p-2 border">Operators cannot load secret value</div>
 						{:else}
-							<Button size="xs" variant="default" on:click={() => loadVariable(initialPath)}>
+							<Button size="xs" variant="default" onclick={() => loadVariable(initialPath)}>
 								Load secret value<Tooltip>Will generate an audit log</Tooltip>
 							</Button>
 						{/if}
@@ -248,7 +254,7 @@
 		</div>
 		{#snippet actions()}
 			<Button
-				on:click={() => (edit ? updateVariable() : createVariable())}
+				onclick={() => (edit ? updateVariable() : createVariable())}
 				disabled={!can_write || !valid || pathError != ''}
 				startIcon={{ icon: Save }}
 				variant="accent"
diff --git a/frontend/src/lib/components/VimMode.svelte b/frontend/src/lib/components/VimMode.svelte
index b5becb0f38..4d9b6a61fe 100644
--- a/frontend/src/lib/components/VimMode.svelte
+++ b/frontend/src/lib/components/VimMode.svelte
@@ -11,7 +11,7 @@
 <Toggle
 	size="xs"
 	bind:checked={$vimMode}
-	on:change={() => {
+	onchange={() => {
 		storeSetting()
 	}}
 	options={{ right: 'vim mode' }}
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index c2dec2f449..fcb83f02f6 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -316,10 +316,10 @@
 	open={openDelete}
 	title="Delete worker group"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		openDelete = false
 	}}
-	on:confirmed={async () => {
+	onconfirmed={async () => {
 		deleteWorkerGroup()
 		openDelete = false
 	}}
@@ -333,10 +333,10 @@
 	open={openClean}
 	title="Clear cache"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		openClean = false
 	}}
-	on:confirmed={async () => {
+	onconfirmed={async () => {
 		const ndate = Math.floor(Date.now() / 1000)
 		const withCacheConfig = { ...nconfig, cache_clear: ndate }
 		await ConfigService.updateConfig({
@@ -362,7 +362,7 @@
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
-		on:close={() => drawer?.closeDrawer()}
+		onclose={() => drawer?.closeDrawer()}
 		title={canEditConfig ? `Edit worker config '${name}'` : `Worker config '${name}'`}
 	>
 		{#if !hasEnterpriseFeatures}
@@ -379,7 +379,7 @@
 			<ToggleButtonGroup
 				{selected}
 				disabled={!canEditEEConfig}
-				on:selected={(e) => {
+				onselected={(e) => {
 					if (nconfig == undefined) {
 						nconfig = {}
 					}
@@ -467,7 +467,7 @@
 							<Button
 								variant="default"
 								unifiedSize="sm"
-								on:click={() => {
+								onclick={() => {
 									if (nconfig != undefined) {
 										nconfig.worker_tags =
 											defaultTagPerWorkspace && workspaceTag
@@ -557,7 +557,7 @@
 							right: isAutoNativeMode ? 'Native mode (automatically enabled)' : 'Enable native mode'
 						}}
 						checked={nconfig?.native_mode === true || isAutoNativeMode}
-						on:change={(ev) => {
+						onchange={(ev) => {
 							if (nconfig !== undefined) {
 								nconfig.native_mode = ev.detail ? true : undefined
 							}
@@ -584,7 +584,7 @@
 							<div class="mt-2 w-fit">
 								<Button
 									variant="default"
-									on:click={() => {
+									onclick={() => {
 										if (nconfig?.worker_tags != undefined) {
 											const flowTag =
 												defaultTagPerWorkspace && workspaceTag ? `flow-${workspaceTag}` : 'flow'
@@ -615,7 +615,7 @@
 							right: 'Send an alert when the number of alive workers falls below a given threshold'
 						}}
 						checked={nconfig?.min_alive_workers_alert_threshold !== undefined}
-						on:change={(ev) => {
+						onchange={(ev) => {
 							if (nconfig !== undefined) {
 								nconfig.min_alive_workers_alert_threshold = ev.detail ? 1 : undefined
 							}
@@ -689,7 +689,7 @@
 							disabled={!canEditEEConfig}
 							class="w-128"
 							bind:selected={envvar.type}
-							on:selected={(e) => {
+							onselected={(e) => {
 								if (e.detail === 'dynamic') {
 									envvar.value = undefined
 								}
@@ -741,7 +741,7 @@
 							variant="default"
 							unifiedSize="md"
 							startIcon={{ icon: Plus }}
-							on:click={() => {
+							onclick={() => {
 								customEnvVars.push({ key: '', type: 'dynamic', value: undefined })
 								customEnvVars = [...customEnvVars]
 							}}
@@ -862,7 +862,7 @@
 							variant="default"
 							size="xs"
 							startIcon={{ icon: Plus }}
-							on:click={() => {
+							onclick={() => {
 								if (nconfig.additional_python_paths === undefined) {
 									nconfig.additional_python_paths = []
 								}
@@ -915,7 +915,7 @@
 							variant="default"
 							size="xs"
 							startIcon={{ icon: Plus }}
-							on:click={() => {
+							onclick={() => {
 								if (nconfig.pip_local_dependencies === undefined) {
 									nconfig.pip_local_dependencies = []
 								}
@@ -966,7 +966,7 @@
 					scriptLang={'bash'}
 					useWebsockets={false}
 					code={config?.init_bash ?? ''}
-					on:change={(e) => {
+					onchange={(e) => {
 						if (config) {
 							const code = e.detail
 							if (code != '') {
@@ -1030,7 +1030,7 @@
 					useWebsockets={false}
 					fixedOverflowWidgets={false}
 					code={config?.periodic_script_bash ?? ''}
-					on:change={(e) => {
+					onchange={(e) => {
 						if (config) {
 							const code = e.detail
 							if (code != '') {
@@ -1075,7 +1075,7 @@
 					{#if canEditConfig}
 						<Button
 							variant="accent"
-							on:click={async () => {
+							onclick={async () => {
 								if (
 									nconfig?.min_alive_workers_alert_threshold &&
 									nconfig?.min_alive_workers_alert_threshold < 1
@@ -1210,7 +1210,7 @@
 							<Button
 								unifiedSize="sm"
 								variant="subtle"
-								on:click={() => {
+								onclick={() => {
 									if (!hasEnterpriseFeatures) {
 										sendUserToast('Worker Management UI is an EE feature', true)
 									} else {
@@ -1227,7 +1227,7 @@
 						<Button
 							unifiedSize="sm"
 							variant="subtle"
-							on:click={() => {
+							onclick={() => {
 								loadNConfig()
 								openClean = true
 							}}
@@ -1266,7 +1266,7 @@
 					<Button
 						variant="accent"
 						unifiedSize="sm"
-						on:click={() => {
+						onclick={() => {
 							loadNConfig()
 							drawer?.openDrawer()
 						}}
@@ -1280,7 +1280,7 @@
 					<Button
 						unifiedSize="md"
 						variant="accent"
-						on:click={() => {
+						onclick={() => {
 							loadNConfig()
 							drawer?.openDrawer()
 						}}
diff --git a/frontend/src/lib/components/WorkerRepl.svelte b/frontend/src/lib/components/WorkerRepl.svelte
index e7daf54292..3832e0b955 100644
--- a/frontend/src/lib/components/WorkerRepl.svelte
+++ b/frontend/src/lib/components/WorkerRepl.svelte
@@ -249,7 +249,7 @@
 <DarkModeObserver bind:darkMode />
 
 <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}
@@ -259,13 +259,13 @@
 </Drawer>
 
 <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={'script'} on:pick={onScriptPick}>
+			<PickHubScript bind:filter kind={'script'} onpick={onScriptPick}>
 				<ToggleHubWorkspace bind:selected={pick_existing} />
 			</PickHubScript>
 		{:else}
-			<WorkspaceScriptPicker bind:filter kind={'script'} on:pick={onScriptPick}>
+			<WorkspaceScriptPicker bind:filter kind={'script'} onpick={onScriptPick}>
 				<ToggleHubWorkspace bind:selected={pick_existing} />
 			</WorkspaceScriptPicker>
 		{/if}
@@ -280,7 +280,7 @@
 					loading={loadingPendingJobs}
 					variant="default"
 					wrapperClasses="self-stretch"
-					on:click={async () => {
+					onclick={async () => {
 						await listPendingJobs()
 						if (pendingsJobs.length === 0) {
 							sendUserToast('No pending ssh jobs found')
@@ -305,7 +305,7 @@
 						variant="default"
 						disabled={emptyString(selectedJobId)}
 						wrapperClasses="self-stretch"
-						on:click={listPendingJobsAndUpdateSelectedJobid}
+						onclick={listPendingJobsAndUpdateSelectedJobid}
 						startIcon={{ icon: RefreshCw }}
 						iconOnly
 					/>
@@ -314,7 +314,7 @@
 						variant="default"
 						disabled={emptyString(selectedJobId)}
 						startIcon={{ icon: Eye }}
-						on:click={async () => {
+						onclick={async () => {
 							const jobId = pendingsJobs.find((pendingsJob) => pendingsJob.id === selectedJobId)?.id
 							if (jobId) {
 								const job = await JobService.getJob({ workspace: $workspaceStore!, id: jobId })
@@ -336,7 +336,7 @@
 						size="xs"
 						variant="default"
 						startIcon={{ icon: Square }}
-						on:click={async () => {
+						onclick={async () => {
 							try {
 								isCancelingJob = true
 								await cancelJob(selectedJobId)
@@ -385,7 +385,7 @@
 					variant="default"
 					startIcon={{ icon: Play }}
 					title="Run bash script"
-					on:click={async () => {
+					onclick={async () => {
 						await replacePromptWithCommand(code)
 					}}
 				>
@@ -394,7 +394,7 @@
 				<Button
 					unifiedSize="md"
 					variant="subtle"
-					on:click={scriptPicker.openDrawer}
+					onclick={scriptPicker.openDrawer}
 					startIcon={{ icon: Library }}
 					title="Explore other scripts"
 				>
diff --git a/frontend/src/lib/components/WorkerTagPicker.svelte b/frontend/src/lib/components/WorkerTagPicker.svelte
index 1b316a61f5..3eec8e05e4 100644
--- a/frontend/src/lib/components/WorkerTagPicker.svelte
+++ b/frontend/src/lib/components/WorkerTagPicker.svelte
@@ -55,7 +55,7 @@
 
 	<Button
 		variant="default"
-		on:click={() => {
+		onclick={() => {
 			$workerTags = undefined
 			loadWorkerTags(true)
 		}}
diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte
index 5a5a34d523..a188a63df2 100644
--- a/frontend/src/lib/components/WorkerTagSelect.svelte
+++ b/frontend/src/lib/components/WorkerTagSelect.svelte
@@ -158,7 +158,7 @@
 		variant="subtle"
 		unifiedSize="sm"
 		startIcon={{ icon: RotateCw, classes: loading ? 'animate-spin' : '' }}
-		on:click={async () => {
+		onclick={async () => {
 			loadWorkerGroups(true)
 			open = true
 		}}
diff --git a/frontend/src/lib/components/WorkspaceDependenciesEditor.svelte b/frontend/src/lib/components/WorkspaceDependenciesEditor.svelte
index b643c7e86e..6e8c0af72b 100644
--- a/frontend/src/lib/components/WorkspaceDependenciesEditor.svelte
+++ b/frontend/src/lib/components/WorkspaceDependenciesEditor.svelte
@@ -18,6 +18,13 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 
+	interface Props {
+		oncreate?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	const dispatch = createEventDispatcher()
 
 	// Helper function to get full filename
@@ -360,7 +367,7 @@ numpy>=1.24.0
 		title={edit
 			? `Deploy ${getFullFilename(workspaceDependencies.language, workspaceDependenciesType === 'workspace' ? null : workspaceDependenciesName)}`
 			: 'Add enforced dependencies'}
-		on:close={drawer?.closeDrawer}
+		onclose={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !can_write}
@@ -404,7 +411,7 @@ numpy>=1.24.0
 							<span class="text-sm text-blue-800 flex-1">
 								Workspace default already exists for {workspaceDependencies.language}
 							</span>
-							<Button size="xs" color="blue" variant="border" on:click={goToWorkspaceDefault}>
+							<Button size="xs" color="blue" variant="border" onclick={goToWorkspaceDefault}>
 								Go to default
 							</Button>
 						</div>
@@ -499,7 +506,7 @@ numpy>=1.24.0
 							autoHeight
 							lang="markdown"
 							code={workspaceDependencies.content}
-							on:change={(e) => handleEditorChange(e.detail)}
+							onchange={(e) => handleEditorChange(e)}
 							fixedOverflowWidgets={false}
 							disabled={!can_write}
 						/>
@@ -510,7 +517,7 @@ numpy>=1.24.0
 
 		{#snippet actions()}
 			<Button
-				on:click={handleDeployClick}
+				onclick={handleDeployClick}
 				disabled={isDisabled}
 				startIcon={{ icon: Rocket }}
 				color="dark"
diff --git a/frontend/src/lib/components/WorkspaceDependenciesViewer.svelte b/frontend/src/lib/components/WorkspaceDependenciesViewer.svelte
index fc3f246fc1..cd63e230f8 100644
--- a/frontend/src/lib/components/WorkspaceDependenciesViewer.svelte
+++ b/frontend/src/lib/components/WorkspaceDependenciesViewer.svelte
@@ -55,10 +55,10 @@
 	}
 </script>
 
-<WorkspaceDependenciesEditor bind:this={workspaceDependenciesEditor} on:create={onWorkspaceDependenciesUpdated} />
+<WorkspaceDependenciesEditor bind:this={workspaceDependenciesEditor} oncreate={onWorkspaceDependenciesUpdated} />
 
 <Drawer bind:this={drawer} size="900px">
-	<DrawerContent title="Workspace Dependencies from {viewPath}" on:close={closeViewer}>
+	<DrawerContent title="Workspace Dependencies from {viewPath}" onclose={closeViewer}>
 		{#snippet actions()}
 			<div class="flex items-center gap-4">
 				<div class="flex items-center gap-2">
@@ -71,7 +71,7 @@
 						variant="border"
 						color="light"
 						startIcon={{ icon: Edit }}
-						on:click={editWorkspaceDependencies}
+						onclick={editWorkspaceDependencies}
 					>
 						Edit
 					</Button>
diff --git a/frontend/src/lib/components/ZitadelSetting.svelte b/frontend/src/lib/components/ZitadelSetting.svelte
index d4d7d06207..b6fc964788 100644
--- a/frontend/src/lib/components/ZitadelSetting.svelte
+++ b/frontend/src/lib/components/ZitadelSetting.svelte
@@ -44,7 +44,7 @@
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'zitadel'} after={true} /></div><Toggle
 			checked={enabled}
-			on:change={(e) => {
+			onchange={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '' }
 				} else {
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 547fff4723..c408de69e6 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -270,10 +270,10 @@
 			listInputs.set(id, inputOutput)
 		}
 	}}
-	on:done={() => {
+	ondone={() => {
 		onDone?.()
 	}}
-	on:doneError={() => {
+	ondoneError={() => {
 		onDone?.()
 	}}
 	refreshOnStart={resolvedConfig.triggerOnAppLoad}
@@ -291,7 +291,7 @@
 					: undefined}
 			>
 				<Button
-					on:pointerdown={(e) => e.stopPropagation()}
+					onpointerdown={(e) => e.stopPropagation()}
 					btnClasses={twMerge(
 						css?.button?.class ?? '',
 						isMenuItem ? 'flex items-center justify-start' : '',
@@ -310,7 +310,7 @@
 					)}
 					wrapperStyle={css?.container?.style}
 					disabled={resolvedConfig.disabled}
-					on:click={handleClick}
+					onclick={handleClick}
 					extendedSize={resolvedConfig.size}
 					color={resolvedConfig.color}
 					loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
@@ -353,10 +353,10 @@
 			title={resolvedConfig?.confirmationModal?.configuration?.confirmationModal?.title ?? ''}
 			confirmationText={resolvedConfig?.confirmationModal?.configuration?.confirmationModal
 				?.confirmationText ?? ''}
-			on:canceled={() => {
+			oncanceled={() => {
 				confirmedCallback = undefined
 			}}
-			on:confirmed={() => {
+			onconfirmed={() => {
 				if (confirmedCallback) {
 					confirmedCallback()
 				}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index 68064c0136..dd145b54d8 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -148,10 +148,10 @@
 						{loading}
 						btnClasses={twMerge(css?.button?.class, 'wm-submit-button')}
 						style={css?.button?.style ?? ''}
-						on:pointerdown={(e) => {
+						onpointerdown={(e) => {
 							e?.stopPropagation()
 						}}
-						on:click={() => {
+						onclick={() => {
 							runnableComponent?.runComponent()
 						}}
 						extendedSize={resolvedConfig.size}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index f2d9498536..020d3b0a52 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -145,10 +145,10 @@
 					<Button
 						{loading}
 						btnClasses="my-1"
-						on:pointerdown={(e) => {
+						onpointerdown={(e) => {
 							e?.stopPropagation()
 						}}
-						on:click={async () => {
+						onclick={async () => {
 							if (!runnableComponent) {
 								runnableWrapper?.handleSideEffect(true)
 							} else {
@@ -176,7 +176,7 @@
 			color={resolvedConfig.color}
 			btnClasses={twMerge(css?.button?.class, 'wm-button', 'wm-modal-form-button')}
 			style={css?.button?.style ?? ''}
-			on:click={(e) => {
+			onclick={(e) => {
 				modal?.open()
 			}}
 			variant="contained"
diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
index 4b96de346e..0d19c5119a 100644
--- a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
@@ -165,7 +165,7 @@
 							arrows={true}
 							swiping={false}
 							bind:this={carousel}
-							on:pageChange={(event) => {
+							onpageChange={(event) => {
 								currentPageIndex = event.detail
 								$focusedGrid = {
 									parentComponentId: id,
@@ -178,7 +178,7 @@
 									<div>
 										<Button
 											color="light"
-											on:click={() => {
+											onclick={() => {
 												const pagesCount = result?.length ?? 0
 
 												if (currentPageIndex > 0) {
@@ -198,7 +198,7 @@
 									<div>
 										<Button
 											color="light"
-											on:click={() => {
+											onclick={() => {
 												const pagesCount = result?.length ?? 0
 												if (currentPageIndex < pagesCount - 1) {
 													carousel.goTo(currentPageIndex + 1)
diff --git a/frontend/src/lib/components/apps/components/display/AppChat.svelte b/frontend/src/lib/components/apps/components/display/AppChat.svelte
index 49e6f5d2a1..46fb652983 100644
--- a/frontend/src/lib/components/apps/components/display/AppChat.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppChat.svelte
@@ -261,9 +261,9 @@
 	{outputs}
 	doOnSuccess={resolvedConfig.onSuccess}
 	doOnError={resolvedConfig.onError}
-	on:streamupdate={handleStreamUpdate}
-	on:done={handleJobComplete}
-	on:doneError={handleJobError}
+	onstreamupdate={handleStreamUpdate}
+	ondone={handleJobComplete}
+	ondoneError={handleJobError}
 	{errorHandledByComponent}
 	autoRefresh={false}
 	{render}
diff --git a/frontend/src/lib/components/apps/components/display/AppDownload.svelte b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
index 0f38afe1db..7127a8ca5a 100644
--- a/frontend/src/lib/components/apps/components/display/AppDownload.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
@@ -147,7 +147,7 @@
 				!isPartialS3Object(resolvedConfig.source)}
 		>
 			<Button
-				on:pointerdown={(e) => e.stopPropagation()}
+				onpointerdown={(e) => e.stopPropagation()}
 				btnClasses={twMerge(
 					css?.button?.class,
 					'wm-button',
diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index 7e269298fe..43ab3d3f5d 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -126,7 +126,7 @@
 					{#snippet triggr({ trigger })}
 						<MeltButton meltElement={trigger} class="w-full h-full">
 							<Button
-								on:pointerdown={(e) => e.stopPropagation()}
+								onpointerdown={(e) => e.stopPropagation()}
 								btnClasses={twMerge(
 									css?.button?.class,
 									'wm-button',
diff --git a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
index 85f0e3193e..58f43b5ab0 100644
--- a/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppNavbarItem.svelte
@@ -163,7 +163,7 @@
 		}`}
 	>
 		<Button
-			on:click={buttonProps.onClick ?? (() => {})}
+			onclick={buttonProps.onClick ?? (() => {})}
 			href={buttonProps.href}
 			target={buttonProps.target ?? '_self'}
 			color="light"
diff --git a/frontend/src/lib/components/apps/components/display/AppPdf.svelte b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
index e31cb4ae65..cf85dd539e 100644
--- a/frontend/src/lib/components/apps/components/display/AppPdf.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
@@ -95,10 +95,10 @@
 				{zoom}
 				class={css?.container?.class}
 				style={css?.container?.style}
-				on:loading={() => {
+				onloading={() => {
 					outputs.loading.set(true)
 				}}
-				on:loaded={() => {
+				onloaded={() => {
 					outputs.loading.set(false)
 				}}
 			/>
diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
index 4981e1ee4f..70b1032cd2 100644
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -273,7 +273,7 @@
 									variant="default"
 									size="xs"
 									btnClasses="!p-1"
-									on:click={() => copyToClipboard(result)}
+									onclick={() => copyToClipboard(result)}
 								>
 									<Copy size={14} strokeWidth={2} />
 								</Button>
diff --git a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
index 95aeef0c32..8b2c7a87d9 100644
--- a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
+++ b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
@@ -36,7 +36,7 @@
 	startIcon={{ icon: Plus }}
 	variant="default"
 	size="xs2"
-	on:click={() => {
+	onclick={() => {
 		args = {}
 		insertDrawer?.openDrawer()
 	}}
@@ -45,12 +45,12 @@
 </Button>
 
 <Drawer bind:this={insertDrawer} size="800px">
-	<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer} id="insert-row-drawer">
+	<DrawerContent title="Insert row" onclose={insertDrawer.closeDrawer} id="insert-row-drawer">
 		{#snippet actions()}
 			<Button
 				variant="accent"
 				unifiedSize="md"
-				on:click={onConfirm}
+				onclick={onConfirm}
 				disabled={!isInsertable}
 				shortCut={{ Icon: CornerDownLeft }}
 			>
diff --git a/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte b/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
index c37250fa95..0f883e0945 100644
--- a/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
+++ b/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
@@ -179,7 +179,7 @@
 
 <DarkModeObserver
 	bind:darkMode
-	on:change={(e) => {
+	onchange={(e) => {
 		tick().then(() => {
 			chartInstance && updateChartByResult()
 		})
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
index 43a49a9efa..da8effb3de 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
@@ -609,7 +609,7 @@
 {/each}
 
 <InsertRowRunnable
-	on:insert={() => {
+	oninsert={() => {
 		aggrid?.clearRows()
 		refreshCount++
 	}}
@@ -618,7 +618,7 @@
 />
 {#if resolvedConfig.allowDelete}
 	<DeleteRow
-		on:deleted={() => {
+		ondeleted={() => {
 			aggrid?.clearRows()
 			refreshCount++
 		}}
@@ -700,10 +700,10 @@
 					{outputs}
 					allowDelete={resolvedConfig.allowDelete ?? false}
 					containerHeight={componentContainerHeight - (buttonContainerHeight ?? 0)}
-					on:update={onUpdate}
-					on:delete={onDelete}
+					onupdate={onUpdate}
+					ondelete={onDelete}
 					allowColumnDefsActions={false}
-					on:recompute={() => {
+					onrecompute={() => {
 						lastTable = undefined
 						clearColumnDefs()
 						listColumnsIfAvailable()
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
index c4725bcaa9..a37215611c 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -558,7 +558,7 @@
 							startIcon={{ icon: Download }}
 							color="light"
 							size="xs2"
-							on:click={() => {
+							onclick={() => {
 								api?.exportDataAsCsv()
 							}}
 							iconOnly
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
index 3438a4878e..644d1ed7d8 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
@@ -214,7 +214,7 @@
 	{render}
 	autoRefresh={true}
 	allowConcurentRequests
-	on:argsChanged={() => {
+	onargsChanged={() => {
 		clear()
 	}}
 >
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index 922991d163..0f409dc04c 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -694,7 +694,7 @@
 									startIcon={{ icon: Download }}
 									color="light"
 									size="xs2"
-									on:click={() => {
+									onclick={() => {
 										api?.exportDataAsCsv()
 									}}
 									iconOnly
@@ -721,7 +721,7 @@
 										color="light"
 										size="xs2"
 										disabled={api?.paginationGetCurrentPage() == 0}
-										on:click={() => {
+										onclick={() => {
 											api?.paginationGoToFirstPage()
 											refreshCount++
 										}}
@@ -732,7 +732,7 @@
 										color="light"
 										size="xs2"
 										disabled={api?.paginationGetCurrentPage() == 0}
-										on:click={() => {
+										onclick={() => {
 											api?.paginationGoToPreviousPage()
 											refreshCount++
 										}}
@@ -748,7 +748,7 @@
 										size="xs2"
 										disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
 											api?.paginationGetTotalPages()}
-										on:click={() => {
+										onclick={() => {
 											api?.paginationGoToNextPage()
 											refreshCount++
 										}}
@@ -760,7 +760,7 @@
 										size="xs2"
 										disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
 											api?.paginationGetTotalPages()}
-										on:click={() => {
+										onclick={() => {
 											api?.paginationGoToLastPage()
 											refreshCount++
 										}}
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
index 05ad9bb089..4b0cd46be0 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
@@ -152,7 +152,7 @@
 								{#snippet content()}
 									<ComponentOutputViewer
 										suffix="table"
-										on:select={({ detail }) => {
+										onselect={(detail) => {
 											const tableId = action.id.split('_')[0]
 
 											connectOutput(
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index 1bf58bd190..e7696e7e53 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -499,8 +499,8 @@
 											{@const context = cell?.getContext()}
 											{#if context}
 												<AppCell
-													on:keydown={() => toggleRow(row)}
-													on:click={() => toggleRow(row)}
+													onkeydown={() => toggleRow(row)}
+													onclick={() => toggleRow(row)}
 													type={resolvedConfig.columnDefs?.find(
 														// TS types are wrong here
 														// @ts-ignore
@@ -508,7 +508,7 @@
 													)?.type ?? 'text'}
 													value={cell.getValue()}
 													width={cell.column.getSize()}
-													on:update={(event) => {
+													onupdate={(event) => {
 														updateCellValue(rowIndex, index, event.detail.value)
 													}}
 												/>
@@ -611,7 +611,7 @@
 																			{#snippet content()}
 																				<ComponentOutputViewer
 																					suffix="table"
-																					on:select={({ detail }) =>
+																					onselect={(detail) =>
 																						connectOutput(
 																							connectingInput,
 																							'buttoncomponent',
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte b/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
index 3a73a49d47..5c0f64ca70 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte
@@ -88,7 +88,7 @@
 					<Button
 						size="xs2"
 						color="light"
-						on:click={downloadResultAsCSV}
+						onclick={downloadResultAsCSV}
 						startIcon={{ icon: Download }}
 						wrapperClasses="app-table-footer-btn"
 						iconOnly
@@ -103,7 +103,7 @@
 					<Button
 						size="xs2"
 						color="light"
-						on:click={() => {
+						onclick={() => {
 							$table.getAllColumns().forEach((column) => column.toggleVisibility(true))
 						}}
 						startIcon={{ icon: Columns }}
@@ -118,7 +118,7 @@
 				<Button
 					size="xs2"
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						isPreviousLoading = true
 						$table.previousPage()
 					}}
@@ -133,7 +133,7 @@
 				<Button
 					size="xs2"
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						isNextLoading = true
 						$table.nextPage()
 					}}
diff --git a/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte b/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
index 64dafa0ef0..1459042dfe 100644
--- a/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/SyncColumnDefs.svelte
@@ -167,7 +167,7 @@
 								startIcon={{ icon: RefreshCw }}
 								size="xs"
 								variant="accent"
-								on:click={syncColumns}
+								onclick={syncColumns}
 							>
 								Sync columns definition
 							</Button>
@@ -192,7 +192,7 @@
 								startIcon={{ icon: RefreshCw }}
 								size="xs"
 								color="red"
-								on:click={setEmptyColumns}
+								onclick={setEmptyColumns}
 							>
 								Fix columns definitions
 							</Button>
@@ -212,7 +212,7 @@
 								startIcon={{ icon: RefreshCw }}
 								size="xs"
 								color="red"
-								on:click={setEmptyColumns}
+								onclick={setEmptyColumns}
 							>
 								Fix columns definitions
 							</Button>
diff --git a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
index 14729e30fe..463c37f24f 100644
--- a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
@@ -20,8 +20,8 @@
 
 <Popover>
 	<Button
-		on:mouseenter={() => (buttonHover = true)}
-		on:mouseleave={() => (buttonHover = false)}
+		onmouseenter={() => (buttonHover = true)}
+		onmouseleave={() => (buttonHover = false)}
 		startIcon={{
 			icon: loading ? (!buttonHover ? LoaderIcon : RefreshCwOff) : RefreshCw,
 			classes: twMerge(
@@ -32,14 +32,14 @@
 		color="light"
 		size="xs2"
 		btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
-		on:click={(e) => {
+		onclick={(e) => {
 			if (buttonHover && loading) {
 				cancelCallbacks?.forEach((cb) => cb.cancel())
 			} else {
 				cancelCallbacks = $runnableComponents[id]?.cb?.map((cb) => cb())
 			}
 		}}
-		on:pointerdown={(e) => {
+		onpointerdown={(e) => {
 			e.preventDefault()
 			e.stopPropagation()
 		}}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index d0edc224c8..faf8b65ed4 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -920,7 +920,7 @@
 					{workspace}
 					bind:this={schemaForm}
 					bind:args
-					on:inputClicked={handleInputClick}
+					oninputClicked={handleInputClick}
 				/>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index 8d444d95af..3a1ce16cd7 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -97,6 +97,12 @@
 		children?: import('svelte').Snippet
 		nonRenderedPlaceholder?: import('svelte').Snippet
 		preventDefaultRefresh?: boolean
+		ondone?: (...args: any[]) => any
+		ondoneError?: (...args: any[]) => any
+		oncancel?: (...args: any[]) => any
+		onrecompute?: (...args: any[]) => any
+		onargsChanged?: (...args: any[]) => any
+		onstreamupdate?: (...args: any[]) => any
 	}
 
 	let {
@@ -129,7 +135,13 @@
 		allowConcurentRequests = false,
 		onSuccess = () => {},
 		children,
-		nonRenderedPlaceholder
+		nonRenderedPlaceholder,
+		ondone = undefined,
+		ondoneError = undefined,
+		oncancel = undefined,
+		onrecompute = undefined,
+		onargsChanged = undefined,
+		onstreamupdate = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -368,16 +380,16 @@
 		wrapperClass={runnableClass}
 		wrapperStyle={runnableStyle}
 		{render}
-		on:started={(e) => {
+		onstarted={(e) => {
 			handleSubmitSideEffect()
 		}}
-		on:done
-		on:doneError
-		on:cancel
-		on:recompute
-		on:argsChanged
-		on:streamupdate
-		on:resultSet={(e) => {
+		ondone={ondone}
+		ondoneError={ondoneError}
+		oncancel={oncancel}
+		onrecompute={onrecompute}
+		onargsChanged={onargsChanged}
+		onstreamupdate={onstreamupdate}
+		onresultSet={(e) => {
 			const res = e.detail
 			if ($initialized?.runnableInitialized?.[fullId] === undefined) {
 				$initialized.runnableInitialized = {
@@ -392,7 +404,7 @@
 			onSuccess(result)
 			handleSideEffect(true)
 		}}
-		on:handleError={(e) => handleSideEffect(false, e.detail)}
+		onhandleError={(e) => handleSideEffect(false, e.detail)}
 		{outputs}
 		{errorHandledByComponent}
 		{nonRenderedPlaceholder}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index 261eb67b65..aecf3f43ef 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -151,7 +151,7 @@
 		options={{ right: resolvedConfig.label }}
 		textClass={twMerge(css?.text?.class, 'wm-toggle-text')}
 		textStyle={css?.text?.style ?? ''}
-		on:change={(e) => {
+		onchange={(e) => {
 			preclickAction?.()
 
 			value = e.detail
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
index 9ad56f8c40..2524767b4b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
@@ -184,7 +184,7 @@
 			<DateTimeInput
 				bind:value
 				useDropdown={resolvedConfig?.displayPresets}
-				on:pointerdown={(e) => {
+				onpointerdown={(e) => {
 					e.stopPropagation()
 					$selectedComponent = [id]
 				}}
@@ -195,7 +195,7 @@
 				maxDate={resolvedConfig.maxDateTime
 					? formatDate(resolvedConfig.maxDateTime, 'yyyy-MM-dd')
 					: undefined}
-				on:focus={() => ($selectedComponent = [id])}
+				onfocus={() => ($selectedComponent = [id])}
 				disabled={resolvedConfig.disabled}
 			/>
 		{/if}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte
index 1ed97afdc8..6d277f97d9 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte
@@ -63,7 +63,7 @@
 		{#if resolvedConfig.displayDirectLink && fileUpload.progress === 100}
 										<Button
 											color="light"
-											on:click={() => {
+											onclick={() => {
 												if (!fileUpload.path) {
 													return
 												}
@@ -142,13 +142,13 @@
 		disabled={resolvedConfigS3?.disabled}
 		{fileUploads}
 		{workspace}
-		on:addition={(evt) => {
+		onaddition={(evt) => {
 			const curr = outputs.result.peak()
 			value = curr.concat(evt.detail)
 			outputs.result.set(value)
 			onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 		}}
-		on:deletion={(evt) => {
+		ondeletion={(evt) => {
 			const curr = outputs.result.peak()
 			value = curr.filter((file) => file.path !== evt.detail?.path)
 			outputs.result.set(value)
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte
index 75210022f0..47b9a013fa 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte
@@ -131,7 +131,7 @@
 			hasValidations={false}
 			allowStepNavigation={true}
 			{selectedIndex}
-			on:click={(e) => {
+			onclick={(e) => {
 				const index = e.detail.index
 				selectedIndex = index
 				let item = resolvedConfig?.items[index]
diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index d42fdc3ba5..7f62f3033d 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -257,7 +257,7 @@
 			{/if}
 			{#if getFirstNode(nodes)?.id !== currentNodeId}
 				<Button
-					on:click={prev}
+					onclick={prev}
 					size="xs2"
 					color="light"
 					startIcon={{ icon: ArrowLeft }}
@@ -267,7 +267,7 @@
 				</Button>
 			{/if}
 			<Button
-				on:click={next}
+				onclick={next}
 				size="xs2"
 				variant="accent"
 				endIcon={{ icon: ArrowRight }}
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index c01d08b237..ca77607499 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -112,10 +112,10 @@
 				)}
 				wrapperStyle={css?.container?.style}
 				disabled={resolvedConfig?.disabled}
-				on:pointerdown={(e) => {
+				onpointerdown={(e) => {
 					e?.stopPropagation()
 				}}
-				on:click={async (e) => {
+				onclick={async (e) => {
 					$focusedGrid = {
 						parentComponentId: id,
 						subGridIndex: 0
@@ -143,11 +143,11 @@
 			alwaysOpen
 			positionClass={$mode == 'dnd' ? '!absolute' : '!fixed'}
 			shouldUsePortal={false}
-			on:open={() => {
+			onopen={() => {
 				outputs?.open.set(true)
 				onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
-			on:close={() => {
+			onclose={() => {
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
@@ -156,7 +156,7 @@
 			{#snippet children({ open })}
 				<DrawerContent
 					title={resolvedConfig.drawerTitle}
-					on:close={() => {
+					onclose={() => {
 						appDrawer?.toggleDrawer()
 						$focusedGrid = undefined
 					}}
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index af266bba6e..46b9311f53 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -250,7 +250,7 @@
 						size="xs2"
 						variant="default"
 						btnClasses="flex flex-row gap-1 items-center wm-list-pagination-buttons"
-						on:click={() => {
+						onclick={() => {
 							isPreviousLoading = true
 							page = page - 1
 							outputs?.page.set(page, true)
@@ -268,7 +268,7 @@
 						size="xs2"
 						variant="default"
 						btnClasses="flex flex-row gap-1 items-center wm-list-pagination-buttons"
-						on:click={() => {
+						onclick={() => {
 							isNextLoading = true
 							page = page + 1
 							outputs?.page.set(page, true)
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 6232b667fd..49a13a9601 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -156,10 +156,10 @@
 				style={css?.button?.style}
 				wrapperStyle={css?.buttonContainer?.style}
 				disabled={resolvedConfig.buttonDisabled}
-				on:pointerdown={(e) => {
+				onpointerdown={(e) => {
 					e?.stopPropagation()
 				}}
-				on:click={async (e) => {
+				onclick={async (e) => {
 					await preclickAction?.()
 					$focusedGrid = {
 						parentComponentId: id,
diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
index 3a3374de84..97c8c75808 100644
--- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
@@ -195,7 +195,7 @@
 			{#if render}
 				<div bind:clientHeight={tabHeight}>
 					<Stepper
-						on:click={(e) => {
+						onclick={(e) => {
 							const index = e.detail.index
 							if (index <= maxReachedIndex || $mode === 'dnd') {
 								runStep(index)
@@ -244,7 +244,7 @@
 								size="xs"
 								variant="subtle"
 								disabled={selectedIndex === 0}
-								on:click={(e) => {
+								onclick={(e) => {
 									e.preventDefault()
 									directionClicked = 'left'
 									onPrevious?.forEach((id) =>
@@ -267,7 +267,7 @@
 								size="xs"
 								variant="accent"
 								disabled={lastStep}
-								on:click={(e) => {
+								onclick={(e) => {
 									e.preventDefault()
 									directionClicked = 'right'
 									onNext?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
diff --git a/frontend/src/lib/components/apps/editor/AppDeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/AppDeploymentHistory.svelte
index 6e73f97c19..5d3ef1a144 100644
--- a/frontend/src/lib/components/apps/editor/AppDeploymentHistory.svelte
+++ b/frontend/src/lib/components/apps/editor/AppDeploymentHistory.svelte
@@ -30,14 +30,14 @@
 </script>
 
 <Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
-	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
+	<DrawerContent title="Deployment History" onclose={() => (historyBrowserDrawerOpen = false)}>
 		<DeploymentHistory
-			on:restore={(e) => {
+			onrestore={(e) => {
 				sendUserToast('App restored from previous deployment')
 				updateApp(e.detail)
 			}}
 			{appPath}
-			on:close={() => {
+			onclose={() => {
 				historyBrowserDrawerOpen = false
 			}}
 		/>
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index edbf13c60b..4112af13dd 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -76,7 +76,8 @@
 		gotoFn = (path: string, opt?: Record<string, any>) => window.history.pushState(null, '', path),
 		unsavedConfirmationModal,
 		onSavedNewAppPath,
-		onpointerdown = undefined
+		onpointerdown = undefined,
+		onrestore = undefined
 	}: AppEditorProps = $props()
 
 	migrateApp(app)
@@ -829,7 +830,7 @@
 
 <svelte:head></svelte:head>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver onchange={onThemeChange} />
 
 <svelte:window
 	onhashchange={hashchange}
@@ -848,7 +849,7 @@
 		<AppEditorHeader
 			{newPath}
 			{newApp}
-			on:restore
+			onrestore={onrestore}
 			{policy}
 			{fromHub}
 			bind:this={appEditorHeader}
@@ -936,7 +937,7 @@
 							<!-- {yTop} -->
 
 							<SecondaryMenu right={false} />
-							<ContextPanel on:hidePanel={() => hideLeftPanel()} />
+							<ContextPanel onhidePanel={() => hideLeftPanel()} />
 						</div>
 					</Pane>
 					<Pane bind:size={centerPanelSize}>
@@ -959,7 +960,7 @@
 									{#if leftPanelSize === 0}
 										<div class="absolute top-0.5 left-0.5 z-50">
 											<HideButton
-												on:click={() => showLeftPanel()}
+												onclick={() => showLeftPanel()}
 												direction="left"
 												hidden
 												btnClasses="border bg-surface"
@@ -969,7 +970,7 @@
 									{#if rightPanelSize === 0}
 										<div class="absolute top-0.5 right-0.5 z-50">
 											<HideButton
-												on:click={() => showRightPanel()}
+												onclick={() => showRightPanel()}
 												direction="right"
 												hidden
 												btnClasses="border bg-surface"
@@ -979,7 +980,7 @@
 									{#if runnablePanelSize === 0}
 										<div class="absolute bottom-0.5 right-0.5 z-50">
 											<HideButton
-												on:click={() => showBottomPanel()}
+												onclick={() => showBottomPanel()}
 												direction="bottom"
 												hidden
 												btnClasses="border bg-surface"
@@ -997,7 +998,7 @@
 												color="light"
 												size="xs2"
 												disabled={$scale <= 30}
-												on:click={() => {
+												onclick={() => {
 													zoomTo(0.5, 0, Math.round(($scale - 10) / 10) / 10)
 												}}
 											>
@@ -1010,13 +1011,13 @@
 												color="light"
 												size="xs2"
 												disabled={$scale >= 150}
-												on:click={() => {
+												onclick={() => {
 													zoomTo(0.5, 0, Math.round(($scale + 10) / 10) / 10)
 												}}
 											>
 												<Plus size={14} />
 											</Button>
-											<Button color="light" size="xs2" disabled={false} on:click={resetView}>
+											<Button color="light" size="xs2" disabled={false} onclick={resetView}>
 												<Scan size={14} />
 											</Button>
 											<Popover disappearTimeout={0} notClickable placement="bottom">
@@ -1049,7 +1050,7 @@
 													color="light"
 													size="xs2"
 													disabled={false}
-													on:click={() => (handMode = !handMode)}
+													onclick={() => (handMode = !handMode)}
 													btnClasses={handMode ? 'bg-surface-hover' : ''}
 												>
 													{#if $panzoomActive}
@@ -1115,7 +1116,7 @@
 													<Button
 														variant="default"
 														size="xs"
-														on:click={() => {
+														onclick={() => {
 															$appStore.mobileViewOnSmallerScreens = true
 														}}
 														startIcon={{
@@ -1133,7 +1134,7 @@
 							{#if $connectingInput?.opened == false && !$componentActive}
 								<Pane bind:size={runnablePanelSize}>
 									<AppEditorBottomPanel
-										on:mouseenter={() => {
+										onmouseenter={() => {
 											runnableJobEnterTimeout && clearTimeout(runnableJobEnterTimeout)
 											stillInJobEnter = true
 											runnableJobEnterTimeout = setTimeout(() => {
@@ -1142,8 +1143,8 @@
 												}
 											}, 200)
 										}}
-										on:hidePanel={() => hideBottomPanel()}
-										on:mouseleave={() => {
+										onhidePanel={() => hideBottomPanel()}
+										onmouseleave={() => {
 											stillInJobEnter = false
 											runnableJobEnterTimeout = setTimeout(
 												() => ($runnableJob.focused = false),
@@ -1176,7 +1177,7 @@
 										<Tab
 											value="insert"
 											class="h-full"
-											on:pointerdown={() => {
+											onpointerdown={() => {
 												if ($cssEditorOpen) {
 													$cssEditorOpen = false
 													selectedTab = 'insert'
@@ -1193,7 +1194,7 @@
 										<Tab
 											value="settings"
 											class="h-full"
-											on:pointerdown={() => {
+											onpointerdown={() => {
 												if ($cssEditorOpen) {
 													$cssEditorOpen = false
 													selectedTab = 'settings'
@@ -1209,7 +1210,7 @@
 										<Tab
 											value="css"
 											class="h-full"
-											on:pointerdown={() => {
+											onpointerdown={() => {
 												if (!$cssEditorOpen) {
 													$cssEditorOpen = true
 													selectedTab = 'css'
@@ -1219,14 +1220,14 @@
 										/>
 									</Popover>
 									<div class="h-full w-full flex justify-end px-1">
-										<HideButton on:click={() => hideRightPanel()} direction="right" />
+										<HideButton onclick={() => hideRightPanel()} direction="right" />
 									</div>
 									{#snippet content()}
 										<div class="h-full overflow-y-auto">
 											<TabContent class="overflow-auto h-full" value="settings">
 												{#if $selectedComponent !== undefined}
 													<SettingsPanel
-														on:delete={() => {
+														ondelete={() => {
 															befSelected = undefined
 															selectedTab = 'insert'
 														}}
@@ -1281,7 +1282,7 @@
 				variant="default"
 				size="sm"
 				startIcon={{ icon: Plus }}
-				on:click={() => {
+				onclick={() => {
 					variableEditor?.initNew?.()
 				}}
 			>
diff --git a/frontend/src/lib/components/apps/editor/AppEditorBottomPanel.svelte b/frontend/src/lib/components/apps/editor/AppEditorBottomPanel.svelte
index 78fa8399b5..155eee957d 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorBottomPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorBottomPanel.svelte
@@ -8,6 +8,7 @@
 		runnablePanelSize?: number
 		onmouseenter?: (...args: any[]) => any
 		onmouseleave?: (...args: any[]) => any
+		onhidePanel?: (...args: any[]) => any
 	}
 
 	let {
@@ -15,7 +16,8 @@
 		centerPanelWidth = 0,
 		runnablePanelSize = 0,
 		onmouseenter = undefined,
-		onmouseleave = undefined
+		onmouseleave = undefined,
+		onhidePanel = undefined
 	}: Props = $props()
 </script>
 
@@ -26,12 +28,12 @@
 		onmouseenter={(e) => onmouseenter?.(e)}
 		onmouseleave={(e) => onmouseleave?.(e)}
 	>
-		<InlineScriptsPanel on:hidePanel />
+		<InlineScriptsPanel onhidePanel={onhidePanel} />
 		<RunnableJobPanel hidden={runnablePanelSize === 0} />
 	</div>
 {:else}
 	<div class="flex flex-row relative w-full h-full">
-		<InlineScriptsPanel width={centerPanelWidth * 0.66} on:hidePanel />
+		<InlineScriptsPanel width={centerPanelWidth * 0.66} onhidePanel={onhidePanel} />
 		<RunnableJobPanel float={false} hidden={runnablePanelSize === 0} />
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index f194bc1df7..ce18164a39 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -95,6 +95,7 @@
 		onHideRightPanel?: () => void
 		onHideLeftPanel?: () => void
 		onHideBottomPanel?: () => void
+		onrestore?: (...args: any[]) => any
 	}
 
 	let {
@@ -115,7 +116,8 @@
 		onShowBottomPanel,
 		onHideLeftPanel,
 		onHideRightPanel,
-		onHideBottomPanel
+		onHideBottomPanel,
+		onrestore = undefined
 	}: Props = $props()
 
 	let newEditedPath = $state('')
@@ -741,13 +743,13 @@
 
 {#if $appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
-		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
+		<DrawerContent title="Initial draft save" onclose={() => closeDraftDrawer()}>
 			{#snippet actions()}
 				<div>
 					<Button
 						startIcon={{ icon: Save }}
 						disabled={pathError != ''}
-						on:click={() => saveInitialDraft()}
+						onclick={() => saveInitialDraft()}
 						unifiedSize="md"
 						variant="accent"
 					>
@@ -769,11 +771,11 @@
 <AppJobsDrawer
 	bind:open={$jobsDrawerOpen}
 	jobs={$jobs}
-	on:clear={() => {
+	onclear={() => {
 		$jobs = []
 		$errorByComponent = {}
 	}}
-	on:clearErrors={() => {
+	onclearErrors={() => {
 		$errorByComponent = {}
 	}}
 	{hasErrors}
@@ -783,13 +785,13 @@
 	errorByComponent={$errorByComponent}
 />
 <Drawer bind:open={saveDrawerOpen} size="800px">
-	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
+	<DrawerContent title="Deploy" onclose={() => closeSaveDrawer()}>
 		{#snippet actions()}
 			<div class="flex flex-row gap-4">
 				<Button
 					variant="accent"
 					disabled={!savedApp || savedApp.draft_only}
-					on:click={async () => {
+					onclick={async () => {
 						if (!savedApp) {
 							return
 						}
@@ -831,7 +833,7 @@
 					variant="accent"
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' || customPathError != ''}
-					on:click={() => {
+					onclick={() => {
 						if ($appPath == '') {
 							createApp(newEditedPath)
 						} else {
@@ -863,25 +865,25 @@
 </Drawer>
 
 <Drawer bind:open={inputsDrawerOpen} size="600px">
-	<DrawerContent title="App inputs configuration" on:close={() => (inputsDrawerOpen = false)}>
+	<DrawerContent title="App inputs configuration" onclose={() => (inputsDrawerOpen = false)}>
 		<AppInputs />
 	</DrawerContent>
 </Drawer>
 
 <Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
-	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
-		<DeploymentHistory on:restore appPath={$appPath} />
+	<DrawerContent title="Deployment History" onclose={() => (historyBrowserDrawerOpen = false)}>
+		<DeploymentHistory onrestore={onrestore} appPath={$appPath} />
 	</DrawerContent>
 </Drawer>
 
 <Drawer bind:open={debugAppDrawerOpen} size="800px">
-	<DrawerContent title="Troubleshoot Panel" on:close={() => (debugAppDrawerOpen = false)}>
+	<DrawerContent title="Troubleshoot Panel" onclose={() => (debugAppDrawerOpen = false)}>
 		<DebugPanel />
 	</DrawerContent>
 </Drawer>
 
 <Drawer bind:open={lazyDrawerOpen} size="800px">
-	<DrawerContent title="Lazy Mode" on:close={() => (lazyDrawerOpen = false)}>
+	<DrawerContent title="Lazy Mode" onclose={() => (lazyDrawerOpen = false)}>
 		<LazyModePanel />
 	</DrawerContent>
 </Drawer>
@@ -897,13 +899,13 @@
 			<UndoRedo
 				undoProps={{ disabled: $history?.index === 0 }}
 				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
-				on:undo={() => {
+				onundo={() => {
 					const napp = undo(history, $app)
 					for (const key in napp) {
 						$app[key] = napp[key]
 					}
 				}}
-				on:redo={() => {
+				onredo={() => {
 					const napp = redo(history)
 					for (const key in napp) {
 						$app[key] = napp[key]
@@ -914,7 +916,7 @@
 			{#if $app}
 				<ToggleButtonGroup
 					selected={$app.fullscreen ? 'true' : 'false'}
-					on:selected={({ detail }) => {
+					onselected={(detail) => {
 						$app.fullscreen = detail === 'true'
 					}}
 				>
@@ -940,7 +942,7 @@
 			{/if}
 			{#if $app}
 				<ToggleButtonGroup
-					on:selected={({ detail }) => {
+					onselected={(detail) => {
 						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
 						setTheme(theme)
 					}}
@@ -1017,7 +1019,7 @@
 			<HideButton
 				direction="left"
 				hidden={leftPanelHidden}
-				on:click={() => {
+				onclick={() => {
 					if (leftPanelHidden) {
 						onShowLeftPanel?.()
 					} else {
@@ -1028,7 +1030,7 @@
 			<HideButton
 				hidden={bottomPanelHidden}
 				direction="bottom"
-				on:click={() => {
+				onclick={() => {
 					if (bottomPanelHidden) {
 						onShowBottomPanel?.()
 					} else {
@@ -1039,7 +1041,7 @@
 			<HideButton
 				hidden={rightPanelHidden}
 				direction="right"
-				on:click={() => {
+				onclick={() => {
 					if (rightPanelHidden) {
 						onShowRightPanel?.()
 					} else {
@@ -1065,7 +1067,7 @@
 				></span>
 			{/if}
 			<Button
-				on:click={() => {
+				onclick={() => {
 					if (selectedJobId == undefined && $jobs.length > 0) {
 						selectedJobId = $jobs[$jobs.length - 1]
 					}
@@ -1087,7 +1089,7 @@
 							size="xs"
 							btnClasses="-my-2 !px-1 !py-0"
 							variant="default"
-							on:click={() => errorByComponent.set({})}
+							onclick={() => errorByComponent.set({})}
 							><BellOff size={12} />
 						</Button>
 					{/if}
@@ -1100,7 +1102,7 @@
 			variant="accent"
 			loading={loading.save}
 			startIcon={{ icon: Save }}
-			on:click={() => saveDraft()}
+			onclick={() => saveDraft()}
 			unifiedSize="md"
 			disabled={!newApp && !savedApp}
 			shortCut={{ key: 'S' }}
@@ -1111,7 +1113,7 @@
 			variant="accent"
 			loading={loading.save}
 			startIcon={{ icon: Save }}
-			on:click={save}
+			onclick={save}
 			unifiedSize="md"
 			dropdownItems={$appPath != ''
 				? () => [
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeaderDeploy.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeaderDeploy.svelte
index 5d5484a544..734b336fef 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeaderDeploy.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeaderDeploy.svelte
@@ -243,7 +243,7 @@
 					right: `No login required`
 				}}
 				checked={policy.execution_mode == 'anonymous'}
-				on:change={(e) => {
+				onchange={(e) => {
 					policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
 					setPublishState()
 				}}
@@ -273,7 +273,7 @@
 				<EEOnly />
 			{/if}
 			<Toggle
-				on:change={({ detail }) => {
+				onchange={(detail) => {
 					customPath = detail ? '' : undefined
 					if (customPath === undefined) {
 						customPathError = ''
diff --git a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
index 6981974c02..e335ed46c1 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
@@ -8,6 +8,14 @@
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import { getTutorialIndex } from '$lib/tutorials/config'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+	}
+
+	let {
+		onreload = undefined
+	}: Props = $props()
+
 	let appTutorials: AppTutorials | undefined = $state(undefined)
 	let targetTutorial: string | undefined = $state(undefined)
 
@@ -64,8 +72,8 @@
 
 <AppTutorials
 	bind:this={appTutorials}
-	on:reload
-	on:error={(event: CustomEvent<{ detail: string }>) => {
+	onreload={onreload}
+	onerror={(event: CustomEvent<{ detail: string }>) => {
 		targetTutorial = event.detail.detail
 	}}
 />
@@ -74,10 +82,10 @@
 	open={targetTutorial !== undefined}
 	title="Tutorial error"
 	confirmationText="Open new tab"
-	on:canceled={() => {
+	oncanceled={() => {
 		targetTutorial = undefined
 	}}
-	on:confirmed={async () => {
+	onconfirmed={async () => {
 		window.open(`/apps/add?tutorial=${targetTutorial}&nodraft=true`, '_blank')
 	}}
 >
diff --git a/frontend/src/lib/components/apps/editor/AppExportButton.svelte b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
index cc6ae4c563..b69591861b 100644
--- a/frontend/src/lib/components/apps/editor/AppExportButton.svelte
+++ b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
@@ -29,7 +29,7 @@
 <HighlightTheme />
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer?.toggleDrawer()}>
+	<DrawerContent title="App Export" onclose={() => jsonViewerDrawer?.toggleDrawer()}>
 		<div>
 			<Tabs bind:selected={rawType}>
 				<Tab value="yaml" label="YAML" />
@@ -37,7 +37,7 @@
 				{#snippet content()}
 					<div class="relative pt-2">
 						<Button
-							on:click={() =>
+							onclick={() =>
 								copyToClipboard(
 									rawType === 'yaml'
 										? YAML.stringify(app ?? {})
diff --git a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
index 408ee94f45..36a465b133 100644
--- a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
@@ -73,7 +73,7 @@
 	<DrawerContent
 		noPadding
 		title="Debug Runs"
-		on:close={() => {
+		onclose={() => {
 			open = false
 		}}
 		tooltip="Look at latests runs to spot potential bugs."
@@ -184,7 +184,7 @@
 												<Button
 													variant="accent"
 													destructive
-													on:click={() => jobLoader?.cancelJob()}
+													onclick={() => jobLoader?.cancelJob()}
 												>
 													<Loader2 size={14} class="animate-spin mr-2" />
 
@@ -292,7 +292,7 @@
 				<Button
 					size="md"
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						refreshComponents?.()
 					}}
 					title="Refresh App"
@@ -303,7 +303,7 @@
 			<Button
 				size="md"
 				variant="default"
-				on:click={() => {
+				onclick={() => {
 					dispatch('clear')
 					onclear?.()
 				}}
@@ -313,7 +313,7 @@
 				<Button
 					size="md"
 					variant="default"
-					on:click={() => (dispatch('clearErrors'), onclearErrors?.())}
+					onclick={() => (dispatch('clearErrors'), onclearErrors?.())}
 				>
 					Clear Errors &nbsp;<BellOff size={14} />
 				</Button>
diff --git a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
index 5a955a8ce6..23e885c1ea 100644
--- a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
@@ -10,6 +10,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Globe, Loader2, Save } from 'lucide-svelte'
 
+	interface Props {
+		onchange?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	let jsonViewerDrawer: Drawer | undefined = $state()
 
 	let code: string = $state('')
@@ -73,7 +80,7 @@
 </script>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer?.toggleDrawer()}>
+	<DrawerContent title="App JSON" onclose={() => jsonViewerDrawer?.toggleDrawer()}>
 		{#if useDraft}
 			<div class="mb-1">
 				<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
@@ -87,10 +94,10 @@
 
 		{#snippet actions()}
 			{#if !$userStore?.operator}
-				<Button on:click={saveDraft} startIcon={{ icon: Save }} variant="accent" size="xs">
+				<Button onclick={saveDraft} startIcon={{ icon: Save }} variant="accent" size="xs">
 					Save as draft
 				</Button>
-				<Button on:click={saveApp} startIcon={{ icon: Globe }} variant="accent" size="xs">
+				<Button onclick={saveApp} startIcon={{ icon: Globe }} variant="accent" size="xs">
 					Deploy
 				</Button>
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index 02114e1210..a379fe4a66 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -271,7 +271,7 @@
 
 <svelte:head></svelte:head>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver onchange={onThemeChange} />
 
 <svelte:window onhashchange={hashchange} onresize={resizeWindow} />
 
@@ -344,7 +344,7 @@
 			onclick={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
 		>
-			<Button on:click={() => (isLocked = false)}>
+			<Button onclick={() => (isLocked = false)}>
 				Unlock preview
 				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
 			</Button>
diff --git a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
index 3f25cca3b0..1c423e4423 100644
--- a/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
+++ b/frontend/src/lib/components/apps/editor/AppReportsDrawerInner.svelte
@@ -499,7 +499,7 @@
 </script>
 
 <DrawerContent
-	on:close={() => (open = false)}
+	onclose={() => (open = false)}
 	title="Schedule Reports"
 	tooltip="Send a PDF or PNG preview of any app at a given schedule"
 	documentationLink="https://www.windmill.dev/docs/apps/schedule_reports"
@@ -509,7 +509,7 @@
 			<Toggle
 				checked={appReportingEnabled}
 				options={{ right: 'enable', left: 'disable' }}
-				on:change={async () => {
+				onchange={async () => {
 					if (appReportingEnabled) {
 						disableAppReporting()
 					} else {
@@ -524,7 +524,7 @@
 			variant="accent"
 			startIcon={{ icon: Save }}
 			unifiedSize="md"
-			on:click={async () => {
+			onclick={async () => {
 				await enableAppReporting()
 				sendUserToast('App reporting updated')
 				open = false
@@ -617,7 +617,7 @@
 			{#if selectedTab === 'custom'}
 				<div class="pt-2">
 					<ScriptPicker
-						on:select={(ev) => {
+						onselect={(ev) => {
 							customPath = ev.detail.path
 						}}
 						initialPath={customPath}
@@ -649,7 +649,7 @@
 								</p>
 								<Button
 									variant="default"
-									on:click={getWorspaceSlackSetting}
+									onclick={getWorspaceSlackSetting}
 									startIcon={{ icon: RotateCw }}
 								/>
 							</div>
@@ -674,7 +674,7 @@
 			<Button
 				loading={testLoading}
 				{disabled}
-				on:click={testReport}
+				onclick={testReport}
 				unifiedSize="md"
 				variant="accent"
 				btnClasses="w-auto"
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index cf9168345c..39ca4de1ba 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -125,7 +125,7 @@
 			{#snippet content()}
 				<ComponentOutputViewer
 					suffix="connect"
-					on:select={({ detail }) =>
+					onselect={(detail) =>
 						connectOutput(connectingInput, component.type, component.id, detail)}
 					componentId={component.id}
 				/>
@@ -322,7 +322,7 @@
 				</div>
 				<Button
 					variant="default"
-					on:click={() => $openDebugRun?.($errorByComponent[component.id]?.id ?? '')}
+					onclick={() => $openDebugRun?.($errorByComponent[component.id]?.id ?? '')}
 					>Open Debug Runs</Button
 				>
 			{/snippet}
diff --git a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
index d505a5373f..f37204d678 100644
--- a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
+++ b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
@@ -14,6 +14,7 @@
 		appPath: string | undefined
 		onrestore?: (...args: any[]) => any
 		onkeydown?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let { appPath, onrestore = undefined, onkeydown = undefined }: Props = $props()
@@ -140,7 +141,7 @@
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
 										aria-label="Save deployment message"
-										on:click={() => {
+										onclick={() => {
 											updateDeploymentMsg(selected?.id, selectedVersion?.version)
 										}}
 									>
@@ -152,7 +153,7 @@
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
 										aria-label="Abort"
-										on:click={() => {
+										onclick={() => {
 											deploymentMsgUpdateMode = false
 											deploymentMsgUpdate = undefined
 										}}
@@ -182,13 +183,13 @@
 						<div class="flex p-1 gap-2">
 							<Button
 								size="xs"
-								on:click={() => window.open(`/apps/add?template_id=${selectedVersion?.version}`)}
+								onclick={() => window.open(`/apps/add?template_id=${selectedVersion?.version}`)}
 							>
 								Restore as fork
 							</Button>
 							<Button
 								size="xs"
-								on:click={() => (dispatch('restore', selected), onrestore?.(selected))}
+								onclick={() => (dispatch('restore', selected), onrestore?.(selected))}
 								>Redeploy with that version
 							</Button>
 						</div>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index d412bc1c56..25851b5e89 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -249,16 +249,16 @@
 					>
 						<GridEditorMenu
 							id={dataItem.id}
-							on:expand={() => {
+							onexpand={() => {
 								push(history, $app)
 								$selectedComponent = [dataItem.id]
 								expandGriditem($app.grid, dataItem.id, $breakpoint)
 								$app = $app
 							}}
-							on:lock={() => {
+							onlock={() => {
 								handleLock(dataItem.id)
 							}}
-							on:fillHeight={() => {
+							onfillHeight={() => {
 								handleFillHeight(dataItem.id)
 							}}
 							locked={isFixed(dataItem)}
@@ -270,13 +270,13 @@
 								selected={Boolean($selectedComponent?.includes(dataItem.id))}
 								locked={isFixed(dataItem)}
 								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
-								on:lock={() => {
+								onlock={() => {
 									handleLock(dataItem.id)
 								}}
-								on:fillHeight={() => {
+								onfillHeight={() => {
 									handleFillHeight(dataItem.id)
 								}}
-								on:expand={() => {
+								onexpand={() => {
 									push(history, $app)
 									$selectedComponent = [dataItem.id]
 									expandGriditem($app.grid, dataItem.id, $breakpoint)
diff --git a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
index 7a72ac62b3..0e88492a43 100644
--- a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
+++ b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
@@ -17,7 +17,7 @@
 
 <ToggleButtonGroup
 	bind:selected={$mode}
-	on:selected={(e) => {
+	onselected={(e) => {
 		jobsById.set({})
 		jobs.set([])
 	}}
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
index ead7b0f253..584d609398 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
@@ -13,6 +13,7 @@
 		progress?: number
 		loading?: boolean | undefined
 		onsetInter?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,7 +22,8 @@
 		refreshing = [],
 		progress = 100,
 		loading = false,
-		onsetInter = undefined
+		onsetInter = undefined,
+		onclick = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -42,7 +44,7 @@
 	<div class={twMerge('flex items-center')}>
 		<Button
 			disabled={componentNumber == 0}
-			on:click
+			onclick={onclick}
 			size="xs"
 			variant="default"
 			btnClasses={twMerge(
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index c62ebb6892..d856ce621c 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -190,13 +190,13 @@
 </script>
 
 <RecomputeAllButton
-	on:click={() => onRefresh(false, 'button')}
+	onclick={() => onRefresh(false, 'button')}
 	interval={$recomputeAllContext.interval}
 	{refreshing}
 	componentNumber={$recomputeAllContext.componentNumber ?? 0}
 	loading={$recomputeAllContext.loading}
 	progress={$recomputeAllContext.progress}
-	on:setInter={(e) => {
+	onsetInter={(e) => {
 		setInter(e.detail, 'button setInter')
 		onRefresh(false, 'button setInter')
 	}}
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte
index e4628835fc..3363883d3f 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllWrapper.svelte
@@ -46,8 +46,8 @@
 			<RecomputeAllButton
 				interval={$recomputeAllContext.interval}
 				componentNumber={$recomputeAllContext.componentNumber ?? 0}
-				on:click={() => $recomputeAllContext.onRefresh?.()}
-				on:setInter={(e) => {
+				onclick={() => $recomputeAllContext.onRefresh?.()}
+				onsetInter={(e) => {
 					$recomputeAllContext.setInter?.(e.detail)
 				}}
 				refreshing={$recomputeAllContext.refreshing}
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 7988fa0c07..b65836526d 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -10,6 +10,12 @@
 	import type { TableAction } from './component'
 	import { BG_PREFIX } from './appUtilsCore'
 
+	interface Props {
+		ondelete?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	const { selectedComponent, app, stateId, runnableComponents } =
 		getContext<AppViewerContext>('AppViewerContext')
 
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index 4b6336c62b..c7466b055b 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -283,8 +283,8 @@
 										component={dataItem.data}
 										selected={Boolean($selectedComponent?.includes(dataItem.id))}
 										locked={isFixed(dataItem)}
-										on:lock={() => lock(dataItem)}
-										on:expand={() => {
+										onlock={() => lock(dataItem)}
+										onexpand={() => {
 											const parentGridItem = findGridItem($app, id)
 
 											if (!parentGridItem) {
@@ -302,7 +302,7 @@
 											)
 											$app = $app
 										}}
-										on:fillHeight={() => {
+										onfillHeight={() => {
 											const gridItem = findGridItem($app, dataItem.id)
 											const b = $breakpoint === 'sm' ? 3 : 12
 
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index d6a9c5528d..714cd7c74f 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -14,6 +14,9 @@
 		fullHeight: boolean
 		overlapped?: string | undefined
 		componentDraggedId?: string | undefined
+		onexpand?: (...args: any[]) => any
+		onlock?: (...args: any[]) => any
+		onfillHeight?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +26,10 @@
 		render,
 		fullHeight,
 		overlapped = undefined,
-		componentDraggedId = undefined
+		componentDraggedId = undefined,
+		onexpand = undefined,
+		onlock = undefined,
+		onfillHeight = undefined
 	}: Props = $props()
 	let everRender = $state(render)
 
@@ -34,9 +40,9 @@
 
 {#if everRender || $app.eagerRendering}
 	<ComponentRendered
-		on:expand
-		on:lock
-		on:fillHeight
+		onexpand={onexpand}
+		onlock={onlock}
+		onfillHeight={onfillHeight}
 		{componentDraggedId}
 		{overlapped}
 		{render}
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
index 98d9b93187..1695b0ca4e 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentInner.svelte
@@ -985,7 +985,7 @@
 				>{error}</pre
 			>
 			<div class="flex mt-4">
-				<Button wrapperClasses="border rounded !border-gray-400" variant="accent" on:click={reset}
+				<Button wrapperClasses="border rounded !border-gray-400" variant="accent" onclick={reset}
 					>reset</Button
 				>
 			</div>
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte b/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte
index 6d5b82e9a0..c528a0d78a 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentRendered.svelte
@@ -24,6 +24,9 @@
 		overlapped?: string | undefined
 		componentDraggedId?: string | undefined
 		render?: boolean
+		onlock?: (...args: any[]) => any
+		onexpand?: (...args: any[]) => any
+		onfillHeight?: (...args: any[]) => any
 	}
 
 	let {
@@ -33,7 +36,10 @@
 		fullHeight,
 		overlapped = undefined,
 		componentDraggedId = undefined,
-		render = false
+		render = false,
+		onlock = undefined,
+		onexpand = undefined,
+		onfillHeight = undefined
 	}: Props = $props()
 
 	let initializing: boolean | undefined = $state()
@@ -150,7 +156,7 @@
 		{/if}
 		{#if $mode !== 'preview'}
 			<ComponentHeader
-				on:mouseover={() => {
+				onmouseover={() => {
 					outTimeout && clearTimeout(outTimeout)
 
 					if (component.id !== $hoverStore) {
@@ -162,15 +168,15 @@
 				{selected}
 				{fullHeight}
 				connecting={$connectingInput.opened}
-				on:lock
-				on:expand
-				on:fillHeight
+				onlock={onlock}
+				onexpand={onexpand}
+				onfillHeight={onfillHeight}
 				{locked}
 				{inlineEditorOpened}
 				hasInlineEditor={component.type === 'textcomponent' &&
 					component.componentInput &&
 					component.componentInput.type !== 'connected'}
-				on:triggerInlineEditor={() => {
+				ontriggerInlineEditor={() => {
 					inlineEditorOpened = !inlineEditorOpened
 				}}
 				{errorHandledByComponent}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 4766e4056a..f4f38a93a6 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -197,10 +197,10 @@
 <Drawer bind:this={ccDrawer}>
 	<DrawerContent
 		title="Custom Components"
-		on:close={ccDrawer.closeDrawer}
+		onclose={ccDrawer.closeDrawer}
 		documentationLink="https://www.windmill.dev/docs/apps/react_components"
 	>
-		<ComponentsList on:reload={fetchCustomComponents} />
+		<ComponentsList onreload={fetchCustomComponents} />
 	</DrawerContent>
 </Drawer>
 
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
index 2971a52654..3b9cea51b9 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
@@ -12,6 +12,13 @@
 	import Row from '$lib/components/table/Row.svelte'
 	import { createEventDispatcher } from 'svelte'
 
+	interface Props {
+		oninsertSelector?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	const STATIC_ELEMENTS = ['app'] as const
 	const TITLE_PREFIX = 'Css.' as const
 
@@ -90,7 +97,7 @@
 			<ListItem
 				title={name}
 				prefix={TITLE_PREFIX}
-				on:open={(e) => {
+				onopen={(e) => {
 					if ($app.css != undefined) {
 						if (type && e.detail && $app.css[type] == undefined) {
 							$app.css[type] = Object.fromEntries((ids ?? []).map(({ id }) => [id, {}]))
@@ -161,7 +168,7 @@
 															<Button
 																size="xs2"
 																color="light"
-																on:click={() => {
+																onclick={() => {
 																	dispatch('insertSelector', `${selector} {}`)
 																}}
 															>
@@ -199,7 +206,7 @@
 															<Button
 																size="xs2"
 																color="light"
-																on:click={() => {
+																onclick={() => {
 																	dispatch(
 																		'insertSelector',
 																		`${customisation.root} { ${variable}: ${value};}`
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 894c76b693..5be04cde58 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -100,7 +100,7 @@
 						size="xs2"
 						iconOnly
 						startIcon={{ icon: MoveLeft }}
-						on:click={() => (dispatch('left'), onleft?.())}
+						onclick={() => (dispatch('left'), onleft?.())}
 					/>
 					{#snippet text()}
 						{'Copy for this component'}
@@ -114,7 +114,7 @@
 						size="xs2"
 						iconOnly
 						startIcon={{ icon: MoveRight }}
-						on:click={() => (dispatch('right'), onright?.())}
+						onclick={() => (dispatch('right'), onright?.())}
 					/>
 					{#snippet text()}
 						Copy for every {componentType ? ccomponents[componentType].name : 'component'}
@@ -127,7 +127,7 @@
 					size="xs2"
 					iconOnly
 					startIcon={{ icon: Copy }}
-					on:click={() => copyToClipboard(wmClass)}
+					onclick={() => copyToClipboard(wmClass)}
 				/>
 				{#snippet text()}
 					Copy {wmClass}
@@ -158,7 +158,7 @@
 								{#if quickStyleProperties?.length}
 									<ToggleButtonGroup
 										selected={richEditorOpen ? 'true' : 'false'}
-										on:selected={({ detail }) => {
+										onselected={(detail) => {
 											richEditorOpen = detail === 'true'
 											if (richEditorOpen !== isQuickMenuOpen) {
 												toggleQuickMenu()
@@ -273,7 +273,7 @@
 				<Toggle
 					size="xs"
 					bind:checked={dynamicClass}
-					on:change={(e) => {
+					onchange={(e) => {
 						if (e.detail && !value.evalClass) {
 							value.evalClass = {
 								type: 'evalv2',
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
index d081549dbd..75fed4dd16 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <Drawer bind:this={themeViewer} size="800px">
-	<DrawerContent title="View themes" on:close={themeViewer.closeDrawer}>sa</DrawerContent>
+	<DrawerContent title="View themes" onclose={themeViewer.closeDrawer}>sa</DrawerContent>
 </Drawer>
 
 <Tabs bind:selected={selectedTab}>
@@ -85,7 +85,7 @@
 										<Button
 											size="xs"
 											color="dark"
-											on:click={async () => {
+											onclick={async () => {
 												const theme = await resolveTheme($app.theme, $workspaceStore)
 												$app.theme = {
 													type: 'inlined',
@@ -102,14 +102,14 @@
 						</div>
 					</Pane>
 					<Pane size={40}>
-						<CssHelperPanel on:insertSelector={(e) => insertSelector(e.detail)} />
+						<CssHelperPanel oninsertSelector={(e) => insertSelector(e)} />
 					</Pane>
 				</Splitpanes>
 			</SplitPanesWrapper>
 		{/if}
 		{#if selectedTab === 'theme'}
 			<ThemeList
-				on:setCodeTab={() => {
+				onsetCodeTab={() => {
 					selectedTab = 'css'
 				}}
 			/>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte
index f9976e3719..db4a49e39c 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte
@@ -73,7 +73,7 @@
 		<div class="flex flex-row gap-1 items-center">
 			<NameEditor
 				kind="custom component"
-				on:update={(e) => {
+				onupdate={(e) => {
 					updateName(e.detail.name)
 				}}
 				{row}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
index feeddd756e..bbcc746dd6 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
@@ -12,6 +12,12 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { createEventDispatcher } from 'svelte'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
 	let customcomponents: Array<{
 		name: string
 		path: string
@@ -88,7 +94,7 @@
 				/></div
 			></div
 		>
-		<Button on:click={() => addCustomComponent(nameField)} variant="accent" size="xs"
+		<Button onclick={() => addCustomComponent(nameField)} variant="accent" size="xs"
 			>Add Custom Component</Button
 		>
 	</div>
@@ -114,7 +120,7 @@
 							{#key row}
 								<CustomComponentRow
 									{row}
-									on:reload={() => {
+									onreload={() => {
 										getCustomComponents()
 										dispatch('reload')
 									}}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte
index 00d6262c68..725388a326 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/GroupList.svelte
@@ -93,7 +93,7 @@
 <div class="p-2 flex flex-col items-start w-auto gap-2 relative">
 	<div class="w-full flex flex-row gap-2 items-center">
 		<input bind:value={nameField} placeholder={'Group name'} />
-		<Button on:click={() => addGroup(nameField)} variant="accent" size="xs">Create group</Button>
+		<Button onclick={() => addGroup(nameField)} variant="accent" size="xs">Create group</Button>
 	</div>
 
 	{#if loading}
@@ -117,7 +117,7 @@
 							{#key row}
 								<GroupRow
 									{row}
-									on:reloadGroups={() => {
+									onreloadGroups={() => {
 										getGroups()
 									}}
 								/>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/GroupManagementDrawer.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/GroupManagementDrawer.svelte
index aa2697e026..af586e1f5a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/GroupManagementDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/GroupManagementDrawer.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <Drawer bind:this={codeDrawer}>
-	<DrawerContent title="Component Groups" on:close={() => codeDrawer?.closeDrawer()}>
+	<DrawerContent title="Component Groups" onclose={() => codeDrawer?.closeDrawer()}>
 		<GroupList {item} />
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte
index 1b6db58407..75bdc33d22 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte
@@ -46,7 +46,7 @@
 		<div class="flex flex-row gap-1 items-center">
 			<GroupNameEditor
 				kind="group"
-				on:update={async (e) => {
+				onupdate={async (e) => {
 					if (!$workspaceStore) return
 					const group = await getGroup($workspaceStore, row.path)
 					await updateGroup($workspaceStore, row.path, {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
index 3fbd0f0356..547c79fdd2 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
@@ -42,7 +42,7 @@
 				<Button
 					variant="accent"
 					size="xs"
-					on:click={() => {
+					onclick={() => {
 						dispatch('update', { path: row.path, name: editedName })
 						onupdate?.({ path: row.path, name: editedName })
 						close()
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
index b4efdb87d4..a592b45f77 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -70,7 +70,7 @@
 						btnClasses="!p-0 !w-[34px] !h-[34px]"
 						aria-label="Set {key} to {color}"
 						style={`background-color: ${color};`}
-						on:click={() => (value = color)}
+						onclick={() => (value = color)}
 					/>
 					{#snippet text()}
 						{color}
@@ -93,7 +93,7 @@
 				buttonClass="!right-9"
 				type="number"
 				value={internalValue}
-				on:change={({ detail }) => updateValue(detail)}
+				onchange={(detail) => updateValue(detail)}
 			>
 				<Menu
 					noMinW
@@ -118,7 +118,7 @@
 										size="xs"
 										variant="contained"
 										btnClasses="!justify-start !rounded-none !w-full !px-3 !py-1.5"
-										on:click={() => {
+										onclick={() => {
 											updateUnit(u)
 											close()
 										}}
@@ -140,7 +140,7 @@
 						variant={value === option.text ? 'contained' : 'border'}
 						btnClasses="!p-1 !min-w-[34px] !h-[34px]"
 						aria-label="Set {key} to {option.text}"
-						on:click={() => {
+						onclick={() => {
 							if (value === option.text) {
 								value = ''
 							} else {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeDrawer.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeDrawer.svelte
index 686a82f07d..5f73338ddc 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeDrawer.svelte
@@ -25,7 +25,7 @@
 <HighlightTheme />
 
 <Drawer bind:this={codeDrawer}>
-	<DrawerContent title="Theme viewer" on:close={codeDrawer.closeDrawer}>
+	<DrawerContent title="Theme viewer" onclose={codeDrawer.closeDrawer}>
 		<div class="p-2 border rounded-sm">
 			<Highlight code={code ?? ''} language={css} />
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
index 5296ebe3a6..eeadd1ba00 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
@@ -13,6 +13,14 @@
 	import { ResourceService } from '$lib/gen'
 	import { Alert } from '$lib/components/common'
 	import ThemeRow from './ThemeRow.svelte'
+
+	interface Props {
+		onsetCodeTab?: (...args: any[]) => any
+	}
+
+	let {
+		onsetCodeTab = undefined
+	}: Props = $props()
 	import { onDestroy } from 'svelte'
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 
@@ -97,7 +105,7 @@
 		/>
 		<Button
 			disabled={type != 'inlined' || nameField == ''}
-			on:click={() => addTheme(nameField)}
+			onclick={() => addTheme(nameField)}
 			variant="accent"
 			size="xs">Create theme</Button
 		>
@@ -115,7 +123,7 @@
 				<Button
 					variant="default"
 					size="xs"
-					on:click={() => {
+					onclick={() => {
 						previewTheme.set(undefined)
 						previewThemePath = undefined
 					}}
@@ -140,10 +148,10 @@
 								<ThemeRow
 									{row}
 									bind:previewThemePath
-									on:reloadThemes={() => {
+									onreloadThemes={() => {
 										getThemes()
 									}}
-									on:setCodeTab
+									onsetCodeTab={onsetCodeTab}
 								/>
 							{/key}
 						{/each}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
index 679c5f3c76..815d6634f8 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
@@ -41,7 +41,7 @@
 			<Button
 				variant="accent"
 				size="xs"
-				on:click={async () => {
+				onclick={async () => {
 					if (!$workspaceStore) return
 					await updateTheme($workspaceStore, row.path, {
 						value: {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
index 05a56a8e06..c6b441aeb3 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
@@ -181,7 +181,7 @@
 <tr class={twMerge(previewThemePath === row.path ? 'bg-blue-200' : '', 'transition-all')}>
 	<Cell first>
 		<div class="flex flex-row gap-1 items-center">
-			<ThemeNameEditor on:reloadThemes {row} />
+			<ThemeNameEditor onreloadThemes={onreloadThemes} {row} />
 			{row.name}
 		</div>
 	</Cell>
@@ -200,17 +200,17 @@
 				<Button
 					color="light"
 					size="xs"
-					on:click={() => toggleUpdate(row)}
+					onclick={() => toggleUpdate(row)}
 					startIcon={{ icon: Save }}
 				>
 					Update
 				</Button>
 			{/if}
 			{#if $app?.theme?.type !== 'path' || $app.theme.path !== row.path}
-				<Button color="light" size="xs" on:click={preview} startIcon={{ icon: Eye }}>
+				<Button color="light" size="xs" onclick={preview} startIcon={{ icon: Eye }}>
 					Preview
 				</Button>
-				<Button variant="accent" size="xs2" on:click={apply}>Apply</Button>
+				<Button variant="accent" size="xs2" onclick={apply}>Apply</Button>
 			{/if}
 
 			<Dropdown items={getDropdownItems} class="w-fit" />
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
index 579b769801..bd0ae669fc 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
@@ -65,7 +65,7 @@
 		<ComponentOutputViewer
 			{render}
 			componentId={gridItem.id}
-			on:select={({ detail }) => {
+			onselect={(detail) => {
 				connectOutput(connectingInput, gridItem?.data?.type, gridItem.data.id, detail)
 			}}
 		/>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index d6092ce6e5..b2ed4996bc 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -10,9 +10,11 @@
 		hasContent?: boolean
 		suffix?: string
 		render?: boolean
+		onselect?: (...args: any[]) => any
 	}
 
-	let { componentId, hasContent = $bindable(false), suffix = '', render = true }: Props = $props()
+	let { componentId, hasContent = $bindable(false), suffix = '', render = true,
+		onselect = undefined }: Props = $props()
 	const { worldStore, connectingInput } = getContext<AppViewerContext>('AppViewerContext')
 	const { search, hasResult } = getContext<ContextPanelContext>('ContextPanel')
 
@@ -55,7 +57,7 @@
 		<div class="pl-2 !cursor-pointer component-output-viewer-{componentId}" data-connection-button>
 			<ObjectViewer
 				json={filtered}
-				on:select
+				onselect={onselect}
 				topBrackets={false}
 				pureViewer={!$connectingInput.opened}
 				allowCopy={!$connectingInput.opened}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index f539447f55..719251e9b3 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -14,6 +14,13 @@
 	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
 	import { twMerge } from 'tailwind-merge'
 
+	interface Props {
+		onhidePanel?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	const { connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 	const { search } = getContext<ContextPanelContext>('ContextPanel')
 
@@ -26,7 +33,7 @@
 	{#snippet action()}
 		<div class="p-0.5">
 			<HideButton
-				on:click={() => {
+				onclick={() => {
 					dispatch('hidePanel')
 				}}
 				direction="left"
@@ -62,7 +69,7 @@
 								<ComponentOutputViewer
 									{render}
 									componentId={'ctx'}
-									on:select={({ detail }) => {
+									onselect={(detail) => {
 										$connectingInput = connectInput($connectingInput, 'ctx', detail)
 									}}
 								/>
@@ -81,7 +88,7 @@
 									{render}
 									bind:hasContent={hasState}
 									componentId={'state'}
-									on:select={({ detail }) => {
+									onselect={(detail) => {
 										$connectingInput = connectInput($connectingInput, 'state', detail)
 									}}
 								/>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
index ee6b85a92f..7e410815db 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
@@ -106,7 +106,7 @@
 										icon: Trash
 									}}
 									size="xs2"
-									on:click={() => {
+									onclick={() => {
 										let parent = findGridItemParentGrid($app, c)
 										deleteGridItem($app, item.data, parent)
 										$app = $app
@@ -162,7 +162,7 @@
 									icon: Trash
 								}}
 								size="xs2"
-								on:click={() => {
+								onclick={() => {
 									if ($app.subgrids && s) {
 										delete $app.subgrids[s.subGridId]
 										$app = $app
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
index 64403e9975..00a9c54a0f 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/LazyModePanel.svelte
@@ -30,7 +30,7 @@
 
 	<ToggleButtonGroup
 		bind:selected={selectedRendering}
-		on:selected={(e) => {
+		onselected={(e) => {
 			if (e.detail == 'eager') {
 				$app.eagerRendering = true
 				$app.lazyInitRequire = undefined
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte
index 90d163343f..6cbe63e068 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte
@@ -21,7 +21,7 @@
 		<ComponentOutputViewer
 			{render}
 			componentId={id}
-			on:select={({ detail }) => {
+			onselect={(detail) => {
 				$connectingInput = connectInput($connectingInput, id, detail)
 			}}
 		/>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte
index 18e4ee2bb5..6eac7af4eb 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/Output.svelte
@@ -26,7 +26,7 @@
 		<ComponentOutputViewer
 			{render}
 			componentId={id}
-			on:select={({ detail }) => {
+			onselect={(detail) => {
 				$connectingInput = connectInput($connectingInput, id, detail)
 			}}
 		/>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
index 4a46bf9261..22c2014cda 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte
@@ -43,7 +43,7 @@
 	{#snippet content()}
 		<Toggle
 			checked={Boolean(cache_ttl)}
-			on:change={() => {
+			onchange={() => {
 				if (cache_ttl != undefined) {
 					cache_ttl = undefined
 				} else {
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index f0b9c302b9..554eaa7b21 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -27,6 +27,7 @@
 		unusedInlineScripts: { name: string; inlineScript: InlineScript }[]
 		onnew?: (...args: any[]) => any
 		ondelete?: (...args: any[]) => any
+		onpick?: (...args: any[]) => any
 	}
 
 	let {
@@ -35,7 +36,8 @@
 		rawApps = false,
 		unusedInlineScripts,
 		onnew = undefined,
-		ondelete = undefined
+		ondelete = undefined,
+		onpick = undefined
 	}: Props = $props()
 
 	let tab = $state('workspacescripts')
@@ -104,7 +106,7 @@
 </script>
 
 <Drawer bind:this={picker} size="1000px">
-	<DrawerContent title="Script/Flow Picker" on:close={picker.closeDrawer}>
+	<DrawerContent title="Script/Flow Picker" onclose={picker.closeDrawer}>
 		<div>
 			<div class="max-w-6xl">
 				<Tabs bind:selected={tab}>
@@ -116,9 +118,9 @@
 				<div class="flex flex-col gap-y-16">
 					<div class="flex flex-col">
 						{#if tab == 'workspacescripts'}
-							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
+							<WorkspaceScriptList onpick={(e) => pickScript(e)} />
 						{:else if tab == 'hubscripts'}
-							<PickHubScript bind:filter on:pick={(e) => pickHubScript(e.detail.path)} />
+							<PickHubScript bind:filter onpick={(e) => pickHubScript(e.detail.path)} />
 						{/if}
 					</div>
 				</div>
@@ -138,10 +140,10 @@
 		<div class="font-bold items-baseline truncate">Choose a language</div>
 		<div class="flex gap-2">
 			{#if showScriptPicker}
-				<RunnableSelector {unusedInlineScripts} {rawApps} on:pick hideCreateScript />
+				<RunnableSelector {unusedInlineScripts} {rawApps} onpick={onpick} hideCreateScript />
 			{/if}
 			<Button
-				on:click={() => picker?.openDrawer()}
+				onclick={() => picker?.openDrawer()}
 				size="xs"
 				variant="border"
 				color="light"
@@ -152,7 +154,7 @@
 			</Button>
 
 			<Button
-				on:click={() => (dispatch('delete'), ondelete?.())}
+				onclick={() => (dispatch('delete'), ondelete?.())}
 				size="xs"
 				color="red"
 				variant="border"
@@ -172,7 +174,7 @@
 					<FlowScriptPicker
 						{label}
 						{lang}
-						on:click={() => {
+						onclick={() => {
 							createInlineScriptByLanguage(lang)
 						}}
 						id={`create-${lang}-script`}
@@ -196,7 +198,7 @@
 					<FlowScriptPicker
 						label={`JavaScript`}
 						lang="javascript"
-						on:click={() => {
+						onclick={() => {
 							const newInlineScript = {
 								content: `// read outputs and ctx
 console.log(ctx.email)
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 9e94b9046e..18680986c8 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -223,7 +223,7 @@
 			{editor}
 			bind:this={inlineScriptEditorDrawer}
 			bind:inlineScript
-			on:createScriptFromInlineScript={() => {
+			oncreateScriptFromInlineScript={() => {
 				dispatch('createScriptFromInlineScript')
 				oncreateScriptFromInlineScript?.()
 				drawerIsOpen = false
@@ -285,7 +285,7 @@
 					variant="subtle"
 					destructive
 					aria-label="Delete"
-					on:click={() => (dispatch('delete'), ondelete?.())}
+					onclick={() => (dispatch('delete'), ondelete?.())}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
 				/>
@@ -294,7 +294,7 @@
 						unifiedSize="sm"
 						variant="subtle"
 						title="Full Editor"
-						on:click={() => {
+						onclick={() => {
 							inlineScriptEditorDrawer?.openDrawer()
 						}}
 						endIcon={{ icon: Maximize2 }}
@@ -305,7 +305,7 @@
 				<Button
 					variant="default"
 					unifiedSize="sm"
-					on:click={async () => {
+					onclick={async () => {
 						editor?.format()
 						simpleEditor?.format()
 					}}
@@ -344,7 +344,7 @@
 							} catch {}
 							runLoading = false
 						}}
-						on:change={async (e) => {
+						onchange={async (e) => {
 							if (inlineScript && inlineScript.language != 'frontend') {
 								if (inlineScript.lock != undefined) {
 									inlineScript.lock = undefined
@@ -386,7 +386,7 @@
 							)
 							runLoading = false
 						}}
-						on:change={async (e) => {
+						onchange={async (e) => {
 							inferSuggestions(e.detail.code)
 							$app = $app
 						}}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
index 9c2c9a7b85..22ee557720 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
@@ -12,6 +12,7 @@
 		editor?: Editor | undefined
 		isOpen?: boolean | undefined
 		id: string
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -19,7 +20,8 @@
 		inlineScript = $bindable(),
 		editor = undefined,
 		isOpen = $bindable(undefined),
-		id
+		id,
+		oncreateScriptFromInlineScript = undefined
 	}: Props = $props()
 
 	export function openDrawer() {
@@ -34,7 +36,7 @@
 		title="Script Editor"
 		noPadding
 		forceOverflowVisible
-		on:close={() => {
+		onclose={() => {
 			scriptEditorDrawer?.closeDrawer()
 			editor?.setCode(inlineScript.content)
 		}}
@@ -49,7 +51,7 @@
 				fixedOverflowWidgets={false}
 				bind:code={inlineScript.content}
 				bind:schema={inlineScript.schema}
-				on:createScriptFromInlineScript
+				oncreateScriptFromInlineScript={oncreateScriptFromInlineScript}
 				tag={undefined}
 				saveToWorkspace
 				{args}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index f8831a0b34..541aeb21ad 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -53,7 +53,7 @@
 			{componentType}
 			bind:inlineScript={componentInput.transformer}
 			name="Transformer"
-			on:delete={() => {
+			ondelete={() => {
 				if (componentInput?.type == 'runnable') {
 					componentInput.transformer = undefined
 					componentInput = componentInput
@@ -69,7 +69,7 @@
 	{#if isRunnableByName(componentInput.runnable) && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
-				on:createScriptFromInlineScript={() => {
+				oncreateScriptFromInlineScript={() => {
 					if (componentInput?.type == 'runnable' && isRunnableByName(componentInput.runnable)) {
 						dispatch('createScriptFromInlineScript', componentInput?.runnable)
 						oncreateScriptFromInlineScript?.(componentInput?.runnable)
@@ -82,14 +82,14 @@
 				bind:name={componentInput.runnable.name}
 				bind:fields={componentInput.fields}
 				syncFields
-				on:delete={clear}
+				ondelete={clear}
 			/>
 		{:else}
 			<EmptyInlineScript
 				unusedInlineScripts={$app?.unusedInlineScripts}
 				{componentType}
-				on:delete={clear}
-				on:new={(e) => {
+				ondelete={clear}
+				onnew={(e) => {
 					if (
 						componentInput &&
 						componentInput.type == 'runnable' &&
@@ -105,10 +105,10 @@
 		{/if}
 	{:else if componentInput?.runnable && isRunnableByPath(componentInput.runnable) && componentInput.runnable.path}
 		<InlineScriptRunnableByPath
-			on:fork={(e) => fork(e.detail)}
+			onfork={(e) => fork(e)}
 			bind:runnable={componentInput.runnable}
 			bind:fields={componentInput.fields}
-			on:delete={clear}
+			ondelete={clear}
 			{id}
 		/>
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
index 045525b8eb..ca05c7562d 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
@@ -16,13 +16,15 @@
 		id: string
 		transformer: boolean
 		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
 		runnable = $bindable(),
 		id,
 		transformer,
-		oncreateScriptFromInlineScript = undefined
+		oncreateScriptFromInlineScript = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	const { runnableComponents, app } = getContext<AppViewerContext>('AppViewerContext')
@@ -51,7 +53,7 @@
 			componentType={undefined}
 			bind:inlineScript={runnable.transformer}
 			name="Transformer"
-			on:delete={() => {
+			ondelete={() => {
 				if (runnableComponents) {
 					delete $runnableComponents[id]
 					runnable.transformer = undefined
@@ -66,7 +68,7 @@
 	{/if}
 {:else if isRunnableByName(runnable) && runnable.inlineScript}
 	<InlineScriptEditor
-		on:createScriptFromInlineScript={() => (
+		oncreateScriptFromInlineScript={() => (
 			dispatch('createScriptFromInlineScript', runnable),
 			oncreateScriptFromInlineScript?.(runnable)
 		)}
@@ -75,23 +77,23 @@
 		bind:name={runnable.name}
 		bind:fields={runnable.fields}
 		syncFields
-		on:delete
+		ondelete={ondelete}
 	/>
 {:else if isRunnableByPath(runnable)}
 	<InlineScriptRunnableByPath
 		bind:runnable
 		bind:fields={runnable.fields}
-		on:fork={(e) => fork(e.detail)}
-		on:delete
+		onfork={(e) => fork(e)}
+		ondelete={ondelete}
 		{id}
 	/>
 {:else}
 	<EmptyInlineScript
 		unusedInlineScripts={$app?.unusedInlineScripts}
-		on:pick={(e) => onPick(e.detail)}
-		on:delete
+		onpick={(e) => onPick(e)}
+		ondelete={ondelete}
 		showScriptPicker
-		on:new={(e) => {
+		onnew={(e) => {
 			runnable = {
 				type: 'inline',
 				inlineScript: e.detail,
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
index 4743d4a36e..d83e477816 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
@@ -187,14 +187,14 @@
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
-	<DrawerContent title="Flow {flowPath}" on:close={drawerFlowViewer.closeDrawer}>
+	<DrawerContent title="Flow {flowPath}" onclose={drawerFlowViewer.closeDrawer}>
 		<FlowPathViewer path={flowPath ?? ''} />
 	</DrawerContent>
 </Drawer>
 
 <ScriptEditorDrawer
 	bind:this={scriptEditorDrawer}
-	on:save={() => {
+	onsave={() => {
 		// Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
 		refreshKey++
 		// Refresh the schema
@@ -205,7 +205,7 @@
 
 <FlowEditorDrawer
 	bind:this={flowEditorDrawer}
-	on:save={() => {
+	onsave={() => {
 		// Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
 		refreshKey++
 		// Refresh the schema
@@ -226,7 +226,7 @@
 			variant="default"
 			size="xs"
 			startIcon={{ icon: RefreshCw }}
-			on:click={async () => {
+			onclick={async () => {
 				sendUserToast('Getting latest script version at that path')
 				// Increment refreshKey to force re-mounting of viewer components (bypasses cache)
 				refreshKey++
@@ -242,7 +242,7 @@
 			size="xs"
 			variant="default"
 			startIcon={{ icon: Trash }}
-			on:click={() => {
+			onclick={() => {
 				dispatch('delete')
 				ondelete?.()
 			}}
@@ -254,7 +254,7 @@
 				variant="default"
 				size="xs"
 				startIcon={{ icon: Eye }}
-				on:click={() => {
+				onclick={() => {
 					flowPath = runnable.path
 					drawerFlowViewer?.openDrawer()
 				}}
@@ -265,7 +265,7 @@
 				variant="default"
 				size="xs"
 				startIcon={{ icon: Pen }}
-				on:click={() => {
+				onclick={() => {
 					openFlowEditor(runnable.path)
 				}}
 			>
@@ -286,7 +286,7 @@
 				size="xs"
 				variant="default"
 				startIcon={{ icon: Pen }}
-				on:click={() => {
+				onclick={() => {
 					openScriptEditor(runnable.path)
 				}}
 			>
@@ -296,7 +296,7 @@
 				size="xs"
 				variant="default"
 				startIcon={{ icon: GitFork }}
-				on:click={() => {
+				onclick={() => {
 					fork(runnable.path)
 				}}
 			>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 9acb196b46..8492ee44ad 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -55,9 +55,11 @@
 
 	interface Props {
 		width?: number | undefined
+		onhidePanel?: (...args: any[]) => any
 	}
 
-	let { width = undefined }: Props = $props()
+	let { width = undefined,
+		onhidePanel = undefined }: Props = $props()
 </script>
 
 <Splitpanes
@@ -65,7 +67,7 @@
 	style={width !== undefined ? `width:${width}px;` : 'width: 100%;'}
 >
 	<Pane size={25}>
-		<InlineScriptsPanelList on:hidePanel />
+		<InlineScriptsPanelList onhidePanel={onhidePanel} />
 	</Pane>
 	<Pane size={75}>
 		{#if !$selectedComponentInEditor}
@@ -76,7 +78,7 @@
 			{#each $app.grid as gridItem, index (gridItem?.id)}
 				{#if gridItem?.id == prefixOrId}
 					<InlineScriptsPanelWithTable
-						on:createScriptFromInlineScript={(e) => {
+						oncreateScriptFromInlineScript={(e) => {
 							createScriptFromInlineScript(
 								gridItem?.id ?? 'unknown',
 								e.detail,
@@ -92,7 +94,7 @@
 				{#each $app.subgrids?.[subgrid] ?? [] as subgridItem, index (subgridItem?.id)}
 					{#if subgridItem?.id == prefixOrId && $app.subgrids?.[subgrid]}
 						<InlineScriptsPanelWithTable
-							on:createScriptFromInlineScript={(e) => {
+							oncreateScriptFromInlineScript={(e) => {
 								createScriptFromInlineScript(
 									subgridItem?.id ?? 'unknown',
 									e.detail,
@@ -109,12 +111,12 @@
 			{#each $app.unusedInlineScripts as unusedInlineScript, index}
 				{#if `unused-${index}` == prefixOrId}
 					<InlineScriptEditor
-						on:createScriptFromInlineScript={() =>
+						oncreateScriptFromInlineScript={() =>
 							sendUserToast('Cannot save to workspace unused scripts', true)}
 						id={`unused-${index}`}
 						bind:name={unusedInlineScript.name}
 						bind:inlineScript={unusedInlineScript.inlineScript}
-						on:delete={() => {
+						ondelete={() => {
 							$app.unusedInlineScripts.splice(index, 1)
 							$app.unusedInlineScripts = [...$app.unusedInlineScripts]
 						}}
@@ -125,7 +127,7 @@
 			{#each $app.hiddenInlineScripts as _inlineScript, index}
 				{#if index.toString() == id}
 					<InlineScriptHiddenRunnable
-						on:createScriptFromInlineScript={(e) => {
+						oncreateScriptFromInlineScript={(e) => {
 							createScriptFromInlineScript(
 								BG_PREFIX + index,
 								e.detail,
@@ -135,7 +137,7 @@
 							$app = $app
 						}}
 						transformer={$selectedComponentInEditor?.endsWith('_transformer')}
-						on:delete={() => deleteBackgroundScript(index)}
+						ondelete={() => deleteBackgroundScript(index)}
 						id={BG_PREFIX + index}
 						bind:runnable={$app.hiddenInlineScripts[index]}
 					/>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index aaffb1feaf..384748a2ec 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -15,6 +15,15 @@
 	import HideButton from '../settingsPanel/HideButton.svelte'
 	import { BG_PREFIX } from '../appUtilsCore'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+		onhidePanel?: (...args: any[]) => any
+	}
+
+	let {
+		onreload = undefined
+	}: Props = $props()
+
 	const PREFIX = 'script-selector-' as const
 
 	const { app, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
@@ -89,7 +98,7 @@
 		<div class="flex flex-row gap-1">
 			<HideButton
 				direction="bottom"
-				on:click={() => {
+				onclick={() => {
 					dispatch('hidePanel')
 				}}
 			/>
@@ -203,7 +212,7 @@
 					btnClasses="!rounded-full !p-1"
 					title="Create a new background runnable"
 					aria-label="Create a new background runnable"
-					on:click={createBackgroundScript}
+					onclick={createBackgroundScript}
 					id="create-background-runnable"
 				>
 					<Plus size={14} class="!text-primary" />
@@ -249,4 +258,4 @@
 	</div>
 </PanelSection>
 
-<AppTutorials bind:this={appTutorials} on:reload />
+<AppTutorials bind:this={appTutorials} onreload={onreload} />
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
index 6a2a34cd0d..20c6673513 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
@@ -7,14 +7,16 @@
 
 	interface Props {
 		gridItem: GridItem
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
-	let { gridItem = $bindable() }: Props = $props()
+	let { gridItem = $bindable(),
+		oncreateScriptFromInlineScript = undefined }: Props = $props()
 </script>
 
 {#if gridItem?.data?.id === $selectedComponentInEditor || gridItem?.data?.id + '_transformer' === $selectedComponentInEditor}
 	<InlineScriptEditorPanel
-		on:createScriptFromInlineScript
+		oncreateScriptFromInlineScript={oncreateScriptFromInlineScript}
 		defaultUserInput={gridItem.data?.type == 'formcomponent' ||
 			gridItem?.data?.type == 'formbuttoncomponent'}
 		id={gridItem.data.id}
@@ -28,7 +30,7 @@
 	{#each gridItem.data.actionButtons as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
-				on:createScriptFromInlineScript
+				oncreateScriptFromInlineScript={oncreateScriptFromInlineScript}
 				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
@@ -42,7 +44,7 @@
 	{#each gridItem.data.actions as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
-				on:createScriptFromInlineScript
+				oncreateScriptFromInlineScript={oncreateScriptFromInlineScript}
 				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
@@ -56,7 +58,7 @@
 	{#each gridItem.data.menuItems as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
-				on:createScriptFromInlineScript
+				oncreateScriptFromInlineScript={oncreateScriptFromInlineScript}
 				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
index 9d606766b4..335d855cb5 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
@@ -31,7 +31,7 @@
 			size="xs"
 			variant="accent"
 			btnClasses="!px-2 !py-1"
-			on:click={async () => {
+			onclick={async () => {
 				runLoading = true
 				$runnableJobEditorPanel.focused = true
 				try {
@@ -50,7 +50,7 @@
 			variant="accent"
 			destructive
 			btnClasses="!px-2 !py-1 !ml-[3px]"
-			on:click={async () => {
+			onclick={async () => {
 				cancelable?.forEach((f) => f.cancel())
 				runLoading = false
 			}}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
index 0745e35165..6cec4955d1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
@@ -28,7 +28,7 @@
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull
-				on:selected={() => ($app = $app)}
+				onselected={() => ($app = $app)}
 				bind:selected={component.horizontalAlignment}
 			>
 				{#snippet children({ item })}
@@ -41,7 +41,7 @@
 		{#if component.type !== 'formcomponent' && component.verticalAlignment}
 			<ToggleButtonGroup
 				noWFull
-				on:selected={() => ($app = $app)}
+				onselected={() => ($app = $app)}
 				bind:selected={component.verticalAlignment}
 			>
 				{#snippet children({ item })}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index 3f1be7817a..b622180ad2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -285,7 +285,7 @@
 						right: 'w/ value'
 					}}
 					size="xs"
-					on:change={(e) => {
+					onchange={(e) => {
 						if (e.detail) {
 							items = items.map((item) => {
 								if (typeof item.value === 'string') {
@@ -339,7 +339,7 @@
 									subFieldType={raw ? 'object' : subFieldType}
 									bind:componentInput
 									bind:value={item.value}
-									on:remove={() => deleteElementByType(index)}
+									onremove={() => deleteElementByType(index)}
 								/>
 							</div>
 
@@ -376,14 +376,14 @@
 		<RefreshDatabaseStudioTable {id} />
 	{/if}
 	{#if subFieldType !== 'db-explorer'}
-		<Button size="xs" color="light" startIcon={{ icon: Plus }} on:click={() => addElementByType()}>
+		<Button size="xs" color="light" startIcon={{ icon: Plus }} onclick={() => addElementByType()}>
 			Add
 		</Button>
 		{#if subFieldType === 'table-column' || subFieldType == 'ag-grid'}
 			<QuickAddColumn
 				{id}
 				columns={componentInput.value?.map((item) => item.field)}
-				on:add={({ detail }) => {
+				onadd={(detail) => {
 					if (!componentInput.value) componentInput.value = []
 					if (subFieldType === 'table-column') {
 						componentInput.value.push({ field: detail, headerName: detail, type: 'text' })
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
index cdd4e314bc..9a303dd194 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/CSSMigrationModal.svelte
@@ -157,7 +157,7 @@
 					>
 						<div class="leading-6 font-semibold text-sm w-full flex justify-between">
 							<div>Migrate to CSS editor</div><CloseButton
-								on:close={() => (migrationModalOpen = false)}
+								onclose={() => (migrationModalOpen = false)}
 							/>
 						</div>
 
@@ -184,7 +184,7 @@
 														<Button
 															variant="accent"
 															size="xs"
-															on:click={() => {
+															onclick={() => {
 																if (component?.customCss?.[cssKey]?.style != undefined) {
 																	setOrUpdateMigration(
 																		cssKey,
@@ -238,7 +238,7 @@
 														<Button
 															variant="accent"
 															size="xs"
-															on:click={() => {
+															onclick={() => {
 																if (type && $app.css?.[type]) {
 																	setOrUpdateMigration(cssKey, $app.css[type][cssKey].style)
 																	$app.css[type][cssKey].style = ''
@@ -286,7 +286,7 @@
 							<Button
 								size="xs"
 								variant="accent"
-								on:click={() => {
+								onclick={() => {
 									appendMigrationsToCss(migrations)
 									migrationModalOpen = false
 								}}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte
index 9b9d1f3563..e347ab3f98 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte
@@ -28,7 +28,7 @@
 					color="light"
 					size="xs2"
 					btnClasses="text-2xs font-normal"
-					on:click={() => {
+					onclick={() => {
 						collapsed = !collapsed
 					}}
 				>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
index 245e24807c..d136cf87ff 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -87,7 +87,7 @@
 			</div>
 
 			<ToggleButtonGroup
-				on:selected={() => {
+				onselected={() => {
 					onchange?.()
 				}}
 				noWFull
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 151ae001d1..77fa9ae3e0 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -225,7 +225,7 @@
 					btnClasses={twMerge(
 						'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent'
 					)}
-					on:click={() => {
+					onclick={() => {
 						const tableId = item?.id?.split?.('_')?.[0]
 
 						if (tableId) {
@@ -306,7 +306,7 @@
 									fontSize={12}
 									bind:code={item.data.componentInput.eval}
 									{extraLib}
-									on:change={onTemplateChange}
+									onchange={onTemplateChange}
 								/>
 								{#if item.data?.componentInput?.type === 'templatev2'}
 									{#if item.data?.componentInput.connections?.length > 0}
@@ -488,7 +488,7 @@
 							size="xs"
 							variant="default"
 							startIcon={{ icon: ChevronLeft }}
-							on:click={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
+							onclick={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
 						>
 							Show
 						</Button>
@@ -543,7 +543,7 @@
 						<Button
 							size="xs"
 							variant="default"
-							on:click={removeGridElement}
+							onclick={removeGridElement}
 							shortCut={{ key: isMac() ? getModifierKey() + 'Del' : 'Del', withoutModifier: true }}
 							destructive
 						>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte
index b4b4db007e..cd70b0c735 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanelDataSource.svelte
@@ -347,7 +347,7 @@
 	<div class="p-2">
 		<ToggleButtonGroup
 			bind:selected
-			on:selected={({ detail }) => {
+			onselected={(detail) => {
 				handleSelected(detail)
 			}}
 		>
@@ -401,11 +401,11 @@
 	open={Boolean(convertToUIEditorCallback)}
 	title="Convert to UI Editor"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		convertToUIEditorCallback = undefined
 		selected = 'json'
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		if (convertToUIEditorCallback) {
 			convertToUIEditorCallback()
 		}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/CssPropertyWrapper.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/CssPropertyWrapper.svelte
index de964e31d0..72d37ce5ba 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/CssPropertyWrapper.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/CssPropertyWrapper.svelte
@@ -10,6 +10,8 @@
 		overriden?: boolean
 		overridding?: boolean
 		wmClass?: string | undefined
+		onleft?: (...args: any[]) => any
+		onright?: (...args: any[]) => any
 	}
 
 	let {
@@ -19,7 +21,9 @@
 		property = $bindable(undefined),
 		overriden = false,
 		overridding = false,
-		wmClass = undefined
+		wmClass = undefined,
+		onleft = undefined,
+		onright = undefined
 	}: Props = $props()
 
 	function hasValues(obj: ComponentCssProperty | undefined) {
@@ -36,8 +40,8 @@
 		name={id}
 		bind:value={property[id]}
 		shouldDisplayLeft={hasValues(property[id])}
-		on:left
-		on:right
+		onleft={onleft}
+		onright={onright}
 		{overriden}
 		{overridding}
 		{wmClass}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
index 3c95156a71..8cd4f4941d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
@@ -40,10 +40,10 @@
 	setContext('DecisionTreeEditor', { selectedNodeId })
 </script>
 
-<Drawer bind:this={drawer} size="1800px" on:close={() => {}} on:open={() => {}}>
+<Drawer bind:this={drawer} size="1800px" onclose={() => {}} onopen={() => {}}>
 	<DrawerContent
 		title="Decision tree"
-		on:close={drawer.closeDrawer}
+		onclose={drawer.closeDrawer}
 		noPadding
 		forceOverflowVisible
 		tooltip="Decision tree graph editor"
@@ -80,7 +80,7 @@
 									size="xs"
 									startIcon={{ icon: Trash }}
 									variant="default"
-									on:click={() => {
+									onclick={() => {
 										nodes = removeNode(nodes, selectedNode)
 
 										$debuggingComponents = Object.fromEntries(
@@ -192,7 +192,7 @@
 	<Button
 		title="Decision tree graph editor"
 		id="decision-tree-graph-editor"
-		on:click={() => {
+		onclick={() => {
 			drawer?.openDrawer()
 		}}
 		size="xs"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte
index 16770598e8..de72c3c33a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte
@@ -75,7 +75,7 @@
 				)}
 			>
 				<InsertDecisionTreeNode
-					on:node={() => {
+					onnode={() => {
 						data.nodeCallbackHandler(
 							'nodeInsert',
 							data.node.id,
@@ -84,7 +84,7 @@
 							data.branchHeader
 						)
 					}}
-					on:addBranch={() => {
+					onaddBranch={() => {
 						data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
 					}}
 					canAddBranch={false}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
index c88793e6cc..4d7235db0c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
@@ -51,7 +51,7 @@
 					'flex flex-row gap-2 items-center justify-between bg-surface-tertiary'
 				)}
 				style="width: 275px; height: 34px;"
-				on:click={() => {
+				onclick={() => {
 					selected = true
 					data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)
 				}}
@@ -93,10 +93,10 @@
 					)}
 				>
 					<InsertDecisionTreeNode
-						on:node={() => {
+						onnode={() => {
 							data.nodeCallbackHandler('nodeInsert', data.node.id, data.node, data.parentIds, false)
 						}}
-						on:addBranch={() => {
+						onaddBranch={() => {
 							data.nodeCallbackHandler('addBranch', data.node.id, data.node, data.parentIds, true)
 						}}
 						canAddBranch={data.canAddBranch || data.node.next.length > 1}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
index ea0738e9f9..2c70a54002 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
@@ -200,7 +200,7 @@
 			size="xs"
 			variant="default"
 			startIcon={{ icon: Plus }}
-			on:click={addCondition}
+			onclick={addCondition}
 			iconOnly
 		/>
 	</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
index 2ea65801a8..54805f5713 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridGroup.svelte
@@ -37,7 +37,7 @@
 	<Toggle
 		size="xs"
 		checked={groupFields != undefined}
-		on:change={(e) => {
+		onchange={(e) => {
 			if (e.detail) {
 				groupFields = {}
 			} else {
@@ -59,7 +59,7 @@
 {#if groupFields != undefined}
 	<div class="p-2">
 		<Button
-			on:click={() => {
+			onclick={() => {
 				groupManagementDrawer?.openDrawer()
 			}}
 			size="xs"
@@ -80,7 +80,7 @@
 		{/if}
 		<div class="w-full flex gap-2 flex-col mt-2">
 			<InputsSpecsEditor
-				on:delete={(e) => {
+				ondelete={(e) => {
 					if (!groupFields) {
 						return
 					}
@@ -114,7 +114,7 @@
 					size="sm"
 					variant="default"
 					startIcon={{ icon: Plus }}
-					on:click={() => addField(fieldName)}
+					onclick={() => addField(fieldName)}
 					iconOnly
 				/>
 			</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte
index 80e78020b3..2db7042232 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridNavbar.svelte
@@ -164,7 +164,7 @@
 								<CloseButton
 									noBg
 									small
-									on:close={() => {
+									onclose={() => {
 										items = items.filter((_, i) => i !== index)
 									}}
 								/>
@@ -216,6 +216,6 @@
 				{/key}
 			{/each}
 		</section>
-		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addPath} iconOnly />
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} onclick={addPath} iconOnly />
 	</div>
 </PanelSection>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
index ee93d9ddbd..22123d594c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
@@ -68,7 +68,7 @@
 				<Button
 					size="xs"
 					color="light"
-					on:click={() => {
+					onclick={() => {
 						deleteSubgrid(index)
 					}}
 					iconOnly
@@ -76,6 +76,6 @@
 				/>
 			</div>
 		{/each}
-		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addTab} iconOnly />
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} onclick={addTab} iconOnly />
 	</div>
 </PanelSection>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index a763ea4b8a..5c7d004720 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -205,7 +205,7 @@
 							bind:value={items[index].value}
 						/>
 						<div class="absolute right-8">
-							<CloseButton noBg small on:close={() => deleteSubgrid(index)} />
+							<CloseButton noBg small onclose={() => deleteSubgrid(index)} />
 						</div>
 
 						<div class="flex flex-col justify-center gap-2">
@@ -229,6 +229,6 @@
 				</div>
 			{/each}
 		</section>
-		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addTab} iconOnly />
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} onclick={addTab} iconOnly />
 	</div>
 </PanelSection>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte
index d9dbc807c2..a52a60f62c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTabDisabled.svelte
@@ -21,7 +21,7 @@
 	options={{
 		right: 'Can be disabled'
 	}}
-	on:change={() => {
+	onchange={() => {
 		if (disablable) {
 			field = {
 				type: 'evalv2',
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTabHidden.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTabHidden.svelte
index 7af9311031..6884244240 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTabHidden.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTabHidden.svelte
@@ -21,7 +21,7 @@
 	options={{
 		right: 'Can be hidden'
 	}}
-	on:change={() => {
+	onchange={() => {
 		if (hideable) {
 			field = {
 				type: 'evalv2',
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte
index 8e98c1680b..47a625ec7f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/HideButton.svelte
@@ -25,6 +25,7 @@
 		customHiddenIcon?: ButtonType.Icon | undefined
 		usePopoverOverride?: boolean
 		popoverOverride?: import('svelte').Snippet
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -38,7 +39,8 @@
 		panelName = undefined,
 		customHiddenIcon = undefined,
 		usePopoverOverride = false,
-		popoverOverride
+		popoverOverride,
+		onclick = undefined
 	}: Props = $props()
 
 	const OpenIconMap = {
@@ -89,7 +91,7 @@
 			hidden ? 'bg-surface-selected !text-primary' : '',
 			btnClasses
 		)}
-		on:click
+		onclick={onclick}
 		{variant}
 		{color}
 	/>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 7897e411a4..1fa6050b6f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -207,7 +207,7 @@
 					/>
 					<ToggleButtonGroup
 						bind:selected={componentInput.type}
-						on:selected={(e) => {
+						onselected={(e) => {
 							if (
 								e.detail == 'evalv2' &&
 								componentInput['value'] != undefined &&
@@ -349,7 +349,7 @@
 					variant="default"
 					size="xs"
 					btnClasses="mt-1"
-					on:click={() => {
+					onclick={() => {
 						s3PickerSelection = undefined
 						s3FilePicker?.open?.()
 					}}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 729cc41741..8fc9f8f9b2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -106,7 +106,7 @@
 				/>
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">
-						<CloseButton noBg on:close={() => (dispatch('delete', k), ondelete?.(k))} />
+						<CloseButton noBg onclose={() => (dispatch('delete', k), ondelete?.(k))} />
 					</div>
 				{/if}
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte
index eb761c639f..cf342162e6 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/MenuItems.svelte
@@ -71,7 +71,7 @@
 			<div>
 				<Button
 					variant="default"
-					on:click={() => deleteComponent(component.id)}
+					onclick={() => deleteComponent(component.id)}
 					startIcon={{ icon: Trash }}
 					iconOnly
 					destructive
@@ -85,7 +85,7 @@
 			wrapperClasses="w-full"
 			variant="default"
 			size="xs"
-			on:click={() => addComponent()}
+			onclick={() => addComponent()}
 			title="Add Button"
 			startIcon={{ icon: Plus }}
 		>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
index 47a919f52d..09e4a870f2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
@@ -65,7 +65,7 @@
 	<div class="flex flex-row gap-2 items-center flex-wrap">
 		{#each remainingColumns as column}
 			<Button
-				on:click={() => (dispatch('add', column), onadd?.(column))}
+				onclick={() => (dispatch('add', column), onadd?.(column))}
 				size="xs2"
 				color="light"
 				variant="border"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/RefreshDatabaseStudioTable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/RefreshDatabaseStudioTable.svelte
index 892a2e0e51..3826af1db4 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/RefreshDatabaseStudioTable.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/RefreshDatabaseStudioTable.svelte
@@ -19,7 +19,7 @@
 </script>
 
 {#if id}
-	<Button size="xs2" color="light" startIcon={{ icon: RotateCcw }} on:click={() => onRefresh()}>
+	<Button size="xs2" color="light" startIcon={{ icon: RotateCcw }} onclick={() => onRefresh()}>
 		Force refresh
 	</Button>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
index 4dea82c4c1..9a22dbd516 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
@@ -170,7 +170,7 @@
 				<Button
 					size="xs2"
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						$cssEditorOpen = true
 					}}
 				>
@@ -189,7 +189,7 @@
 				<Button
 					size="xs2"
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						migrationModal?.open()
 					}}
 				>
@@ -242,11 +242,11 @@
 										wmClass={getSelector(name)}
 										componentType={component.type}
 										value={component.customCss[name]}
-										on:change={(e) => {
+										onchange={(e) => {
 											updateCssProperty(name, e.detail)
 										}}
 										shouldDisplayRight={hasStyleValue(component.customCss[name])}
-										on:right={() => {
+										onright={() => {
 											copyLocalToGlobal(name, component?.customCss?.[name])
 											tab = 'global'
 										}}
@@ -270,7 +270,7 @@
 										{forceClass}
 										{id}
 										bind:property={$app.css[type]}
-										on:left={() => {
+										onleft={() => {
 											copyGlobalToLocal(
 												id,
 												component?.type ? $app?.css?.[component?.type]?.[id] : undefined
@@ -292,7 +292,7 @@
 			title="Confirm overriding global CSS"
 			confirmationText="Override global CSS"
 			open={Boolean(overrideGlobalCSS)}
-			on:confirmed={() => {
+			onconfirmed={() => {
 				if (overrideGlobalCSS) {
 					overrideGlobalCSS()
 					overrideGlobalCSS = undefined
@@ -300,7 +300,7 @@
 
 				sendUserToast('Global CSS overridden')
 			}}
-			on:canceled={() => {
+			oncanceled={() => {
 				overrideGlobalCSS = undefined
 			}}
 		>
@@ -313,7 +313,7 @@
 			title="Confirm overriding local CSS"
 			confirmationText="Override local CSS"
 			open={Boolean(overrideLocalCSS)}
-			on:confirmed={() => {
+			onconfirmed={() => {
 				if (overrideLocalCSS) {
 					overrideLocalCSS()
 					overrideLocalCSS = undefined
@@ -321,7 +321,7 @@
 
 				sendUserToast('Local CSS overridden')
 			}}
-			on:canceled={() => {
+			oncanceled={() => {
 				overrideLocalCSS = undefined
 			}}
 		>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte
index d95784a04e..237a87a940 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/SubTypeEditor.svelte
@@ -8,9 +8,11 @@
 		componentInput: StaticInput<any>
 		subFieldType: InputType | undefined
 		id: string | undefined
+		onremove?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(), componentInput = $bindable(), subFieldType, id }: Props = $props()
+	let { value = $bindable(), componentInput = $bindable(), subFieldType, id,
+		onremove = undefined }: Props = $props()
 
 	let fakeComponentInput: StaticInput<any> = $state({
 		...componentInput,
@@ -29,5 +31,5 @@
 	{id}
 	fieldType={subFieldType}
 	bind:componentInput={fakeComponentInput}
-	on:remove
+	onremove={onremove}
 />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 5f8ac3311a..00d30955f7 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -198,7 +198,7 @@
 							<div class="flex flex-row items-center gap-1">
 								<CloseButton
 									small
-									on:close={() => deleteComponent(component.id, item.originalIndex)}
+									onclose={() => deleteComponent(component.id, item.originalIndex)}
 								/>
 							</div>
 						</div>
@@ -216,7 +216,7 @@
 				btnClasses="gap-1 flex items-center text-xs text-primary"
 				wrapperClasses="flex-1"
 				variant="default"
-				on:click={() => addComponent('buttoncomponent')}
+				onclick={() => addComponent('buttoncomponent')}
 				title="Add Button"
 			>
 				+ <Inspect size={14} />
@@ -225,7 +225,7 @@
 				btnClasses="gap-1 flex items-center text-xs text-primary"
 				wrapperClasses="flex-1"
 				variant="default"
-				on:click={() => addComponent('checkboxcomponent')}
+				onclick={() => addComponent('checkboxcomponent')}
 				title="Add Toggle"
 			>
 				+ <ToggleRightIcon size={14} />
@@ -234,7 +234,7 @@
 				btnClasses="gap-1 flex items-center text-xs text-primary"
 				wrapperClasses="flex-1"
 				variant="default"
-				on:click={() => addComponent('selectcomponent')}
+				onclick={() => addComponent('selectcomponent')}
 				title="Add Select"
 			>
 				+ <List size={14} />
@@ -258,7 +258,7 @@
 					<Button
 						btnClasses="mt-2"
 						size="xs2"
-						on:click={() => {
+						onclick={() => {
 							actionsOrder = undefined
 						}}
 					>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
index 9b49ef002c..f8fd7bbaa4 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div use:popperRef bind:clientWidth={width} class="grow">
-	<ClearableInput readonly bind:value on:focus={open} />
+	<ClearableInput readonly bind:value onfocus={open} />
 </div>
 {#if isOpen}
 	<div
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
index f94f588677..8fb0cb5114 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
@@ -32,7 +32,7 @@
 		size="xs"
 		startIcon={{ icon: Unplug }}
 		variant="default"
-		on:click={() => {
+		onclick={() => {
 			if (componentInput.type === 'connected') {
 				componentInput.connection = undefined
 			}
@@ -45,7 +45,7 @@
 {:else}
 	<Button
 		size="xs"
-		on:click={() => {
+		onclick={() => {
 			if (componentInput.type === 'connected') {
 				$connectingInput = {
 					opened: true,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
index c33528937b..b342d56e22 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
@@ -38,7 +38,7 @@
 			shouldBindKey={false}
 			{extraLib}
 			autoHeight
-			on:change={() => {
+			onchange={() => {
 				if (onchange) {
 					onchange()
 				}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
index 76ec4413c9..00c98229c8 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -83,7 +83,7 @@
 	{#if fullscreen}
 		<Drawer
 			placement="bottom"
-			on:close={() => (fullscreen = false)}
+			onclose={() => (fullscreen = false)}
 			open
 			offset={zIndexes.monacoEditor}
 		>
@@ -98,7 +98,7 @@
 						shouldBindKey={false}
 						fixedOverflowWidgets={false}
 						{extraLib}
-						on:change={async (e) => {
+						onchange={async (e) => {
 							if (onchange) {
 								onchange()
 							}
@@ -140,13 +140,13 @@
 				autoHeight
 				{disabled}
 				{fixedOverflowWidgets}
-				on:focus={() => {
+				onfocus={() => {
 					focus = true
 				}}
-				on:blur={() => {
+				onblur={() => {
 					focus = false
 				}}
-				on:change={async (e) => {
+				onchange={async (e) => {
 					if (onchange) {
 						onchange()
 					}
@@ -207,7 +207,7 @@
 					color="blue"
 					disabled={!recomputeOnInputChanged}
 					checked={!componentInput.onDemandOnly}
-					on:change={() => {
+					onchange={() => {
 						if (componentInput) {
 							componentInput.onDemandOnly = !componentInput.onDemandOnly
 							if (!componentInput.onDemandOnly) {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
index fdd5330038..afad75dce0 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
@@ -57,8 +57,8 @@
 			<ClearableInput
 				readonly
 				{value}
-				on:change={({ detail }) => (value = detail)}
-				on:focus={getData}
+				onchange={(detail) => (value = detail)}
+				onfocus={getData}
 				class="!pr-6"
 			/>
 			{#if loading}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte
index 1486f6c957..561ce32cda 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte
@@ -50,6 +50,6 @@
 		hideCreateScript={appComponent.type === 'flowstatuscomponent'}
 		onlyFlow={appComponent.type === 'flowstatuscomponent'}
 		{defaultUserInput}
-		on:pick={(e) => onPick(e.detail)}
+		onpick={(e) => onPick(e)}
 	/>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index d6f01a1589..5af61d7a9a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -39,6 +39,8 @@
 		format?: string | undefined
 		id: string | undefined
 		onkeydown?: (...args: any[]) => any
+		ondeleteArrayItem?: (...args: any[]) => any
+		onremove?: (...args: any[]) => any
 	}
 
 	let {
@@ -49,7 +51,9 @@
 		placeholder = undefined,
 		format = undefined,
 		id,
-		onkeydown = undefined
+		onkeydown = undefined,
+		ondeleteArrayItem = undefined,
+		onremove = undefined
 	}: Props = $props()
 
 	const appContext = getContext<AppViewerContext>('AppViewerContext')
@@ -240,7 +244,7 @@
 						<FileUpload
 							allowMultiple={false}
 							randomFileKey={true}
-							on:addition={(evt) => {
+							onaddition={(evt) => {
 								if (componentInput) {
 									componentInput.value = {
 										s3: evt.detail?.path ?? '',
@@ -249,7 +253,7 @@
 									s3FileUploadRawMode = true
 								}
 							}}
-							on:deletion={(evt) => {
+							ondeletion={(evt) => {
 								if (componentInput) {
 									componentInput.value = {
 										s3: ''
@@ -262,7 +266,7 @@
 						variant="default"
 						size="xs"
 						btnClasses="mt-1"
-						on:click={() => {
+						onclick={() => {
 							s3FilePicker?.open?.()
 						}}
 						startIcon={{ icon: Pipette }}
@@ -317,7 +321,7 @@
 				</div>
 			{/if}
 		{:else if fieldType === 'array'}
-			<ArrayStaticInputEditor {id} {subFieldType} bind:componentInput on:deleteArrayItem />
+			<ArrayStaticInputEditor {id} {subFieldType} bind:componentInput ondeleteArrayItem={ondeleteArrayItem} />
 		{:else if fieldType === 'schema'}
 			<div class="w-full">
 				<EditableSchemaDrawer bind:schema={componentInput.value} />
@@ -403,7 +407,7 @@
 						placeholder="Dataset name"
 					/>
 					<div class="absolute top-1 right-1">
-						<PlotlyWizard bind:value={componentInput.value} on:remove>
+						<PlotlyWizard bind:value={componentInput.value} onremove={onremove}>
 							{#snippet trigger()}
 								<Button color="light" size="xs2" nonCaptureEvent={true}>
 									<div class="flex flex-row items-center gap-2 text-xs font-normal">
@@ -424,7 +428,7 @@
 						placeholder="Dataset name"
 					/>
 					<div class="absolute top-1 right-1">
-						<ChartJSWizard bind:value={componentInput.value} on:remove>
+						<ChartJSWizard bind:value={componentInput.value} onremove={onremove}>
 							{#snippet trigger()}
 								<Button color="light" size="xs2" nonCaptureEvent={true}>
 									<div class="flex flex-row items-center gap-2 text-xs font-normal">
@@ -446,7 +450,7 @@
 					/>
 
 					<div class="absolute top-1 right-1">
-						<AgChartWizard bind:value={componentInput.value} on:remove>
+						<AgChartWizard bind:value={componentInput.value} onremove={onremove}>
 							{#snippet trigger()}
 								<Button color="light" size="xs2" nonCaptureEvent={true}>
 									<div class="flex flex-row items-center gap-2 text-xs font-normal">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
index 2cb97614a6..4286dd4b54 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
@@ -49,7 +49,7 @@
 			const cleanPrefix = prefix ? `${prefix.replace(/^\/+|\/+$/g, '')}/` : ''
 			return `${cleanPrefix}${file.name}`
 		}}
-		on:addition={({ detail }) => {
+		onaddition={(detail) => {
 			// @ts-ignore
 			componentInput = {
 				...componentInput,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index 0ac68122dc..6add591d51 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -171,7 +171,7 @@
 </script>
 
 <Drawer bind:this={picker} size="1000px">
-	<DrawerContent title="Script/Flow Picker" on:close={picker.closeDrawer}>
+	<DrawerContent title="Script/Flow Picker" onclose={picker.closeDrawer}>
 		<div>
 			<div class="max-w-6xl">
 				<Tabs bind:selected={tab}>
@@ -191,17 +191,17 @@
 					<div class="flex flex-col">
 						{#if tab == 'inlinescripts'}
 							<InlineScriptList
-								on:pick={(e) => pickInlineScript(e.detail)}
+								onpick={(e) => pickInlineScript(e)}
 								inlineScripts={unusedInlineScripts
 									? unusedInlineScripts.map((uis) => uis.name)
 									: []}
 							/>
 						{:else if tab == 'workspacescripts'}
-							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
+							<WorkspaceScriptList onpick={(e) => pickScript(e)} />
 						{:else if tab == 'workspaceflows'}
-							<WorkspaceFlowList on:pick={(e) => pickFlow(e.detail)} />
+							<WorkspaceFlowList onpick={(e) => pickFlow(e)} />
 						{:else if tab == 'hubscripts'}
-							<PickHubScript bind:filter on:pick={(e) => pickHubScript(e.detail.path)} />
+							<PickHubScript bind:filter onpick={(e) => pickHubScript(e.detail.path)} />
 						{/if}
 					</div>
 				</div>
@@ -213,7 +213,7 @@
 <div class="flex flex-col gap-2">
 	{#if !hideCreateScript}
 		<Button
-			on:click={createScript}
+			onclick={createScript}
 			unifiedSize="md"
 			variant="default"
 			startIcon={{ icon: Plus }}
@@ -224,7 +224,7 @@
 		</Button>
 	{/if}
 	<Button
-		on:click={() => picker?.openDrawer()}
+		onclick={() => picker?.openDrawer()}
 		unifiedSize="md"
 		variant={rawApps ? 'contained' : 'border'}
 		startIcon={{ icon: MousePointer }}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte
index ace586bb74..33c36847af 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/BackgroundScriptSettings.svelte
@@ -38,7 +38,7 @@
 				bind:recomputeOnInputChanged={runnable.recomputeOnInputChanged}
 				canConfigureRecomputeOnInputChanged={isRunnableByPath(runnable) ||
 					runnable.inlineScript?.language !== 'frontend'}
-				on:updateAutoRefresh={updateAutoRefresh}
+				onupdateAutoRefresh={updateAutoRefresh}
 			>
 				<BackgroundScriptTriggerBy
 					{id}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte
index 991242a688..3e8f00e2be 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte
@@ -86,7 +86,7 @@
 			canConfigureRunOnStart={!isTriggerable(appComponent.type)}
 			bind:autoRefresh={appInput.autoRefresh}
 			bind:recomputeOnInputChanged={appInput.recomputeOnInputChanged}
-			on:updateAutoRefresh={updateAutoRefresh}
+			onupdateAutoRefresh={updateAutoRefresh}
 		>
 			<ComponentScriptTriggerBy {appComponent} {appInput} />
 		</ScriptRunConfiguration>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
index d52f398398..d31373d5f2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
@@ -41,7 +41,7 @@
 					<Toggle
 						bind:checked={autoRefresh}
 						size="xs"
-						on:change={() => {
+						onchange={() => {
 							dispatch('updateAutoRefresh')
 							onupdateAutoRefresh?.()
 						}}
@@ -57,7 +57,7 @@
 					<Toggle
 						bind:checked={recomputeOnInputChanged}
 						size="xs"
-						on:change={() => {
+						onchange={() => {
 							dispatch('updateAutoRefresh')
 							onupdateAutoRefresh?.()
 						}}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte
index c00c7e30dd..cd3a2ea2cf 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte
@@ -23,7 +23,7 @@
 			{#snippet text()}
 				{action.label}
 			{/snippet}
-			<Button color={action.color} on:click={action.callback} size="xs2" variant="default">
+			<Button color={action.color} onclick={action.callback} size="xs2" variant="default">
 				<div class="flex flex-row gap-1 items-center">
 					{#if action.icon}
 						<action.icon size={12} />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
index d5db9cc053..ecfb2bf139 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
@@ -29,7 +29,7 @@
 				size="xs"
 				color={checked ? 'red' : 'light'}
 				variant="default"
-				on:click={() => {
+				onclick={() => {
 					if (appInput.transformer) {
 						appInput.transformer = undefined
 					} else {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
index 4ad537dd23..7ee6003d5c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte
@@ -167,7 +167,7 @@
 		<Button
 			size="xs2"
 			variant="accent"
-			on:click={() => {
+			onclick={() => {
 				$connectingInput = {
 					opened: true,
 					input: undefined,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
index 7661023b16..ca4b624d14 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
@@ -29,7 +29,7 @@
 			<div
 				class="flex justify-between {right ? '' : 'flex-row-reverse'} items-center gap-1 px-3 py-2"
 			>
-				<CloseButton on:close={() => secondaryMenu?.close()} />
+				<CloseButton onclose={() => secondaryMenu?.close()} />
 				{#if $secondaryMenu?.props?.type === 'style'}
 					<div class="flex flex-row items-center gap-1">
 						<div class="text-xs font-bold"> Style Panel</div>
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 696a9e3644..5d3ee9051e 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -165,6 +165,7 @@ export interface AppEditorProps {
 	unsavedConfirmationModal?: import('svelte').Snippet<[any]>
 	onSavedNewAppPath?: (path: string) => void
 	onpointerdown?: (...args: any[]) => any
+	onrestore?: (...args: any[]) => any
 }
 
 export type App = {
diff --git a/frontend/src/lib/components/assets/AssetButtons.svelte b/frontend/src/lib/components/assets/AssetButtons.svelte
index adc166ade0..5a432e5f2c 100644
--- a/frontend/src/lib/components/assets/AssetButtons.svelte
+++ b/frontend/src/lib/components/assets/AssetButtons.svelte
@@ -38,7 +38,7 @@
 			variant="default"
 			unifiedSize="md"
 			iconOnly
-			on:click={() => (resourceEditorDrawer?.initEdit(truncatedPath), onClick?.())}
+			onclick={() => (resourceEditorDrawer?.initEdit(truncatedPath), onClick?.())}
 		/>
 	{/if}
 	{#if (asset.kind === 'resource' && resourceDataCacheValue === undefined) || ducklakeNotFound || datatableNotFound}
diff --git a/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte b/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
index 16effb700a..f8734bbf52 100644
--- a/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
+++ b/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
@@ -29,9 +29,9 @@
 <Drawer
 	open={usagesDrawerData !== undefined}
 	size="900px"
-	on:close={() => (usagesDrawerData = undefined)}
+	onclose={() => (usagesDrawerData = undefined)}
 >
-	<DrawerContent title="Asset usage" on:close={() => (usagesDrawerData = undefined)}>
+	<DrawerContent title="Asset usage" onclose={() => (usagesDrawerData = undefined)}>
 		<div class="flex flex-col gap-6">
 			<!-- Static/Declared Usages -->
 			<section>
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index 22fca4b595..5dfb49b4a7 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -323,7 +323,7 @@
 			<span class="text-xs absolute font-semibold text-emphasis -top-4">Scope</span>
 			<ToggleButtonGroup
 				selected={scope ?? 'admins'}
-				onSelected={(detail) => {
+				onselected={(detail) => {
 					scope = detail === 'admins' ? undefined : detail
 				}}
 			>
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
index 5ad2cb2065..e02908dac7 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
@@ -216,7 +216,7 @@
 												unifiedSize="sm"
 												iconOnly
 												startIcon={{ icon: ListFilterPlus }}
-												on:click={() => {
+												onclick={() => {
 													usernameFilter = logOrDate.log.username
 												}}
 											/>
@@ -260,7 +260,7 @@
 												unifiedSize="sm"
 												iconOnly
 												startIcon={{ icon: ListFilterPlus }}
-												on:click={() => {
+												onclick={() => {
 													resourceFilter = logOrDate.log.resource
 												}}
 											/>
@@ -293,7 +293,7 @@
 				variant="subtle"
 				unifiedSize="sm"
 				startIcon={{ icon: ChevronLeft }}
-				on:click={() => {
+				onclick={() => {
 					pageIndex = (pageIndex ?? 1) - 1
 				}}
 				disabled={pageIndex <= 1}
@@ -305,7 +305,7 @@
 				variant="subtle"
 				unifiedSize="sm"
 				endIcon={{ icon: ChevronRight }}
-				on:click={() => {
+				onclick={() => {
 					pageIndex = (pageIndex ?? 1) + 1
 				}}
 				disabled={!hasMore}
diff --git a/frontend/src/lib/components/chat/ChatInput.svelte b/frontend/src/lib/components/chat/ChatInput.svelte
index d13928061d..c1d852d5f3 100644
--- a/frontend/src/lib/components/chat/ChatInput.svelte
+++ b/frontend/src/lib/components/chat/ChatInput.svelte
@@ -66,7 +66,7 @@
 			btnClasses="!rounded-full !p-1.5 {customCss?.button?.class ?? ''}"
 			style={customCss?.button?.style}
 			startIcon={{ icon: Square }}
-			on:click={onCancel}
+			onclick={onCancel}
 			iconOnly
 			title={cancelTitle}
 		/>
@@ -78,7 +78,7 @@
 			style={customCss?.button?.style}
 			startIcon={{ icon: ArrowUp }}
 			disabled={!value.trim() || disabled}
-			on:click={onSend}
+			onclick={onSend}
 			iconOnly
 			title={sendTitle}
 		/>
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
index 5616ecb7d3..3b6153e9c3 100644
--- a/frontend/src/lib/components/common/CloseButton.svelte
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -28,8 +28,8 @@
 </script>
 
 <Button
-	on:click={() => ((dispatch('close'), onclose?.()), onClick?.())}
-	on:pointerdown={(e) => e.stopPropagation()}
+	onclick={() => ((dispatch('close'), onclose?.()), onClick?.())}
+	onpointerdown={(e) => e.stopPropagation()}
 	{id}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly
diff --git a/frontend/src/lib/components/common/button/ConnectionButton.svelte b/frontend/src/lib/components/common/button/ConnectionButton.svelte
index e7b5e1a53f..aa5a56f3a8 100644
--- a/frontend/src/lib/components/common/button/ConnectionButton.svelte
+++ b/frontend/src/lib/components/common/button/ConnectionButton.svelte
@@ -96,7 +96,7 @@
 			size={small ? 'xs' : 'md'}
 			variant="default"
 			title="Connect"
-			on:click={() => handleConnect(true)}
+			onclick={() => handleConnect(true)}
 			{id}
 			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
 			btnClasses={twMerge(
diff --git a/frontend/src/lib/components/common/button/RefreshButton.svelte b/frontend/src/lib/components/common/button/RefreshButton.svelte
index f87cb2b9ac..49c991dd1e 100644
--- a/frontend/src/lib/components/common/button/RefreshButton.svelte
+++ b/frontend/src/lib/components/common/button/RefreshButton.svelte
@@ -18,8 +18,8 @@
 
 <Popover>
 	<Button
-		on:mouseenter={() => (buttonHover = true)}
-		on:mouseleave={() => (buttonHover = false)}
+		onmouseenter={() => (buttonHover = true)}
+		onmouseleave={() => (buttonHover = false)}
 		color="light"
 		unifiedSize={size}
 		{variant}
diff --git a/frontend/src/lib/components/common/button/UndoRedo.svelte b/frontend/src/lib/components/common/button/UndoRedo.svelte
index 80d30f8a95..bbaeac5968 100644
--- a/frontend/src/lib/components/common/button/UndoRedo.svelte
+++ b/frontend/src/lib/components/common/button/UndoRedo.svelte
@@ -19,7 +19,7 @@
 		title="Undo"
 		variant="default"
 		btnClasses="!min-h-[30px] !rounded-r-none"
-		on:click={() => (dispatch('undo'), onundo?.())}
+		onclick={() => (dispatch('undo'), onundo?.())}
 		startIcon={{ icon: Undo }}
 		iconOnly
 		{...undoProps}
@@ -28,7 +28,7 @@
 		title="Redo"
 		variant="default"
 		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
-		on:click={() => (dispatch('redo'), onredo?.())}
+		onclick={() => (dispatch('redo'), onredo?.())}
 		startIcon={{ icon: Redo }}
 		iconOnly
 		{...redoProps}
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index cfb958fc4a..f3c627008f 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -64,11 +64,11 @@
 					{clearable}
 					{useDropdown}
 					value={date}
-					on:change={(e) => {
+					onchange={(e) => {
 						date = e.detail
 						if (date) onchange?.(date)
 					}}
-					on:clear={() => {
+					onclear={() => {
 						onclear?.()
 					}}
 				/>
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 70624c8305..acf558462a 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -16,8 +16,8 @@
 		showIcon?: boolean
 		id?: string
 		children?: Snippet
-		onConfirmed?: () => void | Promise<void>
-		onCanceled?: () => void
+		onconfirmed?: () => void | Promise<void>
+		oncanceled?: () => void
 	}
 
 	const {
@@ -30,8 +30,8 @@
 		showIcon = true,
 		id,
 		children,
-		onConfirmed,
-		onCanceled
+		onconfirmed,
+		oncanceled
 	}: Props = $props()
 	const type = $derived(_type ?? 'danger')
 
@@ -44,11 +44,11 @@
 			switch (event.key) {
 				case 'Enter':
 					dispatch('confirmed')
-					onConfirmed?.()
+					onconfirmed?.()
 					break
 				case 'Escape':
 					dispatch('canceled')
-					onCanceled?.()
+					oncanceled?.()
 					break
 			}
 		}
@@ -125,7 +125,7 @@
 					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
 						<Button
 							disabled={loading}
-							on:click={() => (dispatch('confirmed'), onConfirmed?.())}
+							onclick={() => (dispatch('confirmed'), onconfirmed?.())}
 							color={theme[type].color}
 							size="sm"
 							shortCut={{ Icon: CornerDownLeft, hide: !keyListen, withoutModifier: true }}
@@ -139,7 +139,7 @@
 						</Button>
 						<Button
 							disabled={loading}
-							on:click={() => (dispatch('canceled'), onCanceled?.())}
+							onclick={() => (dispatch('canceled'), oncanceled?.())}
 							variant="default"
 							size="sm"
 							shortCut={{ key: 'Esc', hide: !keyListen, withoutModifier: true }}
diff --git a/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
index 8d41fff902..18e210814e 100644
--- a/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte
@@ -27,10 +27,10 @@
 	{open}
 	title={'New version deployed by ' + deployedBy}
 	confirmationText="Override"
-	on:canceled={() => {
+	oncanceled={() => {
 		open = false
 	}}
-	on:confirmed={() => confirmCallback()}
+	onconfirmed={() => confirmCallback()}
 >
 	<div class="flex flex-col w-full space-y-4">
 		<span>A new version was deployed while you were editing this one.</span>
@@ -39,7 +39,7 @@
 				wrapperClasses="self-start"
 				variant="default"
 				size="xs"
-				on:click={() => {
+				onclick={() => {
 					if (!deployedValue || !currentValue) {
 						return
 					}
diff --git a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
index e40cfd15d5..62a20c0423 100644
--- a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
@@ -82,8 +82,8 @@
 	confirmationText={isFlow ? 'Deploy Flow' : 'Deploy Script'}
 	type="reload"
 	showIcon={false}
-	on:canceled={() => (dispatch('canceled'), oncanceled?.())}
-	on:confirmed={() => (
+	oncanceled={() => (dispatch('canceled'), oncanceled?.())}
+	onconfirmed={() => (
 		dispatch('confirmed', { selectedTriggers }),
 		onconfirmed?.({ selectedTriggers })
 	)}
@@ -136,7 +136,7 @@
 										<ToggleButtonGroup
 											class="w-fit h-fit"
 											selected={isSelectedTrigger ? 'deploy' : 'discard'}
-											on:selected={(e) => toggleTrigger(trigger, e.detail)}
+											onselected={(e) => toggleTrigger(trigger, e.detail)}
 										>
 											{#snippet children({ item })}
 												<ToggleButton
diff --git a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
index 20ebe04c85..5742c91268 100644
--- a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
@@ -98,10 +98,10 @@
 	{open}
 	title="Unsaved changes detected"
 	confirmationText="Discard changes"
-	on:canceled={() => {
+	oncanceled={() => {
 		open = false
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		open = false
 		// Discard changes before navigating
 		onDiscardChanges?.()
@@ -119,7 +119,7 @@
 				wrapperClasses="self-start"
 				variant="default"
 				size="xs"
-				on:click={() => {
+				onclick={() => {
 					if (!savedValue || !modifiedValue) {
 						return
 					}
diff --git a/frontend/src/lib/components/common/confirmationModal/asyncConfirmationModal.svelte.ts b/frontend/src/lib/components/common/confirmationModal/asyncConfirmationModal.svelte.ts
index 508f111426..6c60fb4add 100644
--- a/frontend/src/lib/components/common/confirmationModal/asyncConfirmationModal.svelte.ts
+++ b/frontend/src/lib/components/common/confirmationModal/asyncConfirmationModal.svelte.ts
@@ -37,11 +37,11 @@ export function createAsyncConfirmationModal(): ConfirmationModalHandle {
 					children: createRawSnippet(() => ({ render: () => params.children })),
 					open: true,
 					loading: false,
-					onCanceled: () => (resolve(false), (o.props.open = false)),
-					onConfirmed: async () => {
+					oncanceled: () => (resolve(false), (o.props.open = false)),
+					onconfirmed: async () => {
 						o.props.loading = true
 						try {
-							await params.onConfirmed?.()
+							await params.onconfirmed?.()
 							o.props.loading = false
 							resolve(true)
 							o.props.open = false
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 3efe1c24d6..e05482c224 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -64,7 +64,7 @@
 					}
 				}}
 			>
-				<CloseButton on:close Icon={CloseIcon} id="{id}-close-btn" />
+				<CloseButton onclose={onclose} Icon={CloseIcon} id="{id}-close-btn" />
 			</div>
 			<span class="font-semibold text-emphasis truncate text-lg max-w-sm"
 				>{title ?? ''}
diff --git a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
index 93ae5447df..21860df1f9 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
@@ -465,7 +465,7 @@
 									<Button
 										size="xs2"
 										variant="default"
-										on:click={() => {
+										onclick={() => {
 											const file = fileUpload.file
 
 											if (!file) {
@@ -489,7 +489,7 @@
 									<Button
 										size="xs2"
 										variant="default"
-										on:click={() => {
+										onclick={() => {
 											const file = fileUpload.file
 
 											if (!file) {
@@ -513,7 +513,7 @@
 									<Button
 										size="xs2"
 										variant="default"
-										on:click={() => {
+										onclick={() => {
 											fileUpload.cancelled = true
 											fileUpload.progress = 0
 										}}
@@ -529,7 +529,7 @@
 									<Button
 										size="xs2"
 										variant="default"
-										on:click={() => {
+										onclick={() => {
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
 											)
@@ -550,7 +550,7 @@
 									<Button
 										size="xs2"
 										variant="default"
-										on:click={() => {
+										onclick={() => {
 											$fileUploads = $fileUploads.filter(
 												(_fileUpload) => _fileUpload.name !== fileUpload.name
 											)
@@ -607,7 +607,7 @@
 					<Button
 						size="xs2"
 						color="light"
-						on:click={() => {
+						onclick={() => {
 							$fileUploads = $fileUploads.map((fileUpload) => {
 								if (fileUpload.progress === 100 || fileUpload.cancelled) {
 									return fileUpload
@@ -632,7 +632,7 @@
 						<Button
 							size="xs2"
 							color="light"
-							on:click={() => {
+							onclick={() => {
 								forceDisplayUploads = true
 							}}
 							startIcon={{
diff --git a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
index c8dd8b260e..636bbf6494 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
@@ -58,7 +58,7 @@
 								{title}
 							</h3>
 							<Button
-								on:click={() => (dispatch('close', fileKey), onclose?.(fileKey))}
+								onclick={() => (dispatch('close', fileKey), onclose?.(fileKey))}
 								title="Close"
 								color="light"
 								size="sm"
@@ -80,10 +80,10 @@
 							<FileUpload
 								allowMultiple={true}
 								pathTransformer={(file) => cleanFilePath(s3Folder, file.file.name)}
-								on:addition={(evt) => {
+								onaddition={(evt) => {
 									fileKey = evt.detail?.path
 								}}
-								on:deletion={(evt) => {
+								ondeletion={(evt) => {
 									fileKey = undefined
 								}}
 							/>
diff --git a/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte b/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte
index 361d18adb9..c453bec7c1 100644
--- a/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte
+++ b/frontend/src/lib/components/common/fileUpload/S3ArgInput.svelte
@@ -76,14 +76,14 @@
 		{:then Module}
 			<Module.default
 				bind:editor
-				on:focus={(e) => {
+				onfocus={(e) => {
 					onFocus()
 				}}
-				on:blur={(e) => {
+				onblur={(e) => {
 					onBlur()
 				}}
 				code={JSON.stringify(value ?? defaultValue ?? (multiple ? [] : { s3: '' }), null, 2)}
-				on:changeValue={(e) => {
+				onchangeValue={(e) => {
 					setNewValueFromCode(e.detail)
 				}}
 			/>
@@ -96,7 +96,7 @@
 			{workspace}
 			allowMultiple={multiple}
 			randomFileKey={true}
-			on:addition={(evt) => {
+			onaddition={(evt) => {
 				const s3Object = {
 					s3: evt.detail?.path ?? '',
 					filename: evt.detail?.filename ?? ''
@@ -111,7 +111,7 @@
 					value = s3Object
 				}
 			}}
-			on:deletion={(evt) => {
+			ondeletion={(evt) => {
 				if (multiple) {
 					if (Array.isArray(value)) {
 						value = value.filter((v) => v.s3 !== evt.detail?.path)
@@ -131,7 +131,7 @@
 			variant="default"
 			size="xs"
 			btnClasses="mt-1 font-normal text-primary"
-			on:click={() => {
+			onclick={() => {
 				s3FilePicker?.open?.(value)
 			}}
 			startIcon={{ icon: Pipette }}
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index 08af5280a8..09527eca6f 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -96,7 +96,7 @@
 					{style}
 				>
 					{#if kind == 'X'}
-						<div class="absolute top-4 right-4"><CloseButton on:close={() => (open = false)} /></div
+						<div class="absolute top-4 right-4"><CloseButton onclose={() => (open = false)} /></div
 						>
 					{/if}
 					<div class="flex">
@@ -115,7 +115,7 @@
 						<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
 							{@render actions?.()}
 							<Button
-								on:click={() => {
+								onclick={() => {
 									dispatch('canceled')
 									oncanceled?.()
 									open = false
diff --git a/frontend/src/lib/components/common/seconds/SecondsInput.svelte b/frontend/src/lib/components/common/seconds/SecondsInput.svelte
index 9ca42379d4..a4dc38e9a7 100644
--- a/frontend/src/lib/components/common/seconds/SecondsInput.svelte
+++ b/frontend/src/lib/components/common/seconds/SecondsInput.svelte
@@ -223,7 +223,7 @@
 				class="bg-transparent text-secondary hover:text-primary"
 				noBg
 				small
-				on:close={() => {
+				onclose={() => {
 					seconds = defaultValue
 				}}
 			/>
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 100254eee0..747f73c11b 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -73,7 +73,7 @@
 
 {#if menuOpen}
 	{#await import('$lib/components/apps/editor/AppJsonEditor.svelte') then Module}
-		<Module.default on:change bind:this={appExport} />
+		<Module.default onchange={onchange} bind:this={appExport} />
 	{/await}
 	<AppDeploymentHistory bind:this={appDeploymentHistory} appPath={app.path} />
 {/if}
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index 7eab3bb02b..e48f9fe9bb 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -403,11 +403,11 @@
 
 {#if script}
 	<Drawer bind:open={versionsDrawerOpen} size="1200px">
-		<DrawerContent title="Versions History" on:close={() => (versionsDrawerOpen = false)}>
+		<DrawerContent title="Versions History" onclose={() => (versionsDrawerOpen = false)}>
 			<ScriptVersionHistory
 				scriptPath={script.path}
 				openDetails
-				on:openDetails={(e) => {
+				onopenDetails={(e) => {
 					if (script) {
 						goto(`/scripts/get/${e.detail.version}?workspace=${$workspaceStore}`)
 					}
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index bffbe17431..df0bd0ba5b 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -26,7 +26,7 @@
 		 */
 		small?: boolean
 		extra?: import('svelte').Snippet
-		ononpointerdown?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -46,7 +46,7 @@
 		disabled = false,
 		small = false,
 		extra = undefined,
-		ononpointerdown = undefined
+		onpointerdown = undefined
 	}: Props = $props()
 	const { selected, update, hashNavigation } = getContext<TabsContext>('Tabs')
 
@@ -98,7 +98,7 @@
 	onpointerdown={(event) => {
 		event.stopPropagation()
 		dispatch('onpointerdown', event)
-		ononpointerdown?.(event)
+		onpointerdown?.(event)
 	}}
 	{disabled}
 	{id}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index f1bfb5ddbf..3ba2cef585 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -16,7 +16,7 @@
 		class?: string
 		wrap?: boolean
 		children?: import('svelte').Snippet<[any]>
-		onSelected?: (value: any) => void
+		onselected?: (value: any) => void
 	}
 
 	let {
@@ -28,7 +28,7 @@
 		allowEmpty = false,
 		class: className = '',
 		wrap = false,
-		onSelected,
+		onselected,
 		children
 	}: Props = $props()
 
@@ -44,7 +44,7 @@
 			}
 			if (curr !== next && curr !== undefined) {
 				dispatch('selected', next)
-				onSelected?.(next)
+				onselected?.(next)
 			}
 			return next
 		}
diff --git a/frontend/src/lib/components/copilot/AIFormAssistant.svelte b/frontend/src/lib/components/copilot/AIFormAssistant.svelte
index 4678342a57..ef9d8b2142 100644
--- a/frontend/src/lib/components/copilot/AIFormAssistant.svelte
+++ b/frontend/src/lib/components/copilot/AIFormAssistant.svelte
@@ -36,7 +36,7 @@
 				icon: Pencil
 			}}
 			iconOnly
-			on:click={onEditInstructions}
+			onclick={onEditInstructions}
 		/>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/copilot/AIFormSettings.svelte b/frontend/src/lib/components/copilot/AIFormSettings.svelte
index 44151a01b3..d868d16330 100644
--- a/frontend/src/lib/components/copilot/AIFormSettings.svelte
+++ b/frontend/src/lib/components/copilot/AIFormSettings.svelte
@@ -17,7 +17,7 @@
 		textClass="font-medium"
 		size="xs"
 		checked={prompt !== undefined}
-		on:change={() => {
+		onchange={() => {
 			if (prompt !== undefined) {
 				prompt = undefined
 			} else {
diff --git a/frontend/src/lib/components/copilot/AskAiButton.svelte b/frontend/src/lib/components/copilot/AskAiButton.svelte
index 52c810e5e3..37439c9f97 100644
--- a/frontend/src/lib/components/copilot/AskAiButton.svelte
+++ b/frontend/src/lib/components/copilot/AskAiButton.svelte
@@ -30,7 +30,7 @@
 	}}
 	unifiedSize="md"
 	btnClasses={AIBtnClasses('default')}
-	on:click={onClick}
+	onclick={onClick}
 >
 	{label}
 </Button>
diff --git a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
index 891a0de890..b699d9d43d 100644
--- a/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
+++ b/frontend/src/lib/components/copilot/CodeCompletionStatus.svelte
@@ -13,7 +13,7 @@
 	<Toggle
 		size="xs"
 		bind:checked={$codeCompletionSessionEnabled}
-		on:change={() => {
+		onchange={() => {
 			storeSetting()
 		}}
 		options={{ right: 'AI code completion' }}
@@ -23,7 +23,7 @@
 		disabled
 		size="xs"
 		checked={false}
-		on:change={() => {
+		onchange={() => {
 			storeSetting()
 		}}
 		options={{ right: 'AI code completion (disabled in workspace settings)' }}
diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte
index 02a45aa767..d6e8c034c1 100644
--- a/frontend/src/lib/components/copilot/CronGen.svelte
+++ b/frontend/src/lib/components/copilot/CronGen.svelte
@@ -91,7 +91,7 @@
 			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
 			loading={genLoading}
 			clickableWhileLoading
-			on:click={genLoading ? () => abortController?.abort() : () => {}}
+			onclick={genLoading ? () => abortController?.abort() : () => {}}
 		/>
 	{/snippet}
 	{#snippet content({ close })}
@@ -119,7 +119,7 @@
 						title="Generate CRON schedule from prompt"
 						aria-label="Generate"
 						iconOnly
-						on:click={() => {
+						onclick={() => {
 							close()
 							generateCron()
 						}}
diff --git a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
index dc8381ba15..b7b08d6de0 100644
--- a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
+++ b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
@@ -8,9 +8,11 @@
 		open?: boolean
 		inputs?: string[]
 		onconfirmed?: (...args: any[]) => any
+		oncanceled?: (...args: any[]) => any
 	}
 
-	let { open = $bindable(false), inputs = [], onconfirmed = undefined }: Props = $props()
+	let { open = $bindable(false), inputs = [], onconfirmed = undefined,
+		oncanceled = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -18,12 +20,12 @@
 <Portal>
 	<Modal
 		bind:open
-		on:confirmed={() => {
+		onconfirmed={() => {
 			open = false
 			dispatch('confirmed')
 			onconfirmed?.()
 		}}
-		on:canceled
+		oncanceled={oncanceled}
 		title="Windmill AI wants to add the following inputs to the flow:"
 	>
 		<ul class=" list-disc pl-5">
@@ -34,7 +36,7 @@
 
 		{#snippet actions()}
 			<Button
-				on:click={() => {
+				onclick={() => {
 					open = false
 					dispatch('confirmed')
 					onconfirmed?.()
diff --git a/frontend/src/lib/components/copilot/IteratorGen.svelte b/frontend/src/lib/components/copilot/IteratorGen.svelte
index 4b3aa2d97c..1ababadc3b 100644
--- a/frontend/src/lib/components/copilot/IteratorGen.svelte
+++ b/frontend/src/lib/components/copilot/IteratorGen.svelte
@@ -167,26 +167,26 @@ Only output the expression, do not explain or discuss.`
 					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
 					: ''
 			)}
-			on:click={() => {
+			onclick={() => {
 				if (!loading && generatedContent.length > 0) {
 					dispatch('setExpr', generatedContent)
 					onsetExpr?.(generatedContent)
 					generatedContent = ''
 				}
 			}}
-			on:focus={() => {
+			onfocus={() => {
 				btnFocused = true
 			}}
-			on:blur={() => {
+			onblur={() => {
 				btnFocused = false
 			}}
-			on:mouseenter={(ev) => {
+			onmouseenter={(ev) => {
 				if (out) {
 					out = false
 					generateIteratorExpr()
 				}
 			}}
-			on:mouseleave={() => {
+			onmouseleave={() => {
 				out = true
 				cancel()
 			}}
diff --git a/frontend/src/lib/components/copilot/PredicateGen.svelte b/frontend/src/lib/components/copilot/PredicateGen.svelte
index 3d8d8335b0..920cb35882 100644
--- a/frontend/src/lib/components/copilot/PredicateGen.svelte
+++ b/frontend/src/lib/components/copilot/PredicateGen.svelte
@@ -112,7 +112,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 				btnClasses="min-h-[30px] text-ai bg-violet-100 dark:bg-gray-700"
 				{loading}
 				clickableWhileLoading
-				on:click={loading ? () => abortController?.abort() : () => {}}
+				onclick={loading ? () => abortController?.abort() : () => {}}
 			/>
 		{/snippet}
 		{#snippet content({ close })}
@@ -137,7 +137,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 				title="Generate predicate from prompt"
 				aria-label="Generate"
 				iconOnly
-				on:click={() => {
+				onclick={() => {
 					close()
 					generatePredicate()
 				}}
diff --git a/frontend/src/lib/components/copilot/RegexGen.svelte b/frontend/src/lib/components/copilot/RegexGen.svelte
index 74f2a7316c..7469558f71 100644
--- a/frontend/src/lib/components/copilot/RegexGen.svelte
+++ b/frontend/src/lib/components/copilot/RegexGen.svelte
@@ -12,6 +12,13 @@
 	import { createEventDispatcher } from 'svelte'
 	import { copilotInfo } from '$lib/aiStore'
 
+	interface Props {
+		ongen?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	// state
 	let funcDesc: string = $state('')
 	let genLoading: boolean = $state(false)
@@ -113,7 +120,7 @@
 				loading={genLoading}
 				propagateEvent
 				clickableWhileLoading
-				on:click={genLoading ? () => abortController?.abort() : () => {}}
+				onclick={genLoading ? () => abortController?.abort() : () => {}}
 			/>
 		
 	{/snippet}
@@ -141,7 +148,7 @@
 								buttonType="button"
 								btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 								aria-label="Generate"
-								on:click={() => {
+								onclick={() => {
 									close()
 									onGenerate()
 								}}
@@ -158,7 +165,7 @@
 										color="light"
 										btnClasses="justify-start overflow-x-scroll no-scrollbar"
 										startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
-										on:click={() => {
+										onclick={() => {
 											funcDesc = p
 										}}>{p}</Button
 									>
diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte
index 2deaef0193..5fa804ecc8 100644
--- a/frontend/src/lib/components/copilot/ScriptFix.svelte
+++ b/frontend/src/lib/components/copilot/ScriptFix.svelte
@@ -37,7 +37,7 @@
 						color="light"
 						spacingSize="xs2"
 						startIcon={{ icon: WandSparkles }}
-						on:click={() => {
+						onclick={() => {
 							if ($copilotInfo.enabled) {
 								aiChatManager.fix()
 							}
diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte
index c3d2c9dc85..3a0f4f5755 100644
--- a/frontend/src/lib/components/copilot/ScriptGen.svelte
+++ b/frontend/src/lib/components/copilot/ScriptGen.svelte
@@ -311,7 +311,7 @@
 				btnClasses="!font-medium px-2 w-7"
 				unifiedSize="md"
 				destructive
-				on:click={rejectDiff}
+				onclick={rejectDiff}
 				variant="accent"
 				startIcon={{ icon: X }}
 				iconOnly
@@ -322,7 +322,7 @@
 				btnClasses="!font-medium px-2 w-7"
 				unifiedSize="md"
 				variant="accent"
-				on:click={acceptDiff}
+				onclick={acceptDiff}
 				iconOnly
 				startIcon={{ icon: Check }}
 				{...btnProps}
@@ -335,7 +335,7 @@
 				btnClasses="!font-medium px-2"
 				unifiedSize="md"
 				destructive
-				on:click={rejectDiff}
+				onclick={rejectDiff}
 				variant="accent"
 				startIcon={{ icon: X }}
 				{...btnProps}
@@ -346,7 +346,7 @@
 				btnClasses="!font-medium px-2"
 				unifiedSize="md"
 				variant="accent"
-				on:click={acceptDiff}
+				onclick={acceptDiff}
 				startIcon={{ icon: Check }}
 				{...btnProps}
 			>
@@ -373,7 +373,7 @@
 					color={genLoading ? 'red' : 'light'}
 					btnClasses={twMerge(genLoading ? '!px-3 z-[5000]' : '!px-2')}
 					propagateEvent={!genLoading}
-					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
+					onclick={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
 					iconOnly
 					title="Generate code from prompt"
@@ -389,7 +389,7 @@
 					spacingSize="md"
 					startIcon={genLoading ? { icon: Ban } : { icon: Wand2 }}
 					propagateEvent={!genLoading}
-					on:click={genLoading ? () => abortController?.abort() : handleAiButtonClick}
+					onclick={genLoading ? () => abortController?.abort() : handleAiButtonClick}
 					bind:element={button}
 					{...btnProps}
 				>
@@ -449,7 +449,7 @@
 								btnClasses="!h-[34px] qhd:!h-[38px] !ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 								title="Generate code from prompt"
 								aria-label="Generate"
-								on:click={() => {
+								onclick={() => {
 									onGenerate(() => close())
 								}}
 								disabled={trimmedDesc.length <= 0}
@@ -465,7 +465,7 @@
 										color="light"
 										btnClasses="justify-start overflow-x-scroll no-scrollbar"
 										startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
-										on:click={() => {
+										onclick={() => {
 											funcDesc = p
 											setTimeout(() => {
 												autoResize()
@@ -507,7 +507,7 @@
 									<ToggleButtonGroup
 										class="w-auto shrink-0"
 										selected={dbSchema?.publicOnly ? 'true' : 'false'}
-										on:selected={handlePublicOnlySelected}
+										onselected={handlePublicOnlySelected}
 									>
 										{#snippet children({ item })}
 											<ToggleButton
diff --git a/frontend/src/lib/components/copilot/StepGenQuick.svelte b/frontend/src/lib/components/copilot/StepGenQuick.svelte
index d1bb1f3ecf..e718e3575a 100644
--- a/frontend/src/lib/components/copilot/StepGenQuick.svelte
+++ b/frontend/src/lib/components/copilot/StepGenQuick.svelte
@@ -17,6 +17,7 @@
 		disableAi?: boolean
 		filteredItems?: (Script & { marked?: string })[] | (Item & { marked?: string })[]
 		onescape?: (...args: any[]) => any
+		oninsert?: (...args: any[]) => any
 	}
 
 	let {
diff --git a/frontend/src/lib/components/copilot/StepInputGen.svelte b/frontend/src/lib/components/copilot/StepInputGen.svelte
index bc5ffc5c8f..9738b7c2de 100644
--- a/frontend/src/lib/components/copilot/StepInputGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputGen.svelte
@@ -227,7 +227,7 @@ Only return the expression without any wrapper.`
 
 {#if $copilotInfo.enabled && $stepInputCompletionEnabled}
 	<FlowCopilotInputsModal
-		on:confirmed={async () => {
+		onconfirmed={async () => {
 			createFlowInput()
 		}}
 		bind:open={openInputsModal}
@@ -240,7 +240,7 @@ Only return the expression without any wrapper.`
 			AIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'default'),
 			btnClass
 		)}
-		on:click={() => {
+		onclick={() => {
 			if (!loading && generatedContent.length > 0) {
 				dispatch('setExpr', generatedContent)
 				onsetExpr?.(generatedContent)
@@ -250,13 +250,13 @@ Only return the expression without any wrapper.`
 				generatedContent = ''
 			}
 		}}
-		on:mouseenter={(ev) => {
+		onmouseenter={(ev) => {
 			if (out) {
 				out = false
 				generateStepInput()
 			}
 		}}
-		on:mouseleave={() => {
+		onmouseleave={() => {
 			out = true
 			cancel()
 		}}
@@ -269,10 +269,10 @@ Only return the expression without any wrapper.`
 						: Wand2,
 			classes: loading || ($stepInputsLoading && empty) ? 'animate-spin' : ''
 		}}
-		on:focus={() => {
+		onfocus={() => {
 			btnFocused = true
 		}}
-		on:blur={() => {
+		onblur={() => {
 			btnFocused = false
 		}}
 	>
diff --git a/frontend/src/lib/components/copilot/StepInputsGen.svelte b/frontend/src/lib/components/copilot/StepInputsGen.svelte
index 93dca0eb54..2e545dc977 100644
--- a/frontend/src/lib/components/copilot/StepInputsGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputsGen.svelte
@@ -177,7 +177,7 @@ input_name2: expression2
 <div class="flex flex-row justify-end">
 	{#if $copilotInfo.enabled && $stepInputCompletionEnabled}
 		<FlowCopilotInputsModal
-			on:confirmed={async () => {
+			onconfirmed={async () => {
 				createFlowInputs()
 			}}
 			bind:open={openInputsModal}
@@ -193,18 +193,18 @@ input_name2: expression2
 						!loading && Object.keys($generatedExprs || {}).length > 0 ? 'green' : 'default'
 					)
 			)}
-			on:mouseenter={(ev) => {
+			onmouseenter={(ev) => {
 				if (out) {
 					out = false
 					generateStepInputs()
 				}
 			}}
-			on:mouseleave={() => {
+			onmouseleave={() => {
 				out = true
 				abortController.abort()
 				generatedExprs?.set({})
 			}}
-			on:click={() => {
+			onclick={() => {
 				if (!loading && Object.keys($generatedExprs || {}).length > 0) {
 					applyExprs()
 				}
diff --git a/frontend/src/lib/components/copilot/TestAIKey.svelte b/frontend/src/lib/components/copilot/TestAIKey.svelte
index 575159aef8..a4e48f9abe 100644
--- a/frontend/src/lib/components/copilot/TestAIKey.svelte
+++ b/frontend/src/lib/components/copilot/TestAIKey.svelte
@@ -28,7 +28,7 @@
 	variant="default"
 	{disabled}
 	{loading}
-	on:click={async () => {
+	onclick={async () => {
 		loading = true
 		try {
 			const abortController = new AbortController()
diff --git a/frontend/src/lib/components/copilot/chat/AIChat.svelte b/frontend/src/lib/components/copilot/chat/AIChat.svelte
index 007675d0bf..800eab65d3 100644
--- a/frontend/src/lib/components/copilot/chat/AIChat.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChat.svelte
@@ -87,7 +87,7 @@
 		panelName="AI"
 		shortcut="L"
 		size="md"
-		on:click={() => aiChatManager.toggleOpen()}
+		onclick={() => aiChatManager.toggleOpen()}
 	/>
 {/snippet}
 
diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index 140f20f140..3f069e288f 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -124,7 +124,7 @@
 				{#snippet trigger()}
 							
 						<Button
-							on:click={() => {}}
+							onclick={() => {}}
 							title="History"
 							size="md"
 							btnClasses="!p-1"
@@ -163,7 +163,7 @@
 												btnClasses="!p-1"
 												variant="default"
 												startIcon={{ icon: X }}
-												on:click={() => {
+												onclick={() => {
 													deletePastChat(chat.id)
 												}}
 											/>
@@ -177,7 +177,7 @@
 			</Popover>
 			<Button
 				title="New chat"
-				on:click={() => {
+				onclick={() => {
 					saveAndClear()
 				}}
 				size="md"
@@ -232,7 +232,7 @@
 					size="xs"
 					variant="default"
 					btnClasses="bg-surface hover:bg-surface-selected"
-					on:click={() => {
+					onclick={() => {
 						cancel()
 					}}
 				>
@@ -376,7 +376,7 @@
 				<div class="flex flex-col gap-2">
 					{#each suggestions as suggestion}
 						<Button
-							on:click={() => submitSuggestion(suggestion)}
+							onclick={() => submitSuggestion(suggestion)}
 							size="xs2"
 							color="light"
 							btnClasses="whitespace-normal text-center font-normal"
diff --git a/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte b/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte
index 2ce4728399..663bb00242 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatMessage.svelte
@@ -93,7 +93,7 @@
 			<Button
 				size="xs2"
 				variant="default"
-				on:click={() => {
+				onclick={() => {
 					if (message.snapshot) {
 						if (message.snapshot.type === 'flow') {
 							aiChatManager.flowAiChatHelpers?.revertToSnapshot(message.snapshot.value)
diff --git a/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte b/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte
index 929318acd5..87aa437bd5 100644
--- a/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte
+++ b/frontend/src/lib/components/copilot/chat/ChatQuickActions.svelte
@@ -25,7 +25,7 @@
 	<div class="flex flex-row items-center gap-1.5">
 		{#if diffMode}
 			<Button
-				on:click={() => {
+				onclick={() => {
 					askAi(
 						'Based on the changes I made to the code, look for potential issues and recommend better solutions',
 						{ withDiff: true }
@@ -43,7 +43,7 @@
 			</Button>
 		{:else}
 			<Button
-				on:click={() => {
+				onclick={() => {
 					askAi('Explain the changes I made to the code from the last diff', {
 						withCode: false,
 						withDiff: true
@@ -60,7 +60,7 @@
 				Explain
 			</Button>
 			<Button
-				on:click={() => {
+				onclick={() => {
 					askAi('Look for potential issues and recommend better solutions in the actual code')
 				}}
 				title="Suggest improvements"
diff --git a/frontend/src/lib/components/copilot/chat/DatatableCreationPolicy.svelte b/frontend/src/lib/components/copilot/chat/DatatableCreationPolicy.svelte
index 4df548192a..8e05c541aa 100644
--- a/frontend/src/lib/components/copilot/chat/DatatableCreationPolicy.svelte
+++ b/frontend/src/lib/components/copilot/chat/DatatableCreationPolicy.svelte
@@ -56,7 +56,7 @@
 			<Toggle
 				size="xs"
 				checked={aiChatManager.datatableCreationPolicy.enabled}
-				on:change={(e) => handleToggle(e.detail)}
+				onchange={(e) => handleToggle(e)}
 			/>
 			<span class="text-2xs text-secondary whitespace-nowrap">tables creation</span>
 		</div>
diff --git a/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte b/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte
index 5514e8f661..c118951108 100644
--- a/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/ToolExecutionDisplay.svelte
@@ -84,7 +84,7 @@
 					<Button
 						variant="default"
 						size="xs"
-						on:click={() => {
+						onclick={() => {
 							if (message.tool_call_id) {
 								aiChatManager.handleToolConfirmation(message.tool_call_id, false)
 							}
@@ -95,7 +95,7 @@
 					<Button
 						variant="accent"
 						size="xs"
-						on:click={() => {
+						onclick={() => {
 							if (message.tool_call_id) {
 								aiChatManager.handleToolConfirmation(message.tool_call_id, true)
 							}
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index d917bae3e6..0c656ecfea 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -82,7 +82,7 @@
 						variant="contained"
 						color="light"
 						size="xs"
-						on:click={async () => {
+						onclick={async () => {
 							dispatch('seeTriggers')
 							onseeTriggers?.()
 							await tick()
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
index 9c0b964c9f..20779b89f5 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
@@ -62,7 +62,7 @@
 		? 'Disable workspace error handler for this script'
 		: 'Enable workspace error handler for this script'}
 	unifiedSize="md"
-	on:click={toggleErrorHandler}
+	onclick={toggleErrorHandler}
 	variant="subtle"
 	startIcon={{
 		icon: errorHandlerMuted === undefined || !errorHandlerMuted ? Bell : BellOff
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
index d302fba6ea..d6e0c8cd41 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
@@ -67,7 +67,7 @@
 	{color}
 	size="xs"
 	checked={toggleState}
-	on:change={toggleErrorHandler}
+	onchange={toggleErrorHandler}
 	options={{
 		right: 'Mute',
 		rightTooltip: 'Disable workspace error handler, EE only',
diff --git a/frontend/src/lib/components/display/PdfViewer.svelte b/frontend/src/lib/components/display/PdfViewer.svelte
index 3c479fa928..23c942dc45 100644
--- a/frontend/src/lib/components/display/PdfViewer.svelte
+++ b/frontend/src/lib/components/display/PdfViewer.svelte
@@ -215,7 +215,7 @@
 			>
 				<div class="flex justify-start items-center px-2 text-secondary text-sm">
 					<Button
-						on:click={() => zoom && (zoom -= 10)}
+						onclick={() => zoom && (zoom -= 10)}
 						disabled={!doc}
 						size="xs"
 						color="light"
@@ -228,7 +228,7 @@
 					</Button>
 					{#if wideView}
 						<Button
-							on:click={() => (zoom = 100)}
+							onclick={() => (zoom = 100)}
 							disabled={!doc}
 							size="xs"
 							color="light"
@@ -241,7 +241,7 @@
 						</Button>
 					{/if}
 					<Button
-						on:click={() => renderPdf(true, true)}
+						onclick={() => renderPdf(true, true)}
 						disabled={!doc}
 						size="xs"
 						color="light"
@@ -253,7 +253,7 @@
 						<MoveHorizontal size={16} />
 					</Button>
 					<Button
-						on:click={() => zoom && (zoom += 10)}
+						onclick={() => zoom && (zoom += 10)}
 						disabled={!doc}
 						size="xs"
 						color="light"
@@ -283,7 +283,7 @@
 				</div>
 				<div class="flex justify-end items-center px-2 text-secondary text-sm gap-1">
 					<Button
-						on:click={downloadPdf}
+						onclick={downloadPdf}
 						disabled={!doc}
 						size="xs"
 						color="light"
@@ -295,7 +295,7 @@
 					</Button>
 					{#if allowFullscreen}
 						<Button
-							on:click={() => (fullscreen = !fullscreen)}
+							onclick={() => (fullscreen = !fullscreen)}
 							disabled={!doc}
 							size="xs"
 							color="light"
@@ -342,7 +342,7 @@
 			<button
 				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90
 			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
-				on:click={() => syncZoomValue()}
+				onclick={() => syncZoomValue()}
 			>
 				Sync zoom value
 			</button>
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index 38332bb498..9a49b4ebf3 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte
@@ -47,7 +47,7 @@
 			unifiedSize="lg"
 			startIcon={{ icon: Plus }}
 			endIcon={{ icon: LayoutDashboard }}
-			on:click={openAppTypeModal}
+			onclick={openAppTypeModal}
 			variant="accent"
 			dropdownItems={[
 				{
@@ -122,7 +122,7 @@
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={'Import low-code app from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
-		on:close={() => drawer?.toggleDrawer?.()}
+		onclose={() => drawer?.toggleDrawer?.()}
 	>
 		{#await import('$lib/components/SimpleEditor.svelte')}
 			<Loader2 class="animate-spin" />
@@ -135,7 +135,7 @@
 			/>
 		{/await}
 		{#snippet actions()}
-			<Button size="sm" on:click={importRaw}>Import</Button>
+			<Button size="sm" onclick={importRaw}>Import</Button>
 		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
index f2080fb281..79b696b1aa 100644
--- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
@@ -57,7 +57,7 @@
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={'Import flow from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
-		on:close={() => drawer?.toggleDrawer?.()}
+		onclose={() => drawer?.toggleDrawer?.()}
 	>
 		{#await import('$lib/components/SimpleEditor.svelte')}
 			<Loader2 class="animate-spin" />
@@ -70,7 +70,7 @@
 			/>
 		{/await}
 		{#snippet actions()}
-			<Button size="sm" on:click={importRaw}>Import</Button>
+			<Button size="sm" onclick={importRaw}>Import</Button>
 		{/snippet}
 	</DrawerContent>
 </Drawer>
diff --git a/frontend/src/lib/components/flows/DebounceLimit.svelte b/frontend/src/lib/components/flows/DebounceLimit.svelte
index 8c8937016d..a525de907f 100644
--- a/frontend/src/lib/components/flows/DebounceLimit.svelte
+++ b/frontend/src/lib/components/flows/DebounceLimit.svelte
@@ -69,7 +69,7 @@
 			{size}
 			disabled={!$enterpriseLicense}
 			checked={Boolean(debounce_delay_s)}
-			on:change={() => {
+			onchange={() => {
 				if (debounce_delay_s) {
 					debounce_delay_s = undefined
 					debounce_key = undefined
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 3312acd5b0..e2cd23a63f 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -59,6 +59,9 @@
 		onDelete?: (id: string) => void
 		flowHasChanged?: boolean
 		previewOpen: boolean
+		onreload?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -93,7 +96,10 @@
 		suspendStatus,
 		onDelete,
 		flowHasChanged,
-		previewOpen
+		previewOpen,
+		onreload = undefined,
+		onapplyArgs = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
@@ -161,8 +167,8 @@
 						{smallErrorHandler}
 						{newFlow}
 						{showJobStatus}
-						on:reload
-						on:generateStep={({ detail }) => {
+						onreload={onreload}
+						ongenerateStep={(detail) => {
 							if (!aiChatManager.open) {
 								aiChatManager.openChat()
 							}
@@ -203,8 +209,8 @@
 					{newFlow}
 					{savedFlow}
 					enableAi={!disableAi}
-					on:applyArgs
-					on:testWithArgs
+					onapplyArgs={onapplyArgs}
+					ontestWithArgs={ontestWithArgs}
 					{onDeployTrigger}
 					{forceTestTab}
 					{highlightArg}
diff --git a/frontend/src/lib/components/flows/FlowEditorTutorial.svelte b/frontend/src/lib/components/flows/FlowEditorTutorial.svelte
index ca1972914e..2b59e3e815 100644
--- a/frontend/src/lib/components/flows/FlowEditorTutorial.svelte
+++ b/frontend/src/lib/components/flows/FlowEditorTutorial.svelte
@@ -7,6 +7,18 @@
 	import { tutorialsToDo } from '$lib/stores'
 	import { getTutorialIndex } from '$lib/tutorials/config'
 
+	interface Props {
+		onreload?: (...args: any[]) => any
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
+	}
+
+	let {
+		onreload = undefined,
+		onerror = undefined,
+		onskipAll = undefined
+	}: Props = $props()
+
 	let flowTutorials: FlowTutorials | undefined = $state(undefined)
 
 	async function getTutorialItems() {
@@ -55,8 +67,8 @@
 
 <FlowTutorials
 	bind:this={flowTutorials}
-	on:reload
-	on:error
-	on:skipAll
+	onreload={onreload}
+	onerror={onerror}
+	onskipAll={onskipAll}
 />
 
diff --git a/frontend/src/lib/components/flows/FlowHistory.svelte b/frontend/src/lib/components/flows/FlowHistory.svelte
index 32b1a2af08..727f98770d 100644
--- a/frontend/src/lib/components/flows/FlowHistory.svelte
+++ b/frontend/src/lib/components/flows/FlowHistory.svelte
@@ -19,7 +19,7 @@
 
 <Drawer bind:this={drawer} size="1200px">
 	<DrawerContent
-		on:close={() => {
+		onclose={() => {
 			drawer?.closeDrawer()
 		}}
 		noPadding
diff --git a/frontend/src/lib/components/flows/FlowHistoryInner.svelte b/frontend/src/lib/components/flows/FlowHistoryInner.svelte
index 496c3a3d7b..bd0477be62 100644
--- a/frontend/src/lib/components/flows/FlowHistoryInner.svelte
+++ b/frontend/src/lib/components/flows/FlowHistoryInner.svelte
@@ -151,7 +151,7 @@
 											buttonType="button"
 											btnClasses="!p-1 !w-[34px] !ml-1"
 											aria-label="Save deployment message"
-											on:click={() => {
+											onclick={() => {
 												updateDeploymentMsg(selectedVersion?.id)
 											}}
 										>
@@ -163,7 +163,7 @@
 											buttonType="button"
 											btnClasses="!p-1 !w-[34px] !ml-1"
 											aria-label="Abort"
-											on:click={() => {
+											onclick={() => {
 												deploymentMsgUpdateMode = false
 												deploymentMsgUpdate = undefined
 											}}
@@ -196,7 +196,7 @@
 										<Button
 											size="sm"
 											variant="accent"
-											on:click={() =>
+											onclick={() =>
 												window.open(
 													`/flows/add?template_id=${selectedVersion?.id}&template=${path}`,
 													'_blank'
@@ -208,7 +208,7 @@
 								{/if}
 
 								<div class="flex">
-									<Button size="sm" variant="accent" on:click={() => restoreVersion(selected)}
+									<Button size="sm" variant="accent" onclick={() => restoreVersion(selected)}
 										>Redeploy with that version
 									</Button>
 								</div>
diff --git a/frontend/src/lib/components/flows/common/FlowCard.svelte b/frontend/src/lib/components/flows/common/FlowCard.svelte
index f780331a82..33592105a0 100644
--- a/frontend/src/lib/components/flows/common/FlowCard.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCard.svelte
@@ -12,6 +12,8 @@
 		action?: import('svelte').Snippet
 		children?: import('svelte').Snippet
 		isAgentTool?: boolean
+		onsetHash?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +25,9 @@
 		header,
 		action,
 		children,
-		isAgentTool = false
+		isAgentTool = false,
+		onsetHash = undefined,
+		onreload = undefined
 	}: Props = $props()
 </script>
 
@@ -31,8 +35,8 @@
 	{#if !noEditor && !noHeader}
 		<div>
 			<FlowCardHeader
-				on:setHash
-				on:reload
+				onsetHash={onsetHash}
+				onreload={onreload}
 				{title}
 				bind:summary
 				{flowModuleValue}
diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
index 2b9fcf3ad2..89ac17e36b 100644
--- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
@@ -115,7 +115,7 @@
 							title="Report an issue with this hub script"
 							unifiedSize="sm"
 							variant="subtle"
-							on:click={() => {
+							onclick={() => {
 								const targetHubBaseUrl =
 									Number(hubVersionId) < PRIVATE_HUB_MIN_VERSION
 										? DEFAULT_HUB_BASE_URL
@@ -135,7 +135,7 @@
 							<Button
 								size="xs"
 								variant="default"
-								on:click={() => {
+								onclick={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
 										onsetHash?.(latestHash)
@@ -150,7 +150,7 @@
 							size="xs"
 							btnClasses="text-primary inline-flex gap-1 items-center"
 							color="light"
-							on:click={() => {
+							onclick={() => {
 								if (flowModuleValue.type == 'script') {
 									dispatch('setHash', undefined)
 									onsetHash?.(undefined)
@@ -163,7 +163,7 @@
 								title="Lock hash to always use this specific version"
 								unifiedSize="sm"
 								variant="default"
-								on:click={() => {
+								onclick={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
 										onsetHash?.(latestHash)
@@ -174,7 +174,7 @@
 								title="Reload latest hash"
 								unifiedSize="sm"
 								variant="default"
-								on:click={() => (dispatch('reload'), onreload?.())}
+								onclick={() => (dispatch('reload'), onreload?.())}
 								startIcon={{ icon: RefreshCw }}
 								iconOnly
 							/>
diff --git a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
index 854ecc363a..77c9de2943 100644
--- a/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
+++ b/frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte
@@ -19,9 +19,11 @@
 		parentModule: FlowModule
 		previousModule: FlowModule | undefined
 		enableAi?: boolean
+		onupdateSummary?: (...args: any[]) => any
 	}
 
-	let { branch = $bindable(), parentModule, previousModule, enableAi = false }: Props = $props()
+	let { branch = $bindable(), parentModule, previousModule, enableAi = false,
+		onupdateSummary = undefined }: Props = $props()
 
 	const { previewArgs, flowStateStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
@@ -45,7 +47,7 @@
 	<PropPickerWrapper
 		notSelectable
 		pickableProperties={stepPropPicker.pickableProperties}
-		on:select={({ detail }) => {
+		onselect={(detail) => {
 			editor?.insertAtCursor(detail)
 			editor?.focus()
 		}}
@@ -68,10 +70,10 @@
 		<div class="flex flex-row gap-2 items-center">
 			{#if enableAi}
 				<PredicateGen
-					on:setExpr={(e) => {
+					onsetExpr={(e) => {
 						branch.expr = e.detail
 					}}
-					on:updateSummary
+					onupdateSummary={onupdateSummary}
 					pickableProperties={stepPropPicker.pickableProperties}
 				/>
 			{/if}
@@ -79,7 +81,7 @@
 				size="xs"
 				startIcon={{ icon: Pen }}
 				variant="default"
-				on:click={() => (open = !open)}
+				onclick={() => (open = !open)}
 				id="flow-editor-edit-predicate"
 			>
 				Edit predicate
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index 93bfd2d533..ba3e59d9da 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -9,7 +9,7 @@
 
 <div class="text-xs flex flex-row-reverse">
 	<Button
-		on:click={() => {
+		onclick={() => {
 			opened = !opened
 		}}
 		color="light"
diff --git a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
index fd7bbc82e8..6dee6b7cd4 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchOneWrapper.svelte
@@ -39,7 +39,7 @@
 				{parentModule}
 				{previousModule}
 				{enableAi}
-				on:updateSummary={(e) => {
+				onupdateSummary={(e) => {
 					if (!branch.summary) {
 						branch.summary = e.detail
 					}
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
index aa6d1af97c..980b439e85 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -90,7 +90,7 @@
 									<div class="w-full border">
 										<BranchPredicateEditor
 											{branch}
-											on:updateSummary={(e) => {
+											onupdateSummary={(e) => {
 												if (!branch.summary) {
 													branch.summary = e.detail
 												}
diff --git a/frontend/src/lib/components/flows/content/FlowEditorDrawer.svelte b/frontend/src/lib/components/flows/content/FlowEditorDrawer.svelte
index 30311e2fa3..2538516ec2 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorDrawer.svelte
@@ -12,6 +12,13 @@
 	import { initFlow } from '$lib/components/flows/flowStore.svelte'
 	import type { FlowState } from '$lib/components/flows/flowState'
 
+	interface Props {
+		onsave?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	let flowEditorDrawer: Drawer | undefined = $state()
 
 	const dispatch = createEventDispatcher()
@@ -82,7 +89,7 @@
 		title="Flow Editor - {flowPath}"
 		noPadding
 		fullScreen
-		on:close={() => {
+		onclose={() => {
 			flowEditorDrawer?.closeDrawer()
 		}}
 	>
@@ -124,7 +131,7 @@
 		{#snippet actions()}
 			<Button
 				variant="default"
-				on:click={() => {
+				onclick={() => {
 					window.open(`/flows/edit/${flowPath}`, '_blank', 'noopener,noreferrer')
 					flowEditorDrawer?.closeDrawer()
 				}}
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 8ebf167d51..c67e9fe9dd 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -37,6 +37,8 @@
 		onOpenDetails?: () => void
 		previewOpen?: boolean
 		flowModuleSchemaMap?: import('../map/FlowModuleSchemaMap.svelte').default
+		onapplyArgs?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -54,7 +56,9 @@
 		suspendStatus,
 		onOpenDetails,
 		previewOpen = false,
-		flowModuleSchemaMap = undefined
+		flowModuleSchemaMap = undefined,
+		onapplyArgs = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	const {
@@ -99,12 +103,12 @@
 	<FlowInput
 		{noEditor}
 		disabled={disabledFlowInputs}
-		on:openTriggers={(ev) => {
+		onopenTriggers={(ev) => {
 			selectionManager.selectId('Trigger')
 			handleSelectTriggerFromKind(triggersState, triggersCount, savedFlow?.path, ev.detail.kind)
 			showCaptureHint.set(true)
 		}}
-		on:applyArgs
+		onapplyArgs={onapplyArgs}
 		{onTestFlow}
 		{previewOpen}
 		{flowModuleSchemaMap}
@@ -119,15 +123,15 @@
 	<FlowPreprocessorModule {noEditor} savedModule={savedFlow?.value.preprocessor_module} />
 {:else if selectedId === 'Trigger'}
 	<TriggersEditor
-		on:applyArgs
-		on:addPreprocessor={async (e) => {
+		onapplyArgs={onapplyArgs}
+		onaddPreprocessor={async (e) => {
 			await insertNewPreprocessorModule(flowStore, flowStateStore, {
 				language: 'bun'
 			})
 			stepsInputArgs.setStepArgs('preprocessor', e.detail.args ?? {})
 			selectionManager.selectId('preprocessor')
 		}}
-		on:updateSchema={(e) => {
+		onupdateSchema={(e) => {
 			const { payloadData, redirect } = e.detail
 			if (payloadData) {
 				previewArgs.val = JSON.parse(JSON.stringify(payloadData))
@@ -138,7 +142,7 @@
 				$flowInputEditorState.payloadData = payloadData
 			}
 		}}
-		on:testWithArgs
+		ontestWithArgs={ontestWithArgs}
 		currentPath={$pathStore}
 		initialPath={$initialPathStore}
 		{fakeInitialPath}
diff --git a/frontend/src/lib/components/flows/content/FlowEnvironmentVariables.svelte b/frontend/src/lib/components/flows/content/FlowEnvironmentVariables.svelte
index ce51b8dc77..ae87b2507b 100644
--- a/frontend/src/lib/components/flows/content/FlowEnvironmentVariables.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEnvironmentVariables.svelte
@@ -255,7 +255,7 @@
 											bind:code={entry.displayValue}
 											disabled={noEditor}
 											class="min-h-[60px] max-h-[200px]"
-											on:change={() => {
+											onchange={() => {
 												updateEnvValue(entry.key, entry.displayValue, 'json')
 											}}
 										/>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index a9eab8074c..f5299a80c2 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -58,6 +58,8 @@
 		onTestFlow?: (conversationId?: string) => Promise<string | undefined>
 		previewOpen: boolean
 		flowModuleSchemaMap?: import('../map/FlowModuleSchemaMap.svelte').default
+		onopenTriggers?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -65,7 +67,8 @@
 		disabled,
 		onTestFlow,
 		previewOpen,
-		flowModuleSchemaMap = undefined
+		flowModuleSchemaMap = undefined,
+		onopenTriggers = undefined
 	}: Props = $props()
 	const {
 		flowStore,
@@ -629,8 +632,8 @@
 	open={showChatModeWarning}
 	title="Enable Chat Mode?"
 	confirmationText="Continue"
-	onConfirmed={enableChatMode}
-	onCanceled={() => {
+	onconfirmed={enableChatMode}
+	oncanceled={() => {
 		showChatModeWarning = false
 		chatInputEnabled = false
 	}}
@@ -652,7 +655,7 @@
 				<Toggle
 					size="sm"
 					bind:checked={chatInputEnabled}
-					on:change={() => {
+					onchange={() => {
 						handleToggleChatMode()
 					}}
 					options={{
@@ -668,7 +671,7 @@
 						color={showAdditionalInputs ? 'blue' : 'light'}
 						startIcon={{ icon: Settings2 }}
 						title="Manage inputs"
-						on:click={() => (showAdditionalInputs = !showAdditionalInputs)}
+						onclick={() => (showAdditionalInputs = !showAdditionalInputs)}
 					>
 						Manage inputs
 					</Button>
@@ -690,7 +693,7 @@
 								showDynOpt
 								bind:dynCode
 								bind:dynLang
-								on:delete={(e) => {
+								ondelete={(e) => {
 									chatInputsAddPropertyV2?.handleDeleteArgument([e.detail])
 								}}
 							>
@@ -741,7 +744,7 @@
 						bind:this={editableSchemaForm}
 						bind:schema={flowStore.val.schema}
 						isFlowInput
-						on:delete={(e) => {
+						ondelete={(e) => {
 							addPropertyV2?.handleDeleteArgument([e.detail])
 						}}
 						showDynOpt
@@ -763,7 +766,7 @@
 						pannelExtraButtonWidth={$flowInputEditorState?.editPanelSize ? tabButtonWidth : 0}
 						{diff}
 						disableDnd={!!previewSchema}
-						on:rejectChange={(e) => {
+						onrejectChange={(e) => {
 							const isAiChange = hasAiSchemaChanges
 							rejectChange(e.detail).then(() => {
 								if (!isAiChange) {
@@ -771,7 +774,7 @@
 								}
 							})
 						}}
-						on:acceptChange={(e) => {
+						onacceptChange={(e) => {
 							acceptChange(e.detail).then(() => {
 								const isAiChange = hasAiSchemaChanges
 								if (!isAiChange) {
@@ -879,7 +882,7 @@
 							{#if $flowInputEditorState?.selectedTab === 'history'}
 								<FlowInputEditor
 									title="History"
-									on:destroy={() => {
+									ondestroy={() => {
 										updatePreviewSchemaAndArgs(undefined)
 									}}
 								>
@@ -887,7 +890,7 @@
 										bind:this={historicInputs}
 										runnableId={$initialPathStore ?? undefined}
 										runnableType={$pathStore ? 'FlowPath' : undefined}
-										on:select={(e) => {
+										onselect={(e) => {
 											updatePreviewSchemaAndArgs(e.detail?.args ?? undefined)
 										}}
 										limitPayloadSize
@@ -895,20 +898,20 @@
 								</FlowInputEditor>
 							{:else if $flowInputEditorState?.selectedTab === 'captures'}
 								<FlowInputEditor
-									on:destroy={() => {
+									ondestroy={() => {
 										updatePreviewSchemaAndArgs(undefined)
 									}}
 									title="Trigger captures"
 								>
 									{#snippet action()}
 										<div class="center-center">
-											<CaptureButton on:openTriggers small={true} />
+											<CaptureButton onopenTriggers={onopenTriggers} small={true} />
 										</div>
 									{/snippet}
 									<div class="h-full">
 										<CaptureTable
 											path={$initialPathStore || fakeInitialPath}
-											on:select={(e) => {
+											onselect={(e) => {
 												updatePreviewSchemaAndArgs(e.detail ?? undefined)
 											}}
 											isFlow={true}
@@ -921,7 +924,7 @@
 								</FlowInputEditor>
 							{:else if $flowInputEditorState?.selectedTab === 'savedInputs'}
 								<FlowInputEditor
-									on:destroy={() => {
+									ondestroy={() => {
 										updatePreviewSchemaAndArgs(undefined)
 									}}
 									title="Saved inputs"
@@ -929,10 +932,10 @@
 									<SavedInputsPicker
 										runnableId={$initialPathStore ?? undefined}
 										runnableType={$pathStore ? 'FlowPath' : undefined}
-										on:select={(e) => {
+										onselect={(e) => {
 											updatePreviewSchemaAndArgs(e.detail ?? undefined)
 										}}
-										on:isEditing={(e) => {
+										onisEditing={(e) => {
 											preventEnter = e.detail
 										}}
 										previewArgs={previewArgs.val}
@@ -943,19 +946,19 @@
 								</FlowInputEditor>
 							{:else if $flowInputEditorState?.selectedTab === 'json'}
 								<FlowInputEditor
-									on:destroy={() => {
+									ondestroy={() => {
 										updatePreviewSchemaAndArgs(undefined)
 									}}
 									title="Json payload"
 								>
 									<JsonInputs
-										on:focus={() => {
+										onfocus={() => {
 											preventEnter = true
 										}}
-										on:blur={async () => {
+										onblur={async () => {
 											preventEnter = false
 										}}
-										on:select={(e) => {
+										onselect={(e) => {
 											updatePreviewSchemaAndArgs(e.detail ?? undefined)
 										}}
 										selected={!!previewArgs.val}
@@ -964,7 +967,7 @@
 								</FlowInputEditor>
 							{:else if $flowInputEditorState?.selectedTab === 'firstStepInputs'}
 								<FlowInputEditor
-									on:destroy={() => {
+									ondestroy={() => {
 										updatePreviewSchemaAndArgs(undefined)
 										connectFirstNode = () => {}
 									}}
@@ -972,10 +975,10 @@
 								>
 									<FirstStepInputs
 										bind:this={firstStepInputs}
-										on:connectFirstNode={({ detail }) => {
+										onconnectFirstNode={(detail) => {
 											connectFirstNode = detail.connectFirstNode
 										}}
-										on:select={(e) => {
+										onselect={(e) => {
 											if (e.detail) {
 												const diffSchema = computeDiff(e.detail, flowStore.val.schema)
 												diff = diffSchema
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 5cdf0a269a..94700cc02b 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -27,6 +27,7 @@
 		noEditor: boolean
 		summary?: string | undefined
 		onnew?: (...args: any[]) => any
+		onpick?: (...args: any[]) => any
 	}
 
 	let {
@@ -35,7 +36,8 @@
 		shouldDisableTriggerScripts = false,
 		noEditor,
 		summary = $bindable(undefined),
-		onnew = undefined
+		onnew = undefined,
+		onpick = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -260,7 +262,7 @@
 						disabled={noEditor && (summary == undefined || summary == '')}
 						{label}
 						lang={lang == 'docker' ? 'bash' : lang}
-						on:click={() => {
+						onclick={() => {
 							if (lang == 'docker') {
 								if (isCloudHosted()) {
 									sendUserToast(
@@ -302,11 +304,11 @@
 			> script</h3
 		>
 		{#if pick_existing == 'hub'}
-			<PickHubScript bind:filter {kind} on:pick>
+			<PickHubScript bind:filter {kind} onpick={onpick}>
 				<ToggleHubWorkspace bind:selected={pick_existing} />
 			</PickHubScript>
 		{:else}
-			<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
+			<WorkspaceScriptPicker displayLock bind:filter {kind} onpick={onpick}>
 				<ToggleHubWorkspace bind:selected={pick_existing} />
 			</WorkspaceScriptPicker>
 		{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index e08932c3be..347024269d 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
@@ -52,6 +52,9 @@
 		displayPath?: boolean
 		refreshCount?: number
 		onnew?: (...args: any[]) => any
+		onpickScript?: (...args: any[]) => any
+		onpickFlow?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -66,7 +69,9 @@
 		selectedKind = kind,
 		displayPath = false,
 		refreshCount = 0,
-		onnew = undefined
+		onnew = undefined,
+		onpickScript = undefined,
+		onpickFlow = undefined
 	}: Props = $props()
 
 	if ($workspaceStore && cachedOwners?.[$workspaceStore]) {
@@ -312,7 +317,7 @@
 						<div class="pb-0 text-2xs font-normal text-secondary ml-2 pt-1">Integrations</div>
 					{/if}
 					<ListFiltersQuick
-						on:selected={() => {
+						onselected={() => {
 							filteredWorkspaceItems = []
 							selectedByKeyboard = 0
 						}}
@@ -363,7 +368,7 @@
 		{#if kind == 'script'}
 			{#each topLevelNodes as [label, kind], i (label)}
 				<FlowToplevelNode
-					on:click={() => {
+					onclick={() => {
 						dispatch('new', { kind })
 						onnew?.({ kind })
 					}}
@@ -413,7 +418,7 @@
 					{enterpriseLangs}
 					{label}
 					lang={lang == 'docker' ? 'bash' : lang}
-					on:click={() => {
+					onclick={() => {
 						if (lang == 'docker') {
 							if (isCloudHosted()) {
 								sendUserToast(
@@ -472,7 +477,7 @@
 						{funcDesc}
 						lang="TypeScript"
 						selected={selectedByKeyboard === inlineScripts?.length + topLevelNodes.length}
-						on:click={() => {
+						onclick={() => {
 							lang = 'bun'
 							onGenerate()
 						}}
@@ -483,7 +488,7 @@
 						{funcDesc}
 						lang="Python"
 						selected={selectedByKeyboard === inlineScripts?.length + topLevelNodes.length + 1}
-						on:click={() => {
+						onclick={() => {
 							lang = 'python3'
 							onGenerate()
 						}}
@@ -510,8 +515,8 @@
 					{filter}
 					kind={selectedKind}
 					selected={selectedByKeyboard - inlineScripts?.length - aiLength - topLevelNodes.length}
-					on:pickScript
-					on:pickFlow
+					onpickScript={onpickScript}
+					onpickFlow={onpickFlow}
 					{displayPath}
 					{refreshCount}
 				/>
@@ -541,7 +546,7 @@
 							aiLength -
 							filteredWorkspaceItems?.length -
 							topLevelNodes.length}
-						on:pickScript
+						onpickScript={onpickScript}
 						bind:loading
 						{displayPath}
 						{refreshCount}
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index f087079356..38e28d9c91 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -135,7 +135,7 @@
 		previewArgs={previewIterationArgs}
 		bind:job
 		bind:jobId
-		on:close={() => {
+		onclose={() => {
 			previewOpen = false
 		}}
 	/>
@@ -156,7 +156,7 @@
 				</div>
 				<div class="justify-end">
 					<Button
-						on:click={() => (previewOpen = true)}
+						onclick={() => (previewOpen = true)}
 						startIcon={{ icon: Play }}
 						variant="accent"
 						size="sm">Test an iteration</Button
@@ -205,7 +205,7 @@
 						</div>
 						<Toggle
 							bind:checked={mod.value.squash}
-							on:change={({ detail }) => {
+							onchange={(detail) => {
 								;(mod.value as ForloopFlow).squash = detail
 							}}
 							options={{
@@ -219,7 +219,7 @@
 						<div class="mb-2 text-sm font-bold">Run in parallel</div>
 						<Toggle
 							bind:checked={mod.value.parallel}
-							on:change={({ detail }) => {
+							onchange={(detail) => {
 								if (detail === false) {
 									;(mod.value as ForloopFlow).parallelism = undefined
 								}
@@ -263,7 +263,7 @@
 							<ToggleButtonGroup
 								disabled={!mod.value.parallel}
 								bind:selected={parallelismType}
-								on:selected={(e) => {
+								onselected={(e) => {
 									const forLoopFlow = mod.value as ForloopFlow
 									if (e.detail == parallelismType) return
 									if (e.detail === 'javascript') {
@@ -321,7 +321,7 @@
 							noPadding
 							flow_input={stepPropPicker.pickableProperties.flow_input}
 							pickableProperties={stepPropPicker.pickableProperties}
-							on:select={({ detail }) => {
+							onselect={(detail) => {
 								parallelismEditor?.insertAtCursor(detail)
 								parallelismEditor?.focus()
 							}}
@@ -362,7 +362,7 @@
 					</div>
 					<FlowPlugConnect
 						connecting={$flowPropPickerConfig != undefined}
-						on:click={() => {
+						onclick={() => {
 							const config = {
 								onSelect: (code) => {
 									setExpr(code)
@@ -385,8 +385,8 @@
 							bind:this={iteratorGen}
 							focused={iteratorFieldFocused}
 							arg={mod.value.iterator}
-							on:showExpr={(e) => (suggestion = e.detail || undefined)}
-							on:setExpr={(e) => {
+							onshowExpr={(e) => (suggestion = e.detail || undefined)}
+							onsetExpr={(e) => {
 								setExpr(e.detail)
 							}}
 							pickableProperties={stepPropPicker.pickableProperties}
@@ -404,7 +404,7 @@
 						<PropPickerWrapper
 							notSelectable
 							pickableProperties={stepPropPicker.pickableProperties}
-							on:select={({ detail }) => {
+							onselect={(detail) => {
 								if ($flowPropPickerConfig) {
 									setExpr(detail)
 									flowPropPickerConfig.set(undefined)
@@ -419,10 +419,10 @@
 								<SimpleEditor
 									small
 									bind:this={editor}
-									on:focus={() => {
+									onfocus={() => {
 										iteratorFieldFocused = true
 									}}
-									on:blur={() => {
+									onblur={() => {
 										iteratorFieldFocused = false
 									}}
 									autofocus
@@ -438,7 +438,7 @@
 					</div>
 				{:else}
 					<Button
-						on:click={() => {
+						onclick={() => {
 							if (mod.value.type === 'forloopflow') mod.value.iterator.type = 'javascript'
 						}}
 					/>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleCache.svelte b/frontend/src/lib/components/flows/content/FlowModuleCache.svelte
index f9744af36c..2fbab0fef4 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleCache.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleCache.svelte
@@ -33,7 +33,7 @@
 	{:else}
 		<Toggle
 			checked={isCacheEnabled}
-			on:change={() => {
+			onchange={() => {
 				if (isCacheEnabled && flowModule.cache_ttl != undefined) {
 					flowModule.cache_ttl = undefined
 				} else {
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 9414b29318..dec078bd0d 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -713,12 +713,12 @@
 	<div class="h-full bg-surface" bind:clientWidth={width}>
 		<FlowCard
 			flowModuleValue={flowModule?.value}
-			on:reload={() => {
+			onreload={() => {
 				forceReload++
 				reload(flowModule)
 			}}
 			{noEditor}
-			on:setHash={(e) => {
+			onsetHash={(e) => {
 				if (flowModule.value.type == 'script') {
 					flowModule.value.hash = e.detail
 				}
@@ -730,7 +730,7 @@
 				<FlowModuleHeader
 					tag={workspaceScriptTag ?? rawScriptLang ?? workspaceScriptLang}
 					module={flowModule}
-					on:tagChange={(e) => {
+					ontagChange={(e) => {
 						console.log('tagChange', e.detail)
 						if (flowModule.value.type == 'script') {
 							flowModule.value.tag_override = e.detail
@@ -738,20 +738,20 @@
 							flowModule.value.tag = e.detail
 						}
 					}}
-					on:toggleSuspend={() => selectAdvanced('suspend')}
-					on:toggleSleep={() => selectAdvanced('sleep')}
-					on:toggleMock={() => selectAdvanced('mock')}
-					on:toggleRetry={() => selectAdvanced('retries')}
-					on:togglePin={() => (selected = 'test')}
-					on:toggleConcurrency={() => selectAdvanced('runtime')}
-					on:toggleCache={() => selectAdvanced('cache')}
-					on:toggleStopAfterIf={() => selectAdvanced('early-stop')}
-					on:fork={async () => {
+					ontoggleSuspend={() => selectAdvanced('suspend')}
+					ontoggleSleep={() => selectAdvanced('sleep')}
+					ontoggleMock={() => selectAdvanced('mock')}
+					ontoggleRetry={() => selectAdvanced('retries')}
+					ontogglePin={() => (selected = 'test')}
+					ontoggleConcurrency={() => selectAdvanced('runtime')}
+					ontoggleCache={() => selectAdvanced('cache')}
+					ontoggleStopAfterIf={() => selectAdvanced('early-stop')}
+					onfork={async () => {
 						const [module, state] = await fork(flowModule)
 						flowModule = module
 						flowStateStore.val[module.id] = state
 					}}
-					on:reload={async () => {
+					onreload={async () => {
 						if (flowModule.value.type == 'script') {
 							if (flowModule.value.hash != undefined) {
 								flowModule.value.hash = await getLatestHashForScript(flowModule.value.path)
@@ -764,7 +764,7 @@
 							await reload(flowModule)
 						}
 					}}
-					on:createScriptFromInlineScript={async () => {
+					oncreateScriptFromInlineScript={async () => {
 						const [module, state] = await createScriptFromInlineScript(
 							flowModule,
 							selectedId,
@@ -796,8 +796,8 @@
 								acc[key] = obj.type === 'static' ? obj.value : undefined
 								return acc
 							}, {})}
-							on:showDiffMode={showDiffMode}
-							on:hideDiffMode={hideDiffMode}
+							onshowDiffMode={showDiffMode}
+							onhideDiffMode={hideDiffMode}
 							{lastDeployedCode}
 							{diffMode}
 							openAiChat
@@ -868,7 +868,7 @@
 																		modulePreview?.runTestWithStepArgs()
 																	}
 																}}
-																on:change={async (event) => {
+																onchange={async (event) => {
 																	const content = event.detail
 																	if (flowModule.value.type === 'rawscript') {
 																		if (flowModule.value.content !== content) {
@@ -931,7 +931,7 @@
 																modulePreview?.runTestWithStepArgs()
 															}
 														}}
-														on:change={async (event) => {
+														onchange={async (event) => {
 															const content = event.detail
 															if (flowModule.value.type === 'rawscript') {
 																if (flowModule.value.content !== content) {
@@ -1186,7 +1186,7 @@
 																	<Button
 																		size="xs"
 																		variant="default"
-																		on:click={() => {
+																		onclick={() => {
 																			if (flowModule.value.type == 'rawscript') {
 																				flowModule.value.concurrent_limit = undefined
 																			}
@@ -1241,7 +1241,7 @@
 														<Toggle
 															disabled={!$enterpriseLicense || isCloudHosted()}
 															checked={flowModule.priority !== undefined && flowModule.priority > 0}
-															on:change={() => {
+															onchange={() => {
 																if (flowModule.priority) {
 																	flowModule.priority = undefined
 																} else {
@@ -1323,7 +1323,7 @@
 														</Alert>
 														<Button
 															btnClasses="mt-4"
-															on:click={() => {
+															onclick={() => {
 																selectionManager.selectId('settings-same-worker')
 															}}
 														>
@@ -1362,7 +1362,7 @@
 
 														<Button
 															size="xs"
-															on:click={() =>
+															onclick={() =>
 																editor?.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
 														>
 															Apply snippet
@@ -1500,6 +1500,6 @@
 		</div>
 	</div>
 	{#snippet actions()}
-		<Button size="sm" on:click={confirmDebugBetaWarning}>Continue</Button>
+		<Button size="sm" onclick={confirmDebugBetaWarning}>Continue</Button>
 	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleDeleteAfterUse.svelte b/frontend/src/lib/components/flows/content/FlowModuleDeleteAfterUse.svelte
index 276738b22b..f5e0d00cb0 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleDeleteAfterUse.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleDeleteAfterUse.svelte
@@ -35,7 +35,7 @@
 		{disabled}
 		size="sm"
 		checked={Boolean(flowModule.delete_after_use)}
-		on:change={() => {
+		onchange={() => {
 			if (flowModule.delete_after_use) {
 				flowModule.delete_after_use = undefined
 			} else {
diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
index 9cb494bd3e..68004a0982 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -92,7 +92,7 @@
 
 			<Toggle
 				checked={isStopAfterIfEnabled}
-				on:change={() => {
+				onchange={() => {
 					if (isStopAfterIfEnabled && flowModule.stop_after_if) {
 						flowModule.stop_after_if = undefined
 					} else {
@@ -141,7 +141,7 @@
 							<Toggle
 								size="xs"
 								bind:checked={raise_error_message_stop_after_if}
-								on:change={(event) => {
+								onchange={(event) => {
 									if (flowModule.stop_after_if) {
 										flowModule.stop_after_if.error_message = event.detail === false ? undefined : ''
 									}
@@ -169,7 +169,7 @@
 							pickableProperties={stepPropPicker.pickableProperties}
 							result={earlyStopResult}
 							extraResults={isLoop ? { all_iters: result } : undefined}
-							on:select={({ detail }) => {
+							onselect={(detail) => {
 								editor?.insertAtCursor(detail)
 								editor?.focus()
 							}}
@@ -235,7 +235,7 @@
 
 			<Toggle
 				checked={isStopAfterAllIterationsEnabled}
-				on:change={() => {
+				onchange={() => {
 					if (isStopAfterAllIterationsEnabled && flowModule.stop_after_all_iters_if) {
 						flowModule.stop_after_all_iters_if = undefined
 					} else {
@@ -276,7 +276,7 @@
 							<Toggle
 								size="xs"
 								bind:checked={raise_error_message_stop_after_all_if}
-								on:change={(event) => {
+								onchange={(event) => {
 									if (flowModule.stop_after_all_iters_if) {
 										flowModule.stop_after_all_iters_if.error_message =
 											event.detail === false ? undefined : ''
@@ -304,7 +304,7 @@
 							noPadding
 							pickableProperties={stepPropPicker.pickableProperties}
 							{result}
-							on:select={({ detail }) => {
+							onselect={(detail) => {
 								editor?.insertAtCursor(detail)
 								editor?.focus()
 							}}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index e21adf9a84..208b887e9f 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -36,6 +36,7 @@
 		ontagChange?: (...args: any[]) => any
 		onfork?: (...args: any[]) => any
 		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		ontoggleMock?: (...args: any[]) => any
 	}
 
 	let {
@@ -179,14 +180,14 @@
 				noLabel={customUi?.tagSelectNoLabel}
 				nullTag={tag}
 				tag={module.value.tag_override}
-				on:change={(e) => (dispatch('tagChange', e.detail), ontagChange?.(e.detail))}
+				onchange={(e) => (dispatch('tagChange', e.detail), ontagChange?.(e.detail))}
 			/>
 		{/if}
 		{#if customUi?.scriptFork != false}
 			<Button
 				unifiedSize="sm"
 				variant="subtle"
-				on:click={() => (dispatch('fork'), onfork?.())}
+				onclick={() => (dispatch('fork'), onfork?.())}
 				startIcon={{ icon: GitFork }}
 				iconOnly={false}
 			>
@@ -197,7 +198,7 @@
 		<Button
 			unifiedSize="sm"
 			variant="subtle"
-			on:click={async () => {
+			onclick={async () => {
 				if (module.value.type == 'flow') {
 					$flowEditorDrawer?.openDrawer(module.value.path, () => {
 						dispatch('reload')
@@ -214,7 +215,7 @@
 		<Button
 			unifiedSize="sm"
 			variant="subtle"
-			on:click={async () => {
+			onclick={async () => {
 				dispatch('reload')
 				onreload?.()
 			}}
@@ -232,13 +233,13 @@
 			noLabel={customUi?.tagSelectNoLabel}
 			nullTag={tag}
 			tag={module.value.tag}
-			on:change={(e) => (dispatch('tagChange', e.detail), ontagChange?.(e.detail))}
+			onchange={(e) => (dispatch('tagChange', e.detail), ontagChange?.(e.detail))}
 		/>
 		<Button
 			unifiedSize="sm"
 			variant="subtle"
 			startIcon={{ icon: Save }}
-			on:click={() => (
+			onclick={() => (
 				dispatch('createScriptFromInlineScript'),
 				oncreateScriptFromInlineScript?.()
 			)}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
index 002a61235e..2fc1bb4dcb 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
@@ -64,7 +64,7 @@
 			</Tooltip>
 			<Toggle
 				checked={isMockEnabled}
-				on:change={() => {
+				onchange={() => {
 					if (isMockEnabled) {
 						flowModule.mock = {
 							enabled: false,
@@ -88,7 +88,7 @@
 
 		{#if isMockEnabled}
 			{#key renderCount}
-				<JsonEditor {code} on:changeValue={updateMockValue} />
+				<JsonEditor {code} onchangeValue={updateMockValue} />
 			{/key}
 		{:else}
 			<pre class="text-xs border rounded p-2 bg-surface-disabled"
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte b/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
index ffb0a8d502..0498780001 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSkip.svelte
@@ -47,7 +47,7 @@
 
 		<Toggle
 			checked={isSkipEnabled}
-			on:change={() => {
+			onchange={() => {
 				if (isSkipEnabled && flowModule.skip_if) {
 					flowModule.skip_if = undefined
 				} else {
@@ -73,7 +73,7 @@
 						noPadding
 						notSelectable
 						pickableProperties={stepPropPicker.pickableProperties}
-						on:select={({ detail }) => {
+						onselect={(detail) => {
 							editor?.insertAtCursor(detail)
 							editor?.focus()
 						}}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte b/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte
index dc45738338..73b04a1f8a 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSleep.svelte
@@ -57,7 +57,7 @@
 	<Toggle
 		checked={isSleepEnabled}
 		class="mb-6"
-		on:change={() => {
+		onchange={() => {
 			if (isSleepEnabled && flowModule.sleep != undefined) {
 				flowModule.sleep = undefined
 			} else {
@@ -81,7 +81,7 @@
 					{result}
 					displayContext={false}
 					pickableProperties={undefined}
-					on:select={({ detail }) => {
+					onselect={(detail) => {
 						editor?.insertAtCursor(detail)
 						editor?.focus()
 					}}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte b/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
index d1d946c5cd..3f91d7c6d0 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleSuspend.svelte
@@ -84,7 +84,7 @@
 			<Toggle
 				size="xs"
 				checked={isSuspendEnabled}
-				on:change={() => {
+				onchange={() => {
 					if (isSuspendEnabled && flowModule.suspend != undefined) {
 						flowModule.suspend = undefined
 					} else {
@@ -144,7 +144,7 @@
 				}}
 				checked={Boolean(flowModule.suspend?.continue_on_disapprove_timeout)}
 				disabled={!Boolean(flowModule.suspend)}
-				on:change={(e) => {
+				onchange={(e) => {
 					if (flowModule.suspend) {
 						flowModule.suspend.continue_on_disapprove_timeout = e.detail
 					}
@@ -172,7 +172,7 @@
 						options={{
 							right: 'Require approvers to be logged in'
 						}}
-						on:change={(e) => {
+						onchange={(e) => {
 							if (flowModule.suspend) {
 								flowModule.suspend.user_auth_required = e.detail
 								if (e.detail && flowModule.suspend?.user_groups_required === undefined) {
@@ -195,7 +195,7 @@
 						}}
 						checked={Boolean(flowModule.suspend.self_approval_disabled)}
 						disabled={!Boolean(flowModule.suspend.user_auth_required)}
-						on:change={(e) => {
+						onchange={(e) => {
 							if (flowModule.suspend) {
 								flowModule.suspend.self_approval_disabled = e.detail
 							}
@@ -215,7 +215,7 @@
 								noFlowPlugConnect
 								displayContext={false}
 								pickableProperties={undefined}
-								on:select={({ detail }) => {
+								onselect={(detail) => {
 									editor?.insertAtCursor(detail)
 									editor?.focus()
 								}}
@@ -252,7 +252,7 @@
 									'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 							}}
 							lightMode
-							on:change={() => {
+							onchange={() => {
 								if (flowModule.suspend) {
 									flowModule.suspend.resume_form = {
 										schema: emptySchema()
@@ -263,7 +263,7 @@
 						/>
 					</div>
 					<AddProperty
-						on:change={(e) => {
+						onchange={(e) => {
 							jsonView = false
 							if (flowModule.suspend) {
 								flowModule.suspend.resume_form = {
diff --git a/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte b/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte
index 9987d748cd..798582107d 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleTimeout.svelte
@@ -63,7 +63,7 @@
 
 	<Toggle
 		checked={istimeoutEnabled}
-		on:change={() => {
+		onchange={() => {
 			if (istimeoutEnabled && flowModule.timeout != undefined) {
 				flowModule.timeout = undefined
 			} else {
@@ -84,7 +84,7 @@
 					flow_input={stepPropPicker.pickableProperties.flow_input}
 					notSelectable
 					pickableProperties={stepPropPicker.pickableProperties}
-					on:select={({ detail }) => {
+					onselect={(detail) => {
 						editor?.insertAtCursor(detail)
 						editor?.focus()
 					}}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
index 3a2b8b348e..67536a8321 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
@@ -42,7 +42,7 @@
 					{placeholder}
 					{nullTag}
 					bind:tag
-					on:change={(e) => (dispatch('change', e.detail), onchange?.(e.detail))}
+					onchange={(e) => (dispatch('change', e.detail), onchange?.(e.detail))}
 				/>
 			{:else}
 				<button
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
index cb50e8a327..b4e60faa28 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
@@ -144,7 +144,7 @@
 
 		{#if flowModule.value.flow}
 			<FlowInputsFlow
-				on:pick={async ({ detail }) => {
+				onpick={async ({ detail }) => {
 					const { path, summary } = detail
 					const [module, state] = await pickFlow(path, summary, flowModule.id)
 
@@ -160,11 +160,11 @@
 					previousModule !== undefined ||
 					selectedId == 'failure' ||
 					selectedId == 'preprocessor'}
-				on:pick={async ({ detail }) => {
+				onpick={async ({ detail }) => {
 					const { path, summary, kind, hash } = detail
 					createModuleFromScript(path, summary, kind, hash)
 				}}
-				on:new={async ({ detail }) => {
+				onnew={async ({ detail }) => {
 					const { language, kind, subkind, summary } = detail
 
 					const [module, state] = await createInlineScriptModule(
diff --git a/frontend/src/lib/components/flows/content/FlowRetries.svelte b/frontend/src/lib/components/flows/content/FlowRetries.svelte
index 6a59b4fbc7..82a086c05b 100644
--- a/frontend/src/lib/components/flows/content/FlowRetries.svelte
+++ b/frontend/src/lib/components/flows/content/FlowRetries.svelte
@@ -114,7 +114,7 @@
 	<ToggleButtonGroup
 		bind:selected={delayType}
 		class={`${disabled ? 'disabled' : ''}`}
-		on:selected={(e) => {
+		onselected={(e) => {
 			flowModuleRetry = undefined
 			if (e.detail === 'constant') {
 				flowModuleRetry = undefined
@@ -143,7 +143,7 @@
 
 			<Toggle
 				checked={isRetryConditionEnabled}
-				on:change={() => {
+				onchange={() => {
 					if (!flowModuleRetry) {
 						return
 					}
@@ -181,7 +181,7 @@
 								notSelectable
 								pickableProperties={stepPropPicker.pickableProperties}
 								{result}
-								on:select={({ detail }) => {
+								onselect={(detail) => {
 									editor?.insertAtCursor(detail)
 									editor?.focus()
 								}}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 0d8a2ca0e0..c190781f63 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -162,7 +162,7 @@
 							textClass="font-medium"
 							size="xs"
 							checked={displayWorkerTagPicker}
-							on:change={() => {
+							onchange={() => {
 								displayWorkerTagPicker = !displayWorkerTagPicker
 								if (!displayWorkerTagPicker) {
 									flowStore.val.tag = undefined
@@ -208,7 +208,7 @@
 							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.cache_ttl)}
-							on:change={() => {
+							onchange={() => {
 								if (flowStore.val.value.cache_ttl && flowStore.val.value.cache_ttl != undefined) {
 									flowStore.val.value.cache_ttl = undefined
 								} else {
@@ -251,7 +251,7 @@
 							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.skip_expr)}
-							on:change={() => {
+							onchange={() => {
 								if (Boolean(flowStore.val.value.skip_expr) && flowStore.val.value.skip_expr) {
 									flowStore.val.value.skip_expr = undefined
 								} else {
@@ -303,7 +303,7 @@
 							textClass="font-medium"
 							size="xs"
 							checked={Boolean(flowStore.val.value.early_return)}
-							on:change={() => {
+							onchange={() => {
 								if (Boolean(flowStore.val.value.early_return) && flowStore.val.value.early_return) {
 									flowStore.val.value.early_return = undefined
 								} else {
@@ -363,7 +363,7 @@
 					textClass="font-medium"
 					size="xs"
 					checked={Boolean(flowStore.val.visible_to_runner_only)}
-					on:change={() => {
+					onchange={() => {
 						if (flowStore.val.visible_to_runner_only) {
 							flowStore.val.visible_to_runner_only = undefined
 						} else {
@@ -385,7 +385,7 @@
 						textClass="font-medium"
 						size="xs"
 						checked={Boolean(flowStore.val.on_behalf_of_email)}
-						on:change={() => {
+						onchange={() => {
 							if (flowStore.val.on_behalf_of_email) {
 								flowStore.val.on_behalf_of_email = undefined
 								$preserveOnBehalfOf = false
@@ -449,7 +449,7 @@
 							size="xs"
 							disabled={!$enterpriseLicense}
 							checked={Boolean(flowStore.val.value.concurrent_limit)}
-							on:change={() => {
+							onchange={() => {
 								if (flowStore.val.value.concurrent_limit) {
 									flowStore.val.value.concurrent_limit = undefined
 								} else {
@@ -476,7 +476,7 @@
 										<Button
 											size="sm"
 											color="light"
-											on:click={() => {
+											onclick={() => {
 												flowStore.val.value.concurrent_limit = undefined
 											}}
 											variant="border">Remove Limits</Button
@@ -534,7 +534,7 @@
 					size="xs"
 					disabled={!$enterpriseLicense || isCloudHosted()}
 					checked={flowStore.val.value.priority !== undefined && flowStore.val.value.priority > 0}
-					on:change={() => {
+					onchange={() => {
 						if (flowStore.val.value.priority) {
 							flowStore.val.value.priority = undefined
 						} else {
@@ -580,7 +580,7 @@
 						size="xs"
 						disabled={!$enterpriseLicense || isCloudHosted()}
 						checked={Boolean(flowStore.val.dedicated_worker)}
-						on:change={() => {
+						onchange={() => {
 							if (flowStore.val.dedicated_worker) {
 								flowStore.val.dedicated_worker = undefined
 							} else {
diff --git a/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte b/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
index f58ac41cb9..699676b923 100644
--- a/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowWhileLoop.svelte
@@ -55,7 +55,7 @@
 		previewArgs={previewIterationArgs}
 		bind:job
 		bind:jobId
-		on:close={() => {
+		onclose={() => {
 			previewOpen = false
 		}}
 	/>
@@ -121,7 +121,7 @@
 						</div>
 						<Toggle
 							bind:checked={mod.value.squash}
-							on:change={({ detail }) => {
+							onchange={(detail) => {
 								;(mod.value as WhileloopFlow).squash = detail
 							}}
 							options={{
@@ -135,7 +135,7 @@
 				<div class="my-2 flex flex-row gap-2 items-center">
 					<div class="flex w-full justify-end">
 						<Button
-							on:click={() => (previewOpen = true)}
+							onclick={() => (previewOpen = true)}
 							startIcon={{ icon: Play }}
 							variant="accent"
 							size="sm">Test an iteration</Button
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index 067f5de579..f6e5d129cb 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -17,6 +17,13 @@
 	import { fade } from 'svelte/transition'
 	import WorkerTagSelect from '$lib/components/WorkerTagSelect.svelte'
 
+	interface Props {
+		onsave?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	let scriptEditorDrawer: Drawer | undefined = $state()
 
 	const dispatch = createEventDispatcher()
@@ -137,10 +144,10 @@
 	open={unsavedModalOpen}
 	title="Unsaved changes detected"
 	confirmationText="Discard changes"
-	on:canceled={() => {
+	oncanceled={() => {
 		unsavedModalOpen = false
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		console.log('confirmed')
 		closeAnyway = true
 		unsavedModalOpen = false
@@ -153,7 +160,7 @@
 			wrapperClasses="self-start"
 			variant="default"
 			size="xs"
-			on:click={() => {
+			onclick={() => {
 				if (!savedScript || !script) {
 					return
 				}
@@ -184,7 +191,7 @@
 <Drawer
 	bind:this={scriptEditorDrawer}
 	size="1200px"
-	on:close={() => {
+	onclose={() => {
 		checkForUnsavedChanges()
 	}}
 >
@@ -193,7 +200,7 @@
 		noPadding
 		forceOverflowVisible
 		fullScreen
-		on:close={() => {
+		onclose={() => {
 			scriptEditorDrawer?.closeDrawer()
 		}}
 	>
@@ -201,7 +208,7 @@
 			{#key script.hash}
 				<ScriptEditor
 					showCaptures={false}
-					on:saveDraft={() => {
+					onsaveDraft={() => {
 						saveScript()
 					}}
 					noSyncFromGithub
@@ -235,7 +242,7 @@
 			<Button
 				disabled={!savedScript || !script}
 				variant="default"
-				on:click={async () => {
+				onclick={async () => {
 					if (!savedScript || !script) {
 						return
 					}
@@ -263,7 +270,7 @@
 				</div>
 			</Button>
 			<Button
-				on:click={async () => {
+				onclick={async () => {
 					await saveScript()
 					dispatch('save')
 					scriptEditorDrawer?.closeDrawer()
@@ -279,7 +286,7 @@
 
 <DiffDrawer
 	bind:this={diffDrawer}
-	on:close={() => {
+	onclose={() => {
 		displayEditor = true
 	}}
 />
diff --git a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
index ee22349cac..4aefc4025d 100644
--- a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
@@ -18,14 +18,14 @@
 <Button
 	size="xs"
 	variant="default"
-	on:click={() => {
+	onclick={() => {
 		drawer?.openDrawer()
 	}}
 	>{text} <HelpCircle size={12} />
 </Button>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Suspend/Approval/Prompt help" on:close={drawer?.closeDrawer}>
+	<DrawerContent title="Suspend/Approval/Prompt help" onclose={drawer?.closeDrawer}>
 		<div class="flex flex-col gap-y-6 text-xs text-primary font-normal">
 			<Section label="Form/Payload">
 				To add a form, go to the <b>Form</b> tab, inside the Advanced {'->'} Suspend tab, and add a form.
diff --git a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
index b8b382f01f..45c5396520 100644
--- a/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
+++ b/frontend/src/lib/components/flows/header/FlowImportExportMenu.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
+	<DrawerContent title="OpenFlow" onclose={() => drawer?.toggleDrawer()}>
 		{#if flow}
 			<FlowViewer flow={cleanFlow(flow)} initTab="raw" />
 		{/if}
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index fd1790b164..03c7b99fcd 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -146,7 +146,7 @@
 	variant="accent-secondary"
 	wrapperClasses="whitespace-nowrap"
 	unifiedSize="md"
-	on:click={() => {
+	onclick={() => {
 		previewMode = 'whole'
 		previewOpen = !previewOpen
 		if (previewOpen) {
@@ -180,13 +180,13 @@
 			bind:branchOrIterationN
 			bind:rightColumnSelect
 			bind:localModuleStates
-			on:close={() => {
+			onclose={() => {
 				// keep the data in the preview content
 				deferContent = true
 				previewOpen = false
 				flowPreviewContent?.setRecordingMode(false)
 			}}
-			on:openTriggers={(e) => {
+			onopenTriggers={(e) => {
 				previewOpen = false
 				dispatch('openTriggers', e.detail)
 				onopenTriggers?.(e.detail)
diff --git a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
index b0504a8055..6736597578 100644
--- a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
+++ b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
@@ -66,11 +66,11 @@
 	let editorHeight = $state(0)
 </script>
 
-<Drawer on:open={reload} bind:this={drawer} size="800px">
-	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
+<Drawer onopen={reload} bind:this={drawer} size="800px">
+	<DrawerContent title="OpenFlow" onclose={() => drawer?.toggleDrawer()}>
 		{#snippet actions()}
-			<Button variant="default" unifiedSize="md" disabled={!hasChanges} on:click={reload}>Reset code</Button>
-			<Button variant="accent" unifiedSize="md" disabled={!hasChanges} on:click={apply}>Apply changes</Button>
+			<Button variant="default" unifiedSize="md" disabled={!hasChanges} onclick={reload}>Reset code</Button>
+			<Button variant="accent" unifiedSize="md" disabled={!hasChanges} onclick={apply}>Apply changes</Button>
 		{/snippet}
 
 		{#if flowStore.val}
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index bc40142cdd..10b4c609c9 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -120,10 +120,10 @@
 	<InsertModulePopover
 		{disableAi}
 		placement={'bottom'}
-		on:new={(e) => {
+		onnew={(e) => {
 			insertFailureModule(e.detail.inlineScript)
 		}}
-		on:pickScript={(e) => {
+		onpickScript={(e) => {
 			insertFailureModule(undefined, e.detail)
 		}}
 		kind="failure"
diff --git a/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte b/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte
index c9a2b62bcb..6b88ce6835 100644
--- a/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte
+++ b/frontend/src/lib/components/flows/map/FlowGraphPreviewButton.svelte
@@ -49,7 +49,7 @@
 			'max-[1760px]:mt-[1.5px]' // Magic number comes from app.css (when :root fontSize becomes bigger)
 		)}
 		style="height: {NODE.height}px;"
-		on:click={() => {
+		onclick={() => {
 			onTestFlow?.()
 		}}
 	>
@@ -117,7 +117,7 @@
 		color="red"
 		variant="contained"
 		btnClasses="h-[34px] w-[120px] p-1.5"
-		on:click={async () => {
+		onclick={async () => {
 			onCancelTestFlow?.()
 		}}
 	>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index efd4f892db..73d3ac1327 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -93,6 +93,7 @@
 		onpointerdown?: (...args: any[]) => any
 		onmove?: (...args: any[]) => any
 		ondelete?: (...args: any[]) => any
+		ontoggleMock?: (...args: any[]) => any
 	}
 
 	let {
@@ -213,7 +214,7 @@
 		flowStore?.val?.value.failure_module
 	)}
 	<Drawer bind:open={editId}>
-		<DrawerContent title="Edit Step Id {id}" on:close={() => (editId = false)}>
+		<DrawerContent title="Edit Step Id {id}" onclose={() => (editId = false)}>
 			<div>
 				<IdEditorInput
 					buttonText="Edit Id "
@@ -587,7 +588,7 @@
 							title="Run"
 							variant="default"
 							btnClasses="px-1 py-1.5 bg-surface"
-							on:click={() => {
+							onclick={() => {
 								outputPicker?.toggleOpen(true)
 								moduleTest?.loadArgsAndRunTest()
 							}}
@@ -616,7 +617,7 @@
 							color="red"
 							variant="contained"
 							btnClasses="!h-[25.5px] !w-[36px] !p-1.5 gap-0.5"
-							on:click={async () => {
+							onclick={async () => {
 								moduleTest?.cancelJob()
 							}}
 						>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index f080598066..251be0156e 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -82,6 +82,7 @@
 		flowHasChanged?: boolean
 		ongenerateStep?: (...args: any[]) => any
 		onchange?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
 	let {
@@ -113,7 +114,8 @@
 		onDelete,
 		flowHasChanged,
 		ongenerateStep = undefined,
-		onchange = undefined
+		onchange = undefined,
+		onreload = undefined
 	}: Props = $props()
 
 	const { customUi, selectionManager, moving, history, flowStateStore, flowStore, pathStore } =
@@ -392,13 +394,13 @@
 		title="Confirm deleting step with dependents"
 		confirmationText="Delete step"
 		open={Boolean(deleteCallback)}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			if (deleteCallback) {
 				deleteCallback()
 				deleteCallback = undefined
 			}
 		}}
-		on:canceled={() => {
+		oncanceled={() => {
 			deleteCallback = undefined
 		}}
 	>
@@ -427,7 +429,7 @@
 			{disableSettings}
 			{disableStaticInputs}
 			{smallErrorHandler}
-			on:generateStep
+			ongenerateStep={ongenerateStep}
 			{aiChatOpen}
 			{toggleAiChat}
 			{noteMode}
@@ -700,5 +702,5 @@
 </div>
 
 {#if !disableTutorials}
-	<FlowTutorials on:reload />
+	<FlowTutorials onreload={onreload} />
 {/if}
diff --git a/frontend/src/lib/components/flows/map/FlowStickyNode.svelte b/frontend/src/lib/components/flows/map/FlowStickyNode.svelte
index 804d4917cb..6ad55d31b9 100644
--- a/frontend/src/lib/components/flows/map/FlowStickyNode.svelte
+++ b/frontend/src/lib/components/flows/map/FlowStickyNode.svelte
@@ -21,6 +21,7 @@
 		toggleNoteMode?: () => void
 		disableAi?: boolean
 		diffManager?: FlowDiffManager
+		ongenerateStep?: (...args: any[]) => any
 	}
 
 	let {
@@ -33,7 +34,8 @@
 		noteMode,
 		toggleNoteMode,
 		disableAi,
-		diffManager
+		diffManager,
+		ongenerateStep = undefined
 	}: Props = $props()
 
 	const { selectionManager, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -58,7 +60,7 @@
 		</Button>
 	{/if}
 	<Popover>
-		<FlowErrorHandlerItem {disableAi} small={smallErrorHandler} {diffManager} on:generateStep />
+		<FlowErrorHandlerItem {disableAi} small={smallErrorHandler} {diffManager} ongenerateStep={ongenerateStep} />
 		{#snippet text()}
 			Error Handler
 		{/snippet}
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
index 6bfa37cbb2..bf82f3e83a 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
@@ -24,6 +24,9 @@
 		onpickWebsearchTool?: (...args: any[]) => any
 		onpickAiAgentTool?: (...args: any[]) => any
 		onnew?: (...args: any[]) => any
+		oninsert?: (...args: any[]) => any
+		onpickScript?: (...args: any[]) => any
+		onpickFlow?: (...args: any[]) => any
 	}
 
 	let {
@@ -37,7 +40,10 @@
 		onpickMcpTool = undefined,
 		onpickWebsearchTool = undefined,
 		onpickAiAgentTool = undefined,
-		onnew = undefined
+		onnew = undefined,
+		oninsert = undefined,
+		onpickScript = undefined,
+		onpickFlow = undefined
 	}: Props = $props()
 
 	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
@@ -67,9 +73,9 @@
 >
 	<div class="flex flex-row items-center gap-2">
 		<StepGenQuick
-			on:escape={() => (dispatch('close'), onclose?.())}
+			onescape={() => (dispatch('close'), onclose?.())}
 			{disableAi}
-			on:insert
+			oninsert={oninsert}
 			bind:funcDesc
 			{preFilter}
 			{loading}
@@ -219,13 +225,13 @@
 			{funcDesc}
 			{kind}
 			bind:owners
-			on:close={() => {
+			onclose={() => {
 				dispatch('close')
 				onclose?.()
 			}}
-			on:new
-			on:pickScript
-			on:pickFlow
+			onnew={onnew}
+			onpickScript={onpickScript}
+			onpickFlow={onpickFlow}
 			{preFilter}
 			{displayPath}
 			refreshCount={refreshCount.val}
diff --git a/frontend/src/lib/components/flows/map/InsertModulePopover.svelte b/frontend/src/lib/components/flows/map/InsertModulePopover.svelte
index fa626f42ab..bf4d81f72f 100644
--- a/frontend/src/lib/components/flows/map/InsertModulePopover.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModulePopover.svelte
@@ -12,6 +12,10 @@
 		disableAi?: boolean
 		trigger: import('svelte').Snippet
 		gutter?: number
+		oninsert?: (...args: any[]) => any
+		onnew?: (...args: any[]) => any
+		onpickFlow?: (...args: any[]) => any
+		onpickScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -20,7 +24,11 @@
 		disableAi = false,
 		trigger: triggerSnippet,
 		allowTrigger = false,
-		gutter = 0
+		gutter = 0,
+		oninsert = undefined,
+		onnew = undefined,
+		onpickFlow = undefined,
+		onpickScript = undefined
 	}: Props = $props()
 
 	let popover: Popover
@@ -51,11 +59,11 @@
 	{/snippet}
 	{#snippet content({ close })}
 		<InsertModuleInner
-			on:close={() => close()}
-			on:insert
-			on:new
-			on:pickFlow
-			on:pickScript
+			onclose={() => close()}
+			oninsert={oninsert}
+			onnew={onnew}
+			onpickFlow={onpickFlow}
+			onpickScript={onpickScript}
 			{allowTrigger}
 			{kind}
 			{disableAi}
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index bf966cb287..118d5c99af 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -49,6 +49,9 @@
 		isOwner?: boolean
 		maximizeSubflow?: () => void
 		onmove?: (...args: any[]) => any
+		onchangeId?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
+		onnewBranch?: (...args: any[]) => any
 	}
 
 	let {
@@ -71,7 +74,9 @@
 		flowJob,
 		isOwner = false,
 		maximizeSubflow,
-		onmove = undefined
+		onmove = undefined,
+		onchangeId = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	const { selectionManager } = getGraphContext()
@@ -116,7 +121,7 @@
 			<div class="absolute z-10 right-20 top-0.5 center-center">
 				<Button
 					variant="accent"
-					on:click={() => (dispatch('move'), onmove?.())}
+					onclick={() => (dispatch('move'), onmove?.())}
 					size="xs"
 					destructive>Cancel move</Button
 				>
@@ -169,10 +174,10 @@
 						mod.value.skip_failures ? '(skip failures)' : ''
 					} ${mod.value.squash ? '(squash)' : ''}`}
 					id={mod.id}
-					on:changeId
-					on:move
-					on:delete
-					on:pointerdown={handlePointerDown}
+					onchangeId={onchangeId}
+					onmove={onmove}
+					ondelete={ondelete}
+					onpointerdown={handlePointerDown}
 					onUpdateMock={(mock) => {
 						mod.mock = mock
 						onUpdateMock?.({ id: mod.id, mock })
@@ -197,10 +202,10 @@
 					deletable={insertable}
 					{editMode}
 					{moduleAction}
-					on:changeId
-					on:delete
-					on:move
-					on:pointerdown={handlePointerDown}
+					onchangeId={onchangeId}
+					ondelete={ondelete}
+					onmove={onmove}
+					onpointerdown={handlePointerDown}
 					{...itemProps}
 					id={mod.id}
 					label={mod.summary || 'Run one branch'}
@@ -216,10 +221,10 @@
 					deletable={insertable}
 					{editMode}
 					{moduleAction}
-					on:changeId
-					on:delete
-					on:move
-					on:pointerdown={handlePointerDown}
+					onchangeId={onchangeId}
+					ondelete={ondelete}
+					onmove={onmove}
+					onpointerdown={handlePointerDown}
 					id={mod.id}
 					{...itemProps}
 					label={mod.summary || `Run all branches${mod.value.parallel ? ' (parallel)' : ''}`}
@@ -235,10 +240,10 @@
 					{retries}
 					{editMode}
 					{moduleAction}
-					on:changeId
-					on:pointerdown={handlePointerDown}
-					on:delete
-					on:move
+					onchangeId={onchangeId}
+					onpointerdown={handlePointerDown}
+					ondelete={ondelete}
+					onmove={onmove}
 					onUpdateMock={(mock) => {
 						console.log('onUpdateMock', mock)
 
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 43f3cd70af..3dcd45241f 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -38,6 +38,8 @@
 		job?: Job
 		showJobStatus?: boolean
 		flowHasChanged?: boolean
+		onselect?: (...args: any[]) => any
+		oninsert?: (...args: any[]) => any
 	}
 
 	let {
@@ -66,7 +68,8 @@
 		individualStepTests = false,
 		job,
 		showJobStatus = false,
-		flowHasChanged = false
+		flowHasChanged = false,
+		onselect = undefined
 	}: Props = $props()
 
 	const outputPickerVisible = $derived(
@@ -97,7 +100,7 @@
 	{id}
 	outputPickerVisible={outputPickerVisible ?? false}
 	{colorClasses}
-	on:select
+	onselect={onselect}
 >
 	{#snippet children({ hover })}
 		<div class="flex flex-col w-full">
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index ba8332aa72..9fa38cc3e7 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -10,9 +10,11 @@
 		label: string
 		lang?: SupportedLanguage | 'docker' | 'javascript' | undefined
 		id?: string | undefined
+		onclick?: (...args: any[]) => any
 	}
 
-	let { disabled = false, label, lang = undefined, id = undefined }: Props = $props()
+	let { disabled = false, label, lang = undefined, id = undefined,
+		onclick = undefined }: Props = $props()
 
 	const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb']
 </script>
@@ -20,7 +22,7 @@
 <Popover disablePopup={!enterpriseLangs.includes(lang || '') || !!$enterpriseLicense}>
 	<Button
 		btnClasses="w-32 truncate"
-		on:click
+		onclick={onclick}
 		size="sm"
 		spacingSize="md"
 		variant="default"
diff --git a/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte b/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
index c1662a8f80..fc639bafaa 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
@@ -435,7 +435,7 @@
 							)}
 							startIcon={{ icon: Pin }}
 							iconOnly={mockUpdateStatus !== 'override'}
-							on:click={() => togglePin()}
+							onclick={() => togglePin()}
 						>
 							{#if mockUpdateStatus === 'override'}
 								Override pin
@@ -455,7 +455,7 @@
 						variant="contained"
 						startIcon={{ icon: Check }}
 						btnClasses="h-[27px]"
-						on:click={() => {
+						onclick={() => {
 							if (!tmpMock) {
 								return
 							}
@@ -476,7 +476,7 @@
 						variant="contained"
 						startIcon={{ icon: X }}
 						btnClasses="h-[27px]"
-						on:click={() => {
+						onclick={() => {
 							jsonView = false
 							tmpMock = undefined
 						}}
@@ -489,7 +489,7 @@
 							color="light"
 							variant="contained"
 							startIcon={{ icon: Pen }}
-							on:click={() => {
+							onclick={() => {
 								stepHistoryPopover?.close()
 								jsonView = true
 								tmpMock = undefined
@@ -517,7 +517,7 @@
 						{base}
 						result={selectedJob.result}
 						disableTooltips={false}
-						on:open-drawer={() => {
+						onopenDrawer={() => {
 							if (displayResultJob && typeof displayResultJob.openDrawer === 'function') {
 								displayResultJob.openDrawer()
 							}
@@ -529,7 +529,7 @@
 						{base}
 						result={mock.return_value}
 						disableTooltips={false}
-						on:open-drawer={() => {
+						onopenDrawer={() => {
 							if (displayResultMock && typeof displayResultMock.openDrawer === 'function') {
 								displayResultMock.openDrawer()
 							}
@@ -603,7 +603,7 @@
 					topBrackets={false}
 					pureViewer={false}
 					{prefix}
-					on:select={(e) => {
+					onselect={(e) => {
 						onSelect?.(e.detail)
 					}}
 					{allowCopy}
@@ -617,7 +617,7 @@
 					<Module.default
 						bind:error
 						small
-						on:changeValue={({ detail }) => {
+						onchangeValue={(detail) => {
 							if (mock?.enabled) {
 								const newMock = {
 									enabled: true,
@@ -646,7 +646,7 @@
 							result={mock?.return_value}
 							externalToolbarAvailable
 							fixTableSizingToParent
-							on:toolbar-location-changed={({ detail }) => {
+							ontoolbarLocationChanged={(detail) => {
 								toolbarLocationMock = detail
 							}}
 						/>
@@ -675,7 +675,7 @@
 								result_stream={selectedJob?.result_stream}
 								externalToolbarAvailable
 								fixTableSizingToParent
-								on:toolbar-location-changed={({ detail }) => {
+								ontoolbarLocationChanged={(detail) => {
 									toolbarLocationJob = detail
 								}}
 							>
@@ -764,7 +764,7 @@
 				<StepHistory
 					{moduleId}
 					{getLogs}
-					on:select={selectJobFromHistory}
+					onselect={selectJobFromHistory}
 					mockValue={mock?.return_value}
 					mockEnabled={mock?.enabled}
 					{path}
diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
index e2d7f04650..09de69e56d 100644
--- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
+++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -145,7 +145,7 @@
 							{extraResults}
 							{flow_input}
 							allowCopy={!notSelectable && !$propPickerConfig}
-							on:select={({ detail }) => {
+							onselect={(detail) => {
 								dispatch('select', detail)
 								onselect?.(detail)
 								if ($propPickerConfig?.onSelect(detail)) {
@@ -163,7 +163,7 @@
 							previousId={pickableProperties?.previousId}
 							{pickableProperties}
 							allowCopy={!notSelectable && !$propPickerConfig}
-							on:select={({ detail }) => {
+							onselect={(detail) => {
 								// console.log('selecting', detail)
 								dispatch('select', detail)
 								onselect?.(detail)
diff --git a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
index 09cb089883..e81eb76ddd 100644
--- a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
+++ b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
@@ -27,6 +27,7 @@
 		staticInputs?: undefined | StepHistoryData[]
 		noHistory?: 'isLoop' | 'isInsideLoop' | undefined
 		onselect?: (...args: any[]) => any
+		onerror?: (...args: any[]) => any
 	}
 
 	let {
@@ -38,7 +39,8 @@
 		path = '',
 		staticInputs = undefined,
 		noHistory = undefined,
-		onselect = undefined
+		onselect = undefined,
+		onerror = undefined
 	}: Props = $props()
 
 	const { pathStore } = getContext<FlowEditorContext>('FlowEditorContext') ?? {}
@@ -125,8 +127,8 @@
 <InfiniteList
 	bind:this={infiniteList}
 	selectedItemId={selected}
-	on:error
-	on:select={handleSelect}
+	onerror={onerror}
+	onselect={handleSelect}
 	rounded={false}
 	noBorder
 	extraRowClasses={{
diff --git a/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte b/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte
index 6708f873cb..af36f54436 100644
--- a/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte
+++ b/frontend/src/lib/components/git_sync/GitSyncRepositoryCard.svelte
@@ -535,7 +535,7 @@
 					<Section label="Advanced" small collapsable initiallyCollapsed={!repo.force_branch}>
 						<Toggle
 							checked={!!repo.force_branch}
-							on:change={(e) => {
+							onchange={(e) => {
 								if (e.detail) {
 									repo.force_branch = $workspaceStore ?? ''
 								} else {
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 89b9940edd..c3b764f67a 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -905,7 +905,7 @@
 					color="red"
 					size="xs"
 					btnClasses="mt-2 w-min"
-					on:click={() => yamlEditorDrawer?.openDrawer()}>Open YAML editor</Button
+					onclick={() => yamlEditorDrawer?.openDrawer()}>Open YAML editor</Button
 				>
 			</Alert>
 		</div>
diff --git a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
index 0818e3725c..380066c3b6 100644
--- a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
+++ b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
@@ -128,7 +128,7 @@
 			<InsertModulePopover
 				disableAi={data.disableAi}
 				allowTrigger={data.index == 0}
-				on:new={(e) => {
+				onnew={(e) => {
 					data?.eventHandlers.insert({
 						sourceId: data.sourceId,
 						targetId: data.targetId,
@@ -138,7 +138,7 @@
 						inlineScript: e.detail.inlineScript
 					})
 				}}
-				on:pickScript={(e) => {
+				onpickScript={(e) => {
 					// console.log('pickScript', e)
 					data?.eventHandlers.insert({
 						sourceId: data.sourceId,
@@ -149,7 +149,7 @@
 						kind: e.detail.kind
 					})
 				}}
-				on:pickFlow={(e) => {
+				onpickFlow={(e) => {
 					// console.log('pickFlow', e)
 					data?.eventHandlers.insert({
 						sourceId: data.sourceId,
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
index 7ea1765b26..2a1b1535ba 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllEndNode.svelte
@@ -20,7 +20,7 @@
 			id={data.id}
 			selectable={true}
 			selected={selectionManager && selectionManager.isNodeSelected(id)}
-			on:select={(e) => {
+			onselect={(e) => {
 				data?.eventHandlers?.select(e.detail)
 			}}
 		/>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
index 5f49e62c9f..4fa539007c 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
@@ -22,10 +22,10 @@
 			label={data.label}
 			selectable
 			selected={selectionManager && selectionManager.isNodeSelected(id)}
-			on:select={() => {
+			onselect={() => {
 				setTimeout(() => data.eventHandlers.select(data.id))
 			}}
-			on:insert={(e) => {
+			oninsert={(e) => {
 				setTimeout(() => data.eventHandlers.insert(e.detail))
 			}}
 		/>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
index 73c5a02b9f..c8f3da2991 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
@@ -22,7 +22,7 @@
 			preLabel={data.preLabel}
 			selectable
 			selected={selectionManager && selectionManager.isNodeSelected(id)}
-			on:select={() => {
+			onselect={() => {
 				setTimeout(() => data?.eventHandlers?.select(data.id))
 			}}
 		/>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
index aff1c36a65..76b4974176 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
@@ -22,7 +22,7 @@
 				selected={false}
 				id={data.id}
 				hideId
-				on:select={(e) => {
+				onselect={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}
 			/>
@@ -32,7 +32,7 @@
 				selectable={true}
 				selected={selectionManager && selectionManager.isNodeSelected(id)}
 				id={data.id}
-				on:select={(e) => {
+				onselect={(e) => {
 					setTimeout(() => data?.eventHandlers?.select(e.detail))
 				}}
 			/>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
index 592c459747..39ccb1c52a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
@@ -64,7 +64,7 @@
 			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			id={data.id}
 			hideId
-			on:select={(e) => {
+			onselect={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 			inputJson={filteredInput}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
index 195f920d03..32f695cc01 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
@@ -49,7 +49,7 @@
 					disableAi={data.disableAi}
 					allowTrigger
 					kind="preprocessor"
-					on:new={(e) => {
+					onnew={(e) => {
 						data?.eventHandlers.insert({
 							index: 0,
 							kind: e.detail.kind,
@@ -57,7 +57,7 @@
 							isPreprocessor: true
 						})
 					}}
-					on:pickScript={(e) => {
+					onpickScript={(e) => {
 						data?.eventHandlers.insert({
 							index: 0,
 							kind: e.detail.kind,
@@ -82,10 +82,10 @@
 			label={inputLabel}
 			selectable
 			selected={selectionManager?.isNodeSelected('Input')}
-			on:insert={(e) => {
+			oninsert={(e) => {
 				setTimeout(() => data?.eventHandlers?.insert(e.detail))
 			}}
-			on:select={(e) => {
+			onselect={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 			inputJson={topFlowInput}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index b90b49364f..880ca11a5a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -70,16 +70,16 @@
 			duration_ms={state?.duration_ms}
 			retries={state?.retries}
 			{flowJobs}
-			on:delete={(e) => {
+			ondelete={(e) => {
 				data.eventHandlers.delete(e.detail, '')
 			}}
-			on:changeId={(e) => {
+			onchangeId={(e) => {
 				data.eventHandlers.changeId(e.detail)
 			}}
-			on:move={(e) => {
+			onmove={(e) => {
 				data.eventHandlers.move({ id: data.id })
 			}}
-			on:newBranch={(e) => {
+			onnewBranch={(e) => {
 				data.eventHandlers.newBranch(data.id)
 			}}
 			onSelect={(e) => {
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
index c62065bba6..d815a662fe 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NewAIToolNode.svelte
@@ -50,10 +50,10 @@
 		<InsertModuleInner
 			bind:funcDesc
 			toolMode
-			on:close={() => {
+			onclose={() => {
 				close()
 			}}
-			on:new={(e) => {
+			onnew={(e) => {
 				data.eventHandlers.insert({
 					index: -1, // ignored when agentId is set
 					agentId: data.agentModuleId,
@@ -61,7 +61,7 @@
 				})
 				close()
 			}}
-			on:insert={(e) => {
+			oninsert={(e) => {
 				data.eventHandlers.insert({
 					index: -1, // ignored when agentId is set
 					agentId: data.agentModuleId,
@@ -69,7 +69,7 @@
 				})
 				close()
 			}}
-			on:pickScript={(e) => {
+			onpickScript={(e) => {
 				data.eventHandlers.insert({
 					index: -1, // ignored when agentId is set
 					agentId: data.agentModuleId,
@@ -83,7 +83,7 @@
 				})
 				close()
 			}}
-			on:pickMcpTool={(e) => {
+			onpickMcpTool={(e) => {
 				data.eventHandlers.insert({
 					index: -1,
 					agentId: data.agentModuleId,
@@ -91,7 +91,7 @@
 				})
 				close()
 			}}
-			on:pickWebsearchTool={(e) => {
+			onpickWebsearchTool={(e) => {
 				data.eventHandlers.insert({
 					index: -1,
 					agentId: data.agentModuleId,
@@ -99,7 +99,7 @@
 				})
 				close()
 			}}
-			on:pickAiAgentTool={(e) => {
+			onpickAiAgentTool={(e) => {
 				data.eventHandlers.insert({
 					index: -1,
 					agentId: data.agentModuleId,
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
index 356e1c272a..22d96eaa6d 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
@@ -17,7 +17,7 @@
 			hideId={true}
 			selectable={true}
 			selected={false}
-			on:select={(e) => {
+			onselect={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 		/>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
index 13ede87991..c4e19ae1f8 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
@@ -22,7 +22,7 @@
 			selectable={true}
 			selected={selectionManager && selectionManager.isNodeSelected(id)}
 			hideId={true}
-			on:select={(e) => {
+			onselect={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 			nodeKind="result"
diff --git a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
index 7e5438dda0..798134846b 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
@@ -24,7 +24,7 @@
 			preLabel={data.preLabel}
 			selectable
 			selected={selectionManager && selectionManager.isNodeSelected(id)}
-			on:select={() => {
+			onselect={() => {
 				setTimeout(() => data.eventHandlers?.select(data.id))
 			}}
 		/>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
index 58f95d4b33..62bf256e8a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
@@ -62,7 +62,7 @@
 				path={data.path}
 				showDraft={data.isEditor ?? false}
 				{colorClasses}
-				on:new={(e) => {
+				onnew={(e) => {
 					data?.eventHandlers.insert({
 						index: 0,
 						kind: 'trigger',
@@ -70,7 +70,7 @@
 					})
 					data?.eventHandlers?.simplifyFlow(true)
 				}}
-				on:pickScript={(e) => {
+				onpickScript={(e) => {
 					data?.eventHandlers.insert({
 						index: 0,
 						kind: 'trigger',
@@ -78,11 +78,11 @@
 					})
 					data?.eventHandlers?.simplifyFlow(true)
 				}}
-				on:openScheduledPoll={(e) => {
+				onopenScheduledPoll={(e) => {
 					const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary && !t.isDraft)
 					triggersState.selectedTriggerIndex = primarySchedule
 				}}
-				on:select={() => data?.eventHandlers?.select('Trigger')}
+				onselect={() => data?.eventHandlers?.select('Trigger')}
 				onSelect={async (triggerIndex: number) => {
 					data?.eventHandlers?.select('Trigger')
 					await tick()
@@ -102,7 +102,7 @@
 				label="Check for new events"
 				selectable={true}
 				id={'Trigger'}
-				on:select={(e) => {
+				onselect={(e) => {
 					data?.eventHandlers?.select(e.detail)
 				}}
 				{colorClasses}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
index fca971ec92..a5cf990b15 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte
@@ -20,7 +20,7 @@
 			id={data.id}
 			selectable={true}
 			selected={selectionManager?.isNodeSelected(id)}
-			on:select={(e) => {
+			onselect={(e) => {
 				setTimeout(() => data?.eventHandlers?.select(e.detail))
 			}}
 		/>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index ba2bdbec43..037770e850 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -23,6 +23,8 @@
 		onAddDraftTrigger?: (type: TriggerType) => void
 		onnew?: (...args: any[]) => any
 		onpickScript?: (...args: any[]) => any
+		onopenScheduledPoll?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -111,12 +113,12 @@
 		>
 			<InsertModuleInner
 				{disableAi}
-				on:new={(e) => {
+				onnew={(e) => {
 					showTriggerScriptPicker = false
 					dispatch('new', e.detail)
 					onnew?.(e.detail)
 				}}
-				on:pickScript={(e) => {
+				onpickScript={(e) => {
 					showTriggerScriptPicker = false
 					dispatch('pickScript', e.detail)
 					onpickScript?.(e.detail)
diff --git a/frontend/src/lib/components/home/Item.svelte b/frontend/src/lib/components/home/Item.svelte
index aba0974bbd..0305fbe751 100644
--- a/frontend/src/lib/components/home/Item.svelte
+++ b/frontend/src/lib/components/home/Item.svelte
@@ -28,6 +28,7 @@
 		onflowChanged?: (...args: any[]) => any
 		onappChanged?: (...args: any[]) => any
 		onreload?: (...args: any[]) => any
+		onrawAppChanged?: (...args: any[]) => any
 	}
 
 	let {
@@ -46,7 +47,7 @@
 	<ScriptRow
 		bind:deleteConfirmedCallback
 		marked={item.marked}
-		on:change={() => (dispatch('scriptChanged'), onscriptChanged?.())}
+		onchange={() => (dispatch('scriptChanged'), onscriptChanged?.())}
 		script={item}
 		errorHandlerMuted={item.ws_error_handler_muted === undefined ||
 		item.ws_error_handler_muted === null
@@ -64,7 +65,7 @@
 	<FlowRow
 		bind:deleteConfirmedCallback
 		marked={item.marked}
-		on:change={() => (dispatch('flowChanged'), onflowChanged?.())}
+		onchange={() => (dispatch('flowChanged'), onflowChanged?.())}
 		flow={item}
 		errorHandlerMuted={item.ws_error_handler_muted === undefined ||
 		item.ws_error_handler_muted === null
@@ -81,7 +82,7 @@
 	<AppRow
 		bind:deleteConfirmedCallback
 		marked={item.marked}
-		on:change={() => (dispatch('appChanged'), onappChanged?.())}
+		onchange={() => (dispatch('appChanged'), onappChanged?.())}
 		app={item}
 		{moveDrawer}
 		{shareModal}
@@ -106,10 +107,10 @@
 		open={Boolean(deleteConfirmedCallback)}
 		title="Remove"
 		confirmationText="Remove"
-		on:canceled={() => {
+		oncanceled={() => {
 			deleteConfirmedCallback = undefined
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			if (deleteConfirmedCallback) {
 				deleteConfirmedCallback()
 			}
@@ -134,7 +135,7 @@
 
 	<ShareModal
 		bind:this={shareModal}
-		on:change={() => {
+		onchange={() => {
 			dispatch('reload')
 			onreload?.()
 		}}
@@ -143,7 +144,7 @@
 	<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 	<MoveDrawer
 		bind:this={moveDrawer}
-		on:update={() => {
+		onupdate={() => {
 			dispatch('reload')
 			onreload?.()
 		}}
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index a2284dbf6d..2d56442038 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -336,14 +336,14 @@
 
 <Drawer
 	bind:this={viewCodeDrawer}
-	on:close={() => {
+	onclose={() => {
 		setTimeout(() => {
 			viewCodeTitle = undefined
 			script = undefined
 		}, 300)
 	}}
 >
-	<DrawerContent title={viewCodeTitle} on:close={viewCodeDrawer.closeDrawer}>
+	<DrawerContent title={viewCodeTitle} onclose={viewCodeDrawer.closeDrawer}>
 		{#if script}
 			<HighlightCode language={script?.language} code={script?.content} />
 		{:else}
@@ -363,7 +363,7 @@
 		<div class="flex justify-start">
 			<ToggleButtonGroup
 				bind:selected={itemKind}
-				onSelected={(v) => {
+				onselected={(v) => {
 					if (itemKind != 'all') {
 						subtab = v
 					}
@@ -429,7 +429,7 @@
 			</button>
 		</div>
 		<Button
-			on:click={() => openSearchWithPrefilledText('#')}
+			onclick={() => openSearchWithPrefilledText('#')}
 			variant="default"
 			unifiedSize="md"
 			endIcon={{
@@ -495,7 +495,7 @@
 					<Button
 						unifiedSize="sm"
 						variant="subtle"
-						on:click={() => (collapseAll = !collapseAll)}
+						onclick={() => (collapseAll = !collapseAll)}
 						startIcon={{
 							icon: collapseAll ? ChevronsUpDown : ChevronsDownUp
 						}}
@@ -525,11 +525,11 @@
 				{nbDisplayed}
 				{collapseAll}
 				isSearching={filter !== ''}
-				on:scriptChanged={() => loadScripts(includeWithoutMain)}
-				on:flowChanged={loadFlows}
-				on:appChanged={loadApps}
-				on:rawAppChanged={loadRawApps}
-				on:reload={() => {
+				onscriptChanged={() => loadScripts(includeWithoutMain)}
+				onflowChanged={loadFlows}
+				onappChanged={loadApps}
+				onrawAppChanged={loadRawApps}
+				onreload={() => {
 					loadScripts(includeWithoutMain)
 					loadFlows()
 					loadApps()
@@ -542,11 +542,11 @@
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
 					<Item
 						{item}
-						on:scriptChanged={() => loadScripts(includeWithoutMain)}
-						on:flowChanged={loadFlows}
-						on:appChanged={loadApps}
-						on:rawAppChanged={loadRawApps}
-						on:reload={() => {
+						onscriptChanged={() => loadScripts(includeWithoutMain)}
+						onflowChanged={loadFlows}
+						onappChanged={loadApps}
+						onrawAppChanged={loadRawApps}
+						onreload={() => {
 							loadScripts(includeWithoutMain)
 							loadFlows()
 							loadApps()
diff --git a/frontend/src/lib/components/home/TreeView.svelte b/frontend/src/lib/components/home/TreeView.svelte
index 93081cae5d..17e0598a28 100644
--- a/frontend/src/lib/components/home/TreeView.svelte
+++ b/frontend/src/lib/components/home/TreeView.svelte
@@ -13,9 +13,19 @@
 		depth?: number
 		showCode: (path: string, summary: string) => void
 		isSearching?: boolean
+		onscriptChanged?: (...args: any[]) => any
+		onflowChanged?: (...args: any[]) => any
+		onappChanged?: (...args: any[]) => any
+		onrawAppChanged?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
-	let { item, collapseAll, depth = 0, showCode, isSearching = false }: Props = $props()
+	let { item, collapseAll, depth = 0, showCode, isSearching = false,
+		onscriptChanged = undefined,
+		onflowChanged = undefined,
+		onappChanged = undefined,
+		onrawAppChanged = undefined,
+		onreload = undefined }: Props = $props()
 
 	const isFolder = (i: typeof item): i is FolderItem => i && 'folderName' in i
 	const isUser = (i: typeof item): i is UserItem => i && 'username' in i
@@ -72,11 +82,11 @@
 						{isSearching}
 						{collapseAll}
 						item={subItem}
-						on:scriptChanged
-						on:flowChanged
-						on:appChanged
-						on:rawAppChanged
-						on:reload
+						onscriptChanged={onscriptChanged}
+						onflowChanged={onflowChanged}
+						onappChanged={onappChanged}
+						onrawAppChanged={onrawAppChanged}
+						onreload={onreload}
 						{showCode}
 						depth={depth + 1}
 					/>
@@ -138,11 +148,11 @@
 					<TreeView
 						{collapseAll}
 						item={subItem}
-						on:scriptChanged
-						on:flowChanged
-						on:appChanged
-						on:rawAppChanged
-						on:reload
+						onscriptChanged={onscriptChanged}
+						onflowChanged={onflowChanged}
+						onappChanged={onappChanged}
+						onrawAppChanged={onrawAppChanged}
+						onreload={onreload}
 						{showCode}
 						depth={depth + 1}
 					/>
@@ -168,11 +178,11 @@
 	<Item
 		{item}
 		{showCode}
-		on:scriptChanged
-		on:flowChanged
-		on:appChanged
-		on:rawAppChanged
-		on:reload
+		onscriptChanged={onscriptChanged}
+		onflowChanged={onflowChanged}
+		onappChanged={onappChanged}
+		onrawAppChanged={onrawAppChanged}
+		onreload={onreload}
 		{depth}
 	/>
 {/if}
diff --git a/frontend/src/lib/components/home/TreeViewRoot.svelte b/frontend/src/lib/components/home/TreeViewRoot.svelte
index efe8279a87..393bca4a3d 100644
--- a/frontend/src/lib/components/home/TreeViewRoot.svelte
+++ b/frontend/src/lib/components/home/TreeViewRoot.svelte
@@ -9,6 +9,11 @@
 		nbDisplayed: number
 		items: ItemType[] | undefined
 		isSearching?: boolean
+		onscriptChanged?: (...args: any[]) => any
+		onflowChanged?: (...args: any[]) => any
+		onappChanged?: (...args: any[]) => any
+		onrawAppChanged?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
 	let {
@@ -16,7 +21,12 @@
 		showCode,
 		nbDisplayed = $bindable(),
 		items,
-		isSearching = false
+		isSearching = false,
+		onscriptChanged = undefined,
+		onflowChanged = undefined,
+		onappChanged = undefined,
+		onrawAppChanged = undefined,
+		onreload = undefined
 	}: Props = $props()
 
 	let groupedItems: ReturnType<typeof groupItems> | 'loading' = $state('loading')
@@ -43,11 +53,11 @@
 					{isSearching}
 					{collapseAll}
 					{item}
-					on:scriptChanged
-					on:flowChanged
-					on:appChanged
-					on:rawAppChanged
-					on:reload
+					onscriptChanged={onscriptChanged}
+					onflowChanged={onflowChanged}
+					onappChanged={onappChanged}
+					onrawAppChanged={onrawAppChanged}
+					onreload={onreload}
 					{showCode}
 				/>
 			{/if}
diff --git a/frontend/src/lib/components/instanceSettings/IndexerMemorySettings.svelte b/frontend/src/lib/components/instanceSettings/IndexerMemorySettings.svelte
index 4044c141fc..3627c13840 100644
--- a/frontend/src/lib/components/instanceSettings/IndexerMemorySettings.svelte
+++ b/frontend/src/lib/components/instanceSettings/IndexerMemorySettings.svelte
@@ -61,7 +61,7 @@
 			<Button
 				variant="default"
 				unifiedSize="sm"
-				on:click={() => {
+				onclick={() => {
 					clearJobsIndexModalOpen = true
 				}}
 			>
@@ -70,7 +70,7 @@
 			<Button
 				variant="default"
 				unifiedSize="sm"
-				on:click={() => {
+				onclick={() => {
 					clearServiceLogsIndexModalOpen = true
 				}}
 			>
@@ -83,10 +83,10 @@
 		confirmationText="Clear"
 		open={clearJobsIndexModalOpen}
 		type="danger"
-		on:canceled={() => {
+		oncanceled={() => {
 			clearJobsIndexModalOpen = false
 		}}
-		on:confirmed={async () => {
+		onconfirmed={async () => {
 			const r = await IndexSearchService.clearIndex({
 				idxName: 'JobIndex'
 			})
@@ -102,10 +102,10 @@
 		confirmationText="Clear"
 		open={clearServiceLogsIndexModalOpen}
 		type="danger"
-		on:canceled={() => {
+		oncanceled={() => {
 			clearServiceLogsIndexModalOpen = false
 		}}
-		on:confirmed={async () => {
+		onconfirmed={async () => {
 			const r = await IndexSearchService.clearIndex({
 				idxName: 'ServiceLogIndex'
 			})
diff --git a/frontend/src/lib/components/instanceSettings/SecretBackendConfig.svelte b/frontend/src/lib/components/instanceSettings/SecretBackendConfig.svelte
index 71721ee10f..638631cc55 100644
--- a/frontend/src/lib/components/instanceSettings/SecretBackendConfig.svelte
+++ b/frontend/src/lib/components/instanceSettings/SecretBackendConfig.svelte
@@ -200,7 +200,7 @@
 <div class="space-y-6">
 	<!-- Backend Type Selector -->
 	<div class="flex flex-col gap-2 mt-1">
-		<ToggleButtonGroup selected={selectedType} onSelected={(v) => setBackendType(v)}>
+		<ToggleButtonGroup selected={selectedType} onselected={(v) => setBackendType(v)}>
 			{#snippet children({ item: toggleButton })}
 				<ToggleButton
 					value="Database"
@@ -290,7 +290,7 @@
 				<!-- Authentication Method Toggle -->
 				<div class="flex flex-col gap-2">
 					<span class="block text-xs font-semibold text-emphasis">Authentication Method</span>
-					<ToggleButtonGroup selected={authMethod} onSelected={(v) => setAuthMethod(v)}>
+					<ToggleButtonGroup selected={authMethod} onselected={(v) => setAuthMethod(v)}>
 						{#snippet children({ item: toggleButton })}
 							<ToggleButton
 								value="jwt"
@@ -484,10 +484,10 @@ vault write auth/jwt/role/windmill-secrets \
 	open={migrateToVaultModalOpen}
 	loading={migratingToVault}
 	type="reload"
-	onCanceled={() => {
+	oncanceled={() => {
 		migrateToVaultModalOpen = false
 	}}
-	onConfirmed={migrateSecretsToVault}
+	onconfirmed={migrateSecretsToVault}
 >
 	{#snippet children()}
 		<div class="flex flex-col gap-2">
@@ -516,10 +516,10 @@ vault write auth/jwt/role/windmill-secrets \
 	open={migrateToDatabaseModalOpen}
 	loading={migratingToDatabase}
 	type="reload"
-	onCanceled={() => {
+	oncanceled={() => {
 		migrateToDatabaseModalOpen = false
 	}}
-	onConfirmed={migrateSecretsToDatabase}
+	onconfirmed={migrateSecretsToDatabase}
 >
 	{#snippet children()}
 		<div class="flex flex-col gap-2">
diff --git a/frontend/src/lib/components/instanceSettings/SmtpSettings.svelte b/frontend/src/lib/components/instanceSettings/SmtpSettings.svelte
index a25cb77691..80009a2d21 100644
--- a/frontend/src/lib/components/instanceSettings/SmtpSettings.svelte
+++ b/frontend/src/lib/components/instanceSettings/SmtpSettings.svelte
@@ -138,7 +138,7 @@
 				{disabled}
 				bind:checked={$values['smtp_settings'].smtp_disable_tls}
 				size="xs"
-				on:change={(e) => {
+				onchange={(e) => {
 					if (e.detail) {
 						$values['smtp_settings'].smtp_tls_implicit = false
 					}
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index aacc8c3d91..f6a8e5f92d 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -220,7 +220,7 @@
 				iconOnly
 				btnClasses="text-primary hover:text-primary"
 				startIcon={{ icon: Search }}
-				on:click={() => {
+				onclick={() => {
 					searchOpen = true
 					tick().then(() => searchInput?.focus())
 				}}
@@ -239,7 +239,7 @@
 				<Button
 					size="xs2"
 					variant="default"
-					on:click={collapse}
+					onclick={collapse}
 					wrapperClasses="!inline-flex w-fit"
 					btnClasses="font-mono h-4 text-2xs px-1 font-thin text-primary rounded-[0.275rem]"
 					>-</Button
@@ -261,11 +261,11 @@
 							animationDuration="2s"
 						>
 							<Button
-								on:click={() => selectProp(key, undefined, false)}
-								on:mouseenter={() => {
+								onclick={() => selectProp(key, undefined, false)}
+								onmouseenter={() => {
 									hoveredKey = key
 								}}
-								on:mouseleave={() => (hoveredKey = null)}
+								onmouseleave={() => (hoveredKey = null)}
 								size="xs2"
 								color="light"
 								variant="border"
@@ -292,7 +292,7 @@
 								currentPath={computeFullKey(key, rawKey)}
 								{pureViewer}
 								{allowCopy}
-								on:select
+								onselect={onselect}
 								{collapseLevel}
 								collapsed={collapseLevel !== undefined
 									? level + 1 >= collapseLevel && key != expandedEvenOnLevel0
@@ -345,7 +345,7 @@
 			<Button
 				size="xs2"
 				variant="default"
-				on:click={collapse}
+				onclick={collapse}
 				wrapperClasses="!inline-flex w-fit"
 				btnClasses="h-4 text-[9px] px-1 text-primary rounded-[0.275rem]"
 			>
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index d04683e226..d9d5651e0d 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -22,6 +22,7 @@
 		flow_env?: Record<string, any> | undefined
 		result?: any | undefined
 		extraResults?: any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -32,7 +33,8 @@
 		previousId = undefined,
 		flow_env = undefined,
 		result = undefined,
-		extraResults = undefined
+		extraResults = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	let variables: Record<string, string> = $state({})
@@ -263,7 +265,7 @@
 				<ObjectViewer
 					{allowCopy}
 					json={{ result, ...(extraResults ? extraResults : {}) }}
-					on:select
+					onselect={onselect}
 				/>
 			</div>
 		{/if}
@@ -275,7 +277,7 @@
 					pureViewer={!$propPickerConfig}
 					json={flowInputsFiltered}
 					prefix="flow_input"
-					on:select
+					onselect={onselect}
 				/>
 			</div>
 		{/if}
@@ -293,7 +295,7 @@
 							step_id: 'The step id'
 						}
 					}}
-					on:select
+					onselect={onselect}
 				/>
 			</div>
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
@@ -306,7 +308,7 @@
 							collapsed={false}
 							json={suggestedPropsFiltered}
 							prefix="results"
-							on:select
+							onselect={onselect}
 						/>
 					</div>
 				{/if}
@@ -319,7 +321,7 @@
 						collapseLevel={allResultsCollapsed ? 1 : undefined}
 						json={resultByIdFiltered}
 						prefix="results"
-						on:select
+						onselect={onselect}
 					/>
 				</div>
 			{/if}
@@ -335,7 +337,7 @@
 							resumes: 'All resume payloads from all approvers',
 							approvers: 'The list of approvers'
 						}}
-						on:select
+						onselect={onselect}
 					/>
 				</div>
 			{/if}
@@ -349,7 +351,7 @@
 							collapsed={false}
 							json={suggestedPropsFiltered}
 							prefix="results"
-							on:select
+							onselect={onselect}
 						/>
 					</div>
 				{/if}
@@ -363,7 +365,7 @@
 							json={resultByIdFiltered}
 							expandedEvenOnLevel0={previousId}
 							prefix="results"
-							on:select
+							onselect={onselect}
 						/>
 					</div>
 				{/if}
@@ -378,7 +380,7 @@
 						<Button
 							size="xs2"
 							variant="default"
-							on:click={() => {
+							onclick={() => {
 								displayVariable = false
 							}}
 							wrapperClasses="inline-flex whitespace-nowrap w-fit"
@@ -390,13 +392,13 @@
 							rawKey={true}
 							json={variables}
 							prefix="variable"
-							on:select
+							onselect={onselect}
 						/>
 					{:else}
 						<Button
 							size="xs2"
 							variant="default"
-							on:click={async () => {
+							onclick={async () => {
 								await loadVariables()
 								displayVariable = true
 							}}
@@ -415,7 +417,7 @@
 						<Button
 							size="xs2"
 							variant="default"
-							on:click={() => {
+							onclick={() => {
 								displayResources = false
 							}}
 							wrapperClasses="inline-flex whitespace-nowrap w-fit"
@@ -427,13 +429,13 @@
 							rawKey={true}
 							json={resources}
 							prefix="resource"
-							on:select
+							onselect={onselect}
 						/>
 					{:else}
 						<Button
 							size="xs2"
 							variant="default"
-							on:click={async () => {
+							onclick={async () => {
 								await loadResources()
 								displayResources = true
 							}}
@@ -454,7 +456,7 @@
 							color="light"
 							size="xs2"
 							variant="border"
-							on:click={() => {
+							onclick={() => {
 								displayFlowEnv = false
 							}}
 							wrapperClasses="inline-flex whitespace-nowrap w-fit"
@@ -466,14 +468,14 @@
 							rawKey={false}
 							json={flowEnvFiltered}
 							prefix="flow_env"
-							on:select
+							onselect={onselect}
 						/>
 					{:else}
 						<Button
 							color="light"
 							size="xs2"
 							variant="border"
-							on:click={() => {
+							onclick={() => {
 								displayFlowEnv = true
 							}}
 							wrapperClasses="inline-flex whitespace-nowrap w-fit"
diff --git a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
index b4ed9c11c9..4c6859c882 100644
--- a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
@@ -7,6 +7,7 @@
 		extraResults?: any;
 		flow_input?: any;
 		flow_env?: any;
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -14,25 +15,26 @@
 		result,
 		extraResults = undefined,
 		flow_input = undefined,
-		flow_env = undefined
+		flow_env = undefined,
+		onselect = undefined
 	}: Props = $props();
 </script>
 
 <div class="w-full px-2">
 	<span class="font-normal text-sm text-secondary">Result</span>
 	<div class="overflow-y-auto mb-2 w-full">
-		<ObjectViewer {allowCopy} json={{ result, ...(extraResults ? extraResults : {}) }} on:select />
+		<ObjectViewer {allowCopy} json={{ result, ...(extraResults ? extraResults : {}) }} onselect={onselect} />
 	</div>
 	{#if flow_input}
 		<span class="font-normal text-sm text-secondary">Flow Input</span>
 		<div class="overflow-y-auto w-full">
-			<ObjectViewer {allowCopy} json={flow_input} prefix="flow_input" on:select />
+			<ObjectViewer {allowCopy} json={flow_input} prefix="flow_input" onselect={onselect} />
 		</div>
 	{/if}
 	{#if flow_env}
 		<span class="font-normal text-sm text-secondary">Flow Environment Variables</span>
 		<div class="overflow-y-auto w-full">
-			<ObjectViewer {allowCopy} json={flow_env} prefix="flow_env" on:select />
+			<ObjectViewer {allowCopy} json={flow_env} prefix="flow_env" onselect={onselect} />
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/raw_apps/RawAppDataTableDrawer.svelte b/frontend/src/lib/components/raw_apps/RawAppDataTableDrawer.svelte
index b7bcb9a5ec..dc452c059f 100644
--- a/frontend/src/lib/components/raw_apps/RawAppDataTableDrawer.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppDataTableDrawer.svelte
@@ -151,7 +151,7 @@
 <Drawer bind:open size={expand ? `${windowWidth}px` : '1200px'} {offset}>
 	<DrawerContent
 		title="Data"
-		on:close={() => {
+		onclose={() => {
 			if (hasReplResult) {
 				dbManagerContent?.clearReplResult()
 			} else {
@@ -202,7 +202,7 @@
 				variant="contained"
 				color="blue"
 				disabled={!canAdd}
-				on:click={handleAddTables}
+				onclick={handleAddTables}
 				startIcon={{ icon: Plus }}
 				size="xs"
 			>
@@ -215,7 +215,7 @@
 
 			<Button
 				loading={dbManagerContent?.isLoading() ?? false}
-				on:click={() => dbManagerContent?.refresh()}
+				onclick={() => dbManagerContent?.refresh()}
 				startIcon={{ icon: RefreshCcw }}
 				size="xs"
 				color="light"
@@ -225,7 +225,7 @@
 			</Button>
 
 			<Button
-				on:click={() => (expand = !expand)}
+				onclick={() => (expand = !expand)}
 				startIcon={{ icon: expand ? Minimize : Expand }}
 				size="xs"
 				color="light"
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
index fe179fc888..51ec453149 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
@@ -54,6 +54,8 @@
 			  }
 			| undefined
 		diffDrawer?: DiffDrawer | undefined
+		onrestore?: (...args: any[]) => any
+		onsavedNewAppPath?: (...args: any[]) => any
 	}
 
 	let {
@@ -66,7 +68,9 @@
 		path,
 		newPath = undefined,
 		savedApp = $bindable(undefined),
-		diffDrawer = undefined
+		diffDrawer = undefined,
+		onrestore = undefined,
+		onsavedNewAppPath = undefined
 	}: Props = $props()
 	export const version: number | undefined = undefined
 
@@ -811,8 +815,8 @@
 		bind:jobsById
 		bind:savedApp
 		bind:summary
-		on:restore
-		on:savedNewAppPath
+		onrestore={onrestore}
+		onsavedNewAppPath={onsavedNewAppPath}
 		{policy}
 		{diffDrawer}
 		{newApp}
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
index abfd634d80..b4af2c6e4e 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
@@ -105,6 +105,7 @@
 		onUndo?: () => void
 		onRedo?: () => void
 		onsavedNewAppPath?: (...args: any[]) => any
+		onrestore?: (...args: any[]) => any
 	}
 
 	let {
@@ -126,7 +127,8 @@
 		canRedo = false,
 		onUndo = undefined,
 		onRedo = undefined,
-		onsavedNewAppPath = undefined
+		onsavedNewAppPath = undefined,
+		onrestore = undefined
 	}: Props = $props()
 
 	let newEditedPath = $state('')
@@ -662,13 +664,13 @@
 
 {#if appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
-		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
+		<DrawerContent title="Initial draft save" onclose={() => closeDraftDrawer()}>
 			{#snippet actions()}
 				<div>
 					<Button
 						startIcon={{ icon: Save }}
 						disabled={pathError != '' || app == undefined}
-						on:click={() => saveInitialDraft()}
+						onclick={() => saveInitialDraft()}
 						unifiedSize="md"
 						variant="accent"
 					>
@@ -686,13 +688,13 @@
 	</Drawer>
 {/if}
 <Drawer bind:open={saveDrawerOpen} size="800px">
-	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
+	<DrawerContent title="Deploy" onclose={() => closeSaveDrawer()}>
 		{#snippet actions()}
 			<div class="flex flex-row gap-2">
 				<Button
 					variant="default"
 					disabled={!savedApp || savedApp.draft_only}
-					on:click={async () => {
+					onclick={async () => {
 						if (!savedApp) {
 							return
 						}
@@ -735,7 +737,7 @@
 					unifiedSize="md"
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' || customPathError != '' || app == undefined}
-					on:click={() => {
+					onclick={() => {
 						if (appPath == '') {
 							createApp(newEditedPath)
 						} else {
@@ -766,18 +768,18 @@
 </Drawer>
 
 <Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
-	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
-		<DeploymentHistory on:restore {appPath} />
+	<DrawerContent title="Deployment History" onclose={() => (historyBrowserDrawerOpen = false)}>
+		<DeploymentHistory onrestore={onrestore} {appPath} />
 	</DrawerContent>
 </Drawer>
 
 <Drawer bind:open={publishToHubDrawerOpen} size="600px">
-	<DrawerContent title="Publish to Hub" on:close={() => (publishToHubDrawerOpen = false)}>
+	<DrawerContent title="Publish to Hub" onclose={() => (publishToHubDrawerOpen = false)}>
 		{#snippet actions()}
 			<Button
 				loading={publishingToHub}
 				disabled={!app}
-				on:click={publishToHub}
+				onclick={publishToHub}
 				variant="accent"
 				startIcon={{ icon: Download }}
 			>
@@ -809,10 +811,10 @@
 
 <AppJobsDrawer
 	bind:open={jobsDrawerOpen}
-	on:clear={() => {
+	onclear={() => {
 		jobs = []
 	}}
-	on:clearErrors={() => {
+	onclearErrors={() => {
 		console.log('todo clear errors')
 	}}
 	{jobs}
@@ -830,8 +832,8 @@
 		<UndoRedo
 			undoProps={{ disabled: !canUndo }}
 			redoProps={{ disabled: !canRedo }}
-			on:undo={() => onUndo?.()}
-			on:redo={() => onRedo?.()}
+			onundo={() => onUndo?.()}
+			onredo={() => onRedo?.()}
 		/>
 	</div>
 
@@ -886,7 +888,7 @@
 
 		<div class="hidden md:inline relative overflow-visible">
 			<Button
-				on:click={() => {
+				onclick={() => {
 					jobsDrawerOpen = true
 				}}
 				color="light"
@@ -918,7 +920,7 @@
 		<Button
 			loading={loading.save}
 			startIcon={{ icon: Save }}
-			on:click={() => saveDraft()}
+			onclick={() => saveDraft()}
 			unifiedSize="md"
 			variant="default"
 			disabled={!newApp && !savedApp}
@@ -929,7 +931,7 @@
 		<Button
 			loading={loading.save}
 			startIcon={{ icon: Save }}
-			on:click={save}
+			onclick={save}
 			unifiedSize="md"
 			variant="accent"
 			dropdownItems={appPath != ''
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
index 8232958fc7..f07dd36c9f 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
@@ -60,6 +60,7 @@
 		) => void
 		ondelete?: (...args: any[]) => any
 		onkeydown?: (...args: any[]) => any
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -619,7 +620,7 @@
 					aria-label="Clear script"
 					destructive
 					unifiedSize="sm"
-					on:click={() => (dispatch('delete'), ondelete?.())}
+					onclick={() => (dispatch('delete'), ondelete?.())}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
 				/>
@@ -632,7 +633,7 @@
 				<Button
 					variant="default"
 					unifiedSize="sm"
-					on:click={async () => {
+					onclick={async () => {
 						editor?.format()
 					}}
 				>
@@ -650,8 +651,8 @@
 				iconOnly={width < 1250}
 				kind={'script'}
 				template={'script'}
-				on:showDiffMode={showDiffMode}
-				on:hideDiffMode={hideDiffMode}
+				onshowDiffMode={showDiffMode}
+				onhideDiffMode={hideDiffMode}
 				{lastDeployedCode}
 				{diffMode}
 				openAiChat
@@ -668,7 +669,7 @@
 					<Button
 						variant={debugMode ? 'accent' : 'default'}
 						size="xs2"
-						on:click={toggleDebugMode}
+						onclick={toggleDebugMode}
 						startIcon={{ icon: Bug }}
 						btnClasses={debugMode
 							? ''
@@ -682,7 +683,7 @@
 					<Button
 						variant="default"
 						size="xs2"
-						on:click={() => (showDebugConsole = true)}
+						onclick={() => (showDebugConsole = true)}
 						startIcon={{ icon: Terminal }}
 						btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
 						title="Show Debug Console"
@@ -704,7 +705,7 @@
 							cmdEnterAction={() => onRun()}
 							bind:websocketAlive
 							rawAppRunnableKey={id}
-							on:change={async (e) => {
+							onchange={async (e) => {
 								if (inlineScript) {
 									if (inlineScript.lock != undefined) {
 										inlineScript.lock = undefined
@@ -755,7 +756,7 @@
 					cmdEnterAction={() => onRun()}
 					bind:websocketAlive
 					rawAppRunnableKey={id}
-					on:change={async (e) => {
+					onchange={async (e) => {
 						if (inlineScript) {
 							if (inlineScript.lock != undefined) {
 								inlineScript.lock = undefined
@@ -813,6 +814,6 @@
 		</div>
 	</div>
 	{#snippet actions()}
-		<Button size="sm" on:click={confirmDebugBetaWarning}>Continue</Button>
+		<Button size="sm" onclick={confirmDebugBetaWarning}>Continue</Button>
 	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
index dcfe20836a..c0e1510a02 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptPanelList.svelte
@@ -97,7 +97,7 @@
 				variant="subtle"
 				title="Create a new background runnable"
 				aria-label="Create a new background runnable"
-				on:click={createBackgroundScript}
+				onclick={createBackgroundScript}
 				id="create-background-runnable"
 				btnClasses="gap-0.5 px-1"
 			>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
index 1d4660cfa2..0385eb9211 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
@@ -48,6 +48,7 @@
 			} | null
 		) => void
 		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -55,7 +56,8 @@
 		id,
 		appPath,
 		onSelectionChange,
-		oncreateScriptFromInlineScript = undefined
+		oncreateScriptFromInlineScript = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -195,7 +197,7 @@
 			{#if isRunnableByName(runnable)}
 				<RawAppInlineScriptEditor
 					bind:this={inlineScriptEditor}
-					on:createScriptFromInlineScript={() => (
+					oncreateScriptFromInlineScript={() => (
 						dispatch('createScriptFromInlineScript', runnable),
 						oncreateScriptFromInlineScript?.(runnable)
 					)}
@@ -204,7 +206,7 @@
 					bind:name={runnable.name}
 					bind:fields={runnable.fields}
 					onRun={testPreview}
-					on:delete
+					ondelete={ondelete}
 					path={appPath}
 					{onSelectionChange}
 				/>
@@ -213,8 +215,8 @@
 					rawApps
 					bind:runnable
 					bind:fields={runnable.fields}
-					on:fork={(e) => fork(e.detail)}
-					on:delete
+					onfork={(e) => fork(e)}
+					ondelete={ondelete}
 					{id}
 					isLoading={testIsLoading}
 					onRun={testPreview}
@@ -295,7 +297,7 @@
 											/>
 										</div>
 										<SchemaForm
-											on:keydownCmdEnter={testPreview}
+											onkeydownCmdEnter={testPreview}
 											disabledArgs={Object.entries(runnable?.fields ?? {})
 												.filter(([_, v]) => v.type == 'static')
 												.map(([k]) => k)}
@@ -370,11 +372,11 @@
 	<EmptyInlineScript
 		unusedInlineScripts={[]}
 		rawApps
-		on:pick={(e) =>
+		onpick={(e) =>
 			onPick(e.detail as { runnable: Runnable; fields: Record<string, StaticAppInput> })}
-		on:delete
+		ondelete={ondelete}
 		showScriptPicker
-		on:new={(e) => {
+		onnew={(e) => {
 			runnable = {
 				type: 'inline',
 				inlineScript: e.detail,
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte
index 17b981c2a9..c5ea7d29dd 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptsPanel.svelte
@@ -35,7 +35,7 @@
 	{#key selectedRunnable}
 		<RawAppInlineScripRunnable
 			{appPath}
-			on:createScriptFromInlineScript={(e) => {
+			oncreateScriptFromInlineScript={(e) => {
 				createScriptFromInlineScript(
 					selectedRunnable ?? '',
 					e.detail,
@@ -43,7 +43,7 @@
 					appPath
 				)
 			}}
-			on:delete={() => {
+			ondelete={() => {
 				if (selectedRunnable) {
 					delete runnables[selectedRunnable]
 				}
diff --git a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
index 2a770a68d5..87d8de2085 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte
@@ -116,7 +116,7 @@
 				{#if componentInput?.type && allowTypeChange !== false}
 					<ToggleButtonGroup
 						selected={componentInput.type}
-						onSelected={(newType) => {
+						onselected={(newType) => {
 							// Preserve fieldType and other properties when changing type
 							componentInput = {
 								...componentInput,
diff --git a/frontend/src/lib/components/raw_apps/RawAppSidebar.svelte b/frontend/src/lib/components/raw_apps/RawAppSidebar.svelte
index 859e9e5386..f6fb70d0e1 100644
--- a/frontend/src/lib/components/raw_apps/RawAppSidebar.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppSidebar.svelte
@@ -156,7 +156,7 @@
 				<Button
 					unifiedSize="xs"
 					variant="subtle"
-					on:click={onManualSnapshot}
+					onclick={onManualSnapshot}
 					btnClasses="px-1 gap-0.5"
 					title="Create a new snapshot"
 				>
diff --git a/frontend/src/lib/components/recording/FlowRecordingReplay.svelte b/frontend/src/lib/components/recording/FlowRecordingReplay.svelte
index c5d94a7b95..2751ddb521 100644
--- a/frontend/src/lib/components/recording/FlowRecordingReplay.svelte
+++ b/frontend/src/lib/components/recording/FlowRecordingReplay.svelte
@@ -188,7 +188,7 @@
 											{/snippet}
 				</Tooltip>
 			</div>
-			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
+			<Button variant="contained" color="blue" onclick={startReplay} startIcon={{ icon: Play }}>
 				Play
 			</Button>
 		</div>
@@ -198,7 +198,7 @@
 	<div class="flex flex-col gap-4">
 		<div class="flex items-center justify-between">
 			<h2 class="text-lg font-semibold text-emphasis">Replaying: {recording.flow_path}</h2>
-			<Button variant="border" size="xs" on:click={stop} startIcon={{ icon: done ? LogOut : Square }}>
+			<Button variant="border" size="xs" onclick={stop} startIcon={{ icon: done ? LogOut : Square }}>
 				{done ? 'Exit' : 'Stop'}
 			</Button>
 		</div>
diff --git a/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte b/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
index 3124333e4b..24189010d0 100644
--- a/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
+++ b/frontend/src/lib/components/runs/BatchReRunOptionsPane.svelte
@@ -208,7 +208,7 @@
 							<Toggle
 								checked={selectedUsesLatestSchema}
 								disabled={selected?.kind === 'flow'}
-								on:change={(e) => {
+								onchange={(e) => {
 									if (!selected) return
 									;(options[selected.kind][selected.script_path] ??= {}).use_latest_version =
 										e.detail as boolean
@@ -246,7 +246,7 @@
 													type: 'javascript',
 													expr: batchReRunDefaultPropertyExpr(propertyName, selected.schemas)
 												}}
-												on:change={(e) => {
+												onchange={(e) => {
 													if (!selected) return
 													const newArg = e.detail.arg as InputTransform
 													;((options[selected.kind][selected.script_path] ??=
diff --git a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
index 7dea3dcbca..24142a067b 100644
--- a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
+++ b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
@@ -37,7 +37,7 @@
 <!-- 
 {#if args !== undefined && argsStr !== undefined}
 	<Drawer bind:this={jsonViewer} size="900px">
-		<DrawerContent title="Original args" on:close={jsonViewer.closeDrawer}>
+		<DrawerContent title="Original args" onclose={jsonViewer.closeDrawer}>
 			{#snippet actions()}
 				<Button
 					download="windmill-args.json"
@@ -49,7 +49,7 @@
 					Download
 				</Button>
 				<Button
-					on:click={() => copyToClipboard(argsStr)}
+					onclick={() => copyToClipboard(argsStr)}
 					color="light"
 					size="xs"
 					startIcon={{ icon: ClipboardCopy }}
@@ -72,7 +72,7 @@
 		</DrawerContent>
 	</Drawer>
 	<button
-		on:click={() => {
+		onclick={() => {
 			jsonViewer?.openDrawer()
 		}}
 	>
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 478e99e6d4..c6dc7319dc 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -44,6 +44,9 @@
 		onfilterByLabel?: (...args: any[]) => any
 		onfilterBySchedule?: (...args: any[]) => any
 		onfilterByUser?: (...args: any[]) => any
+		onfilterByTag?: (...args: any[]) => any
+		onfilterByConcurrencyKey?: (...args: any[]) => any
+		onfilterByWorker?: (...args: any[]) => any
 	}
 
 	let {
@@ -268,7 +271,7 @@
 					size="xs2"
 					color="light"
 					btnClasses="font-normal bg-transparent hover:bg-surface hover:text-primary"
-					on:click={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
+					onclick={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 				>
 					<Calendar size={14} />
 				</Button>
diff --git a/frontend/src/lib/components/runs/RunsQueue.svelte b/frontend/src/lib/components/runs/RunsQueue.svelte
index b0c5ed5adb..079cb69f14 100644
--- a/frontend/src/lib/components/runs/RunsQueue.svelte
+++ b/frontend/src/lib/components/runs/RunsQueue.svelte
@@ -88,7 +88,7 @@
 			{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}
 		</button>
 		<div class="truncate text-2xs !text-secondary mt-0.5">
-			<Button variant="subtle" unifiedSize="md" on:click={() => onJobsWaiting?.()}>
+			<Button variant="subtle" unifiedSize="md" onclick={() => onJobsWaiting?.()}>
 				{#if success == 'waiting'}
 					<div class="flex flex-row items-center gap-1">
 						Reset filter
@@ -114,7 +114,7 @@
 					: ''}>{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}</div
 			>
 			<div class="truncate text-2xs !text-secondary">
-				<Button unifiedSize="md" variant="subtle" on:click={() => onJobsSuspended?.()}>
+				<Button unifiedSize="md" variant="subtle" onclick={() => onJobsSuspended?.()}>
 					{#if success == 'suspended'}
 						<div class="flex flex-row items-center gap-1">
 							Reset filter
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index a2a9ee6fc1..e99ae589b4 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -39,6 +39,14 @@
 		onCancelJobs: (jobIds: string[]) => void
 		onselect?: (...args: any[]) => any
 		onloadExtra?: (...args: any[]) => any
+		onfilterByLabel?: (...args: any[]) => any
+		onfilterByPath?: (...args: any[]) => any
+		onfilterByUser?: (...args: any[]) => any
+		onfilterByFolder?: (...args: any[]) => any
+		onfilterByConcurrencyKey?: (...args: any[]) => any
+		onfilterBySchedule?: (...args: any[]) => any
+		onfilterByWorker?: (...args: any[]) => any
+		onfilterByTag?: (...args: any[]) => any
 	}
 
 	let {
@@ -55,7 +63,14 @@
 		onCancelJobs,
 		batchRerunOptionsIsOpen = $bindable(),
 		onselect = undefined,
-		onloadExtra = undefined
+		onloadExtra = undefined,
+		onfilterByLabel = undefined,
+		onfilterByPath = undefined,
+		onfilterByUser = undefined,
+		onfilterByFolder = undefined,
+		onfilterByConcurrencyKey = undefined,
+		onfilterBySchedule = undefined,
+		onfilterByWorker = undefined
 	}: Props = $props()
 
 	let hasClickFocus = $state(false)
@@ -460,7 +475,7 @@
 												{showTag}
 												job={jobOrDate.job}
 												{selected}
-												on:select={() => {
+												onselect={() => {
 													const jobId = jobOrDate.job.id
 													if (keysPressed.Shift && selectedIds.length > 0) {
 														if (nonSelectable) return
@@ -512,13 +527,13 @@
 													}
 												}}
 												{activeLabel}
-												on:filterByLabel
-												on:filterByPath
-												on:filterByUser
-												on:filterByFolder
-												on:filterByConcurrencyKey
-												on:filterBySchedule
-												on:filterByWorker
+												onfilterByLabel={onfilterByLabel}
+												onfilterByPath={onfilterByPath}
+												onfilterByUser={onfilterByUser}
+												onfilterByFolder={onfilterByFolder}
+												onfilterByConcurrencyKey={onfilterByConcurrencyKey}
+												onfilterBySchedule={onfilterBySchedule}
+												onfilterByWorker={onfilterByWorker}
 												{containerWidth}
 											/>
 										</div>
diff --git a/frontend/src/lib/components/schema/AddProperty.svelte b/frontend/src/lib/components/schema/AddProperty.svelte
index 6338a57bd6..c525a9291a 100644
--- a/frontend/src/lib/components/schema/AddProperty.svelte
+++ b/frontend/src/lib/components/schema/AddProperty.svelte
@@ -164,7 +164,7 @@
 
 <div class="flex">
 	<AddPropertyForm
-		on:add={(e) => {
+		onadd={(e) => {
 			try {
 				handleAddOrEditArgument({
 					...DEFAULT_PROPERTY,
diff --git a/frontend/src/lib/components/schema/AddPropertyForm.svelte b/frontend/src/lib/components/schema/AddPropertyForm.svelte
index a9c1d7f27f..889fa0f17b 100644
--- a/frontend/src/lib/components/schema/AddPropertyForm.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyForm.svelte
@@ -4,6 +4,13 @@
 	import { Plus } from 'lucide-svelte'
 	import TextInput from '../text_input/TextInput.svelte'
 
+	interface Props {
+		onadd?: (...args: any[]) => any
+	}
+
+	let {}: Props = $props()
+
+
 	let name: string = $state('')
 
 	const dispatch = createEventDispatcher()
@@ -29,7 +36,7 @@
 		size="xs"
 		startIcon={{ icon: Plus }}
 		id="flow-editor-add-property"
-		on:click={addField}
+		onclick={addField}
 		disabled={!name}
 	>
 		Add field
diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
index 62e5122e5e..c1a50ca704 100644
--- a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
@@ -50,7 +50,7 @@
 			variant="accent"
 			size="xs"
 			id="flow-editor-add-property"
-			on:click={() => {
+			onclick={() => {
 				addField()
 				close()
 			}}
diff --git a/frontend/src/lib/components/schema/AddPropertyV2.svelte b/frontend/src/lib/components/schema/AddPropertyV2.svelte
index 7f4d9ad09b..b6c0c58756 100644
--- a/frontend/src/lib/components/schema/AddPropertyV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyV2.svelte
@@ -154,7 +154,7 @@
 
 <AddPropertyFormV2
 	{noPopover}
-	on:add={(e) => {
+	onadd={(e) => {
 		try {
 			handleAddOrEditArgument({
 				...DEFAULT_PROPERTY,
diff --git a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
index faea9a939d..e8dbfe8889 100644
--- a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
@@ -86,7 +86,7 @@
 
 <div class="flex flex-wrap justify-between mb-2 w-full items-center gap-y-2">
 	<AddProperty
-		on:change={() => {
+		onchange={() => {
 			if (jsonView) {
 				schemaString = JSON.stringify(schema, null, '\t')
 				editor?.setCode(schemaString)
@@ -105,7 +105,7 @@
 				'Arguments can be edited either using the wizard, or by editing their JSON schema.'
 		}}
 		lightMode
-		on:change={() => {
+		onchange={() => {
 			schemaString = JSON.stringify(schema, null, '\t')
 			editor?.setCode(schemaString)
 		}}
@@ -147,7 +147,7 @@
 										size="xs2"
 										color="light"
 										startIcon={{ icon: Trash }}
-										on:click={() => {
+										onclick={() => {
 											addPropertyComponent?.handleDeleteArgument([item.value])
 										}}
 									/>
@@ -156,7 +156,7 @@
 										size="xs2"
 										color="light"
 										startIcon={{ icon: Pen }}
-										on:click={() => {
+										onclick={() => {
 											schemaFormDrawer?.openDrawer()
 
 											tick().then(() => {
@@ -188,16 +188,16 @@
 	{/key}
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
 		{#snippet children()}
-			<DrawerContent title="UI Customisation" on:close={() => schemaFormDrawer?.closeDrawer()}>
+			<DrawerContent title="UI Customisation" onclose={() => schemaFormDrawer?.closeDrawer()}>
 				<EditableSchemaForm
 					schemaFormClassName="min-h-full"
 					bind:this={editableSchemaForm}
 					bind:schema
 					isAppInput
-					on:edit={(e) => {
+					onedit={(e) => {
 						addPropertyComponent?.openDrawer(e.detail)
 					}}
-					on:delete={(e) => {
+					ondelete={(e) => {
 						addPropertyComponent?.handleDeleteArgument([e.detail])
 					}}
 					{hiddenArgs}
@@ -229,7 +229,7 @@
 			bind:this={editor}
 			small
 			fixedOverflowWidgets={false}
-			on:change={() => {
+			onchange={() => {
 				try {
 					schema = JSON.parse(schemaString)
 					error = ''
diff --git a/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte b/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
index 27f19928f1..161b1b7791 100644
--- a/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte
@@ -113,7 +113,7 @@
 			bind:this={editableSchemaForm}
 			bind:schema
 			isFlowInput
-			on:delete={(e) => {
+			ondelete={(e) => {
 				addPropertyComponent?.handleDeleteArgument([e.detail])
 			}}
 			{uiOnly}
@@ -177,7 +177,7 @@
 {/if}
 <ToggleButtonGroup
 	selected={resourceMode}
-	onSelected={(mode) => switchResourceMode(mode)}
+	onselected={(mode) => switchResourceMode(mode)}
 >
 	{#snippet children({ item })}
 		<ToggleButton value="schema" label="JSON" {item} size="sm" />
diff --git a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
index e530047e32..f9c8aa0602 100644
--- a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
@@ -183,7 +183,7 @@
 							<Button
 								variant="default"
 								size="xs"
-								on:click={() => {
+								onclick={() => {
 									createVariant(variantName)
 									close()
 								}}
@@ -210,7 +210,7 @@
 							startIcon={{ icon: Pen }}
 							propagateEvent
 							iconOnly={false}
-							on:click={() => {
+							onclick={() => {
 								if (oneOfSelected) {
 									variantName = oneOfSelected
 								}
@@ -235,7 +235,7 @@
 							<Button
 								variant="default"
 								size="xs"
-								on:click={() => {
+								onclick={() => {
 									if (oneOfSelected) {
 										renameVariant(variantName, oneOfSelected)
 										close()
@@ -254,7 +254,7 @@
 					startIcon={{ icon: Trash2 }}
 					iconOnly
 					disabled={(oneOf?.length ?? 0) <= 2}
-					on:click={() => {
+					onclick={() => {
 						if (oneOf && oneOfSelected) {
 							const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)
 							oneOf = oneOf.filter((_, i) => i !== idx)
@@ -289,7 +289,7 @@
 				<ToggleButtonGroup
 					bind:selected={customObjectSelected}
 					class="my-2"
-					on:selected={(e) => {
+					onselected={(e) => {
 						if (e.detail === 'editor') {
 							format = undefined
 						} else {
@@ -385,16 +385,14 @@
 			options={{ right: 'Required' }}
 			size="xs"
 			disabled={type === 'boolean'}
-			on:change={(event) => {
+			onchange={(event) => {
 				dispatch('requiredChange', { required: event?.detail })
 				onrequiredChange?.({ required: event?.detail })
-			}}
-			checked={required}
-			on:change={(event) => {
 				if (event?.detail) {
 					nullable = false
 				}
 			}}
+			checked={required}
 		/>
 		{#if type === 'string'}
 			<Toggle
@@ -405,7 +403,7 @@
 				lightMode
 				size="xs"
 				checked={nullable}
-				on:change={(event) => {
+				onchange={(event) => {
 					if (event?.detail) {
 						nullable = true
 					} else {
@@ -423,7 +421,7 @@
 			lightMode
 			size="xs"
 			checked={disabled}
-			on:change={(event) => {
+			onchange={(event) => {
 				if (event?.detail) {
 					disabled = true
 				} else {
@@ -447,7 +445,7 @@
 		size="xs"
 		options={{ right: 'Show this field only when conditions are met' }}
 		checked={Boolean(showExpr)}
-		on:change={() => {
+		onchange={() => {
 			showExpr = showExpr ? undefined : 'true //fields.foo == 42'
 		}}
 	/>
diff --git a/frontend/src/lib/components/schema/InputSelectedBadge.svelte b/frontend/src/lib/components/schema/InputSelectedBadge.svelte
index 7abadf14fd..270ddd13cf 100644
--- a/frontend/src/lib/components/schema/InputSelectedBadge.svelte
+++ b/frontend/src/lib/components/schema/InputSelectedBadge.svelte
@@ -42,7 +42,7 @@
 			size="xs2"
 			startIcon={{ icon: X }}
 			shortCut={{ key: 'esc', withoutModifier: true }}
-			on:click={onReject}
+			onclick={onReject}
 		/>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/schema/PropertyEditor.svelte b/frontend/src/lib/components/schema/PropertyEditor.svelte
index ae488c05f9..d08f49de0e 100644
--- a/frontend/src/lib/components/schema/PropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/PropertyEditor.svelte
@@ -275,7 +275,7 @@
 				{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
 				<div class="border">
 					<EditableSchemaForm
-						on:change
+						onchange={onchange}
 						noPreview
 						bind:schema={oneOfSchemas[idx]}
 						uiOnly
@@ -287,7 +287,7 @@
 		{:else if type == 'object' && !format?.startsWith('resource-') && !isFlowInput && !isAppInput}
 			<div class="border">
 				<EditableSchemaForm
-					on:change
+					onchange={onchange}
 					noPreview
 					bind:schema
 					uiOnly
diff --git a/frontend/src/lib/components/schema/SchemaFormDND.svelte b/frontend/src/lib/components/schema/SchemaFormDND.svelte
index 2733dd7950..eae3c2a2f1 100644
--- a/frontend/src/lib/components/schema/SchemaFormDND.svelte
+++ b/frontend/src/lib/components/schema/SchemaFormDND.svelte
@@ -27,6 +27,11 @@
 		dndType?: string
 		lightHeaderFont?: boolean
 		onreorder?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
+		onacceptChange?: (...args: any[]) => any
+		onrejectChange?: (...args: any[]) => any
+		onnestedChange?: (...args: any[]) => any
 	}
 
 	let {
@@ -48,7 +53,12 @@
 		className = '',
 		dndType = generateRandomString(),
 		lightHeaderFont,
-		onreorder = undefined
+		onreorder = undefined,
+		onclick = undefined,
+		onchange = undefined,
+		onacceptChange = undefined,
+		onrejectChange = undefined,
+		onnestedChange = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -111,14 +121,14 @@
 <SchemaForm
 	{nestedClasses}
 	{hiddenArgs}
-	on:click
-	on:change
-	on:reorder
-	on:consider={handleConsider}
-	on:finalize={handleFinalize}
-	on:acceptChange
-	on:rejectChange
-	on:nestedChange
+	onclick={onclick}
+	onchange={onchange}
+	onreorder={onreorder}
+	onconsider={handleConsider}
+	onfinalize={handleFinalize}
+	onacceptChange={onacceptChange}
+	onrejectChange={onrejectChange}
+	onnestedChange={onnestedChange}
 	bind:args
 	{prettifyHeader}
 	{onlyMaskPassword}
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 013c87b6c9..1efcccd7a5 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -99,7 +99,7 @@
 </script>
 
 <Drawer bind:open={drawerOpen} size="800px">
-	<DrawerContent title={drawerContent?.title} on:close={() => closeDrawer()}>
+	<DrawerContent title={drawerContent?.title} onclose={() => closeDrawer()}>
 		{#if drawerContent?.mode === 'json'}
 			<DisplayResult
 				workspaceId={previewJob?.workspace_id}
diff --git a/frontend/src/lib/components/search/GlobalSearchModal.svelte b/frontend/src/lib/components/search/GlobalSearchModal.svelte
index 3fa32d6db9..7727e372dd 100644
--- a/frontend/src/lib/components/search/GlobalSearchModal.svelte
+++ b/frontend/src/lib/components/search/GlobalSearchModal.svelte
@@ -722,7 +722,7 @@
 						<ContentSearchInner
 							search={removePrefix(searchTerm, '#')}
 							bind:this={contentSearch}
-							on:close={() => {
+							onclose={() => {
 								closeModal()
 							}}
 						/>
diff --git a/frontend/src/lib/components/select/DraggableTags.svelte b/frontend/src/lib/components/select/DraggableTags.svelte
index adb6f49e52..0147f7d25a 100644
--- a/frontend/src/lib/components/select/DraggableTags.svelte
+++ b/frontend/src/lib/components/select/DraggableTags.svelte
@@ -56,7 +56,7 @@
 			<CloseButton
 				class="text-hint bg-transparent border-none"
 				small
-				on:close={(e) => (onRemove(item), e.stopPropagation())}
+				onclose={(e) => (onRemove(item), e.stopPropagation())}
 			/>
 		{/if}
 	</li>
diff --git a/frontend/src/lib/components/select/MultiSelect.svelte b/frontend/src/lib/components/select/MultiSelect.svelte
index 6de40aa235..5e17e35b5c 100644
--- a/frontend/src/lib/components/select/MultiSelect.svelte
+++ b/frontend/src/lib/components/select/MultiSelect.svelte
@@ -158,7 +158,7 @@
 			noBg
 			class="ml-2 remove-all bg-transparent text-hint"
 			small
-			on:close={(e) => (clearValue(), e.stopPropagation())}
+			onclose={(e) => (clearValue(), e.stopPropagation())}
 		/>
 	{/if}
 	<SelectDropdown
diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
index b39e662433..a77cce0b7d 100644
--- a/frontend/src/lib/components/select/Select.svelte
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -152,7 +152,7 @@
 				class="bg-transparent text-secondary hover:text-primary"
 				noBg
 				small
-				on:close={clearValue}
+				onclose={clearValue}
 			/>
 		</div>
 	{:else if RightIcon}
diff --git a/frontend/src/lib/components/settings/AIUserSettings.svelte b/frontend/src/lib/components/settings/AIUserSettings.svelte
index c512ba6f78..34c26c06c3 100644
--- a/frontend/src/lib/components/settings/AIUserSettings.svelte
+++ b/frontend/src/lib/components/settings/AIUserSettings.svelte
@@ -32,7 +32,7 @@
 
 	<div class="flex flex-col gap-4">
 		<Toggle
-			on:change={(e) => {
+			onchange={(e) => {
 				updateSetting(codeCompletionSessionEnabled, e.detail, 'codeCompletionSessionEnabled')
 			}}
 			checked={$codeCompletionSessionEnabled}
@@ -43,7 +43,7 @@
 		/>
 
 		<Toggle
-			on:change={(e) => {
+			onchange={(e) => {
 				updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
 			}}
 			checked={$metadataCompletionEnabled}
@@ -53,7 +53,7 @@
 			}}
 		/>
 		<Toggle
-			on:change={(e) => {
+			onchange={(e) => {
 				updateSetting(stepInputCompletionEnabled, e.detail, 'stepInputCompletionEnabled')
 			}}
 			checked={$stepInputCompletionEnabled}
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index f0aaa942a0..e88819dfec 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -66,7 +66,7 @@
 			<span class="text-xs font-normal text-primary">No color set</span>
 		{/if}
 		<Button
-			on:click={() => {
+			onclick={() => {
 				open = true
 			}}
 			unifiedSize="sm"
@@ -94,7 +94,7 @@
 					bind:value={editingColor}
 					disabled={!colorEnabled}
 				/>
-				<Button on:click={generateRandomColor} size="xs" disabled={!colorEnabled}>Random</Button>
+				<Button onclick={generateRandomColor} size="xs" disabled={!colorEnabled}>Random</Button>
 			</div>
 		</label>
 	</div>
@@ -103,7 +103,7 @@
 		<Button
 			size="sm"
 			variant="accent"
-			on:click={() => {
+			onclick={() => {
 				changeWorkspaceColor()
 			}}
 		>
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
index c7fa45a001..0e4853e8a4 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
@@ -72,7 +72,7 @@
 		<p class="text-xs font-normal text-primary">{$workspaceStore ?? ''}</p>
 		{#if !isCloudHosted() || $superadmin}
 			<Button
-				on:click={() => {
+				onclick={() => {
 					open = true
 				}}
 				unifiedSize="sm"
@@ -117,7 +117,7 @@
 			variant="accent"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
 			{loading}
-			on:click={() => {
+			onclick={() => {
 				renameWorkspace()
 			}}
 		>
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
index 77eae741e9..7e139fd245 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
@@ -43,7 +43,7 @@
 	<div class="flex flex-row gap-2 items-center">
 		<p class="text-primary text-xs">{currentName}</p>
 		<Button
-			on:click={() => {
+			onclick={() => {
 				open = true
 			}}
 			unifiedSize="sm"
@@ -74,7 +74,7 @@
 			size="sm"
 			variant="accent"
 			disabled={!newName}
-			on:click={() => {
+			onclick={() => {
 				renameWorkspace()
 			}}
 		>
diff --git a/frontend/src/lib/components/settings/CreateToken.svelte b/frontend/src/lib/components/settings/CreateToken.svelte
index c951cc8711..30292d61ab 100644
--- a/frontend/src/lib/components/settings/CreateToken.svelte
+++ b/frontend/src/lib/components/settings/CreateToken.svelte
@@ -365,7 +365,7 @@
 				}}
 			>
 				<Toggle
-					on:change={(e) => {
+					onchange={(e) => {
 						mcpCreationMode = e.detail
 						if (e.detail) {
 							newTokenLabel = 'MCP token'
@@ -402,7 +402,7 @@
 			<div class="flex flex-col gap-2">
 				<Toggle
 					checked={showCustomScopes}
-					on:change={(e) => {
+					onchange={(e) => {
 						showCustomScopes = e.detail
 					}}
 					options={{
@@ -526,8 +526,8 @@
 						<div class="flex items-center justify-between">
 							<span class="block text-xs font-semibold">{label}</span>
 							<div class="flex gap-2">
-								<Button size="xs2" on:click={selectAll}>Select All</Button>
-								<Button size="xs2" on:click={clearAll}>Clear All</Button>
+								<Button size="xs2" onclick={selectAll}>Select All</Button>
+								<Button size="xs2" onclick={clearAll}>Clear All</Button>
 							</div>
 						</div>
 					{/snippet}
@@ -677,7 +677,7 @@
 
 		<div class="mt-4 flex justify-end gap-2 flex-row">
 			<Button
-				on:click={() => {
+				onclick={() => {
 					mcpCreationMode = false
 				}}
 				variant="default"
@@ -685,7 +685,7 @@
 				Cancel
 			</Button>
 			<Button
-				on:click={() => createToken(mcpCreationMode)}
+				onclick={() => createToken(mcpCreationMode)}
 				disabled={mcpCreationMode &&
 					(newTokenWorkspace == undefined ||
 						(newMcpScope === 'folder' && !selectedFolder) ||
diff --git a/frontend/src/lib/components/settings/PremiumInfo.svelte b/frontend/src/lib/components/settings/PremiumInfo.svelte
index ad2b616d92..2a3ae286ba 100644
--- a/frontend/src/lib/components/settings/PremiumInfo.svelte
+++ b/frontend/src/lib/components/settings/PremiumInfo.svelte
@@ -151,7 +151,7 @@
 	
 			<Button
 				size="sm"
-				on:click={() => {
+				onclick={() => {
 					setThresholdAlert()
 					thresholdAlertOpen = false
 				}}
@@ -209,7 +209,7 @@
 								: 'Not set'}</p
 						>
 						<Button
-							on:click={() => {
+							onclick={() => {
 								newThresholdAlertAmount = thresholdAlert?.threshold_alert_amount ?? 10
 								thresholdAlertOpen = true
 							}}
@@ -224,7 +224,7 @@
 						/>
 						{#if thresholdAlert?.threshold_alert_amount}
 							<Button
-								on:click={() => {
+								onclick={() => {
 									if (thresholdAlert) {
 										newThresholdAlertAmount = undefined
 										setThresholdAlert()
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index 4adf0c2c29..4cee530e28 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -107,7 +107,7 @@
 									<Button
 										variant="subtle"
 										destructive
-										on:click={() => handleDeleteClick(token_prefix)}
+										onclick={() => handleDeleteClick(token_prefix)}
 										size="xs"
 										startIcon={{ icon: Trash }}
 										iconOnly
@@ -127,10 +127,10 @@
 		</TableCustom>
 		<div class="flex flex-row-reverse gap-2 w-full mt-2">
 			{#if tokens?.length == 100}
-				<Button variant="subtle" size="xs" on:click={handleNextPage}>Next</Button>
+				<Button variant="subtle" size="xs" onclick={handleNextPage}>Next</Button>
 			{/if}
 			{#if tokenPage > 1}
-				<Button variant="subtle" size="xs" on:click={handlePreviousPage}>Previous</Button>
+				<Button variant="subtle" size="xs" onclick={handlePreviousPage}>Previous</Button>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/settings/UserInfoSettings.svelte b/frontend/src/lib/components/settings/UserInfoSettings.svelte
index 5a67d9910a..0fcd89b358 100644
--- a/frontend/src/lib/components/settings/UserInfoSettings.svelte
+++ b/frontend/src/lib/components/settings/UserInfoSettings.svelte
@@ -55,7 +55,7 @@
 						size="sm"
 						variant="default"
 						btnClasses="w-min whitespace-nowrap"
-						on:click={setPassword}>Set password</Button
+						onclick={setPassword}>Set password</Button
 					>
 				</div>
 				{#if passwordError}
diff --git a/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte b/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
index 6aaa69cc53..86fb174daf 100644
--- a/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
@@ -96,7 +96,7 @@
 >
 	{#snippet action()}
 		<Button
-			on:click={saveSettings}
+			onclick={saveSettings}
 			startIcon={{ icon: SaveIcon }}
 			disabled={!isChanged}
 			variant="accent"
@@ -144,7 +144,7 @@
 					<Cell last class="pl-8">
 						<ToggleButtonGroup
 							selected={operatorWorkspaceSettings[key] ? 'on' : 'off'}
-							on:selected={({ detail }) => (operatorWorkspaceSettings[key] = detail === 'on')}
+							onselected={(detail) => (operatorWorkspaceSettings[key] = detail === 'on')}
 						>
 							{#snippet children({ item })}
 								<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
diff --git a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
index 549837d540..6f0f254ca8 100644
--- a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
@@ -438,7 +438,7 @@
 							</div>
 							<ToggleButtonGroup
 								selected={displayMode}
-								on:selected={async (e) => {
+								onselected={async (e) => {
 									const switchingToAdd = e.detail === 'add' && !autoAdd
 
 									// If switching from invite to add on non-cloud, show confirmation with warning
@@ -478,7 +478,7 @@
 						<span class="text-xs mb-1">Role <Tooltip>Role of the auto-added users</Tooltip></span>
 						<ToggleButtonGroup
 							selected={operatorOnly ? 'operator' : 'developer'}
-							on:selected={async (e) => {
+							onselected={async (e) => {
 								operatorOnly = e.detail === 'operator'
 								if (auto_invite_domain != undefined) {
 									await updateAutoInvite(true)
@@ -504,7 +504,7 @@
 						<div class="mt-6">
 							<Toggle
 								checked={autoInviteOrAddEnabled}
-								on:change={async (e) => {
+								onchange={async (e) => {
 									const enabling = e.detail
 
 									if (enabling) {
@@ -589,7 +589,7 @@
 												<span class="text-xs text-primary">Role</span>
 												<ToggleButtonGroup
 													selected={selectedNewRole}
-													on:selected={(e) => {
+													onselected={(e) => {
 														selectedNewRole = e.detail
 													}}
 												>
@@ -656,7 +656,7 @@
 																<div>
 																	<ToggleButtonGroup
 																		selected={autoAddInstanceGroupsRoles[groupName] || 'developer'}
-																		on:selected={async (e) => {
+																		onselected={async (e) => {
 																			autoAddInstanceGroupsRoles[groupName] = e.detail
 																			await updateGroupRole(groupName, e.detail)
 																		}}
@@ -724,7 +724,7 @@
 			{/if}
 
 			<AddUser
-				on:new={() => {
+				onnew={() => {
 					listUsers()
 					listInvites()
 				}}
@@ -735,7 +735,7 @@
 	<DataTable
 		shouldLoadMore={(filteredUsers?.length ?? 0) > 30}
 		loadMore={30}
-		on:loadMore={() => {
+		onloadMore={() => {
 			nbDisplayed += 30
 		}}
 	>
@@ -814,7 +814,7 @@
 								{:else}
 									<ToggleButtonGroup
 										selected={is_admin ? 'admin' : operator ? 'operator' : 'developer'}
-										on:selected={async (e) => {
+										onselected={async (e) => {
 											if (is_admin && email == $userStore?.email && e.detail != 'admin') {
 												sendUserToast(
 													'Admins cannot be demoted by themselves, ask another admin to demote you',
@@ -867,7 +867,7 @@
 						<Cell>
 							<Toggle
 								checked={!disabled}
-								on:change={async (e) => {
+								onchange={async (e) => {
 									try {
 										await UserService.updateUser({
 											workspace: $workspaceStore ?? '',
@@ -922,7 +922,7 @@
 									<Button
 										variant="accent"
 										unifiedSize="sm"
-										on:click={() => {
+										onclick={() => {
 											convertConfirmedCallback = async () => {
 												await convertUserToGroup(username)
 											}
@@ -986,7 +986,7 @@
 								<div>
 									<ToggleButtonGroup
 										selected={is_admin ? 'admin' : operator ? 'operator' : 'developer'}
-										on:selected={async (e) => {
+										onselected={async (e) => {
 											const body =
 												e.detail == 'admin'
 													? { is_admin: true, operator: false }
@@ -1073,10 +1073,10 @@
 	open={Boolean(deleteConfirmedCallback)}
 	title="Remove user"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		deleteConfirmedCallback = undefined
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		if (deleteConfirmedCallback) {
 			deleteConfirmedCallback()
 		}
@@ -1093,10 +1093,10 @@
 		open={Boolean(removeInstanceGroupConfirmedCallback)}
 		title="Remove instance group"
 		confirmationText="Remove"
-		on:canceled={() => {
+		oncanceled={() => {
 			removeInstanceGroupConfirmedCallback = undefined
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			if (removeInstanceGroupConfirmedCallback) {
 				removeInstanceGroupConfirmedCallback()
 			}
@@ -1116,10 +1116,10 @@
 	open={Boolean(convertConfirmedCallback)}
 	title="Convert to Group User"
 	confirmationText="Convert"
-	on:canceled={() => {
+	oncanceled={() => {
 		convertConfirmedCallback = undefined
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		if (convertConfirmedCallback) {
 			convertConfirmedCallback()
 		}
@@ -1143,10 +1143,10 @@
 		open={Boolean(autoAddConfirmCallback)}
 		title="Enable Auto-add"
 		confirmationText="Enable"
-		on:canceled={() => {
+		oncanceled={() => {
 			autoAddConfirmCallback = undefined
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			if (autoAddConfirmCallback) {
 				autoAddConfirmCallback()
 			}
@@ -1163,10 +1163,10 @@
 		open={Boolean(autoInviteDisableConfirmCallback)}
 		title="Disable Auto-invite"
 		confirmationText="Disable"
-		on:canceled={() => {
+		oncanceled={() => {
 			autoInviteDisableConfirmCallback = undefined
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			if (autoInviteDisableConfirmCallback) {
 				autoInviteDisableConfirmCallback()
 			}
@@ -1184,10 +1184,10 @@
 		open={Boolean(switchToAutoAddConfirmCallback)}
 		title="Switch to Auto-add"
 		confirmationText="Switch"
-		on:canceled={() => {
+		oncanceled={() => {
 			switchToAutoAddConfirmCallback = undefined
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			if (switchToAutoAddConfirmCallback) {
 				switchToAutoAddConfirmCallback()
 			}
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
index 7b39db15cc..c6b4283cf4 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
@@ -214,7 +214,7 @@
 							<div class="w-full">
 								{#if $superadmin}
 									<Toggle
-										on:change={saveGlobalMuteSetting}
+										onchange={saveGlobalMuteSetting}
 										bind:checked={muteSettings.global}
 										options={{
 											right: 'Automatically acknowledge critical alerts instance wide'
@@ -226,7 +226,7 @@
 
 							<div class="w-full">
 								<Toggle
-									on:change={saveWorkSpaceMuteSetting}
+									onchange={saveWorkSpaceMuteSetting}
 									bind:checked={muteSettings.workspace}
 									options={{
 										right: 'Automatically acknowledge critical alerts for current workspace'
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte b/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
index 732c810c33..f7529742d8 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
@@ -59,8 +59,8 @@
 	<DataTable
 		size="xs"
 		paginated
-		on:next={goToNextPage}
-		on:previous={goToPreviousPage}
+		onnext={goToNextPage}
+		onprevious={goToPreviousPage}
 		bind:currentPage={page}
 		{hasMore}
 		bind:contentHeight
@@ -82,7 +82,7 @@
 							startIcon={{ icon: CheckCircle2 }}
 							unifiedSize="sm"
 							disabled={numUnacknowledgedCriticalAlerts === 0}
-							on:click={acknowledgeAll}
+							onclick={acknowledgeAll}
 							title="Acknowledge all"
 						>
 							All</Button
@@ -141,7 +141,7 @@
 											variant="accent"
 											startIcon={{ icon: CheckCircle2 }}
 											unifiedSize="sm"
-											on:click={() => {
+											onclick={() => {
 												if (id) acknowledgeAlert(id)
 											}}
 											title="Acknowledge"
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index b0382158bf..0039354630 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -730,10 +730,10 @@
 	open={leaveWorkspaceModal}
 	title="Leave workspace"
 	confirmationText="Leave workspace"
-	on:canceled={() => {
+	oncanceled={() => {
 		leaveWorkspaceModal = false
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		leaveWorkspace()
 	}}
 >
@@ -747,10 +747,10 @@
 		open={deleteWorkspaceForkModal}
 		title="Delete forked workspace"
 		confirmationText="Remove"
-		on:canceled={() => {
+		oncanceled={() => {
 			deleteWorkspaceForkModal = false
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			deleteFork()
 		}}
 	>
diff --git a/frontend/src/lib/components/table/AutoDataTable.svelte b/frontend/src/lib/components/table/AutoDataTable.svelte
index b3df7e7c3f..f43caf7eec 100644
--- a/frontend/src/lib/components/table/AutoDataTable.svelte
+++ b/frontend/src/lib/components/table/AutoDataTable.svelte
@@ -272,13 +272,13 @@
 					paginated={true}
 					bind:currentPage
 					bind:perPage
-					on:next={() => {
+					onnext={() => {
 						currentPage += 1
 					}}
-					on:previous={() => {
+					onprevious={() => {
 						currentPage -= 1
 					}}
-					on:change={(event) => {
+					onchange={(event) => {
 						currentPage = event.detail
 					}}
 					showNext={objects.length > perPage}
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 2183c36fdd..0451cb815b 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -42,6 +42,7 @@
 		onloadMore?: (...args: any[]) => any
 		onprevious?: (...args: any[]) => any
 		onnext?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -174,7 +175,7 @@
 						<Button
 							color="light"
 							size="xs2"
-							on:click={() => (dispatch('previous'), onprevious?.())}
+							onclick={() => (dispatch('previous'), onprevious?.())}
 							disabled={currentPage === 1}
 							startIcon={{ icon: ArrowLeftIcon }}
 						>
@@ -185,7 +186,7 @@
 						<Button
 							color="light"
 							size="xs2"
-							on:click={() => (dispatch('next'), onnext?.())}
+							onclick={() => (dispatch('next'), onnext?.())}
 							endIcon={{ icon: ArrowRightIcon }}
 							disabled={!hasMore}
 						>
@@ -199,7 +200,7 @@
 				<Button
 					color="light"
 					size="xs2"
-					on:click={() => triggerLoadMore()}
+					onclick={() => triggerLoadMore()}
 					endIcon={{ icon: ArrowDownIcon }}
 				>
 					Load {loadMore} more
diff --git a/frontend/src/lib/components/table/DownloadCsv.svelte b/frontend/src/lib/components/table/DownloadCsv.svelte
index 051ab2327f..d9c0fea037 100644
--- a/frontend/src/lib/components/table/DownloadCsv.svelte
+++ b/frontend/src/lib/components/table/DownloadCsv.svelte
@@ -15,7 +15,7 @@
 	unifiedSize="md"
 	variant="subtle"
 	startIcon={{ icon: Download }}
-	on:click={() => {
+	onclick={() => {
 		try {
 			const blob = new Blob([getContent()], { type: 'text/csv;charset=utf-8;' })
 			const url = URL.createObjectURL(blob)
diff --git a/frontend/src/lib/components/triggers/CaptureSection.svelte b/frontend/src/lib/components/triggers/CaptureSection.svelte
index a2a9d1190d..5ad97ecfe9 100644
--- a/frontend/src/lib/components/triggers/CaptureSection.svelte
+++ b/frontend/src/lib/components/triggers/CaptureSection.svelte
@@ -304,7 +304,7 @@
 						<AnimatedButton animate={captureInfo.active} baseRadius="6px">
 							<Button
 								size="xs"
-								on:click={() => (dispatch('captureToggle', {}), oncaptureToggle?.({}))}
+								onclick={() => (dispatch('captureToggle', {}), oncaptureToggle?.({}))}
 								{disabled}
 								variant={captureInfo.active ? 'default' : 'accent-secondary'}
 								selected={captureInfo.active}
@@ -397,7 +397,7 @@
 								{captureType}
 								isFlow={captureInfo.isFlow}
 								path={captureInfo.path}
-								on:selectCapture={handleSelectCapture}
+								onselectCapture={handleSelectCapture}
 								fullHeight
 								headless
 								addButton={false}
@@ -451,7 +451,7 @@
 								hidden: !isFlow || testKind !== 'main'
 							}
 						].filter((item) => !item.hidden)}
-						on:click={async () => {
+						onclick={async () => {
 							if (!selectedCapture) return
 							const payloadData = selectedCapture?.main_args ?? {}
 							if (isFlow && testKind === 'main') {
@@ -486,7 +486,7 @@
 					{base}
 					result={selectedCapture?.main_args}
 					disableTooltips={false}
-					on:open-drawer={() => {
+					onopenDrawer={() => {
 						if (displayResult && typeof displayResult.openDrawer === 'function') {
 							displayResult.openDrawer()
 						}
@@ -546,7 +546,7 @@
 							jobId={undefined}
 							result={payloadData}
 							externalToolbarAvailable
-							on:toolbar-location-changed={({ detail }) => {
+							ontoolbarLocationChanged={(detail) => {
 								toolbarLocation = detail
 							}}
 						/>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 974e73aa7b..93e2f6dab8 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -39,6 +39,7 @@
 		onupdateSchema?: (...args: any[]) => any
 		ontestWithArgs?: (...args: any[]) => any
 		onapplyArgs?: (...args: any[]) => any
+		onopenTriggers?: (...args: any[]) => any
 	}
 
 	let {
@@ -59,7 +60,8 @@
 		onaddPreprocessor = undefined,
 		onupdateSchema = undefined,
 		ontestWithArgs = undefined,
-		onapplyArgs = undefined
+		onapplyArgs = undefined,
+		onopenTriggers = undefined
 	}: Props = $props()
 
 	let selected: number | undefined = $state(undefined)
@@ -263,7 +265,7 @@
 	{#snippet header()}
 		{#if addButton}
 			<div class="inline-block">
-				<CaptureButton small={true} on:openTriggers />
+				<CaptureButton small={true} onopenTriggers={onopenTriggers} />
 			</div>
 		{/if}
 		{#if captureActiveIndicator}
@@ -276,7 +278,7 @@
 				<ToggleButtonGroup
 					bind:selected={testKind}
 					class="h-full"
-					on:selected={(e) => {
+					onselected={(e) => {
 						initLoadCaptures(e.detail)
 					}}
 				>
@@ -308,8 +310,8 @@
 			bind:this={infiniteList}
 			selectedItemId={selected}
 			bind:isEmpty
-			on:error={(e) => handleError(e.detail)}
-			on:select={(e) => handleSelect(e.detail)}
+			onerror={(e) => handleError(e)}
+			onselect={(e) => handleSelect(e)}
 			bind:length={capturesLength}
 			{noBorder}
 			neverShowLoader={captureActiveIndicator !== undefined}
@@ -363,7 +365,7 @@
 												<Button
 													size="xs2"
 													variant="accent"
-													on:click={() => {
+													onclick={() => {
 														dispatch('addPreprocessor')
 														onaddPreprocessor?.()
 													}}
@@ -397,7 +399,7 @@
 												hidden: !isFlow || testKind !== 'main'
 											}
 										].filter((item) => !item.hidden)}
-										on:click={async () => {
+										onclick={async () => {
 											const payloadData = await getPayload(item)
 											if (isFlow && testKind === 'main') {
 												dispatch('testWithArgs', payloadData)
@@ -431,7 +433,7 @@
 									iconOnly
 									startIcon={{ icon: Trash2 }}
 									loading={item.isDeleting}
-									on:click={() => {
+									onclick={() => {
 										infiniteList?.deleteItem(item.id)
 									}}
 									btnClasses="hover:text-white hover:bg-red-500 text-red-500"
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index a6908c6957..27122c4af9 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -28,6 +28,10 @@
 		args?: Record<string, any>
 		isValid?: boolean
 		triggerDeployed?: boolean
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +44,11 @@
 		connectionInfo = $bindable(undefined),
 		args = {},
 		isValid = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	let captureLoading = $state(false)
@@ -189,11 +197,11 @@
 				{isValid}
 				{captureInfo}
 				{captureLoading}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'postgres'}
 			<PostgresCapture
@@ -203,11 +211,11 @@
 				{hasPreprocessor}
 				{isFlow}
 				{triggerDeployed}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'webhook'}
 			<WebhooksCapture
@@ -217,11 +225,11 @@
 				runnableArgs={data?.args}
 				{captureInfo}
 				{captureLoading}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'http'}
 			<RouteCapture
@@ -233,11 +241,11 @@
 				{hasPreprocessor}
 				{isFlow}
 				{captureLoading}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'default_email'}
 			<DefaultEmailCapture
@@ -247,11 +255,11 @@
 				{captureInfo}
 				{hasPreprocessor}
 				{captureLoading}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'kafka'}
 			<KafkaCapture
@@ -261,11 +269,11 @@
 				{isFlow}
 				{captureLoading}
 				{triggerDeployed}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'nats'}
 			<NatsCapture
@@ -275,11 +283,11 @@
 				{isFlow}
 				{captureLoading}
 				{triggerDeployed}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'mqtt'}
 			<MqttCapture
@@ -289,11 +297,11 @@
 				{isFlow}
 				{captureLoading}
 				{triggerDeployed}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'sqs'}
 			<SqsCapture
@@ -303,11 +311,11 @@
 				{isFlow}
 				{captureLoading}
 				{triggerDeployed}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'gcp'}
 			<GcpCapture
@@ -318,11 +326,11 @@
 				{triggerDeployed}
 				deliveryType={args.delivery_type}
 				{captureLoading}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{:else if captureType === 'email'}
 			<EmailCapture
@@ -333,11 +341,11 @@
 				{hasPreprocessor}
 				{isFlow}
 				{captureLoading}
-				on:applyArgs
-				on:updateSchema
-				on:addPreprocessor
-				on:captureToggle={handleCapture}
-				on:testWithArgs
+				onapplyArgs={onapplyArgs}
+				onupdateSchema={onupdateSchema}
+				onaddPreprocessor={onaddPreprocessor}
+				oncaptureToggle={handleCapture}
+				ontestWithArgs={ontestWithArgs}
 			/>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte b/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte
index b7fed3d6d0..b51238f217 100644
--- a/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte
+++ b/frontend/src/lib/components/triggers/DeleteTriggerButton.svelte
@@ -21,10 +21,10 @@
 	title={`Are you sure you want to delete this ${trigger?.isDraft ? 'draft' : 'deployed'} trigger ?`}
 	confirmationText="Delete"
 	open={confirmationModalOpen}
-	on:canceled={() => {
+	oncanceled={() => {
 		confirmationModalOpen = false
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		onDelete?.()
 		confirmationModalOpen = false
 	}}
@@ -44,7 +44,7 @@
 	destructive
 	startIcon={{ icon: Trash }}
 	iconOnly
-	on:click={() => {
+	onclick={() => {
 		confirmationModalOpen = true
 	}}
 />
diff --git a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
index 92cc39fa3a..d321f8e5e0 100644
--- a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
+++ b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
@@ -100,7 +100,7 @@
 			spacingSize="sm"
 			size="xs"
 			variant="default"
-			on:click={testTriggerConnection}
+			onclick={testTriggerConnection}
 			loading={testLoading}
 			clickableWhileLoading
 		>
diff --git a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
index a09491e0ba..fbae251eb0 100644
--- a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
+++ b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
@@ -68,7 +68,7 @@
 			variant="accent"
 			startIcon={{ icon: Save }}
 			disabled={saveDisabled}
-			on:click={() => {
+			onclick={() => {
 				onUpdate?.()
 			}}
 			loading={isLoading}
@@ -96,7 +96,7 @@
 				unifiedSize="sm"
 				startIcon={{ icon: RotateCcw }}
 				variant="default"
-				on:click={() => {
+				onclick={() => {
 					onReset?.()
 				}}
 			>
@@ -110,7 +110,7 @@
 					unifiedSize="sm"
 					startIcon={{ icon: Save }}
 					disabled={saveDisabled || cloudDisabled || !isDeployed || !trigger?.draftConfig}
-					on:click={() => {
+					onclick={() => {
 						onUpdate?.()
 					}}
 					loading={isLoading}
diff --git a/frontend/src/lib/components/triggers/TriggerModeToggle.svelte b/frontend/src/lib/components/triggers/TriggerModeToggle.svelte
index fc8f9b3b4c..598128da2d 100644
--- a/frontend/src/lib/components/triggers/TriggerModeToggle.svelte
+++ b/frontend/src/lib/components/triggers/TriggerModeToggle.svelte
@@ -52,7 +52,7 @@
 	{#if triggerMode === 'suspended'}
 		<ToggleButtonGroup
 			disabled={!canWrite}
-			onSelected={async (value) => {
+			onselected={async (value) => {
 				if (value === 'disabled' || value === 'enabled') {
 					const hasJobs = await suspendedJobsModal?.hasJobs()
 					if (hasJobs) {
@@ -76,7 +76,7 @@
 			disabled={!canWrite}
 			options={hideToggleLabels ? undefined : { right: 'enable', left: 'disable' }}
 			checked={triggerMode === 'enabled'}
-			on:change={(e) => {
+			onchange={(e) => {
 				onToggleMode(e.detail ? 'enabled' : 'disabled')
 			}}
 		/>
diff --git a/frontend/src/lib/components/triggers/TriggerSuspendedJobsAlert.svelte b/frontend/src/lib/components/triggers/TriggerSuspendedJobsAlert.svelte
index 3f88555689..cfbb16f2cd 100644
--- a/frontend/src/lib/components/triggers/TriggerSuspendedJobsAlert.svelte
+++ b/frontend/src/lib/components/triggers/TriggerSuspendedJobsAlert.svelte
@@ -16,7 +16,7 @@
 		those jobs will not run automatically. You can review the list of suspended jobs, and resume or
 		cancel them individually.
 		<Button
-			on:click={() => {
+			onclick={() => {
 				suspendedJobsModal?.openModal('none')
 			}}
 			variant="accent"
diff --git a/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte b/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte
index 389359899c..f808944b4d 100644
--- a/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte
+++ b/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte
@@ -381,8 +381,8 @@
 			<DataTable
 				size="xs"
 				paginated
-				on:next={nextPage}
-				on:previous={prevPage}
+				onnext={nextPage}
+				onprevious={prevPage}
 				bind:currentPage
 				hasMore={hasMorePages}
 			>
@@ -480,7 +480,7 @@
 					startIcon={{ icon: Trash2 }}
 					size="sm"
 					disabled={processingAction}
-					on:click={discardSelectedJobs}
+					onclick={discardSelectedJobs}
 				>
 					Discard Selected ({selectedJobs.size})
 				</Button>
@@ -488,7 +488,7 @@
 					startIcon={{ icon: Play }}
 					size="sm"
 					disabled={processingAction || hasChanged}
-					on:click={runSelectedJobs}
+					onclick={runSelectedJobs}
 				>
 					Resume selected ({selectedJobs.size})
 				</Button>
@@ -497,7 +497,7 @@
 					startIcon={{ icon: Trash2 }}
 					size="sm"
 					disabled={processingAction || queuedJobs.length === 0}
-					on:click={discardAllJobs}
+					onclick={discardAllJobs}
 				>
 					Discard all jobs{action === 'disable'
 						? ' and disable'
@@ -509,7 +509,7 @@
 					startIcon={{ icon: Play }}
 					size="sm"
 					disabled={processingAction || hasChanged || queuedJobs.length === 0}
-					on:click={runAllJobs}
+					onclick={runAllJobs}
 				>
 					Resume all jobs{action === 'disable'
 						? ' and disable'
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index f5a547c40e..683fa3fefe 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -54,6 +54,10 @@
 		isEditor?: boolean
 		onDeployTrigger?: (trigger: Trigger) => void
 		onexitTriggers?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -72,7 +76,11 @@
 		noCapture = false,
 		isEditor = true,
 		onDeployTrigger,
-		onexitTriggers = undefined
+		onexitTriggers = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	let config: Record<string, any> = $state({})
@@ -468,10 +476,10 @@
 								data={{ args, hash: !isFlow ? runnableVersion : undefined, emailDomain }}
 								{isValid}
 								triggerDeployed={!triggersState.selectedTrigger.isDraft}
-								on:applyArgs
-								on:updateSchema
-								on:addPreprocessor
-								on:testWithArgs
+								onapplyArgs={onapplyArgs}
+								onupdateSchema={onupdateSchema}
+								onaddPreprocessor={onaddPreprocessor}
+								ontestWithArgs={ontestWithArgs}
 							/>
 						</Pane>
 					{/key}
diff --git a/frontend/src/lib/components/triggers/TriggersTable.svelte b/frontend/src/lib/components/triggers/TriggersTable.svelte
index 62da1bce4f..5401953d17 100644
--- a/frontend/src/lib/components/triggers/TriggersTable.svelte
+++ b/frontend/src/lib/components/triggers/TriggersTable.svelte
@@ -111,7 +111,7 @@
 										startIcon={{ icon: RotateCcw }}
 										iconOnly
 										title="Reset to deployed version"
-										on:click={() => onReset?.(index)}
+										onclick={() => onReset?.(index)}
 									/>
 								{/if}
 							{/if}
diff --git a/frontend/src/lib/components/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
index 5f1eb53614..ab2e18dbff 100644
--- a/frontend/src/lib/components/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
@@ -37,6 +37,7 @@
 		onDelete?: () => void
 		onReset?: () => void
 		onEmailDomain: (domain: string) => void
+		onopenScheduledPoll?: (...args: any[]) => any
 	}
 
 	let {
@@ -51,6 +52,7 @@
 		newItem,
 		schema,
 		onEmailDomain,
+		onopenScheduledPoll = undefined,
 		...props
 	}: Props = $props()
 
diff --git a/frontend/src/lib/components/triggers/email/DefaultEmailCapture.svelte b/frontend/src/lib/components/triggers/email/DefaultEmailCapture.svelte
index 068df9d707..9aa880a521 100644
--- a/frontend/src/lib/components/triggers/email/DefaultEmailCapture.svelte
+++ b/frontend/src/lib/components/triggers/email/DefaultEmailCapture.svelte
@@ -13,6 +13,11 @@
 		captureInfo?: CaptureInfo | undefined
 		hasPreprocessor?: boolean
 		captureLoading?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,7 +26,12 @@
 		emailDomain = null,
 		captureInfo = undefined,
 		hasPreprocessor = false,
-		captureLoading = false
+		captureLoading = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	function getCaptureEmail() {
@@ -44,11 +54,11 @@
 		disabled={false}
 		{captureInfo}
 		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 	>
diff --git a/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte b/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte
index 0aebee6680..cf80dd7027 100644
--- a/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/email/DefaultEmailConfigSection.svelte
@@ -66,7 +66,7 @@
 						}}
 						class="!text-xs"
 					/>
-					<Button size="xs" variant="default" on:click={() => userSettings.openDrawer()}>
+					<Button size="xs" variant="default" onclick={() => userSettings.openDrawer()}>
 						Create an Email-specific Token
 						<Tooltip light>
 							The token will have a scope such that it can only be used to trigger this script. It
diff --git a/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte b/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte
index e8c201ff63..7e9e4aee37 100644
--- a/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte
+++ b/frontend/src/lib/components/triggers/email/DefaultEmailPanel.svelte
@@ -51,7 +51,7 @@
 
 <UserSettings
 	bind:this={userSettings}
-	on:tokenCreated={(e) => {
+	ontokenCreated={(e) => {
 		token = e.detail
 		triggerTokens?.listTokens()
 	}}
diff --git a/frontend/src/lib/components/triggers/email/EmailCapture.svelte b/frontend/src/lib/components/triggers/email/EmailCapture.svelte
index f77c15b5bd..2a0edc69ef 100644
--- a/frontend/src/lib/components/triggers/email/EmailCapture.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailCapture.svelte
@@ -15,6 +15,11 @@
 		hasPreprocessor?: boolean
 		isFlow?: boolean
 		captureLoading?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -24,7 +29,12 @@
 		isValid = undefined,
 		hasPreprocessor = false,
 		isFlow = false,
-		captureLoading = false
+		captureLoading = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	let captureEmail = $derived(`capture+${$workspaceStore}-${local_part}@${emailDomain}`)
@@ -36,11 +46,11 @@
 		disabled={isValid === false}
 		{captureInfo}
 		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 	>
diff --git a/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
index 54940b5710..8e7fb2a685 100644
--- a/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
@@ -146,7 +146,7 @@
 							size="sm"
 							checked={workspaced_local_part}
 							disabled={!can_write || !userCanEditConfig}
-							on:change={() => {
+							onchange={() => {
 								workspaced_local_part = !workspaced_local_part
 								dirtyLocalPart = true
 							}}
diff --git a/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
index 815c8470d6..e5e4888f78 100644
--- a/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
@@ -422,7 +422,7 @@
 					? `Edit email trigger ${initialPath}`
 					: `Email trigger ${initialPath}`
 				: 'New email trigger'}
-			on:close={() => drawer?.closeDrawer()}
+			onclose={() => drawer?.closeDrawer()}
 		>
 			{#snippet actions()}
 				{@render saveButton()}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte b/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte
index 7538026782..39e50657a2 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpCapture.svelte
@@ -14,6 +14,11 @@
 		deliveryType?: 'push' | 'pull'
 		captureLoading?: boolean
 		triggerDeployed?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +28,12 @@
 		isFlow = false,
 		deliveryType = 'pull',
 		captureLoading = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	function getCaptureUrl(captureInfo: CaptureInfo | undefined) {
@@ -41,11 +51,11 @@
 		captureType="gcp"
 		disabled={isValid === false}
 		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		{captureLoading}
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
index b650dbe3b1..5293fcd3aa 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorConfigSection.svelte
@@ -189,7 +189,7 @@
 								disabled={!can_write}
 								variant="default"
 								wrapperClasses="self-stretch"
-								on:click={loadAllPubSubTopicsFromProject}
+								onclick={loadAllPubSubTopicsFromProject}
 								startIcon={{ icon: RefreshCw }}
 								iconOnly
 							/>
@@ -206,7 +206,7 @@
 					<div class="flex flex-col gap-3">
 						<ToggleButtonGroup
 							bind:selected={subscription_mode}
-							on:selected={(e) => {
+							onselected={(e) => {
 								if (e.detail === 'existing' && subscription_items.length === 0) {
 									loadAllSubscriptionFromGooglePubSubTopic()
 								}
@@ -324,7 +324,7 @@
 										disabled={!can_write}
 										variant="default"
 										wrapperClasses="self-stretch"
-										on:click={loadAllSubscriptionFromGooglePubSubTopic}
+										onclick={loadAllSubscriptionFromGooglePubSubTopic}
 										startIcon={{ icon: RefreshCw }}
 										iconOnly
 									/>
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
index 5db374cb08..6e30476154 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
@@ -318,7 +318,7 @@
 					? `Edit GCP Pub/Sub trigger ${initialPath}`
 					: `GCP Pub/Sub trigger ${initialPath}`
 				: 'New GCP Pub/Sub trigger'}
-			on:close={drawer?.closeDrawer}
+			onclose={drawer?.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render actionsButtons()}
diff --git a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
index fd66b449d0..ed77d6b3ff 100644
--- a/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/OpenAPISpecGenerator.svelte
@@ -174,11 +174,11 @@
 <Drawer
 	size="700px"
 	bind:this={generateCurlCommandDrawer}
-	on:close={() => {
+	onclose={() => {
 		token = ''
 	}}
 >
-	<DrawerContent on:close={generateCurlCommandDrawer.closeDrawer} title={''}>
+	<DrawerContent onclose={generateCurlCommandDrawer.closeDrawer} title={''}>
 		<div class="flex flex-col gap-2">
 			<div class="flex flex-col gap-3">
 				<Alert title="Full Access Warning" type="warning">
@@ -236,7 +236,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 <Drawer size="1400px" bind:this={openAPIGenerator}>
 	<DrawerContent
 		title={'Generate OpenAPI document'}
-		on:close={() => openAPIGenerator.closeDrawer()}
+		onclose={() => openAPIGenerator.closeDrawer()}
 	>
 		<div class="flex flex-row h-full gap-2">
 			<div class="h-full w-1/2 flex flex-col justify-between border rounded-md">
@@ -457,7 +457,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 									size="xs"
 									btnClasses="bg-surface-secondary hover:bg-red-500 hover:text-white p-2 rounded-full"
 									aria-label="Clear"
-									on:click={() => {
+									onclick={() => {
 										webhookAndHttpRouteFilter = webhookAndHttpRouteFilter.filter(
 											(_, index) => index !== i
 										)
@@ -478,7 +478,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 								btnClasses="h-10"
 								size="xs"
 								variant="default"
-								on:click={() => {
+								onclick={() => {
 									webhookAndHttpRouteFilter.push({
 										path: '*',
 										user_or_folder_regex: '*',
@@ -527,7 +527,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 								size="xs"
 								btnClasses="h-10"
 								variant="default"
-								on:click={() => {
+								onclick={() => {
 									webhookAndHttpRouteFilter.push({
 										path_regex: '*',
 										folder_regex: '*',
@@ -575,7 +575,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 						{disabled}
 						spacingSize="sm"
 						loading={isGeneratingOpenapiSpec}
-						on:click={async () => {
+						onclick={async () => {
 							await generateOpenapiSpec(lang)
 						}}
 					>
@@ -586,7 +586,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 						spacingSize="sm"
 						size="xs"
 						variant="default"
-						on:click={copyCommandToClipboard}
+						onclick={copyCommandToClipboard}
 						startIcon={{ icon: ClipboardCopy }}
 					>
 						Copy cURL command
@@ -598,7 +598,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 				<div class="flex flex-row justify-between">
 					<ToggleButtonGroup
 						bind:selected={lang}
-						on:selected={async ({ detail }) => {
+						onselected={async ({ detail }) => {
 							if (!emptyStringTrimmed(openapiDocument)) {
 								try {
 									if (detail === 'yaml') {
@@ -628,7 +628,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 							spacingSize="sm"
 							variant="default"
 							btnClasses="mb-2"
-							on:click={async () => {
+							onclick={async () => {
 								await copyToClipboard(openapiDocument)
 							}}
 							startIcon={{ icon: ClipboardCopy }}
@@ -640,7 +640,7 @@ curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi
 							spacingSize="sm"
 							variant="default"
 							btnClasses="mb-2"
-							on:click={() => {
+							onclick={() => {
 								download(
 									`openapi-3.1.${lang}`,
 									openapiDocument,
diff --git a/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte b/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
index 38ffe933c4..9881b9dd81 100644
--- a/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteBodyTransformerOption.svelte
@@ -35,7 +35,7 @@
 	{#snippet action()}
 		<Toggle
 			checked={raw_string}
-			on:change={() => {
+			onchange={() => {
 				raw_string = !raw_string
 			}}
 			{disabled}
@@ -58,7 +58,7 @@
 	{#snippet action()}
 		<Toggle
 			checked={wrap_body}
-			on:change={() => {
+			onchange={() => {
 				wrap_body = !wrap_body
 			}}
 			{disabled}
diff --git a/frontend/src/lib/components/triggers/http/RouteCapture.svelte b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
index b1024573c9..049486a695 100644
--- a/frontend/src/lib/components/triggers/http/RouteCapture.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
@@ -20,6 +20,11 @@
 		hasPreprocessor?: boolean
 		isFlow?: boolean
 		captureLoading?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -30,7 +35,12 @@
 		isValid = undefined,
 		hasPreprocessor = false,
 		isFlow = false,
-		captureLoading = false
+		captureLoading = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	let captureURL = $derived(
@@ -51,11 +61,11 @@
 		disabled={isValid === false}
 		{captureInfo}
 		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 	>
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
index cbbaef9395..89d318ccbe 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
@@ -173,7 +173,7 @@
 						size="sm"
 						checked={workspaced_route}
 						disabled={!can_write || !userCanEditConfig}
-						on:change={() => {
+						onchange={() => {
 							workspaced_route = !workspaced_route
 							dirtyRoutePath = true
 						}}
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
index 346dd3e373..111fd96050 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
@@ -537,7 +537,7 @@
 										? 'static_website'
 										: 'static_asset'
 									: 'runnable'}
-								on:selected={(ev) => {
+								onselected={(ev) => {
 									if (ev.detail === 'static_asset' || ev.detail === 'static_website') {
 										static_asset_config = { s3: '' }
 										s3Editor?.setCode(JSON.stringify(static_asset_config, null, 2))
@@ -612,13 +612,13 @@
 													folderOnly={is_static_website}
 													allowMultiple={false}
 													randomFileKey={true}
-													on:addition={(evt) => {
+													onaddition={(evt) => {
 														static_asset_config = {
 															s3: evt.detail?.path ?? '',
 															filename: evt.detail?.filename ?? undefined
 														}
 													}}
-													on:deletion={(evt) => {
+													ondeletion={(evt) => {
 														static_asset_config = {
 															s3: ''
 														}
@@ -630,7 +630,7 @@
 											<Button
 												variant="default"
 												size="xs"
-												on:click={() => {
+												onclick={() => {
 													s3FilePicker?.open?.(!is_static_website ? static_asset_config : undefined)
 												}}
 												startIcon={{ icon: Pipette }}
@@ -711,7 +711,7 @@
 													<ToggleButtonGroup
 														class="w-auto h-full"
 														selected={request_type}
-														on:selected={({ detail }) => {
+														onselected={(detail) => {
 															request_type = detail
 														}}
 														disabled={!can_write || !!static_asset_config}
@@ -749,7 +749,7 @@
 											<ToggleButtonGroup
 												class="w-auto h-full"
 												bind:selected={authentication_method}
-												on:selected={(e) => {
+												onselected={(e) => {
 													if (
 														e.detail === 'signature' &&
 														signature_options_type === 'custom_script'
@@ -776,7 +776,7 @@
 																	<ToggleButtonGroup
 																		class="w-auto h-full"
 																		bind:selected={signature_options_type}
-																		on:selected={(e) => {
+																		onselected={(e) => {
 																			if (e.detail === 'custom_script') {
 																				if (!raw_string) {
 																					raw_string = true
@@ -850,7 +850,7 @@
 														<Button
 															title="Add variable"
 															variant="accent"
-															on:click={() => variablePicker?.openDrawer()}
+															onclick={() => variablePicker?.openDrawer()}
 															size="xs"
 															disabled={!can_write}
 														>
@@ -878,7 +878,7 @@
 											</div>
 										{/if}
 									{:else if authentication_method === 'windmill'}
-										<Button size="xs" variant="default" on:click={() => userSettings?.openDrawer()}>
+										<Button size="xs" variant="default" onclick={() => userSettings?.openDrawer()}>
 											Create a route-specific token
 											<Tooltip light>
 												The token will have a scope such that it can only be used to read and
@@ -948,7 +948,7 @@
 					? `Edit route ${initialPath}`
 					: `Route ${initialPath}`
 				: 'New route'}
-			on:close={() => drawer?.closeDrawer()}
+			onclose={() => drawer?.closeDrawer()}
 		>
 			{#snippet actions()}
 				{@render saveButton()}
@@ -991,7 +991,7 @@
 				variant="default"
 				size="sm"
 				startIcon={{ icon: Plus }}
-				on:click={() => {
+				onclick={() => {
 					variableEditor?.initNew()
 				}}
 			>
@@ -1001,4 +1001,4 @@
 	{/snippet}
 </ItemPicker>
 
-<VariableEditor bind:this={variableEditor} on:create={(e) => variablePicker?.openDrawer()} />
+<VariableEditor bind:this={variableEditor} oncreate={(e) => variablePicker?.openDrawer()} />
diff --git a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
index efb37ae6fc..6913e8e2e8 100644
--- a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
@@ -135,7 +135,7 @@
 <Drawer size="700px" bind:this={routesGenerator}>
 	<DrawerContent
 		title={'Generate HTTP routes from OpenAPI spec'}
-		on:close={() => routesGenerator.closeDrawer()}
+		onclose={() => routesGenerator.closeDrawer()}
 	>
 		{#snippet actions()}
 			<Button
@@ -143,7 +143,7 @@
 				loading={isCreating}
 				disabled={httpTriggers.length === 0}
 				startIcon={{ icon: Save }}
-				on:click={saveHttpTrigger}
+				onclick={saveHttpTrigger}
 			>
 				Save routes
 			</Button>
@@ -168,7 +168,7 @@
 				{#if !emptyStringTrimmed(folderName)}
 					<Subsection>
 						<ToggleButtonGroup
-							on:selected={({ detail }) => {
+							onselected={(detail) => {
 								if (selected === 'OpenAPI') {
 									openApiRawEditorValue = code
 								} else if (selected === 'OpenAPI_File') {
@@ -256,7 +256,7 @@
 										size="xs"
 										loading={isFetchingOpenApiSpec}
 										disabled={!isValidUrl}
-										on:click={fetchOpenApiConfig}
+										onclick={fetchOpenApiConfig}
 									>
 										Fetch
 									</Button>
@@ -272,7 +272,7 @@
 								size="xs"
 								btnClasses="h-8"
 								loading={isGeneratingHttpRoutes}
-								on:click={generateHttpTrigger}
+								onclick={generateHttpTrigger}
 								disabled={code.length === 0}
 								variant="default">Generate HTTP routes</Button
 							>
@@ -299,7 +299,7 @@
 
 								<div class="flex gap-2 items-center justify-end">
 									<Button
-										on:click={() => {
+										onclick={() => {
 											callback = (newHttpTrigger) => {
 												httpTriggers[index] = newHttpTrigger as NewHttpTrigger
 												httpTriggers = httpTriggers
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte b/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte
index ce02db0b94..5c5b7aa33b 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaCapture.svelte
@@ -10,6 +10,11 @@
 		isFlow?: boolean
 		captureLoading?: boolean
 		triggerDeployed?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,7 +23,12 @@
 		hasPreprocessor = false,
 		isFlow = false,
 		captureLoading = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 </script>
 
@@ -28,11 +38,11 @@
 		disabled={isValid === false}
 		{captureInfo}
 		{captureLoading}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		displayAlert={triggerDeployed}
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
index e77846672d..0e5a2c2d68 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
@@ -321,7 +321,7 @@
 					? `Edit Kafka trigger ${initialPath}`
 					: `Kafka trigger ${initialPath}`
 				: 'New Kafka trigger'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render actionsButtons('sm')}
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte b/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte
index e31e8edd6f..cf41a40d54 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttCapture.svelte
@@ -10,6 +10,11 @@
 		isFlow?: boolean
 		captureLoading?: boolean
 		triggerDeployed?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,7 +23,12 @@
 		hasPreprocessor = false,
 		isFlow = false,
 		captureLoading = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 </script>
 
@@ -27,11 +37,11 @@
 		captureType="mqtt"
 		disabled={isValid === false}
 		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		{captureLoading}
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
index a160a8fec0..bf4383bb17 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte
@@ -165,7 +165,7 @@
 							variant="default"
 							size="xs"
 							btnClasses="mt-1"
-							on:click={() => {
+							onclick={() => {
 								subscribe_topics = [
 									...subscribe_topics,
 									{
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
index 2bd1a64919..fc34f68293 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
@@ -341,7 +341,7 @@
 					? `Edit MQTT trigger ${initialPath}`
 					: `MQTT trigger ${initialPath}`
 				: 'New MQTT trigger'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render actionsSnippet()}
@@ -515,7 +515,7 @@
 												color="nord"
 												size="xs"
 												bind:checked={activateV5Options.session_expiry_interval}
-												on:change={(ev) => {
+												onchange={(ev) => {
 													if (!ev.detail) {
 														v5_config.session_expiry_interval = undefined
 													}
@@ -546,7 +546,7 @@
 												color="nord"
 												size="xs"
 												bind:checked={activateV5Options.topic_alias_maximum}
-												on:change={(ev) => {
+												onchange={(ev) => {
 													if (!ev.detail) {
 														v5_config.topic_alias_maximum = undefined
 													}
@@ -577,7 +577,7 @@
 											color="nord"
 											size="xs"
 											checked={v3_config.clean_session}
-											on:change={() => {
+											onchange={() => {
 												v3_config.clean_session = !v3_config.clean_session
 											}}
 											options={{
diff --git a/frontend/src/lib/components/triggers/native/NativeTriggerEditor.svelte b/frontend/src/lib/components/triggers/native/NativeTriggerEditor.svelte
index 7334f0a62e..6789d0d412 100644
--- a/frontend/src/lib/components/triggers/native/NativeTriggerEditor.svelte
+++ b/frontend/src/lib/components/triggers/native/NativeTriggerEditor.svelte
@@ -317,7 +317,7 @@
 				: isNew
 					? `New ${serviceInfo?.serviceDisplayName} trigger`
 					: `Edit ${serviceInfo?.serviceDisplayName} trigger`}
-			on:close={drawer?.closeDrawer}
+			onclose={drawer?.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render drawerActions()}
@@ -347,7 +347,7 @@
 		size="sm"
 		startIcon={{ icon: Save }}
 		variant="accent"
-		on:click={save}
+		onclick={save}
 		disabled={saveDisabled}
 		{loading}
 	>
diff --git a/frontend/src/lib/components/triggers/native/NativeTriggerTable.svelte b/frontend/src/lib/components/triggers/native/NativeTriggerTable.svelte
index 6314c12e82..517d48682d 100644
--- a/frontend/src/lib/components/triggers/native/NativeTriggerTable.svelte
+++ b/frontend/src/lib/components/triggers/native/NativeTriggerTable.svelte
@@ -122,7 +122,7 @@
 
 						<div class="flex gap-2 items-center justify-end">
 							<Button
-								on:click={() => onEdit?.(trigger)}
+								onclick={() => onEdit?.(trigger)}
 								unifiedSize="md"
 								startIcon={{ icon: Pen }}
 								variant="subtle"
@@ -158,7 +158,7 @@
 								size="xs"
 								variant="subtle"
 								startIcon={{ icon: RefreshCw }}
-								on:click={() => onRecreate?.(trigger)}
+								onclick={() => onRecreate?.(trigger)}
 							>
 								Recreate
 							</Button>
@@ -175,8 +175,8 @@
 	title="Delete {serviceConfig?.serviceDisplayName} trigger"
 	confirmationText="Delete"
 	loading={isDeleting}
-	onConfirmed={confirmDeleteTrigger}
-	onCanceled={closeDeleteConfirmation}
+	onconfirmed={confirmDeleteTrigger}
+	oncanceled={closeDeleteConfirmation}
 >
 	<div class="flex flex-col w-full space-y-4">
 		<span>Are you sure you want to delete this trigger?</span>
diff --git a/frontend/src/lib/components/triggers/native/services/nextcloud/NextcloudTriggerForm.svelte b/frontend/src/lib/components/triggers/native/services/nextcloud/NextcloudTriggerForm.svelte
index cee2980b27..6c1441d51a 100644
--- a/frontend/src/lib/components/triggers/native/services/nextcloud/NextcloudTriggerForm.svelte
+++ b/frontend/src/lib/components/triggers/native/services/nextcloud/NextcloudTriggerForm.svelte
@@ -112,7 +112,7 @@
 				>No events available. Please ensure your workspace has a connected Nextcloud integration.</div
 			>
 			<div class="flex gap-2">
-				<Button variant="default" on:click={loadAvailableEvents} {disabled}>
+				<Button variant="default" onclick={loadAvailableEvents} {disabled}>
 					Retry loading events
 				</Button>
 				<Button variant="subtle" href="/workspace_settings?tab=integrations" target="_blank">
diff --git a/frontend/src/lib/components/triggers/nats/NatsCapture.svelte b/frontend/src/lib/components/triggers/nats/NatsCapture.svelte
index c44fb8b5d7..eb7893868f 100644
--- a/frontend/src/lib/components/triggers/nats/NatsCapture.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsCapture.svelte
@@ -10,6 +10,11 @@
 		isFlow?: boolean
 		captureLoading?: boolean
 		triggerDeployed?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,7 +23,12 @@
 		hasPreprocessor = false,
 		isFlow = false,
 		captureLoading = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 </script>
 
@@ -27,11 +37,11 @@
 		captureType="nats"
 		disabled={isValid === false}
 		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		{captureLoading}
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
index bf90600397..47c93aeda9 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
@@ -326,7 +326,7 @@
 					? `Edit NATS trigger ${initialPath}`
 					: `NATS trigger ${initialPath}`
 				: 'New NATS trigger'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render actionsSnippet()}
@@ -443,7 +443,7 @@
 				{path}
 				bind:natsResourcePath
 				bind:natsCfg
-				on:valid-config={({ detail }) => {
+				onvalidConfig={(detail) => {
 					isValid = detail
 				}}
 				defaultValues={useDefaultValues() ? defaultValues : undefined}
diff --git a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
index 66ff56189b..432cf388f1 100644
--- a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
+++ b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
@@ -61,7 +61,7 @@
 		<Button
 			disabled={!can_write}
 			loading={loadingConfiguration}
-			on:click={checkConnectionAndDatabaseConfiguration}
+			onclick={checkConnectionAndDatabaseConfiguration}
 			size="xs"
 			spacingSize="sm"
 			variant="default"
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte b/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte
index 410b7cef50..f4306db334 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresCapture.svelte
@@ -10,6 +10,11 @@
 		isFlow?: boolean
 		captureLoading?: boolean
 		triggerDeployed?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,7 +23,12 @@
 		isValid = false,
 		isFlow = false,
 		captureLoading = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 </script>
 
@@ -27,11 +37,11 @@
 		captureType="postgres"
 		disabled={!isValid}
 		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		{captureLoading}
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index b29508782d..d31fc80948 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -502,7 +502,7 @@
 					? `Edit Postgres trigger ${initialPath}`
 					: `Postgres trigger ${initialPath}`
 				: 'New Postgres trigger'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}{@render actionsSnippet()}{/snippet}
 			{@render content()}
@@ -608,7 +608,7 @@
 									btnClasses="ml-4"
 									variant="accent"
 									size="xs"
-									on:click={getTemplateScript}
+									onclick={getTemplateScript}
 									target="_blank"
 									{loading}
 									>Create from template
@@ -741,7 +741,7 @@
 													<div class="flex flex-col gap-3">
 														<ToggleButtonGroup
 															bind:selected={selectedSlotAction}
-															on:selected={() => {
+															onselected={() => {
 																replication_slot_name = ''
 															}}
 															disabled={!can_write}
@@ -764,7 +764,7 @@
 																	size="xs"
 																	variant="default"
 																	disabled={emptyStringTrimmed(replication_slot_name) || !can_write}
-																	on:click={createSlot}>Create</Button
+																	onclick={createSlot}>Create</Button
 																>
 															</div>
 														{:else}
@@ -788,7 +788,7 @@
 														<ToggleButtonGroup
 															selected={selectedPublicationAction}
 															disabled={!can_write}
-															on:selected={({ detail }) => {
+															onselected={(detail) => {
 																selectedPublicationAction = detail
 																if (selectedPublicationAction === 'create') {
 																	publication_name = `windmill_publication_${random_adj()}`
@@ -821,7 +821,7 @@
 																	disabled={emptyStringTrimmed(publication_name) ||
 																		(relations && relations.length === 0) ||
 																		!can_write}
-																	on:click={createPublication}>Create</Button
+																	onclick={createPublication}>Create</Button
 																>
 															</div>
 														{:else}
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 193a9805f3..62ea09b590 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -127,7 +127,7 @@
 		disabled={!can_write || disabled}
 		variant="default"
 		wrapperClasses="self-stretch"
-		on:click={listDatabasePublication}
+		onclick={listDatabasePublication}
 		startIcon={{ icon: RefreshCw }}
 		iconOnly
 	/>
@@ -136,13 +136,13 @@
 		size="xs"
 		variant="default"
 		disabled={emptyString(publication_name) || !can_write || disabled}
-		on:click={updatePublication}>Update</Button
+		onclick={updatePublication}>Update</Button
 	>
 	<Button
 		loading={deletingPublication}
 		size="xs"
 		variant="default"
 		disabled={emptyString(publication_name) || !can_write || disabled}
-		on:click={deletePublication}>Delete</Button
+		onclick={deletePublication}>Delete</Button
 	>
 </div>
diff --git a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
index a62c400f71..8563fe779f 100644
--- a/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/RelationPicker.svelte
@@ -74,7 +74,7 @@
 	<div class="grow-0 flex flex-row gap-2 w-full items-center">
 		<div class="grow-0">
 			<ToggleButtonGroup
-				on:selected={({ detail }) => {
+				onselected={(detail) => {
 					if (detail === 'all') {
 						cached = relations
 						relations = undefined
@@ -241,7 +241,7 @@
 										wrapperClasses="absolute -top-3 -right-3"
 										btnClasses="hidden group-hover:block hover:bg-red-500 hover:text-white p-2 rounded-full hover:border-red-500 transition-all duration-300"
 										size="xs"
-										on:click={() => {
+										onclick={() => {
 											if (pg14 && v.table_to_track.length > 1) {
 												updateRelationsFor(i, (r) => ({
 													...r,
@@ -262,7 +262,7 @@
 							{/each}
 							<AddPropertyFormV2
 								customName="Table"
-								on:add={({ detail }) => {
+								onadd={(detail) => {
 									addTable(detail.name, i)
 								}}
 								{disabled}
@@ -287,7 +287,7 @@
 						size="xs"
 						btnClasses="bg-surface-secondary hover:bg-red-500 hover:text-white p-2 rounded-full"
 						aria-label="Clear"
-						on:click={() => {
+						onclick={() => {
 							if (relations) {
 								relations = relations.filter((_, index) => index !== i)
 							}
@@ -304,7 +304,7 @@
 		<div class="grow min-w-0 pr-10">
 			<AddPropertyFormV2
 				customName="Schema"
-				on:add={({ detail }) => {
+				onadd={(detail) => {
 					if (relations == undefined || !Array.isArray(relations)) {
 						relations = getDefaultTableToTrack(pg14)
 					} else if (emptyStringTrimmed(detail.name)) {
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index ad1df7ae9a..512ead67b2 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -96,7 +96,7 @@
 	<Button
 		variant="default"
 		wrapperClasses="self-stretch"
-		on:click={listDatabaseSlot}
+		onclick={listDatabaseSlot}
 		startIcon={{ icon: RefreshCw }}
 		iconOnly
 		{disabled}
@@ -106,6 +106,6 @@
 		size="xs"
 		variant="default"
 		disabled={emptyString(replication_slot_name) || disabled}
-		on:click={deleteSlot}>Delete</Button
+		onclick={deleteSlot}>Delete</Button
 	>
 </div>
diff --git a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
index 4aca94c4b5..4026d2bdc6 100644
--- a/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/schedules/ScheduleEditorInner.svelte
@@ -662,7 +662,7 @@
 							size="sm"
 							variant="default"
 							disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
-							on:click={() => {
+							onclick={() => {
 								runScheduleNow(script_path, path, is_flow, $workspaceStore!)
 							}}
 						>
@@ -792,7 +792,7 @@
 								}}
 								size="xs"
 								bind:checked={isLatestCron}
-								on:change={onVersionChange}
+								onchange={onVersionChange}
 								disabled={!can_write}
 							/>
 						</div>
@@ -835,7 +835,7 @@
 							allowRefresh={can_write}
 							bind:itemKind
 							bind:scriptPath={script_path}
-							on:select={(e) => {
+							onselect={(e) => {
 								loadScript(e.detail.path)
 							}}
 							clearable
@@ -1270,7 +1270,7 @@
 					? `Edit schedule ${initialPath}`
 					: `View schedule ${initialPath}`
 				: 'New schedule'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}
 				<div class="flex flex-row gap-4 items-center">
diff --git a/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte b/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte
index d61e663d0c..7ab4aee58f 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsCapture.svelte
@@ -10,6 +10,11 @@
 		isFlow?: boolean
 		captureLoading?: boolean
 		triggerDeployed?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,7 +23,12 @@
 		hasPreprocessor = false,
 		isFlow = false,
 		captureLoading = false,
-		triggerDeployed = false
+		triggerDeployed = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 </script>
 
@@ -27,11 +37,11 @@
 		captureType="sqs"
 		disabled={isValid === false}
 		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		{captureLoading}
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
index 3ee60502ff..3464d94508 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorConfigSection.svelte
@@ -71,7 +71,7 @@
 
 						<ToggleButtonGroup
 							bind:selected={aws_auth_resource_type}
-							on:selected={() => {
+							onselected={() => {
 								aws_resource_path = ''
 							}}
 						>
@@ -124,7 +124,7 @@
 				<div class="mt-2">
 					<ToggleButtonGroup
 						selected={tab}
-						on:selected={({ detail }) => {
+						onselected={(detail) => {
 							if (detail === 'all') {
 								cached = message_attributes
 								message_attributes = ['All']
@@ -173,7 +173,7 @@
 				variant="accent"
 				size="sm"
 				startIcon={{ icon: Plus }}
-				on:click={() => {
+				onclick={() => {
 					variableEditor?.initNew()
 				}}
 			>
@@ -183,4 +183,4 @@
 	{/snippet}
 </ItemPicker>
 
-<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />
+<VariableEditor bind:this={variableEditor} oncreate={itemPicker.openDrawer} />
diff --git a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
index f688438789..ced3ebcfeb 100644
--- a/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/sqs/SqsTriggerEditorInner.svelte
@@ -312,7 +312,7 @@
 					? `Edit SQS trigger ${initialPath}`
 					: `SQS trigger ${initialPath}`
 				: 'New SQS trigger'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render actionsSnippet()}
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte
index b6392bf41b..4f976a4a11 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksCapture.svelte
@@ -15,6 +15,11 @@
 		captureInfo?: CaptureInfo | undefined
 		hasPreprocessor?: boolean
 		captureLoading?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +28,12 @@
 		runnableArgs,
 		captureInfo = undefined,
 		hasPreprocessor = false,
-		captureLoading = false
+		captureLoading = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 
 	let cleanedRunnableArgs = $derived(
@@ -50,13 +60,13 @@
 	<CaptureSection
 		{captureInfo}
 		disabled={false}
-		on:captureToggle
+		oncaptureToggle={oncaptureToggle}
 		captureType="webhook"
 		{captureLoading}
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{isFlow}
 		{hasPreprocessor}
 	>
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index 9bdf67ab94..15c69228b4 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -283,7 +283,7 @@ done`
 
 <UserSettings
 	bind:this={userSettings}
-	on:tokenCreated={(e) => {
+	ontokenCreated={(e) => {
 		token = e.detail
 		triggerTokens?.listTokens()
 	}}
@@ -301,7 +301,7 @@ done`
 					inputProps={{ placeholder: 'Paste your token here once created to alter examples below' }}
 					class="!text-xs !font-normal"
 				/>
-				<Button size="xs" variant="default" on:click={() => userSettings?.openDrawer()}>
+				<Button size="xs" variant="default" onclick={() => userSettings?.openDrawer()}>
 					Create a Webhook-specific Token
 					<Tooltip light>
 						The token will have a scope such that it can only be used to trigger this script. It is
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
index 7fb8307c33..8f6e847490 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
@@ -9,6 +9,11 @@
 		hasPreprocessor?: boolean
 		isFlow?: boolean
 		captureLoading?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -16,7 +21,12 @@
 		isValid = undefined,
 		hasPreprocessor = false,
 		isFlow = false,
-		captureLoading = false
+		captureLoading = false,
+		oncaptureToggle = undefined,
+		onapplyArgs = undefined,
+		onupdateSchema = undefined,
+		onaddPreprocessor = undefined,
+		ontestWithArgs = undefined
 	}: Props = $props()
 </script>
 
@@ -25,11 +35,11 @@
 		captureType="websocket"
 		disabled={isValid === false}
 		{captureInfo}
-		on:captureToggle
-		on:applyArgs
-		on:updateSchema
-		on:addPreprocessor
-		on:testWithArgs
+		oncaptureToggle={oncaptureToggle}
+		onapplyArgs={onapplyArgs}
+		onupdateSchema={onupdateSchema}
+		onaddPreprocessor={onaddPreprocessor}
+		ontestWithArgs={ontestWithArgs}
 		{hasPreprocessor}
 		{isFlow}
 		{captureLoading}
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
index 2549ed4c85..ceb949c94d 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketEditorConfigSection.svelte
@@ -105,7 +105,7 @@
 		<div class="mb-2">
 			<ToggleButtonGroup
 				selected={url?.startsWith('$') ? 'runnable' : 'static'}
-				on:selected={(ev) => {
+				onselected={(ev) => {
 					url = ev.detail === 'runnable' ? '$script:' : ''
 					url_runnable_args = {}
 				}}
@@ -130,7 +130,7 @@
 						allowFlow={true}
 						itemKind={url.startsWith('$flow:') ? 'flow' : 'script'}
 						initialPath={url.split(':')[1] ?? ''}
-						on:select={(ev) => {
+						onselect={(ev) => {
 							dirtyUrl = true
 							const { path, itemKind } = ev.detail
 							url = `$${itemKind}:${path ?? ''}`
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
index 61a807e101..96fe5db2e0 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
@@ -388,7 +388,7 @@
 					? `Edit WebSocket trigger ${initialPath}`
 					: `WebSocket trigger ${initialPath}`
 				: 'New WebSocket trigger'}
-			on:close={drawer.closeDrawer}
+			onclose={drawer.closeDrawer}
 		>
 			{#snippet actions()}
 				{@render actionsButtons()}
@@ -507,7 +507,7 @@
 
 				<Toggle
 					checked={can_return_message}
-					on:change={() => {
+					onchange={() => {
 						can_return_message = !can_return_message
 					}}
 					options={{
@@ -521,7 +521,7 @@
 
 				<Toggle
 					checked={can_return_error_result}
-					on:change={() => {
+					onchange={() => {
 						can_return_error_result = !can_return_error_result
 					}}
 					options={{
@@ -587,7 +587,7 @@
 											Raw JSON message (if a string, wrapping quotes will be discarded)
 										</div>
 										<JsonEditor
-											on:change={(ev) => {
+											onchange={(ev) => {
 												const { code } = ev.detail
 												initial_messages[i] = {
 													raw_message: code
@@ -604,7 +604,7 @@
 											allowFlow={true}
 											itemKind={v.runnable_result?.is_flow ? 'flow' : 'script'}
 											initialPath={v.runnable_result?.path ?? ''}
-											on:select={(ev) => {
+											onselect={(ev) => {
 												const { path, itemKind } = ev.detail
 												initial_messages[i] = {
 													runnable_result: {
@@ -668,7 +668,7 @@
 							variant="default"
 							size="xs"
 							btnClasses="mt-1"
-							on:click={() => {
+							onclick={() => {
 								if (initial_messages == undefined || !Array.isArray(initial_messages)) {
 									initial_messages = []
 								}
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderLiveTutorial.svelte b/frontend/src/lib/components/tutorials/FlowBuilderLiveTutorial.svelte
index f6c1fc559b..841f749ab8 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderLiveTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderLiveTutorial.svelte
@@ -29,9 +29,13 @@
 
 	interface Props {
 		index: number
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { index }: Props = $props()
+	let { index,
+		onerror = undefined,
+		onskipAll = undefined }: Props = $props()
 
 	let tutorial: Tutorial | undefined = undefined
 
@@ -215,8 +219,8 @@
 	index={index}
 	name="flow-live-tutorial"
 	tainted={isFlowTainted(flowStore.val)}
-	on:error
-	on:skipAll
+	onerror={onerror}
+	onskipAll={onskipAll}
 	getSteps={(driver) => {
 		const steps: DriveStep[] = [
 			{
diff --git a/frontend/src/lib/components/tutorials/RunsTutorial.svelte b/frontend/src/lib/components/tutorials/RunsTutorial.svelte
index 8f59a42f6b..ce3f317997 100644
--- a/frontend/src/lib/components/tutorials/RunsTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/RunsTutorial.svelte
@@ -13,9 +13,13 @@
 
 	interface Props {
 		index: number
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { index }: Props = $props()
+	let { index,
+		onerror = undefined,
+		onskipAll = undefined }: Props = $props()
 
 	let tutorial: Tutorial | undefined = $state(undefined)
 	let tutorialFlowPaths: string[] = $state([])
@@ -466,8 +470,8 @@
 	{index}
 	name="runs-tutorial"
 	tainted={false}
-	on:error
-	on:skipAll
+	onerror={onerror}
+	onskipAll={onskipAll}
 	getSteps={(driver) => {
 		return getTutorialSteps(driver)
 	}}
diff --git a/frontend/src/lib/components/tutorials/SkipTutorials.svelte b/frontend/src/lib/components/tutorials/SkipTutorials.svelte
index 6fd6ba254b..4fe3499df4 100644
--- a/frontend/src/lib/components/tutorials/SkipTutorials.svelte
+++ b/frontend/src/lib/components/tutorials/SkipTutorials.svelte
@@ -12,7 +12,7 @@
 		startIcon={{ icon: CheckCircle }}
 		variant="default"
 		btnClasses="font-normal"
-		on:click={() => {
+		onclick={() => {
 			dispatch('skipThis')
 		}}
 	>
@@ -23,7 +23,7 @@
 		startIcon={{ icon: CheckCircle }}
 		btnClasses="font-normal"
 		variant="default"
-		on:click={() => {
+		onclick={() => {
 			dispatch('skipAll')
 		}}
 	>
diff --git a/frontend/src/lib/components/tutorials/TroubleshootFlowTutorial.svelte b/frontend/src/lib/components/tutorials/TroubleshootFlowTutorial.svelte
index 4fa9909e02..bf0d522ccd 100644
--- a/frontend/src/lib/components/tutorials/TroubleshootFlowTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/TroubleshootFlowTutorial.svelte
@@ -12,9 +12,14 @@
 
 	interface Props {
 		index: number
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
-	let { index }: Props = $props()
+	let { index,
+		onerror = undefined,
+		onskipAll = undefined }: Props = $props()
 
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -245,8 +250,8 @@
 	index={index}
 	name="troubleshoot-flow"
 	tainted={false}
-	on:error
-	on:skipAll
+	onerror={onerror}
+	onskipAll={onskipAll}
 	getSteps={(driver) => {
 		const steps: DriveStep[] = [
 			{
diff --git a/frontend/src/lib/components/tutorials/TutorialControls.svelte b/frontend/src/lib/components/tutorials/TutorialControls.svelte
index c3ba79cdf8..acd64c8441 100644
--- a/frontend/src/lib/components/tutorials/TutorialControls.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialControls.svelte
@@ -39,7 +39,7 @@
 				size="xs2"
 				color="light"
 				startIcon={{ icon: ArrowLeft }}
-				on:click={() => {
+				onclick={() => {
 					dispatch('previous')
 					onprevious?.()
 				}}
@@ -50,7 +50,7 @@
 				size="xs2"
 				variant="accent"
 				endIcon={{ icon: ArrowRight }}
-				on:click={() => {
+				onclick={() => {
 					dispatch('next')
 					onnext?.()
 				}}
diff --git a/frontend/src/lib/components/tutorials/TutorialWrapper.svelte b/frontend/src/lib/components/tutorials/TutorialWrapper.svelte
index 34eaad50a0..94b55ff88b 100644
--- a/frontend/src/lib/components/tutorials/TutorialWrapper.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialWrapper.svelte
@@ -7,9 +7,13 @@
 		name?: string
 		onInstanceReady: (id: string, instance: any) => void
 		onSkipAll: () => void
+		onerror?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
-	let { id, component: Component, name, onInstanceReady, onSkipAll }: Props = $props()
+	let { id, component: Component, name, onInstanceReady, onSkipAll,
+		onerror = undefined,
+		onreload = undefined }: Props = $props()
 
 	let instance: any = $state(undefined)
 	const index = getTutorialIndex(id)
@@ -27,9 +31,9 @@
 		bind:this={instance}
 		{index}
 		{...(name ? { name } : {})}
-		on:error
-		on:skipAll={onSkipAll}
-		on:reload
+		onerror={onerror}
+		onskipAll={onSkipAll}
+		onreload={onreload}
 	/>
 {/if}
 
diff --git a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
index f2e14afaa6..50a877c56e 100644
--- a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
@@ -7,9 +7,13 @@
 	interface Props {
 		name: string;
 		index: number;
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { name, index }: Props = $props();
+	let { name, index,
+		onerror = undefined,
+		onskipAll = undefined }: Props = $props();
 
 	let tutorial: Tutorial | undefined = $state(undefined)
 
@@ -22,8 +26,8 @@
 	bind:this={tutorial}
 	{index}
 	{name}
-	on:error
-	on:skipAll
+	onerror={onerror}
+	onskipAll={onskipAll}
 	getSteps={(driver, options) => {
 		const steps: DriveStep[] = [
 			{
diff --git a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
index 8de12833dd..78282bdf70 100644
--- a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
@@ -11,9 +11,13 @@
 	interface Props {
 		name: string;
 		index: number;
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { name, index }: Props = $props();
+	let { name, index,
+		onerror = undefined,
+		onskipAll = undefined }: Props = $props();
 
 	let tutorial: Tutorial | undefined = $state(undefined)
 
@@ -42,8 +46,8 @@
 	bind:this={tutorial}
 	{index}
 	{name}
-	on:error
-	on:skipAll
+	onerror={onerror}
+	onskipAll={onskipAll}
 	getSteps={(driver) => [
 		{
 			popover: {
diff --git a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
index 1e96e8b121..a320e90d2a 100644
--- a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
@@ -4,9 +4,13 @@
 	interface Props {
 		name: string;
 		index: number;
+		onerror?: (...args: any[]) => any
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { name, index }: Props = $props();
+	let { name, index,
+		onerror = undefined,
+		onskipAll = undefined }: Props = $props();
 
 	let tutorial: Tutorial | undefined = $state(undefined)
 
@@ -19,8 +23,8 @@
 	bind:this={tutorial}
 	{index}
 	{name}
-	on:error
-	on:skipAll
+	onerror={onerror}
+	onskipAll={onskipAll}
 	getSteps={(driver) => [
 		{
 			popover: {
diff --git a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte
index 4251a67170..75c954e124 100644
--- a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte
@@ -10,9 +10,11 @@
 
 	interface Props {
 		index: number
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { index }: Props = $props()
+	let { index,
+		onskipAll = undefined }: Props = $props()
 
 	let tutorial: Tutorial | undefined = $state(undefined)
 
@@ -32,7 +34,7 @@
 	{index}
 	name="workspace-onboarding-operator"
 	tainted={false}
-	on:skipAll
+	onskipAll={onskipAll}
 	getSteps={(driver) => {
 		const steps: DriveStep[] = [
 			{
diff --git a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte
index cc73088b77..e60a3cf4ff 100644
--- a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte
@@ -8,9 +8,11 @@
 
 	interface Props {
 		index: number
+		onskipAll?: (...args: any[]) => any
 	}
 
-	let { index }: Props = $props()
+	let { index,
+		onskipAll = undefined }: Props = $props()
 
 	let tutorial: Tutorial | undefined = $state(undefined)
 
@@ -30,7 +32,7 @@
 	index={index}
 	name="workspace-onboarding"
 	tainted={false}
-	on:skipAll
+	onskipAll={onskipAll}
 	getSteps={(driver) => {
 		const steps: DriveStep[] = [
 			{
diff --git a/frontend/src/lib/components/wizards/AgChartWizard.svelte b/frontend/src/lib/components/wizards/AgChartWizard.svelte
index f70f986a71..442df0956c 100644
--- a/frontend/src/lib/components/wizards/AgChartWizard.svelte
+++ b/frontend/src/lib/components/wizards/AgChartWizard.svelte
@@ -76,7 +76,7 @@
 					disabledOptions={isEE ? [] : ['range-bar', 'range-area']}
 				/>
 
-				<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
+				<Button color="red" size="xs" onclick={removeDataset}>Remove dataset</Button>
 			</div>
 		{/if}
 	{/snippet}
diff --git a/frontend/src/lib/components/wizards/AgGridWizard.svelte b/frontend/src/lib/components/wizards/AgGridWizard.svelte
index 53632821cb..f35824964e 100644
--- a/frontend/src/lib/components/wizards/AgGridWizard.svelte
+++ b/frontend/src/lib/components/wizards/AgGridWizard.svelte
@@ -128,7 +128,7 @@
 				{#if !isActionsColumn}
 					<Label label="Editable value">
 						<Toggle
-							on:pointerdown={(e) => {
+							onpointerdown={(e) => {
 								e?.stopPropagation()
 							}}
 							options={{ right: 'Editable' }}
@@ -165,7 +165,7 @@
 
 				<Label label="Hide">
 					<Toggle
-						on:pointerdown={(e) => {
+						onpointerdown={(e) => {
 							e?.stopPropagation()
 						}}
 						options={{ right: 'Hide' }}
@@ -189,7 +189,7 @@
 							<Button
 								size="xs"
 								variant="default"
-								on:click={() => {
+								onclick={() => {
 									// @ts-ignore
 									value.valueFormatter = null
 									renderCount++
@@ -249,7 +249,7 @@
 							</Tooltip>
 						{/snippet}
 						<Toggle
-							on:pointerdown={(e) => {
+							onpointerdown={(e) => {
 								e?.stopPropagation()
 							}}
 							options={{ right: 'Enable filter' }}
diff --git a/frontend/src/lib/components/wizards/ChartJSWizard.svelte b/frontend/src/lib/components/wizards/ChartJSWizard.svelte
index fcd6a02a99..65a93e95a9 100644
--- a/frontend/src/lib/components/wizards/ChartJSWizard.svelte
+++ b/frontend/src/lib/components/wizards/ChartJSWizard.svelte
@@ -69,7 +69,7 @@
 					displayType={false}
 				/>
 
-				<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
+				<Button color="red" size="xs" onclick={removeDataset}>Remove dataset</Button>
 			</div>
 		{/if}
 	{/snippet}
diff --git a/frontend/src/lib/components/wizards/DBExplorerWizard.svelte b/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
index 6eb39ae4a6..6e282d7e3c 100644
--- a/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
+++ b/frontend/src/lib/components/wizards/DBExplorerWizard.svelte
@@ -156,7 +156,7 @@
 					{/snippet}
 					{#snippet action()}
 						<Toggle
-							on:pointerdown={(e) => {
+							onpointerdown={(e) => {
 								e?.stopPropagation()
 							}}
 							bind:checked={value.ignored}
@@ -182,7 +182,7 @@
 					{#snippet action()}
 						<Toggle
 							disabled={value?.isidentity === ColumnIdentity.Always}
-							on:pointerdown={(e) => {
+							onpointerdown={(e) => {
 								e?.stopPropagation()
 							}}
 							bind:checked={value.hideInsert}
@@ -209,7 +209,7 @@
 						options={{
 							right: `Override default value: ${value?.defaultvalue}`
 						}}
-						on:change={() => {
+						onchange={() => {
 							if (!value || !value.overrideDefaultValue) {
 								if (value) {
 									value.defaultValueNull = false
@@ -246,7 +246,7 @@
 									disabled={value.hideInsert &&
 										value?.defaultvalue !== null &&
 										!value?.overrideDefaultValue}
-									on:change={() => {
+									onchange={() => {
 										if (value?.defaultValueNull && value) {
 											value.defaultUserValue = null
 										}
@@ -282,7 +282,7 @@
 
 					<Label label="Editable value">
 						<Toggle
-							on:pointerdown={(e) => {
+							onpointerdown={(e) => {
 								e?.stopPropagation()
 							}}
 							options={{ right: 'Editable' }}
@@ -318,7 +318,7 @@
 
 					<Label label="Hide">
 						<Toggle
-							on:pointerdown={(e) => {
+							onpointerdown={(e) => {
 								e?.stopPropagation()
 							}}
 							options={{ right: 'Hide' }}
@@ -341,7 +341,7 @@
 							<Button
 								size="xs"
 								variant="default"
-								on:click={() => {
+								onclick={() => {
 									// @ts-ignore
 									value.valueFormatter = null
 									renderCount++
diff --git a/frontend/src/lib/components/wizards/PlotlyWizard.svelte b/frontend/src/lib/components/wizards/PlotlyWizard.svelte
index 7acbcd9ac9..eff6636745 100644
--- a/frontend/src/lib/components/wizards/PlotlyWizard.svelte
+++ b/frontend/src/lib/components/wizards/PlotlyWizard.svelte
@@ -128,15 +128,15 @@
 					placeholder={value.value?.['placeholder']}
 					customTitle={value.value?.['customTitle']}
 					displayType={false}
-					on:openConnection={() => {
+					onopenConnection={() => {
 						closeOnOutsideClick = false
 					}}
-					on:closeConnection={() => {
+					oncloseConnection={() => {
 						closeOnOutsideClick = true
 					}}
 				/>
 
-				<Button color="red" size="xs" on:click={removeDataset}>Remove dataset</Button>
+				<Button color="red" size="xs" onclick={removeDataset}>Remove dataset</Button>
 			</div>
 		{/if}
 	{/snippet}
diff --git a/frontend/src/lib/components/wizards/TableActionsWizard.svelte b/frontend/src/lib/components/wizards/TableActionsWizard.svelte
index 2156848e31..815c970250 100644
--- a/frontend/src/lib/components/wizards/TableActionsWizard.svelte
+++ b/frontend/src/lib/components/wizards/TableActionsWizard.svelte
@@ -75,7 +75,7 @@
 							size="xs"
 							startIcon={{ icon: Code }}
 							variant="default"
-							on:click={() => {
+							onclick={() => {
 								actionsOrder = undefined
 							}}
 						>
@@ -86,7 +86,7 @@
 							size="xs"
 							startIcon={{ icon: Code }}
 							variant="default"
-							on:click={() => {
+							onclick={() => {
 								actionsOrder = {
 									fieldType: 'text',
 									type: 'evalv2',
diff --git a/frontend/src/lib/components/wizards/TableColumnWizard.svelte b/frontend/src/lib/components/wizards/TableColumnWizard.svelte
index d1785f599a..1bea9ec210 100644
--- a/frontend/src/lib/components/wizards/TableColumnWizard.svelte
+++ b/frontend/src/lib/components/wizards/TableColumnWizard.svelte
@@ -48,7 +48,7 @@
 
 			<Label label="Show column">
 				<Toggle
-					on:pointerdown={(e) => {
+					onpointerdown={(e) => {
 						e?.stopPropagation()
 					}}
 					options={{ right: 'Hide column' }}
diff --git a/frontend/src/lib/components/workspaceSettings/AISettings.svelte b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
index 578358f266..411e44158d 100644
--- a/frontend/src/lib/components/workspaceSettings/AISettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/AISettings.svelte
@@ -193,7 +193,7 @@
 								right: details.label
 							}}
 							checked={!!aiProviders[provider]}
-							on:change={(e) => {
+							onchange={(e) => {
 								if (e.detail) {
 									aiProviders = {
 										...aiProviders,
@@ -311,7 +311,7 @@
 	<div>
 		<SettingCard label="Code completion">
 			<Toggle
-				on:change={(e) => {
+				onchange={(e) => {
 					if (e.detail) {
 						codeCompletionModel = autocompleteModels[0] ?? ''
 					} else {
diff --git a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
index b1d9066152..2fd5618be1 100644
--- a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
+++ b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
@@ -467,7 +467,7 @@
 							inputProps={{ disabled: !colorEnabled }}
 						/>
 						<Button
-							on:click={generateRandomColor}
+							onclick={generateRandomColor}
 							size="xs"
 							variant="default"
 							disabled={!colorEnabled}>Random</Button
@@ -563,7 +563,7 @@
 								>
 								<ToggleButtonGroup
 									selected={autoAdd ? 'add' : 'invite'}
-									on:selected={async (e) => {
+									onselected={async (e) => {
 										autoAdd = e.detail === 'add'
 									}}
 								>
@@ -580,7 +580,7 @@
 							<span class="text-xs text-secondary font-normal">Role of the auto-invited users</span>
 							<ToggleButtonGroup
 								selected={operatorOnly ? 'operator' : 'developer'}
-								on:selected={(e) => {
+								onselected={(e) => {
 									operatorOnly = e.detail == 'operator'
 								}}
 							>
@@ -609,7 +609,7 @@
 						!name ||
 						(!automateUsernameCreation && (errorUser != '' || !username)) ||
 						!id}
-					on:click={createOrForkWorkspace}
+					onclick={createOrForkWorkspace}
 				>
 					{#if isFork}
 						Fork workspace
diff --git a/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte b/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
index 935d9e5f0e..27126b8756 100644
--- a/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
@@ -284,14 +284,14 @@
 					{/if}
 				</Cell>
 				<Cell class="w-12">
-					<CloseButton small on:close={() => removeDataTable(dataTableIndex)} />
+					<CloseButton small onclose={() => removeDataTable(dataTableIndex)} />
 				</Cell>
 			</Row>
 		{/each}
 		<Row class="!border-0">
 			<Cell colspan={tableHeadNames.length} class="pt-0 pb-2">
 				<div class="flex justify-center">
-					<Button size="sm" btnClasses="max-w-fit" variant="default" on:click={onNewDataTable}>
+					<Button size="sm" btnClasses="max-w-fit" variant="default" onclick={onNewDataTable}>
 						<Plus /> New Data Table
 					</Button>
 				</div>
diff --git a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
index c7bedef359..0475136d2c 100644
--- a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
@@ -386,14 +386,14 @@
 					</div>
 				</Cell>
 				<Cell class="w-12">
-					<CloseButton small on:close={() => removeDucklake(ducklakeIndex)} />
+					<CloseButton small onclose={() => removeDucklake(ducklakeIndex)} />
 				</Cell>
 			</Row>
 		{/each}
 		<Row class="!border-0">
 			<Cell colspan={tableHeadNames.length} class="pt-0 pb-2">
 				<div class="flex justify-center">
-					<Button size="sm" btnClasses="max-w-fit" variant="default" on:click={onNewDucklake}>
+					<Button size="sm" btnClasses="max-w-fit" variant="default" onclick={onNewDucklake}>
 						<Plus /> New ducklake
 					</Button>
 				</div>
diff --git a/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte b/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte
index c9f208a62b..3bab0f45bf 100644
--- a/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/GitSyncFilterSettings.svelte
@@ -196,7 +196,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.scripts}
-									on:change={(e) => updateIncludeType('scripts', e.detail)}
+									onchange={(e) => updateIncludeType('scripts', e.detail)}
 									options={{ right: capitalize('scripts') }}
 								/>
 							</div>
@@ -204,7 +204,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.flows}
-									on:change={(e) => updateIncludeType('flows', e.detail)}
+									onchange={(e) => updateIncludeType('flows', e.detail)}
 									options={{ right: capitalize('flows') }}
 								/>
 							</div>
@@ -212,7 +212,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.apps}
-									on:change={(e) => updateIncludeType('apps', e.detail)}
+									onchange={(e) => updateIncludeType('apps', e.detail)}
 									options={{ right: capitalize('apps') }}
 								/>
 							</div>
@@ -220,7 +220,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.folders}
-									on:change={(e) => updateIncludeType('folders', e.detail)}
+									onchange={(e) => updateIncludeType('folders', e.detail)}
 									options={{ right: capitalize('folders') }}
 								/>
 							</div>
@@ -228,7 +228,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.resourceTypes}
-									on:change={(e) => updateIncludeType('resourceTypes', e.detail)}
+									onchange={(e) => updateIncludeType('resourceTypes', e.detail)}
 									options={{ right: capitalize('resourceTypes') }}
 								/>
 							</div>
@@ -236,7 +236,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.resources}
-									on:change={(e) => updateIncludeType('resources', e.detail)}
+									onchange={(e) => updateIncludeType('resources', e.detail)}
 									options={{ right: capitalize('resources') }}
 								/>
 							</div>
@@ -244,7 +244,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.variables}
-									on:change={(e) => updateIncludeType('variables', e.detail)}
+									onchange={(e) => updateIncludeType('variables', e.detail)}
 									options={{ right: 'Variables' }}
 								/>
 								<span class="text-gray-400">-</span>
@@ -252,7 +252,7 @@
 									size="xs"
 									disabled={!typeToggles.variables}
 									checked={typeToggles.secrets}
-									on:change={(e) => updateIncludeType('secrets', e.detail)}
+									onchange={(e) => updateIncludeType('secrets', e.detail)}
 									options={{ left: 'Include secrets' }}
 								/>
 							</div>
@@ -260,7 +260,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.schedules}
-									on:change={(e) => updateIncludeType('schedules', e.detail)}
+									onchange={(e) => updateIncludeType('schedules', e.detail)}
 									options={{ right: capitalize('schedules') }}
 								/>
 							</div>
@@ -268,7 +268,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.users}
-									on:change={(e) => updateIncludeType('users', e.detail)}
+									onchange={(e) => updateIncludeType('users', e.detail)}
 									options={{ right: capitalize('users') }}
 								/>
 							</div>
@@ -276,7 +276,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.groups}
-									on:change={(e) => updateIncludeType('groups', e.detail)}
+									onchange={(e) => updateIncludeType('groups', e.detail)}
 									options={{ right: capitalize('groups') }}
 								/>
 							</div>
@@ -284,7 +284,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.triggers}
-									on:change={(e) => updateIncludeType('triggers', e.detail)}
+									onchange={(e) => updateIncludeType('triggers', e.detail)}
 									options={{ right: capitalize('triggers') }}
 								/>
 							</div>
@@ -292,7 +292,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.settings}
-									on:change={(e) => updateIncludeType('settings', e.detail)}
+									onchange={(e) => updateIncludeType('settings', e.detail)}
 									options={{ right: 'Workspace settings' }}
 								/>
 							</div>
@@ -300,7 +300,7 @@
 								<Toggle
 									size="xs"
 									checked={typeToggles.key}
-									on:change={(e) => updateIncludeType('key', e.detail)}
+									onchange={(e) => updateIncludeType('key', e.detail)}
 									options={{ right: 'Encryption key' }}
 								/>
 							</div>
diff --git a/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte b/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte
index 2b067e7029..351d630210 100644
--- a/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte
+++ b/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte
@@ -297,7 +297,7 @@
 			variant="accent"
 			unifiedSize="md"
 			disabled={!canSave}
-			on:click={isCreateMode ? create : save}
+			onclick={isCreateMode ? create : save}
 			startIcon={{ icon: isCreateMode ? Plus : Save }}
 		>
 			{isCreateMode ? 'Create Rule' : 'Save Rule'}
diff --git a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
index 4389a2967f..316db86210 100644
--- a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
@@ -231,7 +231,7 @@
 						{#if tableRow[0] !== null}
 							<CloseButton
 								small
-								on:close={() => {
+								onclose={() => {
 									if (s3ResourceSettings.secondaryStorage) {
 										s3ResourceSettings.secondaryStorage.splice(idx - 1, 1)
 										s3ResourceSettings.secondaryStorage = [...s3ResourceSettings.secondaryStorage]
@@ -250,7 +250,7 @@
 							btnClasses="max-w-fit"
 							variant="default"
 							disabled={!s3ResourceSettings.resourcePath}
-							on:click={() => {
+							onclick={() => {
 								if (s3ResourceSettings.secondaryStorage === undefined) {
 									s3ResourceSettings.secondaryStorage = []
 								}
@@ -430,7 +430,7 @@
 			</div>
 		{/each}
 	</div>
-	<Button size="xs" variant="default" on:click={() => rules?.push({ pattern: '', allow: [] })}>
+	<Button size="xs" variant="default" onclick={() => rules?.push({ pattern: '', allow: [] })}>
 		<Plus size={14} />
 		Add permission rule
 	</Button>
diff --git a/frontend/src/lib/components/workspaceSettings/WorkspaceDependenciesSettings.svelte b/frontend/src/lib/components/workspaceSettings/WorkspaceDependenciesSettings.svelte
index b2e95f39c3..45ba288d7c 100644
--- a/frontend/src/lib/components/workspaceSettings/WorkspaceDependenciesSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/WorkspaceDependenciesSettings.svelte
@@ -226,7 +226,7 @@
 
 <WorkspaceDependenciesEditor
 	bind:this={workspaceDependenciesEditor}
-	on:create={loadWorkspaceDependencies}
+	oncreate={loadWorkspaceDependencies}
 />
 
 <SearchItems
@@ -283,7 +283,7 @@
 			<div class="text-sm text-secondary mb-4">
 				Try changing the filters or creating new enforced dependencies
 			</div>
-			<Button startIcon={{ icon: Plus }} on:click={createNewWorkspaceDependencies}>
+			<Button startIcon={{ icon: Plus }} onclick={createNewWorkspaceDependencies}>
 				Create your first enforced dependencies
 			</Button>
 		</div>
@@ -361,7 +361,7 @@
 									variant="border"
 									color="light"
 									startIcon={{ icon: Eye }}
-									on:click={() => viewWorkspaceDependencies(deps)}
+									onclick={() => viewWorkspaceDependencies(deps)}
 								>
 									View
 								</Button>
@@ -370,7 +370,7 @@
 									variant="border"
 									color="light"
 									startIcon={{ icon: Edit }}
-									on:click={() => editWorkspaceDependencies(deps)}
+									onclick={() => editWorkspaceDependencies(deps)}
 								>
 									Edit
 								</Button>
@@ -379,7 +379,7 @@
 									size="xs"
 									variant="border"
 									color="gray"
-									on:click={() => archiveWorkspaceDependencies(deps)}
+									onclick={() => archiveWorkspaceDependencies(deps)}
 									title="Archive"
 								>
 									Archive
@@ -388,7 +388,7 @@
 									size="xs"
 									variant="border"
 									color="red"
-									on:click={() => deleteWorkspaceDependencies(deps)}
+									onclick={() => deleteWorkspaceDependencies(deps)}
 									title="Delete"
 								>
 									Delete
@@ -397,7 +397,7 @@
 									size="xs"
 									variant="border"
 									color="gray"
-									on:click={() => viewReferencedFrom(deps)}
+									onclick={() => viewReferencedFrom(deps)}
 									title="Referenced From"
 								>
 									Refs
@@ -412,7 +412,7 @@
 </div>
 
 <Drawer bind:this={viewDrawer} size="900px">
-	<DrawerContent title="View Requirement - {viewPath}" on:close={viewDrawer?.closeDrawer}>
+	<DrawerContent title="View Requirement - {viewPath}" onclose={viewDrawer?.closeDrawer}>
 		{#snippet actions()}
 			<div class="flex items-center gap-2">
 				<Code2 size={16} class="text-secondary" />
diff --git a/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte b/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte
index 6d7a72bcc6..a2351b2d69 100644
--- a/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte
+++ b/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte
@@ -70,7 +70,7 @@
 <Drawer bind:this={ruleDrawer}>
 	<DrawerContent
 		title={selectedRule ? `Protection Rule: ${selectedRule.name}` : 'New Protection Rule'}
-		on:close={ruleDrawer?.closeDrawer}
+		onclose={ruleDrawer?.closeDrawer}
 	>
 		<RulesetEditor
 			rule={selectedRule}
@@ -97,7 +97,7 @@
 		unifiedSize="md"
 		variant="accent"
 		startIcon={{ icon: Plus }}
-		on:click={() => {
+		onclick={() => {
 			selectedRule = undefined
 			ruleDrawer?.openDrawer()
 		}}
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 4a1114710b..805198029b 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -546,7 +546,7 @@
 										</Menubar>
 										<MenuButton
 											stopPropagationOnClick={true}
-											on:click={() => openSearchModal()}
+											onclick={() => openSearchModal()}
 											isCollapsed={false}
 											icon={Search}
 											label="Search"
@@ -555,7 +555,7 @@
 										/>
 										<MenuButton
 											stopPropagationOnClick={true}
-											on:click={() => aiChatManager.toggleOpen()}
+											onclick={() => aiChatManager.toggleOpen()}
 											isCollapsed={false}
 											icon={WandSparkles}
 											iconProps={{
@@ -625,7 +625,7 @@
 								</Menubar>
 								<MenuButton
 									stopPropagationOnClick={true}
-									on:click={() => openSearchModal()}
+									onclick={() => openSearchModal()}
 									{isCollapsed}
 									icon={Search}
 									label="Search"
@@ -634,7 +634,7 @@
 								/>
 								<MenuButton
 									stopPropagationOnClick={true}
-									on:click={() => aiChatManager.toggleOpen()}
+									onclick={() => aiChatManager.toggleOpen()}
 									{isCollapsed}
 									icon={WandSparkles}
 									iconProps={{
@@ -738,7 +738,7 @@
 								</Menubar>
 								<MenuButton
 									stopPropagationOnClick={true}
-									on:click={() => openSearchModal()}
+									onclick={() => openSearchModal()}
 									{isCollapsed}
 									icon={Search}
 									label="Search"
@@ -747,7 +747,7 @@
 								/>
 								<MenuButton
 									stopPropagationOnClick={true}
-									on:click={() => aiChatManager.toggleOpen()}
+									onclick={() => aiChatManager.toggleOpen()}
 									{isCollapsed}
 									icon={WandSparkles}
 									iconProps={{
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index 9f7c9b493c..134bb717a5 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -132,7 +132,7 @@
 </script>
 
 <Drawer bind:this={codeViewer} size="900px">
-	<DrawerContent title={codeViewerObj?.summary ?? ''} on:close={codeViewer.closeDrawer}>
+	<DrawerContent title={codeViewerObj?.summary ?? ''} onclose={codeViewer.closeDrawer}>
 		{#snippet actions()}
 			<Button
 				href="{$hubBaseUrlStore}/scripts/{codeViewerObj?.app ?? ''}/{codeViewerObj?.ask_id ?? 0}"
@@ -168,7 +168,7 @@
 </Drawer>
 
 <Drawer bind:this={flowViewer} size="1200px">
-	<DrawerContent title="Hub flow" on:close={flowViewer.closeDrawer}>
+	<DrawerContent title="Hub flow" onclose={flowViewer.closeDrawer}>
 		{#snippet actions()}
 			<Button
 				href="{$hubBaseUrlStore}/flows/{flowViewerFlow?.flow?.id}"
@@ -210,7 +210,7 @@
 </Drawer>
 
 <Drawer bind:this={appViewer} size="1200px">
-	<DrawerContent title="Hub app" on:close={appViewer.closeDrawer}>
+	<DrawerContent title="Hub app" onclose={appViewer.closeDrawer}>
 		{#snippet actions()}
 			<Button
 				href="{$hubBaseUrlStore}/apps/{appViewerApp?.app?.id}"
@@ -311,7 +311,7 @@
 					{#snippet toggleKinds()}
 						<ToggleButtonGroup
 							bind:selected={subtab}
-							onSelected={(v) => {
+							onselected={(v) => {
 								setQuery(page.url, 'kind', v, window.location.hash)
 							}}
 							noWFull
@@ -345,19 +345,19 @@
 					{/snippet}
 
 					{#if subtab == 'script'}
-						<PickHubScript syncQuery bind:filter on:pick={(e) => viewCode(e.detail)}>
+						<PickHubScript syncQuery bind:filter onpick={(e) => viewCode(e)}>
 							{#snippet children()}
 								{@render toggleKinds?.()}
 							{/snippet}
 						</PickHubScript>
 					{:else if subtab == 'flow'}
-						<PickHubFlow syncQuery bind:filter on:pick={(e) => viewFlow(e.detail)}>
+						<PickHubFlow syncQuery bind:filter onpick={(e) => viewFlow(e)}>
 							{#snippet children()}
 								{@render toggleKinds?.()}
 							{/snippet}
 						</PickHubFlow>
 					{:else if subtab == 'app'}
-						<PickHubApp syncQuery bind:filter on:pick={(e) => viewApp(e.detail)}>
+						<PickHubApp syncQuery bind:filter onpick={(e) => viewApp(e)}>
 							{#snippet children()}
 								{@render toggleKinds?.()}
 							{/snippet}
diff --git a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
index 471a3c1643..a6f54c941f 100644
--- a/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte
@@ -225,7 +225,7 @@
 						app.path = url
 					}
 				}}
-				on:restore={onRestore}
+				onrestore={onRestore}
 				summary={app.summary}
 				app={app.value}
 				newPath={app.path}
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
index 46cd0c3d20..a6639288c0 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
@@ -573,7 +573,7 @@
 				<Button
 					variant="default"
 					size="sm"
-					on:click={() => startApp(false)}
+					onclick={() => startApp(false)}
 					disabled={!templates[selectedTemplateIndex] || newSchemaAlreadyExists}
 				>
 					Start without AI
@@ -581,7 +581,7 @@
 				{#if isAiEnabled}
 					<Button
 						variant="accent"
-						on:click={() => startApp(true)}
+						onclick={() => startApp(true)}
 						disabled={!templates[selectedTemplateIndex] ||
 							!initialPrompt.trim() ||
 							newSchemaAlreadyExists}
@@ -597,7 +597,7 @@
 {/if}
 {#key reloadCounter}
 	<RawAppEditor
-		on:savedNewAppPath={(event) => {
+		onsavedNewAppPath={(event) => {
 			goto(`/apps_raw/edit/${event.detail}`)
 		}}
 		bind:files
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
index ad20a8cbe1..470c98f4ba 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
@@ -226,11 +226,11 @@
 	{#key redraw}
 		<div class="h-screen">
 			<RawAppEditor
-				on:savedNewAppPath={(event) => {
+				onsavedNewAppPath={(event) => {
 					goto(`/apps_raw/edit/${event.detail}`)
 					newPath = event.detail
 				}}
-				on:restore={onRestore}
+				onrestore={onRestore}
 				bind:files
 				bind:runnables
 				bind:data
diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
index 601494c292..e525315195 100644
--- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
@@ -216,7 +216,7 @@
 {/if}
 
 <Drawer bind:this={auditLogDrawer}>
-	<DrawerContent title="Log details" on:close={auditLogDrawer.closeDrawer}>
+	<DrawerContent title="Log details" onclose={auditLogDrawer.closeDrawer}>
 		{#if logs}
 			<AuditLogDetails {logs} {selectedId} />
 		{/if}
diff --git a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
index 59383b8d59..2b486cf073 100644
--- a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
@@ -69,7 +69,7 @@
 			size="md"
 			btnClasses="w-full h-8"
 			variant="default"
-			on:click={loadConcurrencyGroupsOnce}
+			onclick={loadConcurrencyGroupsOnce}
 		>
 			<RefreshCw class={concurrencyGroupsLoading ? 'animate-spin' : ''} size="xs" />Refresh
 		</Button>
@@ -105,7 +105,7 @@
 											color="light"
 											btnClasses="justify-center w-12"
 											startIcon={{ icon: Trash, classes: 'text-red-500' }}
-											on:click={() => {
+											onclick={() => {
 												deleteConcurrencyGroup(concurrency_key)
 											}}
 											iconOnly={true}
diff --git a/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte
index 450352fbab..7c916de3ee 100644
--- a/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte
@@ -260,7 +260,7 @@
 					unifiedSize="md"
 					variant="accent"
 					startIcon={{ icon: Plus }}
-					on:click={() => emailTriggerEditor?.openNew(false)}
+					onclick={() => emailTriggerEditor?.openNew(false)}
 				>
 					New&nbsp;email trigger
 				</Button>
@@ -370,7 +370,7 @@
 
 								<div class="flex gap-2 items-center justify-end">
 									<Button
-										on:click={() => copyToClipboard(emailAddress)}
+										onclick={() => copyToClipboard(emailAddress)}
 										variant="subtle"
 										unifiedSize="md"
 										startIcon={{ icon: ClipboardCopy }}
@@ -378,7 +378,7 @@
 										Copy email address
 									</Button>
 									<Button
-										on:click={() => emailTriggerEditor?.openEdit(path, is_flow)}
+										onclick={() => emailTriggerEditor?.openEdit(path, is_flow)}
 										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
@@ -492,7 +492,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 5a8ebeb253..5b2e2a80b2 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -472,7 +472,7 @@
 <ShareModal bind:this={shareModal} />
 <MoveDrawer
 	bind:this={moveDrawer}
-	on:update={async (e) => {
+	onupdate={async (e) => {
 		await goto('/flows/get/' + e.detail + `?workspace=${$workspaceStore}`)
 		loadFlow()
 	}}
@@ -495,7 +495,7 @@
 >
 	{#snippet header()}
 		<DetailPageHeader
-			on:seeTriggers={() => {
+			onseeTriggers={() => {
 				rightPaneSelected = 'triggers'
 			}}
 			{mainButtons}
@@ -645,7 +645,7 @@
 													rightTooltip: 'Fill args from JSON'
 												}}
 												lightMode
-												on:change={(e) => {
+												onchange={(e) => {
 													runForm?.setCode(JSON.stringify(args ?? {}, null, '\t'))
 												}}
 											/>
@@ -696,7 +696,7 @@
 							{flow}
 							noSide={true}
 							minHeight={graphMinHeight}
-							on:select={(e) => {
+							onselect={(e) => {
 								if (e.detail) {
 									stepDetail = e.detail
 									rightPaneSelected = 'flow_step'
@@ -705,7 +705,7 @@
 									rightPaneSelected = 'saved_inputs'
 								}
 							}}
-							on:triggerDetail={(e) => {
+							ontriggerDetail={(e) => {
 								rightPaneSelected = 'triggers'
 							}}
 							noBorder={true}
@@ -724,7 +724,7 @@
 			{isValid}
 			args={args ?? {}}
 			bind:inputSelected
-			on:selected_args={(e) => {
+			onselected_args={(e) => {
 				const nargs = JSON.parse(JSON.stringify(e.detail))
 				args = nargs
 				if (jsonView) {
@@ -769,7 +769,7 @@
 					noSide={false}
 					noBorder
 					minHeight={flowGraphHeight}
-					on:select={(e) => {
+					onselect={(e) => {
 						if (e.detail) {
 							stepDetail = e.detail
 							rightPaneSelected = 'flow_step'
@@ -778,7 +778,7 @@
 							rightPaneSelected = 'saved_inputs'
 						}
 					}}
-					on:triggerDetail={(e) => {
+					ontriggerDetail={(e) => {
 						rightPaneSelected = 'triggers'
 					}}
 				/>
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index cdc194cedc..c4968d3841 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -77,8 +77,8 @@
 </script>
 
 <Drawer bind:this={folderDrawer}>
-	<DrawerContent title="Folder {editFolderName}" on:close={folderDrawer.closeDrawer}>
-		<FolderEditor on:update={loadFolders} name={editFolderName} />
+	<DrawerContent title="Folder {editFolderName}" onclose={folderDrawer.closeDrawer}>
+		<FolderEditor onupdate={loadFolders} name={editFolderName} />
 	</DrawerContent>
 </Drawer>
 
@@ -117,7 +117,7 @@
 								variant="accent"
 								startIcon={{ icon: Plus }}
 								disabled={!newFolderName}
-								on:click={() => {
+								onclick={() => {
 									addFolder()
 									close()
 								}}
diff --git a/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte b/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte
index 4e729e5ac6..08ea23056c 100644
--- a/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/forks/compare/+page.svelte
@@ -62,7 +62,7 @@
 		<!-- 	{comparison} -->
 		<!-- 	sourceWorkspace={currentWorkspaceId} -->
 		<!-- 	targetWorkspace={parentWorkspaceId} -->
-		<!-- 	on:deployed={() => { -->
+		<!-- 	ondeployed={() => { -->
 		<!-- 		sendUserToast('Changes deployed successfully') -->
 		<!-- 	}} -->
 		<!-- /> -->
diff --git a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
index e1e44a4ecf..47cca119fd 100644
--- a/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte
@@ -258,10 +258,10 @@
 	title="Delete GCP Pub/Sub trigger"
 	confirmationText="Remove"
 	loading={isDeleting}
-	on:canceled={() => {
+	oncanceled={() => {
 		deleteGcpTriggerCallback = undefined
 	}}
-	on:confirmed={async () => {
+	onconfirmed={async () => {
 		if (deleteGcpTriggerCallback) {
 			isDeleting = true
 			if (deleteSubscription && deleteSubscriptionCallback) {
@@ -306,7 +306,7 @@
 			unifiedSize="md"
 			variant="accent"
 			startIcon={{ icon: Plus }}
-			on:click={() => gcpTriggerEditor?.openNew(false)}
+			onclick={() => gcpTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;GCP Pub/Sub trigger
 		</Button>
@@ -453,7 +453,7 @@
 							<div class="flex gap-2 items-center justify-end">
 								{#if delivery_type === 'push'}
 									<Button
-										on:click={() =>
+										onclick={() =>
 											copyToClipboard(getHttpRoute('gcp/w', path, true, workspace_id))}
 										variant="subtle"
 										size="xs"
@@ -463,7 +463,7 @@
 									</Button>
 								{/if}
 								<Button
-									on:click={() => gcpTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => gcpTriggerEditor?.openEdit(path, is_flow)}
 									size="xs"
 									startIcon={canWrite
 										? { icon: Pen }
@@ -587,7 +587,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
index f43b5787b5..7ae25476cd 100644
--- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
@@ -72,8 +72,8 @@
 </script>
 
 <Drawer bind:this={groupDrawer}>
-	<DrawerContent title="Group {editGroupName}" on:close={groupDrawer.closeDrawer}>
-		<GroupEditor on:update={loadGroups} name={editGroupName} />
+	<DrawerContent title="Group {editGroupName}" onclose={groupDrawer.closeDrawer}>
+		<GroupEditor onupdate={loadGroups} name={editGroupName} />
 	</DrawerContent>
 </Drawer>
 
@@ -115,7 +115,7 @@
 									variant="accent"
 									startIcon={{ icon: Plus }}
 									disabled={!newGroupName}
-									on:click={() => {
+									onclick={() => {
 										addGroup()
 										close()
 									}}
diff --git a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
index 4723a974da..15bddbdd49 100644
--- a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
@@ -41,8 +41,8 @@
 </script>
 
 <Drawer bind:this={groupDrawer}>
-	<DrawerContent title="Instance Group {editGroupName}" on:close={groupDrawer?.closeDrawer}>
-		<InstanceGroupEditor on:update={loadInstanceGroups} name={editGroupName} />
+	<DrawerContent title="Instance Group {editGroupName}" onclose={groupDrawer?.closeDrawer}>
+		<InstanceGroupEditor onupdate={loadInstanceGroups} name={editGroupName} />
 	</DrawerContent>
 </Drawer>
 
@@ -64,7 +64,7 @@
 								size="md"
 								startIcon={{ icon: Plus }}
 								disabled={!newGroupName}
-								on:click={() => {
+								onclick={() => {
 									addInstanceGroup()
 									close()
 								}}
@@ -111,7 +111,7 @@
 									><Button
 										variant="default"
 										destructive
-										on:click={async () => {
+										onclick={async () => {
 											await GroupService.deleteInstanceGroup({ name })
 											sendUserToast(`Instance group ${name} deleted`)
 											loadInstanceGroups()
diff --git a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
index b514b62476..62ad6053e2 100644
--- a/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte
@@ -270,7 +270,7 @@
 				unifiedSize="md"
 				variant="accent"
 				startIcon={{ icon: Plus }}
-				on:click={() => kafkaTriggerEditor?.openNew(false)}
+				onclick={() => kafkaTriggerEditor?.openNew(false)}
 			>
 				New&nbsp;Kafka trigger
 			</Button>
@@ -422,7 +422,7 @@
 
 								<div class="flex gap-2 items-center justify-end">
 									<Button
-										on:click={() => kafkaTriggerEditor?.openEdit(path, is_flow)}
+										onclick={() => kafkaTriggerEditor?.openEdit(path, is_flow)}
 										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
@@ -531,7 +531,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
index 2405f759f5..3b5ae8d90e 100644
--- a/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte
@@ -258,7 +258,7 @@
 			unifiedSize="md"
 			variant="accent"
 			startIcon={{ icon: Plus }}
-			on:click={() => mqttTriggerEditor?.openNew(false)}
+			onclick={() => mqttTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;MQTT trigger
 		</Button>
@@ -398,7 +398,7 @@
 
 							<div class="flex gap-2 items-center justify-end">
 								<Button
-									on:click={() => mqttTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => mqttTriggerEditor?.openEdit(path, is_flow)}
 									unifiedSize="md"
 									startIcon={canWrite
 										? { icon: Pen }
@@ -505,7 +505,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/native_triggers/[service_name]/+page.svelte b/frontend/src/routes/(root)/(logged)/native_triggers/[service_name]/+page.svelte
index fce11df6b9..a4f7711fa9 100644
--- a/frontend/src/routes/(root)/(logged)/native_triggers/[service_name]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/native_triggers/[service_name]/+page.svelte
@@ -213,7 +213,7 @@
 				unifiedSize="md"
 				variant="accent"
 				startIcon={{ icon: Plus }}
-				on:click={() => editor?.openNew()}
+				onclick={() => editor?.openNew()}
 				disabled={!serviceAvailable}
 			>
 				New&nbsp;{serviceConfig?.serviceDisplayName || serviceName} trigger
diff --git a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
index aa7e97b2f9..7f1d1ef9d9 100644
--- a/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte
@@ -269,7 +269,7 @@
 				unifiedSize="md"
 				variant="accent"
 				startIcon={{ icon: Plus }}
-				on:click={() => natsTriggerEditor?.openNew(false)}
+				onclick={() => natsTriggerEditor?.openNew(false)}
 			>
 				New&nbsp;NATS trigger
 			</Button>
@@ -421,7 +421,7 @@
 
 								<div class="flex gap-2 items-center justify-end">
 									<Button
-										on:click={() => natsTriggerEditor?.openEdit(path, is_flow)}
+										onclick={() => natsTriggerEditor?.openEdit(path, is_flow)}
 										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
@@ -529,7 +529,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
index 266c075edf..32ab140796 100644
--- a/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte
@@ -261,11 +261,11 @@
 	title="Delete Postgres trigger"
 	confirmationText="Remove"
 	loading={isDeleting}
-	on:canceled={() => {
+	oncanceled={() => {
 		isDeleting = false
 		deletePostgresTriggerCallback = undefined
 	}}
-	on:confirmed={async () => {
+	onconfirmed={async () => {
 		if (deletePostgresTriggerCallback) {
 			let msg: string
 			isDeleting = true
@@ -333,7 +333,7 @@
 			unifiedSize="md"
 			variant="accent"
 			startIcon={{ icon: Plus }}
-			on:click={() => postgresTriggerEditor?.openNew(false)}
+			onclick={() => postgresTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;Postgres trigger
 		</Button>
@@ -475,7 +475,7 @@
 
 							<div class="flex gap-2 items-center justify-end">
 								<Button
-									on:click={() => postgresTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => postgresTriggerEditor?.openEdit(path, is_flow)}
 									size="xs"
 									startIcon={canWrite
 										? { icon: Pen }
@@ -608,7 +608,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/replay/+page.svelte b/frontend/src/routes/(root)/(logged)/replay/+page.svelte
index 69690d1cec..7d02c08783 100644
--- a/frontend/src/routes/(root)/(logged)/replay/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/replay/+page.svelte
@@ -33,7 +33,7 @@
 <div class="max-w-7xl mx-auto px-4 py-8 w-full">
 	{#if recording}
 		<div class="flex justify-end mb-4">
-			<Button variant="border" size="xs" on:click={quit} startIcon={{ icon: Upload }}>
+			<Button variant="border" size="xs" onclick={quit} startIcon={{ icon: Upload }}>
 				Load another recording
 			</Button>
 		</div>
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 0601fe0378..e1148d9b66 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -568,10 +568,10 @@
 	open={Boolean(deleteConfirmedCallback)}
 	title="Remove resource"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		deleteConfirmedCallback = undefined
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		if (deleteConfirmedCallback) {
 			deleteConfirmedCallback()
 		}
@@ -593,7 +593,7 @@
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 
 <Drawer bind:this={inferrer} size="800px">
-	<DrawerContent title="Infer type from JSON" on:close={() => inferrer?.toggleDrawer?.()}>
+	<DrawerContent title="Infer type from JSON" onclose={() => inferrer?.toggleDrawer?.()}>
 		<SimpleEditor
 			bind:code={inferrerJson}
 			lang="json"
@@ -601,13 +601,13 @@
 			fixedOverflowWidgets={false}
 		/>
 		{#snippet actions()}
-			<Button size="sm" on:click={inferJson}>Infer</Button>
+			<Button size="sm" onclick={inferJson}>Infer</Button>
 		{/snippet}
 	</DrawerContent>
 </Drawer>
 
 <Drawer bind:this={resourceTypeViewer} size="800px">
-	<DrawerContent title={resourceTypeViewerObj.rt} on:close={resourceTypeViewer.closeDrawer}>
+	<DrawerContent title={resourceTypeViewerObj.rt} onclose={resourceTypeViewer.closeDrawer}>
 		<div>
 			<h1 class="mb-8 mt-4"
 				><IconedResourceType
@@ -644,11 +644,11 @@
 </Drawer>
 
 <Drawer bind:this={editResourceTypeDrawer} size="800px">
-	<DrawerContent title="Edit resource type" on:close={editResourceTypeDrawer.closeDrawer}>
+	<DrawerContent title="Edit resource type" onclose={editResourceTypeDrawer.closeDrawer}>
 		{#snippet actions()}
 			<Button
 				startIcon={{ icon: Save }}
-				on:click={updateResourceType}
+				onclick={updateResourceType}
 				unifiedSize="md"
 				variant="accent">Update</Button
 			>
@@ -702,13 +702,13 @@
 </Drawer>
 
 <Drawer bind:this={resourceTypeDrawer} size="1200px">
-	<DrawerContent title="Create resource type" on:close={resourceTypeDrawer.closeDrawer}>
+	<DrawerContent title="Create resource type" onclose={resourceTypeDrawer.closeDrawer}>
 		{#snippet actions()}
 			<Button
 				unifiedSize="md"
 				variant="accent"
 				startIcon={{ icon: Save }}
-				on:click={addResourceType}
+				onclick={addResourceType}
 				disabled={!isNewResourceTypeNameValid || resourceTypeNameExists}>Save</Button
 			>
 		{/snippet}
@@ -770,7 +770,7 @@
 					<div class="font-semibold text-emphasis text-xs">Schema</div>
 					<div class="w-full flex flex-row-reverse">
 						<Button
-							on:click={openInferrer}
+							onclick={openInferrer}
 							unifiedSize="md"
 							variant="default"
 							startIcon={{ icon: Braces }}
@@ -811,7 +811,7 @@
 						variant="default"
 						unifiedSize="md"
 						startIcon={{ icon: Plus }}
-						on:click={startNewType}
+						onclick={startNewType}
 						aiId="resources-add-resource-type"
 						aiDescription="Add resource type"
 					>
@@ -821,7 +821,7 @@
 						unifiedSize="md"
 						variant="accent"
 						startIcon={{ icon: Boxes }}
-						on:click={() => appConnect?.open?.()}
+						onclick={() => appConnect?.open?.()}
 						aiId="resources-add-resource"
 						aiDescription="Add resource"
 					>
@@ -835,7 +835,7 @@
 			<Tabs
 				class="w-full"
 				bind:selected={tab}
-				on:selected={(e) => {
+				onselected={(e) => {
 					if (e.detail == 'cache') {
 						loading.resources = true
 						loadCache()
@@ -1210,7 +1210,7 @@
 														disabled={!showCreateButtons}
 														btnClasses="border-0"
 														startIcon={{ icon: Trash }}
-														on:click={() => handleDeleteResourceType(name)}
+														onclick={() => handleDeleteResourceType(name)}
 														destructive
 													>
 														Delete
@@ -1220,7 +1220,7 @@
 														color="light"
 														disabled={!showCreateButtons}
 														startIcon={{ icon: Pen }}
-														on:click={() => startEditResourceType(name)}
+														onclick={() => startEditResourceType(name)}
 													>
 														Edit
 													</Button>
@@ -1246,13 +1246,13 @@
 	</CenteredPage>
 {/if}
 
-<SupabaseConnect bind:this={supabaseConnect} on:refresh={loadResources} />
-<AppConnect bind:this={appConnect} on:refresh={loadResources} />
-<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={loadResources} />
+<SupabaseConnect bind:this={supabaseConnect} onrefresh={loadResources} />
+<AppConnect bind:this={appConnect} onrefresh={loadResources} />
+<ResourceEditorDrawer bind:this={resourceEditor} onrefresh={loadResources} />
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadResources()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/routes/+page.svelte b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
index a30cc487fb..e439efeaa2 100644
--- a/frontend/src/routes/(root)/(logged)/routes/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
@@ -267,7 +267,7 @@
 						unifiedSize="md"
 						variant="default"
 						startIcon={{ icon: Plus }}
-						on:click={() => {
+						onclick={() => {
 							routesGenerator?.openDrawer()
 						}}
 					>
@@ -277,7 +277,7 @@
 						unifiedSize="md"
 						variant="default"
 						startIcon={{ icon: Plus }}
-						on:click={() => {
+						onclick={() => {
 							openAPISpecGenerator?.openDrawer()
 						}}
 					>
@@ -287,7 +287,7 @@
 						unifiedSize="md"
 						variant="accent"
 						startIcon={{ icon: Plus }}
-						on:click={() => routeEditor?.openNew(false)}
+						onclick={() => routeEditor?.openNew(false)}
 					>
 						New&nbsp;route
 					</Button>
@@ -396,7 +396,7 @@
 
 								<div class="flex gap-2 items-center justify-end">
 									<Button
-										on:click={() =>
+										onclick={() =>
 											copyToClipboard(
 												getHttpRoute('r', route_path, workspaced_route ?? false, workspace_id)
 											)}
@@ -407,7 +407,7 @@
 										Copy URL
 									</Button>
 									<Button
-										on:click={() => routeEditor?.openEdit(path, is_flow)}
+										onclick={() => routeEditor?.openEdit(path, is_flow)}
 										unifiedSize="md"
 										startIcon={canWrite
 											? { icon: Pen }
@@ -524,7 +524,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 0a2754e3dd..e4e52bfa0a 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -387,14 +387,14 @@
 
 {#if (job?.job_kind == 'flow' || isFlowPreview(job?.job_kind)) && job?.['running'] && job?.parent_job == undefined}
 	<Drawer bind:this={debugViewer} size="800px">
-		<DrawerContent title="Debug Detail" on:close={debugViewer.closeDrawer}>
+		<DrawerContent title="Debug Detail" onclose={debugViewer.closeDrawer}>
 			{#snippet actions()}
 				<div class="flex items-center gap-1">
 					<div class="w-60 pt-2">
 						<Toggle bind:checked={redactSensitive} options={{ right: 'Redact args/result/logs' }} />
 					</div>
 					<Button
-						on:click={() =>
+						onclick={() =>
 							copyToClipboard(
 								JSON.stringify(removeSensitiveInfos(debugContent, redactSensitive), null, 4)
 							)}
@@ -445,7 +445,7 @@
 						<Button
 							variant="default"
 							unifiedSize="md"
-							on:click={() => {
+							onclick={() => {
 								goto(`/run/${page.params.run}?workspace=${workspace.id}`)
 							}}
 						>
@@ -542,7 +542,7 @@
 					unifiedSize="md"
 					variant="default"
 					startIcon={{ icon: GitBranch }}
-					on:click={forkPreview}
+					onclick={forkPreview}
 				>
 					Fork {isFlowPreview(job?.job_kind) ? 'flow' : 'code'} preview
 				</Button>
@@ -552,7 +552,7 @@
 					unifiedSize="md"
 					variant="default"
 					startIcon={{ icon: Activity }}
-					on:click={() => {
+					onclick={() => {
 						persistentScriptDrawer?.open?.(persistentScriptDefinition)
 					}}
 				>
@@ -566,7 +566,7 @@
 						variant="accent"
 						destructive
 						startIcon={{ icon: TimerOff }}
-						on:click|once={() => {
+						onclick={() => {
 							if (job?.id) {
 								cancelJob(job?.id)
 								setTimeout(() => {
@@ -584,7 +584,7 @@
 						variant="accent"
 						destructive
 						startIcon={{ icon: TimerOff }}
-						on:click|once={() => {
+						onclick={() => {
 							if (job?.id) {
 								cancelJob(job?.id)
 							}
@@ -598,7 +598,7 @@
 				<Button
 					unifiedSize="md"
 					variant="default"
-					on:click={() => {
+					onclick={() => {
 						if (!job || !job.schedule_path) {
 							return
 						}
@@ -624,7 +624,7 @@
 			{/if}
 			{#if job?.job_kind === 'script' || job?.job_kind === 'script_hub' || job?.job_kind === 'flow'}
 				<Button
-					on:click|once={() => {
+					onclick={() => {
 						goto(viewHref + `#${computeSharableHash(job?.args)}`)
 					}}
 					unifiedSize="md"
@@ -645,7 +645,7 @@
 				{#if !$userStore?.operator}
 					{#if canWrite(job?.script_path ?? '', {}, $userStore)}
 						<Button
-							on:click|once={() => {
+							onclick={() => {
 								$initialArgsStore = job?.args
 								goto(`${stem}/edit/${job?.script_path}${isScript ? `` : `?nodraft=true`}`)
 							}}
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 04f494c629..ff7944722d 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -255,7 +255,7 @@
 				size="lg"
 				variant="accent"
 				startIcon={{ icon: Plus }}
-				on:click={() => scheduleEditor?.openNew(false)}
+				onclick={() => scheduleEditor?.openNew(false)}
 				aiId="schedules-add-schedule"
 				aiDescription="Add schedule"
 			>
@@ -352,7 +352,7 @@
 
 								<Toggle
 									checked={enabled}
-									on:change={(e) => {
+									onchange={(e) => {
 										if (canWrite) {
 											setScheduleEnabled(path, e.detail)
 										} else {
@@ -370,7 +370,7 @@
 										Runs
 									</Button>
 									<Button
-										on:click={() => scheduleEditor?.openEdit(path, is_flow)}
+										onclick={() => scheduleEditor?.openEdit(path, is_flow)}
 										size="xs"
 										startIcon={{ icon: canWrite ? Pen : Eye }}
 										variant="subtle"
@@ -509,7 +509,7 @@
 		{#if items && items?.length > 15 && nbDisplayed < items.length}
 			<div class="flex items-center gap-4 text-xs font-semibold text-emphasis">
 				<span>{nbDisplayed} items out of {items.length}</span>
-				<Button size="xs" variant="subtle" on:click={() => (nbDisplayed += 30)}>
+				<Button size="xs" variant="subtle" onclick={() => (nbDisplayed += 30)}>
 					Load 30 more
 				</Button>
 			</div>
@@ -519,7 +519,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadSchedules()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index f322f2bfaa..6ff399bc3c 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -601,7 +601,7 @@
 
 <MoveDrawer
 	bind:this={moveDrawer}
-	on:update={async (e) => {
+	onupdate={async (e) => {
 		await goto('/scripts/get/' + e.detail + `?workspace=${$workspaceStore}`)
 		loadScript(page.params.hash ?? '')
 	}}
@@ -614,12 +614,12 @@
 <ShareModal bind:this={shareModal} />
 
 <Drawer bind:open={versionsDrawerOpen} size="1200px">
-	<DrawerContent title="Versions History" on:close={() => (versionsDrawerOpen = false)} noPadding>
+	<DrawerContent title="Versions History" onclose={() => (versionsDrawerOpen = false)} noPadding>
 		{#if script}
 			<ScriptVersionHistory
 				scriptPath={script.path}
 				openDetails
-				on:openDetails={(e) => {
+				onopenDetails={(e) => {
 					if (script) {
 						goto(`/scripts/get/${e.detail.version}?workspace=${$workspaceStore}`)
 					}
@@ -644,7 +644,7 @@
 				errorHandlerKind="script"
 				scriptOrFlowPath={script?.path ?? ''}
 				tag={script?.tag ?? ''}
-				on:seeTriggers={() => {
+				onseeTriggers={() => {
 					rightPaneSelected = 'triggers'
 				}}
 				summary={script?.summary}
@@ -797,7 +797,7 @@
 											rightTooltip: 'Fill args from JSON'
 										}}
 										lightMode
-										on:change={(e) => {
+										onchange={(e) => {
 											runForm?.setCode(JSON.stringify(args ?? {}, null, '\t'))
 										}}
 									/>
@@ -872,7 +872,7 @@
 					{jsonView}
 					{args}
 					bind:inputSelected
-					on:selected_args={(e) => {
+					onselected_args={(e) => {
 						const nargs = JSON.parse(JSON.stringify(e.detail))
 						args = nargs
 						if (jsonView) {
@@ -924,7 +924,7 @@
 										<div class="relative overflow-x-auto w-full">
 											<Button
 												wrapperClasses="absolute top-2 right-2 z-20"
-												on:click={() => copyToClipboard(script?.lock)}
+												onclick={() => copyToClipboard(script?.lock)}
 												color="light"
 												size="xs2"
 												startIcon={{
diff --git a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
index 516bc683d5..0ec785d76c 100644
--- a/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte
@@ -254,7 +254,7 @@
 			unifiedSize="md"
 			variant="accent"
 			startIcon={{ icon: Plus }}
-			on:click={() => sqsTriggerEditor?.openNew(false)}
+			onclick={() => sqsTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;SQS trigger
 		</Button>
@@ -393,7 +393,7 @@
 
 							<div class="flex gap-2 items-center justify-end">
 								<Button
-									on:click={() => sqsTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => sqsTriggerEditor?.openEdit(path, is_flow)}
 									size="xs"
 									startIcon={canWrite
 										? { icon: Pen }
@@ -504,7 +504,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
index 9c10077c41..291701fc60 100644
--- a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
+++ b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
@@ -73,7 +73,7 @@
 
 <UserSettings
 	bind:this={userSettings}
-	on:tokenCreated={(e) => {
+	ontokenCreated={(e) => {
 		token = e.detail
 	}}
 	newTokenLabel={`webhook-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
@@ -149,7 +149,7 @@
 						size="md"
 						btnClasses="whitespace-normal break-words flex flex-wrap"
 						disabled={itemPath == undefined}
-						on:click={() => userSettings?.openDrawer()}
+						onclick={() => userSettings?.openDrawer()}
 					>
 						Generate webhook-specific Token
 					</Button>
@@ -158,10 +158,10 @@
 					<Button
 						disabled={!itemPath || !token || token === ''}
 						btnClasses="whitespace-normal break-words flex flex-wrap"
-						on:click={() => itemPath && token && createWebhook(itemPath, itemKind, token)}
+						onclick={() => itemPath && token && createWebhook(itemPath, itemKind, token)}
 						>Approve and share with {clientName}</Button
 					>
-					<Button color="red" on:click={() => redirectCancel('user_canceled')}>Cancel</Button>
+					<Button color="red" onclick={() => redirectCancel('user_canceled')}>Cancel</Button>
 				</div>
 			</div>
 		</div>
diff --git a/frontend/src/routes/(root)/(logged)/tutorials/+page.svelte b/frontend/src/routes/(root)/(logged)/tutorials/+page.svelte
index db41264b5a..70ec64fa39 100644
--- a/frontend/src/routes/(root)/(logged)/tutorials/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/tutorials/+page.svelte
@@ -295,7 +295,7 @@
 					<span class="text-xs text-secondary">View as an</span>
 					<ToggleButtonGroup
 						bind:selected={selectedPreviewRole}
-						onSelected={(v) => {
+						onselected={(v) => {
 							selectedPreviewRole = (v || userEffectiveRole) as Role
 						}}
 						noWFull
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte
index 404817734b..79856e3454 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/first-time/+page.svelte
@@ -21,10 +21,10 @@
 		settings or the advanced setup for full control.
 	</p>
 	<div class="flex flex-row justify-between pt-4 gap-x-1">
-		<Button color="light" variant="contained" unifiedSize="md" on:click={decline}>Skip</Button>
+		<Button color="light" variant="contained" unifiedSize="md" onclick={decline}>Skip</Button>
 		<div class="flex items-center gap-2">
-			<Button variant="default" unifiedSize="md" on:click={() => startSetup(true)}>Advanced setup</Button>
-			<Button variant="accent" unifiedSize="md" on:click={() => startSetup()}>Quick setup</Button>
+			<Button variant="default" unifiedSize="md" onclick={() => startSetup(true)}>Advanced setup</Button>
+			<Button variant="accent" unifiedSize="md" onclick={() => startSetup()}>Quick setup</Button>
 		</div>
 	</div>
 </CenteredModal>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
index c37550e15f..2a0f8a6c93 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
@@ -620,11 +620,11 @@
 		open={showLicenseKeyWarning}
 		title="License key required"
 		confirmationText="Continue without license key"
-		on:canceled={() => {
+		oncanceled={() => {
 			showLicenseKeyWarning = false
 			pendingNextCallback = undefined
 		}}
-		on:confirmed={() => {
+		onconfirmed={() => {
 			showLicenseKeyWarning = false
 			const cb = pendingNextCallback
 			pendingNextCallback = undefined
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/onboarding/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/onboarding/+page.svelte
index b2cbb1685f..fc91629183 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/onboarding/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/onboarding/+page.svelte
@@ -142,7 +142,7 @@
 										placeholder="Type your answer..."
 										class="input"
 									/>
-									<Button variant="accent" unifiedSize="md" on:click={validateOtherSource}>
+									<Button variant="accent" unifiedSize="md" onclick={validateOtherSource}>
 										Validate
 									</Button>
 								</div>
@@ -155,7 +155,7 @@
 							selected={selectedSource === source.id}
 							startIcon={{ icon: source.icon }}
 							btnClasses="!justify-start"
-							on:click={() => selectSource(source.id)}
+							onclick={() => selectSource(source.id)}
 						>
 							{source.label}
 						</Button>
@@ -164,7 +164,7 @@
 			</div>
 
 			<div class="flex flex-row justify-end items-center pt-4">
-				<Button color="light" variant="border" size="xs" on:click={skip} loading={isSubmitting}
+				<Button color="light" variant="border" size="xs" onclick={skip} loading={isSubmitting}
 					>Skip</Button
 				>
 			</div>
@@ -196,7 +196,7 @@
 					variant="border"
 					startIcon={{ icon: ArrowLeft }}
 					size="xs"
-					on:click={goToPreviousStep}
+					onclick={goToPreviousStep}
 				>
 					Previous
 				</Button>
@@ -206,7 +206,7 @@
 					size="lg"
 					disabled={isSubmitting}
 					loading={isSubmitting}
-					on:click={continueToWorkspaces}
+					onclick={continueToWorkspaces}
 				>
 					Continue
 				</Button>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
index e3be20fc9b..edc243f6d3 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -324,7 +324,7 @@
 					<Button
 						variant="subtle"
 						size="xs2"
-						on:click={async () => {
+						onclick={async () => {
 							await UserService.declineInvite({
 								requestBody: { workspace_id: invite.workspace_id }
 							})
@@ -413,7 +413,7 @@
 				<Button
 					variant="default"
 					unifiedSize="md"
-					on:click={() => superadminSettings?.openDrawer()}
+					onclick={() => superadminSettings?.openDrawer()}
 					startIcon={{ icon: Settings }}
 					dropdownItems={[
 						{
@@ -439,7 +439,7 @@
 			<Button
 				variant="accent"
 				unifiedSize="md"
-				on:click={async () => {
+				onclick={async () => {
 					logout()
 				}}
 			>
diff --git a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
index 74c8d370eb..91d7ab5e97 100644
--- a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
@@ -33,6 +33,6 @@
 	</p>
 	<div class="flex flex-row justify-around pt-4 gap-x-1">
 		<Button variant="default" destructive size="lg" href={base}>Decline</Button>
-		<Button variant="accent" size="lg" on:click={authorizeToken}>Authorize</Button>
+		<Button variant="accent" size="lg" onclick={authorizeToken}>Authorize</Button>
 	</div>
 </CenteredModal>
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index 4082e5f8ff..f6f942bde1 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -225,7 +225,7 @@
 							unifiedSize="md"
 							variant="accent"
 							startIcon={{ icon: Plus }}
-							on:click={() => contextualVariableEditor?.initNew()}
+							onclick={() => contextualVariableEditor?.initNew()}
 						>
 							New&nbsp;contextual&nbsp;variable
 						</Button>
@@ -234,7 +234,7 @@
 							unifiedSize="md"
 							variant="accent"
 							startIcon={{ icon: Plus }}
-							on:click={() => variableEditor?.initNew()}
+							onclick={() => variableEditor?.initNew()}
 						>
 							New&nbsp;variable
 						</Button>
@@ -244,14 +244,14 @@
 		</PageHeader>
 		<NoDirectDeployAlert onUpdateCanEditStatus={(v) => (showCreateButtons = v)} />
 
-		<VariableEditor bind:this={variableEditor} on:create={loadVariables} />
+		<VariableEditor bind:this={variableEditor} oncreate={loadVariables} />
 		<ContextualVariableEditor
 			bind:this={contextualVariableEditor}
-			on:update={loadContextualVariables}
+			onupdate={loadContextualVariables}
 		/>
 		<ShareModal
 			bind:this={shareModal}
-			on:change={() => {
+			onchange={() => {
 				loadVariables()
 			}}
 		/>
@@ -560,10 +560,10 @@
 	{open}
 	title="Remove variable"
 	confirmationText="Remove"
-	on:canceled={() => {
+	oncanceled={() => {
 		deleteConfirmedCallback = undefined
 	}}
-	on:confirmed={() => {
+	onconfirmed={() => {
 		if (deleteConfirmedCallback) {
 			deleteConfirmedCallback()
 		}
diff --git a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
index e2c4441202..fb4882a16d 100644
--- a/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte
@@ -258,7 +258,7 @@
 			unifiedSize="md"
 			variant="accent"
 			startIcon={{ icon: Plus }}
-			on:click={() => websocketTriggerEditor?.openNew(false)}
+			onclick={() => websocketTriggerEditor?.openNew(false)}
 		>
 			New&nbsp;WebSocket trigger
 		</Button>
@@ -406,7 +406,7 @@
 
 							<div class="flex gap-2 items-center justify-end">
 								<Button
-									on:click={() => websocketTriggerEditor?.openEdit(path, is_flow)}
+									onclick={() => websocketTriggerEditor?.openEdit(path, is_flow)}
 									size="xs"
 									startIcon={canWrite
 										? { icon: Pen }
@@ -513,7 +513,7 @@
 
 <ShareModal
 	bind:this={shareModal}
-	on:change={() => {
+	onchange={() => {
 		loadTriggers()
 	}}
 />
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index b2b229a989..7858db0c67 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -603,7 +603,7 @@
 <Drawer bind:this={importConfigDrawer} size="800px">
 	<DrawerContent
 		title="Import groups config from YAML"
-		on:close={() => importConfigDrawer?.toggleDrawer?.()}
+		onclose={() => importConfigDrawer?.toggleDrawer?.()}
 	>
 		<SimpleEditor
 			bind:code={importConfigCode}
@@ -625,7 +625,7 @@
 <Drawer bind:this={yamlConfigDrawer} size="800px">
 	<DrawerContent
 		title="Worker groups config (YAML)"
-		on:close={() => {
+		onclose={() => {
 			yamlDiffMode = false
 			yamlConfigDrawer?.toggleDrawer?.()
 		}}
@@ -693,7 +693,7 @@
 <Drawer bind:this={newHttpAgentWorkerDrawer} size="800px">
 	<DrawerContent
 		title="New HTTP agent worker"
-		on:close={() => newHttpAgentWorkerDrawer?.toggleDrawer?.()}
+		onclose={() => newHttpAgentWorkerDrawer?.toggleDrawer?.()}
 	>
 		<HttpAgentWorkerDrawer {customTags} />
 	</DrawerContent>
@@ -702,7 +702,7 @@
 <Drawer bind:this={replForWorkerDrawer} size="1000px">
 	<DrawerContent
 		title="Repl"
-		on:close={() => {
+		onclose={() => {
 			tag = ''
 			replForWorkerDrawer?.closeDrawer?.()
 		}}
@@ -738,7 +738,7 @@
 							startIcon={{
 								icon: Tags
 							}}
-							on:click={() => {
+							onclick={() => {
 								manageTagsDrawer?.openDrawer()
 							}}
 						>
@@ -751,7 +751,7 @@
 							startIcon={{
 								icon: LineChart
 							}}
-							on:click={() => {
+							onclick={() => {
 								queueMetricsDrawer?.openDrawer()
 							}}
 						>
@@ -762,7 +762,7 @@
 							unifiedSize="md"
 							variant="default"
 							startIcon={{ icon: Plus }}
-							on:click={() => {
+							onclick={() => {
 								newHttpAgentWorkerDrawer?.toggleDrawer?.()
 							}}>New agent worker</Button
 						>
@@ -842,7 +842,7 @@
 										variant="accent"
 										startIcon={{ icon: Plus }}
 										disabled={!newConfigName}
-										on:click={addConfig}
+										onclick={addConfig}
 									>
 										Create
 									</Button>
@@ -913,7 +913,7 @@
 							workers={worker_group[1]}
 							isAgent={worker_group[2]}
 							{config}
-							on:reload={() => {
+							onreload={() => {
 								loadWorkerGroups()
 							}}
 							activeWorkers={activeWorkers?.length ?? 0}
@@ -1192,7 +1192,7 @@
 															<Button
 																unifiedSize="sm"
 																color="light"
-																on:click={() => {
+																onclick={() => {
 																	if (isWorkerAlive === false) {
 																		sendUserToast('Worker must be alive', true)
 																		return
@@ -1238,7 +1238,7 @@
 								{customTags}
 								workers={worker_group[1]}
 								isAgent={false}
-								on:reload={() => {
+								onreload={() => {
 									loadWorkerGroups()
 								}}
 								name={worker_group[0]}
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 2b4739a401..74a2ef57ac 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -1210,7 +1210,7 @@
 	{#if $userStore?.is_admin || $superadmin}
 		<PageHeader title="Workspace settings: {$workspaceStore}"
 			>{#if $superadmin}
-				<Button variant="default" size="sm" on:click={() => goto('#superadmin-settings')}>
+				<Button variant="default" size="sm" onclick={() => goto('#superadmin-settings')}>
 					Instance settings
 				</Button>
 			{/if}</PageHeader
@@ -1285,7 +1285,7 @@
 							<div class="space-y-6">
 								<Tabs
 									selected={slack_tabs}
-									on:selected={(e) => {
+									onselected={(e) => {
 										const params = new URLSearchParams($page.url.searchParams)
 										if (e.detail === 'teams_commands') {
 											params.set('tab', 'teams')
@@ -1516,7 +1516,7 @@
 									disabled={$workspaceStore === 'admins' || $workspaceStore === 'starter'}
 									unifiedSize="md"
 									btnClasses="mt-2"
-									on:click={async () => {
+									onclick={async () => {
 										await WorkspaceService.archiveWorkspace({ workspace: $workspaceStore ?? '' })
 										sendUserToast(`Archived workspace ${$workspaceStore}`)
 										workspaceStore.set(undefined)
@@ -1533,7 +1533,7 @@
 										disabled={$workspaceStore === 'admins' || $workspaceStore === 'starter'}
 										size="sm"
 										btnClasses="mt-2"
-										on:click={async () => {
+										onclick={async () => {
 											await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '' })
 											sendUserToast(`Deleted workspace ${$workspaceStore}`)
 											workspaceStore.set(undefined)
@@ -1674,7 +1674,7 @@
 												initialPath={successHandlerScriptPath}
 												allowRefresh
 												itemKind="script"
-												on:select={(ev) => {
+												onselect={(ev) => {
 													successHandlerScriptPath = ev?.detail?.path
 												}}
 												clearable
@@ -1760,7 +1760,7 @@ export async function main(
 								<div class="flex gap-2">
 									<Button
 										disabled={!$enterpriseLicense}
-										on:click={() => isCriticalAlertsUIOpen.set(true)}
+										onclick={() => isCriticalAlertsUIOpen.set(true)}
 										btnClasses="w-fit"
 									>
 										Show critical alerts
@@ -1899,7 +1899,7 @@ export async function main(
 									<Button
 										variant="default"
 										unifiedSize="md"
-										on:click={() => {
+										onclick={() => {
 											loadWorkspaceEncryptionKey()
 										}}>Load current key</Button
 									>
diff --git a/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte b/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte
index 5ee2581e7d..99cc9a89f9 100644
--- a/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte
+++ b/frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte
@@ -263,7 +263,7 @@
 						<Button
 							variant="accent"
 							destructive
-							on:click|once={cancel}
+							onclick={cancel}
 							size="lg"
 							disabled={completed || alreadyResumed}>Deny</Button
 						>
@@ -273,7 +273,7 @@
 
 					<Button
 						variant="accent"
-						on:click|once={resume}
+						onclick={resume}
 						size="lg"
 						disabled={completed || alreadyResumed || !valid}>Approve</Button
 					>
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index 693741d595..f194e208fa 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -263,7 +263,7 @@
 			bind:this={editor}
 			code={initialCode}
 			lang="json"
-			on:change={(e) => {
+			onchange={(e) => {
 				updateFromCode(e.detail.code)
 			}}
 		/>
@@ -296,7 +296,7 @@
 				<Pane size={67}>
 					<FlowEditorPanel
 						noEditor
-						on:applyArgs={(ev) => {
+						onapplyArgs={(ev) => {
 							if (ev.detail.kind === 'preprocessor') {
 								stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 								selectionManager.selectId('preprocessor')
diff --git a/frontend/src/routes/user/close/+page.svelte b/frontend/src/routes/user/close/+page.svelte
index a03400844c..a32abf1802 100644
--- a/frontend/src/routes/user/close/+page.svelte
+++ b/frontend/src/routes/user/close/+page.svelte
@@ -6,5 +6,5 @@
 <CenteredModal>
 	There was an error during login
 
-	<Button on:click={() => window.close()}>close</Button>
+	<Button onclick={() => window.close()}>close</Button>
 </CenteredModal>
diff --git a/frontend/src/routes/user/forgot-password/+page.svelte b/frontend/src/routes/user/forgot-password/+page.svelte
index adac107766..93ba348711 100644
--- a/frontend/src/routes/user/forgot-password/+page.svelte
+++ b/frontend/src/routes/user/forgot-password/+page.svelte
@@ -74,7 +74,7 @@
 						Please check your email and follow the instructions to reset your password.
 					</p>
 					<div class="pt-4">
-						<Button variant="accent" on:click={() => goto('/user/login')}>Back to login</Button>
+						<Button variant="accent" onclick={() => goto('/user/login')}>Back to login</Button>
 					</div>
 				</div>
 			{:else}
@@ -93,10 +93,10 @@
 					</div>
 
 					<div class="pt-2 flex flex-col gap-2">
-						<Button on:click={requestPasswordReset} variant="accent" disabled={!email || loading}>
+						<Button onclick={requestPasswordReset} variant="accent" disabled={!email || loading}>
 							{loading ? 'Sending...' : 'Send reset link'}
 						</Button>
-						<Button variant="subtle" on:click={() => goto('/user/login')}>Back to login</Button>
+						<Button variant="subtle" onclick={() => goto('/user/login')}>Back to login</Button>
 					</div>
 				</div>
 			{/if}
diff --git a/frontend/src/routes/user/reset-password/+page.svelte b/frontend/src/routes/user/reset-password/+page.svelte
index 3f0eb3b47a..e7c50227ea 100644
--- a/frontend/src/routes/user/reset-password/+page.svelte
+++ b/frontend/src/routes/user/reset-password/+page.svelte
@@ -85,7 +85,7 @@
 				<div class="text-center space-y-4">
 					<p class="text-red-500">Invalid or missing reset token.</p>
 					<div class="pt-4">
-						<Button variant="accent" on:click={() => goto('/user/forgot-password')}>
+						<Button variant="accent" onclick={() => goto('/user/forgot-password')}>
 							Request New Reset Link
 						</Button>
 					</div>
@@ -95,7 +95,7 @@
 					<p class="text-secondary"> Your password has been reset successfully. </p>
 					<p class="text-secondary text-sm"> You can now log in with your new password. </p>
 					<div class="pt-4">
-						<Button variant="accent" on:click={() => goto('/user/login')}>Go to login</Button>
+						<Button variant="accent" onclick={() => goto('/user/login')}>Go to login</Button>
 					</div>
 				</div>
 			{:else}
@@ -132,13 +132,13 @@
 
 					<div class="pt-2 flex flex-col gap-2">
 						<Button
-							on:click={resetPassword}
+							onclick={resetPassword}
 							variant="accent"
 							disabled={!newPassword || !confirmPassword || loading}
 						>
 							{loading ? 'Resetting...' : 'Reset password'}
 						</Button>
-						<Button variant="subtle" on:click={() => goto('/user/login')}>Back to login</Button>
+						<Button variant="subtle" onclick={() => goto('/user/login')}>Back to login</Button>
 					</div>
 				</div>
 			{/if}