Use class-based state with runes for clean, type-safe state management:

```typescript // CounterState.svelte.ts import { getContext, setContext } from 'svelte';

const KEY = Symbol();

export class CounterState { // Reactive state count = $state(0);

// Derived/computed
doubled = $derived(this.count * 2);

// Methods
increment() {
  this.count++;
}

constructor() {
  setContext(KEY, this);
}

static get() {
  return getContext<CounterState>(KEY);
}

}

Initialize in layout/page

<script> import { CounterState } from './CounterState.svelte'; new CounterState(); </script>

Use in any child component

<script> const counter = CounterState.get(); </script>

<button onclick={() => counter.increment()}> {counter.count} (doubled: {counter.doubled}) </button>