create-cmp-cli 0.2.0

package/template/composeApp/src/androidMain/kotlin/com/example/app/MainActivity.kt

@@ -0,0 +1,24 @@
+package __PACKAGE__
+
+import android.graphics.Color
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+
+class MainActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // Edge-to-edge: the status and navigation bars are transparent and content draws
+        // beneath them. Screens own their insets in shared code via BaseScreen's Scaffold
+        // (statusBarsPadding / navigationBarsPadding), which also maps to iOS safe areas
+        // under Compose Multiplatform. Never set the deprecated window.statusBarColor on API 35.
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(Color.TRANSPARENT),
+            navigationBarStyle = SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT),
+        )
+        setContent { App() }
+    }
+}

package/template/composeApp/src/androidMain/kotlin/com/example/app/core/connectivity/NetworkMonitor.kt

@@ -0,0 +1,42 @@
+package __PACKAGE__.core.connectivity
+
+import android.content.Context
+import android.net.ConnectivityManager
+import android.net.Network
+import android.net.NetworkCapabilities
+import android.net.NetworkRequest
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+actual class NetworkMonitor actual constructor(context: Any?) {
+
+    private val cm = (context as Context)
+        .getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
+
+    private val _isOnline = MutableStateFlow(
+        cm.activeNetwork
+            ?.let { cm.getNetworkCapabilities(it) }
+            ?.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET) == true
+    )
+    actual val isOnline: StateFlow<Boolean> = _isOnline.asStateFlow()
+
+    init {
+        val request = NetworkRequest.Builder()
+            .addCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET)
+            .build()
+
+        val cb = object : ConnectivityManager.NetworkCallback() {
+            override fun onAvailable(network: Network) {
+                _isOnline.value = true
+            }
+            override fun onLost(network: Network) {
+                _isOnline.value = cm.activeNetwork != null
+            }
+            override fun onUnavailable() {
+                _isOnline.value = false
+            }
+        }
+        cm.registerNetworkCallback(request, cb)
+    }
+}

package/template/composeApp/src/androidMain/kotlin/com/example/app/data/local/DatabaseBuilder.android.kt

@@ -0,0 +1,13 @@
+package __PACKAGE__.data.local
+
+import android.content.Context
+import androidx.room.Room
+import androidx.room.RoomDatabase
+
+lateinit var appContext: Context
+
+actual fun getDatabaseBuilder(): RoomDatabase.Builder<AppDatabase> =
+    Room.databaseBuilder(
+        context = appContext,
+        name = appContext.getDatabasePath("app.db").absolutePath
+    )

package/template/composeApp/src/androidMain/kotlin/com/example/app/di/AndroidModule.kt

@@ -0,0 +1,9 @@
+package __PACKAGE__.di
+
+import org.koin.core.module.Module
+import org.koin.dsl.module
+
+// Android-only DI bindings (platform services that need a Context, etc.).
+// Empty by default — add your platform-specific singletons here.
+val androidModule: Module = module {
+}

package/template/composeApp/src/androidMain/kotlin/com/example/app/presentation/components/TestTagAutomation.android.kt

@@ -0,0 +1,11 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+
+/** Android: surface testTags as `resource-id` entries for uiautomator/Appium id-selectors. */
+@OptIn(ExperimentalComposeUiApi::class)
+actual fun Modifier.exposeTestTagsForAutomation(): Modifier =
+    semantics { testTagsAsResourceId = true }

package/template/composeApp/src/androidMain/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Adaptive-icon background: a brand gradient tile. Replace with your own brand colours. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <gradient
+        android:type="linear"
+        android:angle="270"
+        android:startColor="#0E2E50"
+        android:endColor="#0A2540" />
+</shape>

package/template/composeApp/src/androidMain/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@mipmap/ic_launcher_foreground" />
+</adaptive-icon>

package/template/composeApp/src/androidMain/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+    <monochrome android:drawable="@mipmap/ic_launcher_foreground" />
+</adaptive-icon>

package/template/composeApp/src/androidMain/res/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Brand primary, used as the window background so there is no white flash before
+         Compose draws its first frame. Keep in sync with __THEME_PREFIX__Colors.Primary. -->
+    <color name="app_window_background">#0A2540</color>
+</resources>

package/template/composeApp/src/androidMain/res/values/themes.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- NoActionBar + a brand-coloured window background so the very first frames
+         (system launch window, any pre-Compose frame) match the app. Status/nav bar
+         styling is set in MainActivity (edge-to-edge), not here. -->
+    <style name="Theme.App" parent="@android:style/Theme.Material.Light.NoActionBar">
+        <item name="android:windowBackground">@color/app_window_background</item>
+    </style>
+</resources>

package/template/composeApp/src/androidMain/res/values-v31/themes.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- API 31+ platform splash: brand background so the splash window matches frame 0. -->
+    <style name="Theme.App" parent="@android:style/Theme.Material.Light.NoActionBar">
+        <item name="android:windowBackground">@color/app_window_background</item>
+        <item name="android:windowSplashScreenBackground">@color/app_window_background</item>
+    </style>
+</resources>

package/template/composeApp/src/androidRelease/kotlin/com/example/app/inspector/InspectorInit.kt

@@ -0,0 +1,13 @@
+package __PACKAGE__.inspector
+
+import android.app.Application
+
+/**
+ * RELEASE variant: no-op twin of the androidDebug `startInspector()`. Release builds compile
+ * this body instead — no server class, no registry, no inspector endpoint strings. The
+ * inspector is structurally absent from release, not merely disabled.
+ */
+@Suppress("UnusedReceiverParameter")
+fun Application.startInspector() {
+    // Intentionally empty.
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/App.kt

@@ -0,0 +1,7 @@
+package __PACKAGE__
+
+import androidx.compose.runtime.Composable
+import __PACKAGE__.presentation.App as PresentationApp
+
+@Composable
+fun App() = PresentationApp()

package/template/composeApp/src/commonMain/kotlin/com/example/app/core/connectivity/NetworkMonitor.kt

@@ -0,0 +1,7 @@
+package __PACKAGE__.core.connectivity
+
+import kotlinx.coroutines.flow.StateFlow
+
+expect class NetworkMonitor(context: Any?) {
+    val isOnline: StateFlow<Boolean>
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/data/local/AppDatabase.kt

@@ -0,0 +1,28 @@
+package __PACKAGE__.data.local
+
+import androidx.room.ConstructedBy
+import androidx.room.Database
+import androidx.room.Entity
+import androidx.room.PrimaryKey
+import androidx.room.RoomDatabase
+import androidx.room.RoomDatabaseConstructor
+
+// ── Example Room entity for the `home` feature's offline cache ───────────────────────
+@Entity(tableName = "items")
+data class ItemEntity(
+    @PrimaryKey val id: String,
+    val title: String,
+    val subtitle: String,
+)
+
+@Database(entities = [ItemEntity::class], version = 1, exportSchema = true)
+@ConstructedBy(AppDatabaseConstructor::class)
+abstract class AppDatabase : RoomDatabase() {
+    abstract fun itemDao(): ItemDao
+}
+
+// The actual implementation is generated by Room's KSP processor per platform.
+@Suppress("NO_ACTUAL_FOR_EXPECT", "KotlinNoActualForExpect")
+expect object AppDatabaseConstructor : RoomDatabaseConstructor<AppDatabase> {
+    override fun initialize(): AppDatabase
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/data/local/DatabaseBuilder.kt

@@ -0,0 +1,14 @@
+package __PACKAGE__.data.local
+
+import androidx.room.RoomDatabase
+import androidx.sqlite.driver.bundled.BundledSQLiteDriver
+
+expect fun getDatabaseBuilder(): RoomDatabase.Builder<AppDatabase>
+
+fun buildDatabase(): AppDatabase =
+    getDatabaseBuilder()
+        // BundledSQLiteDriver is required for Room KMP on Kotlin/Native (iOS).
+        .setDriver(BundledSQLiteDriver())
+        .fallbackToDestructiveMigration(dropAllTables = true)
+        .fallbackToDestructiveMigrationOnDowngrade(dropAllTables = true)
+        .build()

package/template/composeApp/src/commonMain/kotlin/com/example/app/data/local/ItemDao.kt

@@ -0,0 +1,18 @@
+package __PACKAGE__.data.local
+
+import androidx.room.Dao
+import androidx.room.Insert
+import androidx.room.OnConflictStrategy
+import androidx.room.Query
+
+@Dao
+interface ItemDao {
+    @Query("SELECT * FROM items")
+    suspend fun getAll(): List<ItemEntity>
+
+    @Insert(onConflict = OnConflictStrategy.REPLACE)
+    suspend fun upsertAll(items: List<ItemEntity>)
+
+    @Query("DELETE FROM items")
+    suspend fun clear()
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/data/remote/FirebaseConfig.kt

@@ -0,0 +1,5 @@
+package __PACKAGE__.data.remote
+
+// Region for Cloud Functions / callables. Keep schedulers, callables, Firestore in the
+// SAME region — cross-region 2nd-gen wiring fails.
+const val FIREBASE_FUNCTIONS_REGION = "__REGION__"

package/template/composeApp/src/commonMain/kotlin/com/example/app/data/remote/ItemRepositoryImpl.kt

@@ -0,0 +1,22 @@
+package __PACKAGE__.data.remote
+
+import __PACKAGE__.domain.model.Item
+import __PACKAGE__.domain.repository.ItemRepository
+import kotlinx.coroutines.delay
+
+// Example data source for the `home` feature. This is intentionally dependency-light
+// (no Firebase / no Room coupling) so the scaffold builds in every feature combination.
+//
+// Real apps swap this for a Firestore/Ktor source and add a Room cache (see data/local).
+// The Clean Architecture seam is the ItemRepository interface in the domain layer.
+class ItemRepositoryImpl : ItemRepository {
+    override suspend fun getItems(): List<Item> {
+        delay(300) // simulate I/O
+        return listOf(
+            Item("1", "Welcome to __APP_NAME__", "Your Compose Multiplatform app is wired end-to-end."),
+            Item("2", "Clean Architecture", "presentation → domain → data, with Koin DI."),
+            Item("3", "Edge-to-edge, pre-solved", "BaseScreen owns the window insets for you."),
+            Item("4", "Android + iOS", "One codebase, two green builds."),
+        )
+    }
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/di/AppModule.kt

@@ -0,0 +1,23 @@
+package __PACKAGE__.di
+
+import __PACKAGE__.data.remote.ItemRepositoryImpl
+import __PACKAGE__.domain.repository.ItemRepository
+import __PACKAGE__.domain.usecase.GetItemsUseCase
+import __PACKAGE__.presentation.home.HomeViewModel
+import org.koin.core.module.dsl.viewModelOf
+import org.koin.dsl.module
+
+val repositoryModule = module {
+    single<ItemRepository> { ItemRepositoryImpl() }
+}
+
+val useCaseModule = module {
+    factory { GetItemsUseCase(get()) }
+}
+
+val viewModelModule = module {
+    viewModelOf(::HomeViewModel)
+}
+
+// Aggregated common modules, started from AppApplication (Android) and KoinHelper (iOS).
+val appModules = listOf(repositoryModule, useCaseModule, viewModelModule)

package/template/composeApp/src/commonMain/kotlin/com/example/app/domain/model/Item.kt

@@ -0,0 +1,8 @@
+package __PACKAGE__.domain.model
+
+// Generic domain model for the example `home` feature. Replace with your own entities.
+data class Item(
+    val id: String,
+    val title: String,
+    val subtitle: String,
+)

package/template/composeApp/src/commonMain/kotlin/com/example/app/domain/repository/ItemRepository.kt

@@ -0,0 +1,8 @@
+package __PACKAGE__.domain.repository
+
+import __PACKAGE__.domain.model.Item
+
+// Domain-facing contract. Presentation depends on THIS, never on a concrete data source.
+interface ItemRepository {
+    suspend fun getItems(): List<Item>
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/domain/usecase/GetItemsUseCase.kt

@@ -0,0 +1,12 @@
+package __PACKAGE__.domain.usecase
+
+import __PACKAGE__.domain.model.Item
+import __PACKAGE__.domain.repository.ItemRepository
+
+// A use case is a single business action. ViewModels depend on use cases, not repositories
+// directly, so business rules stay testable and out of the presentation layer.
+class GetItemsUseCase(
+    private val repository: ItemRepository,
+) {
+    suspend operator fun invoke(): List<Item> = repository.getItems()
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/presentation/App.kt

@@ -0,0 +1,13 @@
+package __PACKAGE__.presentation
+
+import androidx.compose.runtime.Composable
+import __PACKAGE__.presentation.navigation.AppNavHost
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Theme
+
+// Root composable. Wraps the whole app in the theme and hosts navigation.
+@Composable
+fun App() {
+    __THEME_PREFIX__Theme {
+        AppNavHost()
+    }
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/presentation/components/BaseScreen.kt

@@ -0,0 +1,69 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.material3.Scaffold
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import __PACKAGE__.presentation.theme.designToken
+
+/**
+ * The insets moat, pre-solved. Every screen wraps its content in [BaseScreen] instead of
+ * re-deriving edge-to-edge padding. The Activity is edge-to-edge (transparent system bars);
+ * this Scaffold owns the status-bar / navigation-bar insets in shared code, which also maps
+ * to iOS safe areas under Compose Multiplatform.
+ *
+ * - [topBar] / [bottomBar] draw edge-to-edge (e.g. a nav bar that bleeds behind the gesture
+ *   pill) and are responsible for their own inset padding.
+ * - The content lambda receives padding already accounting for any bars; by default the body
+ *   gets status + navigation bar padding so plain screens are safe with zero ceremony.
+ */
+@Composable
+fun BaseScreen(
+    modifier: Modifier = Modifier,
+    containerColor: Color = Color.Unspecified,
+    applyStatusBarPadding: Boolean = true,
+    applyNavBarPadding: Boolean = true,
+    topBar: @Composable () -> Unit = {},
+    bottomBar: @Composable () -> Unit = {},
+    content: @Composable (PaddingValues) -> Unit,
+) {
+    Scaffold(
+        modifier = modifier,
+        // Screens manage their own insets via the padding modifiers below, so the Scaffold
+        // itself consumes nothing — this avoids the classic doubled-padding bug.
+        contentWindowInsets = WindowInsets(0, 0, 0, 0),
+        containerColor = if (containerColor == Color.Unspecified)
+            androidx.compose.material3.MaterialTheme.colorScheme.background else containerColor,
+        topBar = topBar,
+        bottomBar = bottomBar,
+    ) { innerPadding ->
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding)
+                .consumeWindowInsets(innerPadding)
+                .then(if (applyStatusBarPadding) Modifier.statusBarsPadding() else Modifier)
+                .then(if (applyNavBarPadding) Modifier.navigationBarsPadding() else Modifier)
+                // Inspector: self-report the inset facts this Box actually applies. No dimen
+                // token is used here — the padding comes from Scaffold insets, not the design
+                // system — so the tokens list is empty and only the resolved facts are emitted.
+                .designToken(
+                    tokens = emptyList(),
+                    resolved = mapOf(
+                        "statusBarPadding" to applyStatusBarPadding.toString(),
+                        "navBarPadding" to applyNavBarPadding.toString(),
+                    ),
+                )
+        ) {
+            content(innerPadding)
+        }
+    }
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/presentation/components/TestTagAutomation.kt

@@ -0,0 +1,18 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.ui.Modifier
+
+/**
+ * Exposes every `Modifier.testTag` in the subtree to the platform's UI-automation layer,
+ * so Appium/uiautomator id-selectors (and the cmp-test-generated suites) find them on a
+ * stock build with no extra flags.
+ *
+ * - Android actual: `semantics { testTagsAsResourceId = true }` → tags surface as
+ *   `resource-id` in the uiautomator/Appium tree.
+ * - iOS actual: same semantics flag → tags surface as `accessibilityIdentifier` (XCUITest).
+ * - Desktop actual: no-op — the skiko `ui` artifact has no `testTagsAsResourceId`
+ *   (there is no resource-id concept on desktop; tests use the Compose test APIs directly).
+ *
+ * Apply once at the root (AppShell does); it covers the whole subtree.
+ */
+expect fun Modifier.exposeTestTagsForAutomation(): Modifier

package/template/composeApp/src/commonMain/kotlin/com/example/app/presentation/home/DetailScreen.kt

@@ -0,0 +1,39 @@
+package __PACKAGE__.presentation.home
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import __PACKAGE__.presentation.components.BaseScreen
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
+import __PACKAGE__.presentation.theme.designToken
+
+@Composable
+fun DetailScreen(
+    itemId: String,
+    onBack: () -> Unit,
+) {
+    BaseScreen {
+        Column(
+            Modifier
+                .fillMaxSize()
+                .designToken(
+                    tokens = listOf("PaddingPage"),
+                    resolved = mapOf("padding" to "16dp"),
+                )
+                .padding(__THEME_PREFIX__Tokens.PaddingPage),
+        ) {
+            TextButton(onClick = onBack) { Text("← Back") }
+            Text("Detail", style = MaterialTheme.typography.headlineMedium)
+            Text(
+                "Item id: $itemId",
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+    }
+}

package/template/composeApp/src/commonMain/kotlin/com/example/app/presentation/home/HomeScreen.kt

@@ -0,0 +1,87 @@
+package __PACKAGE__.presentation.home
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
+import __PACKAGE__.presentation.theme.designToken
+import org.koin.compose.viewmodel.koinViewModel
+
+@Composable
+fun HomeScreen(
+    onItemClick: (String) -> Unit,
+    viewModel: HomeViewModel = koinViewModel(),
+) {
+    val state by viewModel.state.collectAsStateWithLifecycle()
+
+    Column(
+        Modifier
+            .fillMaxSize()
+            .designToken(
+                tokens = listOf("PaddingPage"),
+                resolved = mapOf("padding" to "16dp"),
+            )
+            .padding(__THEME_PREFIX__Tokens.PaddingPage),
+    ) {
+        Text(
+            text = "Home",
+            style = MaterialTheme.typography.headlineMedium,
+            modifier = Modifier.semantics { testTag = "home_title" }.padding(bottom = 12.dp),
+        )
+
+        if (state.isLoading) {
+            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                CircularProgressIndicator()
+            }
+        } else {
+            LazyColumn(verticalArrangement = Arrangement.spacedBy(__THEME_PREFIX__Tokens.GapCard)) {
+                items(state.items, key = { it.id }) { item ->
+                    Surface(
+                        color = MaterialTheme.colorScheme.surface,
+                        shape = MaterialTheme.shapes.medium,
+                        tonalElevation = __THEME_PREFIX__Tokens.ElevationCard,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .designToken(
+                                tokens = listOf("RadiusCard", "ElevationCard", "PaddingCard"),
+                                resolved = mapOf(
+                                    "radius" to "16dp",
+                                    "elevation" to "2dp",
+                                    "padding" to "16dp",
+                                    "color" to "#FFFFFFFF",
+                                ),
+                            )
+                            .clickable { onItemClick(item.id) },
+                    ) {
+                        Column(Modifier.padding(__THEME_PREFIX__Tokens.PaddingCard)) {
+                            Text(item.title, style = MaterialTheme.typography.titleMedium)
+                            Text(
+                                item.subtitle,
+                                style = MaterialTheme.typography.bodyMedium,
+                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}