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

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

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

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

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -51,6 +52,10 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.getScreenHeight
+import vn.momo.kits.layout.getScreenLayout
+
+// iPhone Duo inner display: center the sheet instead of spanning the width (RN BottomSheet).
+private val DUO_REGULAR_MIN_WIDTH = 600.dp
 
 @Composable
 internal fun BottomSheet(
@@ -63,7 +68,11 @@ internal fun BottomSheet(
     footerComponent: (@Composable () -> Unit)? = null,
     onDismiss: (() -> Unit)?
 ) {
-    val screenHeightDp = getScreenHeight()
+    val layout = getScreenLayout()
+    val isDuo = layout.isIPhoneDuoDevice
+    val isDuoCentered = isDuo && layout.width >= DUO_REGULAR_MIN_WIDTH
+    // the screen is the outer display on iPhone Duo, even when unfolded
+    val screenHeightDp = if (isDuo) layout.height else getScreenHeight()
     val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
     val sheetOffset = remember { Animatable(screenHeightPx) }
 
@@ -148,13 +157,32 @@ internal fun BottomSheet(
             }
     ) {
         val parentHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() }
+        val maxHeight = if (isDuo) {
+            parentHeight - maxOf(layout.duoTopInset, Spacing.XL)
+        } else {
+            parentHeight - 90.dp
+        }
+        // landscape side buttons span the full height; in portrait the side status bar only covers the top
+        val sideInset = isDuo && !isDuoCentered && layout.width > layout.height
 
         Box(
             modifier = Modifier
                 .align(Alignment.BottomCenter)
                 .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
-                .fillMaxWidth()
-                .heightIn(max = parentHeight - 90.dp)
+                .then(
+                    if (isDuoCentered) {
+                        // keeps the portrait width in landscape, like system sheets
+                        Modifier.width(
+                            minOf(
+                                minOf(layout.width, layout.height) - Spacing.L * 2,
+                                layout.width - maxOf(layout.insetLeft, layout.insetRight, Spacing.L) * 2,
+                            )
+                        )
+                    } else {
+                        Modifier.fillMaxWidth()
+                    }
+                )
+                .heightIn(max = maxHeight)
                 .background(
                     color = if (isSurface) AppTheme.current.colors.background.surface else AppTheme.current.colors.background.default,
                     shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M)
@@ -168,7 +196,13 @@ internal fun BottomSheet(
             val bottomInset = if (useBottomInset) {
                 (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
             } else 0.dp
-            Column(Modifier.padding(bottom = bottomInset)) {
+            Column(
+                Modifier
+                    .padding(bottom = bottomInset)
+                    .conditional(sideInset) {
+                        absolutePadding(left = layout.insetLeft, right = layout.insetRight)
+                    }
+            ) {
                 Box(
                     modifier = Modifier
                         .height(72.dp)
@@ -249,6 +283,11 @@ internal fun BottomSheet(
                         content()
                     }
                     BottomSheetFooter(footerComponent)
+                } else if (isDuo) {
+                    // content shrinks so a tall sheet keeps its header
+                    Box(Modifier.weight(1f, fill = false)) {
+                        content()
+                    }
                 } else {
                     content()
                 }

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

@@ -9,6 +9,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -25,6 +26,7 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.layout.getScreenLayout
 
 @Composable
 internal fun ModalScreen(
@@ -100,12 +102,18 @@ internal fun ModalScreen(
         closeEvent()
     }
 
+    val layout = getScreenLayout()
+
     Box(
         modifier = Modifier
             .fillMaxSize()
             .background(Color.Black.copy(alpha = 0.6f * alpha.value))
             .noFeedbackClickable {
                 if(barrierDismissible) closeEvent()
+            }
+            // center below the side status bar and above the home indicator
+            .conditional(layout.isIPhoneDuoDevice) {
+                padding(top = layout.duoTopInset, bottom = layout.insetBottom)
             },
         contentAlignment = Alignment.Center
     ) {

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

@@ -30,6 +30,9 @@ class Navigation(
         headerType: HeaderType? = null,
         scrollData: ScrollData? = null,
         backgroundColor: Color? = null,
+        // AI-GENERATED START: custom screen background
+        backgroundComponent: (@Composable () -> Unit)? = null,
+        // AI-GENERATED END: custom screen background
         tintColor: Color? = null,
         footerComponent: (@Composable () -> Unit)? = null,
         footerTransparent: Boolean? = null,
@@ -48,6 +51,9 @@ class Navigation(
                 headerType = headerType ?: options.headerType,
                 scrollData = scrollData ?: options.scrollData,
                 backgroundColor = backgroundColor ?: options.backgroundColor,
+                // AI-GENERATED START: custom screen background
+                backgroundComponent = backgroundComponent ?: options.backgroundComponent,
+                // AI-GENERATED END: custom screen background
                 tintColor = tintColor ?: options.tintColor,
                 footerComponent = footerComponent ?: options.footerComponent,
                 footerTransparent = footerTransparent ?: options.footerTransparent,
@@ -85,6 +91,10 @@ data class NavigationOptions(
     val headerType: HeaderType = HeaderType.Default(),
     val scrollData: ScrollData = ScrollData(),
     val backgroundColor: Color? = null,
+    // AI-GENERATED START: custom screen background (SwiftUI `NavigationOptions.background`)
+    /** Drawn instead of `backgroundColor` over the whole screen: under the header, outside the keyboard padding. */
+    val backgroundComponent: @Composable (() -> Unit)? = null,
+    // AI-GENERATED END: custom screen background (SwiftUI `NavigationOptions.background`)
     val tintColor: Color? = null,
     val footerComponent: @Composable (() -> Unit)? = null,
     val footerTransparent: Boolean = false,