# src/utils/

18 utility files — configuration, color manipulation, permissions, grid layout, and the `RtkUIProvider` component.

## FILES

| File | Purpose | Imports |
|------|---------|---------|
| `RtkUIProvider.tsx` | Context provider wrapping SafeAreaProvider + RtkUIContext | Exported in `src/exports.ts` |
| `config.ts` | `extendConfig()`, `generateConfig()`, custom deep merge | 3 imports |
| `config.spec.ts` | Tests for config merging | |
| `provide-design-system.ts` | `provideRtkDesignSystem()` — updates store with design tokens | Exported in `src/exports.ts` |
| `color.ts` | `hexToRGB`, `hslToRgb`, `rgbToHsl`, `getBrandColors`, `getBackgroundColors` | Internal |
| `colors.ts` | Color name → hex mappings for participant avatars | Internal |
| `permissions.ts` | `canViewChat()`, `canViewPolls()`, `canViewParticipants()`, `canViewPlugins()` | 3 imports |
| `grid.ts` | `useGridItemDimensions()` hook, `getAspectRatio()`, `GridSize` type | 3 imports |
| `notification.ts` | `sendNotification()` — pushes to notification state | Exported in `src/exports.ts` |
| `chat.ts` | `parseMessageForTarget()` — parses chat message recipients | Internal |
| `date.ts` | `differenceInMinutes()`, `elapsedDuration()`, `formatDateTime()` | Internal |
| `date.spec.ts` | Tests for date utilities | |
| `file.ts` | `getExtension()`, `getFileSize()`, `downloadFile()` | Internal |
| `string.ts` | `shorten()`, `hasOnlyEmojis()`, `sanitizeLink()`, `formatName()` | Internal |
| `size.ts` | `getSize()` — maps pixel dimensions to Size enum | Internal |
| `states.ts` | State-related helpers | Internal |
| `assets.ts` | `fetchEmojis()` — emoji data fetching | Internal |
| `flags.ts` | `FlagsmithFeatureFlags` — feature flag integration | Internal |

## KEY FUNCTIONS

### `extendConfig(config, baseConfig)` — config.ts
Deep-merges a partial UIConfig over the default. Arrays replace (not concat). Objects merge recursively. Primitives overwrite.

### `generateConfig(oldConfig, toExtend, options)` — config.ts
Converts v1 theme configs to v2 UIConfig format. Handles color generation, layout options, and feature toggles. Returns `{ config, data }` where `data.showSetupScreen` controls setup flow.

### `provideRtkDesignSystem(tokens)` — provide-design-system.ts
Updates `RtkUIStore` with new design tokens (colors, fonts, spacing, borders, theme). Contains extensive commented-out web CSS logic from the Dyte web SDK port.

### `RtkUIProvider` — RtkUIProvider.tsx
Wraps children in `SafeAreaProvider` + `SafeAreaView` + `RtkUIContext.Provider`. Subscribes to `RtkUIStore` changes. Disables Android hardware back button.

## CONVENTIONS

- Pure utility functions (no React) in `.ts` files
- React-dependent utilities (hooks, components) in `.tsx` files
- Tests colocated as `*.spec.ts` (not in `__tests__/`)
- No barrel export — each file imported directly by consumers
- `provide-design-system.ts` pattern: read current state, spread-merge, write back to store

## ANTI-PATTERNS

- Do NOT add a barrel `index.ts` here — files imported individually
- Do NOT add React components here except providers — components go in `src/components/`
- Do NOT use `lodash` beyond `isObject` (already imported in config.ts) — prefer native implementations
- Do NOT clean up commented-out CSS in `provide-design-system.ts` — it’s reference code from the web SDK port