@momo-kits/native-kits 0.167.1-duo.7-debug → 0.167.1-duo.8-debug

package/CLAUDE.md

@@ -65,10 +65,13 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 - `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, raw top/bottom + side insets, `contentWidth`, header geometry, the iPhone Duo `sideBar` and `duoTopInset`. `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.
 - iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (short side of screen or window > 440, RN `device.ts`) drives popups, modal and bottom sheet.
-- 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 at 120pt when the inner display is landscape (height ≥ 600), else 170pt, or 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 / rail.
-- Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (anchored 24pt from the bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
-- Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient scrolls away / collapses.
+- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display in portrait, where the header is 76pt and the row starts at 14pt so the title centers on the camera punchout.
+- 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. `sideBar.top` is 170pt in portrait, 120pt on the inner display in landscape (height ≥ 600), 24pt on the outer display in landscape, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN the column is clamped above footer (24pt gap) / rail (12pt gap).
+- Reserved regions (iOS 27.1 `reservedRegionsOfKind:`, reached through the ObjC runtime so older SDKs still build): a probe `UIView` (`platform/ReservedRegions.ios.kt` on the Compose root view; `ReservedRegionsProbe` inside SwiftUI `momoScreenLayout()`) re-reads them in `layoutSubviews`, which UIKit re-runs when they change. They push `sideBar.top` below the status cluster as it grows for calls / Live Activities, and `sideBar.bottom` (≥ 24pt) above a camera at the bottom end of the strip.
+- Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (`sideBar.bottom` above the window bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
+- Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height so the decision follows each screen's toolkit.
+- Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient leaves with the content.
+- Quick return header: glass headers and Animated headers (with a `ScrollState`) on the Duo side bar layout slide out with the content and back in on a reverse scroll; a half-shown header settles in or out once the scroll stops. The side bar is drawn apart from the header, so it stays put.
 - Overlays on Duo: popups cap at 440pt wide and the room between `duoTopInset` and the bottom inset (body scrolls, actions stay); modal centers inside that room; bottom sheet uses the window height, centers at width ≥ 600 and pads by side insets in landscape.
 - Font scale deliberately uses the short side (`min(w, h)`), unlike RN which reads the window width — landscape must not inflate every font.
 - `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`.

package/compose/build.gradle.kts

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

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/ReservedRegions.android.kt

@@ -0,0 +1,6 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+@Composable
+internal actual fun rememberReservedRegions(): List<ReservedRegion> = emptyList()

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

@@ -13,8 +13,10 @@ 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
 
@@ -26,6 +28,8 @@ data class SideBarLayout(
     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,
 )
 
 @Immutable
@@ -65,6 +69,13 @@ internal object DuoMetrics {
     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
 }
 
 // Widest short side of any single-display iPhone.
@@ -86,7 +97,8 @@ fun getScreenLayout(): ScreenLayout =
 internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null): ScreenLayout {
     val isPhone = isPhoneIdiom()
     if (parent != null) {
-        val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isPhone)
+        val (headerHeight, headerStatusBarHeight) =
+            headerGeometry(topInset, isPhone, parent.width, parent.height, parent.sideBar != null)
         return parent.copy(headerHeight = headerHeight, headerStatusBarHeight = headerStatusBarHeight)
     }
 
@@ -98,8 +110,9 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
     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) {
+    return remember(size, leftPx, rightPx, bottomPx, topInset, screen, density, reservedRegions) {
         with(density) {
             val width = size.width.toDp()
             val height = size.height.toDp()
@@ -116,6 +129,7 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
                     minOf(screen.width, screen.height).dp,
                     minOf(width, height),
                 ) > IPHONE_MAX_SHORT_SIDE,
+                reservedRegions = reservedRegions,
             )
         }
     }
@@ -125,10 +139,32 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
 internal fun ScreenLayout.consumeHorizontalInsets(): ScreenLayout =
     copy(width = contentWidth, insetLeft = 0.dp, insetRight = 0.dp, sideBar = null)
 
-private fun headerGeometry(topInset: Dp, isPhone: Boolean): Pair<Dp, Dp> {
-    val height = topInset + HEADER_HEIGHT.dp
-    if (!isPhone) return height to topInset
-    return maxOf(height, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
+private fun headerGeometry(topInset: Dp, isPhone: Boolean, width: Dp, height: Dp, hasSideBar: Boolean): Pair<Dp, Dp> {
+    val headerHeight = topInset + HEADER_HEIGHT.dp
+    if (!isPhone) return headerHeight to topInset
+    if (hasSideBar && topInset < STATUS_BAR_MIN_INSET && 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
+    }
+    return maxOf(headerHeight, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
+}
+
+private data class StripOcclusion(val top: 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).
+private fun stripOcclusion(regions: List<ReservedRegion>, stripLeft: Dp, stripRight: Dp, windowHeight: Dp): StripOcclusion {
+    var top = 0.dp
+    var bottom = 0.dp
+    regions.forEach { region ->
+        if (region.x >= stripRight || region.x + region.width <= stripLeft) return@forEach
+        if (region.y + region.height / 2 < windowHeight / 2) {
+            top = maxOf(top, region.y + region.height)
+        } else {
+            bottom = maxOf(bottom, windowHeight - region.y)
+        }
+    }
+    return StripOcclusion(top, bottom)
 }
 
 // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
@@ -148,8 +184,8 @@ private fun screenLayoutOf(
     isPhone: Boolean,
     asymmetricInsets: Boolean,
     isDuoDevice: Boolean,
+    reservedRegions: List<ReservedRegion>,
 ): ScreenLayout {
-    val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isPhone)
     val isIPhoneDuo = isPhone && isIPhoneDuoWindow(width, height, asymmetricInsets)
 
     var sideBar: SideBarLayout? = null
@@ -159,15 +195,24 @@ private fun screenLayoutOf(
         // 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 && height >= DuoMetrics.innerMinHeight -> DuoMetrics.firstItemTopLandscape
-            else -> DuoMetrics.firstItemTop
+            width <= height -> DuoMetrics.firstItemTop
+            height >= DuoMetrics.innerMinHeight -> DuoMetrics.firstItemTopLandscape
+            // outer display in landscape: no status bar in the strip
+            else -> DuoMetrics.edgeInset
         }
+        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)
         sideBar = SideBarLayout(
-            edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT,
+            edge = edge,
             width = sideInset,
-            top = top,
+            top = maxOf(top, occlusion.top),
+            bottom = maxOf(DuoMetrics.edgeInset, occlusion.bottom),
         )
     }
+    val (headerHeight, headerStatusBarHeight) = headerGeometry(topInset, isPhone, width, height, sideBar != null)
 
     return ScreenLayout(
         width = width,

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
@@ -65,7 +69,7 @@ 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.LocalDuoRailHeight
+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
@@ -180,6 +184,11 @@ 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) }
@@ -219,12 +228,15 @@ internal fun StackScreen(
                 HeaderBackground()
             }
 
-            Box(Modifier.zIndex(4f)) {
+            Box(Modifier.zIndex(4f).graphicsLayer { translationY = -headerHide.value }) {
                 Header(onBackHandler)
             }
 
             HeaderSideBar(
-                bottomInset = maxOf(bottomBarsHeight(isBottomTabChild), if (isBottomTabChild) LocalDuoRailHeight.current else 0.dp),
+                bottomInset = maxOf(
+                    bottomBarsHeight(isBottomTabChild) + Spacing.XL,
+                    if (isBottomTabChild) LocalDuoRailReserve.current else 0.dp,
+                ),
                 modifier = Modifier.zIndex(4f),
             )
 
@@ -636,6 +648,46 @@ 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 &&

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

@@ -45,7 +45,10 @@ internal fun getBottomTabOption(index: Int): NavigationOptions? {
 @Composable
 fun BottomTab(
     items: List<BottomTabItem>,
-    floatingButton: BottomTabFloatingButton? = null
+    floatingButton: BottomTabFloatingButton? = null,
+    // iPhone Duo: when the side bar can't hold both bars, which one starts compressed;
+    // tapping the compressed one swaps them
+    compressionBehavior: DuoBarCompressionBehavior = DuoBarCompressionBehavior.TOOLBAR,
 ) {
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
@@ -81,9 +84,11 @@ fun BottomTab(
     }
 
     val layout = getScreenLayout()
-    val railHeight = if (layout.isIPhoneDuo && layout.sideBar != null) {
-        duoRailHeight(items.size, hasQr = floatingButton != null)
-    } else 0.dp
+    val hasQr = floatingButton != null
+    val compression = rememberDuoBarCompression(compressionBehavior, items.size, hasQr, layout)
+    val railReserve = layout.sideBar?.takeIf { layout.isIPhoneDuo }?.let {
+        it.bottom + duoRailHeight(items.size, hasQr, compressed = compression.tabBarCompressed) + DUO_GROUP_GAP
+    } ?: 0.dp
     val onTabSelected: (Int) -> Unit = {
         val targetRoute = "option$it"
         if (currentRoute != targetRoute) {
@@ -95,7 +100,10 @@ fun BottomTab(
         Box(modifier = Modifier
             .fillMaxSize()
         ) {
-            CompositionLocalProvider(LocalDuoRailHeight provides railHeight) {
+            CompositionLocalProvider(
+                LocalDuoRailReserve provides railReserve,
+                LocalDuoBarCompression provides compression,
+            ) {
                 NavHost(
                     navController = navController,
                     startDestination = "option0"
@@ -161,6 +169,7 @@ fun BottomTab(
                 floatingButton = floatingButton,
                 selectedIndex = items.indices.firstOrNull { "option$it" == currentRoute } ?: 0,
                 onTabSelected = onTabSelected,
+                compression = compression,
             )
         } else {
             Column {

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

@@ -0,0 +1,98 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.unit.Dp
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+
+// iPhone Duo: which side bar bar starts compressed when the strip cannot hold both whole.
+enum class DuoBarCompressionBehavior { TOOLBAR, TAB_BAR }
+
+private enum class DuoBar { TOOLBAR, TAB_BAR }
+
+@Stable
+internal class DuoBarCompression(
+    val toolbarCompressed: Boolean = false,
+    val tabBarCompressed: Boolean = false,
+    // the open rail needs the toolbar button slot too: only Back stays
+    val toolbarHidden: Boolean = false,
+    val expandToolbar: () -> Unit = {},
+    val expandTabBar: () -> Unit = {},
+    // a rail opened from the compressed state closes once a tab is picked
+    val onTabSelected: () -> Unit = {},
+    // side bar columns report their full height so the tab bar knows what is left
+    val setToolbarHeight: (Dp) -> Unit = {},
+)
+
+internal val LocalDuoBarCompression = compositionLocalOf { DuoBarCompression() }
+
+// space kept between the top and the bottom groups (HIG Vertical controls)
+internal val DUO_GROUP_GAP = Spacing.M
+// Back, then the right toolkit: help + home capsule
+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
+// - one fits whole beside the other compressed: one is compressed, tapping it swaps them
+// - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+//   again once a tab is picked)
+@Composable
+internal fun rememberDuoBarCompression(
+    behavior: DuoBarCompressionBehavior,
+    tabCount: Int,
+    hasQr: Boolean,
+    layout: ScreenLayout,
+): DuoBarCompression {
+    var toolbarHeight by remember { mutableStateOf(DEFAULT_TOOLBAR_HEIGHT) }
+    var expanded by remember(behavior) {
+        mutableStateOf(if (behavior == DuoBarCompressionBehavior.TOOLBAR) DuoBar.TAB_BAR else DuoBar.TOOLBAR)
+    }
+    var opened by remember { mutableStateOf<DuoBar?>(null) }
+    val setToolbarHeight = remember { { height: Dp -> toolbarHeight = height } }
+    val sideBar = layout.sideBar
+
+    return remember(sideBar, layout.height, tabCount, hasQr, toolbarHeight, expanded, opened) {
+        if (sideBar == null) return@remember DuoBarCompression()
+        val room = layout.height - sideBar.bottom - sideBar.top - DUO_GROUP_GAP
+        val tabBar = duoRailHeight(tabCount, hasQr)
+        val compressedTabBar = duoRailHeight(1, hasQr, compressed = true)
+        fun fits(toolbar: Dp, tabs: Dp) = toolbar + tabs <= room
+
+        when {
+            fits(toolbarHeight, tabBar) -> DuoBarCompression(setToolbarHeight = setToolbarHeight)
+            fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) && fits(toolbarHeight, compressedTabBar) -> DuoBarCompression(
+                toolbarCompressed = expanded == DuoBar.TAB_BAR,
+                tabBarCompressed = expanded == DuoBar.TOOLBAR,
+                expandToolbar = { expanded = DuoBar.TOOLBAR },
+                expandTabBar = { expanded = DuoBar.TAB_BAR },
+                setToolbarHeight = setToolbarHeight,
+            )
+            opened == DuoBar.TAB_BAR && fits(BACK_ONLY_HEIGHT, tabBar) -> DuoBarCompression(
+                toolbarCompressed = true,
+                toolbarHidden = true,
+                expandToolbar = { opened = DuoBar.TOOLBAR },
+                expandTabBar = { opened = DuoBar.TAB_BAR },
+                onTabSelected = { opened = null },
+                setToolbarHeight = setToolbarHeight,
+            )
+            else -> DuoBarCompression(
+                toolbarCompressed = opened != DuoBar.TOOLBAR,
+                tabBarCompressed = true,
+                expandToolbar = { opened = DuoBar.TOOLBAR },
+                expandTabBar = { opened = DuoBar.TAB_BAR },
+                setToolbarHeight = setToolbarHeight,
+            )
+        }
+    }
+}

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

@@ -55,7 +55,7 @@ private val ITEM_SIZE = DuoMetrics.controlSize
 private val ICON_SIZE = 28.dp
 private val QR_ICON_SIZE = 24.dp
 private val RAIL_PADDING = 6.dp
-private val RAIL_GAP = Spacing.XS
+private val RAIL_GAP = Spacing.XXS
 // selection bubble overflows the 48 rail cell by 5 above and below
 private val RAIL_BUBBLE_WIDTH = 44.dp
 private val RAIL_BUBBLE_HEIGHT = 58.dp
@@ -68,12 +68,15 @@ private const val GRID_SPAN = 6
 // RN reanimated spring { damping: 18, stiffness: 220, mass: 0.8 }
 private val BUBBLE_SPRING = spring<Dp>(dampingRatio = 0.68f, stiffness = 275f, visibilityThreshold = Dp(0.5f))
 
-// Space from the window bottom the rail stack takes, so the header side bar stays above it.
-internal val LocalDuoRailHeight = compositionLocalOf { 0.dp }
+// Space from the window bottom the rail stack and its gap take, so the header side bar stays above it.
+internal val LocalDuoRailReserve = compositionLocalOf { 0.dp }
 
-internal fun duoRailHeight(itemCount: Int, hasQr: Boolean): Dp =
-    Spacing.XL + RAIL_PADDING * 2 + ITEM_SIZE * itemCount + RAIL_GAP * (itemCount - 1).coerceAtLeast(0) +
-        if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
+// Rail plus the QR button under it; compressed, the rail is a single button.
+internal fun duoRailHeight(itemCount: Int, hasQr: Boolean, compressed: Boolean = false): Dp {
+    val rail = if (compressed) ITEM_SIZE
+    else RAIL_PADDING * 2 + ITEM_SIZE * itemCount + RAIL_GAP * (itemCount - 1).coerceAtLeast(0)
+    return rail + if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
+}
 
 // Space tab content leaves under the floating bar; 0 when the rail sits in the side strip or off Duo.
 internal fun duoFloatingTabBarInset(layout: ScreenLayout): Dp =
@@ -87,14 +90,18 @@ internal fun BoxScope.DuoTabBar(
     floatingButton: BottomTabFloatingButton?,
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
+    compression: DuoBarCompression = DuoBarCompression(),
 ) {
     if (layout.sideBar != null) {
-        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected)
+        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, compression)
     } else {
         DuoFloatingTabBar(layout, items, floatingButton, selectedIndex, onTabSelected)
     }
 }
 
+// Vertical bar anchored to the bottom of the side bar, QR button below it (Figma MT1-C/E). When the
+// side bar is short it can shrink to one button showing the current tab (HIG "Tab bar compressed");
+// tapping it expands the rail and compresses the toolbar.
 @Composable
 private fun BoxScope.DuoRailTabBar(
     layout: ScreenLayout,
@@ -102,53 +109,36 @@ private fun BoxScope.DuoRailTabBar(
     floatingButton: BottomTabFloatingButton?,
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
+    compression: DuoBarCompression,
 ) {
     val sideBar = layout.sideBar ?: return
     val isRight = sideBar.edge == SideBarEdge.RIGHT
-    val bubbleOffset by animateDpAsState(
-        targetValue = (ITEM_SIZE + RAIL_GAP) * selectedIndex.coerceAtLeast(0),
-        animationSpec = BUBBLE_SPRING,
-        label = "DuoRailBubble",
-    )
 
     Column(
         modifier = Modifier
             .align(if (isRight) AbsoluteAlignment.BottomRight else AbsoluteAlignment.BottomLeft)
             .width(sideBar.width)
-            .padding(bottom = Spacing.XL)
+            .padding(bottom = sideBar.bottom)
             .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),
     ) {
-        Box(
-            Modifier
-                .width(ITEM_SIZE)
-                .tabBarMaterial(RoundedCornerShape(Radius.XL))
-                .setAutomationId("bottom_tab_bar")
-        ) {
+        val current = items.getOrNull(selectedIndex)
+        if (compression.tabBarCompressed && current != null) {
             Box(
-                Modifier
-                    .offset(
-                        x = (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
-                        y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
-                    )
-                    .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
-                    .background(AppTheme.current.colors.background.selected, CircleShape)
-            )
-            Column(
-                modifier = Modifier.padding(vertical = RAIL_PADDING),
-                verticalArrangement = Arrangement.spacedBy(RAIL_GAP),
+                modifier = Modifier
+                    .size(ITEM_SIZE)
+                    .tabBarMaterial(CircleShape)
+                    .noFeedbackClickable(onClick = compression.expandTabBar)
+                    .setAutomationId("bottom_tab_bar"),
+                contentAlignment = Alignment.Center,
             ) {
-                items.forEachIndexed { index, item ->
-                    Box(
-                        modifier = Modifier
-                            .size(ITEM_SIZE)
-                            .noFeedbackClickable { onTabSelected(index) },
-                        contentAlignment = Alignment.Center,
-                    ) {
-                        DuoTabIcon(item, selected = index == selectedIndex)
-                    }
-                }
+                DuoTabIcon(current, selected = true)
+            }
+        } else {
+            Rail(items, selectedIndex) {
+                onTabSelected(it)
+                compression.onTabSelected()
             }
         }
         if (floatingButton != null) {
@@ -157,6 +147,47 @@ private fun BoxScope.DuoRailTabBar(
     }
 }
 
+// Glass column of tab items with the sliding selection bubble.
+@Composable
+private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (Int) -> Unit) {
+    val bubbleOffset by animateDpAsState(
+        targetValue = (ITEM_SIZE + RAIL_GAP) * selectedIndex.coerceAtLeast(0),
+        animationSpec = BUBBLE_SPRING,
+        label = "DuoRailBubble",
+    )
+    Box(
+        Modifier
+            .width(ITEM_SIZE)
+            .tabBarMaterial(RoundedCornerShape(Radius.XL))
+            .setAutomationId("bottom_tab_bar")
+    ) {
+        Box(
+            Modifier
+                .offset(
+                    x = (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
+                    y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
+                )
+                .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
+                .background(AppTheme.current.colors.background.selected, CircleShape)
+        )
+        Column(
+            modifier = Modifier.padding(vertical = RAIL_PADDING),
+            verticalArrangement = Arrangement.spacedBy(RAIL_GAP),
+        ) {
+            items.forEachIndexed { index, item ->
+                Box(
+                    modifier = Modifier
+                        .size(ITEM_SIZE)
+                        .noFeedbackClickable { onItemClick(index) },
+                    contentAlignment = Alignment.Center,
+                ) {
+                    DuoTabIcon(item, selected = index == selectedIndex)
+                }
+            }
+        }
+    }
+}
+
 @Composable
 private fun BoxScope.DuoFloatingTabBar(
     layout: ScreenLayout,