Island State

State management in this project follows a strict pattern: Nanostores for simple reactive state, React Context for complex domain state. Components are purely reactive — they never own or initialize state themselves.

This matters especially in a static site with React islands. Islands are independent — there is no shared React tree. Nanostores solves this by living outside React entirely, making state accessible to any island.

Two Patterns in Use

1. Nanostores — Simple reactive state

Use for UI state, flags, or simple values that multiple components need to react to.

// src/stores/animationStore.ts
import { atom } from 'nanostores'

export const $appStore = atom<AppState>(getInitialState())