Finish svelte 5 migration

src/lib/components/Confirm.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {preventDefault} from "svelte/legacy"
-
+  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"

src/lib/components/InputPicture.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {run, preventDefault, stopPropagation} from "svelte/legacy"
-
   import {randomId} from "@welshman/lib"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -44,7 +43,7 @@
   let active = $state(false)
   let initialUrl = $state(url)
 
-  run(() => {
+  $effect(() => {
     if (file) {
       const reader = new FileReader()
 
@@ -55,6 +54,7 @@
         },
         false,
       )
+
       reader.readAsDataURL(file)
     } else {
       url = initialUrl

src/lib/components/InputProfilePicture.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import {run, preventDefault, stopPropagation} from "svelte/legacy"
-
   import {randomId} from "@welshman/lib"
+  import {preventDefault, stopPropagation} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
@@ -44,7 +43,7 @@
   let active = $state(false)
   let initialUrl = $state(url)
 
-  run(() => {
+  $effect(() => {
     if (file) {
       const reader = new FileReader()
 

src/lib/components/Link.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {stopPropagation} from "svelte/legacy"
   import {goto} from "$app/navigation"
+  import {stopPropagation} from "@lib/html"
 
   const {
     children,

src/lib/components/LongPress.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-  import {createBubbler} from "svelte/legacy"
+  const {children, onLongPress, ...restProps} = $props()
 
-  const bubble = createBubbler()
-  const {...props} = $props()
-
-  const onTouchStart = (event: any) => {
+  const ontouchstart = (event: any) => {
     touch = event.touches[0]
-    timeout = setTimeout(props.onLongPress, 500)
+    timeout = setTimeout(onLongPress, 500)
   }
 
-  const onTouchMove = (event: any) => {
+  const ontouchmove = (event: any) => {
     const curTouch = event.touches[0]
 
     if (Math.abs(curTouch.clientX - touch.clientX) > 30) {
@@ -21,19 +18,12 @@
     }
   }
 
-  const onTouchEnd = () => clearTimeout(timeout)
+  const ontouchend = () => clearTimeout(timeout)
 
   let touch: Touch
   let timeout: any
 </script>
 
-<div
-  role="button"
-  tabindex="0"
-  onclick={bubble("click")}
-  ontouchstart={onTouchStart}
-  ontouchmove={onTouchMove}
-  ontouchend={onTouchEnd}
-  {...props}>
-  {@render props.children?.()}
+<div role="button" tabindex="0" {ontouchstart} {ontouchmove} {ontouchend} {...restProps}>
+  {@render children()}
 </div>

src/lib/html.ts

@@ -1,4 +1,5 @@
 import {sleep} from "@welshman/lib"
+export {preventDefault, stopPropagation} from "svelte/legacy"
 
 export const copyToClipboard = (text: string) => {
   const {activeElement} = document