@momo-kits/native-kits 0.168.1-beta.2-debug → 0.168.1-beta.24-debug

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

@@ -6,7 +6,9 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -17,6 +19,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -25,15 +28,22 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.AbsoluteAlignment
 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.input.pointer.pointerInput
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.constrainHeight
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import vn.momo.kits.components.Divider
@@ -52,11 +62,24 @@ 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.DuoMetrics
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.SideBarLayout
 import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.navigation.component.SideBarButton
+import vn.momo.kits.navigation.component.getHeaderColor
 
 // iPhone Duo inner display: center the sheet instead of spanning the width (RN BottomSheet).
 private val DUO_REGULAR_MIN_WIDTH = 600.dp
 
+private val INDICATOR_HEIGHT = 16.dp
+private val HEADER_ROW_HEIGHT = 56.dp
+
+// Side column controls line up with the header row while the sheet is short.
+private val SIDE_COLUMN_OFFSET = INDICATOR_HEIGHT + (HEADER_ROW_HEIGHT - DuoMetrics.controlSize) / 2
+
 @Composable
 internal fun BottomSheet(
     content: @Composable () -> Unit,
@@ -70,7 +93,21 @@ internal fun BottomSheet(
 ) {
     val layout = getScreenLayout()
     val isDuo = layout.isIPhoneDuoDevice
-    val isDuoCentered = isDuo && layout.width >= DUO_REGULAR_MIN_WIDTH
+    val isDuoCentered = isDuo && minOf(layout.width, layout.height) >= DUO_REGULAR_MIN_WIDTH
+    val isDuoFloating = isDuo && !isDuoCentered
+    val title = header as? BottomHeader.Title
+    val sideColumn = layout.sideBar?.takeIf {
+        isDuoFloating && title != null && it.width - Spacing.M >= DuoMetrics.controlSize + Spacing.M
+    }
+    // the floating sheet spans the side safe area, its content stays clear of it
+    val sidePadding = if (isDuoFloating) {
+        PaddingValues.Absolute(
+            left = (layout.insetLeft - Spacing.M).coerceAtLeast(0.dp),
+            right = (layout.insetRight - Spacing.M).coerceAtLeast(0.dp),
+        )
+    } else {
+        PaddingValues()
+    }
     // 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() }
@@ -96,6 +133,11 @@ internal fun BottomSheet(
         onDispose { }
     }
 
+    // a closing sheet keeps going: a second close, the open slide or a drag would cancel its animation
+    var isClosing by remember { mutableStateOf(false) }
+    // runs once the sheet has closed itself, after its onDismiss
+    var afterDismiss by remember { mutableStateOf<(() -> Unit)?>(null) }
+
     suspend fun openEvent(){
         backgroundAlpha.animateTo(
             targetValue = 0.3f,
@@ -104,6 +146,7 @@ internal fun BottomSheet(
                 easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
             )
         )
+        if (isClosing) return
         sheetOffset.animateTo(
             targetValue = 0f,
             animationSpec = tween(
@@ -113,7 +156,9 @@ internal fun BottomSheet(
         )
     }
 
-    fun closeEvent(){
+    fun closeEvent(then: (() -> Unit)? = null){
+        if (isClosing) return
+        isClosing = true
         coroutineScope.launch {
             sheetOffset.animateTo(
                 targetValue = screenHeightPx,
@@ -129,10 +174,15 @@ internal fun BottomSheet(
                     easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
                 )
             )
+            // not reached when a newer overlay replaced this one, so its back is dropped
+            afterDismiss = then
             OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 
+    // RN `leftOptions.onPressIconLeft`: the sheet closes first, then the back runs
+    val onBack = title?.onBack?.let { back -> { closeEvent(then = back) } }
+
     LaunchedEffect(Unit) {
         openEvent()
     }
@@ -141,6 +191,7 @@ internal fun BottomSheet(
         OverplayComponentRegistry.bindClose { closeEvent() }
         onDispose {
             onDismiss?.invoke()
+            afterDismiss?.invoke()
         }
     }
 
@@ -162,30 +213,29 @@ internal fun BottomSheet(
         } 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
+        val radius = if (isDuo) Radius.XL else Radius.M
 
         Box(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
                 .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
                 .then(
-                    if (isDuoCentered) {
+                    when {
                         // keeps the portrait width in landscape, like system sheets
-                        Modifier.width(
+                        isDuoCentered -> Modifier.width(
                             minOf(
                                 minOf(layout.width, layout.height) - Spacing.L * 2,
                                 layout.width - maxOf(layout.insetLeft, layout.insetRight, Spacing.L) * 2,
                             )
                         )
-                    } else {
-                        Modifier.fillMaxWidth()
+                        isDuoFloating -> Modifier.fillMaxWidth().padding(horizontal = Spacing.M)
+                        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)
+                    shape = RoundedCornerShape(topStart = radius, topEnd = radius)
                 )
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
@@ -196,28 +246,24 @@ internal fun BottomSheet(
             val bottomInset = if (useBottomInset) {
                 (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
             } else 0.dp
-            Column(
-                Modifier
-                    .padding(bottom = bottomInset)
-                    .conditional(sideInset) {
-                        absolutePadding(left = layout.insetLeft, right = layout.insetRight)
-                    }
-            ) {
+            Column(Modifier.padding(bottom = bottomInset)) {
                 Box(
                     modifier = Modifier
-                        .height(72.dp)
+                        .height(INDICATOR_HEIGHT + HEADER_ROW_HEIGHT)
                         .fillMaxWidth()
                         .conditional(draggable) {
                             pointerInput(Unit) {
                                 detectDragGestures(
                                     onDrag = { change, dragAmount ->
                                         change.consume()
+                                        if (isClosing) return@detectDragGestures
                                         coroutineScope.launch {
                                             val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
                                             sheetOffset.snapTo(newOffset)
                                         }
                                     },
                                     onDragEnd = {
+                                        if (isClosing) return@detectDragGestures
                                         coroutineScope.launch {
                                             if (sheetOffset.value > sheetCloseOffset) {
                                                 closeEvent()
@@ -233,6 +279,7 @@ internal fun BottomSheet(
                     Column(
                         modifier = Modifier
                             .fillMaxSize()
+                            .padding(sidePadding)
                             .padding(horizontal = Spacing.M),
                         horizontalAlignment = Alignment.CenterHorizontally
                     ) {
@@ -247,29 +294,16 @@ internal fun BottomSheet(
                                 )
                         )
                         Spacer(Modifier.height(4.dp))
-                        Box(Modifier.fillMaxWidth().height(56.dp), contentAlignment = Alignment.Center){
+                        Box(Modifier.fillMaxWidth().height(HEADER_ROW_HEIGHT), contentAlignment = Alignment.Center){
                             when (header) {
-                                is BottomHeader.Title -> {
-                                    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
-                                        Box(Modifier.size(24.dp))
-                                        Box(Modifier.fillMaxHeight().weight(1f), contentAlignment = Alignment.Center){
-                                            Text(
-                                                text = header.data,
-                                                color = Colors.black_17,
-                                                style = Typography.headerDefaultBold
-                                            )
-                                        }
-                                        Box(Modifier
-                                            .size(24.dp)
-                                            .noFeedbackClickable {
-                                                closeEvent()
-                                            },
-                                            contentAlignment = Alignment.Center
-                                        ){
-                                            Icon(source = "navigation_close")
-                                        }
-                                    }
-                                }
+                                is BottomHeader.Title -> BottomSheetTitle(
+                                    text = header.data,
+                                    backIcon = header.backIcon,
+                                    // the side column holds back and close, the row keeps only the title
+                                    showButtons = sideColumn == null,
+                                    onBack = onBack,
+                                    onClose = { closeEvent() },
+                                )
                                 is BottomHeader.Custom -> {
                                     header.content()
                                 }
@@ -277,27 +311,141 @@ internal fun BottomSheet(
                         }
                     }
                 }
-                Divider()
+                Box(Modifier.padding(sidePadding)) {
+                    Divider()
+                }
                 if (footerComponent != null) {
-                    Box(Modifier.weight(1f, fill = false)) {
+                    Box(Modifier.weight(1f, fill = false).padding(sidePadding)) {
                         content()
                     }
-                    BottomSheetFooter(footerComponent)
+                    BottomSheetFooter(footerComponent, sidePadding)
                 } else if (isDuo) {
                     // content shrinks so a tall sheet keeps its header
-                    Box(Modifier.weight(1f, fill = false)) {
+                    Box(Modifier.weight(1f, fill = false).padding(sidePadding)) {
                         content()
                     }
                 } else {
                     content()
                 }
             }
+            if (sideColumn != null && title != null) {
+                BottomSheetSideColumn(
+                    sideBar = sideColumn,
+                    parentHeight = parentHeight,
+                    backIcon = title.backIcon,
+                    onBack = onBack,
+                    onClose = { closeEvent() },
+                )
+            }
         }
     }
 }
 
 @Composable
-private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
+private fun BottomSheetTitle(
+    text: String,
+    backIcon: String,
+    showButtons: Boolean,
+    onBack: (() -> Unit)?,
+    onClose: () -> Unit,
+) {
+    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
+        if (showButtons) {
+            if (onBack != null) {
+                BottomSheetHeaderButton(icon = backIcon, automationId = "btn_bottom_sheet_back", onClick = onBack)
+            } else {
+                Box(Modifier.size(24.dp))
+            }
+        }
+        Box(
+            Modifier
+                .fillMaxHeight()
+                .weight(1f)
+                .conditional(!showButtons) { padding(horizontal = Spacing.M) },
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = text,
+                color = Colors.black_17,
+                style = Typography.headerDefaultBold
+            )
+        }
+        if (showButtons) {
+            BottomSheetHeaderButton(icon = "navigation_close", automationId = "btn_bottom_sheet_close", onClick = onClose)
+        }
+    }
+}
+
+@Composable
+private fun BottomSheetHeaderButton(icon: String, automationId: String, onClick: () -> Unit) {
+    Box(
+        Modifier
+            .size(24.dp)
+            .noFeedbackClickable(onClick = onClick)
+            .setAutomationId(automationId),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(source = icon)
+    }
+}
+
+// iPhone Duo outer display: back and close sit on the part of the sheet under the side safe area,
+// 12pt from the strip's inner edge like the screen side bar. They follow the header row while the
+// sheet is short and stay below the status bar cluster while it is tall.
+@Composable
+private fun BoxScope.BottomSheetSideColumn(
+    sideBar: SideBarLayout,
+    parentHeight: Dp,
+    backIcon: String,
+    onBack: (() -> Unit)?,
+    onClose: () -> Unit,
+) {
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+    val headerColor = getHeaderColor(HeaderType.None, 1f, null, AppTheme.current.colors.text.default)
+
+    Box(Modifier.matchParentSize()) {
+        Column(
+            modifier = Modifier
+                .align(if (isRight) AbsoluteAlignment.TopRight else AbsoluteAlignment.TopLeft)
+                .width(sideBar.width - Spacing.M)
+                .layout { measurable, constraints ->
+                    val placeable = measurable.measure(constraints.copy(minHeight = 0))
+                    val sheetHeight = constraints.maxHeight
+                    // the sheet rests on the bottom of the overlay, which starts at the window top
+                    val sheetTop = parentHeight.roundToPx() - sheetHeight
+                    // clear of a camera at the bottom end of the strip when it can
+                    val lowest = sheetHeight - sideBar.bottom.roundToPx() - placeable.height
+                    val y = maxOf(sideBar.top.roundToPx() - sheetTop, SIDE_COLUMN_OFFSET.roundToPx())
+                        .coerceAtMost(lowest)
+                        .coerceAtLeast(0)
+                    layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
+                        placeable.place(0, y)
+                    }
+                }
+                .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+            horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+            verticalArrangement = Arrangement.spacedBy(Spacing.M),
+        ) {
+            if (onBack != null) {
+                SideBarButton(
+                    icon = backIcon,
+                    headerColor = headerColor,
+                    automationId = "btn_bottom_sheet_back",
+                    onClick = onBack,
+                )
+            }
+            SideBarButton(
+                icon = "navigation_close",
+                headerColor = headerColor,
+                automationId = "btn_bottom_sheet_close",
+                onClick = onClose,
+            )
+        }
+    }
+}
+
+@Composable
+private fun BottomSheetFooter(footerComponent: @Composable () -> Unit, sidePadding: PaddingValues) {
     val shadowBrush = remember {
         Brush.verticalGradient(
             colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
@@ -312,6 +460,7 @@ private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
+                .padding(sidePadding)
                 .padding(vertical = Spacing.S)
         ) {
             footerComponent()
@@ -330,7 +479,19 @@ private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
 sealed class BottomHeader {
     data class Title(
         val data: String = "Bottom Sheet Title",
-    ) : BottomHeader()
+    ) : BottomHeader() {
+        // Outside the primary constructor so code built against older kits keeps Title() and copy().
+        // onBack shows a back button: the sheet closes (onDismiss fires), then it runs.
+        var onBack: (() -> Unit)? = null
+            private set
+        var backIcon: String = "arrow-back"
+            private set
+
+        constructor(data: String, onBack: (() -> Unit)?, backIcon: String = "arrow-back") : this(data) {
+            this.onBack = onBack
+            this.backIcon = backIcon
+        }
+    }
 
     data class Custom(
         val content: @Composable () -> Unit

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

@@ -8,8 +8,9 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -26,6 +27,8 @@ 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.duoModalMaxHeight
+import vn.momo.kits.layout.duoModalMaxWidth
 import vn.momo.kits.layout.getScreenLayout
 
 @Composable
@@ -111,9 +114,14 @@ internal fun ModalScreen(
             .noFeedbackClickable {
                 if(barrierDismissible) closeEvent()
             }
-            // center below the side status bar and above the home indicator
+            // center in the safe area, clear of the side toolbar strip and the home indicator
             .conditional(layout.isIPhoneDuoDevice) {
-                padding(top = layout.duoTopInset, bottom = layout.insetBottom)
+                absolutePadding(
+                    left = layout.insetLeft,
+                    top = layout.insetTop,
+                    right = layout.insetRight,
+                    bottom = layout.insetBottom,
+                )
             },
         contentAlignment = Alignment.Center
     ) {
@@ -121,6 +129,9 @@ internal fun ModalScreen(
             modifier = Modifier
                 .scale(scale.value)
                 .alpha(alpha.value)
+                .conditional(layout.isIPhoneDuoDevice) {
+                    sizeIn(maxWidth = layout.duoModalMaxWidth, maxHeight = layout.duoModalMaxHeight)
+                }
                 .wrapContentSize()
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)

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

@@ -20,7 +20,7 @@ import androidx.navigation.toRoute
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collectLatest
 import vn.momo.kits.application.DesignSystemConfig
-import vn.momo.kits.application.KitDesignSystemConfig
+import vn.momo.kits.application.DesignSystemKits
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.LocalDesignSystemConfig
 import vn.momo.kits.application.LocalLocalize
@@ -66,7 +66,7 @@ fun NavigationContainer(
     val stackTransition = remember { StackTransitionCoordinator() }
     val theme = remember { mutableStateOf(initialTheme) }
     val resolvedDesignSystemConfig =
-        designSystemConfig ?: LocalDesignSystemConfig.current ?: KitDesignSystemConfig.config
+        designSystemConfig ?: LocalDesignSystemConfig.current ?: DesignSystemKits.getConfigs().designSystemConfig
     val headerBar = resolvedDesignSystemConfig?.headerBar
     // RN parity: the theme's own header image wins; config headerBar is only the fallback.
     val resolvedTheme = remember(theme.value, headerBar) {

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

@@ -1,9 +1,11 @@
 package vn.momo.kits.navigation
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
@@ -19,6 +21,8 @@ import kotlinx.coroutines.launch
 import kotlinx.serialization.Serializable
 import vn.momo.kits.components.PopupAction
 import vn.momo.kits.components.PopupNotify
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.BottomHeader.*
 import vn.momo.kits.navigation.component.SnackBar
 import vn.momo.maxapi.IMaxApi
@@ -113,9 +117,10 @@ class Navigator(
         }
     }
     private suspend fun dismissOverplay(isDelay: Boolean = true) {
+        val dismissing = OverplayComponentRegistry.current()
         OverplayComponentRegistry.clear()
         if (isDelay) delay(300L.milliseconds)
-        OverplayComponentRegistry.hardClearAfterDismiss()
+        OverplayComponentRegistry.hardClearAfterDismiss(dismissing)
     }
 
     private suspend fun dismissScreen() {
@@ -182,9 +187,10 @@ class Navigator(
 
     fun hideSnackBar() {
         scope.launch {
+            val dismissing = OverplayComponentRegistry.current()
             OverplayComponentRegistry.clear()
             delay(250L.milliseconds)
-            OverplayComponentRegistry.hardClearAfterDismiss()
+            OverplayComponentRegistry.hardClearAfterDismiss(dismissing)
         }
     }
 
@@ -358,42 +364,59 @@ object OverplayComponentRegistry {
         requestClose = null
     }
 
+    internal fun current(): OverplayComponent? = currentOverlayComponent.value
+
+    // An overlay shown from the dismissed one's onDismiss, before the delayed clear, stays.
+    internal fun hardClearAfterDismiss(dismissing: OverplayComponent?) {
+        if (currentOverlayComponent.value === dismissing) hardClearAfterDismiss()
+    }
+
     @Composable
     internal fun OverlayComponent(){
         val overplay = currentOverlayComponent.value ?: return
 
-        when (val params = overplay.params) {
-            is OverplayComponentParams.BottomSheet -> {
-                BottomSheet(
-                    content = overplay.content,
-                    header = params.bottomSheetHeader ?: Title(),
-                    isSurface = params.isSurface,
-                    barrierDismissible = params.barrierDismissible,
-                    draggable = params.draggable,
-                    useBottomInset = params.useBottomInset,
-                    footerComponent = params.footerComponent,
-                    onDismiss = params.onDismiss
-                )
-            }
+        // every registration is its own composition (params are new instances), as SwiftUI's `.id(item.id)`:
+        // a sheet shown from another one's close must not inherit its finished animation and effects
+        key(overplay) {
+            when (val params = overplay.params) {
+                is OverplayComponentParams.BottomSheet -> {
+                    BottomSheet(
+                        content = overplay.content,
+                        header = params.bottomSheetHeader ?: Title(),
+                        isSurface = params.isSurface,
+                        barrierDismissible = params.barrierDismissible,
+                        draggable = params.draggable,
+                        useBottomInset = params.useBottomInset,
+                        footerComponent = params.footerComponent,
+                        onDismiss = params.onDismiss
+                    )
+                }
 
-            is OverplayComponentParams.Modal -> {
-                ModalScreen(
-                    content = overplay.content,
-                    barrierDismissible = params.barrierDismissible,
-                    onDismiss = params.onDismiss
-                )
-            }
+                is OverplayComponentParams.Modal -> {
+                    ModalScreen(
+                        content = overplay.content,
+                        barrierDismissible = params.barrierDismissible,
+                        onDismiss = params.onDismiss
+                    )
+                }
 
-            is OverplayComponentParams.SnackBar -> {
-                Box(
-                    modifier = Modifier.fillMaxSize(),
-                    contentAlignment = Alignment.BottomCenter
-                ) {
-                    overplay.content()
+                is OverplayComponentParams.SnackBar -> {
+                    val layout = getScreenLayout()
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            // iPhone Duo: clear of the side toolbar strip, like the screen content
+                            .conditional(layout.isIPhoneDuo) {
+                                absolutePadding(left = layout.insetLeft, right = layout.insetRight)
+                            },
+                        contentAlignment = Alignment.BottomCenter
+                    ) {
+                        overplay.content()
+                    }
                 }
-            }
 
-            null -> {}
+                null -> {}
+            }
         }
     }
 }

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

@@ -39,8 +39,6 @@ internal val DUO_GROUP_GAP = Spacing.M
 private val DEFAULT_TOOLBAR_HEIGHT = DuoMetrics.controlSize + Spacing.M + DuoMetrics.itemPitch * 2
 // Back, then the single button the toolbar folds into
 private val COMPRESSED_TOOLBAR_HEIGHT = DuoMetrics.controlSize * 2 + Spacing.M
-// Back alone, while a rail opened from the compressed state takes the toolbar slot
-private val BACK_ONLY_HEIGHT = DuoMetrics.controlSize
 
 // Port of RN DuoBarCompression (HIG, Designing for iPhone Duo: Vertical controls):
 // - both fit: both stay whole
@@ -78,7 +76,8 @@ internal fun rememberDuoBarCompression(
                 expandTabBar = { expanded = DuoBar.TAB_BAR },
                 setToolbarHeight = setToolbarHeight,
             )
-            opened == DuoBar.TAB_BAR && fits(BACK_ONLY_HEIGHT, tabBar) -> DuoBarCompression(
+            // an opened rail always shows, even when only the group gap is short: it closes once a tab is picked
+            opened == DuoBar.TAB_BAR -> DuoBarCompression(
                 toolbarCompressed = true,
                 toolbarHidden = true,
                 expandToolbar = { opened = DuoBar.TOOLBAR },