Migrate more stuff

src/lib/components/InputPicture.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
+  import {run, preventDefault, stopPropagation} from "svelte/legacy"
+
   import {randomId} from "@welshman/lib"
   import Icon from "@lib/components/Icon.svelte"
 
-  export let file: File | null = null
-  export let url: string | null = null
+  interface Props {
+    file?: File | null
+    url?: string | null
+  }
+
+  let {file = $bindable(null), url = $bindable(null)}: Props = $props()
 
   const id = randomId()
 
@@ -35,10 +41,10 @@
     url = null
   }
 
-  let active = false
-  let initialUrl = url
+  let active = $state(false)
+  let initialUrl = $state(url)
 
-  $: {
+  run(() => {
     if (file) {
       const reader = new FileReader()
 
@@ -53,21 +59,21 @@
     } else {
       url = initialUrl
     }
-  }
+  })
 </script>
 
 <form>
-  <input {id} type="file" accept="image/*" on:change={onChange} class="hidden" />
+  <input {id} type="file" accept="image/*" onchange={onChange} class="hidden" />
   <label
     for={id}
     aria-label="Drag and drop files here."
     style="background-image: url({url});"
     class="relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-dashed border-base-content bg-base-300 bg-cover bg-center transition-all"
     class:border-primary={active}
-    on:dragenter|preventDefault|stopPropagation={onDragEnter}
-    on:dragover|preventDefault|stopPropagation={onDragOver}
-    on:dragleave|preventDefault|stopPropagation={onDragLeave}
-    on:drop|preventDefault|stopPropagation={onDrop}>
+    ondragenter={stopPropagation(preventDefault(onDragEnter))}
+    ondragover={stopPropagation(preventDefault(onDragOver))}
+    ondragleave={stopPropagation(preventDefault(onDragLeave))}
+    ondrop={stopPropagation(preventDefault(onDrop))}>
     <div
       class="absolute right-0 top-0 h-5 w-5 overflow-hidden rounded-full bg-primary"
       class:bg-error={file}
@@ -76,8 +82,8 @@
         <span
           role="button"
           tabindex="-1"
-          on:mousedown|stopPropagation={onClear}
-          on:touchstart|stopPropagation={onClear}>
+          onmousedown={stopPropagation(onClear)}
+          ontouchstart={stopPropagation(onClear)}>
           <Icon icon="close-circle" class="scale-150 !bg-base-300" />
         </span>
       {:else}