14. Svelte 5 Universal Runes & State Management

<script lang="ts">
  // Svelte 5 Universal Runes in Components and TS Classes
  class CartState {
    items = $state<{ name: string; price: number }[]>([]);
    total = $derived(this.items.reduce((sum, item) => sum + item.price, 0));

    addItem(name: string, price: number) {
      this.items.push({ name, price });
    }
  }

  const cart = new CartState();
  let { title = 'Store Cart' }: { title?: string } = $props();
</script>

<div class="p-6 border rounded-2xl bg-white dark:bg-slate-900">
  <h2 class="text-xl font-bold">{title} (Total: ${cart.total})</h2>
  <button 
    onclick={() => cart.addItem('Pro License', 49)} 
    class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-xl text-base"
  >
    Add Item (${cart.items.length})
  </button>
</div>