@momo-kits/native-kits 0.167.1-duo.1-debug → 0.167.1-duo.2-debug

package/CLAUDE.md

@@ -47,6 +47,13 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
 - **iOS swipe-back:** the host owns the only edge-pan recogniser and replays it through `HostBackGestureBridge` (`navigation/HostBackGestureBridge.kt`; the kit framework is never exported, so the host reaches it through its own Koin-provided facade): `checkCanPop` / `canPopInner` / `pop` route the back into the kit stack, `started` / `progressed` / `completed` / `cancelled` seek the NavHost transition, `shouldUseFloatingArrowBack` is set by bottom tabs. `NavigationContainer` attaches itself automatically (`AttachHostBackGesture`, iOS only, detached by identity on dispose) — hosts need no wrapper and no `setNavigator`. `maxApi` is a required parameter of `NavigationContainer` — every container, nested or root, is handed its host bridge explicitly.
 
+## Screen layout / iPhone Duo (port of RN `useScreenLayout`)
+
+- `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, side safe-area insets, `contentWidth`, header geometry and the iPhone Duo `sideBar`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
+- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight`. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered.
+- iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. The column starts below the camera / status-bar cluster: 170pt portrait, 120pt in any landscape (folded too — RN still uses 170 there), below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN it is clamped 24pt above footer / tab bar, so a long toolkit (shortcut + group) never covers the footer.
+- `StackScreen` pads content/footer/search/FAB by the side insets and provides an inset-consumed layout to its content; a bottom-tab root stays full width (tab bar + each tab's StackScreen handle insets). Grid columns use `contentWidth`.
+
 ## i18n / Localize (port of RN `Localize`)
 
 - `application/Localize.kt`: everything i18n. `LocalizationObject` is a data class with required `vi` / `en` maps (`LocalizationObject(vi = mapOf(…), en = mapOf(…))`). `Localize` constructors take a `LocalizationObject` or a `(vi, en)` map pair; the constructor **merges** the kit defaults with the host data (host wins on key clash). Methods: `translate(key)` (missing/empty → returns the key), `translateData(map)` / `translateData(vi, en)`, `addTranslations` (existing keys win), `changeLanguage(lang)`. Default language `"vi"`, `"en"` only on exact match; language is snapshot state so a switch recomposes consumers.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-duo.1-debug"
+        version = "0.167.1-duo.2-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.167.1-duo.1-debug'
+    spec.version                  = '0.167.1-beta.4-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Divider.kt

@@ -18,7 +18,7 @@ import vn.momo.kits.const.Spacing
 enum class DividerType { DEFAULT, DASH }
 
 @Composable
-fun Divider(useMargin: Boolean = true, type: DividerType = DividerType.DEFAULT) {
+fun Divider(useMargin: Boolean = false, type: DividerType = DividerType.DEFAULT) {
     val color = AppTheme.current.colors.border.default
     val margin = if (useMargin) Spacing.XS else 0.dp
     if (type == DividerType.DASH) {

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

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 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.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -14,6 +15,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 import vn.momo.kits.const.AppTheme
@@ -21,30 +23,30 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 
 @Composable
-internal fun Card(
+@OptIn(ExperimentalLayoutApi::class)
+fun Card(
     useShadow: Boolean = false,
     backgroundImage: String? = null,
+    backgroundColor: Color? = null,
     contentPadding: PaddingValues = PaddingValues(Spacing.M),
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
-    val columns = 12
-    val gutter = 8.dp
+    val columns = gridColumns()
+    val gap = Spacing.S
     val shape = RoundedCornerShape(Radius.M)
-    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
-    if (useShadow) surface = surface.shadow(4.dp, shape)
-    surface = surface.clip(shape)
-    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    var surface = modifier.fillMaxWidth().padding(horizontal = Spacing.M)
+    if (useShadow) surface = surface.shadow(6.dp, shape)
+    surface = surface.clip(shape).background(backgroundColor ?: AppTheme.current.colors.background.surface)
     Box(modifier = surface) {
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
         BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
-            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/layout/Item.kt

@@ -6,33 +6,45 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import kotlin.math.floor
 
 internal data class GridContext(
     val numberOfColumns: Int = 12,
-    val gutter: Dp = 12.dp,
-    val sizePerSpan: Dp = 0.dp,
+    val gutterPx: Int = 0,
+    val columnPx: Float = 0f,
+    val density: Float = 1f,
 ) {
-    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+    fun sizeForSpan(span: Int): Dp = (floor(columnPx * span + gutterPx * (span - 1)) / density).dp
 }
 
 internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
 @Composable
-internal fun Item(
-    widthSpan: Int = 12,
+internal fun gridColumns(): Int = if (getScreenLayout().contentWidth > 600.dp) 24 else 12
+
+@Composable
+internal fun gridContext(maxWidthPx: Int, columns: Int, gap: Dp): GridContext {
+    val density = LocalDensity.current
+    val gutterPx = with(density) { gap.roundToPx() }
+    return GridContext(columns, gutterPx, (maxWidthPx - gutterPx * (columns - 1)).toFloat() / columns, density.density)
+}
+
+@Composable
+fun Item(
+    widthSpan: Int? = null,
     heightSpan: Int = 0,
     modifier: Modifier = Modifier,
+    contentModifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
     val grid = LocalGridContext.current
     var m = modifier
     if (grid != null) {
-        m = m.width(grid.sizeForSpan(widthSpan))
+        m = m.width(grid.sizeForSpan(widthSpan ?: grid.numberOfColumns))
         if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-    // A Column (not a Box) so multiple children flow VERTICALLY instead of stacking
-    // on top of each other — matches the React Item's flex-column content.
-    Column(modifier = m) { content() }
+    Column(modifier = m.then(contentModifier)) { content() }
 }

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

@@ -0,0 +1,157 @@
+package vn.momo.kits.layout
+
+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.getPlatformName
+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,
+)
+
+@Immutable
+data class ScreenLayout(
+    val width: Dp,
+    val height: Dp,
+    val isIPhoneDuo: Boolean,
+    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,
+) {
+    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
+    // Landscape: below the inner display's status cluster (ends near y 98); folded, it clears the camera
+    // (ends near y 60) and leaves the longest toolkit ~36pt above the footer.
+    val firstItemTopLandscape = 120.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 isIOS = getPlatformName() == "iOS"
+    if (parent != null) {
+        val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isIOS)
+        return parent.copy(headerHeight = headerHeight, headerStatusBarHeight = headerStatusBarHeight)
+    }
+
+    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)
+
+    return remember(size, leftPx, rightPx, topInset, density) {
+        with(density) {
+            screenLayoutOf(
+                width = size.width.toDp(),
+                height = size.height.toDp(),
+                insetLeft = leftPx.toDp(),
+                insetRight = rightPx.toDp(),
+                topInset = topInset,
+                isIOS = isIOS,
+                asymmetricInsets = leftPx != rightPx,
+            )
+        }
+    }
+}
+
+// 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)
+
+private fun headerGeometry(topInset: Dp, isIOS: Boolean): Pair<Dp, Dp> {
+    val height = topInset + HEADER_HEIGHT.dp
+    if (!isIOS) return height to topInset
+    return maxOf(height, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
+}
+
+// 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,
+    isIOS: Boolean,
+    asymmetricInsets: Boolean,
+): ScreenLayout {
+    val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isIOS)
+    val isIPhoneDuo = isIOS && isIPhoneDuoWindow(width, height, asymmetricInsets)
+
+    var sideBar: SideBarLayout? = null
+    val sideInset = maxOf(insetLeft, insetRight)
+    // narrower strips cannot host a control 12pt from the inner edge
+    if (isIPhoneDuo && sideInset >= DuoMetrics.controlSize + Spacing.M) {
+        // UIKit reports no usable status bar frame here (a 2pt top strip), so the spot is inferred like RN
+        val top = when {
+            topInset >= STATUS_BAR_MIN_INSET -> topInset + HEADER_HEIGHT.dp + Spacing.M
+            width > height -> DuoMetrics.firstItemTopLandscape
+            else -> DuoMetrics.firstItemTop
+        }
+        sideBar = SideBarLayout(
+            edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT,
+            width = sideInset,
+            top = top,
+        )
+    }
+
+    return ScreenLayout(
+        width = width,
+        height = height,
+        isIPhoneDuo = isIPhoneDuo,
+        insetLeft = insetLeft,
+        insetRight = insetRight,
+        contentWidth = width - insetLeft - insetRight,
+        headerHeight = headerHeight,
+        headerStatusBarHeight = headerStatusBarHeight,
+        sideBar = sideBar,
+    )
+}

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/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/StackScreen.kt

@@ -51,7 +51,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,6 +64,7 @@ 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.component.HeaderType
 import vn.momo.kits.navigation.component.InputSearchType
 import vn.momo.kits.platform.BackHandler
@@ -74,6 +74,9 @@ 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.consumeHorizontalInsets
+import vn.momo.kits.layout.getScreenLayout
 import kotlin.time.Clock
 import kotlin.time.Duration.Companion.milliseconds
 import kotlin.time.ExperimentalTime
@@ -101,7 +104,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) }
@@ -157,7 +160,7 @@ internal fun StackScreen(
     }
 
     val limit = with(density) {
-        (statusBar + HEADER_HEIGHT.dp).toPx()
+        screenLayout.headerHeight.toPx()
     }.toInt()
 
     val lazyListState = options.scrollData.scrollState as? LazyListState
@@ -209,11 +212,13 @@ internal fun StackScreen(
                 Header(onBackHandler)
             }
 
+            HeaderSideBar(bottomInset = bottomBarsHeight(isBottomTabChild), modifier = Modifier.zIndex(4f))
+
             Column(Modifier.zIndex(5f).horizontalSafeAreaPadding()) {
                 SearchAnimated(snapState = snapState)
             }
 
-            Column(Modifier.zIndex(2f).fillMaxSize().horizontalSafeAreaPadding()) {
+            Column(Modifier.zIndex(2f).fillMaxSize()) {
                 MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
                 FooterContent()
             }
@@ -227,22 +232,26 @@ internal fun StackScreen(
     }
 }
 
+// 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 -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
+        else -> navigationBar
+    }
+}
+
 @Suppress("FrequentlyChangingValue")
 @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,
@@ -264,11 +273,12 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
     val density = LocalDensity.current
     val scrollState = LocalScrollState.current
     val navigationBar = AppNavigationBar.current
+    val screenLayout = getScreenLayout()
 
     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
+                screenLayout.headerHeight else 0.dp
         )
     )
     if (inputSearchType == InputSearchType.Animated) {
@@ -276,10 +286,14 @@ 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
     Column(
         Modifier
             .fillMaxWidth()
             .weight(1f)
+            .conditional(!isBottomTabRoot) {
+                horizontalSafeAreaPadding()
+            }
             .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
                 verticalScroll(scrollState)
             }
@@ -292,7 +306,11 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
                 }
             )
     ) {
-        ScreenContent(content = content)
+        CompositionLocalProvider(
+            LocalScreenLayout provides if (isBottomTabRoot) screenLayout else screenLayout.consumeHorizontalInsets()
+        ) {
+            ScreenContent(content = content)
+        }
     }
 
 }
@@ -311,7 +329,7 @@ internal fun ScreenContent(content: @Composable () -> Unit) {
             Box(bannerModifier) {
                 animatedHeader.composable.invoke(scrollState.value)
             }
-            Box(Modifier.padding(top = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)) {
+            Box(Modifier.padding(top = getScreenLayout().headerHeight + animatedHeader.layoutOffSet)) {
                 content()
             }
         }
@@ -383,6 +401,7 @@ fun Footer(
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
+                .horizontalSafeAreaPadding()
                 .padding(
                     top = if (useMargin) Spacing.S else 0.dp,
                     start = if (useMargin) Spacing.M else 0.dp,
@@ -430,17 +449,24 @@ 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
     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 = if (options.hiddenBack || useSideBar) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
     val minEndPadding = Spacing.M
-    val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
+    val maxEndPadding = 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")
 

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

@@ -26,7 +26,8 @@ import vn.momo.kits.const.*
 import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
-import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.utils.horizontalSafeAreaPadding
 
 internal val floatingButtonWidth = 75.dp
 @InternalApi
@@ -42,16 +43,17 @@ internal fun BottomTabBar(
     val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
     val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
 
-    val screenWidth = getScreenDimensions().width.dp
+    val layout = getScreenLayout()
     val mid = items.size / 2
 
     val tabWidth = if (floatingButton != null) {
-        (screenWidth - floatingButtonWidth) / items.size
+        (layout.contentWidth - floatingButtonWidth) / items.size
     } else {
-        screenWidth / items.size
+        layout.contentWidth / items.size
     }
     val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
-    val targetOffset = tabWidth * selectedIndex + tabWidth / 2 - screenWidth / 2 + adjustSize
+    // offsets are from the bar center; tabs live between the side safe areas
+    val targetOffset = layout.insetLeft + tabWidth * selectedIndex + tabWidth / 2 - layout.width / 2 + adjustSize
 
     val indicatorOffsetX by animateDpAsState(
         targetValue = targetOffset,
@@ -69,7 +71,8 @@ internal fun BottomTabBar(
                 .background(AppTheme.current.colors.background.surface)
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
-                },
+                }
+                .horizontalSafeAreaPadding(),
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
             if (floatingButton == null) {
@@ -101,7 +104,11 @@ internal fun BottomTabBar(
                 )
             )
         )
-        floatingButton?.let { FloatingButton(it) }
+        floatingButton?.let {
+            Box(Modifier.offset(x = (layout.insetLeft - layout.insetRight) / 2)) {
+                FloatingButton(it)
+            }
+        }
     }
 }