---
description: Zustand store patterns
globs: ["apps/sim/**/store.ts", "apps/sim/**/stores/**/*.ts"]
---

# Zustand Store Patterns

## Structure
```typescript
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FeatureState {
  // State
  items: Item[]
  activeId: string | null
  
  // Actions
  setItems: (items: Item[]) => void
  addItem: (item: Item) => void
  clearState: () => void
}

const createInitialState = () => ({
  items: [],
  activeId: null,
})

export const useFeatureStore = create<FeatureState>()(
  persist(
    (set) => ({
      ...createInitialState(),

      setItems: (items) => set({ items }),

      addItem: (item) => set((state) => ({
        items: [...state.items, item],
      })),

      clearState: () => set(createInitialState()),
    }),
    {
      name: 'feature-state',
      partialize: (state) => ({ items: state.items }),
    }
  )
)
```

## Rules
1. Interface includes state and actions
2. Extract config to module constants
3. TSDoc on store
4. Only persist what's needed
5. Immutable updates only - never mutate
6. Use `set((state) => ...)` when depending on previous state
7. Provide clear/reset actions