### Theme Configuration System

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of a theme configuration system for the application.

```kotlin
data class Theme(
    val colorMode: ColorMode = ColorMode.Baseline,
    val themeColorMode: ThemeColorMode = ThemeColorMode.System,
    // ... other settings
) {
    fun toMap(): Map<String, Float> { /* serialize */ }
}

@Composable
fun AppTheme(theme: Theme, content: @Composable () -> Unit) {
    val colorScheme = when (theme.colorMode) {
        ColorMode.Dynamic -> dynamicLightColorScheme(context)
        ColorMode.Baseline -> lightColorScheme()
    }
    MaterialTheme(colorScheme = colorScheme) {
        content()
    }
}
```

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

### Create Sample Composables

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of creating sample composables for a new component.

```kotlin
package com.emertozd.compose.catalog.samples

import com.emertozd.compose.catalog.library.Sampled
import androidx.compose.material3.YourComponent
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Preview
@Sampled
@Composable
fun YourComponentSample() {
    YourComponent(
        onSomething = { /* handle event */ }
    ) {
        Text("Component content")
    }
}

@Preview
@Sampled
@Composable
fun YourComponentVariantSample() {
    YourComponent(variant = YourComponentVariant.Outlined) {
        Text("Alternative variant")
    }
}
```

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

### Copying Samples to Your Project

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of copying a composable function from the catalog to your project.

```kotlin
// From ButtonSamples.kt
@Preview
@Sampled
@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Button") }
}

// In your project (can remove annotations if not using previews)
@Composable
fun MyButton() {
    Button(onClick = {}) { Text("Button") }
}
```

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

### Navigation with Arguments Pattern

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of implementing navigation with arguments using `NavHost` and `composable`.

```kotlin
NavHost(navController = navController, startDestination = "list") {
    composable("list") {
        ListScreen(
            items = items,
            onItemClick = { item ->
                navController.navigate("detail/${item.id}")
            }
        )
    }
    composable(
        route = "detail/{itemId}",
        arguments = listOf(navArgument("itemId") { type = NavType.StringType })
    ) {
        val itemId = backStackEntry.arguments?.getString("itemId") ?: ""
        val item = items.find { it.id == itemId }
        if (item != null) {
            DetailScreen(item = item, onBack = { navController.popBackStack() })
        }
    }
}
```

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

### Define Examples

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of defining examples for a new component in model/Examples.kt.

```kotlin
private val YourComponentExamples = listOf(
    Example(
        name = "Basic",
        description = "A simple YourComponent",
        content = { YourComponentSample() },
        isExpressive = false
    ),
    Example(
        name = "Variant",
        description = "Alternative variant",
        content = { YourComponentVariantSample() },
        isExpressive = false
    ),
)
```

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

### Stateless Screens Pattern

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of implementing a stateless screen using `CatalogScaffold`.

```kotlin
@Composable
fun MyScreen(
    data: MyData,
    theme: Theme,
    onAction: (action: MyAction) -> Unit,
    onBack: () -> Unit,
) {
    CatalogScaffold(
        topBarTitle = "Title",
        showBackNavigationIcon = true,
        theme = theme,
        onThemeChange = { /* handle via callback */ },
        onBackClick = onBack,
        favorite = false,  // Or get from state
        onFavoriteClick = { /* handle via callback */ }
    ) { paddingValues ->
        LazyColumn(modifier = Modifier.padding(paddingValues)) {
            items(data.items) {
                ItemCard(item = item, onClick = { onAction(MyAction.SelectItem(item)) })
            }
        }
    }
}
```

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

### Create Component Definition

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of defining a new component in `model/Components.kt`.

```kotlin
private val YourComponent = Component(
    id = nextId(),
    name = "Your Component",
    description = "Description of what your component does and when to use it.",
    icon = R.drawable.ic_your_component,  // Or omit for default
    tintIcon = true,
    guidelinesUrl = "https://m3.material.io/components/your-component",
    docsUrl = "https://developer.android.com/reference/kotlin/androidx/compose/material3/YourComponent",
    sourceUrl = "https://cs.android.com/androidx/platform/.../YourComponent.kt",
    examples = YourComponentExamples,
    additionalInfo = null,
)
```

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

### Navigation Structure

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of the application's navigation structure using NavHostController.

```kotlin
@Composable
fun AppNavGraph(navController: NavHostController, theme: Theme) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(theme = theme, onNavigate = { route ->
                navController.navigate(route)
            })
        }
        composable("details/{id}") { backStackEntry ->
            val id = backStackEntry.arguments?.getString("id")
            DetailsScreen(id = id)
        }
    }
}
```

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

### Scaffold Pattern

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of the Scaffold pattern used in the application.

```kotlin
@Composable
fun AppScaffold(
    title: String,
    onThemeChange: (theme: Theme) -> Unit,
    content: @Composable (PaddingValues) -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(title) },
                // ... actions
            )
        }
    ) { paddingValues ->
        content(paddingValues)
    }
}
```

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

### Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/example-screen.md

An example of how to use the Example composable within a screen.

```kotlin
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController

@Composable
fun ExampleScreen(
    componentId: Int,
    exampleIndex: Int,
    navController: NavHostController,
    theme: Theme,
    onThemeChange: (theme: Theme) -> Unit,
) {
    val component = Components.first { it.id == componentId }
    val example = component.examples[exampleIndex]
    
    Example(
        component = component,
        example = example,
        theme = theme,
        onThemeChange = onThemeChange,
        onBackClick = { navController.popBackStack() },
        favorite = isFavorited,
        onFavoriteClick = { toggleFavorite() }
    )
}
```

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

### Add to Components List

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of adding the new component to the main `Components` list in `model/Components.kt`.

```kotlin
val Components = listOf(
    Adaptive,
    Badge,
    // ... other components ...
    YourComponent,  // Add here (maintains alphabetical order)
    // ... more components ...
)
```

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

### Theme Management Pattern

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of managing theme persistence using `UserPreferencesRepository` and `AppTheme`.

```kotlin
@Composable
fun MyApp() {
    val repository = remember { UserPreferencesRepository(LocalContext.current) }
    val theme = repository.theme.collectAsState(Theme()).value
    val coroutineScope = rememberCoroutineScope()

    AppTheme(theme = theme) {
        NavGraph(
            theme = theme,
            onThemeChange = {
                coroutineScope.launch {
                    repository.saveTheme(it)
                }
            }
        )
    }
}
```

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

### Example Instantiation

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/types.md

Demonstrates how to create an instance of the Example data class.

```kotlin
Example(
    name = "Basic Button",
    description = "A simple filled button",
    content = { ButtonSample() },
    isExpressive = false
)
```

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

### Navigation Integration

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/example-screen.md

Example of integrating the Example screen into a NavGraph using composable routes and arguments.

```kotlin
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.composable
import androidx.navigation.navArgument

composable(
    route = "$ExampleRoute/{$ComponentIdArgName}/{$ExampleIndexArgName}",
    arguments = listOf(
        navArgument(ComponentIdArgName) { type = NavType.IntType },
        navArgument(ExampleIndexArgName) { type = NavType.IntType },
    ),
) {
    val componentId = navBackStackEntry.arguments?.getInt(ComponentIdArgName) ?: 0
    val exampleIndex = navBackStackEntry.arguments?.getInt(ExampleIndexArgName) ?: 0
    val component = Components.first { it.id == componentId }
    val example = component.examples[exampleIndex]
    
    Example(
        component = component,
        example = example,
        theme = theme,
        onThemeChange = onThemeChange,
        onBackClick = { navController.popBackStack() },
        favorite = favoriteRoute == example.route(component),
        onFavoriteClick = { /* toggle favorite */ }
    )
}
```

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

### Testing Theme Logic

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of testing theme persistence logic using `runTest` and `UserPreferencesRepository`.

```kotlin
@Test
fun themePersistenceTest() = runTest {
    val repository = UserPreferencesRepository(context)
    val theme = Theme(colorMode = ColorMode.Dynamic)
    
    repository.saveTheme(theme)
    
    val loaded = repository.getFavoriteRoute()
    assertEquals(theme, loaded)
}
```

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

### Lazy Composition Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Illustrates the use of LazyVerticalGrid for efficient rendering of large lists by composing only visible items.

```kotlin
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(components) {
        ComponentCard(component)  // Only composes visible items
    }
}
```

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

### DataStore for User Preferences Pattern

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of using `DataStore` for storing user preferences like theme mode and font scale.

```kotlin
class AppPreferences(private val context: Context) {
    companion object {
        val Context.dataStore: DataStore<Preferences> by preferencesDataStore("app_preferences")
        val THEME_MODE = stringPreferencesKey("theme_mode")
        val FONT_SCALE = floatPreferencesKey("font_scale")
    }

    suspend fun setThemeMode(mode: String) {
        context.dataStore.edit {
            it[THEME_MODE] = mode
        }
    }

    val themeMode = context.dataStore.data.map {
        it[THEME_MODE] ?: "system"
    }
}
```

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

### Custom Component Library Integration

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of integrating a custom component and its defaults into your library.

```kotlin
// your-library/src/main/java/com/example/components/YourComponent.kt
@Composable
fun YourComponent( /* params */) {
    // Implementation
}

// From catalog, adapt this pattern
object YourComponentDefaults {
    @Composable
    fun colors(
        containerColor: Color = MaterialTheme.colorScheme.surface,
        contentColor: Color = MaterialTheme.colorScheme.onSurface,
    ) = YourComponentColors(containerColor, contentColor)
}
```

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

### Testing Composables

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Example of testing a composable function using `composeTestRule`.

```kotlin
@Test
fun myComponentTest() {
    composeTestRule.setContent {
        MyComponent(
            data = testData,
            theme = Theme(),
            onAction = { action ->
                // Assert on action
            }
        )
    }
    composeTestRule.onNodeWithText("Button").performClick()
}
```

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

### Example Data Structure

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/example-screen.md

The data structure for an Example, containing its name, description, content, and expressive flag.

```kotlin
data class Example(
    val name: String,              // Display name
    val description: String,       // Brief explanation
    val content: @Composable () -> Unit,  // The composable to display
    val isExpressive: Boolean,     // Whether this is an expressive variant
)
```

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

### Example from ButtonSamples.kt

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/example-screen.md

A sample composable function for a Button, marked with @Preview and @Sampled annotations.

```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.Sampled

@Preview
@Sampled
@Composable
fun ButtonSample() {
    Button(onClick = { /* Do something! */ }) { 
        Text("Button") 
    } 
}
```

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

### Organizing Your Own Samples

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/SAMPLES_AND_COMPONENTS.md

Example directory structure for organizing custom samples within a project.

```bash
samples/
  ├── ButtonSamples.kt
  ├── CardSamples.kt
  ├── MyCustomComponentSamples.kt      # New component
  ├── MyOtherComponentSamples.kt       # Another new component
  └── ...
```

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

### Adding New Samples Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/SAMPLES_AND_COMPONENTS.md

Example of adding a new sample for an existing component, including the composable function and its corresponding Example definition.

```kotlin
// In ButtonSamples.kt
@Preview
@Sampled
@Composable
fun ButtonWithCustomColorSample() {
    Button(
        onClick = { },
        colors = ButtonDefaults.buttonColors(
            containerColor = Color.Green
        )
    ) {
        Text("Custom Color")
    }
}

// In Examples.kt
Example(
    name = "With Custom Color",
    description = "Button with custom background color",
    content = { ButtonWithCustomColorSample() },
    isExpressive = false
)
```

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

### Preview Testing

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Demonstrates how to use the @Preview annotation to visually test composables within the application's theme.

```kotlin
@Preview
@Composable
fun MyComponentPreview() {
    AppTheme(theme = Theme()) {
        MyComponent()
    }
}
```

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

### Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/component-screen.md

An example of how to use the Component composable within a screen.

```kotlin
@Composable
fun ComponentScreen(
    componentId: Int,
    navController: NavHostController,
    theme: Theme,
    onThemeChange: (theme: Theme) -> Unit,
) {
    val component = Components.first { it.id == componentId }
    
    Component(
        component = component,
        theme = theme,
        onThemeChange = onThemeChange,
        onExampleClick = { example ->
            val index = component.examples.indexOf(example)
            navController.navigate("example/$componentId/$index")
        },
        onBackClick = { navController.popBackStack() },
        favorite = isFavorited,
        onFavoriteClick = { toggleFavorite() }
    )
}
```

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

### Function Signature

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/example-screen.md

The signature of the Example composable function.

```kotlin
import androidx.compose.runtime.Composable

@Composable
fun Example(
    component: Component,
    example: Example,
    theme: Theme,
    onThemeChange: (theme: Theme) -> Unit,
    onBackClick: () -> Unit,
    favorite: Boolean,
    onFavoriteClick: () -> Unit,
)
```

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

### CatalogApp Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/nav-graph.md

An example of how to use the NavGraph composable within a CatalogApp.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun CatalogApp(initialFavoriteRoute: String? = null) {
    val theme = remember { mutableStateOf(Theme()) }
    
    NavGraph(
        initialFavoriteRoute = initialFavoriteRoute,
        theme = theme.value,
        onThemeChange = { newTheme ->
            theme.value = newTheme
            // Save to preferences
        }
    )
}
```

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

### DataStore for Preferences

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Implementation of DataStore for managing user preferences.

```kotlin
class UserPreferencesRepository(private val context: Context) {
    private companion object {
        val Context.dataStore: DataStore<Preferences> by preferencesDataStore("preferences")
        val PREFERENCE_KEY = stringPreferencesKey("key")
    }

    suspend fun savePreference(value: String) {
        context.dataStore.edit {\ preferences ->
            preferences[PREFERENCE_KEY] = value
        }
    }

    val preference = context.dataStore.data.map {\ preferences ->
        preferences[PREFERENCE_KEY] ?: "default"
    }
}
```

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

### Component Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/types.md

Illustrates how components are typically accessed from a static list.

```kotlin
val Components = listOf(
    Adaptive,
    Badge,
    Buttons,
    // ... more components
)
```

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

### Usage of openUrl

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Example of how to use the openUrl extension function.

```kotlin
val context = LocalContext.current
context.openUrl("https://m3.material.io")
```

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

### Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/catalog-scaffold.md

An example of how to use the CatalogScaffold composable within a screen, providing necessary parameters and content.

```kotlin
@Composable
fun MyComponentScreen(
    theme: Theme,
    onThemeChange: (theme: Theme) -> Unit,
) {
    CatalogScaffold(
        topBarTitle = "Buttons",
        showBackNavigationIcon = true,
        theme = theme,
        guidelinesUrl = "https://m3.material.io/components/buttons",
        docsUrl = "https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#button",
        sourceUrl = "https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Button.kt",
        onThemeChange = onThemeChange,
        onBackClick = { navController.popBackStack() },
        favorite = isFavorited,
        onFavoriteClick = { toggleFavorite() }
    ) { paddingValues ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            // Your component examples here
        }
    }
}
```

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

### Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/catalog-theme.md

An example of how to use the CatalogTheme composable to apply a theme to your application's content.

```kotlin
@Composable
fun MyApp() {
    val theme = Theme(
        colorMode = ColorMode.Dynamic,
        themeColorMode = ThemeColorMode.System,
        fontScale = 1.0f,
        textDirection = TextDirection.LTR,
        expressiveThemeMode = ExpressiveThemeMode.NonExpressive
    )
    
    CatalogTheme(theme = theme) {
        // Your composable content here
        Scaffold { paddingValues ->
            // Content that will be styled with the theme
        }
    }
}
```

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

### Navigation Arguments

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Route argument types for component and example IDs.

```kotlin
// Route argument types
navArgument(ComponentIdArgName) { type = NavType.IntType }
navArgument(ExampleIndexArgName) { type = NavType.IntType }
```

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

### Example.route(Component) Helper Function

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Generates the navigation route for an example within a component.

```kotlin
private fun Example.route(component: Component) =
    "$ExampleRoute/${component.id}/${component.examples.indexOf(this)}"
```

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

### saveTheme Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/user-preferences-repository.md

Example usage of the saveTheme function.

```kotlin
val newTheme = Theme(
    colorMode = ColorMode.Dynamic,
    fontScale = 1.2f,
    textDirection = TextDirection.LTR
)
repository.saveTheme(newTheme)
```

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

### Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/material3-catalog-app.md

Example of how to use the Material3CatalogApp composable in MainActivity.

```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)

        CoroutineScope(Dispatchers.Default).launch {
            val favoriteRoute = UserPreferencesRepository(this@MainActivity).getFavoriteRoute()
            withContext(Dispatchers.Main) {
                setContent {
                    Material3CatalogApp(initialFavoriteRoute = favoriteRoute)
                }
            }
        }
    }
}
```

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

### Dependencies for Adaptive Layouts

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Lists the Gradle dependencies necessary for implementing adaptive layouts.

```gradle
implementation(libs.androidx.material3.adaptive)
implementation(libs.androidx.material3.adaptive.layout)
```

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

### theme Property Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/user-preferences-repository.md

Example usage of collecting the theme Flow property.

```kotlin
val repository = UserPreferencesRepository(context)
val theme = repository.theme.collectAsState(Theme()).value
```

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

### Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/home-screen.md

An example of how to integrate the Home composable into a Jetpack Compose navigation graph.

```kotlin
@Composable
fun CatalogApp() {
    val coroutineScope = rememberCoroutineScope()
    val repository = remember { UserPreferencesRepository(context) }
    val theme = repository.theme.collectAsState(Theme()).value
    
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            Home(
                components = Components,
                theme = theme,
                onThemeChange = { newTheme ->
                    coroutineScope.launch {
                        repository.saveTheme(newTheme)
                    }
                },
                onComponentClick = { component ->
                    navController.navigate("component/${component.id}")
                },
                favorite = isFavoritedHome,
                onFavoriteClick = { toggleFavoriteHome() }
            )
        }
    }
}
```

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

### Flow for State Management

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Illustrates how to use Kotlin Flows for reactive state updates and collect them as State in Compose.

```kotlin
val theme: Flow<Theme> = dataStore.data.map { /* convert */ }
val themeState = theme.collectAsState(Theme())
```

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

### getFavoriteRoute Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/user-preferences-repository.md

Example usage of the getFavoriteRoute function.

```kotlin
val repository = UserPreferencesRepository(context)
val favoriteRoute = repository.getFavoriteRoute()
if (favoriteRoute != null) {
    navController.navigate(favoriteRoute)
}
```

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

### Example Definition

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/README.md

Defining a new example for a Material3 component in `model/Examples.kt`.

```kotlin
val MyComponentExamples = listOf(
    Example(
        name = "Basic",
        description = "Simple usage",
        content = { MyComponentSample() },
        isExpressive = false
    )
)
```

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

### Optional Dependencies for Expressive Theme

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Specifies optional dependencies required for using the Expressive Theme, noting the need for @OptIn.

```gradle
// Requires @OptIn(ExperimentalMaterial3ExpressiveApi::class)
implementation(libs.androidx.compose.material3)  // Version 1.1+
```

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

### Required Dependencies

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Lists the essential Gradle dependencies for integrating the Compose Material 3 Expressive Catalog.

```gradle
implementation(libs.androidx.compose.material3)
implementation(libs.androidx.navigation.compose)
implementation(libs.androidx.datastore.preferences)
implementation(libs.androidx.activity.compose)
```

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

### saveFavoriteRoute Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/user-preferences-repository.md

Example usage of the saveFavoriteRoute function.

```kotlin
val repository = UserPreferencesRepository(context)
repository.saveFavoriteRoute("component/5")  // Save component 5 as favorite
repository.saveFavoriteRoute(null)           // Clear favorite
```

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

### Example Data Model

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/ARCHITECTURE.md

Represents an example of a component, including its content and expressiveness.

```kotlin
data class Example(
    val name: String,
    val description: String,
    val content: @Composable () -> Unit,
    val isExpressive: Boolean
)
```

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

### Text Direction Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Forces the layout direction to be right-to-left, suitable for languages like Arabic or Hebrew.

```kotlin
Theme(textDirection = TextDirection.RTL)  // For Arabic, Hebrew, etc.
```

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

### Migrating to Material3: Replace Imports

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Shows how to update import statements when migrating from Material Design 2 to Material 3.

```kotlin
// Old
import androidx.compose.material.*

// New
import androidx.compose.material3.*
```

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

### Sampled Composable Function Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Example of a composable function annotated with @Sampled.

```kotlin
@Sampled
@Composable
fun ButtonSample() {
    Button(onClick = { }) { Text("Button") }
}
```

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

### Component Information Section

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/component-screen.md

Example of accessing component details within the screen.

```kotlin
component.name          // e.g., "Buttons"
component.description   // Detailed explanation of the component's purpose
component.additionalInfo // Optional notes, e.g., "Unofficial"
```

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

### Example Data Class

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/types.md

Represents an individual example of a component, including its name, description, composable content, and expressive flag.

```kotlin
data class Example(
    val name: String,
    val description: String,
    val content: @Composable () -> Unit,
    val isExpressive: Boolean,
)
```

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

### Remember for Heavy Objects

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Shows how to use the `remember` function to cache heavy objects across recompositions, such as repository instances.

```kotlin
val repository = remember { UserPreferencesRepository(context) }
val theme = repository.theme.collectAsState(Theme()).value
```

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

### Troubleshooting: Theme Not Updating

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Provides a solution for ensuring theme changes are applied consistently across all screens by applying the theme at the root level.

```kotlin
CatalogTheme(theme = theme) {  // Apply at root, not per-screen
    NavGraph(theme = theme, ...)
}
```

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

### Migrating to Material3: Update Color Schemes

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Illustrates the change in defining color schemes when migrating from Material Design 2 to Material 3.

```kotlin
// Old
val colors = lightColors()

// New
val colorScheme = lightColorScheme()
```

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

### Font Scale Usage Example

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Applies a custom font scale of 1.5x (150% of normal text size) to the theme.

```kotlin
Theme(fontScale = 1.5f)  // 150% of normal text size
```

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

### Troubleshooting: DataStore Operations Block UI

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Demonstrates the correct way to perform DataStore operations asynchronously using coroutines to prevent blocking the UI thread.

```kotlin
// Wrong - blocks UI
val route = runBlocking { repository.getFavoriteRoute() }

// Right - async, doesn't block
CoroutineScope(Dispatchers.Default).launch {
    val route = repository.getFavoriteRoute()
    withContext(Dispatchers.Main) {
        // Update UI with route
    }
}
```

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

### Component.hasExpressiveExamples Property

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Property that checks if component has any expressive examples.

```kotlin
val hasExpressiveExamples: Boolean
    get() = examples.any { it.isExpressive }
```

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

### Available Components List

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/README.md

Example of how components are defined as a static list in `model/Components.kt`.

```kotlin
val Components = listOf(
    Adaptive,
    Badge,
    Buttons,
    // ... 40+ more components
)
```

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

### Troubleshooting: Navigation State Lost on Configuration Change

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Explains how to preserve navigation state across configuration changes (like screen rotation) using `rememberNavController` and `rememberSaveable`.

```kotlin
val navController = rememberNavController()  // Preserved across recompositions
var favoriteRoute by rememberSaveable { mutableStateOf(null) }  // Preserved across config changes
```

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

### Navigation Context

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/component-screen.md

Example of how the Component screen is defined within a navigation graph.

```kotlin
composable(
    route = "$ComponentRoute/{$ComponentIdArgName}",
    arguments = listOf(navArgument(ComponentIdArgName) { type = NavType.IntType }),
) {
    val componentId = navBackStackEntry.arguments?.getInt(ComponentIdArgName) ?: 0
    val component = Components.first { it.id == componentId }
    Component(
        component = component,
        theme = theme,
        onThemeChange = onThemeChange,
        onExampleClick = { example -> 
            navController.navigate(example.route(component))
        },
        onBackClick = { navController.popBackStack() },
        favorite = favoriteRoute == component.route(),
        onFavoriteClick = { /* toggle favorite */ }
    )
}
```

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

### Filtering Expressive Components

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Configures the theme to display only components that have expressive examples available.

```kotlin
Theme(showOnlyExpressiveComponents = true)
```

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

### Stable Data Classes

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/INTEGRATION_GUIDE.md

Demonstrates the use of the @Stable annotation for data classes that are frequently passed as parameters, ensuring stable signatures for composables.

```kotlin
@Stable
data class MyData(val id: String, val name: String)
```

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

### Build Configuration - Plugins

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Required plugins for Compose and Kotlin Serialization.

```gradle
plugins {
    alias(libs.plugins.compose.compiler)
    alias(libs.plugins.kotlin.serialization)
}
```

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

### MainActivity Entry Point

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/ARCHITECTURE.md

The structure of the MainActivity, showing how it loads user preferences and theme, and then launches the main application composable.

```kotlin
MainActivity
  ├─ Load favorite route from DataStore
  ├─ Load theme from DataStore
  └─ Compose Material3CatalogApp
      ├─ Collect theme flow from repository
      ├─ Apply CatalogTheme wrapper
      └─ Setup NavGraph
          ├─ Home screen
          ├─ Component details screen
          └─ Example full-screen preview
```

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

### Component Data Class

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/types.md

Represents a Material3 component within the catalog, including its metadata and examples.

```kotlin
data class Component(
    val id: Int,
    val name: String,
    val description: String,
    @DrawableRes val icon: Int = R.drawable.ic_component,
    val tintIcon: Boolean = true,
    val guidelinesUrl: String,
    val docsUrl: String,
    val sourceUrl: String,
    val examples: List<Example>,
    val additionalInfo: String? = null,
)
```

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

### Build Configuration - Java/Kotlin Version

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Source and target compatibility for Java/Kotlin.

```gradle
sourceCompatibility = JavaVersion.VERSION_21
targetCompatibility = JavaVersion.VERSION_21
jvmToolchain(21)
```

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

### Component Data Model

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/ARCHITECTURE.md

Represents a Material3 component with its properties and associated examples.

```kotlin
data class Component(
    val id: Int,
    val name: String,
    val description: String,
    val examples: List<Example>,
    val guidelinesUrl: String,
    val docsUrl: String,
    val sourceUrl: String,
    val additionalInfo: String?
)
```

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

### Material Design Guidelines URLs

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Pre-defined constants for Material Design guidelines links.

```kotlin
const val GuidelinesUrl = "https://m3.material.io"
const val ComponentGuidelinesUrl = "https://m3.material.io/components"
const val StyleGuidelinesUrl = "https://m3.material.io/styles"
const val AdaptiveGuidelinesUrl = "https://m3.material.io/foundations/layout"
```

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

### Deserialization Constructor

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Constructor for deserializing configuration from a Map<String, Float>.

```kotlin
constructor(map: Map<String, Float>) : this(
    themeColorMode = ThemeColorMode.values()[map.getValue("themeMode").toInt()],
    colorMode = ColorMode.values()[map.getValue("colorMode").toInt()],
    expressiveThemeMode = ExpressiveThemeMode.values()[map.getValue("expressiveThemeMode").toInt()],
    fontScale = map.getValue("fontScale"),
    fontScaleMode = FontScaleMode.values()[map.getValue("fontScaleMode").toInt()],
    textDirection = TextDirection.values()[map.getValue("textDirection").toInt()],
    showOnlyExpressiveComponents = map.getValue("showOnlyExpressiveComponents").toInt() != 0,
    markExpressiveComponents = map.getValue("markExpressiveComponents").toInt() != 0,
)
```

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

### Default Theme Configuration

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Creates a theme with all default values for light/dark mode, color scheme, expressive theme, font scale, font scale mode, text direction, and component visibility.

```kotlin
val theme = Theme()
```

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

### Sample Composable Structure

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/README.md

Example structure for a sample composable function for a new Material3 component.

```kotlin
@Preview
@Sampled
@Composable
fun MyComponentSample() {
    MyComponent()
}
```

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

### Implementation of openUrl

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

The actual implementation of the openUrl extension function.

```kotlin
fun Context.openUrl(url: String) {
    val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
    startActivity(intent)
}
```

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

### Sample Organization Structure

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/ARCHITECTURE.md

Shows the directory structure for organizing sample composables by component.

```text
samples/
  ├── AlertDialogSamples.kt      # All AlertDialog examples
  ├── ButtonSamples.kt           # All Button variants
  ├── CardSamples.kt             # All Card examples
  └── ... (one file per major component)
```

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

### maybeNavigate Internal Function

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/nav-graph.md

Smart navigation function that handles navigation logic, including ensuring the parent component is in the back stack for example routes.

```kotlin
import androidx.navigation.NavHostController

private fun maybeNavigate(navController: NavHostController, route: String?) {
    if (route == null || navController.currentDestination?.route == route) {
        return
    }
    if (route.startsWith(ExampleRoute)) {
        val componentRoute = route.replace(ExampleRoute, ComponentRoute)
                                    .substringBeforeLast("/")
        navController.navigate(componentRoute)
    }
    navController.navigate(route)
}
```

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

### Theme Serialization to Map

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Converts the theme configuration into a map of key-value pairs for serialization, including theme mode, color mode, expressive theme mode, font scale, font scale mode, text direction, and flags for expressive components.

```kotlin
fun toMap() = mapOf(
    "themeMode" to themeColorMode.ordinal.toFloat(),
    "colorMode" to colorMode.ordinal.toFloat(),
    "expressiveThemeMode" to expressiveThemeMode.ordinal.toFloat(),
    "fontScale" to fontScale,
    "fontScaleMode" to fontScaleMode.ordinal.toFloat(),
    "textDirection" to textDirection.ordinal.toFloat(),
    "showOnlyExpressiveComponents" to (if (showOnlyExpressiveComponents) 1 else 0),
    "markExpressiveComponents" to (if (markExpressiveComponents) 1 else 0),
)
```

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

### Android Documentation URLs

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Pre-defined constants for Android documentation links.

```kotlin
const val DocsUrl = "https://developer.android.com/reference/kotlin/androidx/compose/material3"
const val PackageSummaryUrl = "https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary"
const val ReleasesUrl = "https://developer.android.com/jetpack/androidx/releases/compose-material3"
```

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

### Build Configuration - Android API Levels

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Minimum, target, and compile SDK versions.

```gradle
minSdk = 24           // Android 7.0 (Nougat)
targetSdk = 36        // Android 15
compileSdk = 36       // Android 15
```

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

### Legal and Support URLs

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Pre-defined constants for legal and support links.

```kotlin
const val IssueUrl = "https://issuetracker.google.com/issues/new?component=742043"
const val TermsUrl = "https://policies.google.com/terms"
const val PrivacyUrl = "https://policies.google.com/privacy"
const val LicensesUrl = "https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:LICENSE.txt"
```

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

### Project Constants - Layout Constants

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Constants for layout dimensions like cell size and padding.

```kotlin
val HomeCellMinSize = 120.dp    // Minimum grid cell width
val HomePadding = 16.dp         // Grid padding
```

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

### Project Constants - URL Constants

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/configuration.md

Constants for various URLs used in documentation and linking.

```kotlin
const val GuidelinesUrl = "https://m3.material.io"
const val ComponentGuidelinesUrl = "https://m3.material.io/components"
const val DocsUrl = "https://developer.android.com/reference/kotlin/androidx/compose/material3"
const val Material3SourceUrl = "https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3"
const val SampleSourceUrl = "https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples"
// ... more URLs
```

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

### Compose Material3 Version

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/SAMPLES_AND_COMPONENTS.md

The current version of the Compose Material3 library.

```gradle
androidx.compose.material3:material3:1.5.0-alpha16
```

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

### Theme.toMap() Conversion

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/api-reference/utilities.md

Converts theme configuration to a map for serialization.

```kotlin
fun Theme.toMap(): Map<String, Float>
fun toMap() = mapOf(
    "themeMode" to themeColorMode.ordinal.toFloat(),
    "colorMode" to colorMode.ordinal.toFloat(),
    "expressiveThemeMode" to expressiveThemeMode.ordinal.toFloat(),
    "fontScale" to fontScale,
    "fontScaleMode" to fontScaleMode.ordinal.toFloat(),
    "textDirection" to textDirection.ordinal.toFloat(),
    "showOnlyExpressiveComponents" to if (showOnlyExpressiveComponents) 1 else 0,
    "markExpressiveComponents" to if (markExpressiveComponents) 1 else 0,
)
```

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

### Sample Function Structure

Source: https://github.com/emertozd/compose-material-3-expressive-catalog/blob/main/_autodocs/SAMPLES_AND_COMPONENTS.md

Structure of a sample composable function with necessary annotations.

```kotlin
@Preview                    // Enable Android Studio preview
@Sampled                    // Mark as KDoc-linked sample
@OptIn(ExperimentalMaterial3ExpressiveApi::class)  // If using expressive APIs
@Composable
fun MyComponentSample() {
    // Component implementation
}
```