create-cmp-cli 0.7.1 → 0.9.0

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

@@ -0,0 +1,105 @@
+package __PACKAGE__.presentation.components
+
+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.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
+
+/**
+ * The state dispatcher for any data-backed screen: folds a [ContentUiState] into one of
+ * four rendered arms — loading, error, empty, content. The container owns the three
+ * non-content arms' UI and their derived testTags; the screen supplies only its content
+ * shape in the trailing slot. Every screen that loads data uses it; a feature whose
+ * state machine genuinely outgrows the four arms defines its own sealed type and skips
+ * the container — that divergence is visible in review.
+ *
+ * @param state Current arm. The fold is exhaustive; exactly one arm renders.
+ * @param screenTag Feature slug ("home"). Required, not defaulted: tests, golden trees,
+ *   and E2E flows all key on the derived tags `<screenTag>_loading` / `_error` /
+ *   `_retry` / `_empty`, so tagging cannot be left to each caller.
+ * @param onRetry Non-null renders a retry control (`<screenTag>_retry`) in the default
+ *   error arm.
+ * @param loading Loading slot; defaults to a list-shaped skeleton
+ *   (`ContentStateDefaults.ListSkeleton`).
+ * @param error Error slot; receives the message carried by [ContentUiState.Error].
+ * @param empty Empty slot; defaults to [EmptyState] with its generic copy.
+ * @param content Content arm; receives the loaded data.
+ */
+@Composable
+fun <T> ContentStateContainer(
+    state: ContentUiState<T>,
+    screenTag: String,
+    modifier: Modifier = Modifier,
+    onRetry: (() -> Unit)? = null,
+    loading: @Composable () -> Unit = { ContentStateDefaults.ListSkeleton(screenTag) },
+    error: @Composable (message: String) -> Unit = { ErrorState(message = it, screenTag = screenTag, onRetry = onRetry) },
+    empty: @Composable () -> Unit = { EmptyState(screenTag = screenTag) },
+    content: @Composable (data: T) -> Unit,
+) {
+    Box(modifier.fillMaxSize()) {
+        when (state) {
+            is ContentUiState.Loading -> loading()
+            is ContentUiState.Error -> error(state.message)
+            is ContentUiState.Empty -> empty()
+            is ContentUiState.Content -> content(state.data)
+        }
+    }
+}
+
+/** Default slot implementations for [ContentStateContainer]. */
+object ContentStateDefaults {
+
+    /**
+     * The default loading slot: skeleton rows shaped like [ListItemCard], so the loaded
+     * list replaces them without a layout jump. The container node carries the
+     * `<screenTag>_loading` tag and a "Loading" `contentDescription`; the bars
+     * themselves are decorative and stay semantics-silent.
+     *
+     * @param screenTag Feature slug; tags the container `<screenTag>_loading`.
+     * @param rows Skeleton rows to render while loading.
+     */
+    @Composable
+    fun ListSkeleton(screenTag: String, rows: Int = 3) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .semantics {
+                    testTag = "${screenTag}_loading"
+                    contentDescription = "Loading"
+                },
+            verticalArrangement = Arrangement.spacedBy(__THEME_PREFIX__Tokens.GapCard),
+        ) {
+            repeat(rows) { ListItemSkeleton() }
+        }
+    }
+
+    /**
+     * A centered spinner, for waits that are not content-shaped (a short, single-value
+     * operation where a skeleton would promise the wrong layout). Carries the same
+     * `<screenTag>_loading` tag as the skeleton.
+     *
+     * @param screenTag Feature slug; tags the container `<screenTag>_loading`.
+     */
+    @Composable
+    fun Spinner(screenTag: String) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .semantics {
+                    testTag = "${screenTag}_loading"
+                    contentDescription = "Loading"
+                },
+            contentAlignment = Alignment.Center,
+        ) {
+            CircularProgressIndicator()
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+package __PACKAGE__.presentation.components
+
+/**
+ * The four-way lifecycle of a data-backed screen: Loading, Error, Empty, Content.
+ * Sealed so a `when` over it is exhaustive — a screen cannot forget a state, and cannot
+ * render two at once. ViewModels fold repository results into this type;
+ * [ContentStateContainer] renders it.
+ */
+sealed interface ContentUiState<out T> {
+    data object Loading : ContentUiState<Nothing>
+    data class Error(val message: String) : ContentUiState<Nothing>
+    data object Empty : ContentUiState<Nothing>
+    data class Content<out T>(val data: T) : ContentUiState<T>
+}
+
+/** ViewModel-side helper: the Empty/Content decision made once, not per screen. */
+fun <E> List<E>.toContentState(): ContentUiState<List<E>> =
+    if (isEmpty()) ContentUiState.Empty else ContentUiState.Content(this)

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

@@ -0,0 +1,58 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.foundation.layout.Box
+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.runtime.Composable
+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
+
+/**
+ * The Empty arm of the four-state contract: shown when a load succeeds with nothing to
+ * list. Tags itself `<screenTag>_empty`, so the state is selectable in tests and E2E
+ * flows. The default copy is deliberately generic — a shaped feature replaces
+ * `title`/`body` with its own domain language.
+ *
+ * @param screenTag Feature slug; the root is tagged `<screenTag>_empty`.
+ * @param title Headline. The default is placeholder copy, meant to be replaced per feature.
+ * @param body Optional supporting line under the title.
+ * @param action Optional call-to-action below the text — an [AppTextButton], for example.
+ */
+@Composable
+fun EmptyState(
+    screenTag: String,
+    modifier: Modifier = Modifier,
+    title: String = "Nothing here yet",
+    body: String? = null,
+    action: (@Composable () -> Unit)? = null,
+) {
+    Box(
+        modifier = modifier.fillMaxSize().semantics { testTag = "${screenTag}_empty" },
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Text(
+                text = title,
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+            if (body != null) {
+                Text(
+                    text = body,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    modifier = Modifier.padding(top = 4.dp),
+                )
+            }
+            if (action != null) {
+                Box(Modifier.padding(top = 12.dp)) { action() }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.foundation.layout.Box
+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.runtime.Composable
+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
+
+/**
+ * The Error arm of the four-state contract: renders the message and, when a retry
+ * handler is supplied, a `<screenTag>_retry` control with a 48 dp touch target. The
+ * error state is a rendered, testable affordance — not just a ViewModel arm.
+ *
+ * @param message User-facing copy. Presentation maps a `DomainError` kind to it; never
+ *   pass a raw exception string.
+ * @param screenTag Feature slug; derives the `<screenTag>_error` and `<screenTag>_retry` tags.
+ * @param onRetry Non-null renders the retry control; null renders the message alone.
+ */
+@Composable
+fun ErrorState(
+    message: String,
+    screenTag: String,
+    onRetry: (() -> Unit)? = null,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier.fillMaxSize().semantics { testTag = "${screenTag}_error" },
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Text(
+                text = message,
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.error,
+            )
+            if (onRetry != null) {
+                AppTextButton(
+                    text = "Retry",
+                    onClick = onRetry,
+                    modifier = Modifier.padding(top = 12.dp).semantics { testTag = "${screenTag}_retry" },
+                )
+            }
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
+import __PACKAGE__.presentation.theme.designToken
+
+/**
+ * The list row: title, optional subtitle, optional leading/trailing slots, on a card
+ * surface bound to `RadiusCard`, `ElevationCard`, and `PaddingCard`. The `clickable`
+ * sits on the `Surface`, so the whole row is the touch target, with a 48 dp minimum
+ * height. Reach for it in any list before hand-rolling a row.
+ *
+ * @param onClick Row-level click handler; the whole card is the target.
+ * @param modifier Per-item testTags go here (`Modifier.testTag("home_item_$id")`) — ids
+ *   are domain data, so the component does not derive them.
+ * @param subtitle Optional second line, in the muted variant color.
+ * @param leading Slot before the text column — an icon or avatar.
+ * @param trailing Slot after the text column — a chevron or badge.
+ */
+@Composable
+fun ListItemCard(
+    title: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    leading: (@Composable () -> Unit)? = null,
+    trailing: (@Composable () -> Unit)? = null,
+) {
+    Surface(
+        color = MaterialTheme.colorScheme.surface,
+        shape = MaterialTheme.shapes.medium,
+        tonalElevation = __THEME_PREFIX__Tokens.ElevationCard,
+        modifier = modifier
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 48.dp)
+            .designToken(
+                tokens = listOf("RadiusCard", "ElevationCard", "PaddingCard"),
+                resolved = mapOf(
+                    "radius" to "${__THEME_PREFIX__Tokens.RadiusCard.value.toInt()}dp",
+                    "elevation" to "${__THEME_PREFIX__Tokens.ElevationCard.value.toInt()}dp",
+                    "padding" to "${__THEME_PREFIX__Tokens.PaddingCard.value.toInt()}dp",
+                    "color" to "#FFFFFFFF",
+                ),
+            )
+            .clickable(onClick = onClick),
+    ) {
+        Row(
+            modifier = Modifier.padding(__THEME_PREFIX__Tokens.PaddingCard),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            if (leading != null) leading()
+            Column(modifier = Modifier.weight(1f)) {
+                Text(title, style = MaterialTheme.typography.titleMedium)
+                if (subtitle != null) {
+                    Text(
+                        subtitle,
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                }
+            }
+            if (trailing != null) trailing()
+        }
+    }
+}

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

@@ -0,0 +1,47 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
+import __PACKAGE__.presentation.theme.designToken
+
+/**
+ * The page container every screen roots itself in. Owns the tagged root
+ * (`<screenTag>_screen`), the page padding from `PaddingPage`, and that token's
+ * inspector self-report — the reported value is derived from the token itself, so it
+ * cannot drift from the catalog. Screens never hand-roll their root column.
+ *
+ * @param screenTag Feature slug ("home"); the root is tagged `<screenTag>_screen`.
+ * @param scrollable True wraps the column in a vertical scroll. Leave false when the
+ *   content scrolls itself (a `LazyColumn`) — nesting the two crashes at runtime.
+ * @param content Column body, laid out inside the page padding.
+ */
+@Composable
+fun ScreenColumn(
+    screenTag: String,
+    modifier: Modifier = Modifier,
+    scrollable: Boolean = false,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    val base = modifier
+        .fillMaxSize()
+        .semantics { testTag = "${screenTag}_screen" }
+        .designToken(
+            tokens = listOf("PaddingPage"),
+            resolved = mapOf("padding" to "${__THEME_PREFIX__Tokens.PaddingPage.value.toInt()}dp"),
+        )
+        .padding(__THEME_PREFIX__Tokens.PaddingPage)
+
+    Column(
+        modifier = if (scrollable) base.verticalScroll(rememberScrollState()) else base,
+        content = content,
+    )
+}

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

@@ -0,0 +1,90 @@
+package __PACKAGE__.presentation.components
+
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
+
+/**
+ * A left-to-right shimmer sweep: an infinite transition driving a linear-gradient brush.
+ * Hand-rolled with zero dependencies — Accompanist's `placeholder` artifact is
+ * deprecated and Android-only, so no library option exists for this project's
+ * commonMain. Apply to any box that stands in for loading content.
+ */
+fun Modifier.shimmer(): Modifier = composed {
+    val transition = rememberInfiniteTransition(label = "shimmer")
+    val translateX by transition.animateFloat(
+        initialValue = -1000f,
+        targetValue = 1000f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 1200, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "shimmerTranslate",
+    )
+    background(
+        Brush.linearGradient(
+            colors = listOf(
+                MaterialTheme.colorScheme.surfaceVariant,
+                MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.4f),
+                MaterialTheme.colorScheme.surfaceVariant,
+            ),
+            start = Offset(translateX, 0f),
+            end = Offset(translateX + 400f, 400f),
+        ),
+    )
+}
+
+/**
+ * A skeleton row matching [ListItemCard]'s geometry — same shape, elevation, and padding
+ * tokens — so the loaded list replaces it without a layout jump. Decorative and
+ * semantics-silent by design: the loading container (`ContentStateDefaults.ListSkeleton`)
+ * carries the `<screenTag>_loading` tag and the "Loading" `contentDescription`, so
+ * assistive tech announces one loading state, not a stack of anonymous bars.
+ */
+@Composable
+fun ListItemSkeleton(modifier: Modifier = Modifier) {
+    Surface(
+        color = MaterialTheme.colorScheme.surface,
+        shape = MaterialTheme.shapes.medium,
+        tonalElevation = __THEME_PREFIX__Tokens.ElevationCard,
+        modifier = modifier.fillMaxWidth(),
+    ) {
+        Column(Modifier.padding(__THEME_PREFIX__Tokens.PaddingCard)) {
+            Box(
+                Modifier
+                    .fillMaxWidth(0.6f)
+                    .height(16.dp)
+                    .clip(MaterialTheme.shapes.small)
+                    .shimmer(),
+            )
+            Box(
+                Modifier
+                    .padding(top = 8.dp)
+                    .fillMaxWidth(0.4f)
+                    .height(12.dp)
+                    .clip(MaterialTheme.shapes.small)
+                    .shimmer(),
+            )
+        }
+    }
+}

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

@@ -4,15 +4,15 @@ 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.
+ * so id-based E2E selectors (Maestro, Appium, XCUITest) find them on a stock build with
+ * no extra flags. Apply once at the root — `AppShell` does — and it covers the whole
+ * subtree.
  *
- * - 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.
+ * Per-platform actuals:
+ * - Android: `semantics { testTagsAsResourceId = true }` — tags surface as `resource-id`
+ *   in the uiautomator tree.
+ * - iOS: the same semantics flag — tags surface as `accessibilityIdentifier` (XCUITest).
+ * - Desktop: no-op — no resource-id concept exists there; desktop tests use the Compose
+ *   test APIs directly.
  */
 expect fun Modifier.exposeTestTagsForAutomation(): Modifier

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

@@ -1,18 +1,11 @@
 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 androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.semantics.testTag
+import __PACKAGE__.presentation.components.AppHeader
 import __PACKAGE__.presentation.components.BaseScreen
-import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
-import __PACKAGE__.presentation.theme.designToken
+import __PACKAGE__.presentation.components.ScreenColumn
 
 @Composable
 fun DetailScreen(
@@ -20,25 +13,10 @@ fun DetailScreen(
     onBack: () -> Unit,
 ) {
     BaseScreen {
-        Column(
-            Modifier
-                .fillMaxSize()
-                .designToken(
-                    tokens = listOf("PaddingPage"),
-                    resolved = mapOf("padding" to "16dp"),
-                )
-                .padding(__THEME_PREFIX__Tokens.PaddingPage),
-        ) {
-            TextButton(onClick = onBack, modifier = Modifier.semantics { testTag = "detail_back" }) {
-                Text("← Back")
-            }
+        ScreenColumn(screenTag = "detail") {
+            AppHeader(title = "Detail", screenTag = "detail", onBack = onBack)
             Text(
-                "Detail",
-                style = MaterialTheme.typography.headlineMedium,
-                modifier = Modifier.semantics { testTag = "detail_title" },
-            )
-            Text(
-                "Item id: $itemId",
+                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

@@ -1,28 +1,19 @@
 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.components.AppHeader
+import __PACKAGE__.presentation.components.ContentStateContainer
+import __PACKAGE__.presentation.components.ListItemCard
+import __PACKAGE__.presentation.components.ScreenColumn
 import __PACKAGE__.presentation.theme.__THEME_PREFIX__Tokens
-import __PACKAGE__.presentation.theme.designToken
 import org.koin.compose.viewmodel.koinViewModel
 
 @Composable
@@ -32,64 +23,17 @@ fun HomeScreen(
 ) {
     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),
-        )
-
-        val errorMessage = state.errorMessage
-        if (state.isLoading) {
-            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-                CircularProgressIndicator()
-            }
-        } else if (errorMessage != null) {
-            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-                Text(
-                    text = errorMessage,
-                    style = MaterialTheme.typography.bodyLarge,
-                    color = MaterialTheme.colorScheme.error,
-                    modifier = Modifier.semantics { testTag = "home_error" },
-                )
-            }
-        } else {
+    ScreenColumn(screenTag = "home") {
+        AppHeader(title = "Home", screenTag = "home")
+        ContentStateContainer(state = state, screenTag = "home", onRetry = viewModel::load) { items ->
             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,
-                            )
-                        }
-                    }
+                items(items, key = { it.id }) { item ->
+                    ListItemCard(
+                        title = item.title,
+                        subtitle = item.subtitle,
+                        onClick = { onItemClick(item.id) },
+                        modifier = Modifier.semantics { testTag = "home_item_${item.id}" },
+                    )
                 }
             }
         }