# Svelte 5 Runes System

You are an expert in Svelte 5 with the new runes-based reactivity system, replacing stores with fine-grained reactive primitives.

## Key Principles
- Use $state for reactive state declaration
- Use $derived for computed values
- Use $effect for side effects
- Migrate from stores to runes gradually
- Leverage fine-grained reactivity for performance

## State Management with $state
```svelte
<script>
  // Simple reactive state
  let count = $state(0);
  let name = $state("World");
  
  // Object state (deeply reactive)
  let user = $state({
    name: "John",
    email: "john@example.com",
    preferences: {
      theme: "dark",
      notifications: true
    }
  });
  
  // Array state
  let items = $state([
    { id: 1, text: "Learn Svelte 5", done: false },
    { id: 2, text: "Build an app", done: false }
  ]);
  
  function addItem(text) {
    items.push({ id: Date.now(), text, done: false });
  }
  
  function toggleItem(id) {
    const item = items.find(i => i.id === id);
    if (item) item.done = !item.done;
  }
  
  // Class with reactive properties
  class Counter {
    count = $state(0);
    
    increment() {
      this.count++;
    }
    
    get doubled() {
      return this.count * 2;
    }
  }
  
  const counter = new Counter();
</script>

<h1>Hello {name}!</h1>
<p>Count: {count}</p>
<button onclick={() => count++}>Increment</button>

<p>User: {user.name} ({user.preferences.theme} mode)</p>

<ul>
  {#each items as item (item.id)}
    <li class:done={item.done}>
      <input type="checkbox" checked={item.done} onchange={() => toggleItem(item.id)} />
      {item.text}
    </li>
  {/each}
</ul>
```

## Derived Values with $derived
```svelte
<script>
  let items = $state([
    { name: "Apple", price: 1.5, quantity: 3 },
    { name: "Banana", price: 0.75, quantity: 5 }
  ]);
  
  let taxRate = $state(0.08);
  
  // Simple derived value
  let itemCount = $derived(items.length);
  
  // Computed totals
  let subtotal = $derived(
    items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  );
  
  let tax = $derived(subtotal * taxRate);
  let total = $derived(subtotal + tax);
  
  // Derived with complex logic (use $derived.by for multi-line)
  let summary = $derived.by(() => {
    const expensive = items.filter(i => i.price > 1);
    const cheap = items.filter(i => i.price <= 1);
    
    return {
      expensive: expensive.length,
      cheap: cheap.length,
      mostExpensive: expensive.sort((a, b) => b.price - a.price)[0]
    };
  });
  
  // Filtered and sorted derived
  let filter = $state("");
  let sortBy = $state("name");
  
  let filteredItems = $derived.by(() => {
    return items
      .filter(item => item.name.toLowerCase().includes(filter.toLowerCase()))
      .sort((a, b) => {
        if (sortBy === "name") return a.name.localeCompare(b.name);
        if (sortBy === "price") return b.price - a.price;
        return 0;
      });
  });
</script>

<input bind:value={filter} placeholder="Filter items..." />

<p>Showing {filteredItems.length} of {itemCount} items</p>
<p>Subtotal: ${subtotal.toFixed(2)}</p>
<p>Tax ({(taxRate * 100).toFixed(0)}%): ${tax.toFixed(2)}</p>
<p>Total: ${total.toFixed(2)}</p>
```

## Effects with $effect
```svelte
<script>
  let searchQuery = $state("");
  let results = $state([]);
  let loading = $state(false);
  
  // Effect runs when dependencies change
  $effect(() => {
    console.log(`Search query changed to: ${searchQuery}`);
  });
  
  // Effect with cleanup
  $effect(() => {
    const controller = new AbortController();
    
    if (searchQuery.length > 2) {
      loading = true;
      
      fetch(`/api/search?q=${searchQuery}`, { signal: controller.signal })
        .then(res => res.json())
        .then(data => {
          results = data;
          loading = false;
        })
        .catch(err => {
          if (err.name !== "AbortError") {
            console.error(err);
            loading = false;
          }
        });
    }
    
    // Cleanup function
    return () => {
      controller.abort();
    };
  });
  
  // Effect that runs only once (on mount)
  $effect(() => {
    console.log("Component mounted");
    
    return () => {
      console.log("Component unmounting");
    };
  });
  
  // Pre-effect (runs before DOM updates)
  $effect.pre(() => {
    // Useful for scroll position preservation
    console.log("Before DOM update");
  });
</script>

<input bind:value={searchQuery} placeholder="Search..." />
{#if loading}
  <p>Loading...</p>
{:else}
  <ul>
    {#each results as result}
      <li>{result.title}</li>
    {/each}
  </ul>
{/if}
```

## Props with $props
```svelte
<!-- Button.svelte -->
<script>
  let { 
    variant = "primary",
    size = "medium",
    disabled = false,
    onclick,
    children
  } = $props();
  
  // Destructure with rest
  let { class: className, ...rest } = $props();
</script>

<button
  class="btn btn-{variant} btn-{size} {className}"
  {disabled}
  {onclick}
  {...rest}
>
  {@render children()}
</button>

<!-- Usage -->
<Button variant="secondary" onclick={() => console.log("clicked")}>
  Click me
</Button>
```

## Bindable Props with $bindable
```svelte
<!-- TextInput.svelte -->
<script>
  let { value = $bindable(""), placeholder = "" } = $props();
</script>

<input bind:value {placeholder} />

<!-- Usage with two-way binding -->
<script>
  let name = $state("");
</script>

<TextInput bind:value={name} placeholder="Enter name" />
<p>Hello, {name}!</p>
```

## Migration from Stores
```svelte
<script>
  // Old (Svelte 4 with stores)
  // import { writable, derived } from "svelte/store";
  // const count = writable(0);
  // const doubled = derived(count, $c => $c * 2);
  
  // New (Svelte 5 with runes)
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<!-- Old: {$count} -->
<!-- New: {count} -->
<p>{count} × 2 = {doubled}</p>
```

## Best Practices
- Prefer $state over stores for component state
- Use $derived for any computed values
- Keep $effect minimal and focused
- Use $effect cleanup for subscriptions
- Migrate stores incrementally
- Leverage TypeScript for type safety