Fix more stuff, particularly event handlers

src/lib/components/Avatar.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import Icon from "@lib/components/Icon.svelte"
 
-  let {src = "", size = 7, icon = "user-rounded", style = "", ...restProps} = $props()
+  const {src = "", size = 7, icon = "user-rounded", style = "", ...restProps} = $props()
 
   let element: HTMLElement
 

src/lib/components/Button.svelte

@@ -1,19 +1,37 @@
 <script lang="ts">
-  interface Props {
-    type?: "button" | "submit"
-  }
+  import type {Snippet} from "svelte"
 
-  let {type = "button", ...restProps} = $props()
+  const {
+    children,
+    onclick,
+    type = "button",
+    ...restProps
+  }: {
+    children: Snippet
+    onclick?: (...args: unknown[]) => any
+    type?: "button" | "submit"
+    class?: string
+    style?: string
+    disabled?: boolean
+    "data-tip"?: string
+  } = $props()
 
   const className = $derived(`text-left ${restProps.class}`)
+
+  const onClick = (e: Event) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    onclick?.()
+  }
 </script>
 
 {#if type === "submit"}
   <button {...restProps} {type} class={className}>
-    <slot />
+    {@render children?.()}
   </button>
 {:else}
-  <button on:click|stopPropagation|preventDefault {...restProps} {type} class={className}>
-    <slot />
+  <button {...restProps} onclick={onClick} type={type as "button" | "submit"} class={className}>
+    {@render children?.()}
   </button>
 {/if}

src/lib/components/CardButton.svelte

@@ -7,7 +7,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div class="btn btn-neutral flex h-[unset] w-full flex-nowrap py-4 text-left {props.class}">

src/lib/components/Collapse.svelte

@@ -8,7 +8,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 
   const toggle = () => {
     isOpen = !isOpen

src/lib/components/Confirm.svelte

@@ -14,7 +14,7 @@
     confirm: any
   }
 
-  let {title = "Are you sure?", subtitle = "", message, confirm}: Props = $props()
+  const {subtitle = "", message, confirm, ...restProps}: Props = $props()
 
   let loading = $state(false)
 
@@ -34,7 +34,7 @@
 <form class="column gap-4" onsubmit={preventDefault(tryConfirm)}>
   <ModalHeader>
     {#snippet title()}
-      <div>{title}</div>
+      <div>{restProps.title || "Are you sure?"}</div>
     {/snippet}
     {#snippet info()}
       <div>{subtitle}</div>
@@ -42,7 +42,7 @@
   </ModalHeader>
   <p>{message}</p>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" onclick={back}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/lib/components/ContentSearch.svelte

@@ -5,7 +5,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div class="col-2 content-padding-t content-padding-x h-full {props.class}">

src/lib/components/DateTimeInput.svelte

@@ -23,11 +23,11 @@
   }
 </script>
 
-<Button class="relative" on:click={init}>
+<Button class="relative" onclick={init}>
   <DateInput format="yyyy-MM-dd HH:mm" timePrecision="minute" placeholder="" bind:value />
   <div class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2">
     {#if value}
-      <Button on:click={clear} class="h-5">
+      <Button onclick={clear} class="h-5">
         <Icon icon="close-circle" />
       </Button>
     {:else}

src/lib/components/Dialog.svelte

@@ -8,9 +8,9 @@
     children?: import("svelte").Snippet
   }
 
-  let {onClose = noop, fullscreen = false, children}: Props = $props()
+  const {onClose = noop, fullscreen = false, children}: Props = $props()
 
-  let extraClass = $derived(
+  const extraClass = $derived(
     !fullscreen &&
       "card2 bg-alt max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px] shadow-xl",
   )

src/lib/components/Divider.svelte

@@ -3,7 +3,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {children}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">

src/lib/components/Drawer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {fade, translate} from "@lib/transition"
 
-  let {onClose, children} = $props()
+  const {onClose, children} = $props()
 </script>
 
 <div class="drawer fixed inset-0 z-modal">

src/lib/components/EmojiButton.svelte

@@ -6,7 +6,7 @@
   import Tippy from "@lib/components/Tippy.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
 
-  let {...props} = $props()
+  const {...props} = $props()
 
   const open = () => popover?.show()
 
@@ -35,7 +35,7 @@
   component={EmojiPicker}
   props={{onClick}}
   params={{trigger: "manual", interactive: true}}>
-  <Button on:click={open} class={props.class}>
+  <Button onclick={open} class={props.class}>
     {@render props.children?.()}
   </Button>
 </Tippy>

src/lib/components/EmojiPicker.svelte

@@ -17,7 +17,7 @@
     onClick: (emoji: Emoji) => void
   }
 
-  let {onClick}: Props = $props()
+  const {onClick}: Props = $props()
 
   let element: Element | undefined = $state()
 

src/lib/components/Field.svelte

@@ -6,7 +6,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div class="flex flex-col gap-2 {props.class}">

src/lib/components/FieldInline.svelte

@@ -6,7 +6,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div class="grid grid-cols-1 gap-2 md:grid-cols-3 {props.class}">

src/lib/components/Icon.svelte

@@ -6,7 +6,6 @@
 </style>
 
 <script lang="ts">
-  import cx from "classnames"
   import {switcher} from "@welshman/lib"
   import AddSquare from "@assets/icons/Add Square.svg?dataurl"
   import ArrowsALogout2 from "@assets/icons/Arrows ALogout 2.svg?dataurl"
@@ -84,12 +83,15 @@
   import WidgetAdd from "@assets/icons/Widget Add.svg?dataurl"
   import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
 
-  interface Props {
+  const {
+    icon,
+    size = 5,
+    ...restProps
+  }: {
     icon: string
-    size: number
-  }
-
-  let {icon, size = 5, ...restProps} = $props()
+    size?: number
+    class?: string
+  } = $props()
 
   const px = size * 4
 

src/lib/components/InputPicture.svelte

@@ -5,11 +5,11 @@
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
-    file?: File | null
-    url?: string | null
+    file?: File | undefined
+    url?: string | undefined
   }
 
-  let {file = $bindable(null), url = $bindable(null)}: Props = $props()
+  let {file = $bindable(undefined), url = $bindable(undefined)}: Props = $props()
 
   const id = randomId()
 
@@ -36,9 +36,9 @@
   }
 
   const onClear = () => {
-    initialUrl = null
-    file = null
-    url = null
+    initialUrl = undefined
+    file = undefined
+    url = undefined
   }
 
   let active = $state(false)

src/lib/components/Link.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+  import {stopPropagation} from "svelte/legacy"
   import {goto} from "$app/navigation"
 
-  interface Props {
+  const {
+    children,
+    href,
+    external = false,
+    replaceState = false,
+    ...restProps
+  }: {
+    children: Snippet
     href: string
-    external: boolean
-    replaceState: boolean
-  }
-
-  let {href, external = false, replaceState = false, ...restProps} = $props()
+    external?: boolean
+    replaceState?: boolean
+    disabled?: boolean
+    class?: string
+  } = $props()
 
   const go = (e: Event) => {
     if (!external) {
@@ -21,9 +30,9 @@
 <a
   {href}
   {...restProps}
-  on:click|stopPropagation={go}
+  onclick={stopPropagation(go)}
   class="cursor-pointer {restProps.class}"
   rel={external ? "noopener noreferer" : ""}
   target={external ? "_blank" : ""}>
-  <slot />
+  {@render children?.()}
 </a>

src/lib/components/LongPress.svelte

@@ -2,7 +2,7 @@
   import {createBubbler} from "svelte/legacy"
 
   const bubble = createBubbler()
-  let {...props} = $props()
+  const {...props} = $props()
 
   const onTouchStart = (event: any) => {
     touch = event.touches[0]

src/lib/components/ModalFooter.svelte

@@ -3,7 +3,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {children}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="row-4 mt-4 items-center justify-between">

src/lib/components/ModalHeader.svelte

@@ -4,7 +4,7 @@
     info?: import("svelte").Snippet
   }
 
-  let {title, info}: Props = $props()
+  const {title, info}: Props = $props()
 </script>
 
 <div class="column m-auto max-w-xs gap-2 py-4">

src/lib/components/Page.svelte

@@ -4,7 +4,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div

src/lib/components/PageBar.svelte

@@ -6,7 +6,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div class="relative z-feature mx-2 rounded-xl pt-4 {props.class}">

src/lib/components/PageHeader.svelte

@@ -4,7 +4,7 @@
     info?: import("svelte").Snippet
   }
 
-  let {title, info}: Props = $props()
+  const {title, info}: Props = $props()
 </script>
 
 <div class="column gap-4 py-12">

src/lib/components/Popover.svelte

@@ -8,7 +8,7 @@
     children?: Snippet
   }
 
-  let {onClose, hideOnClick = false, children}: Props = $props()
+  const {onClose, hideOnClick = false, children}: Props = $props()
 
   const onMouseUp = (e: any) => {
     if (hideOnClick || !element?.contains(e.target)) {

src/lib/components/PrimaryNavItem.svelte

@@ -2,7 +2,15 @@
   import {page} from "$app/stores"
   import Button from "@lib/components/Button.svelte"
 
-  let {title = "", href = "", prefix = "", notification = false, ...restProps} = $props()
+  const {
+    children,
+    onclick = undefined,
+    title = "",
+    href = "",
+    prefix = "",
+    notification = false,
+    ...restProps
+  } = $props()
 
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
 </script>
@@ -14,20 +22,20 @@
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
-      <slot />
+      {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
     </div>
   </a>
 {:else}
-  <Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
     <div
       class="avatar cursor-pointer rounded-full p-1 {restProps.class} transition-colors hover:bg-base-300"
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
-      <slot />
+      {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-2 top-2 h-2 w-2 rounded-full bg-primary"></div>
       {/if}

src/lib/components/SearchSelect.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
   import {readable} from "svelte/store"
   import {type Instance} from "tippy.js"
   import {identity} from "@welshman/lib"
@@ -10,10 +11,12 @@
   interface Props {
     value: string
     options: string[]
+    before?: Snippet
     allowCreate?: boolean
+    class?: string
   }
 
-  let {value, options, allowCreate = false, ...restProps} = $props()
+  let {value, options, before, allowCreate = false, ...restProps}: Props = $props()
   let input: Element | undefined = $state()
   let popover: Instance | undefined = $state()
   let instance: any = $state()
@@ -47,14 +50,14 @@
 
 <div class={restProps.class}>
   <label class="input input-bordered flex w-full items-center gap-3" bind:this={input}>
-    <slot name="before" />
+    {@render before?.()}
     <input
       class="grow"
       type="text"
       bind:value
-      on:keydown={onKeyDown}
-      on:focus={onFocus}
-      on:blur={onBlur} />
+      onkeydown={onKeyDown}
+      onfocus={onFocus}
+      onblur={onBlur} />
     <Icon icon="alt-arrow-down" class="cursor-pointer" />
   </label>
   <Tippy

src/lib/components/SecondaryNav.svelte

@@ -3,7 +3,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {children}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div

src/lib/components/SecondaryNavHeader.svelte

@@ -3,7 +3,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {children}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex items-center justify-between px-4 py-2 text-sm font-bold uppercase">

src/lib/components/SecondaryNavItem.svelte

@@ -24,7 +24,7 @@
   import {fade} from "@lib/transition"
   import {page} from "$app/stores"
 
-  let {href = "", notification = "false", ...restProps} = $props()
+  const {children, href = "", notification = false, ...restProps} = $props()
 
   const active = $derived($page.url.pathname === href)
 </script>
@@ -33,11 +33,10 @@
   <a
     {...restProps}
     {href}
-    on:click
     class="{restProps.class} relative flex items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
     class:text-base-content={active}
     class:bg-base-100={active}>
-    <slot />
+    {@render children?.()}
     {#if !active && notification}
       <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
@@ -45,13 +44,12 @@
 {:else}
   <button
     {...restProps}
-    on:click
     class="{restProps.class} relative flex w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
     class:text-base-content={active}
     class:bg-base-100={active}>
     {#if !active && notification}
       <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
-    <slot />
+    {@render children?.()}
   </button>
 {/if}

src/lib/components/SecondaryNavSection.svelte

@@ -4,7 +4,7 @@
     [key: string]: any
   }
 
-  let {...props}: Props = $props()
+  const {...props}: Props = $props()
 </script>
 
 <div class="flex flex-col gap-1 px-2 py-4 {props.class}">

src/lib/components/Spinner.svelte

@@ -6,7 +6,7 @@
     children?: import("svelte").Snippet
   }
 
-  let {loading = false, children}: Props = $props()
+  const {loading = false, children}: Props = $props()
 </script>
 
 <span class="flex min-h-10 items-center">

src/lib/components/Tippy.svelte

@@ -2,7 +2,7 @@
   import "tippy.js/animations/shift-away.css"
 
   import tippy from "tippy.js"
-  import {onMount, mount, unmount} from "svelte"
+  import {onMount, mount} from "svelte"
 
   let {
     component,

src/lib/components/WotScore.svelte

@@ -22,15 +22,15 @@
     active?: boolean
   }
 
-  let {score, max = 100, active = false}: Props = $props()
+  const {score, max = 100, active = false}: Props = $props()
 
   const radius = 6
   const center = radius + 1
 
-  let normalizedScore = $derived(clamp([0, max], score) / max)
-  let dashOffset = $derived(100 - 44 * normalizedScore)
-  let style = $derived(`transform: rotate(${135 - normalizedScore * 180}deg)`)
-  let stroke = $derived(active ? "var(--primary)" : "var(--base-content)")
+  const normalizedScore = $derived(clamp([0, max], score) / max)
+  const dashOffset = $derived(100 - 44 * normalizedScore)
+  const style = $derived(`transform: rotate(${135 - normalizedScore * 180}deg)`)
+  const stroke = $derived(active ? "var(--primary)" : "var(--base-content)")
 </script>
 
 <div class="relative h-[14px] w-[14px]">