@momo-kits/native-kits 0.162.44-debug → 0.162.45-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -51,6 +52,10 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.getScreenHeight
+import vn.momo.kits.layout.getScreenLayout
+
+// iPhone Duo inner display: center the sheet instead of spanning the width (RN BottomSheet).
+private val DUO_REGULAR_MIN_WIDTH = 600.dp
 
 @Composable
 internal fun BottomSheet(
@@ -63,7 +68,11 @@ internal fun BottomSheet(
     footerComponent: (@Composable () -> Unit)? = null,
     onDismiss: (() -> Unit)?
 ) {
-    val screenHeightDp = getScreenHeight()
+    val layout = getScreenLayout()
+    val isDuo = layout.isIPhoneDuoDevice
+    val isDuoCentered = isDuo && layout.width >= DUO_REGULAR_MIN_WIDTH
+    // the screen is the outer display on iPhone Duo, even when unfolded
+    val screenHeightDp = if (isDuo) layout.height else getScreenHeight()
     val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
     val sheetOffset = remember { Animatable(screenHeightPx) }
 
@@ -148,13 +157,32 @@ internal fun BottomSheet(
             }
     ) {
         val parentHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
+        val maxHeight = if (isDuo) {
+            parentHeight - maxOf(layout.duoTopInset, Spacing.XL)
+        } else {
+            parentHeight - 90.dp
+        }
+        // landscape side buttons span the full height; in portrait the side status bar only covers the top
+        val sideInset = isDuo && !isDuoCentered && layout.width > layout.height
 
         Box(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
                 .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
-                .fillMaxWidth()
-                .heightIn(max = parentHeight - 90.dp)
+                .then(
+                    if (isDuoCentered) {
+                        // keeps the portrait width in landscape, like system sheets
+                        Modifier.width(
+                            minOf(
+                                minOf(layout.width, layout.height) - Spacing.L * 2,
+                                layout.width - maxOf(layout.insetLeft, layout.insetRight, Spacing.L) * 2,
+                            )
+                        )
+                    } else {
+                        Modifier.fillMaxWidth()
+                    }
+                )
+                .heightIn(max = maxHeight)
                 .background(
                     color = if (isSurface) AppTheme.current.colors.background.surface else AppTheme.current.colors.background.default,
                     shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M)
@@ -168,7 +196,13 @@ internal fun BottomSheet(
             val bottomInset = if (useBottomInset) {
                 (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
             } else 0.dp
-            Column(Modifier.padding(bottom = bottomInset)) {
+            Column(
+                Modifier
+                    .padding(bottom = bottomInset)
+                    .conditional(sideInset) {
+                        absolutePadding(left = layout.insetLeft, right = layout.insetRight)
+                    }
+            ) {
                 Box(
                     modifier = Modifier
                         .height(72.dp)
@@ -249,6 +283,11 @@ internal fun BottomSheet(
                         content()
                     }
                     BottomSheetFooter(footerComponent)
+                } else if (isDuo) {
+                    // content shrinks so a tall sheet keeps its header
+                    Box(Modifier.weight(1f, fill = false)) {
+                        content()
+                    }
                 } else {
                     content()
                 }

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/ModalScreen.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -25,6 +26,7 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.layout.getScreenLayout
 
 @Composable
 internal fun ModalScreen(
@@ -100,12 +102,18 @@ internal fun ModalScreen(
         closeEvent()
     }
 
+    val layout = getScreenLayout()
+
     Box(
         modifier = Modifier
             .fillMaxSize()
             .background(Color.Black.copy(alpha = 0.6f * alpha.value))
             .noFeedbackClickable {
                 if(barrierDismissible) closeEvent()
+            }
+            // center below the side status bar and above the home indicator
+            .conditional(layout.isIPhoneDuoDevice) {
+                padding(top = layout.duoTopInset, bottom = layout.insetBottom)
             },
         contentAlignment = Alignment.Center
     ) {

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigation.kt

@@ -30,6 +30,9 @@ class Navigation(
         headerType: HeaderType? = null,
         scrollData: ScrollData? = null,
         backgroundColor: Color? = null,
+        // AI-GENERATED START: custom screen background
+        backgroundComponent: (@Composable () -> Unit)? = null,
+        // AI-GENERATED END: custom screen background
         tintColor: Color? = null,
         footerComponent: (@Composable () -> Unit)? = null,
         footerTransparent: Boolean? = null,
@@ -48,6 +51,9 @@ class Navigation(
                 headerType = headerType ?: options.headerType,
                 scrollData = scrollData ?: options.scrollData,
                 backgroundColor = backgroundColor ?: options.backgroundColor,
+                // AI-GENERATED START: custom screen background
+                backgroundComponent = backgroundComponent ?: options.backgroundComponent,
+                // AI-GENERATED END: custom screen background
                 tintColor = tintColor ?: options.tintColor,
                 footerComponent = footerComponent ?: options.footerComponent,
                 footerTransparent = footerTransparent ?: options.footerTransparent,
@@ -85,6 +91,10 @@ data class NavigationOptions(
     val headerType: HeaderType = HeaderType.Default(),
     val scrollData: ScrollData = ScrollData(),
     val backgroundColor: Color? = null,
+    // AI-GENERATED START: custom screen background (SwiftUI `NavigationOptions.background`)
+    /** Drawn instead of `backgroundColor` over the whole screen: under the header, outside the keyboard padding. */
+    val backgroundComponent: @Composable (() -> Unit)? = null,
+    // AI-GENERATED END: custom screen background (SwiftUI `NavigationOptions.background`)
     val tintColor: Color? = null,
     val footerComponent: @Composable (() -> Unit)? = null,
     val footerTransparent: Boolean = false,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/NavigationContainer.kt

@@ -31,6 +31,8 @@ import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.layout.LocalScreenLayout
+import vn.momo.kits.layout.calculateScreenLayout
 import vn.momo.kits.platform.ProvideNavigationEventDispatcherOwner
 import vn.momo.kits.platform.ProvideOsFontScale
 import vn.momo.kits.utils.getAppStatusBarHeight
@@ -56,6 +58,7 @@ fun NavigationContainer(
     val navigator = remember { Navigator(navController = navController, maxApi = maxApi, registry = registry) }
     val statusBarHeight = statusBarHeight ?: getAppStatusBarHeight()
     val navigationBarHeight = getNavigationBarHeight()
+    val screenLayout = calculateScreenLayout(statusBarHeight, parent = LocalScreenLayout.current)
 
     val parentContext = LocalContext.current
     val mergedContext = MiniAppContext.merge(parentContext, miniAppContext)
@@ -101,6 +104,7 @@ fun NavigationContainer(
                 AppTheme provides resolvedTheme,
                 AppStatusBar provides statusBarHeight,
                 AppNavigationBar provides navigationBarHeight,
+                LocalScreenLayout provides screenLayout,
                 LocalContext provides mergedContext,
                 LocalDesignSystemConfig provides resolvedDesignSystemConfig,
                 LocalLocalize provides resolvedLocalize,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigator.kt

@@ -55,6 +55,12 @@ class Navigator(
     }
 
     fun onBackSafe(callBack: (() -> Unit)? = null) {
+        // An open modal or bottom sheet takes the back first, as its BackHandler does for gestures.
+        val overplayType = OverplayComponentRegistry.getOverplayType()
+        if (overplayType != null && overplayType != OverplayComponentType.SNACK_BAR) {
+            pop(1, callBack)
+            return
+        }
         tabBackHandler?.let {
             it()
             return

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -1,6 +1,9 @@
 package vn.momo.kits.navigation
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationVector1D
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -39,6 +42,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
@@ -51,7 +55,6 @@ import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.launch
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.const.AppNavigationBar
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
@@ -65,14 +68,24 @@ import vn.momo.kits.navigation.component.HEADER_HEIGHT
 import vn.momo.kits.navigation.component.Header
 import vn.momo.kits.navigation.component.HeaderBackground
 import vn.momo.kits.navigation.component.HeaderRight
+import vn.momo.kits.navigation.component.HeaderSideBar
+import vn.momo.kits.navigation.bottomtab.LocalDuoRailReserve
+import vn.momo.kits.navigation.bottomtab.duoFloatingTabBarInset
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.navigation.component.InputSearchType
+import vn.momo.kits.navigation.bottomtab.LocalBottomTabFocused
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.navigation.tracking.ScreenTrackingState
 import kotlinx.coroutines.delay
 import vn.momo.kits.application.LocalContext
+import vn.momo.kits.utils.horizontalSafeAreaPadding
+import vn.momo.kits.layout.LocalScreenLayout
+import vn.momo.kits.layout.ScreenLayout
+import vn.momo.kits.layout.consumeHorizontalInsets
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.getScreenLayout
 import kotlin.time.Clock
 import kotlin.time.Duration.Companion.milliseconds
 import kotlin.time.ExperimentalTime
@@ -80,11 +93,19 @@ import kotlin.time.ExperimentalTime
 internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 internal val LocalHeaderRightWidthPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 
+// Space a tab's content leaves for the tab bar and home indicator. On iPhone Duo the floating bar
+// overlays the content and the rail lives in the side strip, so only their own inset applies.
 @Composable
-private fun bottomTabBarInset(): Dp {
-    if (LocalNavigation.current.bottomTabIndex == -1) return 0.dp
+private fun bottomTabChildInset(): Dp {
     val keyboard = keyboardSizeState().value
-    return (BOTTOM_TAB_BAR_HEIGHT.dp + Spacing.S - keyboard).coerceAtLeast(0.dp)
+    val navigationBar = AppNavigationBar.current
+    val layout = getScreenLayout()
+    return when {
+        layout.isIPhoneDuo && layout.sideBar == null -> (duoFloatingTabBarInset(layout) - keyboard).coerceAtLeast(0.dp)
+        layout.isIPhoneDuo -> (navigationBar - keyboard).coerceAtLeast(0.dp)
+        else -> (BOTTOM_TAB_BAR_HEIGHT.dp + Spacing.S - keyboard).coerceAtLeast(0.dp) +
+            (navigationBar - keyboard).coerceAtLeast(0.dp)
+    }
 }
 
 @OptIn(ExperimentalMaterialApi::class, ExperimentalTime::class)
@@ -100,7 +121,7 @@ internal fun StackScreen(
     val navigator = LocalNavigator.current
     val maxApi = LocalMaxApi.current
     val context = LocalContext.current
-    val statusBar = AppStatusBar.current
+    val screenLayout = getScreenLayout()
     val density = LocalDensity.current
     val screenRegistry = LocalDynamicScreenRegistry.current
     val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex, initOptions = navigationOptions, registry = screenRegistry) }
@@ -109,20 +130,24 @@ internal fun StackScreen(
     val isBottomTabChild = bottomTabIndex != -1
     val isBottomTabRoot = navigation.isBottomTabRoot
 
+    // A mounted-but-hidden bottom tab tracks again each time it is focused (RN useFocusEffect).
+    val tabFocused = LocalBottomTabFocused.current
+
     // Auto tracking state
-    val trackingState = remember {
+    val trackingState = remember(tabFocused) {
         ScreenTrackingState().apply {
             time = Clock.System.now().toEpochMilliseconds()
         }
     }
 
     // Determine action: push or back
-    val action = remember {
+    val action = remember(tabFocused) {
         if (ScreenTracker.getLastScreenName() != null) "push" else "back"
     }
 
     // Auto tracking effects
-    LaunchedEffect(name) {
+    LaunchedEffect(name, tabFocused) {
+        if (!tabFocused) return@LaunchedEffect
         // Track screen navigated immediately
         ScreenTracker.trackScreenNavigated(
             maxApi = maxApi,
@@ -156,7 +181,7 @@ internal fun StackScreen(
     }
 
     val limit = with(density) {
-        (statusBar + HEADER_HEIGHT.dp).toPx()
+        screenLayout.headerHeight.toPx()
     }.toInt()
 
     val lazyListState = options.scrollData.scrollState as? LazyListState
@@ -165,11 +190,16 @@ internal fun StackScreen(
     else
         (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 1)
     val snapState: ScrollableState = lazyListState ?: scrollState
+    val headerHide = rememberQuickReturnHide(
+        enabled = options.usesDuoQuickReturnHeader(screenLayout),
+        scrollState = scrollState,
+        heightPx = with(density) { screenLayout.headerHeight.toPx() },
+    )
 
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
 
-    if (navigation.options.scrollData.scrollToTopCallback != null) {
+    if (tabFocused && navigation.options.scrollData.scrollToTopCallback != null) {
         RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
     }
 
@@ -189,40 +219,74 @@ internal fun StackScreen(
         LocalFooterHeightPx provides footerHeightPx,
         LocalHeaderRightWidthPx provides headerRightWidthPx
     ) {
-        Box(
-            Modifier
-                .fillMaxSize()
-                .background(options.backgroundColor ?: AppTheme.current.colors.background.default)
-                .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
-                    hideKeyboardOnTap()
+        // AI-GENERATED START: custom screen background, full window and outside the keyboard padding
+        Box(Modifier.fillMaxSize()) {
+            options.backgroundComponent?.let { background ->
+                Box(Modifier.fillMaxSize()) { background() }
+            }
+            // AI-GENERATED END: custom screen background, full window and outside the keyboard padding
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    // AI-GENERATED START: custom background replaces the colour
+                    .background(
+                        if (options.backgroundComponent != null) Color.Transparent
+                        else options.backgroundColor ?: AppTheme.current.colors.background.default
+                    )
+                    // AI-GENERATED END: custom background replaces the colour
+                    .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
+                        hideKeyboardOnTap()
+                    }
+                    .conditional(options.keyboardOptions.useAvoidKeyboard && supportsImePadding()) {
+                        imePadding()
+                    }
+            ) {
+                Box(Modifier.zIndex(1f)) {
+                    HeaderBackground()
                 }
-                .conditional(options.keyboardOptions.useAvoidKeyboard && supportsImePadding()) {
-                    imePadding()
+
+                Box(Modifier.zIndex(4f).graphicsLayer { translationY = -headerHide.value }) {
+                    Header(onBackHandler)
                 }
-        ) {
-            Box(Modifier.zIndex(1f)) {
-                HeaderBackground()
-            }
 
-            Box(Modifier.zIndex(4f)) {
-                Header(onBackHandler)
-            }
+                HeaderSideBar(
+                    bottomInset = maxOf(
+                        bottomBarsHeight(isBottomTabChild) + Spacing.XL,
+                        if (isBottomTabChild) LocalDuoRailReserve.current else 0.dp,
+                    ),
+                    modifier = Modifier.zIndex(4f),
+                )
 
-            Column(Modifier.zIndex(5f)) {
-                SearchAnimated(snapState = snapState)
-            }
+                Column(Modifier.zIndex(5f).horizontalSafeAreaPadding()) {
+                    SearchAnimated(snapState = snapState)
+                }
 
-            Column(Modifier.zIndex(2f).fillMaxSize()) {
-                MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
-                FooterContent()
-            }
+                Column(Modifier.zIndex(2f).fillMaxSize()) {
+                    MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
+                    FooterContent()
+                }
 
-            Box(Modifier.zIndex(6f)) {
-                FloatingContent(isBottomTabChild = isBottomTabChild)
-            }
+                Box(Modifier.zIndex(6f).horizontalSafeAreaPadding()) {
+                    FloatingContent(isBottomTabChild = isBottomTabChild)
+                }
 
-            OverplayView(isBottomTabChild = isBottomTabChild, id = id)
+                OverplayView(isBottomTabChild = isBottomTabChild, id = id)
+            }
+        // AI-GENERATED START: custom screen background, full window and outside the keyboard padding
         }
+        // AI-GENERATED END: custom screen background, full window and outside the keyboard padding
+    }
+}
+
+// Height the footer, tab bar or home indicator takes from the bottom of the screen.
+@Composable
+private fun bottomBarsHeight(isBottomTabChild: Boolean): Dp {
+    val options = LocalOptions.current
+    val navigationBar = AppNavigationBar.current
+    return when {
+        options.hasFooter() -> with(LocalDensity.current) { LocalFooterHeightPx.current.intValue.toDp() }
+        isBottomTabChild -> bottomTabChildInset()
+        else -> navigationBar
     }
 }
 
@@ -230,18 +294,10 @@ internal fun StackScreen(
 @Composable
 internal fun FloatingContent(isBottomTabChild: Boolean) {
     val options = LocalOptions.current
-    val density = LocalDensity.current
-    val footerHeightPx = LocalFooterHeightPx.current
     val scrollState = LocalScrollState.current
-    val navigationBar = AppNavigationBar.current
 
     val fabProps = options.floatingButtonProps ?: return
-    val bottomPadding = fabProps.bottom
-        ?: (Spacing.M + when {
-            options.hasFooter() -> with(density) { footerHeightPx.intValue.toDp() }
-            isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
-            else -> navigationBar
-        })
+    val bottomPadding = fabProps.bottom ?: (Spacing.M + bottomBarsHeight(isBottomTabChild))
 
     FloatingButton(
         scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
@@ -263,11 +319,13 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
     val density = LocalDensity.current
     val scrollState = LocalScrollState.current
     val navigationBar = AppNavigationBar.current
+    val screenLayout = getScreenLayout()
+    val useDuoGlass = options.usesDuoGlassHeader(screenLayout)
 
     Spacer(
         Modifier.height(
-            if (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent))
-                AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp
+            if (!useDuoGlass && (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent)))
+                screenLayout.headerHeight else 0.dp
         )
     )
     if (inputSearchType == InputSearchType.Animated) {
@@ -275,31 +333,46 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
 
         Spacer(Modifier.height((HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp)))
     }
+    // a bottom tab root stays full width: the tab bar and each tab's own StackScreen handle the insets
+    val insetContent = !isBottomTabRoot
     Column(
         Modifier
             .fillMaxWidth()
             .weight(1f)
+            .conditional(insetContent && options.headerType !is HeaderType.Animated) {
+                horizontalSafeAreaPadding()
+            }
             .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
                 verticalScroll(scrollState)
             }
+            .conditional(useDuoGlass) {
+                padding(top = screenLayout.headerHeight)
+            }
             .padding(
                 bottom = when {
                     options.hasFooter() || isBottomTabRoot -> 0.dp
-                    isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
+                    isBottomTabChild -> bottomTabChildInset()
                     !options.scrollData.scrollable && options.scrollData.scrollState == null -> 0.dp
                     else -> navigationBar
                 }
             )
     ) {
-        ScreenContent(content = content)
+        ScreenContent(content = content, insetContent = insetContent)
     }
 
 }
 
 @Composable
-internal fun ScreenContent(content: @Composable () -> Unit) {
+internal fun ScreenContent(content: @Composable () -> Unit, insetContent: Boolean) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
+    val screenLayout = getScreenLayout()
+    val insetBody: @Composable () -> Unit = {
+        CompositionLocalProvider(
+            LocalScreenLayout provides if (insetContent) screenLayout.consumeHorizontalInsets() else screenLayout,
+            content = content,
+        )
+    }
 
     if (options.headerType is HeaderType.Animated) {
         val animatedHeader = options.headerType
@@ -310,12 +383,16 @@ internal fun ScreenContent(content: @Composable () -> Unit) {
             Box(bannerModifier) {
                 animatedHeader.composable.invoke(scrollState.value)
             }
-            Box(Modifier.padding(top = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)) {
-                content()
+            Box(
+                Modifier
+                    .padding(top = screenLayout.headerHeight + animatedHeader.layoutOffSet)
+                    .conditional(insetContent) { horizontalSafeAreaPadding() }
+            ) {
+                insetBody()
             }
         }
     } else {
-        content()
+        insetBody()
     }
 }
 
@@ -324,7 +401,9 @@ internal fun FooterContent() {
     val options = LocalOptions.current
     if (options.hasFooter()) {
         val keyboardSize = keyboardSizeState()
-        val bottomPadding = (AppNavigationBar.current - keyboardSize.value).coerceAtLeast(0.dp)
+        // the Duo floating tab bar overlays tab content, so a tab's footer sits above it
+        val duoTabInset = if (LocalNavigation.current.bottomTabIndex != -1) duoFloatingTabBarInset(getScreenLayout()) else 0.dp
+        val bottomPadding = (maxOf(AppNavigationBar.current, duoTabInset) - keyboardSize.value).coerceAtLeast(0.dp)
         Footer(
             footerComponent = options.footerComponent,
             bottomPadding = bottomPadding,
@@ -372,9 +451,10 @@ fun Footer(
 
     val backgroundColor = if (transparent) Color.Transparent else AppTheme.current.colors.background.surface
 
+    // inset as a whole, not padded inside, so the surface and its shadow stay off the iPhone Duo side bar
     Box(Modifier.onGloballyPositioned {
         if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
-    }) {
+    }.horizontalSafeAreaPadding()) {
         Box(
             Modifier
                 .fillMaxWidth()
@@ -429,17 +509,28 @@ internal fun SearchAnimated(
     if (inputSearchType == InputSearchType.None) return
     val inputSearchProps = (options.headerType as? HeaderType.DefaultOrExtended)?.inputSearchProps ?: return
 
-    val minTopPadding = AppStatusBar.current
-    val maxTopPadding = AppStatusBar.current + HEADER_HEIGHT.dp
+    val screenLayout = getScreenLayout()
+    val useSideBar = screenLayout.sideBar != null
+    // collapsed, the search is centered in the bar row
+    val minTopPadding = screenLayout.headerStatusBarHeight + (screenLayout.headerBarHeight - HEADER_HEIGHT.dp) / 2
+    val maxTopPadding = screenLayout.headerHeight
+    // collapsed on the iPhone Duo status bar row, the search stays between its clusters (48pt back there)
+    val clearance = screenLayout.statusBarClearance
+    val backWidth = if (clearance != null && !useSideBar) DuoMetrics.controlSize else 28.dp
     val minStartPadding = Spacing.M
-    val maxStartPadding = if (options.hiddenBack) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
+    val maxStartPadding = (clearance?.left ?: 0.dp) +
+        if (options.hiddenBack || useSideBar) Spacing.M else backWidth + Spacing.M + Spacing.S
     val minEndPadding = Spacing.M
-    val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
+    val maxEndPadding = (clearance?.right ?: 0.dp) + when {
+        options.headerRight is HeaderRight.None -> Spacing.M
+        useSideBar && options.headerRight is HeaderRight.Toolkit -> Spacing.M
+        else -> headerRightWidthDp + Spacing.M * 2
+    }
 
     val targetColor = lerp(
         AppTheme.current.colors.background.surface,
         AppTheme.current.colors.background.default,
-        (scrollDp / minTopPadding).coerceIn(0f, 1f)
+        (scrollDp / minTopPadding.coerceAtLeast(1.dp)).coerceIn(0f, 1f)
     )
     val animatedColor by animateColorAsState(targetValue = targetColor, label = "BackgroundColor")
 
@@ -581,6 +672,52 @@ internal val LocalOptions = staticCompositionLocalOf<NavigationOptions> { error(
 
 val StackScreenScrollableState = staticCompositionLocalOf<ScrollableState?> { null }
 
+// iPhone Duo side bar: the header leaves with the content and slides back in on a reverse scroll
+// (RN DuoQuickReturnHeader). The side bar is drawn apart from the header, so it stays put.
+@Composable
+private fun rememberQuickReturnHide(
+    enabled: Boolean,
+    scrollState: ScrollState,
+    heightPx: Float,
+): Animatable<Float, AnimationVector1D> {
+    val hide = remember { Animatable(0f) }
+    LaunchedEffect(enabled, scrollState, heightPx) {
+        if (!enabled) {
+            hide.snapTo(0f)
+            return@LaunchedEffect
+        }
+        var last = scrollState.value
+        snapshotFlow { scrollState.value }.collect { y ->
+            val delta = y - last
+            last = y
+            hide.snapTo(if (y <= 0) 0f else (hide.value + delta).coerceIn(0f, heightPx))
+        }
+    }
+    // a half-shown header settles fully in or out once the scroll stops
+    LaunchedEffect(enabled, scrollState, heightPx) {
+        if (!enabled) return@LaunchedEffect
+        snapshotFlow { scrollState.isScrollInProgress }
+            .filter { !it }
+            .collect {
+                val value = hide.value
+                // within the first header height the header still sits on the content
+                if (scrollState.value < heightPx || value <= 0f || value >= heightPx) return@collect
+                launch { hide.animateTo(if (value > heightPx / 2) heightPx else 0f, tween(200)) }
+            }
+    }
+    return hide
+}
+
+internal fun NavigationOptions.usesDuoQuickReturnHeader(layout: ScreenLayout): Boolean =
+    usesDuoGlassHeader(layout) || (layout.sideBar != null && headerType is HeaderType.Animated &&
+        scrollData.scrollable && scrollData.scrollState is ScrollState)
+
+// iPhone Duo side bar: content scrolls under a glass header instead of starting below it (RN Screen).
+internal fun NavigationOptions.usesDuoGlassHeader(layout: ScreenLayout): Boolean =
+    layout.sideBar != null && headerType is HeaderType.DefaultOrExtended &&
+        getInputSearchType(this) == InputSearchType.None &&
+        scrollData.scrollable && scrollData.scrollState is ScrollState
+
 internal fun getInputSearchType(options: NavigationOptions): InputSearchType {
     return when (val headerType = options.headerType) {
         is HeaderType.DefaultOrExtended -> when {