@momo-kits/native-kits 0.167.1-sizescale.2-debug → 0.168.1-beta.1-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/ScreenLayout.kt

@@ -0,0 +1,309 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.platform.LocalWindowInfo
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.platform.ReservedRegion
+import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.platform.isPhoneIdiom
+import vn.momo.kits.platform.rememberReservedRegions
+import vn.momo.kits.utils.getAppStatusBarHeight
+import vn.momo.kits.utils.horizontalSafeAreaInsets
+
+enum class SideBarEdge { LEFT, RIGHT }
+
+@Immutable
+data class SideBarLayout(
+    val edge: SideBarEdge,
+    val width: Dp,
+    // Preferred window y of the first control; the column is still kept above footer and bottom bars.
+    val top: Dp,
+    // Room kept free above the window bottom, clear of a camera at the bottom end of the strip.
+    val bottom: Dp,
+)
+
+// Room the header row keeps from each side for the status bar clock and battery clusters.
+@Immutable
+data class StatusBarClearance(val left: Dp, val right: Dp)
+
+@Immutable
+data class ScreenLayout(
+    val width: Dp,
+    val height: Dp,
+    val isIPhoneDuo: Boolean,
+    // Raw top / bottom safe area; overlays and the Duo floating tab bar keep clear of them.
+    val insetTop: Dp,
+    val insetBottom: Dp,
+    val insetLeft: Dp,
+    val insetRight: Dp,
+    val contentWidth: Dp,
+    val headerHeight: Dp,
+    // 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
+    val headerStatusBarHeight: Dp,
+    // iPhone Duo moves back and toolkit into a column in the side safe area; null while they stay in the bar.
+    val sideBar: SideBarLayout? = null,
+    // Port of RN `device.ts` isIPhoneDuo: the screen stays on the outer display, so Split View still matches.
+    val isIPhoneDuoDevice: Boolean = isIPhoneDuo,
+    // Portrait iPhone Duo puts the status bar in the side strip, about twice as tall as the strip is wide.
+    // Stored so it survives consumeHorizontalInsets().
+    val duoTopInset: Dp = insetTop,
+    // iPhone Duo inner display in portrait: the header row shares the status bar band, between its clusters.
+    val statusBarClearance: StatusBarClearance? = null,
+) {
+    val headerBarHeight: Dp get() = headerHeight - headerStatusBarHeight
+}
+
+// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
+internal object DuoMetrics {
+    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
+    const val MAX_ASPECT_RATIO = 1.6f
+    val controlSize = 48.dp
+    val itemPitch = 50.dp
+    // Portrait: below the camera/clock cluster in the strip (ends near y 151).
+    val firstItemTop = 170.dp
+    // Inner display in landscape: below its status cluster (ends near y 98).
+    val firstItemTopLandscape = 120.dp
+    // Window height from which the inner display is in use (outer is 466pt tall in landscape, inner 669pt).
+    val innerMinHeight = 600.dp
+    // Outer display in portrait: the header is 4pt taller than the iPhone floor and its title
+    // lines up with the camera punchout (y 24–66 at the top of the strip).
+    val outerHeaderHeight = 76.dp
+    val outerCameraCenterY = 45.dp
+    // Outer display in landscape has no status bar in the strip: controls keep this far from
+    // both ends unless a reserved region (the camera at either end) asks for more.
+    val edgeInset = 24.dp
+    // Inner display in portrait: the clock and connectivity cluster sits at the top right corner
+    // (x 550–643 of 669, clock digits centered on y 47); its reserved region is taller than the glyphs.
+    val innerStatusBarCenterY = 47.dp
+    val innerStatusBarWidth = 120.dp
+}
+
+// Widest short side of any single-display iPhone.
+private val IPHONE_MAX_SHORT_SIDE = 440.dp
+
+private val IPHONE_HEADER_MIN_HEIGHT = 72.dp
+
+// A smaller top inset means the status bar is not on the top edge.
+private val STATUS_BAR_MIN_INSET = 20.dp
+
+internal val LocalScreenLayout = compositionLocalOf<ScreenLayout?> { null }
+
+// Port of RN `useScreenLayout`; follows fold/unfold and rotation through the window size and safe area.
+@Composable
+fun getScreenLayout(): ScreenLayout =
+    LocalScreenLayout.current ?: calculateScreenLayout(getAppStatusBarHeight())
+
+@Composable
+internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null): ScreenLayout {
+    val isPhone = isPhoneIdiom()
+    if (parent != null) {
+        // the parent's row center reproduces its own centered geometry
+        val titleCenterY = parent.headerStatusBarHeight + parent.headerBarHeight / 2
+        val statusBarClearance = parent.statusBarClearance?.takeIf { topInset >= STATUS_BAR_MIN_INSET }
+        val (headerHeight, headerStatusBarHeight) = if (statusBarClearance != null) {
+            statusBarRowGeometry()
+        } else {
+            headerGeometry(topInset, isPhone, parent.width, parent.height, parent.sideBar != null, titleCenterY)
+        }
+        return parent.copy(
+            headerHeight = headerHeight,
+            headerStatusBarHeight = headerStatusBarHeight,
+            statusBarClearance = statusBarClearance,
+        )
+    }
+
+    val density = LocalDensity.current
+    val layoutDirection = LocalLayoutDirection.current
+    val size = LocalWindowInfo.current.containerSize
+    val insets = horizontalSafeAreaInsets
+    val leftPx = insets.getLeft(density, layoutDirection)
+    val rightPx = insets.getRight(density, layoutDirection)
+    val bottomPx = WindowInsets.systemBars.getBottom(density)
+    val screen = getScreenDimensions()
+    val reservedRegions = rememberReservedRegions()
+
+    return remember(size, leftPx, rightPx, bottomPx, topInset, screen, density, reservedRegions) {
+        with(density) {
+            val width = size.width.toDp()
+            val height = size.height.toDp()
+            screenLayoutOf(
+                width = width,
+                height = height,
+                insetLeft = leftPx.toDp(),
+                insetRight = rightPx.toDp(),
+                topInset = topInset,
+                bottomInset = bottomPx.toDp(),
+                isPhone = isPhone,
+                asymmetricInsets = leftPx != rightPx,
+                isDuoDevice = isPhone && maxOf(
+                    minOf(screen.width, screen.height).dp,
+                    minOf(width, height),
+                ) > IPHONE_MAX_SHORT_SIDE,
+                reservedRegions = reservedRegions,
+            )
+        }
+    }
+}
+
+// Content inside the safe-area padding: the insets are spent and the side bar belongs to the screen.
+internal fun ScreenLayout.consumeHorizontalInsets(): ScreenLayout =
+    copy(width = contentWidth, insetLeft = 0.dp, insetRight = 0.dp, sideBar = null)
+
+// titleCenterY: window y the title row centers on for the outer display in landscape.
+private fun headerGeometry(
+    topInset: Dp,
+    isPhone: Boolean,
+    width: Dp,
+    height: Dp,
+    hasSideBar: Boolean,
+    titleCenterY: Dp,
+): Pair<Dp, Dp> {
+    val headerHeight = topInset + HEADER_HEIGHT.dp
+    if (!isPhone) return headerHeight to topInset
+    if (hasSideBar && topInset < STATUS_BAR_MIN_INSET) {
+        if (height > width && width < DuoMetrics.innerMinHeight) {
+            // outer display: the row starts below the top so the title centers on the camera
+            return DuoMetrics.outerHeaderHeight to DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight
+        }
+        if (width > height && height < DuoMetrics.innerMinHeight) {
+            // reaches 8pt below a side bar control centered on the row
+            val centered = maxOf(IPHONE_HEADER_MIN_HEIGHT, titleCenterY + DuoMetrics.controlSize / 2 + Spacing.S)
+            return centered to maxOf(0.dp, titleCenterY * 2 - centered)
+        }
+    }
+    return maxOf(headerHeight, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
+}
+
+// Centered on the clock digits; the cluster's region center sits above them.
+private fun statusBarRowGeometry(): Pair<Dp, Dp> = DuoMetrics.innerStatusBarCenterY * 2 to 0.dp
+
+private data class StripOcclusion(val top: Dp, val topCenter: Dp, val bottom: Dp)
+
+// How far system regions reach into a side strip from its top and from its bottom end
+// (e.g. the camera, which sits at either end depending on the rotation), and the center y
+// of the region reaching furthest from the top.
+private fun stripOcclusion(regions: List<ReservedRegion>, stripLeft: Dp, stripRight: Dp, windowHeight: Dp): StripOcclusion {
+    var top = 0.dp
+    var topCenter = 0.dp
+    var bottom = 0.dp
+    regions.forEach { region ->
+        if (region.x >= stripRight || region.x + region.width <= stripLeft) return@forEach
+        val centerY = region.y + region.height / 2
+        if (centerY < windowHeight / 2) {
+            if (region.y + region.height > top) {
+                top = region.y + region.height
+                topCenter = centerY
+            }
+        } else {
+            bottom = maxOf(bottom, windowHeight - region.y)
+        }
+    }
+    return StripOcclusion(top, topCenter, bottom)
+}
+
+// How far the clock and battery clusters of a status bar on the top edge reach in from each side;
+// null without reserved regions there.
+private fun statusBarClusters(regions: List<ReservedRegion>, windowWidth: Dp, topInset: Dp): StatusBarClearance? {
+    val midX = windowWidth / 2
+    val clusters = regions.filter {
+        it.y < topInset && it.y + it.height <= topInset && (it.x + it.width <= midX || it.x >= midX)
+    }
+    if (clusters.isEmpty()) return null
+    var left = 0.dp
+    var right = 0.dp
+    clusters.forEach {
+        if (it.x < midX) left = maxOf(left, it.x + it.width) else right = maxOf(right, windowWidth - it.x)
+    }
+    return StatusBarClearance(left, right)
+}
+
+// Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
+private fun isIPhoneDuoWindow(width: Dp, height: Dp, asymmetricInsets: Boolean): Boolean {
+    val shortSide = minOf(width, height)
+    if (shortSide <= 0.dp) return asymmetricInsets
+    return maxOf(width, height) / shortSide < DuoMetrics.MAX_ASPECT_RATIO || asymmetricInsets
+}
+
+private fun screenLayoutOf(
+    width: Dp,
+    height: Dp,
+    insetLeft: Dp,
+    insetRight: Dp,
+    topInset: Dp,
+    bottomInset: Dp,
+    isPhone: Boolean,
+    asymmetricInsets: Boolean,
+    isDuoDevice: Boolean,
+    reservedRegions: List<ReservedRegion>,
+): ScreenLayout {
+    val isIPhoneDuo = isPhone && isIPhoneDuoWindow(width, height, asymmetricInsets)
+    val isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight
+    val statusBarClearance = if (isIPhoneDuo && isInnerPortrait && topInset >= STATUS_BAR_MIN_INSET) {
+        statusBarClusters(reservedRegions, width, topInset)
+            ?: StatusBarClearance(left = 0.dp, right = DuoMetrics.innerStatusBarWidth + Spacing.S)
+    } else {
+        null
+    }
+
+    var sideBar: SideBarLayout? = null
+    var titleCenterY = 0.dp
+    val sideInset = maxOf(insetLeft, insetRight)
+    // narrower strips cannot host a control 12pt from the inner edge
+    if (isIPhoneDuo && sideInset >= DuoMetrics.controlSize + Spacing.M) {
+        val edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT
+        val stripLeft = if (edge == SideBarEdge.RIGHT) width - sideInset else 0.dp
+        // clear of the camera and of the status bar cluster, which grows for calls and Live
+        // Activities; region frames already include the system's margin
+        val occlusion = stripOcclusion(reservedRegions, stripLeft, stripLeft + sideInset, height)
+        // UIKit reports no usable status bar frame here (a 2pt top strip), so the spot is inferred like RN
+        val top = when {
+            statusBarClearance != null -> statusBarRowGeometry().first + Spacing.M
+            topInset >= STATUS_BAR_MIN_INSET -> topInset + HEADER_HEIGHT.dp + Spacing.M
+            width <= height -> DuoMetrics.firstItemTop
+            height >= DuoMetrics.innerMinHeight -> DuoMetrics.firstItemTopLandscape
+            // outer display in landscape: no status bar in the strip
+            else -> DuoMetrics.edgeInset
+        }
+        // outer display in landscape: the title row centers on the camera when it sits at the
+        // top end, otherwise on the back button
+        titleCenterY = if (occlusion.top > top) occlusion.topCenter else top + DuoMetrics.controlSize / 2
+        sideBar = SideBarLayout(
+            edge = edge,
+            width = sideInset,
+            top = maxOf(top, occlusion.top),
+            bottom = maxOf(DuoMetrics.edgeInset, occlusion.bottom),
+        )
+    }
+    val (headerHeight, headerStatusBarHeight) = if (statusBarClearance != null) {
+        statusBarRowGeometry()
+    } else {
+        headerGeometry(topInset, isPhone, width, height, sideBar != null, titleCenterY)
+    }
+
+    return ScreenLayout(
+        width = width,
+        height = height,
+        isIPhoneDuo = isIPhoneDuo,
+        insetTop = topInset,
+        insetBottom = bottomInset,
+        insetLeft = insetLeft,
+        insetRight = insetRight,
+        contentWidth = width - insetLeft - insetRight,
+        headerHeight = headerHeight,
+        headerStatusBarHeight = headerStatusBarHeight,
+        sideBar = sideBar,
+        isIPhoneDuoDevice = isDuoDevice,
+        duoTopInset = maxOf(topInset, if (height > width) sideInset * 2 else 0.dp),
+        statusBarClearance = statusBarClearance,
+    )
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -3,6 +3,7 @@ package vn.momo.kits.layout
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -11,27 +12,28 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
+import vn.momo.kits.const.Spacing
 
 @Composable
-internal fun Section(
+@OptIn(ExperimentalLayoutApi::class)
+fun Section(
     useMargin: Boolean = true,
     backgroundImage: String? = null,
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
-    val columns = 12
-    val gutter = 12.dp
-    val margin = if (useMargin) 12.dp else 0.dp
-    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+    val columns = gridColumns()
+    val gap = Spacing.M
+    val margin = if (useMargin) Spacing.M else 0.dp
+    Box(modifier = Modifier.fillMaxWidth().padding(horizontal = margin).then(modifier)) {
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
         BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
-            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
-            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+            CompositionLocalProvider(LocalGridContext provides gridContext(constraints.maxWidth, columns, gap)) {
                 FlowRow(
-                    horizontalArrangement = Arrangement.spacedBy(gutter),
-                    verticalArrangement = Arrangement.spacedBy(gutter),
+                    horizontalArrangement = Arrangement.spacedBy(gap),
+                    verticalArrangement = Arrangement.spacedBy(gap),
                 ) { content() }
             }
         }

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

@@ -30,10 +30,11 @@ import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
-import vn.momo.kits.const.ProvideKitScale
 import vn.momo.kits.const.defaultTheme
-import vn.momo.kits.const.pendingSizeScale
+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
 import vn.momo.kits.utils.getNavigationBarHeight
 import vn.momo.maxapi.IMaxApi
@@ -55,10 +56,9 @@ fun NavigationContainer(
     val navController = rememberNavController()
     val registry = remember { DynamicScreenRegistry() }
     val navigator = remember { Navigator(navController = navController, maxApi = maxApi, registry = registry) }
-    // Insets are measured in real units; convert to the dp of the size-scaled container.
-    val sizeScale = pendingSizeScale()
-    val statusBarHeight = (statusBarHeight ?: getAppStatusBarHeight()) / sizeScale
-    val navigationBarHeight = getNavigationBarHeight() / sizeScale
+    val statusBarHeight = statusBarHeight ?: getAppStatusBarHeight()
+    val navigationBarHeight = getNavigationBarHeight()
+    val screenLayout = calculateScreenLayout(statusBarHeight, parent = LocalScreenLayout.current)
 
     val parentContext = LocalContext.current
     val mergedContext = MiniAppContext.merge(parentContext, miniAppContext)
@@ -95,7 +95,7 @@ fun NavigationContainer(
     registry.bind(screenId, initialScreenName, initialScreen, options)
     val startDestination = remember(screenId) { DynamicScreenRoute(screenId) }
 
-    ProvideKitScale {
+    ProvideOsFontScale {
         ProvideNavigationEventDispatcherOwner(navigator) {
             CompositionLocalProvider(
                 LocalNavigator provides navigator,
@@ -104,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