@momo-kits/native-kits 0.167.1-duo.17-debug → 0.167.1-duo.18-debug

package/CLAUDE.md

@@ -69,6 +69,7 @@ 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` 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 the header is 76pt and the row starts at 14pt so the title centers on the camera punchout; in landscape the row centers on the camera when it sits at the top end of the strip (else on the back button) and the header reaches 8pt below the back button.
+- iPhone Duo inner display in portrait (status bar on top): the header row shares the status bar band — `headerHeight` 94pt (2 × the clock digits' y 47), `headerStatusBarHeight` 0 — and `ScreenLayout.statusBarClearance` keeps it between the clock / battery clusters (from reserved regions, else 128pt on the right). Back and toolkit use the 48pt side bar controls laid out horizontally (`ToolkitLayout.SideBarRow`); the collapsed search and a centered title stay clear of the clusters. Port of momo-kits `90af33ba2`.
 - 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.

package/compose/build.gradle.kts

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

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

@@ -32,6 +32,10 @@ data class SideBarLayout(
     val bottom: Dp,
 )
 
+// Room the header row keeps from each side for the status bar clock and battery clusters.
+@Immutable
+data class StatusBarClearance(val left: Dp, val right: Dp)
+
 @Immutable
 data class ScreenLayout(
     val width: Dp,
@@ -53,6 +57,8 @@ data class ScreenLayout(
     // Portrait iPhone Duo puts the status bar in the side strip, about twice as tall as the strip is wide.
     // Stored so it survives consumeHorizontalInsets().
     val duoTopInset: Dp = insetTop,
+    // iPhone Duo inner display in portrait: the header row shares the status bar band, between its clusters.
+    val statusBarClearance: StatusBarClearance? = null,
 ) {
     val headerBarHeight: Dp get() = headerHeight - headerStatusBarHeight
 }
@@ -76,6 +82,10 @@ internal object DuoMetrics {
     // Outer display in landscape has no status bar in the strip: controls keep this far from
     // both ends unless a reserved region (the camera at either end) asks for more.
     val edgeInset = 24.dp
+    // Inner display in portrait: the clock and connectivity cluster sits at the top right corner
+    // (x 550–643 of 669, clock digits centered on y 47); its reserved region is taller than the glyphs.
+    val innerStatusBarCenterY = 47.dp
+    val innerStatusBarWidth = 120.dp
 }
 
 // Widest short side of any single-display iPhone.
@@ -99,9 +109,17 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
     if (parent != null) {
         // the parent's row center reproduces its own centered geometry
         val titleCenterY = parent.headerStatusBarHeight + parent.headerBarHeight / 2
-        val (headerHeight, headerStatusBarHeight) =
+        val statusBarClearance = parent.statusBarClearance?.takeIf { topInset >= STATUS_BAR_MIN_INSET }
+        val (headerHeight, headerStatusBarHeight) = if (statusBarClearance != null) {
+            statusBarRowGeometry()
+        } else {
             headerGeometry(topInset, isPhone, parent.width, parent.height, parent.sideBar != null, titleCenterY)
-        return parent.copy(headerHeight = headerHeight, headerStatusBarHeight = headerStatusBarHeight)
+        }
+        return parent.copy(
+            headerHeight = headerHeight,
+            headerStatusBarHeight = headerStatusBarHeight,
+            statusBarClearance = statusBarClearance,
+        )
     }
 
     val density = LocalDensity.current
@@ -166,6 +184,9 @@ private fun headerGeometry(
     return maxOf(headerHeight, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
 }
 
+// Centered on the clock digits; the cluster's region center sits above them.
+private fun statusBarRowGeometry(): Pair<Dp, Dp> = DuoMetrics.innerStatusBarCenterY * 2 to 0.dp
+
 private data class StripOcclusion(val top: Dp, val topCenter: Dp, val bottom: Dp)
 
 // How far system regions reach into a side strip from its top and from its bottom end
@@ -190,6 +211,22 @@ private fun stripOcclusion(regions: List<ReservedRegion>, stripLeft: Dp, stripRi
     return StripOcclusion(top, topCenter, bottom)
 }
 
+// How far the clock and battery clusters of a status bar on the top edge reach in from each side;
+// null without reserved regions there.
+private fun statusBarClusters(regions: List<ReservedRegion>, windowWidth: Dp, topInset: Dp): StatusBarClearance? {
+    val midX = windowWidth / 2
+    val clusters = regions.filter {
+        it.y < topInset && it.y + it.height <= topInset && (it.x + it.width <= midX || it.x >= midX)
+    }
+    if (clusters.isEmpty()) return null
+    var left = 0.dp
+    var right = 0.dp
+    clusters.forEach {
+        if (it.x < midX) left = maxOf(left, it.x + it.width) else right = maxOf(right, windowWidth - it.x)
+    }
+    return StatusBarClearance(left, right)
+}
+
 // Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
 private fun isIPhoneDuoWindow(width: Dp, height: Dp, asymmetricInsets: Boolean): Boolean {
     val shortSide = minOf(width, height)
@@ -210,6 +247,13 @@ private fun screenLayoutOf(
     reservedRegions: List<ReservedRegion>,
 ): ScreenLayout {
     val isIPhoneDuo = isPhone && isIPhoneDuoWindow(width, height, asymmetricInsets)
+    val isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight
+    val statusBarClearance = if (isIPhoneDuo && isInnerPortrait && topInset >= STATUS_BAR_MIN_INSET) {
+        statusBarClusters(reservedRegions, width, topInset)
+            ?: StatusBarClearance(left = 0.dp, right = DuoMetrics.innerStatusBarWidth + Spacing.S)
+    } else {
+        null
+    }
 
     var sideBar: SideBarLayout? = null
     var titleCenterY = 0.dp
@@ -223,6 +267,7 @@ private fun screenLayoutOf(
         val occlusion = stripOcclusion(reservedRegions, stripLeft, stripLeft + sideInset, height)
         // UIKit reports no usable status bar frame here (a 2pt top strip), so the spot is inferred like RN
         val top = when {
+            statusBarClearance != null -> statusBarRowGeometry().first + Spacing.M
             topInset >= STATUS_BAR_MIN_INSET -> topInset + HEADER_HEIGHT.dp + Spacing.M
             width <= height -> DuoMetrics.firstItemTop
             height >= DuoMetrics.innerMinHeight -> DuoMetrics.firstItemTopLandscape
@@ -239,8 +284,11 @@ private fun screenLayoutOf(
             bottom = maxOf(DuoMetrics.edgeInset, occlusion.bottom),
         )
     }
-    val (headerHeight, headerStatusBarHeight) =
+    val (headerHeight, headerStatusBarHeight) = if (statusBarClearance != null) {
+        statusBarRowGeometry()
+    } else {
         headerGeometry(topInset, isPhone, width, height, sideBar != null, titleCenterY)
+    }
 
     return ScreenLayout(
         width = width,
@@ -256,5 +304,6 @@ private fun screenLayoutOf(
         sideBar = sideBar,
         isIPhoneDuoDevice = isDuoDevice,
         duoTopInset = maxOf(topInset, if (height > width) sideInset * 2 else 0.dp),
+        statusBarClearance = statusBarClearance,
     )
 }

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

@@ -83,6 +83,7 @@ import vn.momo.kits.utils.horizontalSafeAreaPadding
 import vn.momo.kits.layout.LocalScreenLayout
 import vn.momo.kits.layout.ScreenLayout
 import vn.momo.kits.layout.consumeHorizontalInsets
+import vn.momo.kits.layout.DuoMetrics
 import vn.momo.kits.layout.getScreenLayout
 import kotlin.time.Clock
 import kotlin.time.Duration.Companion.milliseconds
@@ -494,10 +495,14 @@ internal fun SearchAnimated(
     // collapsed, the search is centered in the bar row
     val minTopPadding = screenLayout.headerStatusBarHeight + (screenLayout.headerBarHeight - HEADER_HEIGHT.dp) / 2
     val maxTopPadding = screenLayout.headerHeight
+    // collapsed on the iPhone Duo status bar row, the search stays between its clusters (48pt back there)
+    val clearance = screenLayout.statusBarClearance
+    val backWidth = if (clearance != null && !useSideBar) DuoMetrics.controlSize else 28.dp
     val minStartPadding = Spacing.M
-    val maxStartPadding = if (options.hiddenBack || useSideBar) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
+    val maxStartPadding = (clearance?.left ?: 0.dp) +
+        if (options.hiddenBack || useSideBar) Spacing.M else backWidth + Spacing.M + Spacing.S
     val minEndPadding = Spacing.M
-    val maxEndPadding = when {
+    val maxEndPadding = (clearance?.right ?: 0.dp) + when {
         options.headerRight is HeaderRight.None -> Spacing.M
         useSideBar && options.headerRight is HeaderRight.Toolkit -> Spacing.M
         else -> headerRightWidthDp + Spacing.M * 2

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

@@ -40,6 +40,7 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.components.PopupNotifyProps
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
 import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
@@ -59,6 +60,9 @@ enum class TitlePosition { LEFT, CENTER }
 
 private val HEADER_ACTIONS_WIDTH = 172.dp
 
+// Extra width the 48pt back and toolkit take on the iPhone Duo status bar row.
+private val STATUS_BAR_ROW_ACTIONS_EXTRA = 55.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun headerOpacity(): Float {
@@ -82,8 +86,10 @@ internal fun headerOpacity(): Float {
 @Composable
 internal fun headerTitleMaxWidth(): Dp {
     val layout = getScreenLayout()
-    if (layout.sideBar != null) return layout.contentWidth - Spacing.M * 2
-    return layout.width - HEADER_ACTIONS_WIDTH
+    val clearance = layout.statusBarClearance
+    val clearanceWidth = clearance?.let { it.left + it.right } ?: 0.dp
+    if (layout.sideBar != null) return layout.contentWidth - Spacing.M * 2 - clearanceWidth
+    return layout.width - HEADER_ACTIONS_WIDTH - (if (clearance != null) STATUS_BAR_ROW_ACTIONS_EXTRA else 0.dp) - clearanceWidth
 }
 
 // Scroll distance over which the Duo glass bar fades in.
@@ -117,6 +123,9 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
     val inputSearchType = getInputSearchType(options)
     val layout = getScreenLayout()
     val useSideBar = layout.sideBar != null
+    // iPhone Duo inner portrait: the row sits on the status bar, between its clusters
+    val clearance = layout.statusBarClearance
+    val statusBarRow = clearance != null && !useSideBar
     val opacity = headerOpacity()
 
     val headerColor = getHeaderColor(options.headerType, opacity, options.tintColor, Colors.black_17)
@@ -174,19 +183,31 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             modifier = Modifier.height(layout.headerBarHeight)
                 .fillMaxWidth()
                 .horizontalSafeAreaPadding()
-                .padding(horizontal = Spacing.M),
+                .padding(
+                    start = Spacing.M + (clearance?.left ?: 0.dp),
+                    end = Spacing.M + (clearance?.right ?: 0.dp),
+                ),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             if (!options.hiddenBack && !useSideBar) {
-                BackButton(
-                    borderColor = headerColor.borderColor,
-                    backgroundButton = headerColor.backgroundButton,
-                    tintIconColor = headerColor.tintIconColor,
-                    onBackHandler = {
-                        navigator.onBackSafe {  }
-                    }
-                )
+                if (statusBarRow) {
+                    SideBarButton(
+                        icon = "arrow-back",
+                        headerColor = headerColor,
+                        automationId = "btn_navigation_back",
+                        onClick = { navigator.onBackSafe { } },
+                    )
+                } else {
+                    BackButton(
+                        borderColor = headerColor.borderColor,
+                        backgroundButton = headerColor.backgroundButton,
+                        tintIconColor = headerColor.tintIconColor,
+                        onBackHandler = {
+                            navigator.onBackSafe {  }
+                        }
+                    )
+                }
                 Spacer(Modifier.width(Spacing.S))
             }
 
@@ -203,23 +224,40 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
             Box(Modifier.onGloballyPositioned {
                 if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
             }){
-                if (!(useSideBar && options.headerRight is HeaderRight.Toolkit)) {
-                    HeaderRight(options.headerRight, options.tintColor, headerColor)
+                val headerRight = options.headerRight
+                when {
+                    useSideBar && headerRight is HeaderRight.Toolkit -> Unit
+                    statusBarRow && headerRight is HeaderRight.Toolkit -> Toolkit(
+                        headerRight = headerRight,
+                        tintColor = options.tintColor,
+                        headerColor = headerColor,
+                        layout = ToolkitLayout.SideBarRow,
+                    )
+                    else -> HeaderRight(headerRight, options.tintColor, headerColor)
                 }
             }
         }
         if (centerTitle) {
+            // on the status bar row the clusters are lopsided, so both sides keep the wider one's room
+            val centerInset = if (clearance != null) {
+                val back = if (options.hiddenBack || useSideBar) 0.dp else DuoMetrics.controlSize + Spacing.S
+                val right = with(LocalDensity.current) { headerRightWidthPx.intValue.toDp() }
+                maxOf(clearance.left + back, clearance.right + right) + Spacing.S
+            } else {
+                0.dp
+            }
             Box(
                 modifier = Modifier.height(layout.headerBarHeight)
                     .fillMaxWidth()
                     .horizontalSafeAreaPadding()
-                    .padding(horizontal = Spacing.M),
+                    .padding(horizontal = Spacing.M + centerInset),
                 contentAlignment = Alignment.Center
             ) {
                 HeaderContent(
                     headerTitle = options.headerTitle,
                     tintIconColor = titleColor,
                     titlePosition = titlePosition,
+                    centerWidthFraction = if (clearance != null) 1f else 0.5f,
                     modifier = Modifier.fillMaxWidth()
                 )
             }
@@ -253,6 +291,7 @@ internal fun HeaderContent(
     headerTitle: HeaderTitle,
     tintIconColor: Color,
     titlePosition: TitlePosition = TitlePosition.LEFT,
+    centerWidthFraction: Float = 0.5f,
     modifier: Modifier = Modifier,
 ){
     Box(
@@ -264,7 +303,7 @@ internal fun HeaderContent(
                 HeaderTitle(
                     title = headerTitle.title,
                     color = tintIconColor,
-                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) 0.5f else 1f),
+                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) centerWidthFraction else 1f),
                     textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
                 )
             }

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

@@ -79,12 +79,15 @@ internal fun toolkitColumnHeight(headerRight: HeaderRight.Toolkit): Dp {
     return shortcut + if (groupCount > 1) DuoMetrics.itemPitch * groupCount else DuoMetrics.controlSize
 }
 
+// SideBarColumn: the iPhone Duo side bar; SideBarRow: the Duo header row on the status bar, same 48pt controls.
+internal enum class ToolkitLayout { Bar, SideBarColumn, SideBarRow }
+
 @Composable
 internal fun Toolkit(
     headerRight: HeaderRight.Toolkit,
     tintColor: Color? = null,
     headerColor: HeaderColor,
-    vertical: Boolean = false,
+    layout: ToolkitLayout = ToolkitLayout.Bar,
 ) {
     val api = LocalMaxApi.current
     val context = LocalContext.current
@@ -163,8 +166,9 @@ internal fun Toolkit(
         }
     }
 
-    if (vertical) {
-        Column(verticalArrangement = Arrangement.spacedBy(Spacing.M)) {
+    if (layout != ToolkitLayout.Bar) {
+        val horizontal = layout == ToolkitLayout.SideBarRow
+        val controls = @Composable {
             if (isShowShortcut) {
                 SideBarButton(
                     icon = icon,
@@ -174,13 +178,14 @@ internal fun Toolkit(
                     onClick = navButtonConfig.onPress,
                 )
             }
-            SideBarGroup(headerColor = headerColor, itemCount = if (useHelpCenter) 2 else 1) {
+            SideBarGroup(headerColor = headerColor, itemCount = if (useHelpCenter) 2 else 1, horizontal = horizontal) { item ->
                 if (useHelpCenter) {
                     SideBarGroupItem(
                         icon = "help_center",
                         headerColor = headerColor,
                         automationId = "btn_navigation_help_center",
                         onClick = ::onPressHelpCenter,
+                        modifier = item,
                     )
                 }
                 SideBarGroupItem(
@@ -188,9 +193,17 @@ internal fun Toolkit(
                     headerColor = headerColor,
                     automationId = "btn_navigation_close",
                     onClick = ::onPressClose,
+                    modifier = item,
                 )
             }
         }
+        if (horizontal) {
+            Row(horizontalArrangement = Arrangement.spacedBy(Spacing.M), verticalAlignment = Alignment.CenterVertically) {
+                controls()
+            }
+        } else {
+            Column(verticalArrangement = Arrangement.spacedBy(Spacing.M)) { controls() }
+        }
         return
     }
 

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

@@ -6,11 +6,9 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.absolutePadding
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -101,7 +99,12 @@ internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifi
                 automationId = "btn_navigation_toolbar",
                 onClick = compression.expandToolbar,
             )
-            else -> Toolkit(headerRight = toolkit, tintColor = options.tintColor, headerColor = headerColor, vertical = true)
+            else -> Toolkit(
+                headerRight = toolkit,
+                tintColor = options.tintColor,
+                headerColor = headerColor,
+                layout = ToolkitLayout.SideBarColumn,
+            )
         }
     }
 }
@@ -135,34 +138,38 @@ internal fun SideBarButton(
     }
 }
 
-// Capsule grouping related controls, one item per 50pt.
+// Capsule grouping related controls, one item per 50pt: vertical in the side bar, horizontal on a header row.
 @Composable
 internal fun SideBarGroup(
     headerColor: HeaderColor,
     itemCount: Int,
-    content: @Composable ColumnScope.() -> Unit,
+    horizontal: Boolean = false,
+    content: @Composable (itemModifier: Modifier) -> Unit,
 ) {
-    val height = if (itemCount > 1) DuoMetrics.itemPitch * itemCount else DuoMetrics.controlSize
-    Column(
-        modifier = Modifier
-            .width(DuoMetrics.controlSize)
-            .height(height)
-            .sideBarGlass(headerColor, RoundedCornerShape(Radius.XL)),
-        content = content,
-    )
+    val length = if (itemCount > 1) DuoMetrics.itemPitch * itemCount else DuoMetrics.controlSize
+    val item = length / itemCount.coerceAtLeast(1)
+    val glass = Modifier.sideBarGlass(headerColor, RoundedCornerShape(Radius.XL))
+    if (horizontal) {
+        Row(Modifier.size(width = length, height = DuoMetrics.controlSize).then(glass)) {
+            content(Modifier.size(width = item, height = DuoMetrics.controlSize))
+        }
+    } else {
+        Column(Modifier.size(width = DuoMetrics.controlSize, height = length).then(glass)) {
+            content(Modifier.size(width = DuoMetrics.controlSize, height = item))
+        }
+    }
 }
 
 @Composable
-internal fun ColumnScope.SideBarGroupItem(
+internal fun SideBarGroupItem(
     icon: String,
     headerColor: HeaderColor,
     automationId: String,
     onClick: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Box(
-        modifier = Modifier
-            .weight(1f)
-            .fillMaxWidth()
+        modifier = modifier
             .activeOpacityClickable(onClick = onClick)
             .setAutomationId(automationId),
         contentAlignment = Alignment.Center,

package/ios/Layout/ScreenLayout.swift

@@ -22,6 +22,12 @@ public struct SideBarLayout: Equatable {
     public let bottom: CGFloat
 }
 
+/// Room the header row keeps from each side for the status bar clock and battery clusters.
+public struct StatusBarClearance: Equatable {
+    public let left: CGFloat
+    public let right: CGFloat
+}
+
 public struct ScreenLayout: Equatable {
     public let width: CGFloat
     public let height: CGFloat
@@ -35,6 +41,8 @@ public struct ScreenLayout: Equatable {
     public let headerStatusBarHeight: CGFloat
     /// iPhone Duo moves back and toolkit into a column in the side safe area; nil while they stay in the bar.
     public let sideBar: SideBarLayout?
+    /// iPhone Duo inner display in portrait: the header row shares the status bar band, between its clusters.
+    public let statusBarClearance: StatusBarClearance?
 
     public var headerBarHeight: CGFloat { headerHeight - headerStatusBarHeight }
 }
@@ -56,6 +64,10 @@ enum DuoMetrics {
     // 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
+    // Inner display in portrait: the clock and connectivity cluster sits at the top right corner
+    // (x 550–643 of 669, clock digits centered on y 47); its reserved region is taller than the glyphs.
+    static let innerStatusBarCenterY: CGFloat = 47
+    static let innerStatusBarWidth: CGFloat = 120
     // Widest short side of any single-display iPhone.
     static let iPhoneMaxShortSide: CGFloat = 440
 }
@@ -102,10 +114,21 @@ extension ScreenLayout {
             return ScreenLayout(
                 width: width, height: height, isIPhoneDuo: false, insets: insets,
                 insetLeft: 0, insetRight: 0, contentWidth: width,
-                headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: nil
+                headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: nil,
+                statusBarClearance: nil
             )
         }
 
+        var statusBarClearance: StatusBarClearance?
+        let isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight
+        if isInnerPortrait && insets.top >= HeaderMetrics.statusBarMinInset {
+            statusBarClearance = statusBarClusters(reservedRegions, windowWidth: width, topInset: insets.top)
+                ?? StatusBarClearance(left: 0, right: DuoMetrics.innerStatusBarWidth + Spacing.S)
+            // centered on the clock digits; the cluster's region center sits above them
+            headerHeight = DuoMetrics.innerStatusBarCenterY * 2
+            headerStatusBarHeight = 0
+        }
+
         var sideBar: SideBarLayout?
         let sideInset = max(insets.leading, insets.trailing)
         // narrower strips cannot host a control 12pt from the inner edge
@@ -116,7 +139,9 @@ extension ScreenLayout {
             // Activities; region frames already include the system's margin
             let occlusion = stripOcclusion(reservedRegions, stripLeft: stripLeft, stripRight: stripLeft + sideInset, windowHeight: height)
 
-            var top = insets.top + HeaderMetrics.barHeight + Spacing.M
+            var top = statusBarClearance != nil
+                ? headerHeight + Spacing.M
+                : 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
                 if width <= height {
@@ -150,7 +175,8 @@ extension ScreenLayout {
             width: width, height: height, isIPhoneDuo: true, insets: insets,
             insetLeft: insets.leading, insetRight: insets.trailing,
             contentWidth: width - insets.leading - insets.trailing,
-            headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar
+            headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar,
+            statusBarClearance: statusBarClearance
         )
     }
 
@@ -192,6 +218,26 @@ extension ScreenLayout {
         }
     }
 
+    /// How far the clock and battery clusters of a status bar on the top edge reach in from each
+    /// side; nil without reserved regions there.
+    private static func statusBarClusters(_ regions: [CGRect], windowWidth: CGFloat, topInset: CGFloat) -> StatusBarClearance? {
+        let midX = windowWidth / 2
+        let clusters = regions.filter {
+            $0.minY < topInset && $0.maxY <= topInset && ($0.maxX <= midX || $0.minX >= midX)
+        }
+        guard !clusters.isEmpty else { return nil }
+        var left: CGFloat = 0
+        var right: CGFloat = 0
+        for region in clusters {
+            if region.minX < midX {
+                left = max(left, region.maxX)
+            } else {
+                right = max(right, windowWidth - region.minX)
+            }
+        }
+        return StatusBarClearance(left: left, right: right)
+    }
+
     // 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)

package/ios/Navigation/Component/Header.swift

@@ -13,6 +13,8 @@ public let HEADER_HEIGHT: CGFloat = 52
 
 /// Room the back button and toolkit take from the bar (Compose `HEADER_ACTIONS_WIDTH`).
 let headerActionsWidth: CGFloat = 172
+// Extra width the 48pt back and toolkit take on the iPhone Duo status bar row.
+private let statusBarRowActionsExtra: CGFloat = 55
 
 public enum TitlePosition {
     case left, center
@@ -282,7 +284,9 @@ func headerSearchProps(_ props: InputSearchProps, scroll: CGFloat, layout: Scree
 
 /// Max title width: back button and toolkit share the bar unless the iPhone Duo side bar holds them.
 func headerTitleMaxWidth(_ layout: ScreenLayout) -> CGFloat {
-    layout.sideBar != nil ? layout.contentWidth - Spacing.M * 2 : layout.width - headerActionsWidth
+    let clearance = layout.statusBarClearance.map { $0.left + $0.right } ?? 0
+    if layout.sideBar != nil { return layout.contentWidth - Spacing.M * 2 - clearance }
+    return layout.width - headerActionsWidth - (layout.statusBarClearance != nil ? statusBarRowActionsExtra : 0) - clearance
 }
 
 // MARK: - Header
@@ -333,10 +337,22 @@ public struct NavigationHeader: View {
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
+    @State private var headerRightWidth: CGFloat = 0
 
     /// iPhone Duo side bar holds back and the toolkit; a custom header right stays in the bar.
     private var useSideBar: Bool { layout.sideBar != nil }
 
+    /// iPhone Duo inner portrait: the row sits on the status bar, between its clusters, with 48pt controls.
+    private var statusBarRow: Bool { layout.statusBarClearance != nil && !useSideBar }
+
+    /// Max centered title width; on the status bar row the clusters are lopsided, so both sides keep the wider one's room.
+    private var centerTitleMaxWidth: CGFloat {
+        guard let clearance = layout.statusBarClearance else { return (layout.contentWidth - Spacing.M * 2) / 2 }
+        let back = goBack == nil || useSideBar ? 0 : DuoMetrics.controlSize + Spacing.S
+        let inset = max(clearance.left + back, clearance.right + headerRightWidth) + Spacing.S
+        return max(layout.contentWidth - (Spacing.M + inset) * 2, 0)
+    }
+
     private var headerColor: HeaderColor {
         getHeaderColor(
             isAnimated: animatedHeader != nil,
@@ -357,7 +373,16 @@ public struct NavigationHeader: View {
             ZStack {
                 HStack(spacing: 0) {
                     if let goBack, !useSideBar {
-                        BackButton(color: headerColor, onBack: goBack)
+                        if statusBarRow {
+                            SideBarButton(
+                                icon: "arrow-back",
+                                headerColor: headerColor,
+                                accessibilityId: "btn_navigation_back",
+                                action: goBack
+                            )
+                        } else {
+                            BackButton(color: headerColor, onBack: goBack)
+                        }
                         Spacer().frame(width: Spacing.S)
                     }
 
@@ -369,24 +394,36 @@ public struct NavigationHeader: View {
                     }
 
                     if let headerRight, !(useSideBar && toolkitHeaderRight(headerRight) != nil) {
-                        AnyView(headerRight())
-                            .environment(\.headerColor, headerColor)
-                            .background(
-                                GeometryReader { geo in
-                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
-                                }
-                            )
+                        Group {
+                            if statusBarRow, let toolkit = toolkitHeaderRight(headerRight) {
+                                Toolkit(
+                                    headerRight: toolkit.data ?? HeaderRightData(),
+                                    tintColor: toolkit.tintColor,
+                                    layout: .sideBarRow
+                                )
+                            } else {
+                                AnyView(headerRight())
+                            }
+                        }
+                        .environment(\.headerColor, headerColor)
+                        .background(
+                            GeometryReader { geo in
+                                Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                            }
+                        )
                     }
                 }
-                .padding(.horizontal, Spacing.M)
+                .padding(.leading, Spacing.M + (layout.statusBarClearance?.left ?? 0))
+                .padding(.trailing, Spacing.M + (layout.statusBarClearance?.right ?? 0))
 
                 if centerTitle {
                     titleArea(centered: true)
                         // Compose caps a centered title at half the bar
-                        .frame(maxWidth: (layout.contentWidth - Spacing.M * 2) / 2)
+                        .frame(maxWidth: centerTitleMaxWidth)
                         .padding(.horizontal, Spacing.M)
                 }
             }
+            .onPreferenceChange(HeaderRightWidthKey.self) { headerRightWidth = $0 }
             .frame(height: layout.headerBarHeight)
             .overlay(alignment: .bottom) { VerticalShadow(opacity: opacity) }
             // the row starts headerStatusBarHeight below the window top: 0 with the status bar off

package/ios/Navigation/Component/HeaderRight.swift

@@ -158,11 +158,15 @@ private struct NavigationButtonConfig {
     let onPress: () -> Void
 }
 
+/// `sideBarColumn`: the iPhone Duo side bar; `sideBarRow`: the Duo header row on the status bar, same 48pt controls.
+enum ToolkitLayout {
+    case bar, sideBarColumn, sideBarRow
+}
+
 struct Toolkit: View {
     let headerRight: HeaderRightData
     var tintColor: Color?
-    /// iPhone Duo side bar column instead of the bar row.
-    var vertical: Bool = false
+    var layout: ToolkitLayout = .bar
 
     @State private var isFavorite = false
     @State private var isLoading = false
@@ -276,44 +280,46 @@ struct Toolkit: View {
 
     var body: some View {
         Group {
-            if vertical {
-                verticalBody
-            } else {
+            switch layout {
+            case .bar:
                 horizontalBody
+            case .sideBarColumn:
+                VStack(spacing: Spacing.M) { sideBarControls(horizontal: false) }
+            case .sideBarRow:
+                HStack(spacing: Spacing.M) { sideBarControls(horizontal: true) }
             }
         }
         .onAppear(perform: loadFavoriteState)
     }
 
-    private var verticalBody: some View {
+    @ViewBuilder
+    private func sideBarControls(horizontal: Bool) -> some View {
         let config = navigationButtonConfig
         let useHelpCenter = usesHelpCenter(context)
-        return VStack(spacing: Spacing.M) {
-            if showsShortcut(headerRight, context) {
-                SideBarButton(
-                    icon: config.icon,
-                    headerColor: headerColor,
-                    showBadge: headerRight.showBadge,
-                    disabled: isLoading,
-                    action: config.onPress
-                )
-            }
-            SideBarGroup(headerColor: headerColor, itemCount: useHelpCenter ? 2 : 1) {
-                if useHelpCenter {
-                    SideBarGroupItem(
-                        icon: "help_center",
-                        headerColor: headerColor,
-                        accessibilityId: "btn_navigation_help_center",
-                        action: onPressHelpCenter
-                    )
-                }
+        if showsShortcut(headerRight, context) {
+            SideBarButton(
+                icon: config.icon,
+                headerColor: headerColor,
+                showBadge: headerRight.showBadge,
+                disabled: isLoading,
+                action: config.onPress
+            )
+        }
+        SideBarGroup(headerColor: headerColor, itemCount: useHelpCenter ? 2 : 1, horizontal: horizontal) {
+            if useHelpCenter {
                 SideBarGroupItem(
-                    icon: headerRight.closeIcon,
+                    icon: "help_center",
                     headerColor: headerColor,
-                    accessibilityId: "btn_navigation_close",
-                    action: onPressClose
+                    accessibilityId: "btn_navigation_help_center",
+                    action: onPressHelpCenter
                 )
             }
+            SideBarGroupItem(
+                icon: headerRight.closeIcon,
+                headerColor: headerColor,
+                accessibilityId: "btn_navigation_close",
+                action: onPressClose
+            )
         }
     }
 

package/ios/Navigation/Component/SideBar.swift

@@ -70,7 +70,7 @@ struct HeaderSideBar: View {
                     Toolkit(
                         headerRight: toolkit.data ?? HeaderRightData(),
                         tintColor: toolkit.tintColor,
-                        vertical: true
+                        layout: .sideBarColumn
                     )
                     .environment(\.headerColor, headerColor)
                 }
@@ -142,19 +142,26 @@ struct SideBarButton: View {
     }
 }
 
-/// 48pt wide glass capsule grouping related controls, one item per 50pt.
+/// 48pt glass capsule grouping related controls, one item per 50pt: vertical in the side bar,
+/// horizontal on a header row.
 struct SideBarGroup<Content: View>: View {
     let headerColor: HeaderColor
     let itemCount: Int
+    var horizontal: Bool = false
     @ViewBuilder let content: () -> Content
 
     var body: some View {
-        VStack(spacing: 0) { content() }
-            .frame(
-                width: DuoMetrics.controlSize,
-                height: itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
-            )
-            .modifier(SideBarGlass(headerColor: headerColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
+        let length = itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
+        Group {
+            if horizontal {
+                HStack(spacing: 0) { content() }
+                    .frame(width: length, height: DuoMetrics.controlSize)
+            } else {
+                VStack(spacing: 0) { content() }
+                    .frame(width: DuoMetrics.controlSize, height: length)
+            }
+        }
+        .modifier(SideBarGlass(headerColor: headerColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
     }
 }
 

package/ios/Navigation/StackScreen.swift

@@ -618,24 +618,25 @@ private struct SearchAnimatedHeader: View {
         let minTop = rowTop + (layout.headerBarHeight - HEADER_HEIGHT) / 2
         let maxTop = layout.headerHeight - layout.insets.top
         let minSide = Spacing.M
-        let maxStart: CGFloat = hiddenBack || useSideBar ? Spacing.M : 48
-        let maxEnd: CGFloat = useSideBar && hasToolkit
+        // collapsed on the iPhone Duo status bar row, the search stays between its clusters (48pt back there)
+        let clearance = layout.statusBarClearance
+        let backWidth: CGFloat = clearance != nil && !useSideBar ? DuoMetrics.controlSize : 28
+        let maxStart = (clearance?.left ?? 0) + (hiddenBack || useSideBar ? Spacing.M : backWidth + Spacing.M + Spacing.S)
+        let maxEnd = (clearance?.right ?? 0) + (useSideBar && hasToolkit
             ? Spacing.M
-            : headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M)
+            : headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M))
 
         let top = min(max(maxTop - scroll, minTop), maxTop)
         let start = min(max(minSide + scroll, minSide), maxStart)
         let end = min(max(minSide + scroll, minSide), maxEnd)
 
-        VStack(spacing: 0) {
-            Spacer().frame(height: top)
-            InputSearch(props: headerSearchProps(props, scroll: scroll, layout: layout, theme: theme))
-                .frame(height: HEADER_HEIGHT)
-                .padding(.leading, start)
-                .padding(.trailing, end)
-            Spacer(minLength: 0)
-        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+        // padding, not a Spacer: on the iPhone Duo status bar row the collapsed top is above the safe area
+        InputSearch(props: headerSearchProps(props, scroll: scroll, layout: layout, theme: theme))
+            .frame(height: HEADER_HEIGHT)
+            .padding(.leading, start)
+            .padding(.trailing, end)
+            .padding(.top, top)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-duo.17-debug",
+  "version": "0.167.1-duo.18-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},