From 167e7c3714bfa60dedf2a142055821e015fb5e12 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 25 Feb 2026 17:19:37 +0100
Subject: [PATCH] Svelte 5 migration tool + claude code @migration-task fixes

---
 .../lib/components/AppConnectDrawer.svelte    |  32 ++-
 frontend/src/lib/components/ArgInput.svelte   |   6 +-
 .../src/lib/components/AutheliaSetting.svelte |  18 +-
 .../lib/components/AuthentikSetting.svelte    |  20 +-
 .../lib/components/AzureOauthSettings.svelte  |  42 +--
 frontend/src/lib/components/Badge.svelte      |  18 +-
 .../ChangeInstanceUsernameInner.svelte        |  23 +-
 .../ContextualVariableEditor.svelte           |   8 +-
 .../src/lib/components/CustomOauth.svelte     |  34 +--
 frontend/src/lib/components/CustomSso.svelte  |  36 +--
 .../src/lib/components/DefaultScripts.svelte  |  12 +-
 .../lib/components/DefaultScriptsInner.svelte |  12 +-
 .../src/lib/components/Description.svelte     |  12 +-
 frontend/src/lib/components/Dev.svelte        |   2 +-
 frontend/src/lib/components/DropdownV2.svelte |   8 +-
 frontend/src/lib/components/DurationMs.svelte |  10 +-
 .../lib/components/EditableSchemaForm.svelte  |   2 +-
 .../lib/components/ExecutionDuration.svelte   |  54 ++--
 .../src/lib/components/FieldHeader.svelte     |  52 ++--
 .../src/lib/components/FlowGraphViewer.svelte |  35 ++-
 .../lib/components/FlowGraphViewerStep.svelte |  12 +-
 .../src/lib/components/FlowInputViewer.svelte |   6 +-
 .../src/lib/components/FlowPlugConnect.svelte |  10 +-
 .../lib/components/FlowRestartButton.svelte   |   4 +-
 .../src/lib/components/FolderEditor.svelte    |  17 +-
 .../src/lib/components/FolderUsageInfo.svelte |  18 +-
 .../lib/components/GraphqlSchemaViewer.svelte |   9 +-
 .../src/lib/components/GroupEditor.svelte     |  22 +-
 .../src/lib/components/HighlightCode.svelte   |   8 +-
 .../src/lib/components/HistoricList.svelte    |   4 +-
 .../src/lib/components/InfiniteList.svelte    |   8 +-
 .../components/InputTransformsViewer.svelte   |   8 +-
 .../lib/components/InstanceGroupEditor.svelte |  54 ++--
 .../lib/components/InstanceNameEditor.svelte  | 223 ++++++++--------
 .../lib/components/InviteGlobalUser.svelte    |  12 +-
 .../src/lib/components/KanidmSetting.svelte   |  30 ++-
 .../src/lib/components/KeycloakSetting.svelte |  18 +-
 frontend/src/lib/components/LogId.svelte      |  12 +-
 .../lib/components/LogSnippetViewer.svelte    |  11 +-
 frontend/src/lib/components/MapResult.svelte  |  75 +++---
 .../components/MemoryFootprintViewer.svelte   |  18 +-
 .../src/lib/components/ModuleStatus.svelte    |  10 +-
 .../lib/components/OauthExtraParams.svelte    |  12 +-
 .../src/lib/components/OauthScopes.svelte     |   6 +-
 .../lib/components/OnBehalfOfSelector.svelte  |  80 +++---
 frontend/src/lib/components/PageHeader.svelte |  26 +-
 .../components/ParqetCsvTableRenderer.svelte  |  35 ++-
 .../lib/components/PermissionHistory.svelte   |  14 +-
 .../components/PersistentScriptDrawer.svelte  |  92 +++----
 .../lib/components/QueueMetricsDrawer.svelte  |   2 +-
 .../components/QueueMetricsDrawerInner.svelte |  22 +-
 .../src/lib/components/RadioButton.svelte     |  25 +-
 frontend/src/lib/components/Range.svelte      |  52 ++--
 frontend/src/lib/components/Required.svelte   |  13 +-
 .../components/ResourceEditorDrawer.svelte    |  22 +-
 frontend/src/lib/components/RunForm.svelte    |   4 +-
 .../components/RunFormAdvancedPopup.svelte    |  19 +-
 .../src/lib/components/S3ObjectPicker.svelte  |  14 +-
 .../lib/components/SaveInputsButton.svelte    |  25 +-
 .../lib/components/SavedInputsPicker.svelte   |   4 +-
 .../components/SavedInputsPickerViewer.svelte | 187 +++++++------
 .../src/lib/components/SavedInputsV2.svelte   |   2 +-
 .../components/SchemaEditorProperty.svelte    |   6 +-
 .../src/lib/components/ScriptBuilder.svelte   |   5 +-
 frontend/src/lib/components/Scrollable.svelte |  26 +-
 .../lib/components/ServiceLogsInner.svelte    |  16 +-
 frontend/src/lib/components/ShareModal.svelte |  13 +-
 frontend/src/lib/components/Slider.svelte     |  21 +-
 frontend/src/lib/components/Summary.svelte    |   8 +-
 .../src/lib/components/SupabaseConnect.svelte |  32 ++-
 .../lib/components/SuperadminSettings.svelte  |  20 +-
 .../components/SuperadminSettingsInner.svelte |   6 +-
 .../src/lib/components/TableCustom.svelte     |  38 ++-
 .../src/lib/components/TestConnection.svelte  |  19 +-
 .../src/lib/components/TooltipInner.svelte    |  18 +-
 frontend/src/lib/components/Uptodate.svelte   |   2 +-
 frontend/src/lib/components/Urlize.svelte     |   8 +-
 frontend/src/lib/components/Version.svelte    |   2 +-
 .../src/lib/components/WhitelistIp.svelte     |   2 +-
 .../lib/components/WorkflowTimeline.svelte    |  34 +--
 .../src/lib/components/ZitadelSetting.svelte  |  18 +-
 .../display/InsertRowDrawerButton.svelte      |   2 +-
 .../components/inputs/AppFileInput.svelte     |   2 +-
 .../apps/editor/AppExportButton.svelte        |   6 +-
 .../components/apps/editor/AppInputs.svelte   |   2 +-
 .../apps/editor/AppJsonEditor.svelte          |   8 +-
 .../apps/editor/RecomputeAllComponents.svelte |  20 +-
 .../componentsPanel/CssHelperPanel.svelte     |  17 +-
 .../CustomComponentsList.svelte               |  12 +-
 .../componentsPanel/QuickStyleMenu.svelte     |  13 +-
 .../editor/componentsPanel/ThemeList.svelte   |  10 +-
 .../editor/contextPanel/DebugPanel.svelte     |   8 +-
 .../inputEditor/UploadInputEditor.svelte      |   7 +-
 .../lib/components/assets/AssetButtons.svelte |  50 ++--
 .../assets/AssetColumnBadges.svelte           |   8 +-
 .../assets/AssetsDropdownButton.svelte        | 224 ++++++++--------
 .../assets/AssetsUsageDrawer.svelte           |  12 +-
 .../auditLogs/AuditLogsFilters.svelte         |  20 +-
 .../components/common/FileProgressBar.svelte  |  24 +-
 .../common/alert/Notification.svelte          |   8 +-
 .../common/button/AnimatedButton.svelte       |  32 ++-
 .../common/button/AnimatedButtonInner.svelte  |  40 ++-
 .../components/common/button/Button.svelte    |   4 +-
 .../common/button/PulseButton.svelte          |  24 +-
 .../common/button/RoundIconButton.svelte      |  15 +-
 .../components/common/button/UndoRedo.svelte  |   8 +-
 .../calendarPicker/CalendarPicker.svelte      |  58 ++--
 .../clearableInput/ClearableInput.svelte      |  72 +++--
 .../ConfirmationModal.svelte                  |   2 +-
 .../UnsavedConfirmationModal.svelte           |   6 +-
 .../common/fileInput/FileInput.svelte         | 105 +++++---
 .../common/fileUpload/FileUpload.svelte       |   2 +-
 .../common/fileUpload/FileUploadModal.svelte  |  12 +-
 .../common/layout/ListElement.svelte          |  10 +-
 .../components/common/menu/MenuItem.svelte    |  19 +-
 .../components/common/menu/ResolveOpen.svelte |  19 +-
 .../common/modal/AlwaysMountedModal.svelte    |  31 ++-
 .../lib/components/common/modal/Modal2.svelte |  52 ++--
 .../components/common/stepper/Stepper.svelte  |  29 +-
 .../lib/components/common/table/AppRow.svelte |   8 +-
 .../components/common/table/FlowRow.svelte    |   2 +-
 .../components/common/table/RawAppRow.svelte  |   2 +-
 .../components/common/table/RowIcon.svelte    |  15 +-
 .../components/common/table/ScriptRow.svelte  |   2 +-
 .../lib/components/common/table/Table.svelte  |  10 +-
 .../copilot/FlowCopilotInputsModal.svelte     |  32 ++-
 .../lib/components/copilot/RegexGen.svelte    | 166 ++++++------
 .../lib/components/copilot/ScriptFix.svelte   |  70 ++---
 .../lib/components/copilot/chat/AIChat.svelte |   2 +-
 .../copilot/chat/AIChatDisplay.svelte         | 100 +++----
 .../copilot/chat/AIChatInput.svelte           |  80 +++---
 .../copilot/chat/AssistantMessage.svelte      |   6 +-
 .../components/copilot/chat/ChatMode.svelte   |  70 ++---
 .../chat/flow/AIChangesWarningModal.svelte    |  22 +-
 .../components/details/ClipboardPanel.svelte  |  21 +-
 .../details/ErrorHandlerToggleButton.svelte   |  17 +-
 .../details/ErrorHandlerToggleButtonV2.svelte |  22 +-
 .../flows/content/AgentToolWrapper.svelte     |   5 +-
 .../flows/content/DynamicInputHelpBox.svelte  |   3 +-
 .../flows/content/FlowFailureModule.svelte    |  10 +-
 .../FlowModuleMockTransitionMessage.svelte    |  26 +-
 .../flows/content/FlowPathViewer.svelte       |  16 +-
 .../content/FlowPreprocessorModule.svelte     |  10 +-
 .../flows/content/FlowSettings.svelte         |   5 +-
 .../flows/content/GenAiQuick.svelte           |  17 +-
 .../flows/content/ScriptEditorDrawer.svelte   |  11 +-
 .../flows/content/SuspendDrawer.svelte        |   8 +-
 .../components/flows/map/FlowJobsMenu.svelte  |   8 +-
 .../lib/components/flows/map/MapItem.svelte   |   4 +-
 .../pickers/FlowScriptPickerQuick.svelte      |  22 +-
 .../flows/pickers/FlowToplevelNode.svelte     |  10 +-
 .../flows/propPicker/JobPickerLight.svelte    |   6 +-
 .../flows/propPicker/OutputBadge.svelte       |  15 +-
 .../flows/propPicker/OutputPicker.svelte      |   4 +-
 .../git_sync/GitSyncModalManager.svelte       |   2 +-
 .../lib/components/graph/FlowGraphV2.svelte   |   4 +-
 .../renderers/edges/HiddenBaseEdge.svelte     |   6 +-
 .../graph/renderers/nodes/AssetNode.svelte    |  50 ++--
 .../nodes/AssetsOverflowedNode.svelte         |  28 +-
 .../renderers/triggers/TriggerButton.svelte   |  14 +-
 .../renderers/triggers/TriggerCount.svelte    |   6 +-
 .../renderers/triggers/TriggersBadge.svelte   |   4 +-
 .../src/lib/components/home/FlowIcon.svelte   |   9 +-
 .../src/lib/components/home/ItemsList.svelte  |   4 +-
 .../components/home/ListFiltersQuick.svelte   |  16 +-
 .../src/lib/components/icons/RubyIcon.svelte  |   4 +-
 .../lib/components/icons/WindmillIcon2.svelte |   1 -
 .../meltComponents/MeltButton.svelte          |  38 ++-
 .../lib/components/meltComponents/Menu.svelte |  15 +-
 .../components/meltComponents/Menubar.svelte  |  10 +-
 .../components/meltComponents/Popover.svelte  | 248 ++++++++++++------
 .../components/meltComponents/Tooltip.svelte  |  77 ++++--
 .../propertyPicker/ObjectViewerWrapper.svelte |  55 ++--
 .../propertyPicker/PropPickerResult.svelte    |  20 +-
 .../raw_apps/DefaultDatabaseSelector.svelte   |  78 +++---
 .../recording/FlowRecordingReplay.svelte      |  10 +-
 .../lib/components/runs/MobileFilters.svelte  |  29 +-
 .../runs/PreprocessedArgsDisplay.svelte       |  11 +-
 .../lib/components/runs/QueuePopover.svelte   |   8 +-
 .../lib/components/schema/AddProperty.svelte  |   6 +-
 .../components/schema/AddPropertyForm.svelte  |   2 +-
 .../components/schema/JobSchemaPicker.svelte  |   6 +-
 .../schema/RunningJobSchemaPicker.svelte      |  73 +++---
 .../components/schema/SchemaPickerRow.svelte  |  26 +-
 .../components/select/SelectDropdown.svelte   |   2 +-
 .../settings/ChangeWorkspaceId.svelte         |  26 +-
 .../components/settings/PremiumInfo.svelte    |  72 ++---
 .../components/settings/TokensTable.svelte    |  17 +-
 .../sidebar/CriticalAlertModal.svelte         |  66 +++--
 .../sidebar/CriticalAlertTable.svelte         |  41 ++-
 .../components/sidebar/DarkModeToggle.svelte  |  10 +-
 .../components/sidebar/MultiplayerMenu.svelte |  20 +-
 .../components/sidebar/OperatorMenu.svelte    |   2 +-
 .../sidebar/SideBarNotification.svelte        |   8 +-
 .../components/sidebar/SidebarContent.svelte  |   6 +-
 .../components/sidebar/WorkspaceMenu.svelte   |   8 +-
 .../splitPanes/SplitPanesWrapper.svelte       |  27 +-
 .../lib/components/table/DownloadCsv.svelte   |   8 +-
 frontend/src/lib/components/table/Head.svelte |  13 +-
 frontend/src/lib/components/table/Row.svelte  |  46 ++--
 .../triggers/AddTriggersButton.svelte         |   2 +-
 .../components/triggers/CaptureIcon.svelte    |   8 +-
 .../components/triggers/CaptureTable.svelte   |   4 +-
 .../triggers/TestTriggerConnection.svelte     |  17 +-
 .../triggers/TriggerEditorToolbar.svelte      |  20 +-
 .../triggers/TriggerSuspendedJobsModal.svelte |   2 +-
 .../components/triggers/TriggerTokens.svelte  |  20 +-
 .../triggers/email/EmailCapture.svelte        |   2 +-
 .../EmailTriggerEditorConfigSection.svelte    |   2 +-
 .../triggers/http/RouteCapture.svelte         |   2 +-
 .../http/RouteEditorConfigSection.svelte      |   2 +-
 .../triggers/http/RoutesGenerator.svelte      |   2 +-
 .../postgres/CheckPostgresRequirement.svelte  |  12 +-
 .../postgres/PublicationPicker.svelte         |  38 ++-
 .../triggers/postgres/SlotPicker.svelte       |  23 +-
 .../components/triggers/testingBadge.svelte   |   4 +-
 .../webhook/WebhooksConfigSection.svelte      |   2 +-
 .../websocket/WebsocketCapture.svelte         |  28 +-
 .../lib/components/tutorials/Tutorial.svelte  |  22 +-
 .../tutorials/TutorialControls.svelte         |   8 +-
 .../app/BackgroundRunnablesTutorial.svelte    |  10 +-
 .../tutorials/app/ConnectionTutorial.svelte   |  10 +-
 .../app/ExpressionEvaluationTutorial.svelte   |  10 +-
 ...WorkspaceOnboardingOperatorTutorial.svelte |   6 +-
 .../WorkspaceOnboardingTutorial.svelte        |   6 +-
 .../lib/components/wizards/AppPicker.svelte   |  10 +-
 .../workspaceSettings/CreateWorkspace.svelte  |   6 +-
 .../DataTableSettings.svelte                  |  22 +-
 .../workspaceSettings/DucklakeSettings.svelte |  62 +++--
 .../workspaceSettings/StorageSettings.svelte  |  24 +-
 .../WorkspaceIntegrations.svelte              |  16 +-
 .../WorkspaceRulesets.svelte                  |   2 +-
 .../src/routes/(root)/(logged)/+layout.svelte |  30 +--
 .../src/routes/(root)/(logged)/+page.svelte   |   8 +-
 .../(root)/(logged)/apps/add/+page.svelte     |  18 +-
 .../get_raw/[version]/[...path]/+page.svelte  |   2 +-
 .../(root)/(logged)/apps_raw/add/+page.svelte |  14 +-
 .../(root)/(logged)/assets/+page.svelte       |   8 +-
 .../(logged)/concurrency_groups/+page.svelte  |  76 +++---
 .../(root)/(logged)/flows/add/+page.svelte    |  20 +-
 .../(logged)/flows/get/[...path]/+page.svelte |   1 -
 .../(root)/(logged)/folders/+page.svelte      |   2 +-
 .../(root)/(logged)/groups/+page.svelte       |   2 +-
 .../(logged)/instance_groups/+page.svelte     | 128 ++++-----
 .../(logged)/oauth/mcp_authorize/+page.svelte |  18 +-
 .../(root)/(logged)/replay/+page.svelte       |   6 +-
 .../(root)/(logged)/resources/+page.svelte    |   2 +-
 .../(root)/(logged)/scripts/add/+page.svelte  |  20 +-
 .../(root)/(logged)/service_logs/+page.svelte |   4 +-
 .../svix/create-webhook/+page@(root).svelte   |  24 +-
 .../user/(user)/accept_invite/+page.svelte    |  16 +-
 .../(user)/instance_settings/+page.svelte     |   8 +-
 .../(logged)/user/(user)/login/+page.svelte   |  12 +-
 .../(logged)/user/(user)/logout/+page@.svelte |   6 +-
 .../user/(user)/workspaces/+page.svelte       |  56 ++--
 .../(root)/(logged)/user/cli/+page.svelte     |   8 +-
 .../workspace_settings/checkout/+page.svelte  |   6 +-
 frontend/src/routes/(root)/+layout.svelte     |  18 +-
 frontend/src/routes/+layout.svelte            |   4 +-
 .../[workspace]/[...version]/+page.svelte     |   6 +-
 frontend/src/routes/flows/dev/+page.svelte    |  10 +-
 frontend/src/routes/gh_success/+page.svelte   |  10 +-
 .../routes/oauth/callback_slack/+page.svelte  |   8 +-
 .../callback_slack/instance/+page.svelte      |   8 +-
 .../oauth/callback_supabase/+page.svelte      |   8 +-
 .../src/routes/scripts/p/[...path].svelte     |   2 +-
 .../routes/user/reset-password/+page.svelte   |   4 +-
 267 files changed, 3657 insertions(+), 2347 deletions(-)

diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte
index d8ad4cd389..f9f7db9d07 100644
--- a/frontend/src/lib/components/AppConnectDrawer.svelte
+++ b/frontend/src/lib/components/AppConnectDrawer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -6,24 +8,27 @@
 	import AppConnectInner from './AppConnectInner.svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'
 
-	export let expressOAuthSetup = false
+	interface Props {
+		expressOAuthSetup?: boolean;
+	}
 
-	let drawer: Drawer
-	let resourceType = ''
-	let step = 1
-	let disabled = false
-	let isGoogleSignin = false
-	let manual = true
+	let { expressOAuthSetup = false }: Props = $props();
 
-	let appConnectInner: AppConnectInner | undefined = undefined
+	let drawer: Drawer = $state()
+	let resourceType = $state('')
+	let step = $state(1)
+	let disabled = $state(false)
+	let isGoogleSignin = $state(false)
+	let manual = $state(true)
 
-	let rtToLoad: string | undefined = ''
+	let appConnectInner: AppConnectInner | undefined = $state(undefined)
+
+	let rtToLoad: string | undefined = $state('')
 	export async function open(rt?: string) {
 		rtToLoad = rt
 		drawer.openDrawer?.()
 	}
 
-	$: appConnectInner && onRtToLoadChange(rtToLoad)
 
 	function onRtToLoadChange(rtToLoad: string | undefined) {
 		appConnectInner?.open(rtToLoad)
@@ -31,7 +36,10 @@
 
 	const dispatch = createEventDispatcher()
 
-	let darkMode: boolean = false
+	let darkMode: boolean = $state(false)
+	run(() => {
+		appConnectInner && onRtToLoadChange(rtToLoad)
+	});
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -68,7 +76,7 @@
 					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
-					<button {disabled} on:click={appConnectInner?.next}>
+					<button {disabled} onclick={appConnectInner?.next}>
 						<img
 							class="h-10 w-auto object-contain"
 							src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 3fc1a772e3..328d43ca20 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -892,8 +892,8 @@
 												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 													<FileInput
 														class="w-full"
-														on:change={(x) =>
-															fileChangedInner(x.detail?.[0], (val) => (value[i] = val))}
+														onChange={(x) =>
+															fileChangedInner(x?.[0], (val) => (value[i] = val))}
 														multiple={false}
 													/>
 													{@render deleteItemBtn()}
@@ -1390,7 +1390,7 @@
 		{:else if inputCat == 'base64'}
 			<div class="flex flex-col w-full">
 				<FileInput
-					on:change={(x) => fileChangedInner(x.detail?.[0], (val) => (value = val))}
+					onChange={(x) => fileChangedInner(x?.[0], (val) => (value = val))}
 					multiple={false}
 				/>
 				{#if value?.length}
diff --git a/frontend/src/lib/components/AutheliaSetting.svelte b/frontend/src/lib/components/AutheliaSetting.svelte
index bd32b632a9..a3aa2e3458 100644
--- a/frontend/src/lib/components/AutheliaSetting.svelte
+++ b/frontend/src/lib/components/AutheliaSetting.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -30,10 +34,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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={'authelia'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/AuthentikSetting.svelte b/frontend/src/lib/components/AuthentikSetting.svelte
index 6aa6a76d57..e672970c08 100644
--- a/frontend/src/lib/components/AuthentikSetting.svelte
+++ b/frontend/src/lib/components/AuthentikSetting.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
+
+	let { value = $bindable() }: Props = $props();
 
-	$: enabled = value != undefined
 
-	// Initialize org from existing auth_url
-	$: org = value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? ''
 
-	$: changeOrg(org)
 
 	function changeOrg(org) {
 		if (value && org) {
@@ -30,10 +32,16 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	// Initialize org from existing auth_url
+	let org = $derived(value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '')
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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={'authentik'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/AzureOauthSettings.svelte b/frontend/src/lib/components/AzureOauthSettings.svelte
index e2ccc81420..3c1d24c770 100644
--- a/frontend/src/lib/components/AzureOauthSettings.svelte
+++ b/frontend/src/lib/components/AzureOauthSettings.svelte
@@ -1,38 +1,48 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { ExternalLink } from 'lucide-svelte'
 	import OauthScopes from './OauthScopes.svelte'
 
-	export let connect_config: {
+	interface Props {
+		connect_config?: {
 		scopes: string[]
 		auth_url: string
 		token_url: string
 		req_body_auth: boolean
 		extra_params: { tenant_id: string }
 		extra_params_callback: Record<string, any>
-	} = {
+	};
+	}
+
+	let { connect_config = $bindable({
 		scopes: ['offline_access'],
 		auth_url: '',
 		token_url: '',
 		req_body_auth: true,
 		extra_params: { tenant_id: '' },
 		extra_params_callback: {}
-	}
+	}) }: Props = $props();
 
-	$: if (!connect_config) {
-		connect_config = {
-			scopes: ['offline_access'],
-			auth_url: '',
-			token_url: '',
-			req_body_auth: true,
-			extra_params: { tenant_id: '' },
-			extra_params_callback: {}
+	run(() => {
+		if (!connect_config) {
+			connect_config = {
+				scopes: ['offline_access'],
+				auth_url: '',
+				token_url: '',
+				req_body_auth: true,
+				extra_params: { tenant_id: '' },
+				extra_params_callback: {}
+			}
 		}
-	}
+	});
 
-	$: if (connect_config.extra_params.tenant_id) {
-		connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`
-		connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`
-	}
+	run(() => {
+		if (connect_config.extra_params.tenant_id) {
+			connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`
+			connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`
+		}
+	});
 </script>
 
 <label class="flex flex-col gap-1" for="tenant-id">
diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte
index 11042b4f1e..8dcad8ef8e 100644
--- a/frontend/src/lib/components/Badge.svelte
+++ b/frontend/src/lib/components/Badge.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'
-	export let twBgColor = 'bg-blue-200'
-	export let twTextColor = 'text-secondary'
-	export let tooltip: string | undefined = undefined
+	interface Props {
+		twBgColor?: string;
+		twTextColor?: string;
+		tooltip?: string | undefined;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		twBgColor = 'bg-blue-200',
+		twTextColor = 'text-secondary',
+		tooltip = undefined,
+		children
+	}: Props = $props();
 </script>
 
 <span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">
-	<slot />
+	{@render children?.()}
 	{#if tooltip && tooltip != ''}
 		<Tooltip>{tooltip}</Tooltip>
 	{/if}
diff --git a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
index 37e3da3d21..6fa87abf64 100644
--- a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
+++ b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
@@ -5,12 +5,21 @@
 	import Alert from './common/alert/Alert.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let email: string
-	export let username: string
-	export let isConflict = false
-	export let noPadding = false
+	interface Props {
+		email: string;
+		username: string;
+		isConflict?: boolean;
+		noPadding?: boolean;
+	}
 
-	let loading = false
+	let {
+		email,
+		username = $bindable(),
+		isConflict = false,
+		noPadding = false
+	}: Props = $props();
+
+	let loading = $state(false)
 
 	let usernameInfo:
 		| {
@@ -20,7 +29,7 @@
 					username: string
 				}[]
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 
 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
@@ -83,7 +92,7 @@
 	<input
 		type="text"
 		class="mb-4"
-		on:keyup={handleKeyUp}
+		onkeyup={handleKeyUp}
 		bind:value={username}
 		disabled={isConflict}
 	/>
diff --git a/frontend/src/lib/components/ContextualVariableEditor.svelte b/frontend/src/lib/components/ContextualVariableEditor.svelte
index b859e08691..a12f7d1bcd 100644
--- a/frontend/src/lib/components/ContextualVariableEditor.svelte
+++ b/frontend/src/lib/components/ContextualVariableEditor.svelte
@@ -13,9 +13,9 @@
 
 	const dispatch = createEventDispatcher()
 
-	let edit: boolean = false
-	let name: string = ''
-	let value: string = ''
+	let edit: boolean = $state(false)
+	let name: string = $state('')
+	let value: string = $state('')
 
 	export function initNew(): void {
 		edit = false
@@ -31,7 +31,7 @@
 		drawer.openDrawer()
 	}
 
-	let drawer: Drawer
+	let drawer: Drawer = $state()
 
 	async function updateVariable(): Promise<void> {
 		await WorkspaceService.setEnvironmentVariable({
diff --git a/frontend/src/lib/components/CustomOauth.svelte b/frontend/src/lib/components/CustomOauth.svelte
index 8678f46822..bbc020d794 100644
--- a/frontend/src/lib/components/CustomOauth.svelte
+++ b/frontend/src/lib/components/CustomOauth.svelte
@@ -1,28 +1,32 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	export let connect_config = {
+	let { connect_config = $bindable({
 		scopes: [],
 		auth_url: '',
 		token_url: '',
 		req_body_auth: false,
 		extra_params: {},
 		extra_params_callback: {}
-	}
+	}) } = $props();
 
-	$: if (!connect_config) {
-		connect_config = {
-			scopes: [],
-			auth_url: '',
-			token_url: '',
-			req_body_auth: false,
-			extra_params: {},
-			extra_params_callback: {}
+	run(() => {
+		if (!connect_config) {
+			connect_config = {
+				scopes: [],
+				auth_url: '',
+				token_url: '',
+				req_body_auth: false,
+				extra_params: {},
+				extra_params_callback: {}
+			}
 		}
-	}
+	});
 </script>
 
 <div class="flex flex-col gap-6">
@@ -42,12 +46,12 @@
 			bind:value={connect_config.token_url}
 		/>
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs">Scopes</span>
 		<OauthScopes bind:scopes={connect_config.scopes} />
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -57,14 +61,14 @@
 		>
 		<OauthExtraParams bind:extra_params={connect_config.extra_params} />
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 		>
 		<OauthExtraParams bind:extra_params={connect_config.extra_params_callback} />
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Payload <Tooltip
diff --git a/frontend/src/lib/components/CustomSso.svelte b/frontend/src/lib/components/CustomSso.svelte
index e11a8d98d8..5c36e1c57e 100644
--- a/frontend/src/lib/components/CustomSso.svelte
+++ b/frontend/src/lib/components/CustomSso.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	export let login_config = {
+	let { login_config = $bindable({
 		scopes: [],
 		auth_url: '',
 		token_url: '',
@@ -12,19 +14,21 @@
 		req_body_auth: false,
 		extra_params: {},
 		extra_params_callback: {}
-	}
+	}) } = $props();
 
-	$: if (!login_config) {
-		login_config = {
-			scopes: [],
-			auth_url: '',
-			token_url: '',
-			userinfo_url: '',
-			req_body_auth: false,
-			extra_params: {},
-			extra_params_callback: {}
+	run(() => {
+		if (!login_config) {
+			login_config = {
+				scopes: [],
+				auth_url: '',
+				token_url: '',
+				userinfo_url: '',
+				req_body_auth: false,
+				extra_params: {},
+				extra_params_callback: {}
+			}
 		}
-	}
+	});
 </script>
 
 <label class="block pb-6">
@@ -51,12 +55,12 @@
 		bind:value={login_config.userinfo_url}
 	/>
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -66,14 +70,14 @@
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip
diff --git a/frontend/src/lib/components/DefaultScripts.svelte b/frontend/src/lib/components/DefaultScripts.svelte
index 40a8420278..598f01de80 100644
--- a/frontend/src/lib/components/DefaultScripts.svelte
+++ b/frontend/src/lib/components/DefaultScripts.svelte
@@ -6,11 +6,15 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import DefaultScriptsInner from './DefaultScriptsInner.svelte'
 
-	let drawer: Drawer
-	export let placement: 'left' | 'right' = 'left'
+	let drawer: Drawer = $state()
 
-	export let size: 'xs3' | 'xs2' = 'xs2'
-	export let noText = false
+	interface Props {
+		placement?: 'left' | 'right';
+		size?: 'xs3' | 'xs2';
+		noText?: boolean;
+	}
+
+	let { placement = 'left', size = 'xs2', noText = false }: Props = $props();
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
diff --git a/frontend/src/lib/components/DefaultScriptsInner.svelte b/frontend/src/lib/components/DefaultScriptsInner.svelte
index 6d4979aae1..1a451d8264 100644
--- a/frontend/src/lib/components/DefaultScriptsInner.svelte
+++ b/frontend/src/lib/components/DefaultScriptsInner.svelte
@@ -6,8 +6,11 @@
 	import { defaultScriptLanguages } from '$lib/scripts'
 	import Alert from './common/alert/Alert.svelte'
 
-	export let small = false
-	$: langs = computeLangs($defaultScripts)
+	interface Props {
+		small?: boolean;
+	}
+
+	let { small = false }: Props = $props();
 
 	function computeLangs(defaultScripts: WorkspaceDefaultScripts | undefined): Script['language'][] {
 		const allLangs = Object.keys(defaultScriptLanguages) as Script['language'][]
@@ -30,6 +33,7 @@
 			requestBody: $defaultScripts
 		})
 	}
+	let langs = $derived(computeLangs($defaultScripts))
 </script>
 
 <Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
@@ -47,7 +51,7 @@
 			<div>
 				{#if i > 0}
 					<button
-						on:click={() => changePosition(i ?? 0, true)}
+						onclick={() => changePosition(i ?? 0, true)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move up"
 					>
@@ -56,7 +60,7 @@
 				{/if}
 				{#if i < langs.length - 1}
 					<button
-						on:click={() => changePosition(i ?? 0, false)}
+						onclick={() => changePosition(i ?? 0, false)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move down">&downarrow;</button
 					>
diff --git a/frontend/src/lib/components/Description.svelte b/frontend/src/lib/components/Description.svelte
index c3cd74c7d6..16c5b13f11 100644
--- a/frontend/src/lib/components/Description.svelte
+++ b/frontend/src/lib/components/Description.svelte
@@ -2,11 +2,17 @@
 	import { ExternalLink } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let link: string | undefined = undefined
+	interface Props {
+		link?: string | undefined
+		class?: string
+		children?: import('svelte').Snippet
+	}
+
+	let { link = undefined, class: c = '', children }: Props = $props()
 </script>
 
-<div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
-	<slot />
+<div class={twMerge('text-xs text-primary font-normal', c)}>
+	{@render children?.()}
 	{#if link}
 		<a href={link} target="_blank" class="whitespace-nowrap"
 			>Learn more <ExternalLink size={12} class="inline-block" /></a
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index e348d33518..ad6833ecb0 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -22,7 +22,7 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { onDestroy, onMount, setContext, untrack } from 'svelte'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { getUserExt } from '$lib/user'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
 	import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte'
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index 902de661aa..ef7b703328 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -42,6 +42,8 @@
 		buttonReplacement?: import('svelte').Snippet
 		menu?: import('svelte').Snippet
 		maxHeight?: string | undefined
+		onOpen?: () => void
+		onClose?: () => void
 	}
 
 	let {
@@ -64,7 +66,9 @@
 		btnId = undefined,
 		buttonReplacement,
 		menu,
-		maxHeight = undefined
+		maxHeight = undefined,
+		onOpen: onOpenProp = undefined,
+		onClose: onCloseProp = undefined
 	}: Props = $props()
 
 	let buttonEl: HTMLButtonElement | undefined = $state(undefined)
@@ -121,7 +125,7 @@
 	}
 </script>
 
-<ResolveOpen {open} on:open on:close />
+<ResolveOpen {open} onOpen={onOpenProp} onClose={onCloseProp} />
 
 <button
 	bind:this={buttonEl}
diff --git a/frontend/src/lib/components/DurationMs.svelte b/frontend/src/lib/components/DurationMs.svelte
index 451925c0c6..60d2964ffe 100644
--- a/frontend/src/lib/components/DurationMs.svelte
+++ b/frontend/src/lib/components/DurationMs.svelte
@@ -4,9 +4,13 @@
 	import { Hourglass } from 'lucide-svelte'
 	import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte'
 
-	export let duration_ms: number
-	export let self_wait_time_ms: number | undefined = undefined
-	export let aggregate_wait_time_ms: number | undefined = undefined
+	interface Props {
+		duration_ms: number;
+		self_wait_time_ms?: number | undefined;
+		aggregate_wait_time_ms?: number | undefined;
+	}
+
+	let { duration_ms, self_wait_time_ms = undefined, aggregate_wait_time_ms = undefined }: Props = $props();
 </script>
 
 <div>
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index 99fe00bdb0..02b3ad7304 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -592,7 +592,7 @@
 												{argName}
 												{#if !uiOnly}
 													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
-														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
+														<Popover placement="bottom-end" contentClasses="p-4" closeButton>
 															{#snippet trigger()}
 																<Button
 																	variant="subtle"
diff --git a/frontend/src/lib/components/ExecutionDuration.svelte b/frontend/src/lib/components/ExecutionDuration.svelte
index 9044adff36..9a520a942d 100644
--- a/frontend/src/lib/components/ExecutionDuration.svelte
+++ b/frontend/src/lib/components/ExecutionDuration.svelte
@@ -1,32 +1,40 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { type Job } from '$lib/gen'
 	import { isScriptPreview } from '$lib/utils'
 	import { onDestroy } from 'svelte'
 
-	export let job: Job | undefined = undefined
-	/** Execution duration of current active job (in ms) */
-	export let executionDuration: number = 0
-	/** Is current job running more than specified value in `longDefinition` seconds */
-	export let longRunning: boolean = false
-	/** What do we count as "long" (in ms)*/
-	export let longDefinition: number = 30_000
-	/** How often component updates execution duration (in ms)
+	
+	
+	
+	
+	interface Props {
+		job?: Job | undefined;
+		/** Execution duration of current active job (in ms) */
+		executionDuration?: number;
+		/** Is current job running more than specified value in `longDefinition` seconds */
+		longRunning?: boolean;
+		/** What do we count as "long" (in ms)*/
+		longDefinition?: number;
+		/** How often component updates execution duration (in ms)
 	 *   Higher value -> more efficient component is, less accuracy it has
 	 *   Lower value -> less efficient component is, more accuracy it has
 	 */
-	export let updateResolution: number = 5_000
+		updateResolution?: number;
+	}
+
+	let {
+		job = $bindable(undefined),
+		executionDuration = $bindable(0),
+		longRunning = $bindable(false),
+		longDefinition = 30_000,
+		updateResolution = 5_000
+	}: Props = $props();
 
 	let startedAt: number | undefined = undefined
-	let busy: boolean = false
+	let busy: boolean = $state(false)
 	let interval: number | undefined
-	// Detect when execution of job started
-	$: if (
-		!busy &&
-		job &&
-		'running' in job &&
-		(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
-	)
-		start(job)
 
 	function start(job: Job) {
 		busy = true
@@ -50,4 +58,14 @@
 		// Clear the interval when the component is destroyed
 		clearInterval(interval)
 	})
+	// Detect when execution of job started
+	run(() => {
+		if (
+			!busy &&
+			job &&
+			'running' in job &&
+			(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
+		)
+			start(job)
+	});
 </script>
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 87119c8e75..8b56bdfd79 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -5,19 +5,37 @@
 	import Tooltip from './meltComponents/Tooltip.svelte'
 	import { InfoIcon } from 'lucide-svelte'
 
-	export let label: string
-	export let format: string = ''
-	export let contentEncoding = ''
-	export let type: string | undefined = undefined
-	export let disabled: boolean = false
-	export let required = false
-	export let displayType: boolean = true
-	export let labelClass: string = ''
-	export let prettify = false
-	export let simpleTooltip: string | undefined = undefined
-	export let lightHeader = false
-	export let SimpleTooltipIcon = InfoIcon
-	export let simpleTooltipIconClass = ''
+	interface Props {
+		label: string;
+		format?: string;
+		contentEncoding?: string;
+		type?: string | undefined;
+		disabled?: boolean;
+		required?: boolean;
+		displayType?: boolean;
+		labelClass?: string;
+		prettify?: boolean;
+		simpleTooltip?: string | undefined;
+		lightHeader?: boolean;
+		SimpleTooltipIcon?: any;
+		simpleTooltipIconClass?: string;
+	}
+
+	let {
+		label,
+		format = '',
+		contentEncoding = '',
+		type = undefined,
+		disabled = false,
+		required = false,
+		displayType = true,
+		labelClass = '',
+		prettify = false,
+		simpleTooltip = undefined,
+		lightHeader = false,
+		SimpleTooltipIcon = InfoIcon,
+		simpleTooltipIconClass = ''
+	}: Props = $props();
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
@@ -54,9 +72,11 @@
 	{#if !emptyString(simpleTooltip)}
 		<Tooltip class="ml-2" placement="bottom">
 			<SimpleTooltipIcon size="14" class={'-mb-0.5 ' + simpleTooltipIconClass} />
-			<span class="text-xs" slot="text">
-				{simpleTooltip}
-			</span>
+			{#snippet text()}
+						<span class="text-xs" >
+					{simpleTooltip}
+				</span>
+					{/snippet}
 		</Tooltip>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index 35c21cb261..f4b3b1cc97 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -9,23 +9,38 @@
 	import { dfs } from './flows/dfs'
 	import { workspaceStore } from '$lib/stores'
 
-	export let flow: {
+
+	interface Props {
+		flow: {
 		summary: string
 		description?: string
 		value: FlowValue
 		schema?: any
 		path?: string
+	};
+		overflowAuto?: boolean;
+		noSide?: boolean;
+		download?: boolean;
+		noGraph?: boolean;
+		triggerNode?: boolean;
+		stepDetail?: FlowModule | string | undefined;
+		workspace?: string | undefined;
+		minHeight?: number;
+		noBorder?: boolean;
 	}
 
-	export let overflowAuto = false
-	export let noSide = false
-	export let download = false
-	export let noGraph = false
-	export let triggerNode = false
-	export let stepDetail: FlowModule | string | undefined = undefined
-	export let workspace: string | undefined = $workspaceStore
-	export let minHeight = 400
-	export let noBorder = false
+	let {
+		flow,
+		overflowAuto = false,
+		noSide = false,
+		download = false,
+		noGraph = false,
+		triggerNode = false,
+		stepDetail = $bindable(undefined),
+		workspace = $workspaceStore,
+		minHeight = 400,
+		noBorder = false
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
index 81d15843d8..95406afc32 100644
--- a/frontend/src/lib/components/FlowGraphViewerStep.svelte
+++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte
@@ -19,11 +19,15 @@
 	import HighlightTheme from './HighlightTheme.svelte'
 	import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'
 
-	export let schema: any | undefined = undefined
 
-	export let stepDetail: FlowModule | string | undefined = undefined
-	export let jobScriptHash: string | undefined = undefined
-	let codeViewer: Drawer
+	interface Props {
+		schema?: any | undefined;
+		stepDetail?: FlowModule | string | undefined;
+		jobScriptHash?: string | undefined;
+	}
+
+	let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined }: Props = $props();
+	let codeViewer: Drawer = $state()
 </script>
 
 <HighlightTheme />
diff --git a/frontend/src/lib/components/FlowInputViewer.svelte b/frontend/src/lib/components/FlowInputViewer.svelte
index 94c25ffcc4..62aef2dd37 100644
--- a/frontend/src/lib/components/FlowInputViewer.svelte
+++ b/frontend/src/lib/components/FlowInputViewer.svelte
@@ -3,7 +3,11 @@
 
 	import FieldHeader from './FieldHeader.svelte'
 
-	export let schema: Schema | { [key: string]: unknown } | undefined
+	interface Props {
+		schema: Schema | { [key: string]: unknown } | undefined;
+	}
+
+	let { schema }: Props = $props();
 </script>
 
 <ul class="my-2">
diff --git a/frontend/src/lib/components/FlowPlugConnect.svelte b/frontend/src/lib/components/FlowPlugConnect.svelte
index da70d882db..cd44f3d1bd 100644
--- a/frontend/src/lib/components/FlowPlugConnect.svelte
+++ b/frontend/src/lib/components/FlowPlugConnect.svelte
@@ -4,9 +4,13 @@
 	import AnimatedButton from './common/button/AnimatedButton.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let connecting: boolean
-	export let id: undefined | string = undefined
-	export let wrapperClasses = ''
+	interface Props {
+		connecting: boolean;
+		id?: undefined | string;
+		wrapperClasses?: string;
+	}
+
+	let { connecting, id = undefined, wrapperClasses = '' }: Props = $props();
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
diff --git a/frontend/src/lib/components/FlowRestartButton.svelte b/frontend/src/lib/components/FlowRestartButton.svelte
index 8af77f2e6b..5733e1e110 100644
--- a/frontend/src/lib/components/FlowRestartButton.svelte
+++ b/frontend/src/lib/components/FlowRestartButton.svelte
@@ -161,7 +161,7 @@
 		<Popover
 			floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
 			disablePopup={!flowPath}
-			on:openChange={(e) => { if (e.detail) loadFlowVersions() }}
+			onOpenChange={(isOpen) => { if (isOpen) loadFlowVersions() }}
 		>
 			{#snippet trigger()}
 				{@render singleRestartButton()}
@@ -178,7 +178,7 @@
 {:else}
 	<Popover
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
-		on:openChange={(e) => { if (e.detail) loadFlowVersions() }}
+		onOpenChange={(isOpen) => { if (isOpen) loadFlowVersions() }}
 	>
 		{#snippet trigger()}
 			<Button
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index a96eded3cd..cc77c2f6a6 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -270,12 +270,13 @@
 			{/if}
 			{#if perms}
 				<TableCustom>
-					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
-						<th>user/group</th>
-						<th></th>
-						<th></th>
-					</tr>
+					{#snippet header_row()}
+						<tr>
+							<th>user/group</th>
+							<th></th>
+							<th></th>
+						</tr>
+					{/snippet}
 					{#snippet body()}
 						<tbody>
 							{#each perms ?? [] as { owner_name, role }}<tr>
@@ -407,10 +408,12 @@
 				<p class="text-primary text-sm">No folder is managing this folder</p>
 			{:else}
 				<TableCustom>
-					<tr slot="header-row">
+					{#snippet header_row()}
+					<tr>
 						<th>folder</th>
 						<th />
 					</tr>
+					{/snippet}
 					<tbody slot="body">
 						{#each managing_folders as managing_folder}<tr>
 								<td>{managing_folder.split('/')[1]}</td>
diff --git a/frontend/src/lib/components/FolderUsageInfo.svelte b/frontend/src/lib/components/FolderUsageInfo.svelte
index ab3241083a..cc706da9ed 100644
--- a/frontend/src/lib/components/FolderUsageInfo.svelte
+++ b/frontend/src/lib/components/FolderUsageInfo.svelte
@@ -1,19 +1,27 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { FolderService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import Cell from './table/Cell.svelte'
 
-	export let name: string
-	export let tabular = false
-	export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources']
+	interface Props {
+		name: string;
+		tabular?: boolean;
+		order?: any;
+	}
 
-	$: $workspaceStore && loadUsage()
+	let { name, tabular = false, order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'] }: Props = $props();
 
-	let usage: Record<string, number> = {}
+
+	let usage: Record<string, number> = $state({})
 
 	async function loadUsage() {
 		usage = await FolderService.getFolderUsage({ workspace: $workspaceStore!, name })
 	}
+	run(() => {
+		$workspaceStore && loadUsage()
+	});
 </script>
 
 {#if tabular}
diff --git a/frontend/src/lib/components/GraphqlSchemaViewer.svelte b/frontend/src/lib/components/GraphqlSchemaViewer.svelte
index 7929083d9a..9f84604585 100644
--- a/frontend/src/lib/components/GraphqlSchemaViewer.svelte
+++ b/frontend/src/lib/components/GraphqlSchemaViewer.svelte
@@ -8,7 +8,12 @@
 	let divEl: HTMLDivElement | null = null
 	let editor: meditor.IStandaloneCodeEditor
 
-	export let code: string = ''
+	interface Props {
+		code?: string
+		class?: string
+	}
+
+	let { code = '', class: c = '' }: Props = $props()
 
 	async function loadMonaco() {
 		editor = meditor.create(divEl as HTMLDivElement, {
@@ -43,4 +48,4 @@
 	})
 </script>
 
-<div bind:this={divEl} class="{$$props.class ?? ''} editor"></div>
+<div bind:this={divEl} class="{c ?? ''} editor"></div>
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index a8391bd8a6..e707a93203 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -159,12 +159,13 @@
 		{/if}
 		{#if members}
 			<TableCustom>
-				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-				<tr slot="header-row">
-					<th>user</th>
-					<th></th>
-					<th></th>
-				</tr>
+				{#snippet header_row()}
+					<tr>
+						<th>user</th>
+						<th></th>
+						<th></th>
+					</tr>
+				{/snippet}
 				{#snippet body()}
 					<tbody>
 						{#each members ?? [] as { member_name, role }}<tr>
@@ -301,10 +302,11 @@
 			{#if instance_group?.emails}
 				<h2 class="mt-6 text-emphasis text-xs font-semibold">Members from the instance group</h2>
 				<TableCustom>
-					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
-						<th>user</th>
-					</tr>
+					{#snippet header_row()}
+						<tr>
+							<th>user</th>
+						</tr>
+					{/snippet}
 					{#snippet body()}
 						<tbody>
 							{#each instance_group?.emails ?? [] as email}<tr>
diff --git a/frontend/src/lib/components/HighlightCode.svelte b/frontend/src/lib/components/HighlightCode.svelte
index be6e6b6ef0..6487fa5673 100644
--- a/frontend/src/lib/components/HighlightCode.svelte
+++ b/frontend/src/lib/components/HighlightCode.svelte
@@ -134,9 +134,11 @@
 			{#if !lines}
 				<Highlight class="nowrap {className}" language={lang} {code} />
 			{:else}
-				<Highlight class="nowrap {className}" language={lang} {code} let:highlighted>
-					<LineNumbers {highlighted} />
-				</Highlight>
+				<Highlight class="nowrap {className}" language={lang} {code} >
+					{#snippet children({ highlighted })}
+										<LineNumbers {highlighted} />
+														{/snippet}
+								</Highlight>
 			{/if}
 		{:else}
 			<pre class="overflow-auto max-h-screen text-xs {className}"
diff --git a/frontend/src/lib/components/HistoricList.svelte b/frontend/src/lib/components/HistoricList.svelte
index 4f120f3dfb..676e7b4d7a 100644
--- a/frontend/src/lib/components/HistoricList.svelte
+++ b/frontend/src/lib/components/HistoricList.svelte
@@ -134,8 +134,8 @@
 			{showAuthor}
 			{placement}
 			{viewerOpen}
-			on:openChange={({ detail }) => {
-				updateViewerOpenState(item.id, detail)
+			onOpenChange={(isOpen) => {
+				updateViewerOpenState(item.id, isOpen)
 			}}
 			{limitPayloadSize}
 		/>
diff --git a/frontend/src/lib/components/InfiniteList.svelte b/frontend/src/lib/components/InfiniteList.svelte
index 10351a95cc..d4b5a05f9a 100644
--- a/frontend/src/lib/components/InfiniteList.svelte
+++ b/frontend/src/lib/components/InfiniteList.svelte
@@ -178,13 +178,13 @@
 	<tbody class="h-full w-full">
 		{#if extra_row}
 			<Row
-				on:click={() => dispatch('select', 'extraRow')}
+				onclick={() => dispatch('select', 'extraRow')}
 				class={twMerge(
 					extraRowClasses.class,
 					selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
 					'cursor-pointer rounded-md'
 				)}
-				on:hover={(e) => (hovered = e.detail ? 'extraRow' : undefined)}
+				onHover={(h) => (hovered = h ? 'extraRow' : undefined)}
 			>
 				{@render extra_row?.({ hover: hovered === 'extraRow' })}
 			</Row>
@@ -195,13 +195,13 @@
 				{@render customRow?.({ item, hover })}
 			{:else}
 				<Row
-					on:click={() => dispatch('select', item)}
+					onclick={() => dispatch('select', item)}
 					class={twMerge(
 						selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
 						'cursor-pointer rounded-md',
 						item.isNew && index === 0 ? 'animate-slideIn' : 'group'
 					)}
-					on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
+					onHover={(h) => (hovered = h ? item.id : undefined)}
 				>
 					{@render children?.({ item, hover })}
 				</Row>
diff --git a/frontend/src/lib/components/InputTransformsViewer.svelte b/frontend/src/lib/components/InputTransformsViewer.svelte
index 15318ec31c..270bef312f 100644
--- a/frontend/src/lib/components/InputTransformsViewer.svelte
+++ b/frontend/src/lib/components/InputTransformsViewer.svelte
@@ -7,8 +7,12 @@
 	import Cell from './table/Cell.svelte'
 	import Row from './table/Row.svelte'
 
-	export let inputTransforms: Record<string, InputTransform>
-	$: entries = Object.entries(inputTransforms)
+	interface Props {
+		inputTransforms: Record<string, InputTransform>;
+	}
+
+	let { inputTransforms }: Props = $props();
+	let entries = $derived(Object.entries(inputTransforms))
 </script>
 
 {#if entries.length}
diff --git a/frontend/src/lib/components/InstanceGroupEditor.svelte b/frontend/src/lib/components/InstanceGroupEditor.svelte
index cf2a3ded0a..b7d4f50fe6 100644
--- a/frontend/src/lib/components/InstanceGroupEditor.svelte
+++ b/frontend/src/lib/components/InstanceGroupEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
 	import autosize from '$lib/autosize'
@@ -8,17 +10,18 @@
 	import { sendUserToast } from '$lib/toast'
 	import { Loader2 } from 'lucide-svelte'
 
-	export let name: string
+	interface Props {
+		name: string;
+	}
 
-	let email = ''
-	let instance_group: InstanceGroup | undefined
-	let members: { member_email: string }[] | undefined = undefined
+	let { name }: Props = $props();
+
+	let email = $state('')
+	let instance_group: InstanceGroup | undefined = $state()
+	let members: { member_email: string }[] | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 
-	$: {
-		load()
-	}
 
 	async function load() {
 		return Promise.all([loadInstanceGroup()])
@@ -32,6 +35,9 @@
 				})
 			: []
 	}
+	run(() => {
+		load()
+	});
 </script>
 
 <div class="flex flex-col gap-6">
@@ -85,17 +91,20 @@
 		</div>
 		{#if members}
 			<TableCustom>
-				<tr slot="header-row">
-					<th>user</th>
-					<th></th>
-				</tr>
-				<tbody slot="body">
-					{#each members as { member_email }}<tr>
-							<td>{member_email}</td>
-							<td>
-								<button
-									class="ml-2 text-red-500"
-									on:click={async () => {
+				{#snippet header_row()}
+					<tr>
+						<th>user</th>
+						<th></th>
+					</tr>
+				{/snippet}
+				{#snippet body()}
+								<tbody >
+						{#each members as { member_email }}<tr>
+								<td>{member_email}</td>
+								<td>
+									<button
+										class="ml-2 text-red-500"
+										onclick={async () => {
 										await GroupService.removeUserFromInstanceGroup({
 											name,
 											requestBody: { email: member_email }
@@ -104,10 +113,11 @@
 										sendUserToast('User removed')
 										loadInstanceGroup()
 									}}>remove</button
-								>
-							</td>
-						</tr>{/each}
-				</tbody>
+									>
+								</td>
+							</tr>{/each}
+					</tbody>
+							{/snippet}
 			</TableCustom>
 		{:else}
 			<div class="flex flex-col">
diff --git a/frontend/src/lib/components/InstanceNameEditor.svelte b/frontend/src/lib/components/InstanceNameEditor.svelte
index 31fc3d738b..d20f9c3d89 100644
--- a/frontend/src/lib/components/InstanceNameEditor.svelte
+++ b/frontend/src/lib/components/InstanceNameEditor.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { stopPropagation, createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { Pencil } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
@@ -9,13 +12,23 @@
 	import { sendUserToast } from '$lib/toast'
 	import TextInput from './text_input/TextInput.svelte'
 
-	export let value: string | undefined
-	export let email: string
-	export let username: string | undefined = undefined
-	export let automateUsernameCreation: boolean = false
-	export let login_type: string
+	interface Props {
+		value: string | undefined;
+		email: string;
+		username?: string | undefined;
+		automateUsernameCreation?: boolean;
+		login_type: string;
+	}
 
-	let password: string = ''
+	let {
+		value = $bindable(),
+		email,
+		username = undefined,
+		automateUsernameCreation = false,
+		login_type = $bindable()
+	}: Props = $props();
+
+	let password: string = $state('')
 
 	const dispatch = createEventDispatcher()
 
@@ -46,112 +59,116 @@
 	}}
 	closeButton
 >
-	<svelte:fragment slot="trigger">
-		<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
-			>Edit</Button
-		>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col gap-8 max-w-sm p-4">
-			{#if automateUsernameCreation && username}
-				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
-			{/if}
-			<label class="block text-primary">
-				<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
-				<div class="flex w-full">
-					<TextInput
-						inputProps={{
-							onclick: (e) => {
-								e.stopPropagation()
-							},
-							onkeydown: (e) => {
-								e.stopPropagation()
-							},
-							onkeypress: ({ key }) => {
-								if (key === 'Enter') {
-									saveName()
+	{#snippet trigger()}
+	
+			<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
+				>Edit</Button
+			>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col gap-8 max-w-sm p-4">
+				{#if automateUsernameCreation && username}
+					<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
+				{/if}
+				<label class="block text-primary">
+					<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
+					<div class="flex w-full">
+						<TextInput
+							inputProps={{
+								onclick: (e) => {
+									e.stopPropagation()
+								},
+								onkeydown: (e) => {
+									e.stopPropagation()
+								},
+								onkeypress: ({ key }) => {
+									if (key === 'Enter') {
+										saveName()
+									}
 								}
-							}
+							}}
+							bind:value
+						/>
+					</div>
+					<Button
+						unifiedSize="md"
+						variant="default"
+						buttonType="button"
+						btnClasses="mt-2 "
+						aria-label="Save ID"
+						onclick={() => {
+							saveName()
 						}}
-						bind:value
-					/>
-				</div>
-				<Button
-					unifiedSize="md"
-					variant="default"
-					buttonType="button"
-					btnClasses="mt-2 "
-					aria-label="Save ID"
-					onclick={() => {
-						saveName()
-					}}
-				>
-					Update name
-				</Button>
-			</label>
-			<label class="block text-primary">
-				<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
-				<div class="flex w-full">
-					<input
-						type="password"
-						bind:value={password}
-						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
+					>
+						Update name
+					</Button>
+				</label>
+				<label class="block text-primary">
+					<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
+					<div class="flex w-full">
+						<input
+							type="password"
+							bind:value={password}
+							class="!w-auto grow"
+							onclick={stopPropagation(() => {})}
+							onkeydown={stopPropagation(bubble('keydown'))}
+							onkeypress={stopPropagation(({ key }) => {
 							if (key === 'Enter') {
 								savePassword()
 							}
+						})}
+						/>
+					</div>
+					<Button
+						unifiedSize="md"
+						variant="default"
+						buttonType="button"
+						btnClasses="mt-2 "
+						aria-label="Save ID"
+						on:click={() => {
+							savePassword()
 						}}
-					/>
-				</div>
-				<Button
-					unifiedSize="md"
-					variant="default"
-					buttonType="button"
-					btnClasses="mt-2 "
-					aria-label="Save ID"
-					on:click={() => {
-						savePassword()
-					}}
-				>
-					Update password
-				</Button>
-			</label>
-			<label class="block text-primary">
-				<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
+					>
+						Update password
+					</Button>
+				</label>
+				<label class="block text-primary">
+					<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
 
-				<div class="flex w-full">
-					<input
-						type="text"
-						bind:value={login_type}
-						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
+					<div class="flex w-full">
+						<input
+							type="text"
+							bind:value={login_type}
+							class="!w-auto grow"
+							onclick={stopPropagation(() => {})}
+							onkeydown={stopPropagation(bubble('keydown'))}
+							onkeypress={stopPropagation(({ key }) => {
 							if (key === 'Enter') {
 								saveLoginType()
 							}
+						})}
+						/>
+					</div>
+					<div class="text-2xs text-secondary mb-1">
+						Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
+						microsoft
+					</div>
+					<Button
+						unifiedSize="md"
+						variant="default"
+						buttonType="button"
+						btnClasses="mt-2 "
+						aria-label="Save login type"
+						on:click={() => {
+							saveLoginType()
 						}}
-					/>
-				</div>
-				<div class="text-2xs text-secondary mb-1">
-					Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
-					microsoft
-				</div>
-				<Button
-					unifiedSize="md"
-					variant="default"
-					buttonType="button"
-					btnClasses="mt-2 "
-					aria-label="Save login type"
-					on:click={() => {
-						saveLoginType()
-					}}
-				>
-					Update login type
-				</Button>
-			</label>
-		</div>
-	</svelte:fragment>
+					>
+						Update login type
+					</Button>
+				</label>
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index 82182404e6..f1a9c16a55 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -8,13 +8,17 @@
 	import { generateRandomString } from '$lib/utils'
 	import { globalEmailInvite } from '$lib/stores'
 
-	export let close: (() => void) | undefined = undefined
+	interface Props {
+		close?: (() => void) | undefined;
+	}
+
+	let { close = undefined }: Props = $props();
 
 	const dispatch = createEventDispatcher()
 
-	let is_super_admin = false
-	let password: string = generateRandomString(10)
-	let name: string | undefined
+	let is_super_admin = $state(false)
+	let password: string = $state(generateRandomString(10))
+	let name: string | undefined = $state()
 	let company: string | undefined
 
 	async function addUser() {
diff --git a/frontend/src/lib/components/KanidmSetting.svelte b/frontend/src/lib/components/KanidmSetting.svelte
index c8e0b5cfad..199c4bc672 100644
--- a/frontend/src/lib/components/KanidmSetting.svelte
+++ b/frontend/src/lib/components/KanidmSetting.svelte
@@ -1,24 +1,22 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
+
+	let { value = $bindable() }: Props = $props();
 
 	const AUTH_URL_SUFFIX = '/ui/oauth2'
 
-	$: enabled = value != undefined
 
-	// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
-	//
-	// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
-	// also allow lazy/async binding of the `value` prop.
-	$: derivedBaseUrl = value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, '')
-	let proxyUrlValue = undefined
-	$: baseUrl = proxyUrlValue ?? derivedBaseUrl ?? ''
+	let proxyUrlValue = $state(undefined)
 
-	$: changeValues({ baseUrl, id: value?.id ?? '' })
 
 	function changeValues({ baseUrl, id }) {
 		if (value) {
@@ -40,10 +38,20 @@
 			proxyUrlValue = baseUrl
 		}
 	}
+	let enabled = $derived(value != undefined)
+	// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
+	//
+	// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
+	// also allow lazy/async binding of the `value` prop.
+	let derivedBaseUrl = $derived(value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, ''))
+	let baseUrl = $derived(proxyUrlValue ?? derivedBaseUrl ?? '')
+	run(() => {
+		changeValues({ baseUrl, id: value?.id ?? '' })
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/KeycloakSetting.svelte b/frontend/src/lib/components/KeycloakSetting.svelte
index a8b786d292..292c36e7c3 100644
--- a/frontend/src/lib/components/KeycloakSetting.svelte
+++ b/frontend/src/lib/components/KeycloakSetting.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -30,10 +34,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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={'keycloak'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/LogId.svelte b/frontend/src/lib/components/LogId.svelte
index bb90a700cf..cadbe14e0c 100644
--- a/frontend/src/lib/components/LogId.svelte
+++ b/frontend/src/lib/components/LogId.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-	export let id: string
+	import { run } from 'svelte/legacy';
 
-	$: id && console.log('updateJobId')
+	interface Props {
+		id: string;
+	}
+
+	let { id }: Props = $props();
+
+	run(() => {
+		id && console.log('updateJobId')
+	});
 </script>
diff --git a/frontend/src/lib/components/LogSnippetViewer.svelte b/frontend/src/lib/components/LogSnippetViewer.svelte
index 1781351573..b684dab386 100644
--- a/frontend/src/lib/components/LogSnippetViewer.svelte
+++ b/frontend/src/lib/components/LogSnippetViewer.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
 	import { AnsiUp } from 'ansi_up'
 
-	export let content: string
-	export let highlighted: any[]
+	interface Props {
+		content: string;
+		highlighted: any[];
+		onclick?: () => void;
+	}
+
+	let { content, highlighted, onclick: onclickProp = undefined }: Props = $props();
 
 	const ansi_up = new AnsiUp()
 	ansi_up.use_classes = true
@@ -30,7 +35,7 @@
 	let html = highlightSnippet(content)
 </script>
 
-<button on:click class="font-light !m-0 !p-0">
+<button onclick={() => onclickProp?.()} class="font-light !m-0 !p-0">
 	<pre
 		class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start">
 {@html html}
diff --git a/frontend/src/lib/components/MapResult.svelte b/frontend/src/lib/components/MapResult.svelte
index a6851e9082..ce1080fca7 100644
--- a/frontend/src/lib/components/MapResult.svelte
+++ b/frontend/src/lib/components/MapResult.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Map, View, Feature } from 'ol'
 	import { Fill, Stroke, Style, Text } from 'ol/style.js'
 	import { useGeographic } from 'ol/proj.js'
@@ -18,17 +20,26 @@
 		strokeColor?: string
 	}
 
-	export let lon: number | undefined = undefined
-	export let lat: number | undefined = undefined
-	export let zoom: number | undefined = undefined
-	export let markers: Marker[] | string | undefined = undefined
+	interface Props {
+		lon?: number | undefined;
+		lat?: number | undefined;
+		zoom?: number | undefined;
+		markers?: Marker[] | string | undefined;
+	}
+
+	let {
+		lon = undefined,
+		lat = undefined,
+		zoom = undefined,
+		markers = undefined
+	}: Props = $props();
 
 	const LAYER_NAME = {
 		MARKER: 'Marker'
 	} as const
 
-	let map: Map | undefined = undefined
-	let mapElement: HTMLDivElement | undefined = undefined
+	let map: Map | undefined = $state(undefined)
+	let mapElement: HTMLDivElement | undefined = $state(undefined)
 
 	function getLayersByName(name: keyof typeof LAYER_NAME) {
 		return map
@@ -100,36 +111,38 @@
 		createMarkerLayers()?.forEach((l) => map?.addLayer(l))
 	}
 
-	$: if (!map && mapElement) {
-		useGeographic()
-		map = new Map({
-			target: mapElement,
-			layers: [
-				new TileLayer({
-					source: new OSM()
+	run(() => {
+		if (!map && mapElement) {
+			useGeographic()
+			map = new Map({
+				target: mapElement,
+				layers: [
+					new TileLayer({
+						source: new OSM()
+					}),
+					...(createMarkerLayers() || [])
+				],
+				view: new View({
+					center: [lon ?? 0, lat ?? 0],
+					zoom: zoom ?? 2
 				}),
-				...(createMarkerLayers() || [])
-			],
-			view: new View({
-				center: [lon ?? 0, lat ?? 0],
-				zoom: zoom ?? 2
-			}),
-			controls: defaultControls({
-				attribution: false
+				controls: defaultControls({
+					attribution: false
+				})
 			})
-		})
-		if (lat && lon) {
-			map.getView().setCenter([lon, lat])
-		}
+			if (lat && lon) {
+				map.getView().setCenter([lon, lat])
+			}
 
-		if (map && zoom) {
-			map.getView().setZoom(zoom)
-		}
+			if (map && zoom) {
+				map.getView().setZoom(zoom)
+			}
 
-		if (map && markers) {
-			updateMarkers()
+			if (map && markers) {
+				updateMarkers()
+			}
 		}
-	}
+	});
 </script>
 
 <div bind:this={mapElement} class="w-full h-[300px]"></div>
diff --git a/frontend/src/lib/components/MemoryFootprintViewer.svelte b/frontend/src/lib/components/MemoryFootprintViewer.svelte
index 66da99e6e6..7f01864b66 100644
--- a/frontend/src/lib/components/MemoryFootprintViewer.svelte
+++ b/frontend/src/lib/components/MemoryFootprintViewer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { type MetricDataPoint, MetricsService } from '$lib/gen'
 	import { displayTime } from '$lib/utils'
 	import { workspaceStore } from '$lib/stores'
@@ -17,16 +19,20 @@
 
 	ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale)
 
-	export let jobId: string
-	export let jobUpdateLastFetch: Date | undefined
+	interface Props {
+		jobId: string;
+		jobUpdateLastFetch: Date | undefined;
+	}
+
+	let { jobId, jobUpdateLastFetch = $bindable() }: Props = $props();
 
 	let jobMetricsLastFetch: Date | undefined = undefined
-	let jobMemoryStats: MetricDataPoint[] | undefined = undefined
+	let jobMemoryStats: MetricDataPoint[] | undefined = $state(undefined)
 
 	let data: {
 		x: number
 		y: number
-	}[] = []
+	}[] = $state([])
 	let labels: string[] = []
 
 	async function loadMetricsData() {
@@ -66,7 +72,9 @@
 		data = [...data]
 	}
 
-	$: jobUpdateLastFetch && loadMetricsData()
+	run(() => {
+		jobUpdateLastFetch && loadMetricsData()
+	});
 </script>
 
 <div class="relative max-h-100">
diff --git a/frontend/src/lib/components/ModuleStatus.svelte b/frontend/src/lib/components/ModuleStatus.svelte
index 36f7b54753..351b3e0d03 100644
--- a/frontend/src/lib/components/ModuleStatus.svelte
+++ b/frontend/src/lib/components/ModuleStatus.svelte
@@ -5,9 +5,13 @@
 	import { displayDate } from '$lib/utils'
 	import { Hourglass } from 'lucide-svelte'
 
-	export let type: FlowStatusModule['type']
-	export let scheduled_for: Date | undefined
-	export let skipped: boolean = false
+	interface Props {
+		type: FlowStatusModule['type'];
+		scheduled_for: Date | undefined;
+		skipped?: boolean;
+	}
+
+	let { type, scheduled_for, skipped = false }: Props = $props();
 </script>
 
 {#if type == 'WaitingForEvents'}
diff --git a/frontend/src/lib/components/OauthExtraParams.svelte b/frontend/src/lib/components/OauthExtraParams.svelte
index 826f0237af..eec9cd47b8 100644
--- a/frontend/src/lib/components/OauthExtraParams.svelte
+++ b/frontend/src/lib/components/OauthExtraParams.svelte
@@ -2,9 +2,13 @@
 	import { Button } from './common'
 	import { X, Plus } from 'lucide-svelte'
 
-	export let extra_params: Record<string, string> = {}
+	interface Props {
+		extra_params?: Record<string, string>;
+	}
 
-	let extra_params_vec: [string, string][] = Object.entries(extra_params)
+	let { extra_params = $bindable({}) }: Props = $props();
+
+	let extra_params_vec: [string, string][] = $state(Object.entries(extra_params))
 
 	function sync() {
 		extra_params = Object.fromEntries(extra_params_vec)
@@ -13,8 +17,8 @@
 
 {#each extra_params_vec as o}
 	<div class="flex flex-row max-w-md mb-2 gap-2">
-		<input type="text" on:keyup={sync} bind:value={o[0]} />
-		<input type="text" on:keyup={sync} bind:value={o[1]} />
+		<input type="text" onkeyup={sync} bind:value={o[0]} />
+		<input type="text" onkeyup={sync} bind:value={o[1]} />
 		<Button
 			variant="subtle"
 			destructive
diff --git a/frontend/src/lib/components/OauthScopes.svelte b/frontend/src/lib/components/OauthScopes.svelte
index 96579ed651..3bf76a8dca 100644
--- a/frontend/src/lib/components/OauthScopes.svelte
+++ b/frontend/src/lib/components/OauthScopes.svelte
@@ -2,7 +2,11 @@
 	import { Button } from './common'
 	import { Minus, Plus } from 'lucide-svelte'
 
-	export let scopes: string[] = []
+	interface Props {
+		scopes?: string[];
+	}
+
+	let { scopes = $bindable([]) }: Props = $props();
 </script>
 
 {#if scopes && Array.isArray(scopes)}
diff --git a/frontend/src/lib/components/OnBehalfOfSelector.svelte b/frontend/src/lib/components/OnBehalfOfSelector.svelte
index 1c5794d578..ff8c3cb458 100644
--- a/frontend/src/lib/components/OnBehalfOfSelector.svelte
+++ b/frontend/src/lib/components/OnBehalfOfSelector.svelte
@@ -51,44 +51,48 @@
 </script>
 
 <MeltPopover placement="bottom">
-	<svelte:fragment slot="trigger">
-		<UserCog class="w-4 h-4 {selected ? 'text-green-500' : 'text-yellow-500'}" />
-	</svelte:fragment>
-	<div slot="content" class="p-3 flex flex-col gap-2 min-w-48">
-		<div class="text-xs font-medium text-secondary mb-1">{label}</div>
-		<button
-			class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve
-				? 'opacity-50 cursor-not-allowed'
-				: ''}"
-			disabled={!canPreserve}
-			onclick={() => onSelect('source')}
-		>
-			<Check class="w-3 h-3 {selected === 'source' ? 'opacity-100' : 'opacity-0'}" />
-			<span class="truncate max-w-40">{sourceEmail}</span>
-			<span class="text-xs text-tertiary">(source)</span>
-		</button>
-		<button
-			class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve || !targetEmail
-				? 'opacity-50 cursor-not-allowed'
-				: ''}"
-			disabled={!canPreserve || !targetEmail}
-			onclick={() => onSelect('target')}
-		>
-			<Check class="w-3 h-3 {selected === 'target' ? 'opacity-100' : 'opacity-0'}" />
-			<span class="truncate max-w-40 {!targetEmail ? 'italic text-tertiary' : ''}"
-				>{targetEmail ?? 'unknown'}</span
+	{#snippet trigger()}
+	
+			<UserCog class="w-4 h-4 {selected ? 'text-green-500' : 'text-yellow-500'}" />
+		
+	{/snippet}
+	{#snippet content()}
+		<div  class="p-3 flex flex-col gap-2 min-w-48">
+			<div class="text-xs font-medium text-secondary mb-1">{label}</div>
+			<button
+				class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve
+					? 'opacity-50 cursor-not-allowed'
+					: ''}"
+				disabled={!canPreserve}
+				onclick={() => onSelect('source')}
 			>
-			<span class="text-xs text-tertiary">(target)</span>
-		</button>
-		<button
-			class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover"
-			onclick={() => onSelect('me')}
-		>
-			<Check class="w-3 h-3 {selected === 'me' ? 'opacity-100' : 'opacity-0'}" />
-			<span class="truncate max-w-40"
-				>{kind === 'trigger' ? $userStore?.username : $userStore?.email}</span
+				<Check class="w-3 h-3 {selected === 'source' ? 'opacity-100' : 'opacity-0'}" />
+				<span class="truncate max-w-40">{sourceEmail}</span>
+				<span class="text-xs text-tertiary">(source)</span>
+			</button>
+			<button
+				class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover {!canPreserve || !targetEmail
+					? 'opacity-50 cursor-not-allowed'
+					: ''}"
+				disabled={!canPreserve || !targetEmail}
+				onclick={() => onSelect('target')}
 			>
-			<span class="text-xs text-tertiary">(me)</span>
-		</button>
-	</div>
+				<Check class="w-3 h-3 {selected === 'target' ? 'opacity-100' : 'opacity-0'}" />
+				<span class="truncate max-w-40 {!targetEmail ? 'italic text-tertiary' : ''}"
+					>{targetEmail ?? 'unknown'}</span
+				>
+				<span class="text-xs text-tertiary">(target)</span>
+			</button>
+			<button
+				class="flex items-center gap-2 px-2 py-1.5 rounded text-left text-xs hover:bg-surface-hover"
+				onclick={() => onSelect('me')}
+			>
+				<Check class="w-3 h-3 {selected === 'me' ? 'opacity-100' : 'opacity-0'}" />
+				<span class="truncate max-w-40"
+					>{kind === 'trigger' ? $userStore?.username : $userStore?.email}</span
+				>
+				<span class="text-xs text-tertiary">(me)</span>
+			</button>
+		</div>
+	{/snippet}
 </MeltPopover>
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
index 07b02227d4..556ac1b0cc 100644
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -1,11 +1,23 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'
 
-	export let title: string
-	export let tooltip: string = ''
-	export let documentationLink: string | undefined = undefined
-	export let primary: boolean = true
-	export let childrenWrapperDivClasses: string = ''
+	interface Props {
+		title: string;
+		tooltip?: string;
+		documentationLink?: string | undefined;
+		primary?: boolean;
+		childrenWrapperDivClasses?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		tooltip = '',
+		documentationLink = undefined,
+		primary = true,
+		childrenWrapperDivClasses = '',
+		children
+	}: Props = $props();
 </script>
 
 <div class="flex flex-row flex-wrap justify-between items-center pb-2 my-4 mr-2 min-h-16">
@@ -31,9 +43,9 @@
 		</span>
 	{/if}
 
-	{#if $$slots.default}
+	{#if children}
 		<div class="my-2 {childrenWrapperDivClasses}">
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/ParqetCsvTableRenderer.svelte b/frontend/src/lib/components/ParqetCsvTableRenderer.svelte
index 07a8c267a9..7d35e11617 100644
--- a/frontend/src/lib/components/ParqetCsvTableRenderer.svelte
+++ b/frontend/src/lib/components/ParqetCsvTableRenderer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { type GridApi, createGrid, type IDatasource } from 'ag-grid-community'
 
 	import 'ag-grid-community/styles/ag-grid.css'
@@ -14,15 +16,24 @@
 	// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 
 	let selectedRowIndex = -1
-	export let s3resource: string
-	export let storage: string | undefined
-	export let workspaceId: string | undefined
-	export let disable_download: boolean = false
+	interface Props {
+		s3resource: string;
+		storage: string | undefined;
+		workspaceId: string | undefined;
+		disable_download?: boolean;
+	}
+
+	let {
+		s3resource,
+		storage,
+		workspaceId,
+		disable_download = false
+	}: Props = $props();
 
 	let lastSearch: string | undefined = undefined
 
-	let nbRows: number | undefined = undefined
-	let csvSeparatorChar: string = ','
+	let nbRows: number | undefined = $state(undefined)
+	let csvSeparatorChar: string = $state(',')
 	let datasource: IDatasource = {
 		rowCount: 0,
 		getRows: async function (params) {
@@ -95,11 +106,10 @@
 		toggleRow(rows[0])
 	}
 
-	let eGui: HTMLDivElement
+	let eGui: HTMLDivElement = $state()
 
-	$: eGui && mountGrid()
 
-	let error: string | undefined = undefined
+	let error: string | undefined = $state(undefined)
 	async function mountGrid() {
 		if (eGui) {
 			try {
@@ -170,7 +180,10 @@
 		}
 	}
 
-	let darkMode: boolean = false
+	let darkMode: boolean = $state(false)
+	run(() => {
+		eGui && mountGrid()
+	});
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -182,7 +195,7 @@
 				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>
 
 				<div class="w-12 ml-2 mr-2">
-					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
+					<select class="h-8" bind:value={csvSeparatorChar} onchange={(e) => mountGrid()}>
 						<option value=",">,</option>
 						<option value=";">;</option>
 						<option value="\t">\t</option>
diff --git a/frontend/src/lib/components/PermissionHistory.svelte b/frontend/src/lib/components/PermissionHistory.svelte
index 82d646bd53..6a1398b5d4 100644
--- a/frontend/src/lib/components/PermissionHistory.svelte
+++ b/frontend/src/lib/components/PermissionHistory.svelte
@@ -79,12 +79,14 @@
 		<p class="text-primary text-sm">No permission changes recorded yet</p>
 	{:else}
 		<TableCustom>
-			<tr slot="header-row">
-				<th>Changed By</th>
-				<th>Change Type</th>
-				<th>Affected</th>
-				<th>Date</th>
-			</tr>
+			{#snippet header_row()}
+				<tr>
+					<th>Changed By</th>
+					<th>Change Type</th>
+					<th>Affected</th>
+					<th>Date</th>
+				</tr>
+			{/snippet}
 			{#snippet body()}
 				<tbody>
 					{#each history as change}
diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte
index aa5c869f31..420b8fc56d 100644
--- a/frontend/src/lib/components/PersistentScriptDrawer.svelte
+++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte
@@ -10,19 +10,19 @@
 	import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte'
 
 	let dispatch = createEventDispatcher()
-	let drawer: Drawer
+	let drawer: Drawer = $state()
 
-	let script: Script
-	let loadQueuedJobs = true
-	let queuedJobsLoading = false
+	let script: Script = $state()
+	let loadQueuedJobs = $state(true)
+	let queuedJobsLoading = $state(false)
 	let queuedJobs: {
 		status: 'running' | 'queued'
 		jobId: string
 		scheduledFor: string
 		scriptHash: string
-	}[] = []
+	}[] = $state([])
 
-	let cancellingInProgress = false
+	let cancellingInProgress = $state(false)
 
 	async function continuouslyLoadQueuedJobs() {
 		while (loadQueuedJobs) {
@@ -124,44 +124,48 @@
 			</Button>
 		</div>
 		<TableCustom>
-			<tr slot="header-row">
-				<th class="text-xs">Script Hash</th>
-				<th class="text-xs">Job ID</th>
-				<th class="text-xs">Status</th>
-				<th class="text-xs">Scheduled For</th>
-			</tr>
-			<tbody slot="body">
-				{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
-					<tr class="">
-						<td class="text-xs">
-							<a
-								class="pr-3"
-								href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
-								target="_blank"
-							>
-								{scriptHash}
-							</a>
-						</td>
-						<td class="text-xs">
-							<a class="pr-3" href="{base}/run/{jobId}?workspace={$workspaceStore}" target="_blank"
-								>{jobId.substring(24)}</a
-							>
-						</td>
-						<td class="text-xs">
-							{#if status === 'running'}
-								<Badge color="yellow" baseClass="!px-1.5">
-									<Play size={14} />
-								</Badge>
-							{:else}
-								<Badge baseClass="!px-1.5">
-									<Hourglass size={14} />
-								</Badge>
-							{/if}
-						</td>
-						<td class="text-xs">{scheduledFor}</td>
-					</tr>
-				{/each}
-			</tbody>
+			{#snippet header_row()}
+				<tr>
+					<th class="text-xs">Script Hash</th>
+					<th class="text-xs">Job ID</th>
+					<th class="text-xs">Status</th>
+					<th class="text-xs">Scheduled For</th>
+				</tr>
+			{/snippet}
+			{#snippet body()}
+						<tbody >
+					{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
+						<tr class="">
+							<td class="text-xs">
+								<a
+									class="pr-3"
+									href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
+									target="_blank"
+								>
+									{scriptHash}
+								</a>
+							</td>
+							<td class="text-xs">
+								<a class="pr-3" href="{base}/run/{jobId}?workspace={$workspaceStore}" target="_blank"
+									>{jobId.substring(24)}</a
+								>
+							</td>
+							<td class="text-xs">
+								{#if status === 'running'}
+									<Badge color="yellow" baseClass="!px-1.5">
+										<Play size={14} />
+									</Badge>
+								{:else}
+									<Badge baseClass="!px-1.5">
+										<Hourglass size={14} />
+									</Badge>
+								{/if}
+							</td>
+							<td class="text-xs">{scheduledFor}</td>
+						</tr>
+					{/each}
+				</tbody>
+					{/snippet}
 		</TableCustom>
 
 		{#snippet actions()}
diff --git a/frontend/src/lib/components/QueueMetricsDrawer.svelte b/frontend/src/lib/components/QueueMetricsDrawer.svelte
index 4b05c41899..dcc95e8f92 100644
--- a/frontend/src/lib/components/QueueMetricsDrawer.svelte
+++ b/frontend/src/lib/components/QueueMetricsDrawer.svelte
@@ -3,7 +3,7 @@
 	import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte'
 	import QueueAlerts from './QueueAlerts.svelte'
 
-	let drawer: Drawer
+	let drawer: Drawer = $state()
 	export function openDrawer() {
 		drawer?.openDrawer()
 	}
diff --git a/frontend/src/lib/components/QueueMetricsDrawerInner.svelte b/frontend/src/lib/components/QueueMetricsDrawerInner.svelte
index f6cc720b88..3b25513b4d 100644
--- a/frontend/src/lib/components/QueueMetricsDrawerInner.svelte
+++ b/frontend/src/lib/components/QueueMetricsDrawerInner.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import 'chartjs-adapter-date-fns'
 	import { Line } from '$lib/components/chartjs-wrappers/chartJs'
 
@@ -22,7 +24,7 @@
 	import Alert from './common/alert/Alert.svelte'
 	import { Section } from './common'
 
-	let loading: boolean = true
+	let loading: boolean = $state(true)
 
 	const colorTuples = [
 		['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
@@ -64,12 +66,12 @@
 		LogarithmicScale
 	)
 
-	let countData: ChartData<'line', Point[], undefined> | undefined = undefined
-	let delayData: ChartData<'line', Point[], undefined> | undefined = undefined
+	let countData: ChartData<'line', Point[], undefined> | undefined = $state(undefined)
+	let delayData: ChartData<'line', Point[], undefined> | undefined = $state(undefined)
 
-	let minDate = new Date()
+	let minDate = $state(new Date())
 
-	let noMetrics = false
+	let noMetrics = $state(false)
 
 	function fillData(
 		data: {
@@ -179,10 +181,14 @@
 
 	loadMetrics()
 
-	let darkMode = false
+	let darkMode = $state(false)
 
-	$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
-	$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+	run(() => {
+		ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
+	});
+	run(() => {
+		ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+	});
 </script>
 
 <DarkModeObserver bind:darkMode />
diff --git a/frontend/src/lib/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte
index efa9a62b40..c7e5dc8dce 100644
--- a/frontend/src/lib/components/RadioButton.svelte
+++ b/frontend/src/lib/components/RadioButton.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
-	export let label = ''
-	export let options: [string | { title: string; desc: string }, any][]
-	export let value: any
-	export let disabled = false
-	export let labelClass = ''
-	export let inputClass = ''
 
 	import { createEventDispatcher } from 'svelte'
 	import Tooltip from './Tooltip.svelte'
+	interface Props {
+		label?: string;
+		options: [string | { title: string; desc: string }, any][];
+		value: any;
+		disabled?: boolean;
+		labelClass?: string;
+		inputClass?: string;
+	}
+
+	let {
+		label = '',
+		options,
+		value = $bindable(),
+		disabled = false,
+		labelClass = '',
+		inputClass = ''
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -28,7 +39,7 @@
 					class="sr-only"
 					bind:group={value}
 					aria-labelledby="memory-option-0-label"
-					on:click={() => dispatch('change', val)}
+					onclick={() => dispatch('change', val)}
 				/>
 				<p>
 					{#if typeof label !== 'string'}
diff --git a/frontend/src/lib/components/Range.svelte b/frontend/src/lib/components/Range.svelte
index 0e92ac72de..a3e5d81af1 100644
--- a/frontend/src/lib/components/Range.svelte
+++ b/frontend/src/lib/components/Range.svelte
@@ -1,29 +1,47 @@
 <script lang="ts">
+	import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import RangeSlider from 'svelte-range-slider-pips'
 
-	export let min = 0
-	export let max = 100
-	export let initialValue = 0
-	export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
-	export let disabled: boolean = false
-	export let defaultValue: number | undefined = undefined
-	export let format: (value: number) => string = (v) => `${v}`
-	export let hideInput: boolean = false
+	interface Props {
+		min?: number;
+		max?: number;
+		initialValue?: number;
+		value?: any;
+		disabled?: boolean;
+		defaultValue?: number | undefined;
+		format?: (value: number) => string;
+		hideInput?: boolean;
+	}
+
+	let {
+		min = 0,
+		max = 100,
+		initialValue = 0,
+		value = $bindable(typeof initialValue === 'string' ? parseInt(initialValue) : initialValue),
+		disabled = false,
+		defaultValue = undefined,
+		format = (v) => `${v}`,
+		hideInput = false
+	}: Props = $props();
 
 	let step: number = 1
 
-	let slider: HTMLElement
+	let slider: HTMLElement = $state()
 
 	function calculateAxisStep(min: number, max: number): number {
 		const range = max - min
 		return range < 100 ? 1 : range / 20
 	}
 
-	$: if (value === null) {
-		value = 0
-	}
+	run(() => {
+		if (value === null) {
+			value = 0
+		}
+	});
 
-	$: axisStep = calculateAxisStep(min, max)
+	let axisStep = $derived(calculateAxisStep(min, max))
 
 	function handleKeyDown(event: KeyboardEvent) {
 		if (disabled) return
@@ -44,17 +62,17 @@
 	}
 
 	// Calculate the handle width based on the length of the max value
-	$: handleWidth = `${Math.max(max.toString().length ?? 2, 2)}em`
+	let handleWidth = $derived(`${Math.max(max.toString().length ?? 2, 2)}em`)
 </script>
 
 <div class="flex flex-row w-full mx-2 items-center gap-8">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 
 	<div
 		class={'grow'}
 		style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; --handle-width: {handleWidth}; --handle-border: 4px;"
-		on:pointerdown|stopPropagation
-		on:keydown={handleKeyDown}
+		onpointerdown={stopPropagation(bubble('pointerdown'))}
+		onkeydown={handleKeyDown}
 		>{#if max <= min}
 			<div class="text-secondary text-sm"
 				>Impossible to display range: {`max (${max}) <= min (${min})`}</div
diff --git a/frontend/src/lib/components/Required.svelte b/frontend/src/lib/components/Required.svelte
index 2163efa976..c1e422d740 100644
--- a/frontend/src/lib/components/Required.svelte
+++ b/frontend/src/lib/components/Required.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
-	export let required: boolean
-	export let detail = ''
+	interface Props {
+		required: boolean
+		detail?: string
+		class?: string
+	}
+
+	let { required, detail = '', class: c = '' }: Props = $props()
 </script>
 
 {#if required}
-	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
+	<span class="text-red-500 dark:text-red-400 text-sm font-normal {c}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-primary ml-2 font-normal {$$props.class}"
+	<span class="text-sm text-primary ml-2 font-normal {c}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}
diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index 50db916f13..0b4dea3d90 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte
@@ -1,21 +1,23 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Button, Drawer } from './common'
 
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 
 	import { Loader2, Save } from 'lucide-svelte'
 
-	let drawer: Drawer
-	let canSave = true
-	let resource_type: string | undefined = undefined
-	let defaultValues: Record<string, any> | undefined = undefined
+	let drawer: Drawer = $state()
+	let canSave = $state(true)
+	let resource_type: string | undefined = $state(undefined)
+	let defaultValues: Record<string, any> | undefined = $state(undefined)
 
 	let resourceEditor: { editResource: () => void; createResource: () => void } | undefined =
-		undefined
+		$state(undefined)
 
-	let path: string | undefined = undefined
+	let path: string | undefined = $state(undefined)
 
-	let newResource = false
+	let newResource = $state(false)
 	export async function initEdit(p: string): Promise<void> {
 		resource_type = undefined
 		newResource = false
@@ -34,9 +36,11 @@
 		drawer.openDrawer?.()
 	}
 
-	let mode: 'edit' | 'new' = newResource ? 'new' : 'edit'
+	let mode: 'edit' | 'new' = $state(newResource ? 'new' : 'edit')
 
-	$: path ? (mode = 'edit') : (mode = 'new')
+	run(() => {
+		path ? (mode = 'edit') : (mode = 'new')
+	});
 </script>
 
 <Drawer bind:this={drawer} size="800px">
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 969576a06b..da0c87a15f 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -15,7 +15,7 @@
 	import Popover from './meltComponents/Popover.svelte'
 	import { Calendar, Check, CornerDownLeft } from 'lucide-svelte'
 	import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { replaceState } from '$app/navigation'
 	import JsonInputs from '$lib/components/JsonInputs.svelte'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
@@ -108,7 +108,7 @@
 				nurl.hash = computeSharableHash(args)
 
 				try {
-					replaceState(nurl.toString(), $page.state)
+					replaceState(nurl.toString(), page.state)
 				} catch (e) {
 					console.error(e)
 				}
diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
index 7d6ef01bb2..399e55f772 100644
--- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte
+++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
@@ -8,7 +8,9 @@
 	import { WorkerService } from '$lib/gen'
 	import DateTimeInput from './DateTimeInput.svelte'
 
-	export let runnable:
+
+	interface Props {
+		runnable: 
 		| {
 				summary?: string
 				description?: string
@@ -21,11 +23,18 @@
 				created_by?: string
 				extra_perms?: Record<string, boolean>
 		  }
-		| undefined
+		| undefined;
+		scheduledForStr: string | undefined;
+		invisible_to_owner: boolean | undefined;
+		overrideTag: string | undefined;
+	}
 
-	export let scheduledForStr: string | undefined
-	export let invisible_to_owner: boolean | undefined
-	export let overrideTag: string | undefined
+	let {
+		runnable,
+		scheduledForStr = $bindable(),
+		invisible_to_owner = $bindable(),
+		overrideTag = $bindable()
+	}: Props = $props();
 	loadWorkerGroups()
 
 	async function loadWorkerGroups() {
diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte
index c70983ee83..3a8b3b2a5c 100644
--- a/frontend/src/lib/components/S3ObjectPicker.svelte
+++ b/frontend/src/lib/components/S3ObjectPicker.svelte
@@ -11,15 +11,19 @@
 	import S3FilePicker from './S3FilePicker.svelte'
 	import FileUpload from './common/fileUpload/FileUpload.svelte'
 
-	export let value: any
-	export let editor: SimpleEditor | undefined = undefined
+	interface Props {
+		value: any;
+		editor?: SimpleEditor | undefined;
+	}
+
+	let { value = $bindable(), editor = $bindable(undefined) }: Props = $props();
 
 	const dispatch = createEventDispatcher()
 
-	let s3FilePicker: S3FilePicker
-	let s3FileUploadRawMode: false
+	let s3FilePicker: S3FilePicker = $state()
+	let s3FileUploadRawMode: false = $state()
 	let el: HTMLTextAreaElement | undefined = undefined
-	let rawValue: string | undefined = undefined
+	let rawValue: string | undefined = $state(undefined)
 
 	function evalValueToRaw() {
 		rawValue = JSON.stringify(value, null, 2)
diff --git a/frontend/src/lib/components/SaveInputsButton.svelte b/frontend/src/lib/components/SaveInputsButton.svelte
index 414e5ff205..4bddde54ca 100644
--- a/frontend/src/lib/components/SaveInputsButton.svelte
+++ b/frontend/src/lib/components/SaveInputsButton.svelte
@@ -10,14 +10,25 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let runnableId: string | undefined
-	export let runnableType: RunnableType | undefined
-	export let args: object
-	export let disabled: boolean = false
-	export let small: boolean | undefined = undefined
-	export let showTooltip: boolean | undefined = undefined
+	interface Props {
+		runnableId: string | undefined;
+		runnableType: RunnableType | undefined;
+		args: object;
+		disabled?: boolean;
+		small?: boolean | undefined;
+		showTooltip?: boolean | undefined;
+	}
 
-	let savingInputs = false
+	let {
+		runnableId,
+		runnableType,
+		args,
+		disabled = false,
+		small = undefined,
+		showTooltip = undefined
+	}: Props = $props();
+
+	let savingInputs = $state(false)
 
 	async function saveInput(args: object) {
 		savingInputs = true
diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte
index 87cdd8e2fc..057a405ac4 100644
--- a/frontend/src/lib/components/SavedInputsPicker.svelte
+++ b/frontend/src/lib/components/SavedInputsPicker.svelte
@@ -285,8 +285,8 @@
 										{limitPayloadSize}
 										{hover}
 										{viewerOpen}
-										on:openChange={(e) => {
-											updateViewerOpenState(item.id, e.detail)
+										onOpenChange={(isOpen) => {
+											updateViewerOpenState(item.id, isOpen)
 										}}
 										maxWidth={clientWidth}
 										{editOptions}
diff --git a/frontend/src/lib/components/SavedInputsPickerViewer.svelte b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
index 150e2b9b97..ac9f643421 100644
--- a/frontend/src/lib/components/SavedInputsPickerViewer.svelte
+++ b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
@@ -4,16 +4,25 @@
 	import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte'
 	import { copyToClipboard, isObjectTooBig } from '$lib/utils'
 	import { Eye, CopyIcon, Loader2 } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
+	interface Props {
+		payloadData: any;
+		limitPayloadSize?: boolean;
+		hover?: boolean;
+		viewerOpen?: boolean;
+		maxWidth?: number | undefined;
+		editOptions?: boolean;
+		onOpenChange?: (isOpen: boolean) => void;
+	}
 
-	export let payloadData: any
-	export let limitPayloadSize: boolean = false
-	export let hover: boolean = false
-	export let viewerOpen: boolean = false
-	export let maxWidth: number | undefined = undefined
-	export let editOptions: boolean = true
-
-	const dispatch = createEventDispatcher()
+	let {
+		payloadData,
+		limitPayloadSize = false,
+		hover = false,
+		viewerOpen = false,
+		maxWidth = undefined,
+		editOptions = true,
+		onOpenChange = undefined
+	}: Props = $props();
 	const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData)
 	const buttonWidth = 34
 	const floatingConfig = {
@@ -32,14 +41,13 @@
 	}
 	const xOffset = editOptions ? 218 : 168 // width of the optional buttons on the right
 
-	let popover: Popover | undefined
+	let popover: Popover | undefined = $state()
 	let popoverOpen = false
 	let hoverTimeout: ReturnType<typeof setTimeout> | undefined
-	let objectViewerLoaded = false
-	let popoverFullyOpened = false
+	let objectViewerLoaded = $state(false)
+	let popoverFullyOpened = $state(false)
 
-	function handlePopoverChange(event: CustomEvent<boolean>) {
-		const isOpen = event.detail
+	function handlePopoverChange(isOpen: boolean) {
 		popoverOpen = isOpen
 
 		if (!isOpen) {
@@ -53,7 +61,7 @@
 			}, 50)
 		}
 
-		dispatch('openChange', isOpen)
+		onOpenChange?.(isOpen)
 	}
 
 	function handleHoverChange(isHovering: boolean) {
@@ -73,90 +81,101 @@
 		}
 	}
 
-	$: handleHoverChange(hover)
-	$: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined
+	$effect(() => {
+		handleHoverChange(hover)
+	});
+	let ajustedWidth = $derived(maxWidth ? Math.abs(maxWidth - xOffset) : undefined)
 </script>
 
 <Popover
 	bind:this={popover}
 	{floatingConfig}
-	on:openChange={handlePopoverChange}
-	on:click={(e) => {
+	onOpenChange={handlePopoverChange}
+	onclick={(e) => {
 		e.stopPropagation()
 	}}
 	closeOnOtherPopoverOpen
 	closeOnClickOutside={false}
 	usePointerDownOutside
 >
-	<svelte:fragment slot="trigger" let:isOpen>
-		<Button
-			variant="subtle"
-			unifiedSize="sm"
-			btnClasses={hover || isOpen ? 'block -my-2 bg-transparent' : 'hidden'}
-			wrapperClasses="p-0"
-			iconOnly
-			nonCaptureEvent
-			startIcon={{ icon: Eye }}
-		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div
-			class="p-2 overflow-auto"
-			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
-		>
-			{#if payloadData === 'WINDMILL_TOO_BIG'}
-				<div class="text-center text-primary text-xs">
-					{#if limitPayloadSize}
-						Payload too big to be used
-					{:else}
-						Payload too big to preview but can still be loaded
-					{/if}
-				</div>
-			{:else}
-				<div
-					class="relative p-2"
-					role="button"
-					tabindex="0"
-					aria-label="Copy JSON payload to clipboard"
-					on:click={() => {
+	{#snippet trigger({ isOpen })}
+	
+			<Button
+				variant="subtle"
+				unifiedSize="sm"
+				btnClasses={hover || isOpen ? 'block -my-2 bg-transparent' : 'hidden'}
+				wrapperClasses="p-0"
+				iconOnly
+				nonCaptureEvent
+				startIcon={{ icon: Eye }}
+			/>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div
+				class="p-2 overflow-auto"
+				style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
+			>
+				{#if payloadData === 'WINDMILL_TOO_BIG'}
+					<div class="text-center text-primary text-xs">
+						{#if limitPayloadSize}
+							Payload too big to be used
+						{:else}
+							Payload too big to preview but can still be loaded
+						{/if}
+					</div>
+				{:else}
+					<div
+						class="relative p-2"
+						role="button"
+						tabindex="0"
+						aria-label="Copy JSON payload to clipboard"
+						onclick={() => {
 						copyToClipboard(JSON.stringify(payloadData))
 					}}
-					on:keydown
-				>
-					{#if !objectViewerLoaded && payloadTooBigForPreview}
-						<div class="flex justify-center items-center py-4">
-							<Loader2 size={20} class="animate-spin text-primary" />
-							<span class="ml-2 text-xs text-primary">Loading data...</span>
-						</div>
-					{/if}
+						onkeydown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault()
+							copyToClipboard(JSON.stringify(payloadData))
+						}
+					}}
+					>
+						{#if !objectViewerLoaded && payloadTooBigForPreview}
+							<div class="flex justify-center items-center py-4">
+								<Loader2 size={20} class="animate-spin text-primary" />
+								<span class="ml-2 text-xs text-primary">Loading data...</span>
+							</div>
+						{/if}
 
-					{#if popoverFullyOpened || !payloadTooBigForPreview}
-						<div
-							class={!objectViewerLoaded && payloadTooBigForPreview
-								? 'invisible h-0 overflow-hidden'
-								: ''}
-						>
-							<ObjectViewerWrapper
-								json={payloadData}
-								allowCopy
-								pureViewer
-								on:mounted={() => (objectViewerLoaded = true)}
+						{#if popoverFullyOpened || !payloadTooBigForPreview}
+							<div
+								class={!objectViewerLoaded && payloadTooBigForPreview
+									? 'invisible h-0 overflow-hidden'
+									: ''}
+							>
+								<ObjectViewerWrapper
+									json={payloadData}
+									allowCopy
+									pureViewer
+									onmounted={() => (objectViewerLoaded = true)}
+								/>
+							</div>
+						{/if}
+
+						<div class="absolute top-2 right-2 w-full h-full">
+							<Button
+								variant="subtle"
+								unifiedSize="sm"
+								class="absolute top-0 right-0"
+								iconOnly
+								startIcon={{ icon: CopyIcon }}
+								nonCaptureEvent
 							/>
 						</div>
-					{/if}
-
-					<div class="absolute top-2 right-2 w-full h-full">
-						<Button
-							variant="subtle"
-							unifiedSize="sm"
-							class="absolute top-0 right-0"
-							iconOnly
-							startIcon={{ icon: CopyIcon }}
-							nonCaptureEvent
-						/>
 					</div>
-				</div>
-			{/if}
-		</div>
-	</svelte:fragment>
+				{/if}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte
index 0b302625d5..7823a7caaf 100644
--- a/frontend/src/lib/components/SavedInputsV2.svelte
+++ b/frontend/src/lib/components/SavedInputsV2.svelte
@@ -89,7 +89,7 @@
 							class="w-fit"
 							usePointerDownOutside
 							closeOnOtherPopoverOpen
-							on:click={(e) => {
+							onclick={(e) => {
 								e.stopPropagation()
 							}}
 							floatingConfig={{ placement: 'top-end' }}
diff --git a/frontend/src/lib/components/SchemaEditorProperty.svelte b/frontend/src/lib/components/SchemaEditorProperty.svelte
index 611e178981..fa12138c0d 100644
--- a/frontend/src/lib/components/SchemaEditorProperty.svelte
+++ b/frontend/src/lib/components/SchemaEditorProperty.svelte
@@ -2,7 +2,11 @@
 	import type { SchemaProperty } from '$lib/common'
 	import Badge from './common/badge/Badge.svelte'
 
-	export let property: SchemaProperty
+	interface Props {
+		property: SchemaProperty;
+	}
+
+	let { property }: Props = $props();
 </script>
 
 <div class="flex flex-row flex-wrap gap-1">
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index e79e888075..a649eabf99 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1230,7 +1230,10 @@
 									{#if script.schema && !disableAi && !customUi?.settingsPanel?.metadata?.disableAiFilling}
 										<div class="mt-3">
 											<AIFormSettings
-												bind:prompt={script.schema.prompt_for_ai as string | undefined}
+												bind:prompt={
+													() => script.schema!.prompt_for_ai as string | undefined,
+													(v) => (script.schema!.prompt_for_ai = v)
+												}
 												type="script"
 											/>
 										</div>
diff --git a/frontend/src/lib/components/Scrollable.svelte b/frontend/src/lib/components/Scrollable.svelte
index 37e3ae2933..540f43b9dc 100644
--- a/frontend/src/lib/components/Scrollable.svelte
+++ b/frontend/src/lib/components/Scrollable.svelte
@@ -2,14 +2,24 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	let isAtBottom: boolean = false
-	let isScrollable = false
+	let isAtBottom: boolean = $state(false)
+	let isScrollable = $state(false)
 
-	export let id: string | null | undefined = undefined
-	export let scrollableClass: string = ''
-	export let shiftedShadow: boolean = false
+	interface Props {
+		id?: string | null | undefined;
+		scrollableClass?: string;
+		shiftedShadow?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		id = undefined,
+		scrollableClass = '',
+		shiftedShadow = false,
+		children
+	}: Props = $props();
 	let mutationObserver: MutationObserver
-	let el: HTMLDivElement
+	let el: HTMLDivElement = $state()
 
 	function handleScroll(event) {
 		const scrollableElement = event.target
@@ -45,8 +55,8 @@
 </script>
 
 <div {id} class={twMerge('relative pb-1', scrollableClass)}>
-	<div bind:this={el} on:scroll={handleScroll} class="w-full h-full overflow-y-auto">
-		<slot />
+	<div bind:this={el} onscroll={handleScroll} class="w-full h-full overflow-y-auto">
+		{@render children?.()}
 	</div>
 	{#if !isAtBottom && isScrollable}
 		<div
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index 0f4f923cd6..be4f14724e 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -22,7 +22,7 @@
 	import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte'
 	import Select from './select/Select.svelte'
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { watch } from 'runed'
 
 	interface Props {
@@ -169,13 +169,13 @@
 
 	type Selected = { mode: string; workerGroup: string; hostname: string }
 	let initialSelected =
-		$page.url.searchParams.get('mode') &&
-		$page.url.searchParams.get('workerGroup') &&
-		$page.url.searchParams.get('hostname')
+		page.url.searchParams.get('mode') &&
+		page.url.searchParams.get('workerGroup') &&
+		page.url.searchParams.get('hostname')
 			? {
-					mode: $page.url.searchParams.get('mode')!,
-					workerGroup: $page.url.searchParams.get('workerGroup')!,
-					hostname: $page.url.searchParams.get('hostname')!
+					mode: page.url.searchParams.get('mode')!,
+					workerGroup: page.url.searchParams.get('workerGroup')!,
+					hostname: page.url.searchParams.get('hostname')!
 				}
 			: undefined
 	let selected: Selected | undefined = $state(initialSelected)
@@ -663,7 +663,7 @@
 								<LogSnippetViewer
 									content={snippet_fragment || document.logs[0]}
 									highlighted={snippet_highlighted}
-									on:click={() => {
+									onclick={() => {
 										let logLineNumber = document.line_number[0]
 										let logFile = document.file_name[0]
 										let host = document.host[0]
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index e5ad54f88b..0389ec5168 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -154,12 +154,13 @@
 				{/if}
 				{#if acls?.length > 0}
 					<TableCustom>
-						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-						<tr slot="header-row">
-							<th>owner</th>
-							<th></th>
-							<th></th>
-						</tr>
+						{#snippet header_row()}
+							<tr>
+								<th>owner</th>
+								<th></th>
+								<th></th>
+							</tr>
+						{/snippet}
 						{#snippet body()}
 							<tbody>
 								{#each acls as [owner, write]}
diff --git a/frontend/src/lib/components/Slider.svelte b/frontend/src/lib/components/Slider.svelte
index c2ca0abbdd..e3269cde09 100644
--- a/frontend/src/lib/components/Slider.svelte
+++ b/frontend/src/lib/components/Slider.svelte
@@ -5,10 +5,21 @@
 	import Tooltip from './Tooltip.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let text: string
-	export let tooltip: string | undefined = undefined
-	export let view = false
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
+	interface Props {
+		text: string;
+		tooltip?: string | undefined;
+		view?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		text,
+		tooltip = undefined,
+		view = $bindable(false),
+		size = 'md',
+		children
+	}: Props = $props();
 </script>
 
 <Button
@@ -26,5 +37,5 @@
 	{/if}
 </Button>
 {#if view}
-	<div class="my-4 px-2" transition:slide|local><slot /></div>
+	<div class="my-4 px-2" transition:slide|local>{@render children?.()}</div>
 {/if}
diff --git a/frontend/src/lib/components/Summary.svelte b/frontend/src/lib/components/Summary.svelte
index 42d0b48ba5..1b4c3f2c2e 100644
--- a/frontend/src/lib/components/Summary.svelte
+++ b/frontend/src/lib/components/Summary.svelte
@@ -2,8 +2,12 @@
 	import { Pen } from 'lucide-svelte'
 	import TextInput from './text_input/TextInput.svelte'
 
-	export let value: string
-	export let disabled = false
+	interface Props {
+		value: string;
+		disabled?: boolean;
+	}
+
+	let { value = $bindable(), disabled = false }: Props = $props();
 
 	function blur(e: KeyboardEvent) {
 		e.key === 'Enter' && (e?.target as any)?.blur()
diff --git a/frontend/src/lib/components/SupabaseConnect.svelte b/frontend/src/lib/components/SupabaseConnect.svelte
index d16960ffbc..194d7d1e7d 100644
--- a/frontend/src/lib/components/SupabaseConnect.svelte
+++ b/frontend/src/lib/components/SupabaseConnect.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Loader2, RotateCwIcon } from 'lucide-svelte'
 
 	import { Button, DrawerContent } from './common'
@@ -15,8 +17,8 @@
 	import { createEventDispatcher } from 'svelte'
 	import HighlightTheme from './HighlightTheme.svelte'
 
-	let drawer: Drawer
-	let token: undefined | string = undefined
+	let drawer: Drawer = $state()
+	let token: undefined | string = $state(undefined)
 	export async function open() {
 		token = $oauthStore?.access_token ?? ''
 		drawer.openDrawer?.()
@@ -24,7 +26,7 @@
 		description = ''
 	}
 
-	let step: 'init' | 'resource' = 'init'
+	let step: 'init' | 'resource' = $state('init')
 
 	async function listDatabases() {
 		if (!token) return
@@ -44,31 +46,33 @@
 		region: string
 		id: string
 	}
-	let databases: undefined | Database[] = undefined
+	let databases: undefined | Database[] = $state(undefined)
 
-	$: token != undefined && listDatabases()
+	run(() => {
+		token != undefined && listDatabases()
+	});
 
-	let selectedDatabase: undefined | Database = undefined
+	let selectedDatabase: undefined | Database = $state(undefined)
 
-	let description = ''
-	let pathError = ''
-	let password = ''
-	let path: string | undefined = undefined
+	let description = $state('')
+	let pathError = $state('')
+	let password = $state('')
+	let path: string | undefined = $state(undefined)
 
 	/**
 	 * https://github.com/orgs/supabase/discussions/17817
 	 * host is in the format of `aws-0-${region}.pooler.supabase.com`
 	 * user is in the format of `postgres.${id}`
 	 */
-	$: resourceValue = {
+	let resourceValue = $derived({
 		host: `aws-0-${selectedDatabase?.region}.pooler.supabase.com`,
 		user: `postgres.${selectedDatabase?.id}`,
 		port: 5432,
 		dbname: 'postgres',
 		sslmode: 'prefer',
 		password: `$var:${path}`
-	}
-	$: disabled = path == undefined || pathError != '' || path == ''
+	})
+	let disabled = $derived(path == undefined || pathError != '' || path == '')
 
 	const dispatch = createEventDispatcher()
 	async function save() {
@@ -120,7 +124,7 @@
 				{#each databases as database}
 					<button
 						class="btn btn-outline-primary mt-2 border p-2 w-full border-secondary-inverse hover:border-secondary rounded"
-						on:click={() => {
+						onclick={() => {
 							selectedDatabase = database
 
 							step = 'resource'
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index f9b446b04e..c6cbe9f421 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -98,15 +98,17 @@
 						<span class="text-accent">→ {uptodateVersion}</span>
 					{/if}
 				</div>
-				<svelte:fragment slot="text">
-					{#if isCloudHosted()}
-						The cloud version is updated daily.
-					{:else}
-						How to update?<br />
-						- docker: <code>docker compose up -d</code><br />
-						- <a href="https://github.com/windmill-labs/windmill-helm-charts#install">helm</a>
-					{/if}
-				</svelte:fragment>
+				{#snippet text()}
+							
+						{#if isCloudHosted()}
+							The cloud version is updated daily.
+						{:else}
+							How to update?<br />
+							- docker: <code>docker compose up -d</code><br />
+							- <a href="https://github.com/windmill-labs/windmill-helm-charts#install">helm</a>
+						{/if}
+					
+							{/snippet}
 			</MeltTooltip>
 		{/snippet}
 		{#snippet actions()}
diff --git a/frontend/src/lib/components/SuperadminSettingsInner.svelte b/frontend/src/lib/components/SuperadminSettingsInner.svelte
index 4d6b0e33f1..1f33e768d8 100644
--- a/frontend/src/lib/components/SuperadminSettingsInner.svelte
+++ b/frontend/src/lib/components/SuperadminSettingsInner.svelte
@@ -8,7 +8,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { base } from '$lib/base'
 	import SearchItems from './SearchItems.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { goto as gotoUrl } from '$app/navigation'
 	import Version from './Version.svelte'
 	import Uptodate from './Uptodate.svelte'
@@ -50,9 +50,9 @@
 	} = $props()
 
 	function removeHash() {
-		const index = $page.url.href.lastIndexOf('#')
+		const index = page.url.href.lastIndexOf('#')
 		if (index === -1) return
-		const hashRemoved = $page.url.href.slice(0, index)
+		const hashRemoved = page.url.href.slice(0, index)
 		gotoUrl(hashRemoved)
 	}
 
diff --git a/frontend/src/lib/components/TableCustom.svelte b/frontend/src/lib/components/TableCustom.svelte
index e40a2c9706..7c572e882c 100644
--- a/frontend/src/lib/components/TableCustom.svelte
+++ b/frontend/src/lib/components/TableCustom.svelte
@@ -1,37 +1,51 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
+	interface Props {
+		paginated?: boolean
+		currentPage?: number
+		showNext?: boolean
+		class?: string
+		header_row?: import('svelte').Snippet
+		body?: import('svelte').Snippet
+		onNext?: () => void
+		onPrevious?: () => void
+	}
 
-	export let paginated = false
-	export let currentPage = 1
-	export let showNext = true
-
-	const dispatch = createEventDispatcher()
+	let {
+		paginated = false,
+		currentPage = 1,
+		showNext = true,
+		class: className = '',
+		header_row,
+		body,
+		onNext,
+		onPrevious
+	}: Props = $props()
 </script>
 
-<!-- A custom table 
+<!-- A custom table
 - the first slot should be a <tr>, containing th elements
 - the second slot should be a <tbody>, containing th elements
 -->
-<div class="flex flex-col {$$props.class} min-w-full">
+<div class="flex flex-col {className} min-w-full">
 	<div class="inline-block min-w-full py-2 align-middle">
 		<table class="table-custom min-w-full table-auto divide-y">
 			<thead>
-				<slot name="header-row" />
+				{@render header_row?.()}
 			</thead>
-			<slot name="body" />
+			{@render body?.()}
 		</table>
 	</div>
 	{#if paginated}
 		<div class="sticky flex flex-row-reverse text-primary mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
-				on:click={() => dispatch('next')}
+				onclick={() => onNext?.()}
 			>
 				Next
 			</button>
 			<button
 				class="mx-2 drop-shadow-md {currentPage === 1 ? 'hidden' : ''}"
-				on:click={() => dispatch('previous')}
+				onclick={() => onPrevious?.()}
 			>
 				Previous
 			</button>
diff --git a/frontend/src/lib/components/TestConnection.svelte b/frontend/src/lib/components/TestConnection.svelte
index 576bbc9334..7c59a2a324 100644
--- a/frontend/src/lib/components/TestConnection.svelte
+++ b/frontend/src/lib/components/TestConnection.svelte
@@ -7,10 +7,19 @@
 	import { workspaceStore } from '$lib/stores'
 	import { tryEvery } from '$lib/utils'
 
-	export let workspaceOverride: string | undefined = undefined
-	export let resourceType: string | undefined
-	export let args: Record<string, any> | any = {}
-	export let buttonTextOverride: string | undefined = undefined
+	interface Props {
+		workspaceOverride?: string | undefined;
+		resourceType: string | undefined;
+		args?: Record<string, any> | any;
+		buttonTextOverride?: string | undefined;
+	}
+
+	let {
+		workspaceOverride = undefined,
+		resourceType,
+		args = {},
+		buttonTextOverride = undefined
+	}: Props = $props();
 
 	const scripts: {
 		[key: string]: {
@@ -166,7 +175,7 @@ export async function main(bucket: any) {
 		}
 	}
 
-	let loading = false
+	let loading = $state(false)
 	async function testConnection() {
 		if (!resourceType) return
 		loading = true
diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte
index 437fbc1c02..215d58a499 100644
--- a/frontend/src/lib/components/TooltipInner.svelte
+++ b/frontend/src/lib/components/TooltipInner.svelte
@@ -4,9 +4,19 @@
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import { twMerge } from 'tailwind-merge'
 
-	export let documentationLink: string | undefined = undefined
-	export let markdownTooltip: string | undefined = undefined
-	export let customBgClass: string | undefined = undefined
+	interface Props {
+		documentationLink?: string | undefined;
+		markdownTooltip?: string | undefined;
+		customBgClass?: string | undefined;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		documentationLink = undefined,
+		markdownTooltip = undefined,
+		customBgClass = undefined,
+		children
+	}: Props = $props();
 	const plugins = [gfmPlugin()]
 </script>
 
@@ -21,7 +31,7 @@
 			<Markdown md={markdownTooltip} {plugins} />
 		</div>
 	{:else}
-		<slot />
+		{@render children?.()}
 	{/if}
 
 	{#if documentationLink}
diff --git a/frontend/src/lib/components/Uptodate.svelte b/frontend/src/lib/components/Uptodate.svelte
index de5a459083..40a231e6be 100644
--- a/frontend/src/lib/components/Uptodate.svelte
+++ b/frontend/src/lib/components/Uptodate.svelte
@@ -3,7 +3,7 @@
 	import { isCloudHosted } from '$lib/cloud'
 	import Tooltip from './Tooltip.svelte'
 
-	let uptodate: string | undefined = undefined
+	let uptodate: string | undefined = $state(undefined)
 
 	async function loadVersion() {
 		try {
diff --git a/frontend/src/lib/components/Urlize.svelte b/frontend/src/lib/components/Urlize.svelte
index 060ec9f141..d682a39ca9 100644
--- a/frontend/src/lib/components/Urlize.svelte
+++ b/frontend/src/lib/components/Urlize.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { urlize } from '$lib/utils'
 
-	export let text: string
-	$: parsed = text ? urlize(text, 'html') : ''
+	interface Props {
+		text: string;
+	}
+
+	let { text }: Props = $props();
+	let parsed = $derived(text ? urlize(text, 'html') : '')
 </script>
 
 {@html parsed}
diff --git a/frontend/src/lib/components/Version.svelte b/frontend/src/lib/components/Version.svelte
index 9406bed01f..aa0b58624d 100644
--- a/frontend/src/lib/components/Version.svelte
+++ b/frontend/src/lib/components/Version.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { SettingsService } from '$lib/gen'
 
-	let version = ''
+	let version = $state('')
 
 	loadVersion()
 
diff --git a/frontend/src/lib/components/WhitelistIp.svelte b/frontend/src/lib/components/WhitelistIp.svelte
index 600c879c79..8d8bac1a5d 100644
--- a/frontend/src/lib/components/WhitelistIp.svelte
+++ b/frontend/src/lib/components/WhitelistIp.svelte
@@ -2,7 +2,7 @@
 	import { WorkerService } from '$lib/gen'
 	import { Alert } from './common'
 
-	let ips: string[] | undefined = undefined
+	let ips: string[] | undefined = $state(undefined)
 
 	WorkerService.listWorkers({ pingSince: 300 }).then((workers) => {
 		ips = [
diff --git a/frontend/src/lib/components/WorkflowTimeline.svelte b/frontend/src/lib/components/WorkflowTimeline.svelte
index 28c000a03a..35cf4445ff 100644
--- a/frontend/src/lib/components/WorkflowTimeline.svelte
+++ b/frontend/src/lib/components/WorkflowTimeline.svelte
@@ -7,23 +7,15 @@
 	import TimelineBar from './TimelineBar.svelte'
 	import type { WorkflowStatus } from '$lib/gen'
 
-	export let flow_status: Record<string, WorkflowStatus>
-	export let flowDone = false
+	interface Props {
+		flow_status: Record<string, WorkflowStatus>;
+		flowDone?: boolean;
+	}
 
-	$: min = Object.values(flow_status).reduce(
-		(a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity),
-		Infinity
-	)
-	$: max = flowDone
-		? Object.values(flow_status).reduce(
-				(a, b) =>
-					Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0),
-				0
-		  )
-		: undefined
-	$: total = flowDone && max ? max - min : now - min
+	let { flow_status, flowDone = false }: Props = $props();
 
-	let now = getDbClockNow().getTime()
+
+	let now = $state(getDbClockNow().getTime())
 
 	let interval = setInterval((x) => {
 		if (!max) {
@@ -37,6 +29,18 @@
 	onDestroy(() => {
 		interval && clearInterval(interval)
 	})
+	let min = $derived(Object.values(flow_status).reduce(
+		(a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity),
+		Infinity
+	))
+	let max = $derived(flowDone
+		? Object.values(flow_status).reduce(
+				(a, b) =>
+					Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0),
+				0
+		  )
+		: undefined)
+	let total = $derived(flowDone && max ? max - min : now - min)
 </script>
 
 {#if flow_status}
diff --git a/frontend/src/lib/components/ZitadelSetting.svelte b/frontend/src/lib/components/ZitadelSetting.svelte
index ce8b879db9..430c4c588c 100644
--- a/frontend/src/lib/components/ZitadelSetting.svelte
+++ b/frontend/src/lib/components/ZitadelSetting.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
 	import Toggle from './Toggle.svelte'
 	import SettingCard from './instanceSettings/SettingCard.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -30,10 +34,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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={'zitadel'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
index 3f7de3b5ab..95aeef0c32 100644
--- a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
+++ b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
 			onConfirm()
 		}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
index 8ef0460482..c89448c57b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -108,7 +108,7 @@
 			multiple={resolvedConfig?.allowMultiple}
 			convertTo="base64"
 			returnFileNames
-			on:change={({ detail }) => {
+			onChange={(detail) => {
 				handleChange(detail)
 			}}
 			class={twMerge('w-full h-full', css?.container?.class, 'wm-file-input')}
diff --git a/frontend/src/lib/components/apps/editor/AppExportButton.svelte b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
index 2090323725..0f96d004ec 100644
--- a/frontend/src/lib/components/apps/editor/AppExportButton.svelte
+++ b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
@@ -14,11 +14,11 @@
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
 
-	let jsonViewerDrawer: Drawer
+	let jsonViewerDrawer: Drawer = $state()
 
-	let app: any | undefined = undefined
+	let app: any | undefined = $state(undefined)
 
-	let rawType: 'json' | 'yaml' = 'yaml'
+	let rawType: 'json' | 'yaml' = $state('yaml')
 
 	export function open(app_l: any) {
 		app = app_l
diff --git a/frontend/src/lib/components/apps/editor/AppInputs.svelte b/frontend/src/lib/components/apps/editor/AppInputs.svelte
index a81bd59200..591821ae7a 100644
--- a/frontend/src/lib/components/apps/editor/AppInputs.svelte
+++ b/frontend/src/lib/components/apps/editor/AppInputs.svelte
@@ -9,7 +9,7 @@
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
-	let resourceOnly: boolean = true
+	let resourceOnly: boolean = $state(true)
 </script>
 
 <Alert type="info" title="Configurations">
diff --git a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
index 7572c8c0fe..c96b909d23 100644
--- a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
@@ -10,12 +10,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Globe, Loader2, Save } from 'lucide-svelte'
 
-	let jsonViewerDrawer: Drawer
+	let jsonViewerDrawer: Drawer = $state()
 
-	let code: string = ''
+	let code: string = $state('')
 	let path: string = ''
-	let useDraft: boolean = false
-	let loading = true
+	let useDraft: boolean = $state(false)
+	let loading = $state(true)
 	const dispatch = createEventDispatcher()
 
 	let app: any | undefined = undefined
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 687262cf36..e00a128bf4 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { getContext, onMount } from 'svelte'
 	import type { App, AppEditorContext, AppViewerContext } from '../types'
 	import RecomputeAllButton from './RecomputeAllButton.svelte'
@@ -10,12 +12,9 @@
 
 	let timeout: number | undefined = undefined
 	let shouldRefresh = false
-	let firstLoad = false
+	let firstLoad = $state(false)
 	let progressTimer: number | undefined = undefined
 
-	$: !firstLoad &&
-		canInitializeAll($initialized?.initializedComponents, $app) &&
-		refresh('all initialized')
 
 	// $: console.log('canInitializeAll', firstLoad, $initialized?.initializedComponents)
 	function canInitializeAll(initialized: string[] | undefined, app: App) {
@@ -53,8 +52,6 @@
 		}
 	}
 
-	$: $recomputeAllContext.componentNumber =
-		Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0
 
 	onMount(() => {
 		if (appEditorContext) {
@@ -112,7 +109,7 @@
 		onRefresh(!inter, 'setInter ' + source)
 	}
 
-	let refreshing: string[] = []
+	let refreshing: string[] = $state([])
 	function refresh(reason: string, excludeId: string | undefined = undefined) {
 		let isFirstLoad = false
 		if (!firstLoad && reason == 'all initialized') {
@@ -182,6 +179,15 @@
 			setInter: (n) => setInter(n, 'all context')
 		}
 	})
+	run(() => {
+		!firstLoad &&
+			canInitializeAll($initialized?.initializedComponents, $app) &&
+			refresh('all initialized')
+	});
+	run(() => {
+		$recomputeAllContext.componentNumber =
+			Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0
+	});
 </script>
 
 <RecomputeAllButton
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
index c50b0ad656..2971a52654 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
@@ -76,7 +76,7 @@
 
 	entries.sort((a, b) => (b.order ?? 0) - (a.order ?? 0) + a.name.localeCompare(b.name))
 
-	let search = ''
+	let search = $state('')
 </script>
 
 <div class="p-2">
@@ -98,12 +98,15 @@
 					}
 				}}
 			>
-				<div slot="titleSlot" class="flex items-center">
-					<svelte:component this={icon} size={18} />
-					<span class="ml-1">
-						{name}
-					</span>
-				</div>
+				{#snippet titleSlot()}
+								{@const SvelteComponent = icon}
+				<div  class="flex items-center">
+						<SvelteComponent size={18} />
+						<span class="ml-1">
+							{name}
+						</span>
+					</div>
+							{/snippet}
 				{#if description}
 					<div class="py-2 text-xs text-gray-500">{description}</div>
 				{/if}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
index 7460c30de9..be068a6699 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
@@ -15,9 +15,9 @@
 	let customcomponents: Array<{
 		name: string
 		path: string
-	}> = []
+	}> = $state([])
 
-	let loading: boolean = false
+	let loading: boolean = $state(false)
 
 	async function getCustomComponents() {
 		loading = true
@@ -61,10 +61,10 @@
 		nameField = ''
 	}
 
-	let nameField: string = ''
-	let reactVersion: string = '18.2.0'
-	let files: FileList
-	let useReact = true
+	let nameField: string = $state('')
+	let reactVersion: string = $state('18.2.0')
+	let files: FileList = $state()
+	let useReact = $state(true)
 
 	getCustomComponents()
 </script>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index cf5bda33c7..f9cc59e6ef 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -210,12 +210,13 @@
 				toggleClasses=" !rounded-b-none !py-0
 				{isOpen[prefix] ? '!bg-surface-secondary hover:!bg-surface-hover' : ''}"
 			>
-				<!-- @migration-task: migrate this slot by hand, `title` would shadow a prop on the parent component -->
-				<svelte:fragment slot="titleSlot">
-					<span class="font-normal text-xs">
-						{group}
-					</span>
-				</svelte:fragment>
+				{#snippet titleSlot()}
+							
+						<span class="font-normal text-xs">
+							{group}
+						</span>
+					
+							{/snippet}
 				<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1 pt-3">
 					{#each property[group] as p}
 						{@const {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
index abeb1bed53..5296ebe3a6 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
@@ -19,14 +19,14 @@
 	const { previewTheme, app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let cssString: string | undefined = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined
-	$: type = $app?.theme?.type
+	let type = $derived($app?.theme?.type)
 
 	let themes: Array<{
 		name: string
 		path: string
-	}> = []
+	}> = $state([])
 
-	let loading: boolean = false
+	let loading: boolean = $state(false)
 
 	async function getThemes() {
 		loading = true
@@ -62,8 +62,8 @@
 		}
 	}
 
-	let nameField: string = ''
-	let previewThemePath: string | undefined = undefined
+	let nameField: string = $state('')
+	let previewThemePath: string | undefined = $state(undefined)
 
 	onMount(() => {
 		getThemes()
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
index ac9dfc48d2..ee6b85a92f 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
@@ -12,12 +12,12 @@
 
 	const { app, initialized } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: unintitializedComponents = allItems($app.grid, $app.subgrids)
+	let unintitializedComponents = $derived(allItems($app.grid, $app.subgrids)
 		.map((x) => x.id)
 		.filter((x) => !$initialized.initializedComponents?.includes(x))
-		.sort()
+		.sort())
 
-	$: subgridsErrors = Object.keys($app.subgrids ?? {})
+	let subgridsErrors = $derived(Object.keys($app.subgrids ?? {})
 		.map((x) => {
 			const parentId = x.split('-')[0]
 			const parent = findGridItem($app, parentId)
@@ -39,7 +39,7 @@
 				}
 			}
 		})
-		.filter(Boolean)
+		.filter(Boolean))
 </script>
 
 <div class="flex flex-col gap-8" style="all:none;">
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 dc5a9b6aec..2cb97614a6 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
@@ -66,7 +66,7 @@
 		convertTo={hasConvertTo(fileUpload) ? fileUpload.convertTo : undefined}
 		iconSize={24}
 		class="text-sm py-4"
-		on:change={({ detail }) => {
+		onChange={(detail) => {
 			componentInput = {
 				...componentInput,
 				type: 'static',
@@ -74,10 +74,9 @@
 			}
 		}}
 	>
-		<!-- @migration-task: migrate this slot by hand, `selected-title` is an invalid identifier -->
-		<svelte:fragment slot="selected-title">
+		{#snippet selected_title()}
 			<!-- Removing the title when there is a selected file -->
 			<span></span>
-		</svelte:fragment>
+		{/snippet}
 	</FileInput>
 {/if}
diff --git a/frontend/src/lib/components/assets/AssetButtons.svelte b/frontend/src/lib/components/assets/AssetButtons.svelte
index 241a0f050e..adc166ade0 100644
--- a/frontend/src/lib/components/assets/AssetButtons.svelte
+++ b/frontend/src/lib/components/assets/AssetButtons.svelte
@@ -43,29 +43,33 @@
 	{/if}
 	{#if (asset.kind === 'resource' && resourceDataCacheValue === undefined) || ducklakeNotFound || datatableNotFound}
 		<Popover contentClasses="px-3 py-2">
-			<svelte:fragment slot="trigger">
-				<Button
-					startIcon={{ icon: AlertTriangle }}
-					variant="default"
-					unifiedSize="md"
-					btnClasses="text-red-500"
-					iconOnly
-				/>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<span class="text-sm">Not found</span>
-				{#if ducklakeNotFound}
-					<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_lfs">
-						Go to Ducklake settings
-					</Button>
-				{:else if datatableNotFound}
-					<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_data_tables">
-						Go to Data Table settings
-					</Button>
-				{:else if asset.kind === 'resource' && resourceDataCacheValue === undefined}
-					<Button wrapperClasses="mt-1" href="/resources">Go to Resources</Button>
-				{/if}
-			</svelte:fragment>
+			{#snippet trigger()}
+					
+					<Button
+						startIcon={{ icon: AlertTriangle }}
+						variant="default"
+						unifiedSize="md"
+						btnClasses="text-red-500"
+						iconOnly
+					/>
+				
+					{/snippet}
+			{#snippet content()}
+					
+					<span class="text-sm">Not found</span>
+					{#if ducklakeNotFound}
+						<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_lfs">
+							Go to Ducklake settings
+						</Button>
+					{:else if datatableNotFound}
+						<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_data_tables">
+							Go to Data Table settings
+						</Button>
+					{:else if asset.kind === 'resource' && resourceDataCacheValue === undefined}
+						<Button wrapperClasses="mt-1" href="/resources">Go to Resources</Button>
+					{/if}
+				
+					{/snippet}
 		</Popover>
 	{:else if assetCanBeExplored(asset, { resource_type: resourceDataCacheValue })}
 		<ExploreAssetButton
diff --git a/frontend/src/lib/components/assets/AssetColumnBadges.svelte b/frontend/src/lib/components/assets/AssetColumnBadges.svelte
index 1a439af06a..59687a562a 100644
--- a/frontend/src/lib/components/assets/AssetColumnBadges.svelte
+++ b/frontend/src/lib/components/assets/AssetColumnBadges.svelte
@@ -34,9 +34,11 @@
 			{:else}
 				<Tooltip>
 					{@render badge()}
-					<svelte:fragment slot="text">
-						{accessType2} access to column "{columnName}"
-					</svelte:fragment>
+					{#snippet text()}
+									
+							{accessType2} access to column "{columnName}"
+						
+									{/snippet}
 				</Tooltip>
 			{/if}
 		{/each}
diff --git a/frontend/src/lib/components/assets/AssetsDropdownButton.svelte b/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
index 1e1e1871ae..d252083eac 100644
--- a/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
+++ b/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
@@ -103,122 +103,132 @@
 	bind:isOpen
 	escapeBehavior="ignore"
 >
-	<svelte:fragment slot="trigger">
-		<div
-			class={twMerge(
-				size === '3xs' ? 'h-[1.6rem]' : 'py-1.5',
-				'text-xs flex items-center gap-1.5 px-2 rounded-md relative',
-				'border',
-				'bg-surface hover:bg-surface-hover active:bg-surface',
-				'transition-all hover:text-primary backdrop-blur-md cursor-pointer'
-			)}
-		>
+	{#snippet trigger()}
+	
 			<div
-				bind:this={blueBgDiv}
-				class="absolute pointer-events-none bg-slate-300 dark:bg-[#576278] inset-0 rounded-md opacity-0"
-			></div>
-			<Pyramid size={size === '3xs' ? 13 : 16} class="z-10" />
-			<span
-				class={twMerge('z-10 font-normal', size === '3xs' ? 'text-3xs mt-[0.08rem]' : 'text-xs')}
+				class={twMerge(
+					size === '3xs' ? 'h-[1.6rem]' : 'py-1.5',
+					'text-xs flex items-center gap-1.5 px-2 rounded-md relative',
+					'border',
+					'bg-surface hover:bg-surface-hover active:bg-surface',
+					'transition-all hover:text-primary backdrop-blur-md cursor-pointer'
+				)}
 			>
-				{noBtnText ? assets.length : pluralize(assets.length, 'asset')}
-			</span>
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<ul class="divide-y rounded-md">
-			{#each assets as asset}
-				{@const ducklakeNotFound =
-					asset.kind === 'ducklake' &&
-					ducklakes.current &&
-					!ducklakes.current.find((name) => name === asset.path.split('/')[0])}
-				{@const datatableNotFound =
-					asset.kind === 'datatable' &&
-					datatables.current &&
-					!datatables.current.find((name) => name === asset.path.split('/')[0])}
-				<li
-					class="text-sm px-3 h-12 flex gap-3 items-center"
-					onmouseenter={() => onHoverLi?.(asset, 'enter')}
-					onmouseleave={() => onHoverLi?.(asset, 'leave')}
+				<div
+					bind:this={blueBgDiv}
+					class="absolute pointer-events-none bg-slate-300 dark:bg-[#576278] inset-0 rounded-md opacity-0"
+				></div>
+				<Pyramid size={size === '3xs' ? 13 : 16} class="z-10" />
+				<span
+					class={twMerge('z-10 font-normal', size === '3xs' ? 'text-3xs mt-[0.08rem]' : 'text-xs')}
 				>
-					<Popover
-						contentClasses="py-2 px-4 flex flex-col gap-2"
-						disablePopup={!!asset.access_type}
+					{noBtnText ? assets.length : pluralize(assets.length, 'asset')}
+				</span>
+			</div>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<ul class="divide-y rounded-md">
+				{#each assets as asset}
+					{@const ducklakeNotFound =
+						asset.kind === 'ducklake' &&
+						ducklakes.current &&
+						!ducklakes.current.find((name) => name === asset.path.split('/')[0])}
+					{@const datatableNotFound =
+						asset.kind === 'datatable' &&
+						datatables.current &&
+						!datatables.current.find((name) => name === asset.path.split('/')[0])}
+					<li
+						class="text-sm px-3 h-12 flex gap-3 items-center"
+						onmouseenter={() => onHoverLi?.(asset, 'enter')}
+						onmouseleave={() => onHoverLi?.(asset, 'leave')}
 					>
-						<svelte:fragment slot="trigger">
-							<div
-								class={twMerge(
-									'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
-									!asset.access_type ? 'text-orange-600 !border-orange-600' : '',
-									!asset.access_type ? 'hover:bg-surface active:opacity-80' : ''
-								)}
-							>
-								{formatAssetAccessType(getAccessType(asset)) ?? '?'}
-							</div>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
-							{#if !asset.access_type}
-								<span class="text-sm text-primary leading-4">
-									Could not infer automatically <br />
-									<span class="text-xs">Please select manually </span>
-								</span>
-								<div class="flex items-center gap-2">
-									<ToggleButtonGroup
-										allowEmpty
-										bind:selected={asset.alt_access_type}
-										class="max-w-fit"
+						<Popover
+							contentClasses="py-2 px-4 flex flex-col gap-2"
+							disablePopup={!!asset.access_type}
+						>
+							{#snippet trigger()}
+											
+									<div
+										class={twMerge(
+											'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
+											!asset.access_type ? 'text-orange-600 !border-orange-600' : '',
+											!asset.access_type ? 'hover:bg-surface active:opacity-80' : ''
+										)}
 									>
-										{#snippet children({ item })}
-											<ToggleButton value="r" label="Read" {item} />
-											<ToggleButton value="w" label="Write" {item} />
-											<ToggleButton value="rw" label="Read/Write" {item} />
-										{/snippet}
-									</ToggleButtonGroup>
+										{formatAssetAccessType(getAccessType(asset)) ?? '?'}
+									</div>
+								
+											{/snippet}
+							{#snippet content()}
+											
+									{#if !asset.access_type}
+										<span class="text-sm text-primary leading-4">
+											Could not infer automatically <br />
+											<span class="text-xs">Please select manually </span>
+										</span>
+										<div class="flex items-center gap-2">
+											<ToggleButtonGroup
+												allowEmpty
+												bind:selected={asset.alt_access_type}
+												class="max-w-fit"
+											>
+												{#snippet children({ item })}
+													<ToggleButton value="r" label="Read" {item} />
+													<ToggleButton value="w" label="Write" {item} />
+													<ToggleButton value="rw" label="Read/Write" {item} />
+												{/snippet}
+											</ToggleButtonGroup>
 
-									<Tooltip2>
-										This is used to determine if the asset should be displayed as an input or an
-										output node in the flow editor
-									</Tooltip2>
-								</div>
-							{/if}
-						</svelte:fragment>
-					</Popover>
-					<div class="flex flex-col flex-1">
-						<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
-							{asset.path}
-							<svelte:fragment slot="text">
+											<Tooltip2>
+												This is used to determine if the asset should be displayed as an input or an
+												output node in the flow editor
+											</Tooltip2>
+										</div>
+									{/if}
+								
+											{/snippet}
+						</Popover>
+						<div class="flex flex-col flex-1">
+							<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
 								{asset.path}
-							</svelte:fragment>
-						</Tooltip>
-						<span class="text-xs text-primary select-none">
-							{liSubtitle?.(asset) ??
-								formatAssetKind({
-									...asset,
-									...(asset.kind === 'resource'
-										? {
-												metadata: {
-													resource_type: resourceDataCache[asset.path.split('?table=')[0]]
+								{#snippet text()}
+													
+										{asset.path}
+									
+													{/snippet}
+							</Tooltip>
+							<span class="text-xs text-primary select-none">
+								{liSubtitle?.(asset) ??
+									formatAssetKind({
+										...asset,
+										...(asset.kind === 'resource'
+											? {
+													metadata: {
+														resource_type: resourceDataCache[asset.path.split('?table=')[0]]
+													}
 												}
-											}
-										: {})
-								})}
-						</span>
-					</div>
+											: {})
+									})}
+							</span>
+						</div>
 
-					<AssetButtons
-						onClick={() => (isOpen = false)}
-						{asset}
-						{resourceDataCache}
-						{dbManagerDrawer}
-						{resourceEditorDrawer}
-						{s3FilePicker}
-						{ducklakeNotFound}
-						{datatableNotFound}
-					/>
-				</li>
-			{/each}
-		</ul>
-	</svelte:fragment>
+						<AssetButtons
+							onClick={() => (isOpen = false)}
+							{asset}
+							{resourceDataCache}
+							{dbManagerDrawer}
+							{resourceEditorDrawer}
+							{s3FilePicker}
+							{ducklakeNotFound}
+							{datatableNotFound}
+						/>
+					</li>
+				{/each}
+			</ul>
+		
+	{/snippet}
 </Popover>
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
 <ResourceEditorDrawer bind:this={resourceEditorDrawer} />
diff --git a/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte b/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
index 177032341b..16effb700a 100644
--- a/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
+++ b/frontend/src/lib/components/assets/AssetsUsageDrawer.svelte
@@ -71,11 +71,13 @@
 			<div class={twMerge('text-xs 	font-normal text-primary min-w-12 p-1 text-center rounded-md')}>
 				{text}
 			</div>
-			<svelte:fragment slot="text">
-				{#if tooltip}
-					{tooltip}
-				{/if}
-			</svelte:fragment>
+			{#snippet text()}
+					
+					{#if tooltip}
+						{tooltip}
+					{/if}
+				
+					{/snippet}
 		</Tooltip>
 	{/if}
 {/snippet}
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index 3bc97538d9..329acd10ca 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'}
-				on:selected={({ detail }) => {
+				onSelected={(detail) => {
 					scope = detail === 'admins' ? undefined : detail
 				}}
 			>
@@ -358,10 +358,10 @@
 			date={after}
 			placement="bottom-end"
 			label="From"
-			on:change={({ detail }) => {
-				after = new Date(detail).toISOString()
+			onchange={(value) => {
+				after = new Date(value).toISOString()
 			}}
-			on:clear={() => {
+			onclear={() => {
 				after = undefined
 			}}
 		/>
@@ -374,10 +374,10 @@
 			bind:date={before}
 			label="To"
 			placement="bottom-end"
-			on:change={({ detail }) => {
-				before = new Date(detail).toISOString()
+			onchange={(value) => {
+				before = new Date(value).toISOString()
 			}}
-			on:clear={() => {
+			onclear={() => {
 				before = undefined
 			}}
 		/>
@@ -445,7 +445,7 @@
 	<div class="flex flex-row">
 		<Button
 			variant="subtle"
-			on:click={() => {
+			onclick={() => {
 				after = undefined
 				before = undefined
 				username = 'all'
@@ -462,7 +462,7 @@
 		</Button>
 		<Button
 			variant="subtle"
-			on:click={downloadAuditLogsAsJson}
+			onclick={downloadAuditLogsAsJson}
 			unifiedSize="md"
 			title="Downloads currently displayed logs only (up to {perPage} entries)"
 		>
@@ -473,7 +473,7 @@
 		</Button>
 		<Button
 			variant="accent"
-			on:click={() => {
+			onclick={() => {
 				refresh++
 			}}
 			unifiedSize="md"
diff --git a/frontend/src/lib/components/common/FileProgressBar.svelte b/frontend/src/lib/components/common/FileProgressBar.svelte
index d339d9477f..190254c6aa 100644
--- a/frontend/src/lib/components/common/FileProgressBar.svelte
+++ b/frontend/src/lib/components/common/FileProgressBar.svelte
@@ -1,23 +1,37 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { tweened } from 'svelte/motion'
 	import { cubicOut } from 'svelte/easing'
 
-	export let color = 'blue'
-	export let progress = 0
-	export let ended: boolean = false
+	interface Props {
+		color?: string;
+		progress?: number;
+		ended?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		color = 'blue',
+		progress = 0,
+		ended = false,
+		children
+	}: Props = $props();
 
 	const tweenedProgress = tweened(progress, {
 		duration: 400,
 		easing: cubicOut
 	})
 
-	$: tweenedProgress.set(progress)
+	run(() => {
+		tweenedProgress.set(progress)
+	});
 </script>
 
 {#key color}
 	<div class="flex flex-row gap-1 items-center justify-between w-full">
 		{#if ended}
-			<slot />
+			{@render children?.()}
 		{:else}
 			<div class="progress-bar">
 				<div
diff --git a/frontend/src/lib/components/common/alert/Notification.svelte b/frontend/src/lib/components/common/alert/Notification.svelte
index 4beca30071..7c4aadc271 100644
--- a/frontend/src/lib/components/common/alert/Notification.svelte
+++ b/frontend/src/lib/components/common/alert/Notification.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let notificationCount = 0
-	export let notificationLimit: number | undefined = undefined
+	interface Props {
+		notificationCount?: number;
+		notificationLimit?: number | undefined;
+	}
+
+	let { notificationCount = 0, notificationLimit = undefined }: Props = $props();
 </script>
 
 {#if notificationCount > 0}
diff --git a/frontend/src/lib/components/common/button/AnimatedButton.svelte b/frontend/src/lib/components/common/button/AnimatedButton.svelte
index 7248b891dc..3ceb0ebd4c 100644
--- a/frontend/src/lib/components/common/button/AnimatedButton.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButton.svelte
@@ -1,12 +1,26 @@
 <script lang="ts">
 	import AnimatedButtonInner from './AnimatedButtonInner.svelte'
-	export let marginWidth = '2px'
-	export let animationDuration = '2s'
-	export let baseRadius = '4px'
-	export let animate = true
-	export let wrapperClasses = ''
-	export let ringColor = 'transparent'
-	export let darkMode = false
+	interface Props {
+		marginWidth?: string;
+		animationDuration?: string;
+		baseRadius?: string;
+		animate?: boolean;
+		wrapperClasses?: string;
+		ringColor?: string;
+		darkMode?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		marginWidth = '2px',
+		animationDuration = '2s',
+		baseRadius = '4px',
+		animate = true,
+		wrapperClasses = '',
+		ringColor = 'transparent',
+		darkMode = false,
+		children
+	}: Props = $props();
 </script>
 
 {#if animate}
@@ -19,10 +33,10 @@
 		{ringColor}
 		{darkMode}
 	>
-		<slot />
+		{@render children?.()}
 	</AnimatedButtonInner>
 {:else}
 	<div class={wrapperClasses}>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte b/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
index 7396b5314b..9ba46928a0 100644
--- a/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
@@ -1,27 +1,41 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
-	export let marginWidth = '2px'
-	export let animationDuration = '2s'
-	export let baseRadius = '4px'
-	export let animate = true
-	export let wrapperClasses = ''
-	export let ringColor = 'transparent'
-	export let darkMode = false
+	interface Props {
+		marginWidth?: string;
+		animationDuration?: string;
+		baseRadius?: string;
+		animate?: boolean;
+		wrapperClasses?: string;
+		ringColor?: string;
+		darkMode?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		marginWidth = '2px',
+		animationDuration = '2s',
+		baseRadius = '4px',
+		animate = true,
+		wrapperClasses = '',
+		ringColor = 'transparent',
+		darkMode = $bindable(false),
+		children
+	}: Props = $props();
 
 	const gradientColors = {
 		light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
 		dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
 	}
 
-	let clientWidth = 0
-	let clientHeight = 0
+	let clientWidth = $state(0)
+	let clientHeight = $state(0)
 
-	$: circleRadius = Math.ceil(
+	let circleRadius = $derived(Math.ceil(
 		Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
-	)
+	))
 
-	$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`
+	let gradientString = $derived(`from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`)
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -33,7 +47,7 @@
 	bind:clientWidth
 	bind:clientHeight
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index c94224cd0a..383e73a991 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -466,8 +466,8 @@
 			class="h-auto w-fit"
 			hidePopup={hideDropdown}
 			usePointerDownOutside
-			on:open={() => dispatch('dropdownOpen', true)}
-			on:close={() => dispatch('dropdownOpen', false)}
+			onOpen={() => dispatch('dropdownOpen', true)}
+			onClose={() => dispatch('dropdownOpen', false)}
 			bind:open={dropdownOpen}
 			enableFlyTransition
 			customWidth={dropdownWidth}
diff --git a/frontend/src/lib/components/common/button/PulseButton.svelte b/frontend/src/lib/components/common/button/PulseButton.svelte
index 8b1603cf81..537d8915e3 100644
--- a/frontend/src/lib/components/common/button/PulseButton.svelte
+++ b/frontend/src/lib/components/common/button/PulseButton.svelte
@@ -1,10 +1,20 @@
-<script>
-	export let pulseDuration = 2
-	export let numberOfPulses = 3
-	export let scale = 1.2
+<script lang="ts">
+	interface Props {
+		pulseDuration?: number;
+		numberOfPulses?: number;
+		scale?: number;
+		children?: import('svelte').Snippet;
+	}
 
-	let isPulsing = false
-	let pulseCount = 1
+	let {
+		pulseDuration = 2,
+		numberOfPulses = 3,
+		scale = 1.2,
+		children
+	}: Props = $props();
+
+	let isPulsing = $state(false)
+	let pulseCount = $state(1)
 
 	export function triggerPulse(count) {
 		if (pulseCount < 1) return
@@ -20,7 +30,7 @@
 
 <div class="relative">
 	<div>
-		<slot />
+		{@render children?.()}
 	</div>
 	{#each Array(numberOfPulses) as _, i}
 		<div
diff --git a/frontend/src/lib/components/common/button/RoundIconButton.svelte b/frontend/src/lib/components/common/button/RoundIconButton.svelte
index 3d05d10f13..4a9c62d7a6 100644
--- a/frontend/src/lib/components/common/button/RoundIconButton.svelte
+++ b/frontend/src/lib/components/common/button/RoundIconButton.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-	export let color: 'light' | 'dark' | undefined = 'light'
-	export let border: boolean = false
+	interface Props {
+		color?: 'light' | 'dark' | undefined;
+		border?: boolean;
+		children?: import('svelte').Snippet;
+	}
 
-	$: colorClasses = {
+	let { color = 'light', border = false, children }: Props = $props();
+
+	let colorClasses = $derived({
 		light: 'text-primary bg-surface hover:bg-surface-hover text-primary',
 		dark: 'text-primary hover:bg-surface-hover-dark text-primary'
-	}[color ?? 'light']
+	}[color ?? 'light'])
 </script>
 
 <div class="rounded-full p-1 {colorClasses} {border ? 'border border-tertiary' : ''}">
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/common/button/UndoRedo.svelte b/frontend/src/lib/components/common/button/UndoRedo.svelte
index 7a12eb1fc9..107747ddb2 100644
--- a/frontend/src/lib/components/common/button/UndoRedo.svelte
+++ b/frontend/src/lib/components/common/button/UndoRedo.svelte
@@ -3,8 +3,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from '..'
 
-	export let undoProps: Record<string, any> = {}
-	export let redoProps: Record<string, any> = {}
+	interface Props {
+		undoProps?: Record<string, any>;
+		redoProps?: Record<string, any>;
+	}
+
+	let { undoProps = {}, redoProps = {} }: Props = $props();
 	const dispatch = createEventDispatcher()
 </script>
 
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index 0a3a89a3a7..cfb958fc4a 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -1,21 +1,35 @@
 <script lang="ts">
 	import { Calendar } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import type { Placement } from '@floating-ui/core'
 	import DateTimeInput from '$lib/components/DateTimeInput.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let date: string | null | undefined
-	export let label: string
-	export let useDropdown: boolean = false
-	export let clearable: boolean = false
-	export let target: string | HTMLElement | undefined = undefined
+	interface Props {
+		date?: string | null | undefined
+		label: string
+		useDropdown?: boolean
+		clearable?: boolean
+		target?: string | HTMLElement | undefined
+		placement?: Placement
+		class?: string
+		onchange?: (value: string) => void
+		onclear?: () => void
+	}
+
+	let {
+		date = $bindable(undefined),
+		label,
+		useDropdown = false,
+		clearable = false,
+		target = undefined,
+		placement = 'top-end',
+		class: className = undefined,
+		onchange = undefined,
+		onclear = undefined
+	}: Props = $props()
 
-	const dispatch = createEventDispatcher()
 	let input: HTMLInputElement | undefined
-
-	export let placement: Placement = 'top-end'
 </script>
 
 <Popover
@@ -23,42 +37,42 @@
 	portal={target}
 	contentClasses="p-4"
 >
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<button
 			title="Open calendar picker"
 			class={twMerge(
 				'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2.5 items-center text-primary bg-surface-secondary rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
-				$$props.class
+				className
 			)}
 			aria-label="Open calendar picker"
-			on:click={() => {
+			onclick={() => {
 				input?.focus()
 			}}
 		>
 			<Calendar size={14} />
 		</button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<!-- svelte-ignore a11y-label-has-associated-control -->
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
+	{/snippet}
+	{#snippet content()}
+		<!-- svelte-ignore a11y_label_has_associated_control -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<label class="block text-primary">
 			<div class="pb-1 text-sm text-secondary">{label}</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div on:click|stopPropagation class="flex w-full">
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div onclick={(e) => e.stopPropagation()} class="flex w-full">
 				<DateTimeInput
 					{clearable}
 					{useDropdown}
 					value={date}
 					on:change={(e) => {
 						date = e.detail
-						dispatch('change', date)
+						if (date) onchange?.(date)
 					}}
 					on:clear={() => {
-						dispatch('clear')
+						onclear?.()
 					}}
 				/>
 			</div>
 		</label>
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
index d5a2a6b2fd..5e5a28c5fc 100644
--- a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
+++ b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
@@ -1,21 +1,41 @@
 <script lang="ts">
+	import { run, createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import { X } from 'lucide-svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let value: any = ''
-	export let placeholder = ''
-	export let type: 'text' | 'textarea' | 'number' = 'text'
-	export let inputClass = ''
-	export let wrapperClass = ''
-	export let buttonClass = ''
+	interface Props {
+		value?: any;
+		placeholder?: string;
+		type?: 'text' | 'textarea' | 'number';
+		inputClass?: string;
+		wrapperClass?: string;
+		buttonClass?: string;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		type = 'text',
+		inputClass = '',
+		wrapperClass = '',
+		buttonClass = '',
+		children,
+		...rest
+	}: Props = $props();
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
-	let isHovered = false
+	let isHovered = $state(false)
 
-	$: isNumeric = ['number', 'range'].includes(type)
-	$: dispatchIfMounted('change', value)
+	let isNumeric = $derived(['number', 'range'].includes(type))
+	run(() => {
+		dispatchIfMounted('change', value)
+	});
 
 	function handleInput(e) {
 		value = isNumeric ? +e.target.value : e.target.value
@@ -25,14 +45,16 @@
 		value = ''
 	}
 
-	$: if (value === undefined) value = ''
+	run(() => {
+		if (value === undefined) value = ''
+	});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="relative grow {wrapperClass}"
-	on:mouseenter={() => (isHovered = true)}
-	on:mouseleave={() => (isHovered = false)}
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
 >
 	{#if type === 'textarea'}
 		<textarea
@@ -40,11 +62,11 @@
 			{placeholder}
 			rows="1"
 			class="resize-y {inputClass}"
-			{...$$restProps}
-			on:input={handleInput}
-			on:keydown|stopPropagation
-			on:focus
-			on:blur
+			{...rest}
+			oninput={handleInput}
+			onkeydown={stopPropagation(bubble('keydown'))}
+			onfocus={bubble('focus')}
+			onblur={bubble('blur')}
 		></textarea>
 	{:else}
 		<input
@@ -52,11 +74,11 @@
 			{value}
 			{placeholder}
 			class=" {(value ? '!pr-[26px] ' : '') + inputClass}"
-			{...$$restProps}
-			on:input={handleInput}
-			on:keydown|stopPropagation
-			on:focus
-			on:blur
+			{...rest}
+			oninput={handleInput}
+			onkeydown={stopPropagation(bubble('keydown'))}
+			onfocus={bubble('focus')}
+			onblur={bubble('blur')}
 		/>
 	{/if}
 	{#if value && isHovered}
@@ -65,10 +87,10 @@
 			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-primary bg-surface-secondary
 			 hover:bg-surface-hover focus:bg-surface-hover {buttonClass}"
 			aria-label="Clear"
-			on:click|preventDefault|stopPropagation={clear}
+			onclick={stopPropagation(preventDefault(clear))}
 		>
 			<X size={11} class="" />
 		</button>
 	{/if}
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 5fe25dbba2..a04923e156 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -79,7 +79,7 @@
 	const Icon = $derived(theme[type].Icon ?? AlertTriangle)
 </script>
 
-<svelte:window on:keydown|capture={onKeyDown} />
+<svelte:window onkeydowncapture={onKeyDown} />
 
 {#if open}
 	<div
diff --git a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
index 56d965be75..20ebe04c85 100644
--- a/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte
@@ -10,7 +10,7 @@
 		replaceFalseWithUndefined,
 		type Value
 	} from '$lib/utils'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import type { GetInitialAndModifiedValues } from './unsavedTypes'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 
@@ -43,9 +43,9 @@
 			!bypassBeforeNavigate &&
 			getInitialAndModifiedValues &&
 			newNavigationState.to &&
-			((newNavigationState.to.url != $page.url &&
+			((newNavigationState.to.url != page.url &&
 				newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) ||
-				(triggerOnSearchParamsChange && newNavigationState.to.url.search != $page.url.search))
+				(triggerOnSearchParamsChange && newNavigationState.to.url.search != page.url.search))
 		) {
 			goingTo = newNavigationState.to.url
 
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index 37a8b3801e..31e47aa390 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
 	import { FileUp, Trash } from 'lucide-svelte'
 	import Button from '../../common/button/Button.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -8,24 +7,47 @@
 
 	type ConvertedFile = string | ArrayBuffer | null
 
-	let c = ''
-	export { c as class }
-	export let style = ''
-	export let accept = '*'
-	export let multiple = false
-	export let convertTo: ReadFileAs | undefined = undefined
-	export let hideIcon = false
-	export let iconSize = 24
-	export let returnFileNames = false
-	export let submittedText: string | undefined = undefined
-	export let defaultFile: string | string[] | undefined = undefined
-	export let disabled: boolean | undefined = undefined
-	export let folderOnly = false
-
-	const dispatch = createEventDispatcher()
-	let input: HTMLInputElement
 	type FileWithPath = File & { path?: string }
-	export let files: FileWithPath[] | undefined = undefined
+
+	interface Props {
+		class?: string
+		style?: string
+		accept?: string
+		multiple?: boolean
+		convertTo?: ReadFileAs | undefined
+		hideIcon?: boolean
+		iconSize?: number
+		returnFileNames?: boolean
+		submittedText?: string | undefined
+		defaultFile?: string | string[] | undefined
+		disabled?: boolean | undefined
+		folderOnly?: boolean
+		files?: FileWithPath[] | undefined
+		selected_title?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+		onChange?: (detail: any) => void
+	}
+
+	let {
+		class: c = '',
+		style = '',
+		accept = '*',
+		multiple = false,
+		convertTo = undefined,
+		hideIcon = false,
+		iconSize = 24,
+		returnFileNames = false,
+		submittedText = undefined,
+		defaultFile = undefined,
+		disabled = undefined,
+		folderOnly = false,
+		files = $bindable(undefined),
+		selected_title,
+		children,
+		onChange
+	}: Props = $props()
+
+	let input: HTMLInputElement
 
 	let pointerStartX = 0
 	let pointerStartY = 0
@@ -35,10 +57,10 @@
 		pointerStartY = e.clientY
 	}
 
-	async function onChange(fileList: FileWithPath[] | null) {
+	async function handleFileChange(fileList: FileWithPath[] | null) {
 		if (!fileList || !fileList.length) {
 			files = undefined
-			dispatch('change', files)
+			onChange?.(files)
 			return
 		}
 
@@ -98,14 +120,14 @@
 		dirEntry: FileSystemDirectoryEntry,
 		path: string
 	): Promise<FileWithPath[]> {
-		const files: FileWithPath[] = []
+		const filesArr: FileWithPath[] = []
 		const dirReader = dirEntry.createReader()
 
 		async function readEntries() {
 			return new Promise<FileWithPath[]>((resolve) => {
 				dirReader.readEntries(async (entries) => {
 					if (entries.length === 0) {
-						resolve(files)
+						resolve(filesArr)
 						return
 					}
 
@@ -113,7 +135,7 @@
 						return traverseFileTree(entry, path + dirEntry.name + '/')
 					})
 					const nestedFiles = await Promise.all(filePromises)
-					files.push(...nestedFiles.flat())
+					filesArr.push(...nestedFiles.flat())
 					// readEntries only return up to 100 files
 					// continue reading if more files exist
 					resolve(await readEntries())
@@ -141,8 +163,8 @@
 			if (folderOnly) {
 				const item = event.dataTransfer.items[0]?.webkitGetAsEntry()
 				if (item) {
-					const files = await traverseFileTree(item, '')
-					onChange(files)
+					const droppedFiles = await traverseFileTree(item, '')
+					handleFileChange(droppedFiles)
 				}
 			} else {
 				if (event.dataTransfer.files && event.dataTransfer.files.length) {
@@ -150,7 +172,7 @@
 						sendUserToast('Only one file can be uploaded at a time')
 						return
 					} else {
-						onChange(Array.from(event.dataTransfer.files))
+						handleFileChange(Array.from(event.dataTransfer.files))
 					}
 				}
 			}
@@ -173,9 +195,9 @@
 			if (returnFileNames) {
 				converted = converted.map((c, i) => ({ name: files![i].name, data: c }))
 			}
-			dispatch('change', converted)
+			onChange?.(converted)
 		} else {
-			dispatch('change', files)
+			onChange?.(files)
 		}
 	}
 
@@ -194,10 +216,10 @@
 		duration-200 px-1 py-8`,
 		c
 	)}
-	on:dragover={handleDragOver}
-	on:drop={handleDrop}
-	on:pointerdown={handlePointerDown}
-	on:click={(e) => {
+	ondragover={handleDragOver}
+	ondrop={handleDrop}
+	onpointerdown={handlePointerDown}
+	onclick={(e) => {
 		const deltaX = Math.abs(e.clientX - pointerStartX)
 		const deltaY = Math.abs(e.clientY - pointerStartY)
 		if (deltaX > 5 || deltaY > 5) {
@@ -214,11 +236,13 @@
 	{/if}
 	{#if files}
 		<div class="w-full max-h-full overflow-auto px-6">
-			<slot name="selected-title">
+			{#if selected_title}
+				{@render selected_title()}
+			{:else}
 				<div class="text-center mb-2 px-2">
 					{submittedText ? submittedText : `Selected file${files.length > 1 ? 's' : ''}`}:
 				</div>
-			</slot>
+			{/if}
 			<ul class="relative z-20 max-w-[500px] bg-surface rounded-lg overflow-hidden mx-auto">
 				{#each files as { name }, i}
 					<li
@@ -232,7 +256,7 @@
 							iconOnly
 							btnClasses="bg-transparent"
 							startIcon={{ icon: Trash }}
-							on:click={() => removeFile(i)}
+							onclick={() => removeFile(i)}
 							destructive
 						/>
 					</li>
@@ -240,9 +264,11 @@
 			</ul>
 		</div>
 	{:else}
-		<slot>
+		{#if children}
+			{@render children()}
+		{:else}
 			<span>Drag and drop {folderOnly ? 'a folder' : multiple ? 'files' : 'a file'}</span>
-		</slot>
+		{/if}
 	{/if}
 	<input
 		class="!absolute !inset-0 !z-10 !opacity-0 !cursor-pointer"
@@ -250,12 +276,11 @@
 		{...{ webkitdirectory: folderOnly }}
 		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
 		bind:this={input}
-		on:change={({ currentTarget }) => {
-			onChange(currentTarget.files ? Array.from(currentTarget.files) : null)
+		onchange={({ currentTarget }) => {
+			handleFileChange(currentTarget.files ? Array.from(currentTarget.files) : null)
 		}}
 		{accept}
 		{multiple}
-		{...$$restProps}
 	/>
 	{#if defaultFile && (!Array.isArray(defaultFile) || defaultFile.length > 0)}
 		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-primary mt-2">
diff --git a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
index f0ce068ea7..637bb9508a 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
@@ -415,7 +415,7 @@
 		multiple={allowMultiple}
 		returnFileNames
 		{iconSize}
-		on:change={({ detail }) => {
+		onChange={(detail) => {
 			forceDisplayUploads = false
 			handleChange(detail)
 		}}
diff --git a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
index eaf3adcb20..2a7de694aa 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
@@ -6,12 +6,16 @@
 	import { X } from 'lucide-svelte'
 	import FileUpload from './FileUpload.svelte'
 
-	export let title: string
-	export let open: boolean = false
 
-	export let fileKey: string | undefined = undefined
+	interface Props {
+		title: string;
+		open?: boolean;
+		fileKey?: string | undefined;
+	}
 
-	let s3Folder: string = ''
+	let { title, open = false, fileKey = $bindable(undefined) }: Props = $props();
+
+	let s3Folder: string = $state('')
 	const dispatch = createEventDispatcher()
 
 	function fadeFast(node: HTMLElement) {
diff --git a/frontend/src/lib/components/common/layout/ListElement.svelte b/frontend/src/lib/components/common/layout/ListElement.svelte
index 891079ce42..f865305c9e 100644
--- a/frontend/src/lib/components/common/layout/ListElement.svelte
+++ b/frontend/src/lib/components/common/layout/ListElement.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="w-full flex-grow bg-blue-300">
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/common/menu/MenuItem.svelte b/frontend/src/lib/components/common/menu/MenuItem.svelte
index 4c3d50643c..99d14826e1 100644
--- a/frontend/src/lib/components/common/menu/MenuItem.svelte
+++ b/frontend/src/lib/components/common/menu/MenuItem.svelte
@@ -1,11 +1,22 @@
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click class="py-1">
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={bubble('click')} class="py-1">
 	<span
 		class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 		role="menuitem"
 		tabindex="-1"
 	>
-		<slot />
+		{@render children?.()}
 	</span>
 </div>
diff --git a/frontend/src/lib/components/common/menu/ResolveOpen.svelte b/frontend/src/lib/components/common/menu/ResolveOpen.svelte
index ec32904a3e..ed9e806bb1 100644
--- a/frontend/src/lib/components/common/menu/ResolveOpen.svelte
+++ b/frontend/src/lib/components/common/menu/ResolveOpen.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
-	import { createEventDispatcher } from 'svelte'
+	interface Props {
+		open?: boolean;
+		onOpen?: () => void;
+		onClose?: () => void;
+	}
 
-	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
-	export let open: boolean = false
+	let { open = false, onOpen = undefined, onClose = undefined }: Props = $props();
 
-	$: dispatchIfMounted(open ? 'open' : 'close')
+	$effect(() => {
+		if (open) {
+			onOpen?.()
+		} else {
+			onClose?.()
+		}
+	});
 </script>
diff --git a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
index c4049802fc..399e926a58 100644
--- a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
+++ b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
@@ -7,13 +7,19 @@
 	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '$lib/components/apps/types'
 
-	export let title: string
-	export let style: string = ''
-	export let css: any = {}
+	interface Props {
+		title: string
+		style?: string
+		css?: any
+		class?: string
+		children?: import('svelte').Snippet
+	}
+
+	let { title, style = '', css = {}, class: c = '', children }: Props = $props()
 
 	const { mode } = getContext<AppViewerContext>('AppViewerContext')
 
-	let isOpen = false
+	let isOpen = $state(false)
 
 	export function close() {
 		isOpen = false
@@ -41,16 +47,13 @@
 					css?.popup?.class,
 					'wm-modal-form-popup'
 				)}
-				use:clickOutside
-				on:click_outside={() => {
-					close()
-				}}
+				use:clickOutside={{ onClickOutside: () => close() }}
 			>
 				<div class="px-4 py-2 border-b flex justify-between items-center">
 					<div>{title}</div>
 					<div class="w-8">
 						<button
-							on:click={() => {
+							onclick={() => {
 								isOpen = false
 							}}
 							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
@@ -60,17 +63,17 @@
 					</div>
 				</div>
 
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class="relative bg-surface rounded-md" on:click|stopPropagation={() => {}}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="relative bg-surface rounded-md" onclick={(e) => e.stopPropagation()}>
 					<div
 						class={twMerge(
 							'max-w-screen-lg max-h-screen-80 overflow-auto flex flex-col',
-							$$props.class
+							c
 						)}
 						{style}
 					>
-						<slot />
+						{@render children?.()}
 					</div>
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/common/modal/Modal2.svelte b/frontend/src/lib/components/common/modal/Modal2.svelte
index 540350addb..19ed59268c 100644
--- a/frontend/src/lib/components/common/modal/Modal2.svelte
+++ b/frontend/src/lib/components/common/modal/Modal2.svelte
@@ -7,14 +7,31 @@
 	import List from '$lib/components/common/layout/List.svelte'
 	import { fade } from 'svelte/transition'
 
-	export let title: string
+	interface Props {
+		title: string
+		css?: any
+		target?: string
+		isOpen?: boolean
+		fixedWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+		fixedHeight?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+		contentClasses?: string
+		header_left?: import('svelte').Snippet
+		header_right?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
 
-	export let css: any = {}
-	export let target: string = ''
-	export let isOpen = false
-	export let fixedWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md'
-	export let fixedHeight: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md'
-	export let contentClasses: string = ''
+	let {
+		title,
+		css = {},
+		target = '',
+		isOpen = $bindable(false),
+		fixedWidth = 'md',
+		fixedHeight = 'md',
+		contentClasses = '',
+		header_left,
+		header_right,
+		children
+	}: Props = $props()
 
 	const widthMap = {
 		xs: '400px',
@@ -54,7 +71,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />
 
 {#if isOpen}
 	<Portal name="always-mounted" {target}>
@@ -72,10 +89,7 @@
 						css?.popup?.class,
 						'wm-modal-form-popup'
 					)}
-					use:clickOutside
-					on:click_outside={() => {
-						close()
-					}}
+					use:clickOutside={{ onClickOutside: () => close() }}
 				>
 					<List gap="md">
 						<div class="flex w-full">
@@ -84,15 +98,15 @@
 								<div class="grow w-min-0">
 									<List horizontal justify="between">
 										<div class="min-w-0 grow">
-											<slot name="header-left" />
+											{@render header_left?.()}
 										</div>
 										<div class="min-w-0 grow-0 justify-end">
 											<List horizontal justify="end">
-												<slot name="header-right" />
+												{@render header_right?.()}
 												<div class="w-8">
 													<button
 														id="modal-close-button"
-														on:click={() => {
+														onclick={() => {
 															close()
 														}}
 														class="hover:bg-surface-hover rounded-full w-8 h-8 flex items-center justify-center transition-all"
@@ -107,13 +121,13 @@
 							</List>
 						</div>
 
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class="w-full flex grow min-h-0 {contentClasses}"
-							on:click|stopPropagation={() => {}}
+							onclick={(e) => e.stopPropagation()}
 						>
-							<slot />
+							{@render children?.()}
 						</div>
 					</List>
 				</div>
diff --git a/frontend/src/lib/components/common/stepper/Stepper.svelte b/frontend/src/lib/components/common/stepper/Stepper.svelte
index 2bdb1079db..bbd6b1afe4 100644
--- a/frontend/src/lib/components/common/stepper/Stepper.svelte
+++ b/frontend/src/lib/components/common/stepper/Stepper.svelte
@@ -3,12 +3,23 @@
 	import { Loader2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let tabs: string[]
-	export let selectedIndex: number = 0
-	export let maxReachedIndex: number = -1
-	export let statusByStep: Array<'success' | 'error' | 'pending'> = []
-	export let hasValidations: boolean = false
-	export let allowStepNavigation: boolean = false
+	interface Props {
+		tabs: string[];
+		selectedIndex?: number;
+		maxReachedIndex?: number;
+		statusByStep?: Array<'success' | 'error' | 'pending'>;
+		hasValidations?: boolean;
+		allowStepNavigation?: boolean;
+	}
+
+	let {
+		tabs,
+		selectedIndex = 0,
+		maxReachedIndex = -1,
+		statusByStep = [],
+		hasValidations = false,
+		allowStepNavigation = false
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 
@@ -54,14 +65,14 @@
 <div class="flex justify-between">
 	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-primary">
 		{#each tabs ?? [] as step, index}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<li
 				class={classNames(
 					'flex items-center gap-2 px-2 py-1 hover:bg-gray-1200 rounded-md m-0.5',
 					index <= maxReachedIndex || allowStepNavigation ? 'cursor-pointer' : 'cursor-not-allowed'
 				)}
-				on:click={() => {
+				onclick={() => {
 					dispatch('click', { index })
 				}}
 			>
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index 529b50ea0b..9f464cf6b4 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -26,7 +26,7 @@
 		Copy
 	} from 'lucide-svelte'
 	import { goto as gotoUrl } from '$app/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import type DeployWorkspaceDrawer from '$lib/components/DeployWorkspaceDrawer.svelte'
 	import { DELETE, copyToClipboard } from '$lib/utils'
 	import AppDeploymentHistory from '$lib/components/apps/editor/AppDeploymentHistory.svelte'
@@ -234,9 +234,9 @@
 											path
 										})
 										let url =
-											$page.url.protocol +
+											page.url.protocol +
 											'//' +
-											`${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`
+											`${page.url.hostname}/public/${$workspaceStore}/${secretUrl}`
 										gotoUrl(url)
 									}
 								}
@@ -283,7 +283,7 @@
 					}
 				]
 			}}
-			on:open={() => {
+			onOpen={() => {
 				menuOpen = true
 			}}
 		/>
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index 9cfa55f948..e52bc5097b 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -302,7 +302,7 @@
 					}
 				]
 			}}
-			on:open={() => {
+			onOpen={() => {
 				menuOpen = true
 			}}
 		/>
diff --git a/frontend/src/lib/components/common/table/RawAppRow.svelte b/frontend/src/lib/components/common/table/RawAppRow.svelte
index 76019553f1..833e69221d 100644
--- a/frontend/src/lib/components/common/table/RawAppRow.svelte
+++ b/frontend/src/lib/components/common/table/RawAppRow.svelte
@@ -69,7 +69,7 @@
 					}
 				]
 			}}
-			on:open={() => {
+			onOpen={() => {
 				menuOpen = true
 			}}
 		/>
diff --git a/frontend/src/lib/components/common/table/RowIcon.svelte b/frontend/src/lib/components/common/table/RowIcon.svelte
index 80566800ff..6e78a789da 100644
--- a/frontend/src/lib/components/common/table/RowIcon.svelte
+++ b/frontend/src/lib/components/common/table/RowIcon.svelte
@@ -17,7 +17,10 @@
 		Unplug
 	} from 'lucide-svelte'
 
-	export let kind:
+
+	
+	interface Props {
+		kind: 
 		| 'script'
 		| 'flow'
 		| 'app'
@@ -36,13 +39,15 @@
 		| 'nats'
 		| 'mqtt'
 		| 'sqs'
-		| 'gcp'
+		| 'gcp';
+		/** For 'trigger' kind, specifies the specific trigger type (routes, schedules, etc.) */
+		triggerKind?: string | undefined;
+	}
 
-	/** For 'trigger' kind, specifies the specific trigger type (routes, schedules, etc.) */
-	export let triggerKind: string | undefined = undefined
+	let { kind, triggerKind = undefined }: Props = $props();
 
 	// Use triggerKind if kind is 'trigger' and triggerKind is provided
-	$: effectiveKind = kind === 'trigger' && triggerKind ? triggerKind : kind
+	let effectiveKind = $derived(kind === 'trigger' && triggerKind ? triggerKind : kind)
 </script>
 
 <div class="flex justify-center items-center" title={effectiveKind}>
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index 42587a5a4d..e752a97d7e 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -379,7 +379,7 @@
 						: [])
 				]
 			}}
-			on:open={() => {
+			onOpen={() => {
 				menuOpen = true
 			}}
 		/>
diff --git a/frontend/src/lib/components/common/table/Table.svelte b/frontend/src/lib/components/common/table/Table.svelte
index b0e99bc9e1..0e6b72658a 100644
--- a/frontend/src/lib/components/common/table/Table.svelte
+++ b/frontend/src/lib/components/common/table/Table.svelte
@@ -1,8 +1,16 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="flex flex-col">
 	<div class="overflow-hidden rounded-md border">
 		<table class="min-w-full divide-y divide-gray-300">
 			<tbody class="divide-y bg-surface">
-				<slot />
+				{@render children?.()}
 			</tbody>
 		</table>
 	</div>
diff --git a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
index f80d6cf537..f3c2489eb9 100644
--- a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
+++ b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
@@ -4,9 +4,13 @@
 	import Modal from '../common/modal/Modal.svelte'
 	import Portal from '../Portal.svelte'
 
-	export let open = false
 
-	export let inputs: string[] = []
+	interface Props {
+		open?: boolean;
+		inputs?: string[];
+	}
+
+	let { open = $bindable(false), inputs = [] }: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -27,16 +31,18 @@
 			{/each}
 		</ul>
 
-		<Button
-			slot="actions"
-			on:click={() => {
-				open = false
-				dispatch('confirmed')
-			}}
-			color="light"
-			size="sm"
-		>
-			<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
-		</Button>
+		{#snippet actions()}
+				<Button
+				
+				on:click={() => {
+					open = false
+					dispatch('confirmed')
+				}}
+				color="light"
+				size="sm"
+			>
+				<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
+			</Button>
+			{/snippet}
 	</Modal>
 </Portal>
diff --git a/frontend/src/lib/components/copilot/RegexGen.svelte b/frontend/src/lib/components/copilot/RegexGen.svelte
index faf6406c2a..b716e48385 100644
--- a/frontend/src/lib/components/copilot/RegexGen.svelte
+++ b/frontend/src/lib/components/copilot/RegexGen.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { base } from '$lib/base'
 	import { Button } from '../common'
 
@@ -12,10 +14,10 @@
 	import { copilotInfo } from '$lib/aiStore'
 
 	// state
-	let funcDesc: string = ''
-	let genLoading: boolean = false
-	let input: HTMLInputElement | undefined
-	let abortController: AbortController | undefined = undefined
+	let funcDesc: string = $state('')
+	let genLoading: boolean = $state(false)
+	let input: HTMLInputElement | undefined = $state()
+	let abortController: AbortController | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 	async function onGenerate() {
@@ -51,9 +53,11 @@
 		}
 	}
 
-	$: input && setTimeout(() => input?.focus(), 100)
+	run(() => {
+		input && setTimeout(() => input?.focus(), 100)
+	});
 
-	let promptHistory: string[] = JSON.parse(getPromptsRegex() || '[]')
+	let promptHistory: string[] = $state(JSON.parse(getPromptsRegex() || '[]'))
 
 	function getPromptsRegex(): string | undefined {
 		try {
@@ -98,83 +102,87 @@
 		]
 	}}
 >
-	<svelte:fragment slot="trigger">
-		<Button
-			title="Generate regexes from prompt"
-			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
-			size="sm"
-			color={genLoading ? 'red' : 'light'}
-			spacingSize="md"
-			startIcon={{ icon: Wand2 }}
-			loading={genLoading}
-			propagateEvent
-			clickableWhileLoading
-			on:click={genLoading ? () => abortController?.abort() : () => {}}
-		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content" let:close>
-		<div class="block text-primary p-4">
-			{#if $copilotInfo.enabled}
-				<div class="flex flex-col gap-4">
-					<div class="flex w-96">
-						<input
-							type="text"
-							bind:this={input}
-							bind:value={funcDesc}
-							on:keypress={({ key }) => {
+	{#snippet trigger()}
+	
+			<Button
+				title="Generate regexes from prompt"
+				btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
+				size="sm"
+				color={genLoading ? 'red' : 'light'}
+				spacingSize="md"
+				startIcon={{ icon: Wand2 }}
+				loading={genLoading}
+				propagateEvent
+				clickableWhileLoading
+				on:click={genLoading ? () => abortController?.abort() : () => {}}
+			/>
+		
+	{/snippet}
+	{#snippet content({ close })}
+	
+			<div class="block text-primary p-4">
+				{#if $copilotInfo.enabled}
+					<div class="flex flex-col gap-4">
+						<div class="flex w-96">
+							<input
+								type="text"
+								bind:this={input}
+								bind:value={funcDesc}
+								onkeypress={({ key }) => {
 								if (key === 'Enter' && funcDesc?.length > 0) {
 									close()
 									onGenerate()
 								}
 							}}
-							placeholder={'Describe what the regex should doww'}
-						/>
-						<Button
-							size="xs"
-							color="light"
-							buttonType="button"
-							btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
-							aria-label="Generate"
-							on:click={() => {
-								close()
-								onGenerate()
-							}}
-							disabled={funcDesc?.length <= 0}
-							iconOnly
-							startIcon={{ icon: Wand2 }}
-						/>
-					</div>
-					{#if promptHistory.length > 0}
-						<div class="w-96 flex flex-col gap-1">
-							{#each promptHistory as p}
-								<Button
-									size="xs2"
-									color="light"
-									btnClasses="justify-start overflow-x-scroll no-scrollbar"
-									startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
-									on:click={() => {
-										funcDesc = p
-									}}>{p}</Button
-								>
-							{/each}
-							<button
-								class="underline text-xs text-start px-2 text-secondary font-normal"
-								on:click={clearPromptHistory}>clear history</button
-							>
+								placeholder={'Describe what the regex should doww'}
+							/>
+							<Button
+								size="xs"
+								color="light"
+								buttonType="button"
+								btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
+								aria-label="Generate"
+								on:click={() => {
+									close()
+									onGenerate()
+								}}
+								disabled={funcDesc?.length <= 0}
+								iconOnly
+								startIcon={{ icon: Wand2 }}
+							/>
 						</div>
-					{/if}
-				</div>
-			{:else}
-				<p class="text-sm">
-					Enable Windmill AI in the <a
-						href="{base}/workspace_settings?tab=ai"
-						target="_blank"
-						class="inline-flex flex-row items-center gap-1"
-					>
-						workspace settings <ExternalLink size={16} />
-					</a>
-				</p>
-			{/if}
-		</div>
-	</svelte:fragment>
+						{#if promptHistory.length > 0}
+							<div class="w-96 flex flex-col gap-1">
+								{#each promptHistory as p}
+									<Button
+										size="xs2"
+										color="light"
+										btnClasses="justify-start overflow-x-scroll no-scrollbar"
+										startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
+										on:click={() => {
+											funcDesc = p
+										}}>{p}</Button
+									>
+								{/each}
+								<button
+									class="underline text-xs text-start px-2 text-secondary font-normal"
+									onclick={clearPromptHistory}>clear history</button
+								>
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<p class="text-sm">
+						Enable Windmill AI in the <a
+							href="{base}/workspace_settings?tab=ai"
+							target="_blank"
+							class="inline-flex flex-row items-center gap-1"
+						>
+							workspace settings <ExternalLink size={16} />
+						</a>
+					</p>
+				{/if}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte
index fc62e1d27b..2deaef0193 100644
--- a/frontend/src/lib/components/copilot/ScriptFix.svelte
+++ b/frontend/src/lib/components/copilot/ScriptFix.svelte
@@ -28,38 +28,42 @@
 		}}
 		displayArrow={true}
 	>
-		<svelte:fragment slot="trigger">
-			<div class="flex flex-row">
-				<Button
-					title="Fix code"
-					size="xs"
-					color="light"
-					spacingSize="xs2"
-					startIcon={{ icon: WandSparkles }}
-					on:click={() => {
-						if ($copilotInfo.enabled) {
-							aiChatManager.fix()
-						}
-					}}
-					btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
-					propagateEvent={!$copilotInfo.enabled}
-				>
-					AI Fix
-				</Button>
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content">
-			<div class="p-4">
-				<div class="w-80">
-					<p class="text-sm"
-						>Enable Windmill AI in the <a
-							class="inline-flex flex-row items-center gap-1"
-							href="{base}/workspace_settings?tab=ai"
-							target="_blank">workspace settings</a
-						></p
-					></div
-				>
-			</div>
-		</svelte:fragment>
+		{#snippet trigger()}
+			
+				<div class="flex flex-row">
+					<Button
+						title="Fix code"
+						size="xs"
+						color="light"
+						spacingSize="xs2"
+						startIcon={{ icon: WandSparkles }}
+						on:click={() => {
+							if ($copilotInfo.enabled) {
+								aiChatManager.fix()
+							}
+						}}
+						btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
+						propagateEvent={!$copilotInfo.enabled}
+					>
+						AI Fix
+					</Button>
+				</div>
+			
+			{/snippet}
+		{#snippet content()}
+			
+				<div class="p-4">
+					<div class="w-80">
+						<p class="text-sm"
+							>Enable Windmill AI in the <a
+								class="inline-flex flex-row items-center gap-1"
+								href="{base}/workspace_settings?tab=ai"
+								target="_blank">workspace settings</a
+							></p
+						></div
+					>
+				</div>
+			
+			{/snippet}
 	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/copilot/chat/AIChat.svelte b/frontend/src/lib/components/copilot/chat/AIChat.svelte
index ff31146391..007675d0bf 100644
--- a/frontend/src/lib/components/copilot/chat/AIChat.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChat.svelte
@@ -71,7 +71,7 @@
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
 			e.preventDefault()
 			aiChatManager.toggleOpen()
diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index 9b609b9095..140f20f140 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -121,55 +121,59 @@
 		</div>
 		<div class="flex flex-row items-center gap-2">
 			<Popover>
-				<svelte:fragment slot="trigger">
-					<Button
-						on:click={() => {}}
-						title="History"
-						size="md"
-						btnClasses="!p-1"
-						startIcon={{ icon: HistoryIcon }}
-						iconOnly
-						variant="border"
-						color="light"
-						propagateEvent
-					/>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
-					<div class="p-1 overflow-y-auto max-h-[300px]">
-						{#if pastChats.length === 0}
-							<div class="text-center text-primary text-xs">No history</div>
-						{:else}
-							<div class="flex flex-col">
-								{#each pastChats as chat}
-									<button
-										class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
-										onclick={() => {
-											loadPastChat(chat.id)
-											close()
-										}}
-									>
-										<div
-											class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
-											title={chat.title}
-										>
-											{chat.title}
-										</div>
-										<Button
-											iconOnly
-											size="xs2"
-											btnClasses="!p-1"
-											variant="default"
-											startIcon={{ icon: X }}
-											on:click={() => {
-												deletePastChat(chat.id)
+				{#snippet trigger()}
+							
+						<Button
+							on:click={() => {}}
+							title="History"
+							size="md"
+							btnClasses="!p-1"
+							startIcon={{ icon: HistoryIcon }}
+							iconOnly
+							variant="border"
+							color="light"
+							propagateEvent
+						/>
+					
+							{/snippet}
+				{#snippet content({ close })}
+							
+						<div class="p-1 overflow-y-auto max-h-[300px]">
+							{#if pastChats.length === 0}
+								<div class="text-center text-primary text-xs">No history</div>
+							{:else}
+								<div class="flex flex-col">
+									{#each pastChats as chat}
+										<button
+											class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
+											onclick={() => {
+												loadPastChat(chat.id)
+												close()
 											}}
-										/>
-									</button>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				</svelte:fragment>
+										>
+											<div
+												class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
+												title={chat.title}
+											>
+												{chat.title}
+											</div>
+											<Button
+												iconOnly
+												size="xs2"
+												btnClasses="!p-1"
+												variant="default"
+												startIcon={{ icon: X }}
+												on:click={() => {
+													deletePastChat(chat.id)
+												}}
+											/>
+										</button>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					
+							{/snippet}
 			</Popover>
 			<Button
 				title="New chat"
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index 6765a5bb7b..ae91817868 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -363,26 +363,30 @@
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-							onSelectWorkspaceItem={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+									
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+									{/snippet}
+					{#snippet content({ close })}
+									
+							<AvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+								onSelectWorkspaceItem={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+									{/snippet}
 				</Popover>
 				{#each selectedContext as element}
 					<ContextElementBadge
@@ -418,22 +422,26 @@
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AppAvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+											
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+											{/snippet}
+					{#snippet content({ close })}
+											
+							<AppAvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+											{/snippet}
 				</Popover>
 				{#each selectedContext as element (element.type + '-' + element.title)}
 					<ContextElementBadge
diff --git a/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte b/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
index 2e90d4c2a2..b14a4aeac0 100644
--- a/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
+++ b/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
@@ -5,7 +5,11 @@
 	import CodeDisplay from './script/CodeDisplay.svelte'
 	import LinkRenderer from './LinkRenderer.svelte'
 
-	export let message: DisplayMessage
+	interface Props {
+		message: DisplayMessage;
+	}
+
+	let { message }: Props = $props();
 </script>
 
 <div
diff --git a/frontend/src/lib/components/copilot/chat/ChatMode.svelte b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
index 045fe5d37c..8bb0ab5c0d 100644
--- a/frontend/src/lib/components/copilot/chat/ChatMode.svelte
+++ b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
@@ -12,39 +12,43 @@
 		).length < 2}
 		class="max-w-full"
 	>
-		<svelte:fragment slot="trigger">
-			<div
-				class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
-			>
-				<span class={`truncate`}>
-					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
-				</span>
-				{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
-					<div class="shrink-0">
-						<ChevronDown size={16} />
-					</div>
-				{/if}
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content" let:close>
-			<div class="flex flex-col gap-1 p-1 min-w-24">
-				{#each Object.values(AIMode) as possibleMode}
-					{#if aiChatManager.allowedModes[possibleMode]}
-						<button
-							class={twMerge(
-								'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
-								aiChatManager.mode === possibleMode && 'bg-surface-hover'
-							)}
-							onclick={() => {
-								aiChatManager.changeMode(possibleMode)
-								close()
-							}}
-						>
-							{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
-						</button>
+		{#snippet trigger()}
+			
+				<div
+					class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+				>
+					<span class={`truncate`}>
+						{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
+					</span>
+					{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
+						<div class="shrink-0">
+							<ChevronDown size={16} />
+						</div>
 					{/if}
-				{/each}
-			</div>
-		</svelte:fragment>
+				</div>
+			
+			{/snippet}
+		{#snippet content({ close })}
+			
+				<div class="flex flex-col gap-1 p-1 min-w-24">
+					{#each Object.values(AIMode) as possibleMode}
+						{#if aiChatManager.allowedModes[possibleMode]}
+							<button
+								class={twMerge(
+									'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+									aiChatManager.mode === possibleMode && 'bg-surface-hover'
+								)}
+								onclick={() => {
+									aiChatManager.changeMode(possibleMode)
+									close()
+								}}
+							>
+								{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
+							</button>
+						{/if}
+					{/each}
+				</div>
+			
+			{/snippet}
 	</Popover>
 </div>
diff --git a/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte b/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte
index 529d6d55a9..a71f177542 100644
--- a/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte
+++ b/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte
@@ -18,20 +18,22 @@
 </script>
 
 <Modal bind:open title="AI Changes Will Be Lost">
-	<div slot="title" class="flex items-center gap-2">
-		<AlertTriangleIcon size={20} class="text-orange-500" />
-		AI Changes Will Be Lost
-	</div>
 	<div class="py-4">
+		<div class="flex items-center gap-2 mb-3">
+			<AlertTriangleIcon size={20} class="text-orange-500" />
+			<span class="font-medium">Warning</span>
+		</div>
 		<p class="text-gray-700 dark:text-gray-300">
 			You have pending AI changes that will be rejected when saving. Do you want to continue?
 		</p>
 	</div>
-	<div slot="actions">
-		<div class="flex gap-2 justify-end">
-			<Button variant="contained" color="red" on:click={handleConfirm}>
-				Reject changes and save
-			</Button>
+	{#snippet actions()}
+		<div>
+			<div class="flex gap-2 justify-end">
+				<Button variant="contained" color="red" onclick={handleConfirm}>
+					Reject changes and save
+				</Button>
+			</div>
 		</div>
-	</div>
+	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/details/ClipboardPanel.svelte b/frontend/src/lib/components/details/ClipboardPanel.svelte
index 289c7da416..625373a120 100644
--- a/frontend/src/lib/components/details/ClipboardPanel.svelte
+++ b/frontend/src/lib/components/details/ClipboardPanel.svelte
@@ -4,27 +4,32 @@
 	import { twMerge } from 'tailwind-merge'
 	import { inputSizeClasses } from '../text_input/TextInput.svelte'
 
-	export let content: string
-	export let title: string | undefined = undefined
-	export let size: 'sm' | 'md' = 'md'
-	export let disabled = false
+	interface Props {
+		content: string
+		title?: string | undefined
+		size?: 'sm' | 'md'
+		disabled?: boolean
+		class?: string
+	}
+
+	let { content, title = undefined, size = 'md', disabled = false, class: c = '' }: Props = $props()
 </script>
 
 {#if title !== undefined}
 	<div class="text-xs font-semibold">{title}</div>
 {/if}
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={twMerge(
 		'grow min-w-0 w-full border flex items-center bg-surface-secondary hover:opacity-60 transition-opacity text-primary justify-between rounded-md',
 		inputSizeClasses[size],
-		$$props.class
+		c
 	)}
 	class:cursor-not-allowed={disabled}
 	class:cursor-pointer={!disabled}
-	on:click={(e) => {
+	onclick={(e) => {
 		if (disabled) {
 			return
 		}
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
index bb9aee5987..9c0b964c9f 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
@@ -7,10 +7,19 @@
 	import { workspaceStore } from '$lib/stores'
 	import Tooltip from '../Tooltip.svelte'
 
-	export let kind: 'script' | 'flow'
-	export let scriptOrFlowPath: string
-	export let errorHandlerMuted: boolean | undefined
-	export let iconOnly: boolean = true
+	interface Props {
+		kind: 'script' | 'flow';
+		scriptOrFlowPath: string;
+		errorHandlerMuted: boolean | undefined;
+		iconOnly?: boolean;
+	}
+
+	let {
+		kind,
+		scriptOrFlowPath,
+		errorHandlerMuted = $bindable(),
+		iconOnly = true
+	}: Props = $props();
 
 	async function toggleErrorHandler(): Promise<void> {
 		if ($workspaceStore !== undefined) {
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
index ea1d610918..d216da06cc 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
@@ -5,13 +5,23 @@
 	import { sendUserToast } from '$lib/toast'
 	import { workspaceStore } from '$lib/stores'
 
-	export let kind: 'script' | 'flow'
-	export let scriptOrFlowPath: string
-	export let errorHandlerMuted: boolean | undefined
-	export let textDisabled = false
-	let toggleState = errorHandlerMuted
+	let toggleState = $state(errorHandlerMuted)
 
-	export let color: 'nord' | 'red' | 'blue' | undefined = undefined
+	interface Props {
+		kind: 'script' | 'flow';
+		scriptOrFlowPath: string;
+		errorHandlerMuted: boolean | undefined;
+		textDisabled?: boolean;
+		color?: 'nord' | 'red' | 'blue' | undefined;
+	}
+
+	let {
+		kind,
+		scriptOrFlowPath,
+		errorHandlerMuted = $bindable(),
+		textDisabled = false,
+		color = undefined
+	}: Props = $props();
 
 	async function toggleErrorHandler(): Promise<void> {
 		toggleState = !toggleState
diff --git a/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte b/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte
index 4d9b003d81..7e4d755657 100644
--- a/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte
@@ -51,7 +51,10 @@
 	/>
 {:else if isMcpTool(tool)}
 	<!-- MCP tool - use McpToolEditor -->
-	<McpToolEditor bind:tool={tool as McpTool} />
+	<McpToolEditor bind:tool={
+		() => tool as McpTool,
+		(v) => (tool = v)
+	} />
 {:else if isWebsearchTool(tool)}
 	<WebsearchToolDisplay />
 {/if}
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index cdaf75abf2..93bfd2d533 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -3,7 +3,8 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { ChevronDown } from 'lucide-svelte'
 
-	$: opened = false
+	let opened = $state(false);
+	
 </script>
 
 <div class="text-xs flex flex-row-reverse">
diff --git a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
index d8745aa8d9..69a30dbe84 100644
--- a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
@@ -4,10 +4,14 @@
 	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import type { FlowModule } from '$lib/gen'
 
-	export let noEditor = false
-	export let savedModule: FlowModule | undefined = undefined
+	interface Props {
+		noEditor?: boolean;
+		savedModule?: FlowModule | undefined;
+	}
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	let { noEditor = false, savedModule = undefined }: Props = $props();
+
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 </script>
 
 {#if flowStore.val.value.failure_module}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte b/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte
index 08d08a48c0..34384cc506 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte
@@ -4,7 +4,7 @@
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 	import { Info } from 'lucide-svelte'
 
-	let darkMode = true
+	let darkMode = $state(true)
 
 	function openFullscreen(event: MouseEvent) {
 		const img = event.target as HTMLImageElement
@@ -59,13 +59,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-history-dark.png` : `${base}/pin-history.png`}
 							alt="History picker"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -82,13 +82,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-pin-dark.png` : `${base}/pin-pin.png`}
 							alt="Pin action"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -105,13 +105,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-restore-dark.png` : `${base}/pin-restore.png`}
 							alt="Recover pins"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -129,13 +129,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-flow-view-dark.png` : `${base}/pin-flow-view.png`}
 							alt="Flow view pinning"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
index 31593fbf43..c1c4b5c9de 100644
--- a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import FlowGraphViewer from '$lib/components/FlowGraphViewer.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
@@ -8,10 +10,14 @@
 	import { setContext } from 'svelte'
 	import { writable } from 'svelte/store'
 
-	export let path: string
-	export let noSide = false
+	interface Props {
+		path: string;
+		noSide?: boolean;
+	}
 
-	let flow: Flow | undefined = undefined
+	let { path, noSide = false }: Props = $props();
+
+	let flow: Flow | undefined = $state(undefined)
 
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
@@ -28,7 +34,9 @@
 		)
 	}
 
-	$: path && loadFlow(path)
+	run(() => {
+		path && loadFlow(path)
+	});
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto">
diff --git a/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte b/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
index b074b90685..24534b53db 100644
--- a/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
@@ -4,10 +4,14 @@
 	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import type { FlowModule } from '$lib/gen'
 
-	export let noEditor = false
-	export let savedModule: FlowModule | undefined = undefined
+	interface Props {
+		noEditor?: boolean;
+		savedModule?: FlowModule | undefined;
+	}
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	let { noEditor = false, savedModule = undefined }: Props = $props();
+
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 </script>
 
 {#if flowStore.val.value.preprocessor_module}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 6a9c7f918a..86827e1f5d 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -589,7 +589,10 @@
 				</div>
 				{#if flowStore.val.schema && enableAi}
 					<AIFormSettings
-						bind:prompt={flowStore.val.schema.prompt_for_ai as string | undefined}
+						bind:prompt={
+						() => flowStore.val.schema!.prompt_for_ai as string | undefined,
+						(v) => (flowStore.val.schema!.prompt_for_ai = v)
+					}
 						type="flow"
 					/>
 				{/if}
diff --git a/frontend/src/lib/components/flows/content/GenAiQuick.svelte b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
index 39ae79d0cf..e0e681d568 100644
--- a/frontend/src/lib/components/flows/content/GenAiQuick.svelte
+++ b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { Wand2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let funcDesc: string
-	export let selected: boolean
-	export let lang: string
+	interface Props {
+		funcDesc: string;
+		selected: boolean;
+		lang: string;
+	}
+
+	let { funcDesc, selected, lang }: Props = $props();
 	const dispatch = createEventDispatcher()
 
 	const onKeyDown = (e: KeyboardEvent) => {
@@ -15,12 +22,12 @@
 	}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 <button
 	class="px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md {selected
 		? 'bg-surface-hover'
 		: ''}"
-	on:click
+	onclick={bubble('click')}
 >
 	<Wand2 size={14} class="text-ai" />
 
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index 99ad0c4a9a..067f5de579 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -213,10 +213,13 @@
 					bind:schema={script.schema}
 					{args}
 				>
-					<!-- @migration-task: migrate this slot by hand, `editor_bar_right` is an invalid identifier -->
-					<div slot="editor_bar_right">
-						<WorkerTagSelect bind:tag={script.tag} />
-					</div>
+					{#snippet editor_bar_right()}
+						{#if script}
+							<div>
+								<WorkerTagSelect bind:tag={script.tag} />
+							</div>
+						{/if}
+					{/snippet}
 				</ScriptEditor>
 			{/key}
 		{:else}
diff --git a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
index 209f4d059d..61420feeaf 100644
--- a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
@@ -6,9 +6,13 @@
 	import DrawerContent from '../../common/drawer/DrawerContent.svelte'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 
-	let drawer: Drawer
+	let drawer: Drawer = $state()
 
-	export let text: string = 'Approval Help'
+	interface Props {
+		text?: string;
+	}
+
+	let { text = 'Approval Help' }: Props = $props();
 </script>
 
 <Button
diff --git a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
index 39e232b7b9..a805d3e9f3 100644
--- a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
+++ b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
@@ -4,7 +4,7 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
-	import type { onSelectedIteration } from '$lib/components/graph/graphBuilder.svelte'
+	import type { onSelectedIteration as OnSelectedIterationType } from '$lib/components/graph/graphBuilder.svelte'
 	import { untrack } from 'svelte'
 
 	interface Props {
@@ -14,7 +14,7 @@
 		flowJobsSuccess: (boolean | undefined)[] | undefined
 		selected: number
 		selectedManually: boolean | undefined
-		onSelectedIteration?: onSelectedIteration
+		onSelectedIteration?: OnSelectedIterationType
 		showIcon?: boolean
 	}
 
@@ -104,11 +104,11 @@
 <Menubar>
 	{#snippet children({ createMenu })}
 		<Menu
-			on:open={() => {
+			onOpen={() => {
 				isOpen = true
 				updateItems()
 			}}
-			on:close={() => {
+			onClose={() => {
 				isOpen = false
 			}}
 			{createMenu}
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index f8cdf2c819..0db258dda0 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -9,7 +9,7 @@
 	import FlowJobsMenu from './FlowJobsMenu.svelte'
 	import {
 		isTriggerStep,
-		type onSelectedIteration
+		type onSelectedIteration as OnSelectedIterationType
 	} from '$lib/components/graph/graphBuilder.svelte'
 	import { checkIfParentLoop } from '$lib/components/flows/utils.svelte'
 	import type { FlowEditorContext } from '$lib/components/flows/types'
@@ -37,7 +37,7 @@
 			  }
 			| undefined
 		editMode?: boolean
-		onSelectedIteration: onSelectedIteration
+		onSelectedIteration: OnSelectedIterationType
 		onSelect: (id: string | FlowModule) => void
 		onTestUpTo?: ((id: string) => void) | undefined
 		onUpdateMock?: (detail: {
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
index 70bdd7a831..e93512d456 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
@@ -5,11 +5,21 @@
 	import { sendUserToast } from '$lib/toast'
 	import { createEventDispatcher } from 'svelte'
 
-	export let label: string
-	export let lang: SupportedLanguage | 'docker' | 'javascript' | undefined = undefined
-	export let selected = false
-	export let eeRestricted: boolean
-	export let enterpriseLangs: string[] = []
+	interface Props {
+		label: string;
+		lang?: SupportedLanguage | 'docker' | 'javascript' | undefined;
+		selected?: boolean;
+		eeRestricted: boolean;
+		enterpriseLangs?: string[];
+	}
+
+	let {
+		label,
+		lang = undefined,
+		selected = false,
+		eeRestricted,
+		enterpriseLangs = []
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
@@ -30,7 +40,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <Button
 	id={`flow-editor-new-${lang}`}
diff --git a/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte b/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
index 1729063698..1b0e6ae58a 100644
--- a/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
@@ -2,8 +2,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import TopLevelNode from './TopLevelNode.svelte'
 
-	export let label: string
-	export let selected = false
+	interface Props {
+		label: string;
+		selected?: boolean;
+	}
+
+	let { label, selected = false }: Props = $props();
 	const dispatch = createEventDispatcher()
 	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
 		if (selected && event.key === 'Enter') {
@@ -17,6 +21,6 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <TopLevelNode {label} {selected} returnIcon onSelect={click} />
diff --git a/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte b/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte
index e99112804f..ff4e3cf800 100644
--- a/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte
+++ b/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte
@@ -4,7 +4,11 @@
 	import type { Job } from '$lib/gen'
 	import OutputBadge from './OutputBadge.svelte'
 
-	export let job: Job | undefined
+	interface Props {
+		job: Job | undefined;
+	}
+
+	let { job }: Props = $props();
 </script>
 
 {#if job}
diff --git a/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte b/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte
index b9d2412b30..447bea14d4 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte
@@ -5,17 +5,22 @@
 	import { ExternalLink } from 'lucide-svelte'
 	import { emptyString } from '$lib/utils'
 
-	export let job:
-		| Job
-		| { id: string; result: unknown; type: 'CompletedJob'; success: boolean; workspace_id: string }
-		| undefined = undefined
+	interface Props {
+		job?:
+			| Job
+			| { id: string; result: unknown; type: 'CompletedJob'; success: boolean; workspace_id: string }
+			| undefined
+		class?: string
+	}
+
+	let { job = undefined, class: c = '' }: Props = $props()
 </script>
 
 {#if job}
 	<div
 		class={twMerge(
 			'flex flex-row w-fit items-center justify-between gap-2 rounded-md bg-surface-secondary p-1 px-2 group',
-			$$props.class
+			c
 		)}
 	>
 		<div
diff --git a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
index cdbfe8d153..5bb041391f 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputPicker.svelte
@@ -145,7 +145,7 @@
 					}}
 					usePointerDownOutside
 					closeOnOutsideClick={false}
-					on:click={(e) => {
+					onclick={(e) => {
 						e.preventDefault()
 						e.stopPropagation()
 					}}
@@ -193,7 +193,7 @@
 				}}
 				usePointerDownOutside
 				closeOnOutsideClick={false}
-				on:click={(e) => {
+				onclick={(e) => {
 					e.preventDefault()
 					e.stopPropagation()
 				}}
diff --git a/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte b/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte
index 9da776cb96..15e23f7e1e 100644
--- a/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte
+++ b/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte
@@ -5,7 +5,7 @@
 	import GitSyncSuccessModal from '$lib/components/git_sync/GitSyncSuccessModal.svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	const gitSyncContext = getGitSyncContext()
+	const gitSyncContext = $state(getGitSyncContext())
 
 	function handlePushSuccess() {
 		const pushModal = gitSyncContext.activeModals.push
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 0ad3ca837d..6a55b09e29 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -24,7 +24,7 @@
 		type InlineScript,
 		type InsertKind,
 		type NodeLayout,
-		type onSelectedIteration,
+		type onSelectedIteration as OnSelectedIterationType,
 		type SimplifiableFlow
 	} from './graphBuilder.svelte'
 	import ModuleNode from './renderers/nodes/ModuleNode.svelte'
@@ -150,7 +150,7 @@
 		onMove?: (id: string) => void
 		onUpdateMock?: (detail: { mock: FlowModule['mock']; id: string }) => void
 		onTestUpTo?: ((id: string) => void) | undefined
-		onSelectedIteration?: onSelectedIteration
+		onSelectedIteration?: OnSelectedIterationType
 		onEditInput?: (moduleId: string, key: string) => void
 		onTestFlow?: () => void
 		onCancelTestFlow?: () => void
diff --git a/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte
index a6032a2af1..00d996e271 100644
--- a/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte
+++ b/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { BaseEdge } from '@xyflow/svelte'
-	export let markerEnd: string | undefined = undefined
+	interface Props {
+		markerEnd?: string | undefined;
+	}
+
+	let { markerEnd = undefined }: Props = $props();
 </script>
 
 <BaseEdge path={''} {markerEnd} class="hidden" />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
index 7b144a3fb6..e3a1ce6db5 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
@@ -300,7 +300,9 @@
 				{#if data.asset.kind === 'resource' && cachedResourceMetadata === undefined}
 					<Tooltip class={'pr-1 flex items-center justify-center'}>
 						<AlertTriangle size={16} class="text-orange-500" />
-						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+						{#snippet text()}
+												Could not find resource
+											{/snippet}
 					</Tooltip>
 				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
 					<div transition:slide={{ axis: 'x', duration: 100 }}>
@@ -316,28 +318,30 @@
 					</div>
 				{/if}
 			</div>
-			<svelte:fragment slot="text">
-				{#if usageCount !== undefined}
-					Used in {pluralize(usageCount, 'step')}<br />
-				{/if}
-				<a
-					href={undefined}
-					class={twMerge(
-						'text-xs',
-						data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
-					)}
-					onclick={() => {
-						if (data.asset.kind === 'resource')
-							flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
-					}}
-				>
-					{data.asset.path}
-				</a><br />
-				<span class="text-hint text-xs">
-					{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
-				>
-				<AssetColumnBadges columns={assetColumns} disableTooltip />
-			</svelte:fragment>
+			{#snippet text()}
+					
+					{#if usageCount !== undefined}
+						Used in {pluralize(usageCount, 'step')}<br />
+					{/if}
+					<a
+						href={undefined}
+						class={twMerge(
+							'text-xs',
+							data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
+						)}
+						onclick={() => {
+							if (data.asset.kind === 'resource')
+								flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
+						}}
+					>
+						{data.asset.path}
+					</a><br />
+					<span class="text-hint text-xs">
+						{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
+					>
+					<AssetColumnBadges columns={assetColumns} disableTooltip />
+				
+					{/snippet}
 		</Tooltip>
 	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
index 623a725b01..2660143f95 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
@@ -53,18 +53,22 @@
 			)}
 			placement="top"
 		>
-			<svelte:fragment slot="trigger">
-				+{data.overflowedAssets.length}
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<ul>
-					{#each data.overflowedAssets as asset}
-						<li class="w-48">
-							<AssetNode data={{ asset, displayedAccessType: data.displayedAccessType }} />
-						</li>
-					{/each}
-				</ul>
-			</svelte:fragment>
+			{#snippet trigger()}
+					
+					+{data.overflowedAssets.length}
+				
+					{/snippet}
+			{#snippet content()}
+					
+					<ul>
+						{#each data.overflowedAssets as asset}
+							<li class="w-48">
+								<AssetNode data={{ asset, displayedAccessType: data.displayedAccessType }} />
+							</li>
+						{/each}
+					</ul>
+				
+					{/snippet}
 		</Popover>
 	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
index ef82a1b17d..c518081f1b 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { twMerge } from 'tailwind-merge'
 
-	export let selected: boolean
+	interface Props {
+		selected: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { selected, children }: Props = $props();
 </script>
 
 <button
-	on:click
+	onclick={bubble('click')}
 	class={twMerge(
 		'hover:bg-surface-hover rounded-md border text-xs w-[23px] h-[23px] relative center-center cursor-pointer bg-surface',
 		selected ? 'outline-1 outline-tertiary outline' : 'outline-0'
 	)}
 >
-	<slot />
+	{@render children?.()}
 </button>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
index c08cfcc056..62eadd5d90 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Loader2 } from 'lucide-svelte'
 
-	export let count: number | undefined = undefined
+	interface Props {
+		count?: number | undefined;
+	}
+
+	let { count = undefined }: Props = $props();
 </script>
 
 {#if count && count > 0}
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
index 01485fa519..80a7908a6c 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersBadge.svelte
@@ -192,7 +192,7 @@
 			<Tooltip
 				disablePopup={menuOpen}
 				placement={vertical ? 'right' : 'bottom'}
-				on:click={(e) => e.stopPropagation()}
+				onclick={(e) => e.stopPropagation()}
 			>
 				{#snippet text()}
 					{camelCaseToWords(type)}
@@ -279,7 +279,7 @@
 			isSelected ? 'bg-surface-accent-selected text-accent border-border-selected' : '',
 			small ? 'w-[23px] h-[23px]' : 'p-2'
 		)}
-		on:click={(e) => {
+		onclick={(e) => {
 			e.stopPropagation()
 			e.preventDefault()
 			if (singleItem) {
diff --git a/frontend/src/lib/components/home/FlowIcon.svelte b/frontend/src/lib/components/home/FlowIcon.svelte
index f9822b063f..429cf3dade 100644
--- a/frontend/src/lib/components/home/FlowIcon.svelte
+++ b/frontend/src/lib/components/home/FlowIcon.svelte
@@ -2,9 +2,14 @@
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let color: string = 'black'
+	interface Props {
+		color?: string
+		class?: string
+	}
+
+	let { color = 'black', class: c = '' }: Props = $props()
 </script>
 
-<div class={twMerge(`text-${color}`, $$props.class)}>
+<div class={twMerge(`text-${color}`, c)}>
 	<BarsStaggered size={14} />
 </div>
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index f66e096ecc..263136ca2e 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -31,7 +31,7 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import FlowIcon from './FlowIcon.svelte'
 	import { canWrite, getLocalSetting, storeLocalSetting } from '$lib/utils'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { setQuery } from '$lib/navigation'
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import HighlightCode from '../HighlightCode.svelte'
@@ -73,7 +73,7 @@
 	let filteredItems: (TableScript | TableFlow | TableApp | TableRawApp)[] = $state([])
 
 	let itemKind = $state(
-		($page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
+		(page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
 	)
 
 	let loading = $state(true)
diff --git a/frontend/src/lib/components/home/ListFiltersQuick.svelte b/frontend/src/lib/components/home/ListFiltersQuick.svelte
index 6a36338094..ed80815700 100644
--- a/frontend/src/lib/components/home/ListFiltersQuick.svelte
+++ b/frontend/src/lib/components/home/ListFiltersQuick.svelte
@@ -4,13 +4,16 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from '../common'
 
-	export let filters: string[]
-	export let selectedFilter:
-		| { kind: 'owner' | 'integrations'; name: string | undefined }
-		| undefined = undefined
-	$: selectedAppFilter = selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined
 
-	export let resourceType = false
+	interface Props {
+		filters: string[];
+		selectedFilter?: 
+		| { kind: 'owner' | 'integrations'; name: string | undefined }
+		| undefined;
+		resourceType?: boolean;
+	}
+
+	let { filters, selectedFilter = $bindable(undefined), resourceType = false }: Props = $props();
 
 	function getIconComponent(name: string, resourceType: boolean) {
 		if (resourceType) {
@@ -29,6 +32,7 @@
 	}
 
 	const dispatch = createEventDispatcher()
+	let selectedAppFilter = $derived(selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined)
 </script>
 
 {#if Array.isArray(filters) && filters.length > 0}
diff --git a/frontend/src/lib/components/icons/RubyIcon.svelte b/frontend/src/lib/components/icons/RubyIcon.svelte
index 307fde1a3d..5f2623dddf 100644
--- a/frontend/src/lib/components/icons/RubyIcon.svelte
+++ b/frontend/src/lib/components/icons/RubyIcon.svelte
@@ -24,7 +24,7 @@
 			<cc:Work rdf:about=""
 				><dc:format>image/svg+xml</dc:format>
 				<!-- svelte-ignore element_invalid_self_closing_tag -->
-				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work
+				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type></cc:Work
 			></rdf:RDF
 		></metadata
 	><defs id="defs3489"
@@ -326,7 +326,7 @@
 		guidetolerance="10"
 		id="namedview3487"
 		showgrid="false"
-	/>
+	></sodipodi:namedview>
 	<linearGradient
 		id="XMLID_17_"
 		gradientUnits="userSpaceOnUse"
diff --git a/frontend/src/lib/components/icons/WindmillIcon2.svelte b/frontend/src/lib/components/icons/WindmillIcon2.svelte
index ef4b525998..d4a4d225c1 100644
--- a/frontend/src/lib/components/icons/WindmillIcon2.svelte
+++ b/frontend/src/lib/components/icons/WindmillIcon2.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { run } from 'svelte/legacy'
 
diff --git a/frontend/src/lib/components/meltComponents/MeltButton.svelte b/frontend/src/lib/components/meltComponents/MeltButton.svelte
index 920680f99a..b7825b6514 100644
--- a/frontend/src/lib/components/meltComponents/MeltButton.svelte
+++ b/frontend/src/lib/components/meltComponents/MeltButton.svelte
@@ -2,15 +2,33 @@
 	import { type AnyMeltElement } from '@melt-ui/svelte'
 	import { conditionalMelt } from '$lib/utils'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
+	import type { Snippet } from 'svelte'
 
-	export let aiId: string | undefined = undefined
-	export let aiDescription: string | undefined = undefined
-	export let meltElement: AnyMeltElement | undefined = undefined
-	export let type: 'button' | 'submit' | 'reset' | null | undefined = undefined
-	export let title: string = ''
-	export let id: string | undefined = undefined
+	interface Props {
+		aiId?: string | undefined
+		aiDescription?: string | undefined
+		meltElement?: AnyMeltElement | undefined
+		type?: 'button' | 'submit' | 'reset' | null | undefined
+		title?: string
+		id?: string | undefined
+		class?: string
+		onclick?: (e: MouseEvent) => void
+		children?: Snippet
+	}
 
-	let buttonRef: HTMLButtonElement | undefined = undefined
+	let {
+		aiId = undefined,
+		aiDescription = undefined,
+		meltElement = undefined,
+		type = undefined,
+		title = '',
+		id = undefined,
+		class: className = undefined,
+		onclick: onclickProp = undefined,
+		children
+	}: Props = $props()
+
+	let buttonRef: HTMLButtonElement | undefined = $state(undefined)
 </script>
 
 <button
@@ -23,12 +41,12 @@
 			buttonRef?.click()
 		}
 	}}
-	class={$$props.class}
+	class={className}
 	{type}
 	{title}
 	{id}
 	{...$meltElement}
-	on:click
+	onclick={onclickProp}
 >
-	<slot />
+	{@render children?.()}
 </button>
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
index 47f79262e5..4633512bb7 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { melt, createSync } from '@melt-ui/svelte'
 	import type { MenubarBuilders } from '@melt-ui/svelte'
 	import type { Placement } from '@floating-ui/core'
@@ -26,6 +23,9 @@
 		triggr?: import('svelte').Snippet<[any]>
 		children?: import('svelte').Snippet<[any]>
 		class?: string
+		onOpen?: () => void
+		onClose?: () => void
+		onclick?: (e: MouseEvent) => void
 	}
 
 	let {
@@ -42,7 +42,10 @@
 		renderContent = false,
 		class: classNames = '',
 		triggr,
-		children
+		children,
+		onOpen: onOpenProp = undefined,
+		onClose: onCloseProp = undefined,
+		onclick: onclickProp = undefined
 	}: Props = $props()
 
 	// Use the passed createMenu function
@@ -76,7 +79,7 @@
 </script>
 
 <div class={twMerge('w-full h-8', classNames)}>
-	<ResolveOpen {open} on:open on:close />
+	<ResolveOpen {open} onOpen={onOpenProp} onClose={onCloseProp} />
 
 	<button
 		class={twMerge('w-full h-full', justifyEnd ? 'flex justify-end' : '')}
@@ -108,7 +111,7 @@
 				invisible ? 'opacity-0' : '',
 				menuClass
 			)}
-			onclick={bubble('click')}
+			onclick={(e) => onclickProp?.(e)}
 		>
 			<div class="py-1" style="max-height: {maxHeight}px; ">
 				{@render children?.({ item, open })}
diff --git a/frontend/src/lib/components/meltComponents/Menubar.svelte b/frontend/src/lib/components/meltComponents/Menubar.svelte
index b6a34f07a7..2d498cf4e0 100644
--- a/frontend/src/lib/components/meltComponents/Menubar.svelte
+++ b/frontend/src/lib/components/meltComponents/Menubar.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
 	import { createMenubar, melt } from '@melt-ui/svelte'
+	interface Props {
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let { ...props }: Props = $props();
 
 	const {
 		elements: { menubar },
@@ -7,6 +13,6 @@
 	} = createMenubar()
 </script>
 
-<div use:melt={$menubar} class={$$props.class}>
-	<slot {createMenu} />
+<div use:melt={$menubar} class={props.class}>
+	{@render props.children?.({ createMenu, })}
 </div>
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index 4d9e9f83ed..b5b5e178f2 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { writable } from 'svelte/store'
 	const activePopover = writable<{ id: string | null; close: (() => void) | null }>({
 		id: null,
@@ -13,75 +13,128 @@
 	import type { Placement } from '@floating-ui/core'
 	import { debounce, pointerDownOutside } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
-	import { createEventDispatcher } from 'svelte'
 	import { Button } from '$lib/components/common'
 	import DocLink from '$lib/components/apps/editor/settingsPanel/DocLink.svelte'
 	import type { FloatingConfig } from '@melt-ui/svelte/internal/actions/floating'
 	import type { EscapeBehaviorType } from '@melt-ui/svelte/internal/actions'
+	import { onDestroy } from 'svelte'
+	import type { Snippet } from 'svelte'
 
-	export let closeButton: boolean = false
-	export let displayArrow: boolean = false
-	export let placement: Placement = 'bottom'
-	export let disablePopup: boolean = false
-	export let openOnHover: boolean = false
-	export let debounceDelay: number = 0
-	export let floatingConfig: any | undefined = undefined
-	export let usePointerDownOutside: boolean = false
-	export let closeOnOutsideClick: boolean = true
-	export let contentClasses: string = ''
-	export let contentStyle: string = ''
-	export let portal: string | HTMLElement | null = 'body'
-	export let closeOnOtherPopoverOpen: boolean = false
-	export let allowFullScreen: boolean = false
-	export let extraProps: Record<string, any> = {}
-	export let disabled: boolean = false
-	export let documentationLink: string | undefined = undefined
-	export let disableFocusTrap: boolean = false
-	export let openFocus: string | HTMLElement | (() => HTMLElement | null) | null | undefined = undefined
-	export let escapeBehavior: EscapeBehaviorType = 'close'
-	export let enableFlyTransition: boolean = false
-	export let onKeyDown: (e: KeyboardEvent) => void = () => {}
-	export let onClose: () => void = () => {}
-	/**
-	 * If provided, the popover will only open if the click is on the element with the given id.
-	 */
-	export let targetId: string | undefined = undefined
-	/**
-	 * Additional CSS selectors whose matching elements should be excluded from outside-click detection.
-	 */
-	export let excludeSelectors: string | undefined = undefined
+	interface Props {
+		closeButton?: boolean
+		displayArrow?: boolean
+		placement?: Placement
+		disablePopup?: boolean
+		/** When true, the trigger renders as a non-interactive span instead of a button */
+		notClickable?: boolean
+		openOnHover?: boolean
+		debounceDelay?: number
+		floatingConfig?: any | undefined
+		usePointerDownOutside?: boolean
+		closeOnOutsideClick?: boolean
+		/** @deprecated Use `closeOnOutsideClick` instead */
+		closeOnClickOutside?: boolean
+		contentClasses?: string
+		/** @deprecated Use `contentClasses` instead */
+		containerClasses?: string
+		contentStyle?: string
+		portal?: string | HTMLElement | null
+		closeOnOtherPopoverOpen?: boolean
+		allowFullScreen?: boolean
+		extraProps?: Record<string, any>
+		disabled?: boolean
+		documentationLink?: string | undefined
+		disableFocusTrap?: boolean
+		openFocus?: string | HTMLElement | (() => HTMLElement | null) | null | undefined
+		escapeBehavior?: EscapeBehaviorType
+		enableFlyTransition?: boolean
+		onKeyDown?: (e: KeyboardEvent) => void
+		onClose?: () => void
+		/**
+		 * If provided, the popover will only open if the click is on the element with the given id.
+		 */
+		targetId?: string | undefined
+		/**
+		 * Additional CSS selectors whose matching elements should be excluded from outside-click detection.
+		 */
+		excludeSelectors?: string | undefined
+		isOpen?: boolean
+		class?: string
+		onclick?: (e: MouseEvent) => void
+		onOpenChange?: (isOpen: boolean) => void
+		trigger?: Snippet<[{ isOpen: boolean }]>
+		content?: Snippet<[{ open: () => void; close: () => void }]>
+	}
 
-	let fullScreen = false
-	const dispatch = createEventDispatcher()
+	let {
+		closeButton = false,
+		displayArrow = false,
+		placement = 'bottom',
+		disablePopup = false,
+		notClickable = false,
+		openOnHover = false,
+		debounceDelay = 0,
+		floatingConfig = undefined,
+		usePointerDownOutside = false,
+		closeOnOutsideClick: closeOnOutsideClickProp = true,
+		closeOnClickOutside: closeOnClickOutsideProp = undefined,
+		contentClasses: contentClassesProp = '',
+		containerClasses: containerClassesProp = undefined,
+		contentStyle = '',
+		portal = 'body',
+		closeOnOtherPopoverOpen = false,
+		allowFullScreen = false,
+		extraProps = {},
+		disabled = false,
+		documentationLink = undefined,
+		disableFocusTrap = false,
+		openFocus = undefined,
+		escapeBehavior = 'close',
+		enableFlyTransition = false,
+		onKeyDown: onKeyDownProp = () => {},
+		onClose: onCloseProp = () => {},
+		targetId = undefined,
+		excludeSelectors = undefined,
+		isOpen = $bindable(false),
+		class: className = undefined,
+		onclick: onclickProp = undefined,
+		onOpenChange: onOpenChangeProp = undefined,
+		trigger: triggerSnippet,
+		content: contentSnippet
+	}: Props = $props()
+
+	// Alias props: containerClasses -> contentClasses, closeOnClickOutside -> closeOnOutsideClick
+	const contentClasses = $derived(containerClassesProp ?? contentClassesProp)
+	const closeOnOutsideClick = $derived(closeOnClickOutsideProp ?? closeOnOutsideClickProp)
+
+	let fullScreen = $state(false)
 
 	// Dynamic portal: use 'body' when fullscreen, otherwise use the provided portal
-	$: dynamicPortal = fullScreen ? 'body' : portal
+	let dynamicPortal = $derived(fullScreen ? 'body' : portal)
 
 	function clearTimers() {
 		clearDebounceClose()
 	}
 
 	// Cleanup timers on component destruction
-	import { onDestroy } from 'svelte'
-	import type { MeltEventHandler } from '@melt-ui/svelte/internal/types'
 	onDestroy(clearTimers)
 
 	const {
-		elements: { trigger, content, arrow, close: closeElement, overlay },
+		elements: { trigger: triggerEl, content: contentEl, arrow, close: closeElement, overlay },
 		states,
 		options: { closeOnOutsideClick: closeOnOutsideClickOption, positioning, portal: portalOption },
 		ids: { content: popoverId }
 	} = createPopover({
 		forceVisible: true,
-		portal: dynamicPortal,
+		portal: portal,
 		disableFocusTrap,
 		escapeBehavior,
 		openFocus,
 		onOpenChange: ({ curr, next }) => {
 			if (curr != next) {
-				dispatch('openChange', next)
+				onOpenChangeProp?.(next)
 				if (!next) {
-					onClose()
+					onCloseProp()
 				}
 			}
 			if (closeOnOtherPopoverOpen) {
@@ -114,16 +167,21 @@
 	}
 
 	// Update portal reactively when fullscreen state changes
-	$: if (portalOption) {
-		$portalOption = dynamicPortal
-	}
+	$effect(() => {
+		if (portalOption) {
+			$portalOption = dynamicPortal
+		}
+	})
 
-	export let isOpen = false
 	const sync = createSync(states)
-	$: sync.open(isOpen, (v) => (isOpen = v))
+	$effect(() => {
+		sync.open(isOpen, (v) => (isOpen = v))
+	})
 
 	// Allow for dynamic closeOnOutsideClick
-	$: $closeOnOutsideClickOption = usePointerDownOutside ? false : closeOnOutsideClick
+	$effect(() => {
+		$closeOnOutsideClickOption = usePointerDownOutside ? false : closeOnOutsideClick
+	})
 
 	export function close() {
 		isOpen = false
@@ -155,9 +213,9 @@
 		debounceDelay
 	)
 
-	const handleClick: MeltEventHandler<PointerEvent> = (event) => {
+	const handleClick = (event: MouseEvent) => {
 		if (targetId) {
-			const target = event.detail.originalEvent.target as Element
+			const target = event.target as Element
 			const targetElement = target.closest(`#${targetId}`)
 			if (!targetElement) {
 				event.preventDefault()
@@ -168,37 +226,57 @@
 	}
 </script>
 
-<svelte:window onkeydown={(e) => isOpen && onKeyDown(e)} />
+<svelte:window onkeydown={(e) => isOpen && onKeyDownProp(e)} />
 
-<button
-	class={$$props.class}
-	use:melt={$trigger}
-	aria-label="Popup button"
-	disabled={disablePopup || disabled}
-	on:mouseenter={() => {
-		if (openOnHover) {
-			open()
-			clearDebounceClose()
-		}
-	}}
-	on:mouseleave={debounceClose}
-	use:pointerDownOutside={{
-		capture: true,
-		stopPropagation: false,
-		exclude: getMenuElements
-	}}
-	on:pointerdown_outside={() => {
-		if (usePointerDownOutside) {
-			if (fullScreen) fullScreen = false
-			else close()
-		}
-	}}
-	data-popover
-	on:m-click={handleClick}
-	on:click
->
-	<slot name="trigger" {isOpen} />
-</button>
+{#if notClickable}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span
+		class={className}
+		use:melt={$triggerEl}
+		onmouseenter={() => {
+			if (openOnHover) {
+				open()
+				clearDebounceClose()
+			}
+		}}
+		onmouseleave={debounceClose}
+		data-popover
+	>
+		{@render triggerSnippet?.({ isOpen })}
+	</span>
+{:else}
+	<button
+		class={className}
+		use:melt={$triggerEl}
+		aria-label="Popup button"
+		disabled={disablePopup || disabled}
+		onmouseenter={() => {
+			if (openOnHover) {
+				open()
+				clearDebounceClose()
+			}
+		}}
+		onmouseleave={debounceClose}
+		use:pointerDownOutside={{
+			capture: true,
+			stopPropagation: false,
+			exclude: getMenuElements,
+			onClickOutside: () => {
+				if (usePointerDownOutside) {
+					if (fullScreen) fullScreen = false
+					else close()
+				}
+			}
+		}}
+		data-popover
+		onclick={(e) => {
+			handleClick(e)
+			onclickProp?.(e)
+		}}
+	>
+		{@render triggerSnippet?.({ isOpen })}
+	</button>
+{/if}
 
 {#if fullScreen && isOpen && !disablePopup}
 	<div use:melt={$overlay} class="fixed inset-0 z-10 bg-black/50"></div>
@@ -206,14 +284,14 @@
 
 {#if isOpen && !disablePopup}
 	<div
-		on:mouseenter={() => {
+		onmouseenter={() => {
 			if (openOnHover) {
 				open()
 				clearDebounceClose()
 			}
 		}}
-		on:mouseleave={debounceClose}
-		use:melt={$content}
+		onmouseleave={debounceClose}
+		use:melt={$contentEl}
 		transition:fly={{ duration: enableFlyTransition ? 100 : 0, y: -16 }}
 		class={twMerge(
 			'relative dark:border rounded-md bg-surface-tertiary shadow-lg',
@@ -233,7 +311,7 @@
 		{#if allowFullScreen}
 			<div class="absolute top-0 right-0 z-10">
 				<Button
-					on:click={() => (fullScreen = !fullScreen)}
+					onclick={() => (fullScreen = !fullScreen)}
 					variant="subtle"
 					unifiedSize="sm"
 					btnClasses="text-secondary"
@@ -253,7 +331,7 @@
 			</button>
 		{/if}
 
-		<slot name="content" {open} {close} />
+		{@render contentSnippet?.({ open, close })}
 	</div>
 {/if}
 
diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte
index ea464fa123..335e097e15 100644
--- a/frontend/src/lib/components/meltComponents/Tooltip.svelte
+++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte
@@ -6,17 +6,55 @@
 	import { createTooltip, melt } from '@melt-ui/svelte'
 	import { fade } from 'svelte/transition'
 	import TooltipInner from '../TooltipInner.svelte'
+	import type { Snippet } from 'svelte'
 
-	export let light = false
-	export let placement: Placement | undefined = 'bottom'
-	export let documentationLink: string | undefined = undefined
-	export let small = false
-	export let markdownTooltip: string | undefined = undefined
-	export let disablePopup: boolean = false
-	export let openDelay: number = 300
-	export let closeDelay: number = 0
-	export let portal: string | undefined | null = 'body'
-	export let customBgClass: string | undefined = undefined
+	interface Props {
+		light?: boolean
+		placement?: Placement | undefined
+		documentationLink?: string | undefined
+		small?: boolean
+		markdownTooltip?: string | undefined
+		disablePopup?: boolean
+		/** When true, the trigger renders as a non-interactive span instead of a button */
+		notClickable?: boolean
+		openDelay?: number
+		closeDelay?: number
+		/** @deprecated Use `closeDelay` instead. Controls the delay before tooltip disappears. */
+		disappearTimeout?: number
+		portal?: string | undefined | null
+		customBgClass?: string | undefined
+		/** Additional classes for the tooltip content container */
+		containerClasses?: string | undefined
+		/** Show a close button on the tooltip */
+		closeButton?: boolean
+		class?: string
+		style?: string
+		onclick?: (e: MouseEvent) => void
+		children?: Snippet
+		text?: Snippet
+	}
+
+	let {
+		light = false,
+		placement = 'bottom',
+		documentationLink = undefined,
+		small = false,
+		markdownTooltip = undefined,
+		disablePopup = false,
+		notClickable: _notClickable = false,
+		openDelay = 300,
+		closeDelay: closeDelayProp = 0,
+		disappearTimeout: disappearTimeoutProp = undefined,
+		portal = 'body',
+		customBgClass = undefined,
+		containerClasses = undefined,
+		closeButton: _closeButton = false,
+		class: className = undefined,
+		style: styleProp = undefined,
+		onclick: onclickProp = undefined,
+		children,
+		text
+	}: Props = $props()
 
 	const {
 		elements: { trigger, content },
@@ -26,20 +64,23 @@
 			placement
 		},
 		openDelay,
-		closeDelay,
+		closeDelay: disappearTimeoutProp ?? closeDelayProp,
 		group: true,
 		portal
 	})
 </script>
 
-<span class={$$props.class} style={$$props.style} use:melt={$trigger}>
-	<slot />
-</span>
-{#if !$$slots.default}
+{#if children}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span class={className} style={styleProp} use:melt={$trigger} onclick={onclickProp}>
+		{@render children()}
+	</span>
+{:else}
 	<div
 		class="inline-flex w-3 mx-0.5 h-3 {light
 			? 'text-primary-inverse'
-			: 'text-primary'} {$$props.class} "
+			: 'text-primary'} {className ?? ''} "
 		use:melt={$trigger}
 	>
 		<InfoIcon size={small ? 12 : 14} />
@@ -48,8 +89,8 @@
 
 {#if $open && !disablePopup}
 	<div use:melt={$content} transition:fade={{ duration: 100 }} style="z-index: {zIndexes.tooltip}">
-		<TooltipInner {documentationLink} {markdownTooltip} {customBgClass}>
-			<slot name="text" />
+		<TooltipInner {documentationLink} {markdownTooltip} customBgClass={containerClasses ?? customBgClass}>
+			{@render text?.()}
 		</TooltipInner>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
index 69b476279f..d3cc8d737a 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
@@ -1,21 +1,40 @@
 <script lang="ts">
 	import ObjectViewer from './ObjectViewer.svelte'
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { onMount } from 'svelte'
 
-	export let json: any
-	export let level = 0
-	export let currentPath: string = ''
-	export let pureViewer = false
-	export let collapsed = (level != 0 && level % 3 == 0) || Array.isArray(json)
-	export let rawKey = false
-	export let topBrackets = false
-	export let allowCopy = true
-	export let collapseLevel: number | undefined = undefined
-	export let prefix = ''
-	export let expandedEvenOnLevel0: string | undefined = undefined
-	export let connecting = false
+	interface Props {
+		json: any
+		level?: number
+		currentPath?: string
+		pureViewer?: boolean
+		collapsed?: boolean
+		rawKey?: boolean
+		topBrackets?: boolean
+		allowCopy?: boolean
+		collapseLevel?: number | undefined
+		prefix?: string
+		expandedEvenOnLevel0?: string | undefined
+		connecting?: boolean
+		onmounted?: () => void
+	}
 
-	const props = {
+	let {
+		json,
+		level = 0,
+		currentPath = '',
+		pureViewer = false,
+		collapsed = (level != 0 && level % 3 == 0) || Array.isArray(json),
+		rawKey = false,
+		topBrackets = false,
+		allowCopy = true,
+		collapseLevel = undefined,
+		prefix = '',
+		expandedEvenOnLevel0 = undefined,
+		connecting = false,
+		onmounted = undefined
+	}: Props = $props()
+
+	const viewerProps = {
 		json,
 		level,
 		currentPath,
@@ -30,15 +49,13 @@
 		connecting
 	}
 
-	const dispatch = createEventDispatcher()
-
 	onMount(() => {
 		setTimeout(() => {
-			dispatch('mounted') // Notify the parent when ready
-		}, 0) // Allow DOM rendering before dispatching
+			onmounted?.()
+		}, 0)
 	})
 </script>
 
 <div>
-	<ObjectViewer {...props} />
+	<ObjectViewer {...viewerProps} />
 </div>
diff --git a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
index 7d56abeb05..b4ed9c11c9 100644
--- a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
 	import ObjectViewer from './ObjectViewer.svelte'
 
-	export let allowCopy = false
-	export let result: any
-	export let extraResults: any = undefined
-	export let flow_input: any = undefined
-	export let flow_env: any = undefined
+	interface Props {
+		allowCopy?: boolean;
+		result: any;
+		extraResults?: any;
+		flow_input?: any;
+		flow_env?: any;
+	}
+
+	let {
+		allowCopy = false,
+		result,
+		extraResults = undefined,
+		flow_input = undefined,
+		flow_env = undefined
+	}: Props = $props();
 </script>
 
 <div class="w-full px-2">
diff --git a/frontend/src/lib/components/raw_apps/DefaultDatabaseSelector.svelte b/frontend/src/lib/components/raw_apps/DefaultDatabaseSelector.svelte
index 9a5e4cba4d..9e91ef55d0 100644
--- a/frontend/src/lib/components/raw_apps/DefaultDatabaseSelector.svelte
+++ b/frontend/src/lib/components/raw_apps/DefaultDatabaseSelector.svelte
@@ -48,44 +48,48 @@
 </script>
 
 <Popover>
-	<svelte:fragment slot="trigger">
-		<Button
-			title="Configure default datatable & schema"
-			unifiedSize="xs"
-			variant="subtle"
-			nonCaptureEvent
-			btnClasses="px-1"
-		>
-			<Settings size={12} />
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
-			<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
+	{#snippet trigger()}
+	
+			<Button
+				title="Configure default datatable & schema"
+				unifiedSize="xs"
+				variant="subtle"
+				nonCaptureEvent
+				btnClasses="px-1"
+			>
+				<Settings size={12} />
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col gap-3 p-4 min-w-64 max-w-80">
+				<div class="text-xs font-medium text-primary">Default Datatable & Schema</div>
 
-			<p class="text-2xs text-tertiary leading-relaxed">
-				{description}
-			</p>
+				<p class="text-2xs text-tertiary leading-relaxed">
+					{description}
+				</p>
 
-			<div class="flex flex-col gap-1">
-				<span class="text-2xs text-tertiary">Database</span>
-				<Select
-					items={datatableItems}
-					bind:value={() => datatable, (v) => onChange?.(v, schema)}
-					placeholder="Select database"
-					size="sm"
-				/>
+				<div class="flex flex-col gap-1">
+					<span class="text-2xs text-tertiary">Database</span>
+					<Select
+						items={datatableItems}
+						bind:value={() => datatable, (v) => onChange?.(v, schema)}
+						placeholder="Select database"
+						size="sm"
+					/>
+				</div>
+
+				<div class="flex flex-col gap-1">
+					<span class="text-2xs text-tertiary">Schema</span>
+					<Select
+						items={schemaItems}
+						bind:value={() => schema ?? '', (v) => onChange?.(datatable, v || undefined)}
+						placeholder="public"
+						size="sm"
+					/>
+				</div>
 			</div>
-
-			<div class="flex flex-col gap-1">
-				<span class="text-2xs text-tertiary">Schema</span>
-				<Select
-					items={schemaItems}
-					bind:value={() => schema ?? '', (v) => onChange?.(datatable, v || undefined)}
-					placeholder="public"
-					size="sm"
-				/>
-			</div>
-		</div>
-	</svelte:fragment>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/recording/FlowRecordingReplay.svelte b/frontend/src/lib/components/recording/FlowRecordingReplay.svelte
index cf6c3b2bdf..c5d94a7b95 100644
--- a/frontend/src/lib/components/recording/FlowRecordingReplay.svelte
+++ b/frontend/src/lib/components/recording/FlowRecordingReplay.svelte
@@ -180,10 +180,12 @@
 				<h2 class="text-lg font-semibold text-emphasis">{recording.flow_path}</h2>
 				<Tooltip placement="bottom">
 					<InfoIcon size={16} class="text-tertiary" />
-					<span class="text-2xs" slot="text">
-						Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
-						{(recording.total_duration_ms / 1000).toFixed(1)}s
-					</span>
+					{#snippet text()}
+												<span class="text-2xs" >
+							Recorded {new Date(recording.recorded_at).toLocaleString()} &mdash;
+							{(recording.total_duration_ms / 1000).toFixed(1)}s
+						</span>
+											{/snippet}
 				</Tooltip>
 			</div>
 			<Button variant="contained" color="blue" on:click={startReplay} startIcon={{ icon: Play }}>
diff --git a/frontend/src/lib/components/runs/MobileFilters.svelte b/frontend/src/lib/components/runs/MobileFilters.svelte
index 8271897001..74bbfdacc5 100644
--- a/frontend/src/lib/components/runs/MobileFilters.svelte
+++ b/frontend/src/lib/components/runs/MobileFilters.svelte
@@ -4,17 +4,26 @@
 	import { Filter } from 'lucide-svelte'
 	import { Button } from '../common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	interface Props {
+		filters?: import('svelte').Snippet;
+	}
+
+	let { filters }: Props = $props();
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
-		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
-			Filters
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col w-80 p-4">
-			<slot name="filters" />
-		</div>
-	</svelte:fragment>
+	{#snippet trigger()}
+	
+			<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
+				Filters
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col w-80 p-4">
+				{@render filters?.()}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
index 19d373beae..7dea3dcbca 100644
--- a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
+++ b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
@@ -7,16 +7,21 @@
 	// import Button from '$lib/components/common/button/Button.svelte'
 	// import { json } from 'svelte-highlight/languages'
 	// import { copyToClipboard } from '$lib/utils'
-	// import { deepEqual } from 'fast-equals'
+	
 
-	export let preprocessed: boolean | undefined
+	interface Props {
+		// import { deepEqual } from 'fast-equals'
+		preprocessed: boolean | undefined;
+	}
+
+	let { preprocessed }: Props = $props();
 
 	// $: args =
 	// 	'_metadata' in flowStatus && 'original_args' in flowStatus['_metadata']
 	// 		? flowStatus['_metadata']['original_args']
 	// 		: undefined
 
-	$: hasPreprocessedArgs = preprocessed === true
+	let hasPreprocessedArgs = $derived(preprocessed === true)
 
 	// $: argsStr = args !== undefined ? JSON.stringify(args, null, 4) : undefined
 
diff --git a/frontend/src/lib/components/runs/QueuePopover.svelte b/frontend/src/lib/components/runs/QueuePopover.svelte
index bede71a09a..936fae1041 100644
--- a/frontend/src/lib/components/runs/QueuePopover.svelte
+++ b/frontend/src/lib/components/runs/QueuePopover.svelte
@@ -5,8 +5,12 @@
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import { displayDate } from '$lib/utils'
 
-	let jobs: QueuedJob[] | undefined = undefined
-	export let allWorkspaces: boolean = false
+	let jobs: QueuedJob[] | undefined = $state(undefined)
+	interface Props {
+		allWorkspaces?: boolean;
+	}
+
+	let { allWorkspaces = false }: Props = $props();
 
 	getQueuedJobs()
 	async function getQueuedJobs() {
diff --git a/frontend/src/lib/components/schema/AddProperty.svelte b/frontend/src/lib/components/schema/AddProperty.svelte
index f5a7b2b8b7..81270b6fd8 100644
--- a/frontend/src/lib/components/schema/AddProperty.svelte
+++ b/frontend/src/lib/components/schema/AddProperty.svelte
@@ -5,7 +5,11 @@
 	import SimpleEditor from '../SimpleEditor.svelte'
 	import AddPropertyForm from './AddPropertyForm.svelte'
 
-	export let schema: Schema | any = emptySchema()
+	interface Props {
+		schema?: Schema | any;
+	}
+
+	let { schema = $bindable(emptySchema()) }: Props = $props();
 
 	export const DEFAULT_PROPERTY: ModalSchemaProperty = {
 		selectedType: 'string',
diff --git a/frontend/src/lib/components/schema/AddPropertyForm.svelte b/frontend/src/lib/components/schema/AddPropertyForm.svelte
index 7e745a706b..a9c1d7f27f 100644
--- a/frontend/src/lib/components/schema/AddPropertyForm.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyForm.svelte
@@ -4,7 +4,7 @@
 	import { Plus } from 'lucide-svelte'
 	import TextInput from '../text_input/TextInput.svelte'
 
-	let name: string = ''
+	let name: string = $state('')
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/lib/components/schema/JobSchemaPicker.svelte b/frontend/src/lib/components/schema/JobSchemaPicker.svelte
index 115d442e5a..e0af42ac0d 100644
--- a/frontend/src/lib/components/schema/JobSchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/JobSchemaPicker.svelte
@@ -12,6 +12,7 @@
 		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
 		viewerOpen?: boolean
 		limitPayloadSize?: boolean
+		onOpenChange?: (isOpen: boolean) => void
 	}
 
 	let {
@@ -21,7 +22,8 @@
 		showAuthor = false,
 		placement = 'bottom-start',
 		viewerOpen = false,
-		limitPayloadSize = false
+		limitPayloadSize = false,
+		onOpenChange = undefined
 	}: Props = $props()
 </script>
 
@@ -31,7 +33,7 @@
 	{hovering}
 	{placement}
 	{viewerOpen}
-	on:openChange
+	{onOpenChange}
 	{limitPayloadSize}
 >
 	{#snippet start()}
diff --git a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
index 2272981118..5f1b054b69 100644
--- a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
@@ -9,13 +9,22 @@
 	import { Cell, Row } from '$lib/components/table'
 	import { twMerge } from 'tailwind-merge'
 
-	export let job: any
-	export let selected = false
-	export let payloadData: any | undefined = undefined
 	const dispatch = createEventDispatcher()
-	export let hovering = false
+	interface Props {
+		job: any;
+		selected?: boolean;
+		payloadData?: any | undefined;
+		hovering?: boolean;
+	}
 
-	let loadingArgs = true
+	let {
+		job,
+		selected = false,
+		payloadData = $bindable(undefined),
+		hovering = $bindable(false)
+	}: Props = $props();
+
+	let loadingArgs = $state(true)
 	loadArgsFromRunningJob(job.id)
 
 	async function loadArgsFromRunningJob(id: string | undefined) {
@@ -40,37 +49,41 @@
 	</Cell>
 {:else}
 	<Row
-		on:click={() => dispatch('select', { id: job.id, payloadData })}
+		onclick={() => dispatch('select', { id: job.id, payloadData })}
 		class={twMerge(
 			selected === job.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
 			'cursor-pointer rounded-md'
 		)}
-		on:hover={(e) => (hovering = e.detail ? true : false)}
+		onHover={(h) => (hovering = h)}
 	>
 		<SchemaPickerRow {payloadData} date={job.started_at} {hovering}>
-			<svelte:fragment slot="start">
-				<div class="center-center">
-					<div
-						class={twMerge(
-							'rounded-full w-2 h-2 animate-pulse',
-							job.suspend ? 'bg-violet-400' : 'bg-orange-400'
-						)}
-						title="Running"
-					></div>
-				</div>
-			</svelte:fragment>
-			<svelte:fragment slot="extra">
-				<div class="center-center {hovering ? '' : '!hidden'}">
-					<a
-						target="_blank"
-						href="{base}/run/{job.id}?workspace={$workspaceStore}"
-						class="text-right float-right text-secondary"
-						title="See run detail in a new tab"
-					>
-						<ExternalLink size={16} />
-					</a>
-				</div>
-			</svelte:fragment>
+			{#snippet start()}
+					
+					<div class="center-center">
+						<div
+							class={twMerge(
+								'rounded-full w-2 h-2 animate-pulse',
+								job.suspend ? 'bg-violet-400' : 'bg-orange-400'
+							)}
+							title="Running"
+						></div>
+					</div>
+				
+					{/snippet}
+			{#snippet extra()}
+					
+					<div class="center-center {hovering ? '' : '!hidden'}">
+						<a
+							target="_blank"
+							href="{base}/run/{job.id}?workspace={$workspaceStore}"
+							class="text-right float-right text-secondary"
+							title="See run detail in a new tab"
+						>
+							<ExternalLink size={16} />
+						</a>
+					</div>
+				
+					{/snippet}
 		</SchemaPickerRow>
 	</Row>
 {/if}
diff --git a/frontend/src/lib/components/schema/SchemaPickerRow.svelte b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
index f436d3452e..3d17d75ade 100644
--- a/frontend/src/lib/components/schema/SchemaPickerRow.svelte
+++ b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { copyToClipboard, formatDate, formatDateShort } from '$lib/utils'
 	import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -10,7 +7,7 @@
 	import { CopyIcon, Eye, Loader2 } from 'lucide-svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { isObjectTooBig } from '$lib/utils'
-	import { createEventDispatcher, untrack } from 'svelte'
+	import { untrack } from 'svelte'
 	import type { FloatingConfig } from '@melt-ui/svelte/internal/actions'
 
 	interface Props {
@@ -21,6 +18,7 @@
 		viewerOpen?: boolean
 		limitPayloadSize?: boolean
 		forceLoad?: boolean
+		onOpenChange?: (isOpen: boolean) => void
 		start?: import('svelte').Snippet
 		extra?: import('svelte').Snippet<[any]>
 	}
@@ -33,6 +31,7 @@
 		viewerOpen = false,
 		limitPayloadSize = false,
 		forceLoad = $bindable(false),
+		onOpenChange = undefined,
 		start,
 		extra
 	}: Props = $props()
@@ -43,7 +42,6 @@
 	let popoverFullyOpened = $state(false)
 	let popoverOpenTimeout: ReturnType<typeof setTimeout> | null = null
 
-	const dispatch = createEventDispatcher()
 	const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData)
 	const isTooBig = payloadData === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview
 
@@ -55,8 +53,7 @@
 		fitViewport: true
 	}
 
-	function handlePopoverChange(event: CustomEvent<boolean>) {
-		const isOpen = event.detail
+	function handlePopoverChange(isOpen: boolean) {
 		popoverOpen = isOpen
 
 		if (!isOpen) {
@@ -71,7 +68,7 @@
 			}, 50)
 		}
 
-		dispatch('openChange', isOpen)
+		onOpenChange?.(isOpen)
 	}
 
 	function handleHoveringChange(isHovering: boolean) {
@@ -123,11 +120,11 @@
 			contentClasses="overflow-auto"
 			usePointerDownOutside
 			closeOnOtherPopoverOpen
-			on:click={(e) => {
+			onclick={(e) => {
 				e.stopPropagation()
 			}}
 			{floatingConfig}
-			on:openChange={handlePopoverChange}
+			onOpenChange={handlePopoverChange}
 		>
 			{#snippet trigger()}
 				<Button
@@ -160,7 +157,12 @@
 							onclick={() => {
 								copyToClipboard(JSON.stringify(payloadData))
 							}}
-							onkeydown={bubble('keydown')}
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault()
+									copyToClipboard(JSON.stringify(payloadData))
+								}
+							}}
 						>
 							{#if !objectViewerLoaded && isTooBig}
 								<div class="flex justify-center items-center p-4">
@@ -178,7 +180,7 @@
 										json={payloadData}
 										allowCopy
 										pureViewer
-										on:mounted={() => (objectViewerLoaded = true)}
+										onmounted={() => (objectViewerLoaded = true)}
 									/>
 								</div>
 							{/if}
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index efed21b988..62a990bb46 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -77,7 +77,7 @@
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (!isVisible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
index 3c46007c8b..8194f0f440 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { workspaceStore, superadmin } from '$lib/stores'
 	import Alert from '../common/alert/Alert.svelte'
 	import Button from '../common/button/Button.svelte'
@@ -8,14 +10,12 @@
 	import { Pen } from 'lucide-svelte'
 	import { isCloudHosted } from '$lib/cloud'
 
-	let newName = ''
-	let newId = ''
-	let checking = false
-	let errorId = ''
+	let newName = $state('')
+	let newId = $state('')
+	let checking = $state(false)
+	let errorId = $state('')
 
-	$: newId = newName.toLowerCase().replace(/\s/gi, '-')
 
-	$: validateName(newId)
 
 	async function validateName(id: string): Promise<void> {
 		checking = true
@@ -30,7 +30,7 @@
 		checking = false
 	}
 
-	let loading = false
+	let loading = $state(false)
 	async function renameWorkspace() {
 		try {
 			loading = true
@@ -53,7 +53,17 @@
 		}
 	}
 
-	export let open = false
+	interface Props {
+		open?: boolean;
+	}
+
+	let { open = $bindable(false) }: Props = $props();
+	run(() => {
+		newId = newName.toLowerCase().replace(/\s/gi, '-')
+	});
+	run(() => {
+		validateName(newId)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
diff --git a/frontend/src/lib/components/settings/PremiumInfo.svelte b/frontend/src/lib/components/settings/PremiumInfo.svelte
index 27ead12646..013fdfc2e0 100644
--- a/frontend/src/lib/components/settings/PremiumInfo.svelte
+++ b/frontend/src/lib/components/settings/PremiumInfo.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { base } from '$lib/base'
 	import { capitalize, pluralize, sendUserToast } from '$lib/utils'
 	import DataTable from '$lib/components/table/DataTable.svelte'
@@ -14,8 +16,12 @@
 	import Modal from '../common/modal/Modal.svelte'
 	import { slide } from 'svelte/transition'
 
-	export let plan: string | undefined
-	export let customer_id: string | undefined
+	interface Props {
+		plan: string | undefined;
+		customer_id: string | undefined;
+	}
+
+	let { plan, customer_id }: Props = $props();
 
 	let users: User[] | undefined = undefined
 
@@ -33,7 +39,7 @@
 				is_past_due: boolean
 				max_tolerated_executions?: number
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 	const plans = {
 		Free: [
 			'Users use their individual global free-tier quotas when doing executions in this workspace',
@@ -55,13 +61,6 @@
 		]
 	}
 
-	$: {
-		if ($workspaceStore) {
-			loadPremiumInfo()
-			listUsers()
-			getThresholdAlert()
-		}
-	}
 
 	async function listUsers(): Promise<void> {
 		users = await UserService.listUsers({ workspace: $workspaceStore! })
@@ -93,10 +92,10 @@
 				threshold_alert_amount?: number
 				last_alert_sent?: string
 		  }
-		| undefined = undefined
-	let newThresholdAlertAmount: number | undefined = undefined
+		| undefined = $state(undefined)
+	let newThresholdAlertAmount: number | undefined = $state(undefined)
 
-	let thresholdAlertOpen = false
+	let thresholdAlertOpen = $state(false)
 	async function getThresholdAlert() {
 		thresholdAlert = await WorkspaceService.getThresholdAlert({ workspace: $workspaceStore! })
 	}
@@ -114,22 +113,31 @@
 		}
 	}
 
-	let estimatedDevsRaw = 1
-	let estimatedOps = 0
+	let estimatedDevsRaw = $state(1)
+	let estimatedOps = $state(0)
 
-	$: estimatedDevs = Math.max(1, estimatedDevsRaw)
-	$: estimatedSeats = estimatedDevs + Math.ceil(estimatedOps / 2)
 
-	let estimatedExecs = 1
+	let estimatedExecs = $state(1)
 
 	function updateExecs() {
 		if (estimatedExecs < estimatedSeats) {
 			estimatedExecs = estimatedSeats
 		}
 	}
-	$: estimatedSeats && updateExecs()
 
 	const formatNumber = (value: number) => value.toLocaleString('en-US')
+	run(() => {
+		if ($workspaceStore) {
+			loadPremiumInfo()
+			listUsers()
+			getThresholdAlert()
+		}
+	});
+	let estimatedDevs = $derived(Math.max(1, estimatedDevsRaw))
+	let estimatedSeats = $derived(estimatedDevs + Math.ceil(estimatedOps / 2))
+	run(() => {
+		estimatedSeats && updateExecs()
+	});
 </script>
 
 <Modal bind:open={thresholdAlertOpen} title="Threshold alert">
@@ -140,17 +148,19 @@
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
-		<Button
-			size="sm"
-			on:click={() => {
-				setThresholdAlert()
-				thresholdAlertOpen = false
-			}}
-		>
-			Save
-		</Button>
-	</svelte:fragment>
+	{#snippet actions()}
+	
+			<Button
+				size="sm"
+				on:click={() => {
+					setThresholdAlert()
+					thresholdAlertOpen = false
+				}}
+			>
+				Save
+			</Button>
+		
+	{/snippet}
 </Modal>
 
 <div class="flex flex-col gap-4 mt-8">
@@ -497,7 +507,7 @@
 					{#if premiumInfo?.premium && plan === 'team'}
 						<button
 							class="mt-1 text-[11px] text-blue-500 underline self-start"
-							on:click={() => {
+							onclick={() => {
 								newThresholdAlertAmount = (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10
 								thresholdAlertOpen = true
 							}}
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index 8076b9a17a..4adf0c2c29 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -80,14 +80,15 @@
 	/>
 	<div class="overflow-auto grow min-h-64 max-h-2/3">
 		<TableCustom>
-			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-			<tr slot="header-row">
-				<th>Prefix</th>
-				<th>Label</th>
-				<th>Expiration</th>
-				<th>Scopes</th>
-				<th></th>
-			</tr>
+			{#snippet header_row()}
+				<tr>
+					<th>Prefix</th>
+					<th>Label</th>
+					<th>Expiration</th>
+					<th>Scopes</th>
+					<th></th>
+				</tr>
+			{/snippet}
 			{#snippet body()}
 				<tbody>
 					{#if tokens && tokens.length > 0}
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
index 6aa2a013fb..2e6a9820aa 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { onMount, onDestroy } from 'svelte'
 	import CriticalAlertModalInner from './CriticalAlertModalInner.svelte'
 	import { SettingService, type CriticalAlert } from '$lib/gen'
@@ -19,16 +21,17 @@
 	import { base } from '$lib/base'
 	import Notification from '$lib/components/common/alert/Notification.svelte'
 
-	export let open: boolean = false
-	export let numUnacknowledgedCriticalAlerts: number = 0
-	export let muteSettings
-	let workspaceContext = false
-	let childRef
-
-	$: {
-		setupApiFunctions(workspaceContext)
+	interface Props {
+		open?: boolean;
+		numUnacknowledgedCriticalAlerts?: number;
+		muteSettings: any;
 	}
 
+	let { open = $bindable(false), numUnacknowledgedCriticalAlerts = $bindable(0), muteSettings = $bindable() }: Props = $props();
+	let workspaceContext = $state(false)
+	let childRef: CriticalAlertModalInner | undefined = $state()
+
+
 	function setupApiFunctions(_ctx?) {
 		getCriticalAlerts = withSuperadminLogic(
 			SettingService.getCriticalAlerts,
@@ -46,8 +49,6 @@
 		)
 	}
 
-	$: isCriticalAlertsUIOpen.set(open)
-	$: if ($isCriticalAlertsUIOpen) open = $isCriticalAlertsUIOpen
 
 	let checkForNewAlertsInterval: ReturnType<typeof setInterval>
 	let checkingForNewAlerts = false
@@ -65,9 +66,9 @@
 		}
 	}
 
-	let getCriticalAlerts
-	let acknowledgeCriticalAlert
-	let acknowledgeAllCriticalAlerts
+	let getCriticalAlerts: ((params?: any) => Promise<any>) | undefined = $state()
+	let acknowledgeCriticalAlert: ((params?: any) => Promise<any>) | undefined = $state()
+	let acknowledgeAllCriticalAlerts: ((params?: any) => Promise<any>) | undefined = $state()
 
 	setupApiFunctions()
 
@@ -92,7 +93,7 @@
 		sendUserToast(
 			`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`
 		)
-		childRef.refreshAlerts()
+		childRef?.refreshAlerts()
 	}
 	async function saveGlobalMuteSetting() {
 		await SettingService.setGlobal({
@@ -102,7 +103,7 @@
 		sendUserToast(
 			`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`
 		)
-		childRef.refreshAlerts()
+		childRef?.refreshAlerts()
 	}
 
 	async function updateHasUnacknowledgedCriticalAlerts(sendToast: boolean = false) {
@@ -166,9 +167,18 @@
 	}
 
 	async function acknowledgeAlert(id: number) {
-		await acknowledgeCriticalAlert({ id })
+		await acknowledgeCriticalAlert?.({ id })
 		updateHasUnacknowledgedCriticalAlerts()
 	}
+	run(() => {
+		setupApiFunctions(workspaceContext)
+	});
+	run(() => {
+		if ($isCriticalAlertsUIOpen) open = $isCriticalAlertsUIOpen
+	});
+	run(() => {
+		isCriticalAlertsUIOpen.set(open)
+	});
 </script>
 
 <Modal2
@@ -178,10 +188,10 @@
 	fixedHeight="lg"
 	fixedWidth="lg"
 >
-	<svelte:fragment slot="header-left">
+	{#snippet header_left()}
 		<Notification notificationCount={numUnacknowledgedCriticalAlerts} notificationLimit={9999} />
-	</svelte:fragment>
-	<svelte:fragment slot="header-right">
+	{/snippet}
+	{#snippet header_right()}
 		<List horizontal>
 			{#if $superadmin || $userStore?.is_admin}
 				<Popover
@@ -189,7 +199,7 @@
 					portal="#mute-settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="mute-settings-button">
 							<Button variant="default" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
@@ -199,8 +209,8 @@
 								{/if}
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start">
 							<div class="w-full">
 								{#if $superadmin}
@@ -226,7 +236,7 @@
 								/>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{/if}
 
@@ -236,14 +246,14 @@
 					portal="#settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="settings-button">
 							<Button variant="default" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start" gap="none">
 							<div class="w-full">
 								<Button
@@ -271,7 +281,7 @@
 								</Button>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{:else}
 				<Button
@@ -287,7 +297,7 @@
 				</Button>
 			{/if}
 		</List>
-	</svelte:fragment>
+	{/snippet}
 
 	<CriticalAlertModalInner
 		bind:workspaceContext
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte b/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
index 468acfc423..732c810c33 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
@@ -10,19 +10,34 @@
 	import { Skeleton } from '../common'
 	import Linkify from './Linkify.svelte'
 
-	export let alerts: any[]
-	export let hideAcknowledged = false
-	export let goToNextPage: () => void
-	export let goToPreviousPage: () => void
-	export let acknowledgeAlert: (id: number) => void
-	export let acknowledgeAll: () => void
-	export let numUnacknowledgedCriticalAlerts: number
-	export let page = 1
-	export let hasMore = true
-	export let pageSize = 0
+	interface Props {
+		alerts: any[];
+		hideAcknowledged?: boolean;
+		goToNextPage: () => void;
+		goToPreviousPage: () => void;
+		acknowledgeAlert: (id: number) => void;
+		acknowledgeAll: () => void;
+		numUnacknowledgedCriticalAlerts: number;
+		page?: number;
+		hasMore?: boolean;
+		pageSize?: number;
+	}
 
-	let headerHeight = 0
-	let contentHeight = 0
+	let {
+		alerts,
+		hideAcknowledged = false,
+		goToNextPage,
+		goToPreviousPage,
+		acknowledgeAlert,
+		acknowledgeAll,
+		numUnacknowledgedCriticalAlerts,
+		page = $bindable(1),
+		hasMore = true,
+		pageSize = 0
+	}: Props = $props();
+
+	let headerHeight = $state(0)
+	let contentHeight = $state(0)
 
 	function formatDate(dateString: string | undefined): string {
 		if (!dateString) return ''
@@ -37,7 +52,7 @@
 		}).format(date)
 	}
 
-	$: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize
+	let availableHeight = $derived((contentHeight - headerHeight - pageSize - 1) / pageSize)
 </script>
 
 <div class="relative grow min-h-0 w-full">
diff --git a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
index 769e4e0f41..f1229e2bfb 100644
--- a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
+++ b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
@@ -4,8 +4,12 @@
 
 	import DarkModeObserver from '../DarkModeObserver.svelte'
 
-	export let darkMode: boolean = document.documentElement.classList.contains('dark')
-	export let forcedDarkMode: boolean = true
+	interface Props {
+		darkMode?: boolean;
+		forcedDarkMode?: boolean;
+	}
+
+	let { darkMode = $bindable(document.documentElement.classList.contains('dark')), forcedDarkMode = true }: Props = $props();
 
 	export function toggle() {
 		if (!document.documentElement.classList.contains('dark')) {
@@ -23,7 +27,7 @@
 		'text-2xs m-1 p-2 rounded-lg flex flex-row gap-2 justify-center',
 		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-secondary hover:bg-surface-hover'
 	)}
-	on:click={toggle}
+	onclick={toggle}
 >
 	{#if darkMode}
 		<Sun class="w-4 h-4" />
diff --git a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
index 5bad244a7d..81057f0f77 100644
--- a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
+++ b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '$lib/stores'
 	import { BROWSER } from 'esm-env'
 
@@ -10,10 +12,10 @@
 
 	const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws'
 
-	let awareness: Awareness | undefined = undefined
+	let awareness: Awareness | undefined = $state(undefined)
 	let wsProvider: WebsocketProvider | undefined = undefined
 
-	let connected = false
+	let connected = $state(false)
 	function connectWorkspace(workspace: string) {
 		const ydoc = new Y.Doc()
 		wsProvider = new WebsocketProvider(
@@ -45,11 +47,15 @@
 			setPeers()
 		})
 	}
-	$: awareness?.setLocalState({
-		name: $userStore?.username,
-		url: $page.url.pathname
-	})
-	$: $enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore)
+	run(() => {
+		awareness?.setLocalState({
+			name: $userStore?.username,
+			url: $page.url.pathname
+		})
+	});
+	run(() => {
+		$enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore)
+	});
 
 	function showActivity(url: string) {
 		if (url.startsWith('/scripts/add')) {
diff --git a/frontend/src/lib/components/sidebar/OperatorMenu.svelte b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
index d30408d220..1f8f641ac2 100644
--- a/frontend/src/lib/components/sidebar/OperatorMenu.svelte
+++ b/frontend/src/lib/components/sidebar/OperatorMenu.svelte
@@ -176,7 +176,7 @@
 
 <Menubar>
 	{#snippet children({ createMenu })}
-		<Menu {createMenu} usePointerDownOutside on:close={() => (showMore = false)}>
+		<Menu {createMenu} usePointerDownOutside onClose={() => (showMore = false)}>
 			{#snippet triggr({ trigger })}
 				<MenuButton
 					class="!text-xs"
diff --git a/frontend/src/lib/components/sidebar/SideBarNotification.svelte b/frontend/src/lib/components/sidebar/SideBarNotification.svelte
index fc32f1723e..33ccb39dcb 100644
--- a/frontend/src/lib/components/sidebar/SideBarNotification.svelte
+++ b/frontend/src/lib/components/sidebar/SideBarNotification.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import Notification from '$lib/components/common/alert/Notification.svelte'
 
-	export let notificationCount = 0
-	export let small: boolean = false
+	interface Props {
+		notificationCount?: number;
+		small?: boolean;
+	}
+
+	let { notificationCount = 0, small = false }: Props = $props();
 </script>
 
 {#if !small}
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index e70e0ec41d..b0382158bf 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -52,7 +52,7 @@
 	import { onMount } from 'svelte'
 	import { base } from '$lib/base'
 	import { type Changelog, changelogs } from './changelogs'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import SideBarNotification from './SideBarNotification.svelte'
 	import KafkaIcon from '../icons/KafkaIcon.svelte'
 	import NatsIcon from '../icons/NatsIcon.svelte'
@@ -369,12 +369,12 @@
 			aiDescription: 'Button to navigate to schedules'
 		},
 		...allTriggerLinks.filter(
-			(link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href)
+			(link) => $usedTriggerKinds.includes(link.kind) || page.url.pathname.includes(link.href)
 		)
 	])
 	let extraTriggerLinks = $derived(
 		allTriggerLinks.filter((link) => {
-			return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind)
+			return !page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind)
 		})
 	)
 	let secondaryMenuLinks = $derived([
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index 49da43d1a0..3349b92233 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -16,7 +16,7 @@
 	import WorkspaceIcon from '$lib/components/workspace/WorkspaceIcon.svelte'
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { switchWorkspace } from '$lib/storeUtils'
 	import MultiplayerMenu from './MultiplayerMenu.svelte'
 	import { enterpriseLicense } from '$lib/stores'
@@ -56,12 +56,12 @@
 			'/flows/get/',
 			'/apps/get/'
 		]
-		const isOnEditPage = editPages.some((editPage) => $page.route.id?.includes(editPage) ?? false)
+		const isOnEditPage = editPages.some((editPage) => page.route.id?.includes(editPage) ?? false)
 
 		if (!isOnEditPage) {
 			switchWorkspace(id)
-			if ($page.url.searchParams.get('workspace')) {
-				$page.url.searchParams.set('workspace', id)
+			if (page.url.searchParams.get('workspace')) {
+				page.url.searchParams.set('workspace', id)
 			}
 		} else {
 			switchWorkspace(id)
diff --git a/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte b/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte
index 0a5d23bb15..afcefcb068 100644
--- a/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte
+++ b/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte
@@ -1,16 +1,27 @@
 <script lang="ts">
-	import { afterUpdate } from 'svelte'
+	import type { Snippet } from 'svelte'
 
 	/**
 	 * This component should be used instead of `Splitpanes` if the wrapper `Splitpanes`
 	 * has elements that are **NOT** `Pane` above the place of this component.
 	 */
 
-	/** This element will act as the reference point to the `Splitpanes`
-	 * and the top difference will be calculated from it. */
-	export let refElement: HTMLElement | undefined = undefined
+	interface Props {
+		/** This element will act as the reference point to the `Splitpanes`
+		 * and the top difference will be calculated from it. */
+		refElement?: HTMLElement | undefined
+		class?: string
+		children?: Snippet
+	}
+
+	let {
+		refElement = undefined,
+		class: className = '',
+		children
+	}: Props = $props()
+
 	let wrapper: HTMLDivElement
-	let gap = 0
+	let gap = $state(0)
 
 	function getTopDifference(): number {
 		const parent = refElement || wrapper.parentElement
@@ -21,15 +32,15 @@
 		return wrapperTop - parentTop
 	}
 
-	afterUpdate(() => {
+	$effect(() => {
 		gap = getTopDifference()
 	})
 </script>
 
 <div
 	bind:this={wrapper}
-	class="h-full {$$props.class || ''}"
+	class="h-full {className}"
 	style="max-height: calc(100% - {gap}px) !important;"
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/table/DownloadCsv.svelte b/frontend/src/lib/components/table/DownloadCsv.svelte
index 5069842afe..051ab2327f 100644
--- a/frontend/src/lib/components/table/DownloadCsv.svelte
+++ b/frontend/src/lib/components/table/DownloadCsv.svelte
@@ -3,8 +3,12 @@
 	import { Button } from '../common'
 	import { sendUserToast } from '$lib/toast'
 
-	export let getContent: () => string
-	export let customText: string | undefined = undefined
+	interface Props {
+		getContent: () => string;
+		customText?: string | undefined;
+	}
+
+	let { getContent, customText = undefined }: Props = $props();
 </script>
 
 <Button
diff --git a/frontend/src/lib/components/table/Head.svelte b/frontend/src/lib/components/table/Head.svelte
index 5d1dc1f922..d6aa443a58 100644
--- a/frontend/src/lib/components/table/Head.svelte
+++ b/frontend/src/lib/components/table/Head.svelte
@@ -1,6 +1,15 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		headerAction?: import('svelte').Snippet;
+	}
+
+	let { children, headerAction }: Props = $props();
+</script>
+
 <thead class="bg-surface-secondary sticky top-0 z-10 border-b">
-	<slot />
+	{@render children?.()}
 	<tr class="absolute top-2 right-2">
-		<slot name="headerAction" />
+		{@render headerAction?.()}
 	</tr>
 </thead>
diff --git a/frontend/src/lib/components/table/Row.svelte b/frontend/src/lib/components/table/Row.svelte
index 510e794a55..3ed72950f5 100644
--- a/frontend/src/lib/components/table/Row.svelte
+++ b/frontend/src/lib/components/table/Row.svelte
@@ -1,13 +1,29 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let hoverable: boolean = false
-	export let selected: boolean = false
-	export let dividable: boolean = false
-	export let disabled: boolean = false
-	export let hovering: boolean = false
-	const dispatch = createEventDispatcher()
+	interface Props {
+		hoverable?: boolean
+		selected?: boolean
+		dividable?: boolean
+		disabled?: boolean
+		hovering?: boolean
+		class?: string
+		onclick?: () => void
+		onHover?: (hovering: boolean) => void
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		hoverable = false,
+		selected = false,
+		dividable = false,
+		disabled = false,
+		hovering = $bindable(false),
+		class: c = '',
+		onclick,
+		onHover,
+		children
+	}: Props = $props()
 </script>
 
 <tr
@@ -17,19 +33,19 @@
 		'transition-all',
 		dividable ? 'divide-x' : '',
 		disabled ? 'opacity-60' : '',
-		$$props.class
+		c
 	)}
-	on:click={() => {
-		dispatch('click')
+	onclick={() => {
+		onclick?.()
 	}}
-	on:mouseenter={() => {
+	onmouseenter={() => {
 		hovering = true
-		dispatch('hover', true)
+		onHover?.(true)
 	}}
-	on:mouseleave={() => {
+	onmouseleave={() => {
 		hovering = false
-		dispatch('hover', false)
+		onHover?.(false)
 	}}
 >
-	<slot />
+	{@render children?.()}
 </tr>
diff --git a/frontend/src/lib/components/triggers/AddTriggersButton.svelte b/frontend/src/lib/components/triggers/AddTriggersButton.svelte
index 094b303765..a21fbc215a 100644
--- a/frontend/src/lib/components/triggers/AddTriggersButton.svelte
+++ b/frontend/src/lib/components/triggers/AddTriggersButton.svelte
@@ -152,7 +152,7 @@
 	class={className}
 	customWidth={setDropdownWidthToButtonWidth ? triggersButtonWidth : undefined}
 	usePointerDownOutside
-	on:close={() => onClose?.()}
+	onClose={() => onClose?.()}
 >
 	{#snippet buttonReplacement()}
 		<div class={className} bind:clientWidth={triggersButtonWidth}>
diff --git a/frontend/src/lib/components/triggers/CaptureIcon.svelte b/frontend/src/lib/components/triggers/CaptureIcon.svelte
index 1b110992f2..db37ce41b2 100644
--- a/frontend/src/lib/components/triggers/CaptureIcon.svelte
+++ b/frontend/src/lib/components/triggers/CaptureIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { ScanIcon } from 'lucide-svelte'
 
-	export let size = 14
-	export let variant: 'redDot' | undefined = undefined
+	interface Props {
+		size?: number;
+		variant?: 'redDot' | undefined;
+	}
+
+	let { size = 14, variant = undefined }: Props = $props();
 </script>
 
 <div class="relative">
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index f6bc1d209f..d8e56aebdc 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -312,8 +312,8 @@
 					date={item.created_at}
 					payloadData={item.payloadData}
 					hovering={hover}
-					on:openChange={({ detail }) => {
-						updateViewerOpenState(item.id, detail)
+					onOpenChange={(isOpen) => {
+						updateViewerOpenState(item.id, isOpen)
 					}}
 					{viewerOpen}
 					{limitPayloadSize}
diff --git a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
index 8561fae505..92cc39fa3a 100644
--- a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
+++ b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
@@ -13,10 +13,19 @@
 	import { sendUserToast } from '$lib/toast'
 	import Button from '../common/button/Button.svelte'
 
-	export let kind: 'websocket' | 'nats' | 'kafka' | 'postgres' | 'sqs' | 'mqtt' | 'gcp'
-	export let args: Record<string, any>
-	export let noButton = false
-	export let testLoading: boolean = false
+	interface Props {
+		kind: 'websocket' | 'nats' | 'kafka' | 'postgres' | 'sqs' | 'mqtt' | 'gcp';
+		args: Record<string, any>;
+		noButton?: boolean;
+		testLoading?: boolean;
+	}
+
+	let {
+		kind,
+		args,
+		noButton = false,
+		testLoading = $bindable(false)
+	}: Props = $props();
 
 	const kindToName: { [key: string]: string } = {
 		websocket: 'WebSocket',
diff --git a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
index 85ec14250b..a09491e0ba 100644
--- a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
+++ b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
@@ -117,15 +117,17 @@
 				>
 					{trigger?.isDraft ? 'Deploy' : 'Update'}
 				</Button>
-				<span slot="text">
-					{#if !isDeployed}
-						Deploy the runnable to enable trigger creation
-					{:else if cloudDisabled}
-						This trigger is disabled in the multi-tenant cloud
-					{:else}
-						Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
-					{/if}
-				</span>
+				{#snippet text()}
+								<span >
+						{#if !isDeployed}
+							Deploy the runnable to enable trigger creation
+						{:else if cloudDisabled}
+							This trigger is disabled in the multi-tenant cloud
+						{:else}
+							Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
+						{/if}
+					</span>
+							{/snippet}
 			</Tooltip>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte b/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte
index 2985a38fdb..389359899c 100644
--- a/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte
+++ b/frontend/src/lib/components/triggers/TriggerSuspendedJobsModal.svelte
@@ -430,7 +430,7 @@
 
 							<Row
 								hoverable
-								on:click={() => window.open(`/run/${job.id}?workspace=${workspace}`, '_blank')}
+								onclick={() => window.open(`/run/${job.id}?workspace=${workspace}`, '_blank')}
 							>
 								<Cell class="w-12 sm:pl-3" shouldStopPropagation>
 									<div class="h-4 w-4">
diff --git a/frontend/src/lib/components/triggers/TriggerTokens.svelte b/frontend/src/lib/components/triggers/TriggerTokens.svelte
index b546a467a1..4cf1a5d027 100644
--- a/frontend/src/lib/components/triggers/TriggerTokens.svelte
+++ b/frontend/src/lib/components/triggers/TriggerTokens.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { FlowService, ScriptService, UserService, type TruncatedToken } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { getContext } from 'svelte'
@@ -7,13 +9,17 @@
 	import type { TriggerContext } from '../triggers'
 	import { capitalize } from '$lib/utils'
 
-	export let isFlow: boolean
-	export let path: string
-	export let labelPrefix: 'email' | 'webhook'
+	interface Props {
+		isFlow: boolean;
+		path: string;
+		labelPrefix: 'email' | 'webhook';
+	}
+
+	let { isFlow, path, labelPrefix }: Props = $props();
 
 	const { triggersCount } = getContext<TriggerContext>('TriggerContext')
 
-	let tokens: TruncatedToken[] | undefined = undefined
+	let tokens: TruncatedToken[] | undefined = $state(undefined)
 
 	export async function listTokens() {
 		tokens = (
@@ -35,7 +41,9 @@
 		await listTokens()
 	}
 
-	$: $workspaceStore && listTokens()
+	run(() => {
+		$workspaceStore && listTokens()
+	});
 </script>
 
 <div class="flex flex-col gap-2">
@@ -62,7 +70,7 @@
 							</div>
 							{#if token.email == $userStore?.email}
 								<button
-									on:click={() => deleteToken(token.token_prefix)}
+									onclick={() => deleteToken(token.token_prefix)}
 									class="text-xs text-secondary">delete</button
 								>
 							{:else}
diff --git a/frontend/src/lib/components/triggers/email/EmailCapture.svelte b/frontend/src/lib/components/triggers/email/EmailCapture.svelte
index 828a32b0d0..f77c15b5bd 100644
--- a/frontend/src/lib/components/triggers/email/EmailCapture.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailCapture.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import Label from '$lib/components/Label.svelte'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import type { CaptureInfo } from '../CaptureSection.svelte'
 	import CaptureSection from '../CaptureSection.svelte'
 	import { fade } from 'svelte/transition'
diff --git a/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
index 1ff7f10b01..54940b5710 100644
--- a/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
@@ -3,7 +3,7 @@
 	import Required from '$lib/components/Required.svelte'
 	import Section from '$lib/components/Section.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { getEmailAddress, getEmailDomain } from './utils'
 	import { isCloudHosted } from '$lib/cloud'
 	import Toggle from '$lib/components/Toggle.svelte'
diff --git a/frontend/src/lib/components/triggers/http/RouteCapture.svelte b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
index 983c6f3cd3..b1024573c9 100644
--- a/frontend/src/lib/components/triggers/http/RouteCapture.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
@@ -3,7 +3,7 @@
 	import Label from '$lib/components/Label.svelte'
 	import CopyableCodeBlock from '$lib/components/details/CopyableCodeBlock.svelte'
 	import { bash } from 'svelte-highlight/languages'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { base } from '$lib/base'
 	import type { CaptureInfo } from '../CaptureSection.svelte'
 	import CaptureSection from '../CaptureSection.svelte'
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
index 8bf579c34e..cbbaef9395 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
@@ -6,7 +6,7 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { HttpTriggerService } from '$lib/gen'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { getHttpRoute } from './utils'
 	import { isCloudHosted } from '$lib/cloud'
 	import Toggle from '$lib/components/Toggle.svelte'
diff --git a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
index b8f4a39759..efb37ae6fc 100644
--- a/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
+++ b/frontend/src/lib/components/triggers/http/RoutesGenerator.svelte
@@ -231,7 +231,7 @@
 									iconSize={24}
 									returnFileNames={true}
 									class="text-sm py-4"
-									on:change={async ({ detail }) => {
+									onChange={async (detail) => {
 										if (detail && detail.length > 0) {
 											if (openApiFile.endsWith('.json')) {
 												lang = 'json'
diff --git a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
index 92799b2685..66ff56189b 100644
--- a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
+++ b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
@@ -6,7 +6,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { emptyString } from '$lib/utils'
 
-	let loadingConfiguration = false
+	let loadingConfiguration = $state(false)
 
 	const checkDatabaseConfiguration = async () => {
 		if (emptyString(postgres_resource_path)) {
@@ -47,9 +47,13 @@
 		loadingConfiguration = false
 	}
 
-	export let can_write: boolean
-	export let postgres_resource_path: string
-	export let checkConnection: any | undefined = undefined
+	interface Props {
+		can_write: boolean;
+		postgres_resource_path: string;
+		checkConnection?: any | undefined;
+	}
+
+	let { can_write = $bindable(), postgres_resource_path = $bindable(), checkConnection = undefined }: Props = $props();
 </script>
 
 {#if postgres_resource_path}
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 3acdb82f8c..7513ed457d 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Button } from '$lib/components/common'
 	import Select from '$lib/components/select/Select.svelte'
 	import { safeSelectItems } from '$lib/components/select/utils.svelte'
@@ -9,17 +11,29 @@
 	import { emptyString } from '$lib/utils'
 	import { RefreshCw } from 'lucide-svelte'
 
-	export let items: string[] = []
-	export let can_write: boolean = true
-	export let publication_name: string = ''
-	export let postgres_resource_path: string = ''
-	export let relations: Relations[] | undefined = undefined
-	export let transaction_to_track: string[] = []
-	export let disabled: boolean = false
+	interface Props {
+		items?: string[];
+		can_write?: boolean;
+		publication_name?: string;
+		postgres_resource_path?: string;
+		relations?: Relations[] | undefined;
+		transaction_to_track?: string[];
+		disabled?: boolean;
+	}
 
-	let loadingPublication: boolean = false
-	let deletingPublication: boolean = false
-	let updatingPublication: boolean = false
+	let {
+		items = $bindable([]),
+		can_write = true,
+		publication_name = $bindable(''),
+		postgres_resource_path = '',
+		relations = $bindable(undefined),
+		transaction_to_track = $bindable([]),
+		disabled = false
+	}: Props = $props();
+
+	let loadingPublication: boolean = $state(false)
+	let deletingPublication: boolean = $state(false)
+	let updatingPublication: boolean = $state(false)
 	async function listDatabasePublication() {
 		try {
 			loadingPublication = true
@@ -94,7 +108,9 @@
 	}
 
 	listDatabasePublication()
-	$: publication_name && getAllRelations()
+	run(() => {
+		publication_name && getAllRelations()
+	});
 </script>
 
 <div class="flex gap-1">
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index 677eff5abf..ad1df7ae9a 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -8,14 +8,23 @@
 	import { emptyString } from '$lib/utils'
 	import { RefreshCw } from 'lucide-svelte'
 
-	export let edit: boolean
-	export let replication_slot_name: string = ''
-	export let postgres_resource_path: string = ''
-	export let disabled: boolean = false
+	interface Props {
+		edit: boolean;
+		replication_slot_name?: string;
+		postgres_resource_path?: string;
+		disabled?: boolean;
+	}
 
-	let deletingSlot: boolean = false
-	let loadingSlot: boolean = false
-	let items: (string | undefined)[] = []
+	let {
+		edit = $bindable(),
+		replication_slot_name = $bindable(''),
+		postgres_resource_path = '',
+		disabled = false
+	}: Props = $props();
+
+	let deletingSlot: boolean = $state(false)
+	let loadingSlot: boolean = $state(false)
+	let items: (string | undefined)[] = $state([])
 	async function listDatabaseSlot() {
 		try {
 			loadingSlot = true
diff --git a/frontend/src/lib/components/triggers/testingBadge.svelte b/frontend/src/lib/components/triggers/testingBadge.svelte
index 2deb844f21..182c8cd05d 100644
--- a/frontend/src/lib/components/triggers/testingBadge.svelte
+++ b/frontend/src/lib/components/triggers/testingBadge.svelte
@@ -5,5 +5,7 @@
 
 <Tooltip>
 	<FlaskConical size={14} class="text-primary inline-block" />
-	<span slot="text">Config used for creating a testing endpoint</span>
+	{#snippet text()}
+		<span >Config used for creating a testing endpoint</span>
+	{/snippet}
 </Tooltip>
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index b359a76625..9bdf67ab94 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -15,7 +15,7 @@
 	import { typescript } from 'svelte-highlight/languages'
 	import ClipboardPanel from '../../details/ClipboardPanel.svelte'
 	import { copyToClipboard, isObject, readFieldsRecursively } from '$lib/utils'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { base } from '$lib/base'
 	import TriggerTokens from '../TriggerTokens.svelte'
 	import { workspaceStore, userStore } from '$lib/stores'
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
index ba64404e12..7fb8307c33 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
@@ -34,22 +34,24 @@
 		{isFlow}
 		{captureLoading}
 	>
-		<svelte:fragment slot="description">
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listenning to websocket events...
-					</p>
+		{#snippet description()}
+			
+				{#if captureInfo.active}
+					{#if captureInfo.connectionInfo?.connected}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Listenning to websocket events...
+						</p>
+					{:else}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Connecting to websocket...
+						</p>
+					{/if}
 				{:else}
 					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to websocket...
+						Start capturing to listen to websocket events.
 					</p>
 				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to websocket events.
-				</p>
-			{/if}
-		</svelte:fragment>
+			
+			{/snippet}
 	</CaptureSection>
 {/if}
diff --git a/frontend/src/lib/components/tutorials/Tutorial.svelte b/frontend/src/lib/components/tutorials/Tutorial.svelte
index 1ef9e2b53c..fc95141f5c 100644
--- a/frontend/src/lib/components/tutorials/Tutorial.svelte
+++ b/frontend/src/lib/components/tutorials/Tutorial.svelte
@@ -8,20 +8,30 @@
 	import TutorialInner from './TutorialInner.svelte'
 	import { isCurrentlyInTutorial } from '$lib/stores'
 
-	export let index: number = 0
-	export let name: string = 'action'
-	export let tainted: boolean = false
-	export let onDestroyed: (() => void) | undefined = undefined
 
 	type Options = {
 		indexToInsertAt?: number
 		skipStepsCount?: number
 	}
 
-	export let getSteps: (driver: Driver, options?: Options | undefined) => DriveStep[] = () => []
+	interface Props {
+		index?: number;
+		name?: string;
+		tainted?: boolean;
+		onDestroyed?: (() => void) | undefined;
+		getSteps?: (driver: Driver, options?: Options | undefined) => DriveStep[];
+	}
+
+	let {
+		index = 0,
+		name = 'action',
+		tainted = false,
+		onDestroyed = undefined,
+		getSteps = () => []
+	}: Props = $props();
 
 	let totalSteps = 0
-	let tutorial: Driver | undefined = undefined
+	let tutorial: Driver | undefined = $state(undefined)
 	const dispatch = createEventDispatcher()
 
 	// Render controls needs to be exposed so steps that have a custom render can call it
diff --git a/frontend/src/lib/components/tutorials/TutorialControls.svelte b/frontend/src/lib/components/tutorials/TutorialControls.svelte
index 96c0b7385b..826e66d151 100644
--- a/frontend/src/lib/components/tutorials/TutorialControls.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialControls.svelte
@@ -4,8 +4,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import Alert from '../common/alert/Alert.svelte'
 
-	export let activeIndex: number | undefined = undefined
-	export let totalSteps: number | undefined = undefined
+	interface Props {
+		activeIndex?: number | undefined;
+		totalSteps?: number | undefined;
+	}
+
+	let { activeIndex = undefined, totalSteps = undefined }: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
diff --git a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
index 16524af0b5..f2e14afaa6 100644
--- a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
@@ -4,10 +4,14 @@
 	import Tutorial from '../Tutorial.svelte'
 	import { clickButtonBySelector } from '../utils'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial(skipStepsCount: number | undefined = undefined) {
 		tutorial?.runTutorial({ skipStepsCount })
diff --git a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
index 3044a6c973..8de12833dd 100644
--- a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
@@ -8,10 +8,14 @@
 	import { clickButtonBySelector } from '../utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	const { app, selectedComponent, focusedGrid } = getContext<AppViewerContext>('AppViewerContext')
 	const { history } = getContext<AppEditorContext>('AppEditorContext')
diff --git a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
index e986b05719..1e96e8b121 100644
--- a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import Tutorial from '../Tutorial.svelte'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial() {
 		tutorial?.runTutorial()
diff --git a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte
index 5051719508..4251a67170 100644
--- a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte
@@ -4,7 +4,7 @@
 	import type { DriveStep } from 'driver.js'
 	import { goto } from '$app/navigation'
 	import { base } from '$lib/base'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { wait } from '$lib/utils'
 	import { DELAY_MEDIUM } from '../utils'
 
@@ -18,7 +18,7 @@
 
 	export function runTutorial() {
 		// Check if we're on the homepage
-		if ($page.url.pathname !== `${base}/` && $page.url.pathname !== `${base}`) {
+		if (page.url.pathname !== `${base}/` && page.url.pathname !== `${base}`) {
 			// Redirect to homepage with a tutorial parameter
 			goto(`${base}/?tutorial=workspace-onboarding-operator`)
 		} else {
@@ -127,7 +127,7 @@
 						driver.destroy()
 
 						// Clean up URL parameter if present
-						if ($page.url.searchParams.has('tutorial')) {
+						if (page.url.searchParams.has('tutorial')) {
 							goto(`${base}/`, { replaceState: true })
 						}
 					}
diff --git a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte
index c599776965..cc73088b77 100644
--- a/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte
@@ -4,7 +4,7 @@
 	import type { DriveStep } from 'driver.js'
 	import { goto } from '$app/navigation'
 	import { base } from '$lib/base'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	interface Props {
 		index: number
@@ -16,7 +16,7 @@
 
 	export function runTutorial() {
 		// Check if we're on the homepage
-		if ($page.url.pathname !== `${base}/` && $page.url.pathname !== `${base}`) {
+		if (page.url.pathname !== `${base}/` && page.url.pathname !== `${base}`) {
 			// Redirect to homepage with a tutorial parameter
 			goto(`${base}/?tutorial=workspace-onboarding`)
 		} else {
@@ -100,7 +100,7 @@
 						driver.destroy()
 
 						// Clean up URL parameter if present
-						if ($page.url.searchParams.has('tutorial')) {
+						if (page.url.searchParams.has('tutorial')) {
 							goto(`${base}/`, { replaceState: true })
 						}
 					}
diff --git a/frontend/src/lib/components/wizards/AppPicker.svelte b/frontend/src/lib/components/wizards/AppPicker.svelte
index b0369d3c96..e6ee5b3f25 100644
--- a/frontend/src/lib/components/wizards/AppPicker.svelte
+++ b/frontend/src/lib/components/wizards/AppPicker.svelte
@@ -8,12 +8,16 @@
 	import Alert from '../common/alert/Alert.svelte'
 	import Select from '../select/Select.svelte'
 
-	export let value = ''
-	let darkMode = false
+	interface Props {
+		value?: string;
+	}
+
+	let { value = $bindable('') }: Props = $props();
+	let darkMode = $state(false)
 
 	const { appPath } = getContext<AppViewerContext>('AppViewerContext')
 
-	let apps: ListableApp[] = []
+	let apps: ListableApp[] = $state([])
 
 	async function loadApps(): Promise<void> {
 		apps = (await AppService.listApps({ workspace: $workspaceStore!, includeDraftOnly: true })).map(
diff --git a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
index 3d372ec06f..7f4b4e0f67 100644
--- a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
+++ b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
@@ -15,7 +15,7 @@
 	} from '$lib/gen'
 	import { validateUsername } from '$lib/utils'
 	import { logoutWithRedirect } from '$lib/logoutKit'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { usersWorkspaceStore, workspaceStore } from '$lib/stores'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { Button } from '$lib/components/common'
@@ -41,7 +41,7 @@
 
 	let { isFork = false }: Props = $props()
 
-	const rd = $page.url.searchParams.get('rd')
+	const rd = page.url.searchParams.get('rd')
 
 	let id = $state('')
 	let name = $state('')
@@ -289,7 +289,7 @@
 			} catch {}
 		}
 		if (!$usersWorkspaceStore) {
-			const url = $page.url
+			const url = page.url
 			console.log('logout 2')
 			await logoutWithRedirect(url.href.replace(url.origin, ''))
 		}
diff --git a/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte b/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
index 188d736e9f..935d9e5f0e 100644
--- a/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DataTableSettings.svelte
@@ -261,15 +261,19 @@
 							contentClasses="p-2 text-sm text-secondary italic"
 							class="cursor-not-allowed"
 						>
-							<svelte:fragment slot="trigger">
-								<ExploreAssetButton
-									class="h-9"
-									asset={{ kind: 'datatable', path: dataTable.name }}
-									{dbManagerDrawer}
-									disabled
-								/>
-							</svelte:fragment>
-							<svelte:fragment slot="content">Please save settings first</svelte:fragment>
+							{#snippet trigger()}
+													
+									<ExploreAssetButton
+										class="h-9"
+										asset={{ kind: 'datatable', path: dataTable.name }}
+										{dbManagerDrawer}
+										disabled
+									/>
+								
+													{/snippet}
+							{#snippet content()}
+														Please save settings first
+													{/snippet}
 						</Popover>
 					{:else}
 						<ExploreAssetButton
diff --git a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
index 4a9137dfbd..e92e8631bb 100644
--- a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
@@ -334,29 +334,33 @@
 				<Cell class="w-12">
 					<div class="flex gap-2">
 						<Popover contentClasses="p-4" enableFlyTransition closeOnOtherPopoverOpen>
-							<svelte:fragment slot="trigger">
-								<div class="relative">
-									<Button variant="default" iconOnly size="sm" endIcon={{ icon: SettingsIcon }} />
-									{#if ducklake.extra_args}
-										<div
-											class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent rounded-full border border-surface"
-										></div>
-									{/if}
-								</div>
-							</svelte:fragment>
-							<svelte:fragment slot="content">
-								<Label
-									label="Extra args"
-									tooltip="Additional arguments to pass in the ATTACH command. The argument list is substituted as-is. Separate them with commas."
-								>
-									<TextInput
-										bind:value={ducklake.extra_args}
-										class="min-w-96"
-										underlyingInputEl="textarea"
-										inputProps={{ placeholder: "METADATA_SCHEMA 'schema', ENCRYPTED true" }}
-									/>
-								</Label>
-							</svelte:fragment>
+							{#snippet trigger()}
+													
+									<div class="relative">
+										<Button variant="default" iconOnly size="sm" endIcon={{ icon: SettingsIcon }} />
+										{#if ducklake.extra_args}
+											<div
+												class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-accent rounded-full border border-surface"
+											></div>
+										{/if}
+									</div>
+								
+													{/snippet}
+							{#snippet content()}
+													
+									<Label
+										label="Extra args"
+										tooltip="Additional arguments to pass in the ATTACH command. The argument list is substituted as-is. Separate them with commas."
+									>
+										<TextInput
+											bind:value={ducklake.extra_args}
+											class="min-w-96"
+											underlyingInputEl="textarea"
+											inputProps={{ placeholder: "METADATA_SCHEMA 'schema', ENCRYPTED true" }}
+										/>
+									</Label>
+								
+													{/snippet}
 						</Popover>
 						{#if ducklakeIsDirty[ducklake.name]}
 							<Popover
@@ -364,10 +368,14 @@
 								contentClasses="p-2 text-sm text-secondary italic"
 								class="cursor-not-allowed"
 							>
-								<svelte:fragment slot="trigger">
-									<ExploreAssetButton asset={{ kind: 'ducklake', path: '' }} disabled />
-								</svelte:fragment>
-								<svelte:fragment slot="content">Please save settings first</svelte:fragment>
+								{#snippet trigger()}
+															
+										<ExploreAssetButton asset={{ kind: 'ducklake', path: '' }} disabled />
+									
+															{/snippet}
+								{#snippet content()}
+																Please save settings first
+															{/snippet}
 							</Popover>
 						{:else}
 							<ExploreAssetButton
diff --git a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
index db17250222..4389a2967f 100644
--- a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
@@ -204,16 +204,20 @@
 									contentClasses="p-2 text-xs text-secondary"
 									class="cursor-not-allowed"
 								>
-									<svelte:fragment slot="trigger">
-										<ExploreAssetButton asset={{ kind: 's3object', path: '' }} disabled />
-									</svelte:fragment>
-									<svelte:fragment slot="content">
-										{#if emptyString(tableRow[1].resourcePath)}
-											Please select a storage resource
-										{:else if isDirty(tableRow[0])}
-											Please save your changes
-										{/if}
-									</svelte:fragment>
+									{#snippet trigger()}
+																	
+											<ExploreAssetButton asset={{ kind: 's3object', path: '' }} disabled />
+										
+																	{/snippet}
+									{#snippet content()}
+																	
+											{#if emptyString(tableRow[1].resourcePath)}
+												Please select a storage resource
+											{:else if isDirty(tableRow[0])}
+												Please save your changes
+											{/if}
+										
+																	{/snippet}
 								</Popover>
 							{:else}
 								<ExploreAssetButton
diff --git a/frontend/src/lib/components/workspaceSettings/WorkspaceIntegrations.svelte b/frontend/src/lib/components/workspaceSettings/WorkspaceIntegrations.svelte
index 08e91719f0..4f51621f58 100644
--- a/frontend/src/lib/components/workspaceSettings/WorkspaceIntegrations.svelte
+++ b/frontend/src/lib/components/workspaceSettings/WorkspaceIntegrations.svelte
@@ -13,7 +13,7 @@
 	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
 	import { createAsyncConfirmationModal } from '../common/confirmationModal/asyncConfirmationModal.svelte'
 	import Path from '$lib/components/Path.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { goto } from '$app/navigation'
 
 	interface WorkspaceIntegration {
@@ -250,7 +250,7 @@
 		const integration = getIntegrationByService(serviceName)
 		resourcePath = integration?.resource_path ?? undefined
 
-		const url = new URL($page.url)
+		const url = new URL(page.url)
 		url.searchParams.delete('code')
 		url.searchParams.delete('state')
 		url.searchParams.delete('service')
@@ -286,14 +286,14 @@
 
 	$effect(() => {
 		if (
-			$page.url.searchParams.has('code') &&
-			$page.url.searchParams.has('state') &&
-			$page.url.searchParams.has('service') &&
+			page.url.searchParams.has('code') &&
+			page.url.searchParams.has('state') &&
+			page.url.searchParams.has('service') &&
 			$workspaceStore
 		) {
-			const service = $page.url.searchParams.get('service')! as NativeServiceName
-			const code = $page.url.searchParams.get('code')!
-			const state = $page.url.searchParams.get('state')!
+			const service = page.url.searchParams.get('service')! as NativeServiceName
+			const code = page.url.searchParams.get('code')!
+			const state = page.url.searchParams.get('state')!
 			handleOAuthCallback($workspaceStore, service, code, state)
 		}
 	})
diff --git a/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte b/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte
index 3101efed9a..6d7a72bcc6 100644
--- a/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte
+++ b/frontend/src/lib/components/workspaceSettings/WorkspaceRulesets.svelte
@@ -137,7 +137,7 @@
 				{#each rules as rule (rule.name)}
 					<Row
 						hoverable
-						on:click={() => {
+						onclick={() => {
 							selectedRule = rule
 							ruleDrawer?.openDrawer()
 						}}
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 4260bbeede..4a1114710b 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -43,7 +43,7 @@
 	import UserSettings from '$lib/components/UserSettings.svelte'
 	import SuperadminSettings from '$lib/components/SuperadminSettings.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import FavoriteMenu, {
 		favoriteManager,
 		getFavoriteHref,
@@ -72,10 +72,10 @@
 		children?: import('svelte').Snippet
 	}
 
-	const remoteUrlParam = $page.url.searchParams.get('remote_url')
+	const remoteUrlParam = page.url.searchParams.get('remote_url')
 	if (remoteUrlParam) {
 		document.cookie = `remote_url=${remoteUrlParam}; path=/; secure; samesite=strict`
-		$page.url.searchParams.delete('remote_url')
+		page.url.searchParams.delete('remote_url')
 	}
 
 	let { children }: Props = $props()
@@ -92,32 +92,32 @@
 	const SIDEBAR_BG = '#F3F3F7'
 	const SIDEBAR_BG_DARK = '#1e232e'
 
-	if ($page.status == 404) {
+	if (page.status == 404) {
 		goto('/user/login')
 	}
 
 	function onQueryChangeUserSettings() {
-		if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
-			const mcpMode = $page.url.hash.includes('-mcp')
+		if (userSettings && page.url.hash.startsWith(USER_SETTINGS_HASH)) {
+			const mcpMode = page.url.hash.includes('-mcp')
 			userSettings.openDrawer(mcpMode)
 		}
 	}
 
 	function onQueryChangeAdminSettings() {
-		if (superadminSettings && $page.url.hash === SUPERADMIN_SETTINGS_HASH) {
+		if (superadminSettings && page.url.hash === SUPERADMIN_SETTINGS_HASH) {
 			superadminSettings.openDrawer()
 		}
 	}
 
 	function onQueryChange() {
-		let queryWorkspace = $page.url.searchParams.get('workspace')
+		let queryWorkspace = page.url.searchParams.get('workspace')
 		if (queryWorkspace) {
 			$workspaceStore = queryWorkspace
 		}
 
 		menuHidden =
-			$page.url.searchParams.get('nomenubar') === 'true' ||
-			$page.url.pathname.startsWith('/oauth/callback/')
+			page.url.searchParams.get('nomenubar') === 'true' ||
+			page.url.pathname.startsWith('/oauth/callback/')
 	}
 
 	async function updateUserStore(workspace: string | undefined) {
@@ -302,7 +302,7 @@
 		}
 	}
 
-	let devOnly = $derived($page.url.pathname.startsWith(base + '/scripts/dev'))
+	let devOnly = $derived(page.url.pathname.startsWith(base + '/scripts/dev'))
 
 	async function loadDefaultScripts(workspace: string, user: UserExt | undefined) {
 		if (!user?.operator) {
@@ -378,13 +378,13 @@
 	}
 
 	$effect(() => {
-		$page.url && userSettings != undefined && untrack(() => onQueryChangeUserSettings())
+		page.url && userSettings != undefined && untrack(() => onQueryChangeUserSettings())
 	})
 	$effect(() => {
-		$page.url && superadminSettings != undefined && untrack(() => onQueryChangeAdminSettings())
+		page.url && superadminSettings != undefined && untrack(() => onQueryChangeAdminSettings())
 	})
 	$effect(() => {
-		$page.url && untrack(() => onQueryChange())
+		page.url && untrack(() => onQueryChange())
 	})
 	$effect(() => {
 		$workspaceStore
@@ -456,7 +456,7 @@
 <svelte:window bind:innerWidth />
 
 <UserSettings bind:this={userSettings} showMcpMode={true} />
-{#if $page.status == 404}
+{#if page.status == 404}
 	<CenteredModal title="Page not found, redirecting you to login" loading={true}></CenteredModal>
 {:else if $userStore}
 	<GlobalSearchModal bind:this={globalSearchModal} />
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index b52b726ea2..9f7c9b493c 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -32,7 +32,7 @@
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
 	import { HOME_SHOW_HUB, HOME_SHOW_CREATE_FLOW, HOME_SHOW_CREATE_APP } from '$lib/consts'
 	import { setQuery } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { goto, replaceState } from '$app/navigation'
 	import ForkWorkspaceBanner from '$lib/components/ForkWorkspaceBanner.svelte'
 	import WorkspaceTutorials from '$lib/components/WorkspaceTutorials.svelte'
@@ -111,7 +111,7 @@
 
 	onMount(() => {
 		// Check if there's a tutorial parameter in the URL
-		const tutorialParam = $page.url.searchParams.get('tutorial')
+		const tutorialParam = page.url.searchParams.get('tutorial')
 		if (tutorialParam === 'workspace-onboarding') {
 			// Small delay to ensure page is fully loaded
 			setTimeout(() => {
@@ -256,7 +256,7 @@
 						}}
 						summary={appViewerApp?.app.summary ?? ''}
 						noBackend
-						replaceStateFn={(path) => replaceState(path, $page.state)}
+						replaceStateFn={(path) => replaceState(path, page.state)}
 						gotoFn={(path, opt) => goto(path, opt)}
 					/>
 				{/await}
@@ -312,7 +312,7 @@
 						<ToggleButtonGroup
 							bind:selected={subtab}
 							onSelected={(v) => {
-								setQuery($page.url, 'kind', v, window.location.hash)
+								setQuery(page.url, 'kind', v, window.location.hash)
 							}}
 							noWFull
 						>
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
index 14e884526a..a7da73e596 100644
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -3,7 +3,7 @@
 
 	import AppEditor from '$lib/components/apps/editor/AppEditor.svelte'
 	import { AppService, type Policy } from '$lib/gen'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { decodeState } from '$lib/utils'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import type { App } from '$lib/components/apps/types'
@@ -16,11 +16,11 @@
 	import { emptyApp } from '$lib/components/apps/editor/appUtils'
 	import { tick } from 'svelte'
 
-	let nodraft = $page.url.searchParams.get('nodraft')
+	let nodraft = page.url.searchParams.get('nodraft')
 	let appEditor: AppEditor | undefined = $state(undefined)
-	const hubId = $page.url.searchParams.get('hub')
-	const templatePath = $page.url.searchParams.get('template')
-	const templateId = $page.url.searchParams.get('template_id')
+	const hubId = page.url.searchParams.get('hub')
+	const templatePath = page.url.searchParams.get('template')
+	const templateId = page.url.searchParams.get('template_id')
 
 	const importRaw = $importStore
 	if ($importStore) {
@@ -42,9 +42,9 @@
 	})
 	afterNavigate(() => {
 		if (nodraft) {
-			let url = new URL($page.url.href)
+			let url = new URL(page.url.href)
 			url.search = ''
-			replaceState(url.toString(), $page.state)
+			replaceState(url.toString(), page.state)
 		}
 	})
 	let policy: Policy = $state({
@@ -115,7 +115,7 @@
 		}
 
 		// Trigger tutorial after everything is initialized
-		const tutorialParam = $page.url.searchParams.get('tutorial')
+		const tutorialParam = page.url.searchParams.get('tutorial')
 		if (tutorialParam) {
 			// Wait for critical elements to be ready before triggering tutorial
 			await tick()
@@ -143,7 +143,7 @@
 				{policy}
 				fromHub={hubId != null}
 				newApp={true}
-				replaceStateFn={(path) => replaceState(path, $page.state)}
+				replaceStateFn={(path) => replaceState(path, page.state)}
 				gotoFn={(path, opt) => goto(path, opt)}
 			>
 				{#snippet unsavedConfirmationModal({
diff --git a/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte
index 8d8d66ef9a..db7b7da001 100644
--- a/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte
@@ -4,7 +4,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { onDestroy, onMount } from 'svelte'
 	import { page } from '$app/state'
-	let loaded = false
+	let loaded = $state(false)
 
 	onMount(async () => {
 		globalThis.windmill = {
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 6181204e3b..46cd0c3d20 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
@@ -2,7 +2,7 @@
 	import { importStore } from '$lib/components/apps/store'
 
 	import { AppService, type Policy } from '$lib/gen'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { decodeState } from '$lib/utils'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { afterNavigate, replaceState } from '$app/navigation'
@@ -36,10 +36,10 @@
 	import { Alert } from '$lib/components/common'
 	import { AIBtnClasses } from '$lib/components/copilot/chat/AIButtonStyle'
 
-	let nodraft = $page.url.searchParams.get('nodraft')
-	const templatePath = $page.url.searchParams.get('template')
-	const templateId = $page.url.searchParams.get('template_id')
-	const hubId = $page.url.searchParams.get('hub')
+	let nodraft = page.url.searchParams.get('nodraft')
+	const templatePath = page.url.searchParams.get('template')
+	const templateId = page.url.searchParams.get('template_id')
+	const hubId = page.url.searchParams.get('hub')
 
 	const importRaw = $importStore
 	if ($importStore) {
@@ -52,9 +52,9 @@
 	let files: Record<string, string> = $state(react19Template)
 	afterNavigate(() => {
 		if (nodraft) {
-			let url = new URL($page.url.href)
+			let url = new URL(page.url.href)
 			url.search = ''
-			replaceState(url.toString(), $page.state)
+			replaceState(url.toString(), page.state)
 		}
 	})
 	let policy: Policy = $state({
diff --git a/frontend/src/routes/(root)/(logged)/assets/+page.svelte b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
index 6a8c261b14..4884460827 100644
--- a/frontend/src/routes/(root)/(logged)/assets/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
@@ -316,7 +316,9 @@
 					<Cell first class="w-16">
 						<Tooltip>
 							<AssetGenericIcon assetKind={asset.kind} size="16px" class="!text-secondary" />
-							<svelte:fragment slot="text">{formatAssetKind(asset)}</svelte:fragment>
+							{#snippet text()}
+														{formatAssetKind(asset)}
+													{/snippet}
 						</Tooltip>
 					</Cell>
 					<Cell class="flex flex-col">
@@ -340,7 +342,9 @@
 						{#if asset.kind === 'resource' && asset.metadata === undefined}
 							<Tooltip class={'w-24 flex items-center justify-center'}>
 								<AlertTriangle size={20} class="text-orange-600 dark:text-orange-500" />
-								<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+								{#snippet text()}
+																Could not find resource
+															{/snippet}
 							</Tooltip>
 						{/if}
 					</Cell>
diff --git a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
index a24a047866..59383b8d59 100644
--- a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
@@ -11,10 +11,10 @@
 	import { sleep } from '$lib/utils'
 	import { onDestroy, onMount } from 'svelte'
 
-	let concurrencyGroups: ConcurrencyGroup[] | undefined = undefined
+	let concurrencyGroups: ConcurrencyGroup[] | undefined = $state(undefined)
 
 	let doLoadConcurrencyGroups = false
-	let concurrencyGroupsLoading = false
+	let concurrencyGroupsLoading = $state(false)
 
 	onMount(() => {
 		doLoadConcurrencyGroups = true
@@ -78,40 +78,44 @@
 	{#if concurrencyGroups && concurrencyGroups.length > 0}
 		<div class="relative mb-20 pt-8">
 			<TableCustom>
-				<tr slot="header-row">
-					<th>Concurrency key</th>
-					<th>Jobs running</th>
-					<th></th>
-				</tr>
-				<tbody slot="body">
-					{#each concurrencyGroups as { concurrency_key, total_running }}
-						<tr>
-							<td>
-								<a
-									href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrency_key}`}
-									>{concurrency_key}
-								</a>
-							</td>
-							<td>
-								{total_running}
-							</td>
-							<td>
-								<div class="flex justify-center">
-									<Button
-										size="md"
-										color="light"
-										btnClasses="justify-center w-12"
-										startIcon={{ icon: Trash, classes: 'text-red-500' }}
-										on:click={() => {
-											deleteConcurrencyGroup(concurrency_key)
-										}}
-										iconOnly={true}
-									/>
-								</div>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
+				{#snippet header_row()}
+					<tr>
+						<th>Concurrency key</th>
+						<th>Jobs running</th>
+						<th></th>
+					</tr>
+				{/snippet}
+				{#snippet body()}
+								<tbody >
+						{#each concurrencyGroups as { concurrency_key, total_running }}
+							<tr>
+								<td>
+									<a
+										href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrency_key}`}
+										>{concurrency_key}
+									</a>
+								</td>
+								<td>
+									{total_running}
+								</td>
+								<td>
+									<div class="flex justify-center">
+										<Button
+											size="md"
+											color="light"
+											btnClasses="justify-center w-12"
+											startIcon={{ icon: Trash, classes: 'text-red-500' }}
+											on:click={() => {
+												deleteConcurrencyGroup(concurrency_key)
+											}}
+											iconOnly={true}
+										/>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+							{/snippet}
 			</TableCustom>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
index a3099e2be9..411576ef41 100644
--- a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
 	import { afterNavigate, replaceState } from '$app/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
@@ -14,20 +14,20 @@
 	import { replaceScriptPlaceholderWithItsValues } from '$lib/hub'
 	import type { Trigger } from '$lib/components/triggers/utils'
 
-	let nodraft = $page.url.searchParams.get('nodraft')
+	let nodraft = page.url.searchParams.get('nodraft')
 
 	afterNavigate(() => {
 		if (nodraft) {
-			let url = new URL($page.url.href)
+			let url = new URL(page.url.href)
 			url.search = ''
-			replaceState(url.toString(), $page.state)
+			replaceState(url.toString(), page.state)
 		}
 	})
 
-	const hubId = $page.url.searchParams.get('hub')
-	const templatePath = $page.url.searchParams.get('template')
-	const templateId = $page.url.searchParams.get('template_id')
-	const isFork = $page.url.searchParams.get('fork')
+	const hubId = page.url.searchParams.get('hub')
+	const templatePath = page.url.searchParams.get('template')
+	const templateId = page.url.searchParams.get('template_id')
+	const isFork = page.url.searchParams.get('fork')
 
 	let forkState: any = undefined
 	if (isFork) {
@@ -90,7 +90,7 @@
 		}
 
 		let state = forkState ?? (initialState ? decodeState(initialState) : undefined)
-		const initialStateQuery = $page.url.hash != '' ? $page.url.hash.slice(1) : undefined
+		const initialStateQuery = page.url.hash != '' ? page.url.hash.slice(1) : undefined
 
 		if (initialStateQuery) {
 			state = decodeState(initialStateQuery)
@@ -171,7 +171,7 @@
 		loading = false
 
 		// Trigger tutorial after everything is initialized
-		const tutorialParam = $page.url.searchParams.get('tutorial')
+		const tutorialParam = page.url.searchParams.get('tutorial')
 		if (tutorialParam) {
 			// Wait for critical elements to be ready before triggering tutorial
 			await tick()
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 9c095fed58..cb26928f93 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -507,7 +507,6 @@
 					}
 				: undefined}
 		>
-			<!-- @migration-task: migrate this slot by hand, `trigger-badges` is an invalid identifier -->
 			{#snippet trigger_badges()}
 				<TriggersBadge
 					showOnlyWithCount={true}
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 414ce0f51d..cdc194cedc 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -164,7 +164,7 @@
 						{#each folders as { name, extra_perms, owners, canWrite, summary } (name)}
 							<Row
 								hoverable
-								on:click={() => {
+								onclick={() => {
 									editFolderName = name
 									folderDrawer?.openDrawer()
 								}}
diff --git a/frontend/src/routes/(root)/(logged)/groups/+page.svelte b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
index 40cd5d7373..f43b5787b5 100644
--- a/frontend/src/routes/(root)/(logged)/groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/groups/+page.svelte
@@ -151,7 +151,7 @@
 						{#each groups as { name, summary, extra_perms, canWrite } (name)}
 							<Row
 								hoverable
-								on:click={() => {
+								onclick={() => {
 									editGroupName = name
 									groupDrawer?.openDrawer()
 								}}
diff --git a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
index 2ddd4f66c6..ea5b4f47c3 100644
--- a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import type { InstanceGroup } from '$lib/gen'
 	import { GroupService } from '$lib/gen'
 
@@ -11,9 +13,9 @@
 	import { Plus } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	let newGroupName: string = ''
-	let instanceGroups: InstanceGroup[] | undefined = undefined
-	let groupDrawer: Drawer
+	let newGroupName: string = $state('')
+	let instanceGroups: InstanceGroup[] | undefined = $state(undefined)
+	let groupDrawer: Drawer = $state()
 
 	async function loadInstanceGroups(): Promise<void> {
 		try {
@@ -32,11 +34,11 @@
 		groupDrawer.openDrawer()
 	}
 
-	$: {
+	run(() => {
 		loadInstanceGroups()
-	}
+	});
 
-	let editGroupName: string = ''
+	let editGroupName: string = $state('')
 </script>
 
 <Drawer bind:this={groupDrawer}>
@@ -53,25 +55,29 @@
 					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 				>
-					<svelte:fragment slot="trigger">
-						<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New&nbsp;group</Button>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<div class="flex-col flex gap-2 p-4">
-							<input class="mr-2" placeholder="New instance group name" bind:value={newGroupName} />
-							<Button
-								size="md"
-								startIcon={{ icon: Plus }}
-								disabled={!newGroupName}
-								on:click={() => {
-									addInstanceGroup()
-									close()
-								}}
-							>
-								Create
-							</Button>
-						</div>
-					</svelte:fragment>
+					{#snippet trigger()}
+									
+							<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New&nbsp;group</Button>
+						
+									{/snippet}
+					{#snippet content({ close })}
+									
+							<div class="flex-col flex gap-2 p-4">
+								<input class="mr-2" placeholder="New instance group name" bind:value={newGroupName} />
+								<Button
+									size="md"
+									startIcon={{ icon: Plus }}
+									disabled={!newGroupName}
+									on:click={() => {
+										addInstanceGroup()
+										close()
+									}}
+								>
+									Create
+								</Button>
+							</div>
+						
+									{/snippet}
 				</Popover>
 			</div>
 		</div>
@@ -80,43 +86,47 @@
 	{#if instanceGroups && instanceGroups.length > 0}
 		<div class="relative mb-20 pt-8">
 			<TableCustom>
-				<tr slot="header-row">
-					<th>Name</th>
-					<th>Summary</th>
-					<th>Members</th>
-					<th></th>
-				</tr>
-				<tbody slot="body">
-					{#each instanceGroups as { name, summary, emails }}
-						<tr>
-							<td>
-								<a
-									href="#{name}"
-									on:click={() => {
+				{#snippet header_row()}
+					<tr>
+						<th>Name</th>
+						<th>Summary</th>
+						<th>Members</th>
+						<th></th>
+					</tr>
+				{/snippet}
+				{#snippet body()}
+								<tbody >
+						{#each instanceGroups as { name, summary, emails }}
+							<tr>
+								<td>
+									<a
+										href="#{name}"
+										onclick={() => {
 										editGroupName = name
 										groupDrawer.openDrawer()
 									}}
-									>{name}
-								</a>
-							</td>
-							<td>
-								{summary ? summary.slice(0, 50) + (summary.length > 50 ? '...' : '') : '-'}
-							</td>
-							<td>{emails?.length ?? 0} members</td>
-							<td
-								><Button
-									variant="default"
-									destructive
-									on:click={async () => {
-										await GroupService.deleteInstanceGroup({ name })
-										sendUserToast(`Instance group ${name} deleted`)
-										loadInstanceGroups()
-									}}>Delete</Button
-								></td
-							>
-						</tr>
-					{/each}
-				</tbody>
+										>{name}
+									</a>
+								</td>
+								<td>
+									{summary ? summary.slice(0, 50) + (summary.length > 50 ? '...' : '') : '-'}
+								</td>
+								<td>{emails?.length ?? 0} members</td>
+								<td
+									><Button
+										variant="default"
+										destructive
+										on:click={async () => {
+											await GroupService.deleteInstanceGroup({ name })
+											sendUserToast(`Instance group ${name} deleted`)
+											loadInstanceGroups()
+										}}>Delete</Button
+									></td
+								>
+							</tr>
+						{/each}
+					</tbody>
+							{/snippet}
 			</TableCustom>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/(root)/(logged)/oauth/mcp_authorize/+page.svelte b/frontend/src/routes/(root)/(logged)/oauth/mcp_authorize/+page.svelte
index 01fec29ff0..99b7691aa5 100644
--- a/frontend/src/routes/(root)/(logged)/oauth/mcp_authorize/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/oauth/mcp_authorize/+page.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { Button } from '$lib/components/common'
 	import { sendUserToast } from '$lib/toast'
 	import { Check, Info } from 'lucide-svelte'
 
 	// Get OAuth params from URL
-	let workspaceId = $page.url.searchParams.get('workspace_id') || ''
-	let clientId = $page.url.searchParams.get('client_id') || ''
-	let clientName = $page.url.searchParams.get('client_name') || 'Unknown Client'
-	let redirectUri = $page.url.searchParams.get('redirect_uri') || ''
-	let scope = $page.url.searchParams.get('scope') || 'mcp:all'
-	let oauthState = $page.url.searchParams.get('state') || ''
-	let codeChallenge = $page.url.searchParams.get('code_challenge') || ''
-	let codeChallengeMethod = $page.url.searchParams.get('code_challenge_method') || ''
+	let workspaceId = page.url.searchParams.get('workspace_id') || ''
+	let clientId = page.url.searchParams.get('client_id') || ''
+	let clientName = page.url.searchParams.get('client_name') || 'Unknown Client'
+	let redirectUri = page.url.searchParams.get('redirect_uri') || ''
+	let scope = page.url.searchParams.get('scope') || 'mcp:all'
+	let oauthState = page.url.searchParams.get('state') || ''
+	let codeChallenge = page.url.searchParams.get('code_challenge') || ''
+	let codeChallengeMethod = page.url.searchParams.get('code_challenge_method') || ''
 
 	let loading = $state(false)
 	let success = $state(false)
diff --git a/frontend/src/routes/(root)/(logged)/replay/+page.svelte b/frontend/src/routes/(root)/(logged)/replay/+page.svelte
index 4309a2078f..69690d1cec 100644
--- a/frontend/src/routes/(root)/(logged)/replay/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/replay/+page.svelte
@@ -9,8 +9,8 @@
 
 	let recording: FlowRecording | undefined = $state(undefined)
 
-	function handleFileChange(event: CustomEvent<(string | ArrayBuffer | null)[]>) {
-		const content = event.detail?.[0]
+	function handleFileChange(detail: (string | ArrayBuffer | null)[] | undefined) {
+		const content = detail?.[0]
 		if (!content || typeof content !== 'string') return
 		try {
 			const data = JSON.parse(content) as FlowRecording
@@ -49,7 +49,7 @@
 					accept=".json"
 					convertTo="text"
 					class="w-full"
-					on:change={handleFileChange}
+					onChange={handleFileChange}
 				>
 					Drag and drop a recording file
 				</FileInput>
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index d379910b43..3d6587df30 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import AppConnect from '$lib/components/AppConnectDrawer.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { Alert, Badge, Button, Skeleton, Tab } from '$lib/components/common'
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
index 9382f248a3..afc3f9e270 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { type NewScript, ScriptService, type ScriptLang } from '$lib/gen'
 
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { defaultScripts, initialArgsStore, workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import type { Schema } from '$lib/common'
@@ -24,18 +24,18 @@
 	// Default
 	let schema: Schema = emptySchema()
 
-	const templatePath = $page.url.searchParams.get('template')
-	const hubPath = $page.url.searchParams.get('hub')
-	const showMeta = /true|1/i.test($page.url.searchParams.get('show_meta') ?? '0')
-	const urlArgs = $page.url.searchParams.get('initial_args')
-	const collabLang = $page.url.searchParams.get('lang') as ScriptLang | null
+	const templatePath = page.url.searchParams.get('template')
+	const hubPath = page.url.searchParams.get('hub')
+	const showMeta = /true|1/i.test(page.url.searchParams.get('show_meta') ?? '0')
+	const urlArgs = page.url.searchParams.get('initial_args')
+	const collabLang = page.url.searchParams.get('lang') as ScriptLang | null
 
 	let initialArgs = urlArgs ? decodeState(urlArgs) : (get(initialArgsStore) ?? {})
 	if (get(initialArgsStore)) $initialArgsStore = undefined
 
-	const path = $page.url.searchParams.get('path')
+	const path = page.url.searchParams.get('path')
 
-	const initialState = $page.url.hash != '' ? $page.url.hash.slice(1) : undefined
+	const initialState = page.url.hash != '' ? page.url.hash.slice(1) : undefined
 
 	let scriptBuilder: ScriptBuilder | undefined = $state(undefined)
 
@@ -140,10 +140,10 @@
 		onSaveInitial={(e) => {
 			goto(`/scripts/edit/${e.path}`)
 		}}
-		searchParams={$page.url.searchParams}
+		searchParams={page.url.searchParams}
 		bind:script
 		{showMeta}
-		replaceStateFn={(path) => replaceState(path, $page.state)}
+		replaceStateFn={(path) => replaceState(path, page.state)}
 	>
 		<UnsavedConfirmationModal
 			getInitialAndModifiedValues={scriptBuilder?.getInitialAndModifiedValues}
diff --git a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
index df69e86e4a..cab2a14790 100644
--- a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { Alert } from '$lib/components/common'
 	import Popover from '$lib/components/Popover.svelte'
 	import ServiceLogsInner from '$lib/components/ServiceLogsInner.svelte'
@@ -7,7 +7,7 @@
 	import { devopsRole } from '$lib/stores'
 	import { Search, AlertTriangle } from 'lucide-svelte'
 
-	let searchTerm = $state($page.url.searchParams.get('query') ?? '')
+	let searchTerm = $state(page.url.searchParams.get('query') ?? '')
 	let queryParseErrors: string[] | undefined = $state(undefined)
 </script>
 
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 30f8351330..a10b3f34a1 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
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import { Button } from '$lib/components/common'
 	import { page } from '$app/stores'
@@ -10,16 +12,15 @@
 	import WorkspaceMenu from '$lib/components/sidebar/WorkspaceMenu.svelte'
 	import { Menubar } from '$lib/components/meltComponents'
 
-	let itemPath: string | undefined = undefined
-	let itemKind: 'script' | 'flow' | 'app' = 'script'
+	let itemPath: string | undefined = $state(undefined)
+	let itemKind: 'script' | 'flow' | 'app' = $state('script')
 	let clientName = $page.url.searchParams.get('domain') ?? undefined
 	let redirectURI = $page.url.searchParams.get('redirect_uri')
 
-	let userSettings: UserSettings
-	let token: string | undefined = undefined
-	let scopes: string[] = []
+	let userSettings: UserSettings = $state()
+	let token: string | undefined = $state(undefined)
+	let scopes: string[] = $state([])
 
-	$: updateTokenAndScope(itemPath)
 
 	async function createWebhook(path: string, kind: 'script' | 'flow' | 'app', token: string) {
 		try {
@@ -67,6 +68,9 @@
 
 		scopes = [`jobs:run:${itemKind}s:${scriptPath}`]
 	}
+	run(() => {
+		updateTokenAndScope(itemPath)
+	});
 </script>
 
 <UserSettings
@@ -97,9 +101,11 @@
 			<div class="flex flex-col items-center gap-3 w-full">
 				<div class="flex flex-row items-center justify-center w-full">
 					<span class="flex justify-end w-full items-right"> Selected Workspace: </span>
-					<Menubar let:createMenu>
-						<WorkspaceMenu strictWorkspaceSelect {createMenu} />
-					</Menubar>
+					<Menubar >
+						{#snippet children({ createMenu })}
+												<WorkspaceMenu strictWorkspaceSelect {createMenu} />
+																	{/snippet}
+										</Menubar>
 				</div>
 				<ScriptPicker
 					allowEdit={false}
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
index c7fa2b8e95..e14a2113cb 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
 
@@ -10,11 +12,10 @@
 	import { Button } from '$lib/components/common'
 
 	let workspace_id = $page.url.searchParams.get('workspace') ?? ''
-	let username = ''
-	let errorUsername = ''
-	let checking = false
+	let username = $state('')
+	let errorUsername = $state('')
+	let checking = $state(false)
 
-	$: validateName(username)
 
 	async function acceptInvite(): Promise<void> {
 		await UserService.acceptInvite({
@@ -47,7 +48,7 @@
 		}
 	}
 
-	let automateUsernameCreation = true
+	let automateUsernameCreation = $state(true)
 	async function getAutomateUsernameCreationSetting() {
 		automateUsernameCreation =
 			((await SettingService.getGlobal({ key: 'automate_username_creation' })) as any) ?? true
@@ -65,6 +66,9 @@
 		}
 	}
 	getAutomateUsernameCreationSetting()
+	run(() => {
+		validateName(username)
+	});
 </script>
 
 <!-- Enable submit form on enter -->
@@ -73,7 +77,7 @@
 	{#if !automateUsernameCreation}
 		<label class="block pb-2">
 			<span class="text-secondary text-sm">Your username in workspace {workspace_id}:</span>
-			<input on:keyup={handleKey} bind:value={username} class:input-error={errorUsername != ''} />
+			<input onkeyup={handleKey} bind:value={username} class:input-error={errorUsername != ''} />
 			{#if errorUsername}
 				<span class="text-red-500 text-xs">{errorUsername}</span>
 			{/if}
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 b5481f17fe..c37550e15f 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
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import InstanceSettings from '$lib/components/InstanceSettings.svelte'
 	import { Alert, Button } from '$lib/components/common'
@@ -35,17 +35,17 @@
 
 	const fullStepLabels = ['Settings', 'Root login & Resource Types']
 
-	const initialMode = $page.url.searchParams.get('mode') === 'full' ? 'full' : 'wizard'
+	const initialMode = page.url.searchParams.get('mode') === 'full' ? 'full' : 'wizard'
 	const initialStep = Math.max(
 		0,
-		Math.min(parseInt($page.url.searchParams.get('step') ?? '0') || 0, wizardStepLabels.length - 1)
+		Math.min(parseInt(page.url.searchParams.get('step') ?? '0') || 0, wizardStepLabels.length - 1)
 	)
 	const initialFullStep =
 		initialMode === 'full'
 			? Math.max(
 					0,
 					Math.min(
-						parseInt($page.url.searchParams.get('step') ?? '0') || 0,
+						parseInt(page.url.searchParams.get('step') ?? '0') || 0,
 						fullStepLabels.length - 1
 					)
 				)
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
index 197cdc75c6..4d1a58c70d 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	import { UserService, WorkspaceService } from '$lib/gen'
 	import {
@@ -21,13 +21,13 @@
 	import { onMount } from 'svelte'
 	import { refreshSuperadmin } from '$lib/refreshUser'
 
-	const email = $page.url.searchParams.get('email') ?? ''
-	const password = $page.url.searchParams.get('password') ?? ''
-	const error = $page.url.searchParams.get('error') ?? undefined
-	const rd = $page.url.searchParams.get('rd') ?? undefined
+	const email = page.url.searchParams.get('email') ?? ''
+	const password = page.url.searchParams.get('password') ?? ''
+	const error = page.url.searchParams.get('error') ?? undefined
+	const rd = page.url.searchParams.get('rd') ?? undefined
 
 	let showPassword = false
-	let firstTime = false
+	let firstTime = $state(false)
 
 	function clearWindmillCloudCookies() {
 		const domain = window.location.hostname
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
index dabbc233f0..e328c37f5a 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { clearUser } from '$lib/logout'
 	import { userStore } from '$lib/stores'
 	import { onMount } from 'svelte'
 
-	const rd = $page.url.searchParams.get('rd')
+	const rd = page.url.searchParams.get('rd')
 
 	function sleep(ms: number): Promise<void> {
 		return new Promise((resolve) => setTimeout(resolve, ms))
@@ -25,7 +25,7 @@
 
 		await sleep(3000)
 
-		if ($page.url.pathname != '/user/logout' && $page.url.pathname != '/user/login') {
+		if (page.url.pathname != '/user/logout' && page.url.pathname != '/user/login') {
 			return
 		}
 
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 6658893a57..88b0a0323a 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { goto } from '$lib/navigation'
 	import { base } from '$app/paths'
 	import { page } from '$app/stores'
@@ -31,26 +33,28 @@
 	import TextInput from '$lib/components/text_input/TextInput.svelte'
 	import type { UserWorkspace } from '$lib/stores'
 
-	let invites: WorkspaceInvite[] = []
-	let list_all_as_super_admin: boolean = false
-	let workspaces: UserWorkspace[] | undefined = undefined
-	let showAllForks: boolean = false
+	let invites: WorkspaceInvite[] = $state([])
+	let list_all_as_super_admin: boolean = $state(false)
+	let workspaces: UserWorkspace[] | undefined = $state(undefined)
+	let showAllForks: boolean = $state(false)
 
 	// Workspace tree controls
-	let workspaceSearchFilter = ''
-	let workspaceAllExpanded = false
-	let workspaceHasForks = false
-	let workspaceTreeView: WorkspaceTreeView | undefined = undefined
+	let workspaceSearchFilter = $state('')
+	let workspaceAllExpanded = $state(false)
+	let workspaceHasForks = $state(false)
+	let workspaceTreeView: WorkspaceTreeView | undefined = $state(undefined)
 
-	let userSettings: UserSettings
-	let superadminSettings: SuperadminSettings
+	let userSettings: UserSettings = $state()
+	let superadminSettings: SuperadminSettings = $state()
 
-	$: rd = $page.url.searchParams.get('rd')
+	let rd = $derived($page.url.searchParams.get('rd'))
 
-	$: if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
-		const mcpMode = $page.url.hash.includes('-mcp')
-		userSettings.openDrawer(mcpMode)
-	}
+	run(() => {
+		if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
+			const mcpMode = $page.url.hash.includes('-mcp')
+			userSettings.openDrawer(mcpMode)
+		}
+	});
 
 	async function loadInvites() {
 		try {
@@ -90,11 +94,13 @@
 			workspaces = $userWorkspaces
 		}
 	}
-	$: list_all_as_super_admin != undefined && $userWorkspaces && handleListWorkspaces()
+	run(() => {
+		list_all_as_super_admin != undefined && $userWorkspaces && handleListWorkspaces()
+	});
 
-	$: allWorkspaces = workspaces || []
-	$: noWorkspaces = $superadmin && allWorkspaces.length == 0
-	$: onlyAdminsWorkspace = allWorkspaces.length === 1 && allWorkspaces[0].id === 'admins'
+	let allWorkspaces = $derived(workspaces || [])
+	let noWorkspaces = $derived($superadmin && allWorkspaces.length == 0)
+	let onlyAdminsWorkspace = $derived(allWorkspaces.length === 1 && allWorkspaces[0].id === 'admins')
 
 	async function getCreateWorkspaceRequireSuperadmin() {
 		const r = await fetch(base + '/api/workspaces/create_workspace_require_superadmin')
@@ -102,11 +108,13 @@
 		createWorkspace = t != 'true'
 	}
 
-	let createWorkspace = $superadmin || isCloudHosted()
+	let createWorkspace = $state($superadmin || isCloudHosted())
 
-	$: if ($superadmin) {
-		createWorkspace = true
-	}
+	run(() => {
+		if ($superadmin) {
+			createWorkspace = true
+		}
+	});
 
 	if (!createWorkspace) {
 		getCreateWorkspaceRequireSuperadmin()
@@ -116,7 +124,7 @@
 	loadInvites()
 	loadWorkspaces()
 
-	let loading = false
+	let loading = $state(false)
 
 	async function speakFriendAndEnterWorkspace(workspaceId: string) {
 		loading = true
diff --git a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
index 42125fa36e..7531be31b2 100644
--- a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { UserService } from '$lib/gen'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { base } from '$lib/base'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { Button } from '$lib/components/common'
 	import { userStore, workspaceStore } from '$lib/stores'
 
-	let port = Number($page.url.searchParams.get('port'))
-	let host: string = $page.url.searchParams.get('host') || 'localhost'
-	let scheme: string = $page.url.searchParams.get('scheme') || 'http'
+	let port = $state(Number(page.url.searchParams.get('port')))
+	let host: string = page.url.searchParams.get('host') || 'localhost'
+	let scheme: string = page.url.searchParams.get('scheme') || 'http'
 	port = port == 0 || Number.isNaN(port) ? 80 : port
 
 	async function authorizeToken(): Promise<void> {
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
index 3529c45ce4..56eaaf6c72 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { Alert } from '$lib/components/common'
 	import { WindmillIcon } from '$lib/components/icons'
@@ -8,7 +8,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 
-	let success = $page.url.searchParams.get('success') === 'true'
+	let success = page.url.searchParams.get('success') === 'true'
 
 	let attempt = 0
 	if (!success) {
@@ -30,7 +30,7 @@
 	}
 </script>
 
-<!-- svelte-ignore missing-declaration -->
+<!-- svelte-ignore missing_declaration -->
 <CenteredModal title="Subscription upgrade {success ? 'succeeded' : 'failed'}">
 	{#if !success}
 		<div class="my-2">
diff --git a/frontend/src/routes/(root)/+layout.svelte b/frontend/src/routes/(root)/+layout.svelte
index e703dd56ca..96bf619acf 100644
--- a/frontend/src/routes/(root)/+layout.svelte
+++ b/frontend/src/routes/(root)/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { UserService, WorkspaceService } from '$lib/gen'
 	import { logoutWithRedirect } from '$lib/logoutKit'
 	import { userStore, usersWorkspaceStore, workspaceStore } from '$lib/stores'
@@ -51,12 +51,12 @@
 				}
 			} else {
 				if (
-					!$page.url.pathname.startsWith('/user/') ||
-					$page.url.pathname.startsWith('/user/cli')
+					!page.url.pathname.startsWith('/user/') ||
+					page.url.pathname.startsWith('/user/cli')
 				) {
 					goto(
 						`/user/workspaces?rd=${encodeURIComponent(
-							$page.url.href.replace($page.url.origin, '')
+							page.url.href.replace(page.url.origin, '')
 						)}`
 					)
 				}
@@ -65,8 +65,8 @@
 			}
 		} catch (e) {
 			console.error(e)
-			if ($page.url.pathname != '/user/login' && $page.url.pathname != '/user/logout') {
-				const url = $page.url
+			if (page.url.pathname != '/user/login' && page.url.pathname != '/user/logout') {
+				const url = page.url
 				console.log('logout 5', url.href.replace(url.origin, ''))
 				await logoutWithRedirect(url.href.replace(url.origin, ''))
 			}
@@ -106,7 +106,7 @@
 				}
 
 				if (status == '401') {
-					const url = $page.url
+					const url = page.url
 					console.log('UNAUTHORIZED', url, url.href.replace(url.origin, ''), url.pathname)
 					if (url.pathname != '/user/login' && url.pathname != '/user/logout') {
 						console.log('logout 6', url.pathname, url.href.replace(url.origin, ''))
@@ -132,7 +132,7 @@
 		setLicense()
 		computeDrift()
 
-		if ($page.url.pathname != '/user/login') {
+		if (page.url.pathname != '/user/login') {
 			setUserWorkspaceStore()
 			loadUser()
 			UserService.refreshUserToken({ ifExpiringInLessThanS: 30 * 60 })
@@ -140,7 +140,7 @@
 
 		let i = 0
 		interval = setInterval(async () => {
-			if ($page.url.pathname != '/user/login') {
+			if (page.url.pathname != '/user/login') {
 				i += 1
 
 				// every 15 mins
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index feb5211bfb..dbb4cacc7e 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	import { SvelteToast } from '@zerodevx/svelte-toast'
 	import '$lib/assets/app.css'
@@ -32,7 +32,7 @@
 			src="https://snippet.meticulous.ai/v1/meticulous.js"
 		></script>
 	{/if} -->
-	<title>{$page.data?.stuff?.title ? `${$page.data?.stuff?.title} | ` : ''}Windmill</title>
+	<title>{page.data?.stuff?.title ? `${page.data?.stuff?.title} | ` : ''}Windmill</title>
 </svelte:head>
 
 {@render children?.()}
diff --git a/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
index dcbd614a7a..38563cfbd9 100644
--- a/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
+++ b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	// import RawAppPreview from '$lib/components/raw_apps/RawAppPreview.svelte'
 	// import { userStore } from '$lib/stores'
 </script>
 
 <!-- <RawAppPreview
-	workspace={$page.params.workspace}
+	workspace={page.params.workspace}
 	user={$userStore}
-	version={Number($page.params.version)}
+	version={Number(page.params.version)}
 /> -->
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index 8e043bf758..693741d595 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -17,7 +17,7 @@
 	import FlowModuleSchemaMap from '$lib/components/flows/map/FlowModuleSchemaMap.svelte'
 	import FlowEditorPanel from '$lib/components/flows/content/FlowEditorPanel.svelte'
 	import { deepEqual } from 'fast-equals'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { getUserExt } from '$lib/user'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
@@ -28,14 +28,14 @@
 	import { StepsInputArgs } from '$lib/components/flows/stepsInputArgs.svelte'
 	import { ModulesTestStates } from '$lib/components/modulesTest.svelte'
 
-	let token = $page.url.searchParams.get('wm_token') ?? undefined
-	let workspace = $page.url.searchParams.get('workspace') ?? undefined
-	let themeDarkRaw = $page.url.searchParams.get('activeColorTheme')
+	let token = page.url.searchParams.get('wm_token') ?? undefined
+	let workspace = page.url.searchParams.get('workspace') ?? undefined
+	let themeDarkRaw = page.url.searchParams.get('activeColorTheme')
 	let themeDark = themeDarkRaw == '2' || themeDarkRaw == '4'
 
 	if (token) {
 		OpenAPI.WITH_CREDENTIALS = true
-		OpenAPI.TOKEN = $page.url.searchParams.get('wm_token')!
+		OpenAPI.TOKEN = page.url.searchParams.get('wm_token')!
 	}
 
 	if (workspace) {
diff --git a/frontend/src/routes/gh_success/+page.svelte b/frontend/src/routes/gh_success/+page.svelte
index 01234945d5..3886857126 100644
--- a/frontend/src/routes/gh_success/+page.svelte
+++ b/frontend/src/routes/gh_success/+page.svelte
@@ -3,9 +3,9 @@
 	import { CheckCircle, XCircle } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	let isLoading = true
-	let isSuccess = false
-	let errorMessage = ''
+	let isLoading = $state(true)
+	let isSuccess = $state(false)
+	let errorMessage = $state('')
 
 	function closeWindow() {
 		window.close()
@@ -74,7 +74,7 @@
 					The GitHub app has been successfully installed. You can now close this window and return to Windmill to start using the GitHub integration.
 				</p>
 				<button
-					on:click={closeWindow}
+					onclick={closeWindow}
 					class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded transition-colors"
 				>
 					Close this window
@@ -94,7 +94,7 @@
 					Please try again or contact your administrator for assistance.
 				</p>
 				<button
-					on:click={closeWindow}
+					onclick={closeWindow}
 					class="w-full py-2 px-4 bg-red-600 hover:bg-red-700 text-white font-medium rounded transition-colors"
 				>
 					Close this window
diff --git a/frontend/src/routes/oauth/callback_slack/+page.svelte b/frontend/src/routes/oauth/callback_slack/+page.svelte
index 33530bd6cf..ed7061f6b5 100644
--- a/frontend/src/routes/oauth/callback_slack/+page.svelte
+++ b/frontend/src/routes/oauth/callback_slack/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
@@ -9,9 +9,9 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
 
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		if (error) {
diff --git a/frontend/src/routes/oauth/callback_slack/instance/+page.svelte b/frontend/src/routes/oauth/callback_slack/instance/+page.svelte
index a0ac2fc808..08dab7275b 100644
--- a/frontend/src/routes/oauth/callback_slack/instance/+page.svelte
+++ b/frontend/src/routes/oauth/callback_slack/instance/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
@@ -8,9 +8,9 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
 
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		if (error) {
diff --git a/frontend/src/routes/oauth/callback_supabase/+page.svelte b/frontend/src/routes/oauth/callback_supabase/+page.svelte
index 575cce2f5b..83bd448a13 100644
--- a/frontend/src/routes/oauth/callback_supabase/+page.svelte
+++ b/frontend/src/routes/oauth/callback_supabase/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
@@ -11,9 +11,9 @@
 
 	const client_name = 'supabase_wizard'
 
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		if (error) {
diff --git a/frontend/src/routes/scripts/p/[...path].svelte b/frontend/src/routes/scripts/p/[...path].svelte
index 9b11051739..ceb3f94e96 100644
--- a/frontend/src/routes/scripts/p/[...path].svelte
+++ b/frontend/src/routes/scripts/p/[...path].svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export function load({ params }) {
 		return {
 			stuff: { title: `Script ${params.path}` }
diff --git a/frontend/src/routes/user/reset-password/+page.svelte b/frontend/src/routes/user/reset-password/+page.svelte
index 7299a079b9..3f0eb3b47a 100644
--- a/frontend/src/routes/user/reset-password/+page.svelte
+++ b/frontend/src/routes/user/reset-password/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { WindmillIcon } from '$lib/components/icons'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
@@ -9,7 +9,7 @@
 	import LoginPageHeader from '$lib/components/LoginPageHeader.svelte'
 	import { enterpriseLicense, whitelabelNameStore } from '$lib/stores'
 
-	const token = $page.url.searchParams.get('token') ?? ''
+	const token = page.url.searchParams.get('token') ?? ''
 
 	let newPassword = $state('')
 	let confirmPassword = $state('')