chore: finalize migration to svelte 5

src/lib/BackgroundGrid.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import _ from 'lodash';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { onMount } from 'svelte';
-	const dispatch = createEventDispatcher();
 
 	const START_COUNT = 27;
 	const MAX_COUNT = 33;
@@ -19,9 +18,16 @@
 	interface Props {
 		transparent?: boolean;
 		subdued?: boolean;
+		onchange?: (detail: {
+			horizontalCount: number;
+			verticalCount: number;
+			blockSize: number;
+			horizontalMargin: number;
+			verticalMargin: number;
+		}) => void;
 	}
 
-	let { transparent = false, subdued = false }: Props = $props();
+	let { transparent = false, subdued = false, onchange }: Props = $props();
 
 	function updateCounts() {
 		const gridWidth = window.innerWidth - MARGIN_SIZE;
@@ -56,7 +62,7 @@
 		horizontalMargin = (window.innerWidth - blockSize * horizontalCount) / 2;
 		verticalMargin = (window.innerHeight - blockSize * verticalCount) / 2;
 		cornerBlocks = shorterCount > 8 ? 3 : Math.max(1, Math.floor(shorterCount / 4));
-		dispatch('change', {
+		onchange?.({
 			horizontalCount,
 			verticalCount,
 			blockSize,

src/lib/TestCard.svelte

@@ -5,14 +5,13 @@
 	import ColorGradient from '$lib/ColorGradient.svelte';
 	import BrightnessGradient from '$lib/BrightnessGradient.svelte';
 	import Clock from '$lib/Clock.svelte';
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher<{ focus: void }>();
 
 	interface Props {
 		bg?: boolean;
+		onfocus?: () => void;
 	}
 
-	let { bg = false }: Props = $props();
+	let { bg = false, onfocus }: Props = $props();
 
 	let sizes = $state({
 		blockSize: 64,
@@ -44,9 +43,9 @@
          --column-width: {columnWidth};
          --column-height: {columnHeight};
          --left-column: {leftColumn};"
-	ondblclick={() => dispatch('focus') && document.body.requestFullscreen()}
+	ondblclick={() => onfocus?.() && document.body.requestFullscreen()}
 >
-	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
+	<BackgroundGrid onchange={(detail) => (sizes = detail)} subdued={bg} />
 
 	<div class="axes">
 		<Axes />

src/routes/(pages)/+layout.svelte

@@ -10,7 +10,7 @@
 	let { children }: Props = $props();
 </script>
 
-<TestCard bg on:focus={() => goto('/card')} />
+<TestCard bg onfocus={() => goto('/card')} />
 <main class:sub={!page.data.root}>
 	<a href=".." class="button button-back"><i class="ti ti-arrow-back"></i>{m.common_back()}</a>
 	{@render children?.()}

src/routes/(pages)/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { version } from '../../../package.json';
 	import type { Snapshot } from '@sveltejs/kit';
 	import { fade } from 'svelte/transition';
@@ -139,7 +137,7 @@
 			);
 		});
 	}
-	run(() => {
+	$effect(() => {
 		doSearch(search);
 	});
 
@@ -337,17 +335,6 @@
 			opacity: 0.8;
 		}
 
-		& a {
-			text-align: center;
-			text-decoration: none;
-			white-space: nowrap;
-
-			&.disabled {
-				pointer-events: none;
-				opacity: 0.5;
-			}
-		}
-
 		& .ti {
 			display: block;
 			font-size: 3rem;

src/routes/(pages)/camera/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import debug from 'debug';
@@ -20,10 +18,10 @@
 	let snapshot: string | undefined = $state();
 	let flipped = $state(false);
 
-	run(() => {
+	$effect(() => {
 		dbg('devices %O', devices);
 	});
-	run(() => {
+	$effect(() => {
 		dbg('currentDevice %s', currentDevice);
 	});
 
@@ -54,7 +52,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if (currentDevice) {
 			navigator.mediaDevices
 				.getUserMedia({

src/routes/(pages)/gamepad/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import debug from 'debug';
@@ -60,20 +58,20 @@
 		requestAnimationFrame(update);
 	}
 
-	run(() => {
+	$effect(() => {
 		if (currentGamepad) {
 			update();
 		}
 	});
 
-	run(() => {
+	$effect(() => {
 		dbg('Gamepads %O', gamepads);
 	});
-	run(() => {
+	$effect(() => {
 		dbg('Current gamepad %s', currentGamepad);
 	});
 
-	run(() => {
+	$effect(() => {
 		currentGamepad?.vibrationActuator?.playEffect('dual-rumble', {
 			duration: 1000
 		});