\n );\n}\n```\n\n## API reference\n\n### ``\n\nWraps your app with a MeroJs instance, auth state, and SSE connectivity.\n\n```tsx\n\n {children}\n\n```\n\nProps (`MeroProviderConfig & { children }`):\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `mode` | `AppMode` | Yes | `SingleContext`, `MultiContext`, or `Admin` |\n| `packageName` | `string` | No | Package name for registry/node lookup |\n| `packageVersion` | `string` | No | Specific version (defaults to latest) |\n| `registryUrl` | `string` | No | Registry URL override |\n| `timeoutMs` | `number` | No | HTTP request timeout (default 30000) |\n| `allowedNodeUrls` | `string[]` | No | Origins the OAuth callback may authenticate against. The initiated node is always trusted; this allowlist additionally permits direct-callback entry. A callback `node_url` matching neither is rejected. |\n| `tokenStore` | `TokenStore` | No | Pluggable access/refresh token store. Defaults to localStorage. Pass a `MemoryTokenStore` or cookie-backed store for sensitive deployments (localStorage tokens are XSS-readable). |\n\nModes and their permissions:\n\n| Mode | Permissions | Use case |\n|------|-------------|----------|\n| `SingleContext` | `context:execute` | Apps that work with one context |\n| `MultiContext` | `context:create`, `context:list`, `context:execute` | Apps managing multiple contexts |\n| `Admin` | `admin` | Admin dashboards, dev tools |\n\nAuth flow: when `connectToNode(url)` is called, the provider redirects to the node's auth page. After login, the node redirects back with tokens in the URL hash. The provider processes these once (StrictMode-safe via ref) and sets `isAuthenticated = true`. The callback's `node_url` is validated against the node login was initiated with (or `allowedNodeUrls`); a `node_url` matching neither is rejected.\n\nOnline detection: the provider opens an SSE connection to the node after auth. `isOnline` reflects the SSE connection state — no polling.\n\n### `useMero()`\n\nAccess the MeroJs instance, auth state, and actions.\n\n```tsx\nconst {\n mero, // MeroJs | null — the SDK instance\n isAuthenticated, // boolean\n isOnline, // boolean — SSE connection state\n isLoading, // boolean — initial session restore\n nodeUrl, // string | null\n applicationId, // string | null — resolved from auth callback\n contextId, // string | null — from auth callback\n contextIdentity, // string | null — executor public key from auth callback\n connectToNode, // (url: string) => void — starts auth redirect\n logout, // () => void — clears tokens and state\n} = useMero();\n```\n\nThrough `mero` you access the full MeroJs API:\n\n```tsx\n// Admin API (flat methods, NOT nested)\nawait mero.admin.healthCheck();\nawait mero.admin.getContexts();\nawait mero.admin.getContext(contextId);\nawait mero.admin.getContextIdentitiesOwned(contextId);\nawait mero.admin.listApplications();\nawait mero.admin.getApplication(appId);\nawait mero.admin.installApplication(request);\nawait mero.admin.createContext(request);\nawait mero.admin.uploadBlob(request);\nawait mero.admin.getPeersCount();\n\n// Auth API\nawait mero.auth.getProviders();\nawait mero.auth.generateTokens(request);\nawait mero.auth.refreshToken(request);\n\n// RPC\nawait mero.rpc.execute({ contextId, method, argsJson, executorPublicKey });\n\n// SSE events\nmero.events.connect();\nmero.events.subscribe(contextIds);\nmero.events.on('event', handler);\n\n// Tokens\nmero.getTokenData(); // { access_token, refresh_token, expires_at } | null\nmero.isAuthenticated(); // boolean\n```\n\n### `useExecute(contextId, executorId)`\n\nWraps `mero.rpc.execute()` with loading/error state. Unmount-safe.\n\n```tsx\nconst { execute, loading, error } = useExecute(contextId, contextIdentity);\n\n// Generic typed\nconst todos = await execute('list');\nawait execute('add', { title: 'Buy milk' });\nawait execute('toggle', { id: '1' });\n```\n\n| Return | Type | Description |\n|--------|------|-------------|\n| `execute` | `(method, params?) => Promise` | Call a contract method |\n| `loading` | `boolean` | Request in flight |\n| `error` | `Error \\| null` | Last error |\n\n### `useSubscription(contextIds, callback)`\n\nManages SSE event subscription lifecycle. StrictMode-safe — connects once per MeroJs instance, cleans up on unmount.\n\n```tsx\nuseSubscription(\n contextId ? [contextId] : [],\n (event) => {\n console.log('Context event:', event.contextId, event.data);\n refreshData();\n },\n);\n```\n\n| Param | Type | Description |\n|-------|------|-------------|\n| `contextIds` | `string[]` | Context IDs to subscribe to (empty array = no subscription) |\n| `callback` | `(event: SseEventData) => void` | Called on each context event |\n\nThe SSE connection is shared — multiple `useSubscription` hooks reuse the same connection. The first one to mount calls `connect()`, subsequent ones just add handlers.\n\n### `useContexts(applicationId?)`\n\nFetches contexts from the node, optionally filtered by application ID.\n\n```tsx\nconst { contexts, loading, error, refetch } = useContexts(applicationId);\n\n// contexts: Array<{ contextId: string; applicationId: string }>\n```\n\n### Blob hooks\n\n`useBlobInfo` / `useBlobUrl` / `useUploadBlob` read and write the node's blob\nstore. The reads take an optional `contextId`, and it is what picks the mode:\n\n- **without `contextId`** — local-only. The node answers from its own blob\n store immediately, or 404s.\n- **with `contextId`** — network discovery. The node probes that context's\n peers (availability nodes first) for a holder.\n\nDiscovery is slow: core bounds the search by a **~30s deadline**, and for\n`useBlobUrl` the byte transfer is on top of that. `loading` is real UI state on\nthese hooks, not decoration.\n\n```tsx\n// Presence and size, no download — ask this before pulling something large.\nconst { info, notFound, loading, error } = useBlobInfo(blobId, { contextId });\n// info: { blobId, size, hash?, mimeType?, source?: 'local' | 'peer' } | null\n\n// Bytes as an object URL, revoked for you on unmount and on id/context change.\nconst { url } = useBlobUrl(blobId, { contextId, type: 'image/png' });\nreturn url ? : null;\n\n// Upload. Pass contextId to announce the blob so the context's peers can\n// discover it later.\nconst { uploadBlob, loading, error } = useUploadBlob();\nconst result = await uploadBlob({ data: bytes, contextId });\n```\n\nA null/undefined `blobId` fetches nothing, like the other `string | null` read\nhooks. `hash` and `mimeType` are genuinely optional — a peer probe carries only\npresence and size, so a discovery-sourced hit has neither; read `info.source`\nto tell a local answer from a peer one. `notFound` marks the node's legitimate\n\"no holder\" 404 apart from a transport failure; `error` is set for both.\n\n### Storage helpers\n\nPersist/read node URL, application ID, context ID, and context identity in localStorage.\n\n```tsx\nimport {\n getNodeUrl, setNodeUrl, clearNodeUrl,\n getApplicationId, setApplicationId, clearApplicationId,\n clearAllStorage,\n} from '@calimero-network/mero-react';\n```\n\nThese are used internally by `MeroProvider` but exported for apps that need direct access.\n\n### Re-exports from mero-js\n\nmero-react re-exports everything from mero-js via `export * from '@calimero-network/mero-js'`. Any new API added to mero-js is automatically available from mero-react — no manual sync needed.\n\n```tsx\n// All of these work from a single import\nimport {\n MeroProvider, useMero, useExecute, useSubscription, // react\n MeroJs, RpcClient, SseClient, WsClient, // core\n parseAuthCallback, buildAuthLoginUrl, // auth helpers\n LocalStorageTokenStore, MemoryTokenStore, // token stores\n} from '@calimero-network/mero-react';\n```\n\n## Theming\n\n`ConnectButton` and `LoginModal` default to the green Calimero palette used in admin-dashboard, tauri-app, and app-registry. Pass nothing for the default — provide a partial `MeroTheme` to override any subset.\n\n```tsx\nimport { ConnectButton } from '@calimero-network/mero-react';\n\n// Default green palette — no theme prop needed\n\n\n// Override only what you want; the rest stay default\n\n```\n\nThe same theme is forwarded to the embedded `LoginModal` and is also exposed as CSS variables on the component root, so a global stylesheet works too:\n\n```css\n:root {\n --mero-accent: #ff4081;\n --mero-accent-hover: #e91e63;\n}\n```\n\n`MeroTheme` keys (all optional): `primary`, `primaryHover`, `primaryText`, `background`, `backgroundSecondary`, `backgroundTertiary`, `border`, `text`, `textSecondary`, `error`, `overlay`, `radius`. Defaults: `#a5ff11` / `#8ed40d` / `#0d1117` / `#161b22` / `#1c2128` / `#30363d` / `#e6edf3` / `#8b949e` / `#ff6b6b` / `rgba(0,0,0,0.75)` / `8px`.\n\nHelpers: `defaultMeroTheme` (the full default palette), `resolveMeroTheme(partial?)` (merges a partial with defaults), and `themeToCssVars(resolved)` (returns a `CSSProperties` map of `--mero-*` variables for applying to your own container) are exported for advanced use.\n\n**Browser support**: hover-state and modal tints use CSS [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix), which requires Chrome 111+, Safari 16.2+, or Firefox 113+ (all 2023). On older browsers the bundled `styles.css` falls back to the default green `rgba()` for the button hover; the modal renders without subtle tints but is otherwise fully functional.\n\n### `` props\n\n```tsx\n// Square 40×40 icon button — logo only, no text\n\n\n// Custom label (shorthand: bare string overrides the disconnected label)\n\n\n// Per-state label overrides\n\n```\n\n| Prop | Type | Default | Notes |\n|------|------|---------|-------|\n| `connectionType` | `ConnectionType \\| CustomConnectionConfig` | `Remote` | `Custom` connects straight to the given URL, skipping the modal. Every other value opens the LoginModal (node discovery + manual URL entry). |\n| `theme` | `MeroTheme` | — | Partial token override. |\n| `logoOnly` | `boolean` | `false` | Render only the Calimero logo (square button). The label is still announced via `aria-label`. |\n| `label` | `string \\| { connect?, connected?, reconnecting? }` | — | Override default labels. Bare string targets the disconnected state. |\n| `className` / `style` | — | — | Forwarded to the inner `