Svelte 5 Migration Guide

I'm using svelte 5 instead of svelte 4 here is an overview of the changes.
# .cursorrunes for Svelte 5

## Overview of Changes
Svelte 5 introduces runes, a set of advanced primitives for controlling reactivity. The runes replace certain non-runes features and provide more explicit control over state and effects.

Snippets, along with render tags, help create reusable chunks of markup inside your components, reducing duplication and enhancing maintainability.

## Event Handlers in Svelte 5
In Svelte 5, event handlers are treated as standard HTML properties rather than Svelte-specific directives.

### Svelte 4 vs. Svelte 5:
**Before (Svelte 4):**
```html
<script>
  let count = 0;
  $: double = count * 2;
</script>
<button on:click={() => count++}> {count} / {double}</button>
```

**After (Svelte 5):**
```html
<script>
  import { $state, $effect, $derived } from 'svelte';
  let count = $state(0);
  let double = $derived(count * 2);
  $effect(() => {
    if (count > 10) alert('Too high!');
  });
</script>
<button onclick={() => count++}>
  {count} / {double}
</button>
```

## Key Differences:
1. **Reactivity is Explicit**: Svelte 5 uses `$state()` to explicitly mark reactive variables, `$derived()` replaces `$:` for computed values, `$effect()` replaces `$: {}` blocks for side effects
2. **Event Handling is Standardized**: Svelte 4: `on:click={handler}`, Svelte 5: `onclick={handler}`
3. **Import Runes**: All runes must be imported from 'svelte'