# GlobalStateStore

Zustand-based global state management with automatic persistence.

## Quick Start

```tsx
import {
  GlobalStateStoreProvider,
  useGlobalStateStore,
  useGlobalStateStoreContext
} from './GlobalStateStore';

// Wrap app with provider
function App() {
  return (
    <GlobalStateStoreProvider
      apiURL="https://api.example.com"
      fetchOnMount={true}
      throttleMs={5000}
    >
      <MyComponent />
    </GlobalStateStoreProvider>
  );
}

// Use in components
function MyComponent() {
  const { program, session, user } = useGlobalStateStore();
  const { refetch } = useGlobalStateStoreContext();

  return (
    <div>
      {program.name}
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

// Outside React
const apiURL = GlobalStateStore.getState().session.apiURL;
GlobalStateStore.getState().setAuthToken('token');
```

## Provider Props

- **apiURL** - Initial API URL (optional)
- **autoFetch** - Enable automatic fetching (default: `true`)
- **fetchOnMount** - Fetch data when provider mounts (default: `true`)
- **throttleMs** - Minimum time between fetch calls in milliseconds (default: `0`)

## Context Hook

`useGlobalStateStoreContext()` returns:
- **fetchData(url?)** - Throttled fetch function
- **refetch()** - Refetch with current URL

## State Slices

- **program** - name, logo, description, tags, version
- **session** - apiURL, authToken, connected, loading, error, parameters, meta
- **owner** - id, name, logo, settings, theme (darkMode, name)
- **user** - username, email, fullNames, isAdmin, avatarUrl, parameters, theme (darkMode, name)
- **layout** - leftBar, rightBar, topBar, bottomBar (each: open, collapsed, pinned, size, menuItems)
- **navigation** - menu, currentPage
- **app** - environment, updatedAt, controls, globals

## Actions

**Program:** `setProgram(updates)`
**Session:** `setSession(updates)`, `setAuthToken(token)`, `setApiURL(url)`
**Owner:** `setOwner(updates)`
**User:** `setUser(updates)`
**Layout:** `setLayout(updates)`, `setLeftBar(updates)`, `setRightBar(updates)`, `setTopBar(updates)`, `setBottomBar(updates)`
**Navigation:** `setNavigation(updates)`, `setMenu(items)`, `setCurrentPage(page)`
**App:** `setApp(updates)`
**Complex:** `fetchData(url?)`, `login(token?)`, `logout()`

## Custom Fetch

```ts
GlobalStateStore.getState().onFetchSession = async (state) => {
  const response = await fetch(`${state.session.apiURL}/session`, {
    headers: { Authorization: `Bearer ${state.session.authToken}` }
  });
  const data = await response.json();

  return {
    program: { name: data.appName, ... },
    user: { id: data.userId, name: data.userName, ... },
    navigation: { menu: data.menu },
  };
};
```

## Persistence

Auto-saves to IndexedDB (localStorage fallback).
Auto-loads on initialization.
Skips transient data: loading states, errors, controls.

## TypeScript

Fully typed with exported types:
`GlobalState`, `ProgramState`, `SessionState`, `OwnerState`, `UserState`, `ThemeSettings`, `LayoutState`, `BarState`, `NavigationState`, `AppState`