@momo-kits/native-kits 0.162.44-debug → 0.162.45-debug

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

@@ -43,9 +43,11 @@ private fun getValueForPosition(
     step: Float,
 ): Float {
     val availableSpace = containerWidth - thumbWidth
-    if (availableSpace <= 0f) return min
-    val relStepUnit = step / (max - min)
+    if (availableSpace <= 0f || max <= min) return min
     var relPosition = (positionInView - thumbWidth / 2f) / availableSpace
+    // A zero step would make the snap math NaN, and NaN.roundToInt() throws.
+    if (step <= 0f) return clamp(min + relPosition * (max - min), min, max)
+    val relStepUnit = step / (max - min)
     val relOffset = relPosition % relStepUnit
     relPosition -= relOffset
     if (relOffset / relStepUnit >= 0.5f) relPosition += relStepUnit
@@ -131,6 +133,11 @@ fun Slider(
     var draggingLow by remember { mutableStateOf(true) }
     var isDragging  by remember { mutableStateOf(false) }
 
+    // pointerInput is not keyed on the callbacks, so read their latest values.
+    val currentOnValueChanged by rememberUpdatedState(onValueChanged)
+    val currentOnTouchStart by rememberUpdatedState(onSliderTouchStart)
+    val currentOnTouchEnd by rememberUpdatedState(onSliderTouchEnd)
+
     val thumbColor       = if (disabled) theme.colors.text.disable else theme.colors.primary
     val trackActiveColor = if (disabled) theme.colors.text.disable else theme.colors.primary
     val trackInactiveColor = theme.colors.background.default
@@ -167,7 +174,7 @@ fun Slider(
 
                             draggingLow = disableRange || isLowCloser(touchX, lowCenterX, highCenterX)
                             isDragging  = true
-                            onSliderTouchStart(lowValue, highValue)
+                            currentOnTouchStart(lowValue, highValue)
 
                             // Apply initial press
                             applyDrag(touchX, trackWidthPx, thumbSizePx,
@@ -175,7 +182,7 @@ fun Slider(
                                 lowValue, highValue) { nl, nh ->
                                 lowValue  = nl
                                 highValue = nh
-                                onValueChanged(nl, nh, true)
+                                currentOnValueChanged(nl, nh, true)
                             }
 
                             // Track move / release
@@ -186,7 +193,7 @@ fun Slider(
 
                                 if (!moveChange.pressed) {
                                     isDragging = false
-                                    onSliderTouchEnd(lowValue, highValue)
+                                    currentOnTouchEnd(lowValue, highValue)
                                     break
                                 }
 
@@ -195,7 +202,7 @@ fun Slider(
                                     lowValue, highValue) { nl, nh ->
                                     lowValue  = nl
                                     highValue = nh
-                                    onValueChanged(nl, nh, true)
+                                    currentOnValueChanged(nl, nh, true)
                                 }
                             }
                         }

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

@@ -8,8 +8,10 @@ import androidx.compose.foundation.gestures.detectHorizontalDragGestures
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -62,6 +64,12 @@ fun Swipe(
 
     val offsetX = remember { Animatable(0f) }
 
+    // pointerInput is keyed on the action counts only, so read the latest callbacks.
+    val currentOnOpen by rememberUpdatedState(onSwipeableOpen)
+    val currentOnClose by rememberUpdatedState(onSwipeableClose)
+    val currentOnLeftOpen by rememberUpdatedState(onSwipeableLeftOpen)
+    val currentOnRightOpen by rememberUpdatedState(onSwipeableRightOpen)
+
     val shape = remember(itemRadius) {
         if (itemRadius > 0.dp) RoundedCornerShape(itemRadius) else RoundedCornerShape(0.dp)
     }
@@ -71,17 +79,17 @@ fun Swipe(
             val current = offsetX.value
             val target = when {
                 current > leftWidthPx * 0.5f && left.isNotEmpty() -> {
-                    onSwipeableLeftOpen()
-                    onSwipeableOpen()
+                    currentOnLeftOpen()
+                    currentOnOpen()
                     leftWidthPx
                 }
                 current < -rightWidthPx * 0.5f && right.isNotEmpty() -> {
-                    onSwipeableRightOpen()
-                    onSwipeableOpen()
+                    currentOnRightOpen()
+                    currentOnOpen()
                     -rightWidthPx
                 }
                 else -> {
-                    onSwipeableClose()
+                    currentOnClose()
                     0f
                 }
             }

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

@@ -43,9 +43,10 @@ fun Switch(
 
     val (circleBackgroundColor, backgroundColor) = colors
 
-    // Memoize automation ID to avoid string concatenation on every render
+    // Both params default to "", so blank must fall back too or the id is always empty.
     val automationIdValue = remember(accessibilityId, title, value) {
-        accessibilityId ?: "toggle_${title ?: "unknown"}_$value"
+        accessibilityId?.takeIf { it.isNotEmpty() }
+            ?: "toggle_${title?.takeIf { it.isNotEmpty() } ?: "unknown"}_$value"
     }
 
     // Memoize alignment calculation

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

@@ -10,9 +10,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.drawscope.withTransform
-import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInParent
@@ -73,6 +74,8 @@ fun TabView(
     } else null
 
     val coroutineScope = rememberCoroutineScope()
+    // The collector below outlives recompositions; read the latest callback, not the first one.
+    val currentOnPageSelected by rememberUpdatedState(onPageSelected)
 
     // Keep selectedIndex in sync when user swipes the pager
     if (pagerState != null) {
@@ -80,7 +83,7 @@ fun TabView(
             snapshotFlow { pagerState.currentPage }.collect { page ->
                 if (!lazyRendered.contains(page)) lazyRendered.add(page)
                 selectedIndex = page
-                onPageSelected(page)
+                currentOnPageSelected(page)
             }
         }
     }
@@ -362,7 +365,7 @@ private fun CardTabBar(
             }
         }
 
-        val active = tabs[selectedIndex]
+        val active = tabs.getOrNull(selectedIndex) ?: return@BoxWithConstraints
         Row(
             modifier = Modifier
                 // Pinned to the strip's BOTTOM edge so the two always end on the same
@@ -415,7 +418,8 @@ private val CARD_TAB_HEIGHT = 40.dp
 private val CARD_TAB_ACTIVE_HEIGHT = 44.dp
 @Composable
 private fun CardTabEar(width: Dp, mirrored: Boolean, color: Color, nudge: Dp) {
-    Canvas(modifier = Modifier.offset(x = nudge).width(width).height(CARD_TAB_ACTIVE_HEIGHT)) {
+    // Clipped like react-kits' Svg, whose 28-wide path is cut at a 22pt `pathWidth`.
+    Canvas(modifier = Modifier.offset(x = nudge).width(width).height(CARD_TAB_ACTIVE_HEIGHT).clipToBounds()) {
         val path = Path().apply {
             moveTo(0f, 0f)
             lineTo(0.60765f, 0f)
@@ -425,8 +429,12 @@ private fun CardTabEar(width: Dp, mirrored: Boolean, color: Color, nudge: Dp) {
             lineTo(0f, 44f)
             close()
         }
-        val draw: DrawScope.() -> Unit = { drawPath(path = path, color = color) }
-        if (mirrored) withTransform({ scale(-1f, 1f) }) { draw() } else draw()
+        // Path coordinates are dp (react-kits viewBox), but DrawScope draws in px.
+        val pxPerDp = density
+        withTransform({
+            if (mirrored) scale(-1f, 1f)
+            scale(pxPerDp, pxPerDp, pivot = Offset.Zero)
+        }) { drawPath(path = path, color = color) }
     }
 }
 

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

@@ -30,6 +30,22 @@ enum class TagColor(val backgroundColor: Color, val textColor: Color) {
     Grey(Colors.black_04, Colors.black_12),
 }
 
+// RN only accepts the `_03` palette as a custom tag color.
+private val tagCustomColors = listOf(
+    Colors.black_03,
+    Colors.pink_03,
+    Colors.violet_03,
+    Colors.indigo_03,
+    Colors.blue_03,
+    Colors.mint_03,
+    Colors.green_03,
+    Colors.lime_03,
+    Colors.yellow_03,
+    Colors.gold_03,
+    Colors.orange_03,
+    Colors.red_03,
+)
+
 @Composable
 fun Tag(
     label: String = "Label",
@@ -38,27 +54,9 @@ fun Tag(
     size: TagSize = TagSize.Large,
     customColor: Color? = null,
 ) {
-    val primaryColors = listOf(
-        Color(0xFFF0F0F0),
-        Color(0xFFEB2F96),
-        Color(0xFF962AF0),
-        Color(0xFF4E4BFF),
-        Color(0xFF007AFF),
-        Color(0xFF13C2C2),
-        Color(0xFF34C759),
-        Color(0xFFA0D911),
-        Color(0xFFFFCC00),
-        Color(0xFFFA8C16),
-        Color(0xFFFA541C),
-        Color(0xFFF5222D)
-    )
-    var tagColor = color.backgroundColor
-    var labelColor = color.textColor
-
-    if (primaryColors.contains(customColor)) {
-        tagColor = color.backgroundColor
-        labelColor = color.textColor
-    }
+    val custom = customColor?.takeIf { it in tagCustomColors }
+    val tagColor = custom ?: color.backgroundColor
+    val labelColor = if (custom != null) Colors.black_01 else color.textColor
 
     Box(
         modifier = Modifier

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

@@ -87,8 +87,8 @@ fun Text(
         color ?: theme.colors.text.default
     }
 
-    // Memoize style copy operation
-    val optimizedStyle = remember(style) {
+    // lineHeight is a key: it is scaled, so it changes with the font scale even when style doesn't.
+    val optimizedStyle = remember(style, lineHeight) {
         style.copy(
             fontWeight = null,
             lineHeight = if (lineHeight.value.isFinite() && lineHeight.value > 0) lineHeight else style.lineHeight

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

@@ -21,6 +21,7 @@ import androidx.compose.ui.unit.*
 import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupPositionProvider
 import androidx.compose.ui.window.PopupProperties
+import kotlinx.coroutines.flow.drop
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.activeOpacityClickable
@@ -147,8 +148,10 @@ fun Tooltip(
     val density = LocalDensity.current
     val offsetPx = with(density) { (TOOLTIP_OFFSET + ARROW_SIZE).roundToPx() }
 
-    LaunchedEffect(state.isVisible) {
-        onVisibleChange?.invoke(state.isVisible)
+    val currentOnVisibleChange by rememberUpdatedState(onVisibleChange)
+    LaunchedEffect(state) {
+        // changes only, like RN: the initial value is not reported
+        snapshotFlow { state.isVisible }.drop(1).collect { currentOnVisibleChange?.invoke(it) }
     }
 
     Box(modifier = modifier) {

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

@@ -128,11 +128,13 @@ fun getHours(hourMode: Int): List<String> {
  * Get a list of minutes
  */
 fun getMinutes(interval: Int): List<String> {
+    // A non-positive interval would never reach 60.
+    val step = interval.coerceAtLeast(1)
     val minutes = mutableListOf<String>()
     var min = 0
     while (min < 60) {
         minutes.add(paddingNum(min))
-        min += interval
+        min += step
     }
     return minutes
 }

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

@@ -154,22 +154,14 @@ internal fun WheelPickerItem(
             .fillMaxWidth()
             .height(itemHeight)
             .graphicsLayer {
-                val firstVisibleIndex = listState.firstVisibleItemIndex
-                val visibleItemOffset = listState.firstVisibleItemScrollOffset
-
-                val viewportHeight = 5 * itemHeight.value
-                val itemHeightValue = itemHeight.value
-
-                val absoluteOffset =
-                    (index - firstVisibleIndex) * itemHeightValue - (visibleItemOffset / itemHeightValue)
-                val relativePosition = absoluteOffset / viewportHeight
-
-                val distance = abs(2 - relativePosition)
-
+                // Rows away from the centre slot (two below the first visible row); RN fades 1 → 0.8 → 0.4.
+                val distance = abs(
+                    index - listState.firstVisibleItemIndex -
+                        listState.firstVisibleItemScrollOffset / itemHeight.toPx() - 2
+                )
                 alpha = when {
-                    distance <= 1 -> 1f
-                    distance <= 2 -> 0.8f
-                    distance <= 3 -> 0.4f
+                    distance <= 1f -> 1f - 0.2f * distance
+                    distance <= 2f -> 0.8f - 0.4f * (distance - 1f)
                     else -> 0.4f
                 }
             },

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -26,7 +26,8 @@ fun scaleSize(size: Float): Float {
         return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
     }
     val scaleSizeMaxRate: Float = MAX_FONT_SCALE
-    val deviceWidth = getScreenDimensions().width
+    // Short side, not width: landscape must not inflate every font.
+    val deviceWidth = getScreenDimensions().let { minOf(it.width, it.height) }
     val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
 
     val density = LocalDensity.current

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

@@ -9,7 +9,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.platform.getScreenDimensions
 import kotlin.math.floor
 
 internal data class GridContext(
@@ -24,7 +23,7 @@ internal data class GridContext(
 internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
 @Composable
-internal fun gridColumns(): Int = if (getScreenDimensions().width > 600) 24 else 12
+internal fun gridColumns(): Int = if (getScreenLayout().contentWidth > 600.dp) 24 else 12
 
 @Composable
 internal fun gridContext(maxWidthPx: Int, columns: Int, gap: Dp): GridContext {

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

@@ -0,0 +1,314 @@
+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
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.platform.LocalWindowInfo
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.platform.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
+
+enum class SideBarEdge { LEFT, RIGHT }
+
+@Immutable
+data class SideBarLayout(
+    val edge: SideBarEdge,
+    val width: Dp,
+    // Preferred window y of the first control; the column is still kept above footer and bottom bars.
+    val top: Dp,
+    // 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,
+    val headerHeight: Dp,
+    // 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
+    val headerStatusBarHeight: Dp,
+    // iPhone Duo moves back and toolkit into a column in the side safe area; null while they stay in the bar.
+    val sideBar: SideBarLayout? = null,
+    // 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
+}
+
+// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
+internal object DuoMetrics {
+    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
+    const val MAX_ASPECT_RATIO = 1.6f
+    val controlSize = 48.dp
+    val itemPitch = 50.dp
+    // Portrait: below the camera/clock cluster in the strip (ends near y 151).
+    val firstItemTop = 170.dp
+    // 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
+    // Host app's iOS 26 tab bar on the inner display in portrait: a 62pt glass pill sized to its tabs,
+    // QR as a 62pt platter beside it, ≥ 20pt from the sides, 13pt into the home indicator inset.
+    val floatingTabBarHeight = 62.dp
+    val floatingTabBarMargin = 20.dp
+    val floatingTabBarInsetOverlap = 13.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.
+private val STATUS_BAR_MIN_INSET = 20.dp
+
+internal val LocalScreenLayout = compositionLocalOf<ScreenLayout?> { null }
+
+// Port of RN `useScreenLayout`; follows fold/unfold and rotation through the window size and safe area.
+@Composable
+fun getScreenLayout(): ScreenLayout =
+    LocalScreenLayout.current ?: calculateScreenLayout(getAppStatusBarHeight())
+
+@Composable
+internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null): ScreenLayout {
+    val isPhone = isPhoneIdiom()
+    if (parent != null) {
+        // 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
+    val layoutDirection = LocalLayoutDirection.current
+    val size = LocalWindowInfo.current.containerSize
+    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, bottomPx, topInset, screen, density, reservedRegions) {
+        with(density) {
+            val width = size.width.toDp()
+            val height = size.height.toDp()
+            screenLayoutOf(
+                width = width,
+                height = height,
+                insetLeft = leftPx.toDp(),
+                insetRight = rightPx.toDp(),
+                topInset = topInset,
+                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,
+            )
+        }
+    }
+}
+
+// Content inside the safe-area padding: the insets are spent and the side bar belongs to the screen.
+internal fun ScreenLayout.consumeHorizontalInsets(): ScreenLayout =
+    copy(width = contentWidth, insetLeft = 0.dp, insetRight = 0.dp, sideBar = null)
+
+// 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.
+private fun isIPhoneDuoWindow(width: Dp, height: Dp, asymmetricInsets: Boolean): Boolean {
+    val shortSide = minOf(width, height)
+    if (shortSide <= 0.dp) return asymmetricInsets
+    return maxOf(width, height) / shortSide < DuoMetrics.MAX_ASPECT_RATIO || asymmetricInsets
+}
+
+private fun screenLayoutOf(
+    width: Dp,
+    height: Dp,
+    insetLeft: Dp,
+    insetRight: Dp,
+    topInset: Dp,
+    bottomInset: Dp,
+    isPhone: Boolean,
+    asymmetricInsets: Boolean,
+    isDuoDevice: Boolean,
+    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
+    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.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 = edge,
+            width = sideInset,
+            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,
+    )
+}