// cart.svelte.js
export const cart = $state({ items: [] });

export function addToCart(product) {
  const existing = cart.items.find((i) => i.id === product.id);
  if (existing) {
    existing.quantity++;
  } else {
    cart.items.push({ ...product, quantity: 1 });
  }
}


<!-- src/ProductList.svelte -->
<script>
  import { addToCart } from './cart.svelte.js';

  const products = [
    { id: 1, name: 'Keyboard' },
    { id: 2, name: 'Mouse' },
  ];
</script>

{#each products as p (p.id)}
  <button onclick={() => addToCart(p)}>Add {p.name}</button>
{/each}


<!-- src/CartDisplay.svelte -->
<script>
  import { cart } from './cart.svelte.js';
</script>

<p>Total items: {cart.items.reduce((sum, i) => sum + i.quantity, 0)}</p>
<ul>
  {#each cart.items as item (item.id)}
    <li>{item.name} x{item.quantity}</li>
  {/each}
</ul>

<!--
  Notes:
  - `cart` is an exported $state object at module level, so there's only
    ONE instance — ProductList and CartDisplay share it with nothing
    passed between them. No Pinia, no Context, no store API.
  - addToCart mutates the shared cart.items in place (push / quantity++);
    deep reactivity means both components update automatically.
  - The shared state is an OBJECT (cart) accessed via cart.items —
    exporting a bare reactive primitive wouldn't keep its binding across
    the module boundary.
-->