### Clone and Set Up UTA Project (npm/yarn)

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This snippet demonstrates how to clone the UTA template repository and set up the project using either npm or yarn. It covers cloning the repository, navigating into the project directory, and installing necessary dependencies. It also includes a comment for optional iOS setup.

```bash
# Clone the UTA template
git clone https://github.com/your-org/react-native-uta.git MyUTAApp
cd MyUTAApp

# Install dependencies
npm install

# iOS setup (if on macOS)

```

--------------------------------

### iOS Environment Setup

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This command sequence sets up the iOS environment for the project on macOS. It navigates into the 'ios' directory and then installs CocoaPods dependencies. This is only applicable if you are developing on a macOS system.

```shell
cd ios && pod install
```

--------------------------------

### Install Project Dependencies

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This command installs all necessary project dependencies using Yarn. Ensure that Yarn is installed and added to your system's PATH. This step is crucial for the project to run correctly.

```shell
cd MyUTAApp
yarn install
```

--------------------------------

### Feature Directory Example

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This snippet provides an example of the expected directory structure for the 'settings' feature. It shows the top-level directory for the feature and subdirectories for components, screens, and hooks, adhering to UTA organizational principles.

```directory
src/features/settings/
```

--------------------------------

### Start Development Server (General)

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This command starts the Metro bundler, which is essential for running the React Native application. Ensure you have Node.js and npm installed.

```shell
# Start Metro bundler
npm start
```

--------------------------------

### TypeScript Import Order Example

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This example demonstrates the recommended import order for a TypeScript file, following common conventions. It prioritizes React imports, followed by other dependencies.

```typescript
// 1. React imports
import React from 'react'
```

--------------------------------

### Example 'View' and 'Surface' Component Structure

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This snippet demonstrates a basic structural example of 'View' and 'Surface' components, likely within a React or similar framework context. It shows how children and styling might be applied.

```jsx
{
  "style": {
    "--shiki-light": "#24292E",
    "--shiki-dark": "#E1E4E8"
  },
  "children": "View"
}
{
  "style": {
    "--shiki-light": "#E36209",
    "--shiki-dark": "#FFAB70"
  },
  "children": "children"
}
{
  "style": {
    "--shiki-light": "#24292E",
    "--shiki-dark": "#E1E4E8"
  },
  "children": "\""
}
<p>
  {" "}
</p>
<p>
  {" "}
</p>
<div>
  {" "}
</div>
{
  "style": {
    "--shiki-light": "#D73A49",
    "--shiki-dark": "#F97583"
  },
  "children": "</"
}
{
  "style": {
    "--shiki-light": "#24292E",
    "--shiki-dark": "#E1E4E8"
  },
  "children": "Surface"
}
{
  "style": {
    "--shiki-light": "#D73A49",
    "--shiki-dark": "#F97583"
  },
  "children": ">"
}
{
  "style": {
    "--shiki-light": "#24292E",
    "--shiki-dark": "#E1E4E8"
  },
  "children": " );"
}
{
  "style": {
    "--shiki-light": "#24292E",
    "--shiki-dark": "#E1E4E8"
  },
  "children": "}"
}
```

--------------------------------

### Clone and Set Up UTA React Native Project

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This snippet outlines the steps to clone the UTA React Native template from GitHub, navigate into the project directory, install dependencies using npm, and set up iOS dependencies with CocoaPods.

```shell
# Clone the UTA template
git clone https://github.com/your-org/react-native-uta.git MyUTAApp
cd MyUTAApp
 
# Install dependencies
npm install
 
# iOS setup (if on macOS)
cd ios && pod install && cd ..

```

--------------------------------

### Reload and Navigate to Settings

Source: https://dev.updatetheapp.com/docs/guides/getting-started

These instructions guide the user to reload their application and navigate to the 'Settings' screen. It implies that the feature being developed is accessible via the settings interface.

```bash
# Reload your app
# Navigate to Settings in your app
# You should see your new feature working!
```

--------------------------------

### Run Metro Bundler and Android App

Source: https://dev.updatetheapp.com/docs/guides/getting-started

Commands to start the Metro bundler and run the application on an Android device. Ensure you have Node.js and npm installed. The output indicates successful bundling and deployment to the device.

```bash
# Start Metro bundler
npm start

# In a new terminal, run Android
npm run android
```

--------------------------------

### Design Token Usage Example (JavaScript)

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

Provides examples of how to access and use design tokens for colors, spacing, typography, and radii within the application. This ensures consistent styling across the UI.

```javascript
// Colors
theme.colors.primary[500]
theme.colors.textPrimary
 
// Spacing  
spacing.xs // 4
spacing.sm // 8
spacing.md // 16
 
// Typography
typography.sizes.body
typography.families.regular
 
// Radii
theme.radii.sm // 4
theme.radii.md // 8
```

--------------------------------

### SVGO Configuration Example (JavaScript)

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

This snippet demonstrates a basic SVGO configuration in JavaScript. It shows how to set up plugins for SVG optimization. Ensure you have SVGO installed as a development dependency.

```javascript
// svgo.config.js
module.exports = {
  plugins: [
    { 
}
```

--------------------------------

### React Native Testing: Import and Render Setup

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This snippet demonstrates the basic setup for testing React Native components. It includes importing necessary functions from '@testing-library/react-native' and the component under test ('./IconButton').

```javascript
import { render, fireEvent } from '@testing-library/react-native';
import { IconButton } from './IconButton';

```

--------------------------------

### Create Feature Structure using mkdir

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This snippet demonstrates how to create the directory structure for a new feature following UTA conventions. The `mkdir -p` command ensures that parent directories are created if they don't exist, simplifying the setup process.

```shell
# Create feature directory structure
mkdir -p src/features/settings/{components,screens,hooks}
```

--------------------------------

### Component Composition in React

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This example demonstrates component composition in a React-like syntax. It shows how to import a 'Surface' component and use it to build more complex UI elements. This pattern is fundamental for creating reusable and maintainable UI architectures.

```javascript
// ui/patterns/Card/Card.tsx
import { Surface } from "./Surface";

```

--------------------------------

### Run and Test Application

Source: https://dev.updatetheapp.com/docs/guides/getting-started

Commands to reload the React Native application and instructions for navigating to a specific screen for testing. This is a command-line interface (CLI) example.

```bash
# Reload your app
npm start
 
# Navigate to Settings in your app
# You should see your new feature working!
```

--------------------------------

### Run Development Server with npm

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This code demonstrates how to start the development server using npm. It's a common command-line instruction for Node.js projects to run the application in development mode.

```bash
npm start
```

--------------------------------

### Launch UTA React Native App

Source: https://dev.updatetheapp.com/docs/guides/getting-started

Instructions to start the development server for the UTA React Native project and run the application on an iOS simulator or device.

```shell
# Start Metro bundler
npm start
 
# In a new terminal, run iOS
npm run ios

```

--------------------------------

### Clone React Native UTA Template

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This command clones the specified React Native UTA template repository to your local machine. It requires Git to be installed and accessible in your PATH. The output is the name of the newly created project directory.

```shell
# Clone the UTA template
git clone https://github.com/your-org/react-native-uta.git MyUTAApp
```

--------------------------------

### Component README Structure Example (Markdown)

Source: https://dev.updatetheapp.com/docs/ui-development/architecture/development-workflow/deployment-integration

This markdown example outlines a typical structure for a component's README file. It includes sections for purpose, installation, usage, props API, and accessibility.

```markdown
## Documentation Example

Here's how to document your component:

**Component README Structure:**

* Component purpose and description
* Installation and import instructions
* Basic usage examples
* Props API documentation
* Accessibility notes
* Advanced usage patterns

**Props Documentation Format:**

| Prop      | Type                                 | Default   | Description |
| --------- | ------------------------------------ | --------- | ----------- |
| variant   | `'primary' | 'secondary' | 'ghost'` | `'primary'` | The visual style of the button. |
```

--------------------------------

### API Client Implementation Example (JavaScript)

Source: https://dev.updatetheapp.com/docs/guides/implementation-workflow

This JavaScript snippet demonstrates the basic structure for implementing an API client. It assumes the `ApiClient` class is available and shows how to import and potentially use it within your project. It serves as a starting point for integrating API communication.

```javascript
// Your project - customize from reference
import { ApiClient } from "../core/shared/api";
```

--------------------------------

### Component File Structure Example (TypeScript)

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

Illustrates the standard file structure for a component, including the main implementation file (.tsx), type definitions (.ts), index export file (.ts), and test file (.test.tsx). This structure promotes organization and maintainability.

```typescript
ComponentName/
├── ComponentName.tsx      # Implementation
├── types.ts              # TypeScript interfaces
├── index.ts              # Exports
└── ComponentName.test.tsx # Tests
```

--------------------------------

### Start Monitoring Services - TypeScript

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/finalization-stage-guide

This code illustrates how to start monitoring services after the initialization process is complete. It imports the 'monitoringService' and registers it as a task for the finalization stage. This ensures that monitoring is active once the application setup is done.

```typescript
// core/shared/monitoring/initialization.ts
initializer.registerTask(InitStage.FINALIZATION, metricsCollectionTask);
// Register task
initializer.registerTask(InitStage.FINALIZATION, metricsCollectionTask);

import { initializer, InitStage, InitTask } from '@/core/shared/app/initialization';
import { monitoringService } from '@/core/shared/app/monitoring';
initializer.registerTask(InitStage.FINALIZATION, monitoringService);
```

--------------------------------

### Using Design Tokens vs. Hardcoded Values (CSS/JS)

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

Illustrates the correct and incorrect ways to apply styling properties. The 'GOOD' example uses theme-provided design tokens for colors, spacing, and radii, ensuring consistency and maintainability. The 'BAD' example uses hardcoded values, which are discouraged.

```css
// ✅ GOOD - Using design tokens
const styles = {
  container: {
    backgroundColor: theme.colors.surface,
    padding: spacing.md,
    borderRadius: theme.radii.lg,
  }
};
 
// ❌ BAD - Hardcoded values
const styles = {
  container: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 8,
  }
};
```

--------------------------------

### JavaScript: Documentation Generation Setup

Source: https://dev.updatetheapp.com/docs/ui-development/architecture/development-workflow/ai-collaboration

This JavaScript snippet demonstrates the initial setup for generating documentation, likely using a tool like Shiki. It includes comments like '// Loading, disabled, error snapshots' suggesting a focus on documenting component states. This aids in creating comprehensive API and usage documentation.

```javascript
// Loading, disabled, error snapshots
```

--------------------------------

### Correct Prompting Example (Feature Implementation)

Source: https://dev.updatetheapp.com/docs/guides/ai-documentation-workflow

This code snippet illustrates a correct prompting strategy for implementing features. It provides an example prompt that guides the AI to base its response on a specific feature implementation, ensuring more accurate and relevant output.

```text
"Based on the Feature Implementat
```

--------------------------------

### Launch iOS App

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This command initiates the build and launch process for the iOS version of the application. It requires the Metro bundler to be running.

```shell
# In a new terminal, run iOS
npm run ios
```

--------------------------------

### Launch Android App

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This command initiates the build and launch process for the Android version of the application. It requires the Metro bundler to be running.

```shell
# In a new terminal, run Android
npm run android
```

--------------------------------

### Prefetching Featured Products with Async/Await (TypeScript)

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This snippet demonstrates how to prefetch featured products using `async/await` and `prefetchQuery`. It includes error handling with a `try...catch` block and defines the `queryKey` and `queryFn` for the data fetching operation. This pattern is useful for optimizing user experience by loading critical data upfront.

```typescript
async execute(): Promise<void> {
  try {
    // Prefetch featured products
    await queryClient.prefetchQuery({
      queryKey: productQueryKeys.featured(),
      queryFn: productApi.public.getFeaturedProducts,
    });
  } catch (error) {
    // Handle potential errors during prefetching
    console.error("Error prefetching featured products:", error);
  }
}
```

--------------------------------

### JavaScript: Start and Pause Monitoring Service

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/finalization-stage-guide

This snippet demonstrates how to initiate and halt the monitoring service. It includes error handling for the start process and logs any failures. The code assumes the existence of a monitoring service and related functions.

```javascript
const monitoringStartTask = async () => {
  try {
    await startMonitoring();
  } catch (error) {
    console.error('Monitoring service start failed:', error); 
    // Non-critical - app can function without monitoring
  }
};

// Register task
initializer.registerTask(InitStage.FINALIZATION, monitoringStartTask);
```

--------------------------------

### Registry Setup - JavaScript

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management

This JavaScript code snippet defines a registry setup with example properties for size and color. It appears to be part of a larger configuration or initialization process for a registry system, possibly related to UI components or themes.

```javascript
{
  size = 24,
  color = "black"
})
```

--------------------------------

### JavaScript: Usage Example for Task with Progress

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This JavaScript snippet shows a practical usage example of creating a task with progress reporting. It utilizes a hypothetical `createTaskWithProgress` function, passing a task name and an asynchronous function that accepts the `reportProgress` callback. This allows for monitoring and managing the progress of asynchronous operations.

```javascript
// Usage example:
const assetPreloadTask = createTaskWithProgress(
  'assets:preload',
  async (reportProgress) => {
  }
);
```

--------------------------------

### React Navigation Container Setup (JavaScript)

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This JavaScript snippet demonstrates the setup of a React Navigation container. It configures essential properties such as the navigation ref, initial state, state change handler, linking configuration, and theme management. This code is typically found in the root of a React Native application.

```javascript
export default function App() {
  return (
    <NavigationContainer
      ref={navigationRef}
      initialState={initialState}
      onStateChange={handleStateChange}
      linking={linking}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
    >
      {/* Your main navigator goes here */}
    </NavigationContainer>
  );
}
```

--------------------------------

### React Initialization and Navigation Setup (TypeScript)

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This snippet demonstrates how to import and use React hooks for application initialization and setting up navigation screens. It includes imports for React, useEffect, and custom initialization logic from '@/core/shared/app/initialization'.

```typescript
// features/products/screens/ProductsScreen.tsx (React Navigation)
import React, { useEffect } from 'react';
import { initializer, InitStage } from '@/core/shared/app/initialization';
import { useInitialization } from '@/core/shared/app/initialization';
```

--------------------------------

### Zustand State Management: Basic Usage

Source: https://dev.updatetheapp.com/docs/guides/client-state-management

This snippet demonstrates the basic setup and usage of Zustand for state management. It includes creating a store, defining state, and actions for updating the state. Ensure you have Zustand installed (`npm install zustand`).

```javascript
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCounterStore;
```

--------------------------------

### React Navigation Setup with AuthAwareNavigationContainer

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This snippet demonstrates the setup of the AuthAwareNavigationContainer in a React Native application. It includes essential imports for navigation, initialization, and deep linking services. The component itself is exported for use in the application's navigation structure.

```javascript
import { navigationService } from './navigationService';
import { useInitialization } from '@/core/shared/app/initialization';
import { linking } from './linking'; // Deep linking configuration

export function AuthAwareNavigationContainer({ children }) {
  const navigationRef = useRef(null);

  // Initialization logic (e.g., checking auth state, loading data)
  useInitialization();

  return (
    // Navigation container setup with linking and ref for navigation service
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        navigationService.setNavigator(navigationRef.current);
      }}
      linking={linking}
    >
      {children}
    </NavigationContainer>
  );
}
```

--------------------------------

### Auth Initialization Setup (TypeScript)

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/pre-ui-initialization-guide

This TypeScript code defines the `authInitialization` task, which is responsible for setting up the authentication module. It imports necessary modules like `initializer`, `tokenService`, `authStore`, and `authEvents`. This setup is crucial for managing authentication state and events within the application.

```typescript
import { initializer, InitStage, InitTask } from '@/core/shared/app/initialization';
import { tokenService } from './tokenService';
import { authStore } from './store';
import { authEvents } from './events';

export const authInitialization: InitTask = {
  // ... other properties if any
};

```

--------------------------------

### Render Text Component with Styling in React

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This snippet demonstrates rendering a Text component with inline styles in React. It includes examples of setting marginLeft, color, and fontSize.

```jsx
<Text style={{ marginLeft: spacing.xs, color: colors.color, fontSize: fontSizes.medium }}>Some Text</Text>
```

--------------------------------

### React Query Integration Patterns - GET Hooks

Source: https://dev.updatetheapp.com/docs/coding-standards/typescript-react-patterns

This snippet demonstrates consistent hook patterns for React Query integration, specifically for GET requests. It includes comments guiding the implementation and an example of exporting a 'useProduct' hook that accepts an 'id' parameter. This pattern promotes maintainability and reusability in data fetching.

```javascript
// GET hooks
export function useProduct(id: string) {
```

--------------------------------

### Direct Initialization Example (JavaScript/React)

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/pre-ui-initialization-guide

An older approach to application initialization using React's useEffect hook for sequential asynchronous calls before rendering the main app. This method lacks structured error handling and progress tracking compared to task-based initialization.

```javascript
    // Old approach in App.tsx
    const App = () => {
      const [isReady, setIsReady] = useState(false);
      
      useEffect(() => {
        async function initialize() {
          try {
            // Direct initialization calls
            await loadAuthTokens();
            await loadConfiguration();
            await setupTheme();
            // Show UI
            setIsReady(true);
          } catch (error) {
            console.error('Initialization failed', error);
          }
        }
        initialize();
      }, []);
      
      if (!isReady) return null;
      
      return <MainApp />;
    };

```

--------------------------------

### Managing UI State (Modal Visibility) with Zustand

Source: https://dev.updatetheapp.com/docs/guides/client-state-management

This example demonstrates how to manage UI state, specifically modal visibility, using Zustand. It shows a simple store setup for controlling modal open/close states.

```javascript
import { create } from 'zustand';

const useModalStore = create((set) => ({
  isModalOpen: false,
  openModal: () => set({ isModalOpen: true }),
  closeModal: () => set({ isModalOpen: false }),
}));

export default useModalStore;
```

--------------------------------

### Install @expo/vector-icons

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/vector-icons-guide

Commands to check if @expo/vector-icons is installed and how to install it if it's missing. This is rarely needed if using create-expo-app.

```bash
# Check if installed
npm list @expo/vector-icons

# If not installed (rare)
npm install @expo/vector-icons
```

--------------------------------

### Create Component Files using touch

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This command uses the `touch` utility to create the necessary files for a new IconButton component in the ui/foundation directory. It ensures that the component's TypeScript, type definitions, export, and test files are readily available.

```bash
touch ui/foundation/IconButton/IconButton.tsx
touch ui/foundation/IconButton/types.ts
touch ui/foundation/IconButton/index.ts
touch ui/foundation/IconButton/IconButton.test.tsx
```

--------------------------------

### Add Navigation Screen Registration in React Native

Source: https://dev.updatetheapp.com/docs/guides/getting-started

Register a new screen in the application's navigation system. This example shows how to add a 'Settings' screen to a Stack Navigator, associating it with `SettingsScreen` component and setting its display title.

```typescript
import { SettingsScreen } from '@/features/settings/screens/SettingsScreen';
 
// Add to your navigator
<Stack.Screen 
  name="Settings" 
  component={SettingsScreen}
  options={{ title: 'Settings' }}
/>
```

--------------------------------

### Progressive Enhancement Pattern Example

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

Demonstrates a progressive enhancement strategy for application development. It suggests rendering a UI shell with placeholders initially, then populating data asynchronously, and finally enabling full interactivity. This improves perceived performance by avoiding blocking renders.

```text
You can enhance this by:

- Separating UI rendering from data loading
- Using the InitStage.INITIAL_UI for navigation and essential UI setup
- Deferring data fetching to the Background stage
- Implementing skeleton screens or placeholders during the transition

Progressive Enhancement Pattern

A good migration strategy involves progressive enhancement:

- First render the UI shell with skeleton placeholders during the Initial UI stage
- Then populate data gradually as Background tasks complete
- Finally, enable full interactivity after all initialization is complete

This approach significantly improves perceived performance compared to blocking renders until all data is available.
```

--------------------------------

### Building and Deploying Custom Solution

Source: https://dev.updatetheapp.com/docs/uta-ecosystem

This sequence first builds the application for release using 'npm run build:release' and then executes a custom deployment script named 'deploy-script.sh'. Ensure both the build script and the deployment script are correctly set up in your project.

```bash
# Custom solution
npm run build:release && ./deploy-script.sh
```

--------------------------------

### Install react-native-bootsplash and Pods

Source: https://dev.updatetheapp.com/docs/ui-development/splash-screens

Installs the react-native-bootsplash library using npm and then installs the necessary CocoaPods dependencies for the iOS platform.

```bash
npm install react-native-bootsplash
cd ios && pod install
```

--------------------------------

### React App Setup with Essential Providers

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This JavaScript code snippet demonstrates the initial setup for a React Native application. It imports and configures essential providers such as SafeAreaProvider for handling safe areas, QueryClientProvider for data fetching with React Query, and StatusBar for managing the device's status bar. This is a common pattern for initializing modern React Native applications.

```jsx
// App.tsx
import React, { useEffect } from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { QueryClientProvider } from '@tanstack/react-query'
import { StatusBar } from 'react-native'

```

--------------------------------

### Example React Native Project Context (TypeScript)

Source: https://dev.updatetheapp.com/docs/ui-development/architecture/development-workflow/ai-collaboration

This is a contextual example illustrating project setup for AI prompts. It specifies a React Native application using TypeScript and adhering to a three-layer UI architecture. It also highlights the usage of a design token system from a specific path, serving as a template for providing detailed information to AI for code generation or analysis.

```typescript
We're building a React Native app using TypeScript, following a three-layer UI architecture.
Components must use our design token system from @/core/shared/styles/theme.
```

--------------------------------

### JavaScript Async Task Execution Example

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This JavaScript code snippet illustrates how to initiate an asynchronous task using `await`. It's part of a larger structure that likely involves promise management and error handling.

```javascript
await task.execute();
```

--------------------------------

### Setup Navigation Configuration in JavaScript

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This snippet shows how to set up navigation configuration, likely for handling deep links and other navigation-related functionalities within the application. It's a common pattern for managing user flow.

```javascript
await setupNavigationConfiguration();
```

--------------------------------

### Install lottie-react-native for Expo

Source: https://dev.updatetheapp.com/docs/ui-development/assets/assets-management/animation-assets-guide

Installs the lottie-react-native library for Expo projects. This command uses the Expo CLI to manage package installations.

```bash
# For Expo projects
npx expo install lottie-react-native
```

--------------------------------

### JavaScript Navigation Container Setup

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This snippet demonstrates the basic structure for setting up a NavigationContainer in JavaScript. It outlines how to define the root navigator for an application. No external dependencies are explicitly mentioned, but it implies the use of a navigation library like React Navigation.

```javascript
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Your navigators go here */}
    </NavigationContainer>
  );
}
```

--------------------------------

### React LoadingTransition Example

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This React code snippet demonstrates how to use a `LoadingTransition` component with a `SkeletonScreen` as a fallback, followed by the main `ProductListScreen` content. This pattern helps improve perceived performance by showing a UI shell quickly.

```jsx
// Usage example:
// <LoadingTransition fallback={<SkeletonScreen />} >
// <ProductListScreen />
// </LoadingTransition>
```

--------------------------------

### Create Component Structure - Shell

Source: https://dev.updatetheapp.com/docs/ui-development/getting-started

This shell command sequence creates the necessary directory and files for a new UI component named 'IconButton' following a specified file naming convention. It includes the component's main file, types definition, index export, and test file.

```shell
# Create component directory
mkdir -p ui/foundation/IconButton

# Create component files
touch ui/foundation/IconButton/IconButton.tsx
touch ui/foundation/IconButton/types.ts
touch ui/foundation/IconButton/index.ts
touch ui/foundation/IconButton/IconButton.test.tsx
```

--------------------------------

### React: Using Font Awesome Icons with Custom Size, Color, and Library

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/vector-icons-guide

This example shows how to render Font Awesome icons in a React component. It includes setting the icon name, specifying the 'fontAwesome' library, and customizing the size and color. The 'fontAwesome' library must be installed and imported correctly.

```jsx
<Icon name="heart" library="fontAwesome" size="lg" color="red" />
```

--------------------------------

### Create Settings Screen in React Native

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This snippet demonstrates how to create a basic settings screen component in React Native. It utilizes `ScreenContainer` for consistent screen layout and `ScrollView` for scrollable content. The example imports React, `ScrollView` from 'react-native', and `ScreenContainer` from a local UI module.

```typescript
import React from 'react';
import { ScrollView } from 'react-native';
import { ScreenContainer } from '@/ui/foundation/ScreenContainer';

// src/features/settings/screens/SettingsScreen.tsx
```

--------------------------------

### React Skeleton Screens for Product List

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This React code snippet demonstrates how to implement skeleton screens for a product list. It uses basic React components like View and FlatList, along with StyleSheet for styling. The example shows the import of React and necessary components, and a placeholder comment for the screen's file path.

```javascript
// features/product-catalog/screens/ProductListScreen.tsx
import React from 'react';
import { View, FlatList, StyleSheet } from 'react';

```

--------------------------------

### Install lottie-react-native for React Native CLI (npm)

Source: https://dev.updatetheapp.com/docs/ui-development/assets/assets-management/animation-assets-guide

Installs the lottie-react-native library for React Native projects using npm. This is a standard package installation command.

```bash
# For React Native CLI projects
npm install lottie-react-native
```

--------------------------------

### React Component Setup with Query Keys and Navigation

Source: https://dev.updatetheapp.com/docs/guides/server-state-management

This snippet demonstrates the setup of a React component, likely a screen for displaying a product list. It includes importing necessary query keys, initializing a query client using `useQueryClient`, and obtaining navigation functions using `useNavigation`. The component is defined as an arrow function.

```javascript
import { queryKeys } from '@/core/query/queryKeys';

const ProductListScreen = () => {
  const queryClient = useQueryClient();
  const navigation = useNavigation();

  const handleProductPress = (productId) => {
    // Prefetch p
```

--------------------------------

### Install Fontello CLI

Source: https://dev.updatetheapp.com/docs/ui-development/assets/assets-management/font-management-guide

This command installs the fontello-cli globally on your system, which is a prerequisite for generating icon fonts.

```bash
# Using fontello-cli
npm install -g fontello-cli
```

--------------------------------

### API Client Setup and Product Service Implementation (TypeScript)

Source: https://dev.updatetheapp.com/docs/guides/implementation-workflow

Sets up an API client using environment variables for the API URL and defines a ProductService class to interact with the '/products' endpoint. This follows a pattern of copying reference implementations and configuring them for the specific environment.

```typescript
    // Your project - customize from reference
    import { ApiClient } from '@/core/shared/api/ApiClient';
     
    // Configure for your environment
    const apiClient = new ApiClient(process.env.EXPO_PUBLIC_API_URL);
     
    // Use proven service patterns
    export class ProductService {
      async getProducts() {
        return apiClient.get('/products');
      }
    }
```

--------------------------------

### Install Lottie Dependencies using npm

Source: https://dev.updatetheapp.com/docs/ui-development/assets/assets-management/animation-assets-guide

This snippet shows the command to install the necessary npm packages for Lottie animation support. It requires Node.js and npm to be installed on the system.

```bash
npm install lottie-web
```

--------------------------------

### Install react-native-vector-icons Package

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/vector-icons-guide

This command installs the 'react-native-vector-icons' package using npm. This is the first step before you can use the library in your React Native project.

```bash
npm install react-native-vector-icons
```

--------------------------------

### React Component Migration with Progressive Enhancement

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

Demonstrates migrating a React component using progressive enhancement. It utilizes custom hooks like `useInitialization` and `useProducts` to manage application initialization stages and data fetching. The code registers tasks for UI setup and background data prefetching, conditionally rendering skeleton placeholders or the actual product list based on the initialization state and loading status. This approach enhances perceived performance by providing immediate visual feedback.

```javascript
    // Migration approach for a specific feature
    const ProductScreen = () => {
      const { initialized, currentStage } = useInitialization();
      const { data, isLoading } = useProducts();
      
      // Register initialization once
      useEffect(() => {
        initializer.registerTask(InitStage.INITIAL_UI, {
          name: 'products:ui-setup',
          execute: async () => {
            // Only essential UI setup here
            setupProductScreenLayout();
          }
        });
        
        initializer.registerTask(InitStage.BACKGROUND, {
          name: 'products:data-fetch',
          execute: async () => {
            // Move data fetching to background
            queryClient.prefetchQuery(productQueryKeys.list);
          }
        });
      }, []);
      
      // Determine what to show based on initialization state
      const showSkeletons = currentStage === InitStage.INITIAL_UI || 
                            (currentStage === InitStage.BACKGROUND && isLoading);
      
      return (
        <Screen>
          {showSkeletons ? <ProductSkeleton /> : <ProductList data={data} />}
        </Screen>
      );
    };

```

--------------------------------

### Install Fanticon using npm

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

This snippet demonstrates how to install the Fanticon package using npm. It is a prerequisite for using the icon generation features.

```bash
npm install fanticon
```

--------------------------------

### Install react-native-vector-icons Package

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/vector-icons-guide

Installs the react-native-vector-icons library, a popular choice for non-Expo React Native projects. This package also supports multiple icon sets.

```bash
npm install react-native-vector-icons
# or
yarn add react-native-vector-icons
```

--------------------------------

### Install @expo/vector-icons Package

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/vector-icons-guide

Installs the @expo/vector-icons library, recommended for Expo projects. This package provides a unified way to use vector icons from various sources.

```bash
npx expo install @expo/vector-icons
```

--------------------------------

### Install NativeWind and Dependencies (npm)

Source: https://dev.updatetheapp.com/docs/ui-development/theme-management/nativewind-integration

Installs NativeWind and its required peer dependencies using npm. Ensure these packages are present for NativeWind to function correctly.

```bash
npm install nativewind tailwindcss@^3.4.17 react-native-reanimated@3.16.2 react-native-safe-area-context
```

--------------------------------

### JavaScript Imports for App Initialization and Data Fetching

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This snippet shows essential JavaScript imports for setting up application initialization, managing query clients, interacting with a product API, and defining query keys. It assumes these modules are available in the specified paths.

```javascript
import { initializer, InitStage, InitTask } from '@/core/shared/app/initialization';
import { queryClient } from '@/core/shared/query/queryClient';
import { productApi } from './api';
import { productQueryKeys } from './queryKeys';
```

--------------------------------

### Install Fanticon for Icon Font Generation

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Command to install Fanticon as a development dependency. Fanticon is a tool used for generating icon fonts from SVG icons.

```bash
    npm install --save-dev fanticon

```

--------------------------------

### Get Session Duration in Milliseconds (TypeScript)

Source: https://dev.updatetheapp.com/docs/api/headers/session-tracking

This TypeScript function retrieves the session start time from storage and calculates the current session duration in milliseconds. It handles cases where the session start time might not be set. Dependencies include a storage utility for getting items. It returns a number representing milliseconds or null.

```typescript
/**
 * Get the current session duration in milliseconds
 */
public async getSessionDuration(): Promise<number | null> {
    const sessionStartTime = await storage.getItem('session_start_time');

    if (!sessionStartTime) {
        return null;
    }

    // Assuming sessionStartTime is a string representation of a timestamp or date
    const startTimeMs = new Date(sessionStartTime).getTime();
    const currentTimeMs = new Date().getTime();

    return currentTimeMs - startTimeMs;
}
```

--------------------------------

### JavaScript Async Initialization and Error Handling

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/pre-ui-initialization-guide

This JavaScript code snippet demonstrates an asynchronous initialization process using `async/await`. It handles loading authentication tokens, configuration, and theme settings. A try-catch block is used to manage potential errors during initialization and logs an error message to the console if any step fails. Dependencies include built-in JavaScript features for asynchronous operations and console logging.

```javascript
try {
  await loadAuthTokens();
  await loadConfiguration();
  await setupTheme();

  // Show UI
  setIsReady(true);
} catch (error) {
  console.error('Initialization failed', error);
}
```

--------------------------------

### Install react-native-bootsplash using npm

Source: https://dev.updatetheapp.com/docs/ui-development/splash-screens

This snippet provides the npm command to install the 'react-native-bootsplash' library. It is a fundamental step for integrating the library into a React Native project.

```bash
npm install react-native-bootsplash
```

--------------------------------

### JavaScript App Initialization Tasks

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This snippet demonstrates how to register initialization tasks for different stages of application loading, such as 'INITIAL_UI'. It includes comments guiding deferred tasks to the background stage. Dependencies include StyleSheet from a styling library.

```javascript
initializer.registerTask(
  InitStage.INITIAL_UI,
  ordersInitTask
);

// More data-intensive tasks should be deferred to the Background stage
// See the Background Initialization Guide for details:
// /docs/guides/app-initialization/background

}, [initialized]);

}
```

--------------------------------

### Install Development Dependencies with npm

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs development dependencies '@svgr/cli' and 'svgo' using npm. These packages are typically used for optimizing and transforming SVG assets during the development process.

```shell
npm install --save-dev @svgr/cli svgo
```

--------------------------------

### Install Development Dependencies with Yarn

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs development dependencies '@svgr/cli' and 'svgo' using Yarn. These packages are typically used for optimizing and transforming SVG assets during the development process.

```shell
yarn add --dev @svgr/cli svgo
```

--------------------------------

### Install Development Dependencies with yarn

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs development dependencies for the project using yarn. The '--dev' flag ensures these packages are added to the 'devDependencies' section of the package.json file.

```shell
# Development dependencies 
yarn add --dev <package-name>
```

--------------------------------

### JavaScript Theme Initialization with Error Handling

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/pre-ui-initialization-guide

This JavaScript code snippet demonstrates how to initialize a theme, with a focus on parsing a custom theme and gracefully handling potential errors using a try-catch block. It logs errors to the console and falls back to a default theme if initialization fails. Dependencies include a hypothetical 'themeStore' object.

```javascript
try {
  const customTheme = JSON.parse(theme);
  themeStore.setThemeMode('dark', customTheme);
} catch (parseError) {
  console.error('Failed to parse custom theme:', parseError);
  // Continue with default theme
}

try {
  // Some other initialization logic
} catch (error) {
  console.error('Theme initialization failed:', error);
  // Fall back to light theme
  themeStore.setThemeMode('light');
}
```

--------------------------------

### React useState and useEffect Hooks Example

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This snippet demonstrates initializing and updating state using `useState` and performing side effects with `useEffect`. It sets up state variables for products, categories, user, and notifications, and includes a function to load data asynchronously within a `useEffect` hook. Dependencies for the effect are not explicitly shown in this snippet.

```javascript
const [data, setData] = useState({
  products: [],
  categories: [],
  user: null,
  notifications: []
});

useEffect(() => {
  async function loadEverything() {
    try {
      // Fetch everything at once, blocking UI until complete
    }
  }
});
```

--------------------------------

### Install Development Dependencies with npm

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs development dependencies for the project using npm. The '--save-dev' flag ensures these packages are added to the 'devDependencies' section of the package.json file.

```shell
# Development dependencies 
npm install --save-dev <package-name>
```

--------------------------------

### React Native App Initialization and Shell Setup

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This React Native component sets up the main application shell. It integrates essential providers like SafeAreaProvider, QueryClientProvider, ThemeProvider, and InitializationProvider. It also handles hiding the native splash screen and conditionally renders the app's content based on the initialization state.

```javascript
import React, { useEffect } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { QueryClientProvider } from '@tanstack/react-query';
import { StatusBar } from 'react-native';
import { ThemeProvider } from './ui/theme/ThemeProvider';
import { InitializationProvider } from '@/core/shared/app/initialization/InitializationProvider';
import { AppNavigator } from './navigation/AppNavigator';
import { SplashScreen } from './ui/screens/SplashScreen';
import { useInitialization } from '@/core/shared/app/initialization';
import { queryClient } from '@/core/shared/query/queryClient';
 
export default function App() {
  // Hide the native splash screen once our JS is running
  useEffect(() => {
    // This assumes you're using a splash screen library like 'react-native-splash-screen'
    SplashScreen.hide();
  }, []);
 
  return (
    <SafeAreaProvider>
      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <InitializationProvider>
            <AppContent />
          </InitializationProvider>
        </ThemeProvider>
      </QueryClientProvider>
    </SafeAreaProvider>
  );
}
 
function AppContent() {
  const { initialized, currentStage, error } = useInitialization();
  
  // Show custom splash screen while Pre-UI initialization completes
  if (currentStage === 'pre-ui' || !currentStage) {
    return <SplashScreen />; 
  }
  
  // Once Pre-UI is done, show the AppNavigator which handles further stages
  return <AppNavigator />; 
}
```

--------------------------------

### Initialize App State and Routing in JavaScript

Source: https://dev.updatetheapp.com/docs/features/communication-patterns

This snippet demonstrates how to initialize the application's state and define routes using JavaScript. It includes setting up an initial state and configuring a router with a 'Login' route. This pattern is common in single-page applications.

```javascript
on('auth:logout', () => {
});

navigation.reset({
 index: 0,
 routes: [{ name: 'Login' }],
});

 });

 });

 return unsubscribe;
},
// 3. Listen in features for data clearing
useEffect(() => {
 const unsubscribe = () => {
 };

 });
```

--------------------------------

### Consistent API and Hook Naming Examples (JavaScript)

Source: https://dev.updatetheapp.com/docs/architecture/domain-architecture

Demonstrates correct and incorrect naming conventions for API service instances and custom hooks in JavaScript. The correct examples follow a predictable pattern, while the incorrect examples show inconsistent and verbose naming.

```javascript
export const productApi = new ProductApiService(); // Too verbose
export const userApiClient = new UserApiClient();  // Different suffix
export const orderService = new OrderService();  // Missing "Api"

// Inconsistent hook naming
export function useGetProducts() { /* ... */ }  // "Get" is redundant
export function fetchUsers() { /* ... */ }      // Missing "use" prefix
export function orderQueryHook() { /* ... */ }  // Unclear purpose
```

--------------------------------

### Prefetch Data with Query Client

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/background-initialization-guide

This snippet demonstrates how to prefetch data using a query client, a common pattern in modern web applications for optimizing data loading. It utilizes an asynchronous function to execute the prefetch operation and specifies a 'high' priority for the query, ensuring it is fetched early. Dependencies include the query client and product keys.

```javascript
priority: 'high'
// High priority - visible at top of screen
 execute async () => {
 await queryClient.prefetchQuery(productKeys.featured);
 };
```

--------------------------------

### Install fonttools using pip

Source: https://dev.updatetheapp.com/docs/ui-development/assets/assets-management/font-management-guide

This command installs the `fonttools` Python package, which is essential for manipulating font files. It's a prerequisite for subsetting and converting font formats.

```bash
# Use tools like fonttools to create optimized font files
pip install fonttools
```

--------------------------------

### Install Optional Fanticon with npm

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs the 'fanticon' package as a development dependency using npm. This package is optional and is likely used for generating or managing icon fonts within the project.

```shell
npm install --save-dev fanticon
```

--------------------------------

### Project Structure Overview

Source: https://dev.updatetheapp.com/docs/guides/getting-started

An outline of the project's directory structure, explaining the purpose of key folders. This helps in understanding where different functionalities and components are located within the codebase.

```plaintext
src/
├── core/ # Core systems (non-UI)
│   ├── auth/ # Authentication logic
│   ├── api/ # API clients and types
│   ├── state/ # Global state management
│   └── shared/ # Shared utilities
├── features/ # Feature modules
│   ├── auth/ # Authentication feature
│   └── ...
└── ... (other directories like ui/)
```

--------------------------------

### Install Optional Fanticon with Yarn

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs the 'fanticon' package as a development dependency using Yarn. This package is optional and is likely used for generating or managing icon fonts within the project.

```shell
yarn add --dev fanticon
```

--------------------------------

### JavaScript: Set up Product Screen Layout

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This function is responsible for setting up the visual layout of the product screen. It is called during the initialization phase of the application. It does not take any arguments and returns nothing.

```javascript
async () => {
  // Only essential UI setup here
  setupProductScreenLayout();
});

initializer.registerTask(InitStage.BACKGROUND, {
  name: 'products:data-fetch',
  execute: async () => { }
```

--------------------------------

### Install React Native SVG with yarn

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs the 'react-native-svg' package, a core dependency for rendering SVG elements in React Native applications. This command is for use with the yarn package manager.

```shell
# Core dependencies
yarn add react-native-svg
```

--------------------------------

### Product Search Feature Implementation (React/React Query)

Source: https://dev.updatetheapp.com/docs/guides/team-onboarding-checklist

Guidelines for implementing a product search feature. This involves creating a debounced search input, fetching results using React Query, displaying results with loading and error states, and incorporating filtering capabilities. It stresses avoiding manual state management and direct component fetching, advocating for domain hooks and local state for UI data.

```javascript
// 1. Create search input with debouncing
// 2. Fetch results using React Query
// 3. Display results with proper loading/error states
// 4. Add filtering capabilities
```

--------------------------------

### Migration Considerations for UI Loading

Source: https://dev.updatetheapp.com/docs/guides/app-initialization/initial-ui-rendering-guide

This section outlines strategies for migrating from global loading states to a staged loading approach in UI rendering. It emphasizes the benefits of staged initialization for initial UI rendering and provides a comparison to traditional global loading patterns.

```markdown
## Migration Considerations

When migrating from traditional loading approaches to our staged initialization pattern for Initial UI rendering, consider these helpful strategies:

### From Global Loading States to Staged Loading

Many apps traditionally use a global loading pattern like this:
```

--------------------------------

### Install React Native SVG with npm

Source: https://dev.updatetheapp.com/docs/ui-development/assets/icon-management/custom-icons-guide

Installs the 'react-native-svg' package, a core dependency for rendering SVG elements in React Native applications. This command is for use with the npm package manager.

```shell
# Core dependencies
npm install react-native-svg
```

--------------------------------

### Reference Implementations Directory Structure

Source: https://dev.updatetheapp.com/docs/architecture/project-structure

This snippet details the directory structure for the reference implementations, showing how it mirrors the main project. It includes examples for core domains like products and users, along with API, hooks, and type definitions.

```directory
reference-implementations/ # Project root level
├── README.md # Overview and usage guide
├── core/ # Domain and shared utilities examples
│ ├── domains/ # Business logic implementations
│ │ ├── products/ # Product domain examples
│ │ │ ├── api.example.ts # Product API service patterns
│ │ │ ├── hooks.example.ts # Product hooks implementations
│ │ │ ├── types.example.ts # Product type definitions
│ │ │ └── README.md # Domain implementation guide
│ │ ├── users/ # User domain examples
│ │ │ └── README.md # Domain implementation guide
│ │ └── README.md # Shared utilities guide
│ └── README.md # Core module guide
├── features/ # Feature-specific examples
│ ├── auth/ # Authentication feature examples
│ │ ├── components/ # UI components for authentication
│ │ ├── hooks/ # Authentication related hooks
│ │ ├── services/ # Authentication API services
│ │ └── README.md # Feature implementation guide
│ └── README.md # Features module guide
├── ui/ # UI components and design system examples
│ ├── components/ # Reusable UI components
│ │ ├── Button/ # Button component examples
│ │ ├── Input/ # Input field examples
│ │ └── README.md # Component library guide
│ ├── styles/ # Styling and theming examples
│ │ └── README.md # Styling guide
│ └── README.md # UI module guide
└── README.md # Project overview and setup
```

--------------------------------

### Theme Management Script for UTA

Source: https://dev.updatetheapp.com/docs/guides/getting-started

This JavaScript code snippet is designed to manage theme settings (light/dark mode) within a web application. It manipulates the document's classList or attributes based on user preference or system settings, and optionally applies the color scheme to the document element. It handles initial theme setup and preference storage using localStorage.

```javascript
document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))((e, i, s, u, m, a, l, h) => {
    let d = document.documentElement,
        w = ["light", "dark"];

    function p(n) {
        (Array.isArray(e) ? e : [e]).forEach((y) => {
            let k = y === "class",
                S = k && a ? m.map((f) => a[f] || f) : m;
            k ? (d.classList.remove(...S), d.classList.add(a && a[n] ? a[n] : n)) : d.setAttribute(y, n);
        }), R(n);
    }

    function R(n) {
        h && w.includes(n) && (d.style.colorScheme = n);
    }

    function c() {
        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
    }

    if (u) p(u);
    else try {
        let n = localStorage.getItem(i) || s,
            y = l && n === "system" ? c() : n;
        p(y);
    } catch (n) {}
})("class", "theme", "system", null, ["light", "dark"], null, true, true)
```