@3fn/core 14.0.0 → 15.0.0

package/dist/consumer-canonical/skills/adaptive/references/android/develop/ui/compose/tooling/debug.md

@@ -0,0 +1,114 @@
+Tools for debugging your Compose UI are available in Android Studio.
+
+## Layout Inspector
+
+Layout Inspector lets you inspect a Compose layout inside a running app in an
+emulator or physical device. You can use the Layout Inspector to check how often
+a composable is recomposed or skipped, which can help identify issues with your
+app. For example, some coding errors might force your UI to recompose
+excessively, which can cause [poor performance](https://developer.android.com/develop/ui/compose/performance).
+Some coding errors can prevent your UI from recomposing and, therefore,
+prevent your UI changes from showing up on the screen. If you're new to
+Layout inspector, check the [guidance](https://developer.android.com/studio/debug/layout-inspector) on how to
+run it.
+
+> [!NOTE]
+> **Note:** If you're not seeing Compose components in layout inspector, make sure you are not removing `META-INF/androidx.compose.*.version` files from the APK. These are required for layout inspector to work.
+
+### Get recomposition counts
+
+When debugging your Compose layouts, knowing when composables
+[recompose](https://developer.android.com/develop/ui/compose/mental-model#recomposition) is important in
+understanding whether your UI is implemented properly. For example, if it's
+recomposing too many times, your app might be doing more work than is necessary.
+On the other hand, components that don't recompose when you anticipate them to
+can lead to unexpected behaviors.
+
+The Layout Inspector shows you when discrete composables in your layout
+hierarchy have either recomposed or skipped, as you interact with your app. In
+Android Studio, your recompositions are highlighted to help you determine
+where in the UI your composables are recomposing.
+
+**Figure 1.** Recompositions are highlighted in Layout Inspector.
+
+The highlighted portion shows a gradient overlay of the composable in the image
+section of the Layout Inspector, and gradually disappears so that you can get an
+idea of where in the UI the composable with the highest recompositions can be
+found. If one composable is recomposing at a higher rate than another
+composable, then the first composable receives a stronger gradient overlay
+color. If you double-click a composable in the layout inspector, you're taken to
+the corresponding code for analysis.
+
+> [!NOTE]
+> **Note:** To view recomposition counts, make sure your app is using an API level of 29 or higher, and `Compose 1.2.0` or higher. Then, deploy your app as you normally would.
+
+![](https://developer.android.com/static/develop/ui/compose/images/li-recomposition-counts.png) **Figure 2.**The composition and skip counter in Layout Inspector.
+
+Open the **Layout Inspector** window and connect to your app process. In the
+**Component Tree** , there are two columns that appear next to the layout
+hierarchy. The first column shows the number of compositions for each node and
+the second column displays the number of skips for each node. Selecting a
+composable node shows the dimensions and parameters of the composable, unless
+it's an inline function, in which case the parameters can't be shown. You can
+also see similar information in the **Attributes** pane when you select a
+composable from the **Component Tree** or the **Layout Display**.
+
+Resetting the count can help you understand recompositions or skips during a
+specific interaction with your app. If you want to reset the count, click
+**Reset** near the top of the **Component Tree** pane.
+
+> [!NOTE]
+> **Note:** If you don't see the new columns in the **Component Tree** pane, you can view them by selecting **Show Recomposition Counts** from the **View Options** menu ![Layout Inspector View Options
+> icon](https://developer.android.com/static/studio/images/buttons/live-layout-inspector-view-options-icon.png) near the top of the **Component Tree** pane, as shown in the following image.
+
+![Enable the composition and skip counter in Layout
+Inspector](https://developer.android.com/static/develop/ui/compose/images/li-show-recomposition-counts.png)
+
+**Figure 3**. Enable the composition and skip counter in Layout Inspector.
+
+### Compose semantics
+
+In Compose, [Semantics](https://developer.android.com/develop/ui/compose/semantics) describe your UI in an
+alternative manner that is understandable for
+[Accessibility](https://developer.android.com/develop/ui/compose/accessibility) services and for the
+[Testing](https://developer.android.com/develop/ui/compose/testing) framework. You can use the Layout Inspector
+to inspect semantic information in your Compose layouts.
+![Semantic information displayed using the Layout Inspector.](https://developer.android.com/static/develop/ui/compose/images/layout_inspector_semantics_new.png) **Figure 4.** Semantic information displayed using the Layout Inspector.
+
+When selecting a Compose node, use the **Attributes** pane to check whether it
+declares semantic information directly, merges semantics from its children, or
+both. To quickly identify which nodes include semantics, either declared or
+merged, use select the **View options** drop-down in the **Component Tree** pane
+and select **Highlight Semantics Layers**. This highlights only the nodes in the
+tree that include semantics, and you can use your keyboard to quickly navigate
+between them.
+
+## Compose UI Check
+
+To help you build more adaptive and accessible UIs in Jetpack Compose, Android
+Studio provides a UI Check mode in Compose Preview. This feature is similar
+to [Accessibility Scanner](https://developer.android.com/guide/topics/ui/accessibility/testing#accessibility-scanner)
+for views.
+
+When you activate Compose UI check mode on a Compose Preview, Android Studio
+automatically audits your Compose UI and suggests improvements to make your UI
+more accessible and adaptive. Android Studio checks that your UI works across
+different screen sizes. In the **Problems** panel, the tool shows the issues
+that it detects, such as text stretched on large screens or low color contrast.
+
+To access this feature, click the UI Check icon on Compose Preview:
+![](https://developer.android.com/static/studio/images/design/compose-ui-check-entry.png) **Figure 5.** Entry point to UI check mode.
+
+UI check automatically previews your UI in different configurations and
+highlights issues found in different configurations. In the **Problems** panel,
+when you click an issue, you can see the details of the issue, suggested fixes,
+and the renderings that highlight the area of the issue.
+![](https://developer.android.com/static/studio/images/design/compose-ui-check.png) **Figure 6.** UI check mode in action.
+
+### Fix with AI
+
+For issues detected in UI Check mode, you can use the AI agent to propose and
+apply code fixes. Click the **Fix with AI** button on an issue in the
+**Problems** panel. The agent analyzes the problem and your code to suggest
+changes that resolve the accessibility or adaptive issue.
+![](https://developer.android.com/static/studio/preview/features/images/ui-check-mode-single-fix.png) **Figure 7.** The agent fixes UI issues in UI Check mode.

package/dist/consumer-canonical/skills/adaptive/references/android/guide/navigation/navigation-3/recipes/material-listdetail.md

@@ -0,0 +1,141 @@
+# Material List-Detail Recipe
+
+This recipe demonstrates how to create an adaptive list-detail layout using the `ListDetailSceneStrategy` from the Material 3 Adaptive library. This layout automatically adjusts to show one, two, or three panes depending on the available screen width.
+
+## How it works
+
+This example has three destinations: `ConversationList`, `ConversationDetail`, and `Profile`.
+
+### `ListDetailSceneStrategy`
+
+The key to this recipe is the `rememberListDetailSceneStrategy`, which provides the logic for the adaptive layout.
+
+- **Pane Roles**: Each destination is assigned a role using metadata:
+
+  - `ListDetailSceneStrategy.listPane()`: For the primary (list) content. This pane is always visible. A placeholder can be provided to be shown in the detail pane area when no detail content is selected.
+  - `ListDetailSceneStrategy.detailPane()`: For the secondary (detail) content.
+  - `ListDetailSceneStrategy.extraPane()`: For tertiary content.
+- **Adaptive Layout** : The `ListDetailSceneStrategy` automatically handles the layout. On smaller screens, only one pane is shown at a time. On wider screens, it will show the list and detail panes side-by-side. On very wide screens, it can show all three panes: list, detail, and extra.
+
+- **Navigation** : Navigation between the panes is handled by adding and removing destinations from the back stack as usual. The `ListDetailSceneStrategy` observes the back stack and adjusts the layout accordingly.
+
+[![](https://developer.android.com/static/images/picto-icons/code.svg) Explore View the full recipe on GitHub.](https://github.com/android/nav3-recipes/tree/main/app/src/main/java/com/example/nav3recipes/material/listdetail)
+
+```
+package com.example.nav3recipes.material.listdetail
+
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
+import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
+import androidx.compose.material3.adaptive.navigation3.ListDetailSceneStrategy
+import androidx.compose.material3.adaptive.navigation3.rememberListDetailSceneStrategy
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.dropUnlessResumed
+import androidx.navigation3.runtime.NavKey
+import androidx.navigation3.runtime.entryProvider
+import androidx.navigation3.runtime.rememberNavBackStack
+import androidx.navigation3.ui.NavDisplay
+import com.example.nav3recipes.content.ContentBlue
+import com.example.nav3recipes.content.ContentGreen
+import com.example.nav3recipes.content.ContentRed
+import com.example.nav3recipes.content.ContentYellow
+import com.example.nav3recipes.ui.setEdgeToEdgeConfig
+import kotlinx.serialization.Serializable
+
+@Serializable
+private object ConversationList : NavKey
+
+@Serializable
+private data class ConversationDetail(val id: String) : NavKey
+
+@Serializable
+private data object Profile : NavKey
+
+class MaterialListDetailActivity : ComponentActivity() {
+
+    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
+    override fun onCreate(savedInstanceState: Bundle?) {
+        setEdgeToEdgeConfig()
+        super.onCreate(savedInstanceState)
+
+        setContent {
+
+            val backStack = rememberNavBackStack(ConversationList)
+
+            // Override the defaults so that there isn't a horizontal space between the panes.
+            // See b/418201867
+            val windowAdaptiveInfo = currentWindowAdaptiveInfoV2()
+            val directive = remember(windowAdaptiveInfo) {
+                calculatePaneScaffoldDirective(windowAdaptiveInfo)
+                    .copy(horizontalPartitionSpacerSize = 0.dp)
+            }
+            val listDetailStrategy = rememberListDetailSceneStrategy<NavKey>(directive = directive)
+
+            NavDisplay(
+                backStack = backStack,
+                onBack = { backStack.removeLastOrNull() },
+                sceneStrategies = listOf(listDetailStrategy),
+                entryProvider = entryProvider {
+                    entry<ConversationList>(
+                        metadata = ListDetailSceneStrategy.listPane(
+                            detailPlaceholder = {
+                                ContentYellow("Choose a conversation from the list")
+                            }
+                        )
+                    ) {
+                        ContentRed("Welcome to Nav3") {
+                            Button(onClick = dropUnlessResumed {
+                                backStack.add(ConversationDetail("ABC"))
+                            }) {
+                                Text("View conversation")
+                            }
+                        }
+                    }
+                    entry<ConversationDetail>(
+                        metadata = ListDetailSceneStrategy.detailPane()
+                    ) { conversation ->
+                        ContentBlue("Conversation ${conversation.id} ") {
+                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                                Button(onClick = dropUnlessResumed {
+                                    backStack.add(Profile)
+                                }) {
+                                    Text("View profile")
+                                }
+                            }
+                        }
+                    }
+                    entry<Profile>(
+                        metadata = ListDetailSceneStrategy.extraPane()
+                    ) {
+                        ContentGreen("Profile")
+                    }
+                }
+            )
+        }
+    }
+}
+```

package/dist/consumer-canonical/skills/edge-to-edge/SKILL.md

@@ -0,0 +1,426 @@
+---
+name: edge-to-edge
+description: Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge
+  support and troubleshoot common issues. Use this skill to fix UI components (like
+  buttons or lists) that are obscured by or overlapping with the navigation bar or
+  status bar, fix IME insets, and fix system bar legibility.
+license: Complete terms in LICENSE.txt
+metadata:
+  author: Google LLC
+  last-updated: '2026-04-01'
+  keywords:
+  - android
+  - compose
+  - system bars
+  - edge-to-edge
+  - status bar
+  - navigation bar
+---
+
+## Prerequisites
+
+- Project **MUST** use Android Jetpack Compose.
+- Project **MUST** target SDK 35 or later. If the SDK is lower than 35, increase the SDK to 35.
+
+## Step 1: plan
+
+1. Locate and analyze all Activity classes to detect which have existing edge-to-edge support. For every Activity without edge-to-edge, plan to make each Activity edge-to-edge.
+2. In each Activity, Locate and analyze all lists and FAB components to detect which have existing edge-to-edge support. For every component without edge-to-edge support, plan to make each of these components edge-to-edge.
+3. In each Activity, scan for `TextField`, `OutlinedTextField`, or `BasicTextField`. If found, then you **MUST** verify the IME doesn't hide the input field by following the IME section of this skill.
+
+## Step 2: add edge-to-edge support
+
+1. Add `enableEdgeToEdge` before `setContent` in `onCreate` in each Activity that does not already call `enableEdgeToEdge`.
+2. Add `android:windowSoftInputMode="adjustResize"` in the AndroidManifest.xml for all Activities that use a soft keyboard.
+
+## Step 3: apply insets
+
+- The app **MUST** apply system insets, or align content to rulers, so critical
+  UI remains tappable. Choose only one method to avoid double padding:
+
+  1. **PREFERRED:** When available, use `Scaffold`s and pass `PaddingValues` to the content lambda.
+
+
+  ```kotlin
+  Scaffold { innerPadding ->
+      // innerPadding accounts for system bars and any Scaffold components
+      LazyColumn(
+          modifier = Modifier
+              .fillMaxSize()
+              .consumeWindowInsets(innerPadding),
+          contentPadding = innerPadding
+      ) { /* Content */ }
+  }
+  ```
+
+  <br />
+
+  1. **PREFERRED:** When available, use the automatic inset handling or padding modifiers in material components.
+
+     - Material 3 Components manages safe areas for its own components, including:
+       - `TopAppBar`
+       - `SmallTopAppBar`
+       - `CenterAlignedTopAppBar`
+       - `MediumTopAppBar`
+       - `LargeTopAppBar`
+       - `BottomAppBar`
+       - `ModalDrawerSheet`
+       - `DismissibleDrawerSheet`
+       - `PermanentDrawerSheet`
+       - `ModalBottomSheet`
+       - `NavigationBar`
+       - `NavigationRail`
+     - For Material 2 Components, use the `windowInsets`parameter to apply insets manually for `BottomAppBar`, `TopAppBar` and `BottomNavigation`. **DO NOT** apply padding to the parent container; instead, pass insets directly to the App Bar component. Applying padding to the parent container prevents the App Bar background from drawing into the system bar area. For example, for `TopAppBar`, choose only one of the following options:
+       1. **PREFERRED:** `TopAppBar(windowInsets = AppBarDefaults.topAppBarWindowInsets)`
+       2. `TopAppBar(windowInsets = WindowInsets.systemBars.exclude(WindowInsets.navigationBars))`
+       3. `TopAppBar(windowInsets = WindowInsets.systemBars.add(WindowInsets.captionBar))`
+  2. For components outside a Scaffold, use padding modifiers, such as `Modifier.safeDrawingPadding()` or `Modifier.windowInsetsPadding(WindowInsets.safeDrawing)`.
+
+
+     ```kotlin
+     Box(
+         modifier = Modifier
+             .fillMaxSize()
+             .safeDrawingPadding()
+     ) {
+         Button(
+             onClick = {},
+             modifier = Modifier.align(Alignment.BottomCenter)
+         ) {
+             Text("Login")
+         }
+     }
+     ```
+
+     <br />
+
+  3. For deeply nested components with excessive padding, use `WindowInsetsRulers` (e.g. `Modifier.fitInside(WindowInsetsRulers.SafeDrawing.current)`). See the *IME* section for a code sample.
+
+  4. When you need an element (e.g. a custom header or decorative scrim) to
+     equal the dimensions of a system bar, use inset size modifiers (e.g.
+     `Modifier.windowInsetsTopHeight(WindowInsets.systemBars)`).
+     See the *Lists* section for a code sample.
+
+## Adaptive Scaffolds
+
+- `NavigationSuiteScaffold` manages safe areas for its own components, like the `NavigationRail` or `NavigationBar`. However, the adaptive scaffolds (e.g. `NavigationSuiteScaffold`, `ListDetailPaneScaffold`) don't propagate PaddingValues to their inner contents. You **MUST** apply insets to **individual** screens or components (e.g., list `contentPadding` or FAB padding) as described in *Step 3* . **DO NOT** apply `safeDrawingPadding` or similar modifiers to the `NavigationSuiteScaffold` parent. This clips and prevents an edge-to-edge screen.
+
+## IME
+
+- For each Activity with a soft keyboard, check that `android:windowSoftInputMode="adjustResize"` is set in the AndroidManifest.xml. DO NOT use `SOFT_INPUT_ADJUST_RESIZE` because it is deprecated. Then, maintain focus on the input field. Choose one:
+  - 1. **PREFERRED:** Add `Modifier.fitInside(WindowInsetsRulers.Ime.current)` to the content container. This is preferred over `imePadding()` because it reduces jank and extra padding caused by forgetting to consume insets upstream in the hierarchy.
+  - 2. Add `imePadding` to the content container. The padding modifier **MUST** be placed before `Modifier.verticalScroll()`. Do NOT use `Modifier.imePadding()` if the parent already accounts for the IME with `contentWindowInsets` (e.g. `contentWindowInsets =
+    WindowInsets.safeDrawing`). Doing so will cause double padding.
+
+### IMEs with Scaffolds code patterns
+
+#### RIGHT
+
+RIGHT because `contentWindowInsets` contains IME insets, which are passed to the
+content lambda as `innerPadding`.
+
+
+```kotlin
+// RIGHT
+Scaffold(contentWindowInsets = WindowInsets.safeDrawing) { innerPadding ->
+    Column(
+        modifier = Modifier
+            .padding(innerPadding)
+            .consumeWindowInsets(innerPadding)
+            .verticalScroll(rememberScrollState())
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+*** ** * ** ***
+
+RIGHT because `fitInside` fits the content to the IME insets regardless of
+`contentWindowInsets`.
+
+
+```kotlin
+// RIGHT
+Scaffold() { innerPadding ->
+    Column(
+        modifier = Modifier
+            .padding(innerPadding)
+            .consumeWindowInsets(innerPadding)
+            .fitInside(WindowInsetsRulers.Ime.current)
+            .verticalScroll(rememberScrollState())
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+*** ** * ** ***
+
+RIGHT because the default `contentWindowInsets` does not contain IME insets, and
+`imePadding()` applies IME insets:
+
+
+```kotlin
+// RIGHT
+Scaffold() { innerPadding ->
+    Column(
+        modifier = Modifier
+            .padding(innerPadding)
+            .consumeWindowInsets(innerPadding)
+            .imePadding()
+            .verticalScroll(rememberScrollState())
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+#### WRONG
+
+WRONG because there will be excess padding when the IME opens. IME insets are
+applied twice, once with innerPadding, which contains IME insets from the passed
+`contentWindowInsets` values, and once with `imePadding`:
+
+
+```kotlin
+// WRONG
+Scaffold( contentWindowInsets = WindowInsets.safeDrawing ) { innerPadding ->
+    Column(
+        modifier = Modifier
+            .padding(innerPadding)
+            .imePadding()
+            .verticalScroll(rememberScrollState())
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+*** ** * ** ***
+
+WRONG because the IME will cover up the content. Scaffold's default
+`contentWindowInsets` does NOT contain IME insets.
+
+
+```kotlin
+// WRONG
+Scaffold() { innerPadding ->
+    Column(
+        modifier = Modifier
+            .padding(innerPadding)
+            .verticalScroll(rememberScrollState())
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+### IMEs without Scaffolds code patterns
+
+#### RIGHT
+
+The following code samples WILL NOT cause excessive padding.
+
+
+```kotlin
+// RIGHT
+Box(
+    // Insets consumed
+    modifier = Modifier.safeDrawingPadding() // or imePadding(), safeContentPadding(), safeGesturesPadding()
+) {
+    Column(
+        modifier = Modifier.imePadding()
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+*** ** * ** ***
+
+
+```kotlin
+// RIGHT
+Box(
+    // Insets consumed
+    modifier = Modifier.windowInsetsPadding(WindowInsets.safeDrawing) // or WindowInsets.ime, WindowInsets.safeContent, WindowInsets.safeGestures
+) {
+    Column(
+        modifier = Modifier.imePadding()
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+*** ** * ** ***
+
+
+```kotlin
+// RIGHT
+Box(
+    // Insets not consumed, but irrelevant due to fitInside
+    modifier = Modifier.padding(WindowInsets.safeDrawing.asPaddingValues()) // or WindowInsets.ime.asPaddingValues(), WindowInsets.safeContent.asPaddingValues(), WindowInsets.safeGestures.asPaddingValues()
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .fitInside(WindowInsetsRulers.Ime.current)
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+#### WRONG
+
+The following code sample WILL cause excessive padding because IME insets are
+applied twice:
+
+
+```kotlin
+// WRONG
+Box(
+    // Insets not consumed
+    modifier = Modifier.padding(WindowInsets.safeDrawing.asPaddingValues()) // or WindowInsets.ime.asPaddingValues(), WindowInsets.safeContent.asPaddingValues(), WindowInsets.safeGestures.asPaddingValues()
+) {
+    Column(
+        modifier = Modifier.imePadding()
+    ) { /* Content */ }
+}
+```
+
+<br />
+
+## Navigation Bar Contrast \& System Bar Icons
+
+- If the Activity uses `enableEdgeToEdge` from `WindowCompat`, you **MUST** set
+  `isAppearanceLightNavigationBars` and `isAppearanceLightStatusBars` to the
+  inverse of the device theme for apps that support light and dark theme so the
+  system bar icons are legible. It's recommended to do this in your theme file.
+  DO NOT do this if the Activities use `enableEdgeToEdge` from `ComponentActivity`
+  because it handles the icon colors automatically.
+
+
+  ```kotlin
+  // Only use if calling `enableEdgeToEdge` from `WindowCompat`.
+  // Apply to your theme file.
+  @Composable
+  fun MyTheme(
+      darkTheme: Boolean = isSystemInDarkTheme(),
+      content: @Composable () -> Unit
+  ) {
+      val view = LocalView.current
+      if (!view.isInEditMode) {
+          SideEffect {
+              val window = (view.context as? Activity)?.window ?: return@SideEffect
+              val controller = WindowCompat.getInsetsController(window, view)
+
+              // Dark icons for Light Mode (!darkTheme), Light icons for Dark Mode
+              controller.isAppearanceLightStatusBars = !darkTheme
+              controller.isAppearanceLightNavigationBars = !darkTheme
+          }
+      }
+
+      MaterialTheme(content = content)
+  }
+  ```
+
+  <br />
+
+- If any screen uses a `Scaffold` or a `NavigationSuiteScaffold` with a bottom
+  bar (e.g., `BottomAppBar`, `NavigationBar`), set
+  `window.isNavigationBarContrastEnforced = false` in the corresponding Activity
+  for SDK 29+. This prevents the system from adding a translucent background to
+  the navigation bar, verifying your bottom bar colors extend to the bottom of the
+  screen.
+
+## Lists
+
+- Apply inset padding (like `Scaffold`'s `innerPadding`) to the `contentPadding` parameter of scrollable components (e.g. `LazyColumn`, `LazyRow`). DO NOT apply it as a `Modifier.padding()` to the list's parent container, as this clips the content and prevents it from scrolling behind the system bars.
+- Create a translucent composable covering the system bar so that the icons are still legible.
+
+
+```kotlin
+class SystemBarProtectionSnippets : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true
+        // which is used to add a translucent scrim to three-button navigation
+        enableEdgeToEdge()
+
+        setContent {
+            MyTheme {
+                // Main content
+                MyContent()
+
+                // After drawing main content, draw status bar protection
+                StatusBarProtection()
+            }
+        }
+    }
+}
+
+@Composable
+private fun StatusBarProtection(
+    color: Color = MaterialTheme.colorScheme.surfaceContainer,
+) {
+    Spacer(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(
+                with(LocalDensity.current) {
+                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
+                }
+            )
+            .background(
+                brush = Brush.verticalGradient(
+                    colors = listOf(
+                        color.copy(alpha = 1f),
+                        color.copy(alpha = 0.8f),
+                        Color.Transparent
+                    )
+                )
+            )
+    )
+}
+```
+
+<br />
+
+## Dialogs
+
+If both the following conditions are true, then the Dialog is full screen and
+must be made edge-to-edge:
+1. The `DialogProperties` contains `usePlatformDefaultWidth = false`.
+2. The Dialog calls `Modifier.fillMaxSize()`.
+
+To make a full screen Dialog edge-to-edge, set `decorFitsSystemWindows = false`
+in the `DialogProperties`.
+
+
+```kotlin
+Dialog(
+    onDismissRequest = { /* Handle dismiss */ },
+    properties = DialogProperties(
+        // 1. Allows the dialog to span the full width of the screen
+        usePlatformDefaultWidth = false,
+        // 2. Allows the dialog to draw behind status and navigation bars
+        decorFitsSystemWindows = false
+    )
+) { /* Content */ }
+```
+
+<br />
+
+## Checklist
+
+- \[ \] Does every `Activity` call `enableEdgeToEdge()`?
+- \[ \] Is `adjustResize` set in the `AndroidManifest.xml`?
+- \[ \] Does every `TextField`, `OutlinedTextField`, or `BasicTextField` have a parent with `imePadding()`, `fitInside`, `Modifier.safeDrawingPadding()`, `Modifier.safeContentPadding()`, `Modifier.safeGesturesPadding()`, or `contentWindowInsets` set to `WindowInsets.safeDrawing` or `WindowInsets.ime`?
+- \[\] Does the first and last list item draw away from the system bars by passing insets to `contentPadding`?
+- \[\] Do FABs draw above the navigation bars by either being inside a Scaffold or by applying `Modifier.safeDrawingPadding()`?
+- \[\] Does the project build? Run `./gradlew build` to be sure.