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

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

@@ -3,6 +3,7 @@ package vn.momo.kits.navigation.component
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -11,7 +12,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
@@ -32,9 +32,8 @@ enum class AnimatedHeaderRatio(val value: Float){
 
 internal val HEADER_BACKGROUND_HEIGHT = 154.dp
 
-// RN DuoScrollGradient: extended gradient runs this far below the header and collapses over this scroll
+// RN DuoScrollGradient: extended gradient runs this far below the header
 private val DUO_GRADIENT_EXTRA = 52.dp
-private val DUO_COLLAPSE_DISTANCE = 100.dp
 
 @Suppress("FrequentlyChangingValue")
 @Composable
@@ -65,37 +64,22 @@ internal fun HeaderBackground() {
         else -> 0.dp
     }
 
-    // iPhone Duo glass header: default gradient scrolls away, extended collapses to the header and fades
+    // iPhone Duo glass header: the gradient leaves with the content, as the quick return header does
     val useDuoGlass = options.usesDuoGlassHeader(layout)
-    val scrollPx = scrollState.value.toFloat()
-    val duoModifier = when {
-        !useDuoGlass -> Modifier.height(height)
-        options.headerType is HeaderType.Extended -> {
-            val collapse = with(density) {
-                (scrollPx / minOf(DUO_COLLAPSE_DISTANCE, minHeight).toPx()).coerceIn(0f, 1f)
-            }
-            val fade = with(density) { (scrollPx / DUO_GRADIENT_EXTRA.toPx()).coerceIn(0f, 1f) }
-            Modifier
-                .height(minHeight + DUO_GRADIENT_EXTRA * (1f - collapse))
-                .graphicsLayer { alpha = 1f - fade }
-        }
-        else -> Modifier.height(minHeight).graphicsLayer { translationY = -scrollPx }
+    val duoModifier = if (useDuoGlass) {
+        val extra = if (options.headerType is HeaderType.Extended) DUO_GRADIENT_EXTRA else 0.dp
+        Modifier.height(minHeight + extra).graphicsLayer { translationY = -scrollState.value.toFloat() }
+    } else {
+        Modifier.height(height)
     }
 
     Box(Modifier.fillMaxWidth().then(duoModifier).clipToBounds().background(backgroundColor)) {
+        // on Duo the fade spans the gradient box; a banner image keeps its 375:154 shape, clipped
         Box(Modifier
-            .height(maxHeight)
             .fillMaxWidth()
+            .then(if (useDuoGlass && !theme.isHeaderImage()) Modifier.fillMaxHeight() else Modifier.height(maxHeight))
             .conditional(!theme.isHeaderImage()) {
-                background(Brush.linearGradient(
-                    colors = listOf(
-                        color,
-                        backgroundColor
-                    ),
-                    start = Offset(0f, 0f),
-                    end = Offset(0f, with(density) { maxHeight.toPx() })
-                    )
-                )
+                background(Brush.verticalGradient(colors = listOf(color, backgroundColor)))
             }
         ){
             if (!theme.isHeaderImage()) return@Box

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

@@ -26,7 +26,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.layout.DuoMetrics
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.components.BadgeDot
@@ -62,6 +64,21 @@ fun HeaderRight(
 
 private const val HELP_CENTER_APP_ID = "vn.momo.helpcenter"
 
+private fun usesHelpCenter(context: MiniAppContext?): Boolean =
+    context != null && context.appId != HELP_CENTER_APP_ID
+
+private fun showsShortcut(headerRight: HeaderRight.Toolkit, context: MiniAppContext?): Boolean =
+    headerRight.useShortcut && !(headerRight.useMore && context == null)
+
+// Height of the vertical toolkit: the optional shortcut, then the help/home capsule.
+@Composable
+internal fun toolkitColumnHeight(headerRight: HeaderRight.Toolkit): Dp {
+    val context = LocalContext.current
+    val shortcut = if (showsShortcut(headerRight, context)) DuoMetrics.controlSize + Spacing.M else 0.dp
+    val groupCount = if (usesHelpCenter(context)) 2 else 1
+    return shortcut + if (groupCount > 1) DuoMetrics.itemPitch * groupCount else DuoMetrics.controlSize
+}
+
 @Composable
 internal fun Toolkit(
     headerRight: HeaderRight.Toolkit,
@@ -124,7 +141,7 @@ internal fun Toolkit(
         if (headerRight.useCloseIcon) api?.dismiss { } else api?.dismissAll { }
     }
 
-    val useHelpCenter = context != null && context.appId != HELP_CENTER_APP_ID
+    val useHelpCenter = usesHelpCenter(context)
     val closeIcon = if (headerRight.useCloseIcon) "16_navigation_close_circle" else "16_basic_home"
 
     val navButtonConfig = getNavigationButtonConfig(
@@ -137,12 +154,7 @@ internal fun Toolkit(
         group.items.any { it.showBadge }
     }
 
-    val isShowShortcut by remember(headerRight.useShortcut, headerRight.useMore, context) {
-        derivedStateOf {
-            (headerRight.useShortcut == true) &&
-                    !(headerRight.useMore == true && context == null)
-        }
-    }
+    val isShowShortcut = showsShortcut(headerRight, context)
 
     val icon by remember(navButtonConfig.icon, isFavorite) {
         derivedStateOf {

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

@@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.AbsoluteAlignment
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -41,11 +42,12 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.bottomtab.LocalDuoBarCompression
 
 private val SIDE_BAR_ICON_SIZE = 24.dp
 
 // iPhone Duo: back and toolkit leave the bar for a column in the side safe area, as the system bars do.
-// bottomInset is what footer / tab bar / home indicator take from the bottom; the column stays above it.
+// bottomInset is what footer / tab bar / home indicator take from the bottom, gap included; the column stays above it.
 @Composable
 internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifier) {
     val options = LocalOptions.current
@@ -56,6 +58,11 @@ internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifi
 
     val headerColor = getHeaderColor(options.headerType, headerOpacity(), options.tintColor, Colors.black_17)
     val isRight = sideBar.edge == SideBarEdge.RIGHT
+    val compression = LocalDuoBarCompression.current
+
+    // full height, so the tab bar compression decision matches this screen's toolkit
+    val fullHeight = DuoMetrics.controlSize + (toolkit?.let { Spacing.M + toolkitColumnHeight(it) } ?: 0.dp)
+    LaunchedEffect(fullHeight, compression.setToolbarHeight) { compression.setToolbarHeight(fullHeight) }
 
     Column(
         modifier = modifier
@@ -63,7 +70,7 @@ internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifi
             .width(sideBar.width)
             .layout { measurable, constraints ->
                 val placeable = measurable.measure(constraints.copy(minHeight = 0))
-                val maxY = constraints.maxHeight - (bottomInset + Spacing.XL).roundToPx() - placeable.height
+                val maxY = constraints.maxHeight - bottomInset.roundToPx() - placeable.height
                 val y = minOf(sideBar.top.roundToPx(), maxY).coerceAtLeast(0)
                 layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
                     placeable.place(0, y)
@@ -84,8 +91,17 @@ internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifi
                 onClick = { navigator.onBackSafe { } },
             )
         }
-        if (toolkit != null) {
-            Toolkit(headerRight = toolkit, tintColor = options.tintColor, headerColor = headerColor, vertical = true)
+        when {
+            toolkit == null || compression.toolbarHidden -> Unit
+            // HIG "Toolbar compressed": tools fold into one button, distinct from the useMore icon
+            compression.toolbarCompressed -> SideBarButton(
+                icon = "navigation_menu",
+                headerColor = headerColor,
+                showBadge = toolkit.tools.any { group -> group.items.any { it.showBadge } },
+                automationId = "btn_navigation_toolbar",
+                onClick = compression.expandToolbar,
+            )
+            else -> Toolkit(headerRight = toolkit, tintColor = options.tintColor, headerColor = headerColor, vertical = true)
         }
     }
 }

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

@@ -0,0 +1,13 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.unit.Dp
+
+@Immutable
+internal data class ReservedRegion(val x: Dp, val y: Dp, val width: Dp, val height: Dp)
+
+// Regions the system occludes (iOS 27.1+), in the coordinates of the Compose root view: the
+// iPhone Duo camera, and the status bar cluster as it grows for a call or a Live Activity.
+@Composable
+internal expect fun rememberReservedRegions(): List<ReservedRegion>

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/ReservedRegions.ios.kt

@@ -0,0 +1,86 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.uikit.LocalUIViewController
+import androidx.compose.ui.unit.dp
+import kotlinx.cinterop.BetaInteropApi
+import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.readValue
+import kotlinx.cinterop.useContents
+import platform.CoreGraphics.CGRectZero
+import platform.Foundation.NSSelectorFromString
+import platform.Foundation.NSValue
+import platform.Foundation.valueForKey
+import platform.UIKit.CGRectValue
+import platform.UIKit.UIView
+import platform.UIKit.UIViewAutoresizingFlexibleHeight
+import platform.UIKit.UIViewAutoresizingFlexibleWidth
+import platform.darwin.NSObject
+import platform.darwin.NSObjectProtocol
+import platform.Foundation.NSClassFromString
+
+// The API is newer than the SDK Kotlin/Native binds, so it is reached through the runtime.
+@OptIn(ExperimentalForeignApi::class)
+private val regionsOfKind = NSSelectorFromString("reservedRegionsOfKind:")
+
+@OptIn(ExperimentalForeignApi::class, BetaInteropApi::class)
+private fun UIView.occlusionRegions(target: UIView): List<ReservedRegion> {
+    if (window == null || !respondsToSelector(regionsOfKind)) return emptyList()
+    val kindClass = NSClassFromString("UIViewReservedRegionKind") as? NSObjectProtocol ?: return emptyList()
+    val kind = kindClass.performSelector(NSSelectorFromString("occlusionRegionKind")) ?: return emptyList()
+    val regions = performSelector(regionsOfKind, withObject = kind) as? List<*> ?: return emptyList()
+    return regions.mapNotNull { region ->
+        val frame = ((region as? NSObject)?.valueForKey("frame") as? NSValue)?.CGRectValue ?: return@mapNotNull null
+        convertRect(frame, toView = target).useContents {
+            ReservedRegion(origin.x.dp, origin.y.dp, size.width.dp, size.height.dp)
+        }
+    }
+}
+
+// Invisible full-size probe: reading the regions in layoutSubviews makes UIKit run it again
+// when they change, so nothing polls.
+@OptIn(ExperimentalForeignApi::class)
+private class ReservedRegionsProbe(
+    private val onChange: (List<ReservedRegion>) -> Unit,
+) : UIView(frame = CGRectZero.readValue()) {
+    private var last: List<ReservedRegion>? = null
+
+    init {
+        userInteractionEnabled = false
+        autoresizingMask = UIViewAutoresizingFlexibleWidth or UIViewAutoresizingFlexibleHeight
+    }
+
+    override fun layoutSubviews() {
+        super.layoutSubviews()
+        val regions = superview?.let { occlusionRegions(it) } ?: emptyList()
+        if (regions != last) {
+            last = regions
+            onChange(regions)
+        }
+    }
+
+    override fun didMoveToWindow() {
+        super.didMoveToWindow()
+        setNeedsLayout()
+    }
+}
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+internal actual fun rememberReservedRegions(): List<ReservedRegion> {
+    if (!isPhoneIdiom()) return emptyList()
+    val host = LocalUIViewController.current.view
+    var regions by remember { mutableStateOf(emptyList<ReservedRegion>()) }
+    DisposableEffect(host) {
+        val probe = ReservedRegionsProbe { regions = it }
+        probe.setFrame(host.bounds)
+        host.insertSubview(probe, atIndex = 0)
+        onDispose { probe.removeFromSuperview() }
+    }
+    return regions
+}

package/ios/Application/Layout/ScreenLayout.swift

@@ -18,6 +18,8 @@ public struct SideBarLayout: Equatable {
     public let width: CGFloat
     /// Preferred window y of the first control; StackScreen still keeps the column above the bottom bars.
     public let top: CGFloat
+    /// Room kept free above the window bottom, clear of a camera at the bottom end of the strip.
+    public let bottom: CGFloat
 }
 
 public struct ScreenLayout: Equatable {
@@ -47,6 +49,13 @@ enum DuoMetrics {
     static let itemPitch: CGFloat = 50
     static let firstItemTop: CGFloat = 170
     static let firstItemTopLandscape: CGFloat = 120
+    // 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).
+    static let outerHeaderHeight: CGFloat = 76
+    static let outerCameraCenterY: CGFloat = 45
+    // 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.
+    static let edgeInset: CGFloat = 24
     // Widest short side of any single-display iPhone.
     static let iPhoneMaxShortSide: CGFloat = 440
 }
@@ -79,10 +88,15 @@ extension ScreenLayout {
         )
     }
 
-    static func make(size: CGSize, insets: EdgeInsets, isPhone: Bool = isPhoneIdiom) -> ScreenLayout {
+    static func make(
+        size: CGSize,
+        insets: EdgeInsets,
+        reservedRegions: [CGRect] = ReservedRegions.current,
+        isPhone: Bool = isPhoneIdiom
+    ) -> ScreenLayout {
         let width = size.width
         let height = size.height
-        let (headerHeight, headerStatusBarHeight) = headerGeometry(topInset: insets.top, isPhone: isPhone)
+        var (headerHeight, headerStatusBarHeight) = headerGeometry(topInset: insets.top, isPhone: isPhone)
         let isDuo = isPhone && isIPhoneDuoWindow(width: width, height: height, insets: insets)
         guard isDuo else {
             return ScreenLayout(
@@ -99,13 +113,32 @@ extension ScreenLayout {
             var top = insets.top + HeaderMetrics.barHeight + Spacing.M
             if insets.top < HeaderMetrics.statusBarMinInset {
                 // status bar lives in the strip: start under its cluster, as the native bar does
-                let isInnerLandscape = width > height && height >= DuoMetrics.innerMinHeight
-                top = isInnerLandscape ? DuoMetrics.firstItemTopLandscape : DuoMetrics.firstItemTop
+                if width <= height {
+                    top = DuoMetrics.firstItemTop
+                } else if height >= DuoMetrics.innerMinHeight {
+                    top = DuoMetrics.firstItemTopLandscape
+                } else {
+                    // outer display in landscape: no status bar in the strip
+                    top = DuoMetrics.edgeInset
+                }
+
+                if height > width && width < DuoMetrics.innerMinHeight {
+                    // outer display: the row starts below the top so the title centers on the camera
+                    headerHeight = DuoMetrics.outerHeaderHeight
+                    headerStatusBarHeight = DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight
+                }
             }
+
+            let edge: SideBarEdge = insets.trailing >= insets.leading ? .right : .left
+            let stripLeft = edge == .right ? width - sideInset : 0
+            // 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
+            let occlusion = stripOcclusion(reservedRegions, stripLeft: stripLeft, stripRight: stripLeft + sideInset, windowHeight: height)
             sideBar = SideBarLayout(
-                edge: insets.trailing >= insets.leading ? .right : .left,
+                edge: edge,
                 width: sideInset,
-                top: top
+                top: max(top, occlusion.top),
+                bottom: max(DuoMetrics.edgeInset, occlusion.bottom)
             )
         }
 
@@ -126,6 +159,24 @@ extension ScreenLayout {
         )
     }
 
+    /// 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 static func stripOcclusion(
+        _ regions: [CGRect],
+        stripLeft: CGFloat,
+        stripRight: CGFloat,
+        windowHeight: CGFloat
+    ) -> (top: CGFloat, bottom: CGFloat) {
+        regions.reduce(into: (top: CGFloat(0), bottom: CGFloat(0))) { occlusion, region in
+            guard region.minX < stripRight && region.maxX > stripLeft else { return }
+            if region.midY < windowHeight / 2 {
+                occlusion.top = max(occlusion.top, region.maxY)
+            } else {
+                occlusion.bottom = max(occlusion.bottom, windowHeight - region.minY)
+            }
+        }
+    }
+
     // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
     private static func isIPhoneDuoWindow(width: CGFloat, height: CGFloat, insets: EdgeInsets) -> Bool {
         let shortSide = min(width, height)
@@ -148,6 +199,70 @@ public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
     return max(min(screen.width, screen.height), min(window.width, window.height)) > DuoMetrics.iPhoneMaxShortSide
 }
 
+// MARK: - Reserved regions
+
+/// System occlusion regions (iOS 27.1+) in window coordinates: the iPhone Duo camera, and the
+/// status bar cluster as it grows for a call or a Live Activity. Empty before iOS 27.1.
+enum ReservedRegions {
+    // last report of the probe, so `ScreenLayout.current` includes it
+    static var current: [CGRect] = []
+}
+
+/// Invisible probe: reading the regions in layoutSubviews makes UIKit run it again when they
+/// change, so nothing polls. Port of RN `@momo-kits/reserved-regions`.
+private final class ReservedRegionsProbe: UIView {
+    var onChange: (() -> Void)?
+    private var last: [CGRect]?
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        isUserInteractionEnabled = false
+    }
+
+    required init?(coder: NSCoder) { nil }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        let regions = occlusionRegions()
+        guard regions != last else { return }
+        last = regions
+        ReservedRegions.current = regions
+        // layout pass: publish on the next turn instead of mutating SwiftUI state mid-update
+        DispatchQueue.main.async { [weak self] in self?.onChange?() }
+    }
+
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        setNeedsLayout()
+    }
+
+    // The API is newer than the SDKs hosts may build with, so it is reached through the runtime.
+    private func occlusionRegions() -> [CGRect] {
+        let regionsOfKind = NSSelectorFromString("reservedRegionsOfKind:")
+        guard window != nil, responds(to: regionsOfKind),
+              let kindType = NSClassFromString("UIViewReservedRegionKind") as? NSObject.Type,
+              let kind = (kindType as AnyObject).perform(NSSelectorFromString("occlusionRegionKind"))?.takeUnretainedValue(),
+              let regions = perform(regionsOfKind, with: kind)?.takeUnretainedValue() as? [NSObject]
+        else { return [] }
+        return regions.compactMap { ($0.value(forKey: "frame") as? NSValue)?.cgRectValue }
+            .map { convert($0, to: nil) }
+    }
+}
+
+private struct ReservedRegionsProbeView: UIViewRepresentable {
+    let onChange: () -> Void
+
+    func makeUIView(context: Context) -> ReservedRegionsProbe {
+        let probe = ReservedRegionsProbe()
+        probe.onChange = onChange
+        return probe
+    }
+
+    func updateUIView(_ probe: ReservedRegionsProbe, context: Context) {
+        probe.onChange = onChange
+    }
+}
+
 // MARK: - Environment
 
 private struct ScreenLayoutKey: EnvironmentKey {
@@ -177,6 +292,7 @@ private struct ScreenLayoutReader: ViewModifier {
                         .onChange(of: proxy.safeAreaInsets) { _ in refresh() }
                 }
             )
+            .background(ReservedRegionsProbeView { refresh() }.ignoresSafeArea())
             .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
                 refresh()
             }

package/ios/Application/Navigation/BottomTab/BottomTab.swift

@@ -14,14 +14,25 @@ import SwiftUI
 public struct BottomTab: View {
     private let items: [BottomTabItem]
     private let floatingButton: BottomTabFloatingButton?
+    private let compressionBehavior: DuoBarCompressionBehavior
 
     @EnvironmentObject private var navigator: Navigator
     @Environment(\.screenLayout) private var layout
     @State private var selectedIndex: Int = 0
+    @State private var toolbarHeight = DuoBarCompression.defaultToolbarHeight
+    @State private var expandedBar: DuoBar?
+    @State private var openedBar: DuoBar?
 
-    public init(items: [BottomTabItem], floatingButton: BottomTabFloatingButton? = nil) {
+    /// `compressionBehavior`: on iPhone Duo, when the side bar can't hold both bars, which one
+    /// starts compressed; tapping the compressed one swaps them.
+    public init(
+        items: [BottomTabItem],
+        floatingButton: BottomTabFloatingButton? = nil,
+        compressionBehavior: DuoBarCompressionBehavior = .toolbar
+    ) {
         self.items = items
         self.floatingButton = floatingButton
+        self.compressionBehavior = compressionBehavior
     }
 
     private var bottomInset: CGFloat { safeAreaBottomInset() }
@@ -30,11 +41,34 @@ public struct BottomTab: View {
         layout.isIPhoneDuo ? layout.insets.bottom : BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S
     }
 
-    private var duoInsets: DuoTabBarInsets {
-        layout.duoTabBarInsets(itemCount: items.count, hasFloatingButton: floatingButton != nil)
+    private var compression: DuoBarCompression {
+        DuoBarCompression.resolve(
+            layout: layout,
+            tabCount: items.count,
+            hasQr: floatingButton != nil,
+            toolbarHeight: toolbarHeight,
+            // 'toolbar' compression keeps the tab bar whole until the toolbar is tapped
+            expanded: Binding(
+                get: { expandedBar ?? (compressionBehavior == .toolbar ? .tabBar : .toolbar) },
+                set: { expandedBar = $0 }
+            ),
+            opened: $openedBar,
+            setToolbarHeight: { height in
+                if toolbarHeight != height { toolbarHeight = height }
+            }
+        )
+    }
+
+    private func duoInsets(_ compression: DuoBarCompression) -> DuoTabBarInsets {
+        layout.duoTabBarInsets(
+            itemCount: items.count,
+            hasFloatingButton: floatingButton != nil,
+            tabBarCompressed: compression.tabBarCompressed
+        )
     }
 
     public var body: some View {
+        let compression = compression
         ZStack(alignment: .bottom) {
             // Tab content area, inset above the bar.
             ZStack {
@@ -46,7 +80,8 @@ public struct BottomTab: View {
                 }
             }
             .padding(.bottom, reservedBottom)
-            .environment(\.duoTabBarInsets, duoInsets)
+            .environment(\.duoTabBarInsets, duoInsets(compression))
+            .environment(\.duoBarCompression, compression)
             .animation(.easeInOut(duration: 0.2), value: selectedIndex)
 
             if layout.isIPhoneDuo {
@@ -54,7 +89,8 @@ public struct BottomTab: View {
                     items: items,
                     floatingButton: floatingButton,
                     selectedIndex: selectedIndex,
-                    onTabSelected: selectTab
+                    onTabSelected: selectTab,
+                    compression: compression
                 )
             } else {
                 // Tab bar + home-indicator filler.

package/ios/Application/Navigation/BottomTab/DuoBarCompression.swift

@@ -0,0 +1,105 @@
+//
+//  DuoBarCompression.swift
+//  MoMoUIKits
+//
+//  Port of RN `BottomTab/DuoBarCompression.tsx` (HIG, Designing for iPhone Duo: Vertical controls):
+//  keeps the side bar's toolbar and tab bar clear of each other.
+//
+
+import SwiftUI
+
+/// iPhone Duo: which side bar bar starts compressed when the strip cannot hold both whole.
+public enum DuoBarCompressionBehavior {
+    case toolbar, tabBar
+}
+
+enum DuoBar {
+    case toolbar, tabBar
+}
+
+struct DuoBarCompression {
+    var toolbarCompressed = false
+    var tabBarCompressed = false
+    /// The open rail needs the toolbar button slot too: only Back stays.
+    var toolbarHidden = false
+    var expandToolbar: () -> Void = {}
+    var expandTabBar: () -> Void = {}
+    /// A rail opened from the compressed state closes once a tab is picked.
+    var onTabSelected: () -> Void = {}
+    /// Side bar toolkits report their full height so the tab bar knows what is left.
+    var setToolbarHeight: (CGFloat) -> Void = { _ in }
+
+    /// Space kept between the top and the bottom groups (HIG Vertical controls).
+    static let groupGap = Spacing.M
+    /// Back, then the right toolkit: help + home capsule.
+    static let defaultToolbarHeight = DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch
+    /// Back, then the single button the toolbar folds into.
+    private static let compressedToolbarHeight = 2 * DuoMetrics.controlSize + Spacing.M
+    /// Back alone, while a rail opened from the compressed state takes the toolbar slot.
+    private static let backOnlyHeight = DuoMetrics.controlSize
+
+    /// - 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)
+    static func resolve(
+        layout: ScreenLayout,
+        tabCount: Int,
+        hasQr: Bool,
+        toolbarHeight: CGFloat,
+        expanded: Binding<DuoBar>,
+        opened: Binding<DuoBar?>,
+        setToolbarHeight: @escaping (CGFloat) -> Void
+    ) -> DuoBarCompression {
+        guard let sideBar = layout.sideBar else { return DuoBarCompression() }
+        let room = layout.height - sideBar.bottom - sideBar.top - groupGap
+        let tabBar = duoRailHeight(itemCount: tabCount, hasQr: hasQr)
+        let compressedTabBar = duoRailHeight(itemCount: 1, hasQr: hasQr, compressed: true)
+        func fits(_ toolbar: CGFloat, _ tabs: CGFloat) -> Bool { toolbar + tabs <= room }
+
+        if fits(toolbarHeight, tabBar) {
+            return DuoBarCompression(setToolbarHeight: setToolbarHeight)
+        }
+        if fits(compressedToolbarHeight, tabBar) && fits(toolbarHeight, compressedTabBar) {
+            return DuoBarCompression(
+                toolbarCompressed: expanded.wrappedValue == .tabBar,
+                tabBarCompressed: expanded.wrappedValue == .toolbar,
+                expandToolbar: { expanded.wrappedValue = .toolbar },
+                expandTabBar: { expanded.wrappedValue = .tabBar },
+                setToolbarHeight: setToolbarHeight
+            )
+        }
+
+        let expandToolbar = { opened.wrappedValue = .toolbar }
+        let expandTabBar = { opened.wrappedValue = .tabBar }
+        if opened.wrappedValue == .tabBar && fits(backOnlyHeight, tabBar) {
+            return DuoBarCompression(
+                toolbarCompressed: true,
+                tabBarCompressed: false,
+                toolbarHidden: true,
+                expandToolbar: expandToolbar,
+                expandTabBar: expandTabBar,
+                onTabSelected: { opened.wrappedValue = nil },
+                setToolbarHeight: setToolbarHeight
+            )
+        }
+        return DuoBarCompression(
+            toolbarCompressed: opened.wrappedValue != .toolbar,
+            tabBarCompressed: true,
+            expandToolbar: expandToolbar,
+            expandTabBar: expandTabBar,
+            setToolbarHeight: setToolbarHeight
+        )
+    }
+}
+
+private struct DuoBarCompressionKey: EnvironmentKey {
+    static let defaultValue = DuoBarCompression()
+}
+
+extension EnvironmentValues {
+    var duoBarCompression: DuoBarCompression {
+        get { self[DuoBarCompressionKey.self] }
+        set { self[DuoBarCompressionKey.self] = newValue }
+    }
+}