@momo-kits/native-kits 0.168.1-beta.1-debug → 0.168.1-beta.10-debug

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

@@ -2,8 +2,12 @@ package vn.momo.kits.navigation.bottomtab
 
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -15,6 +19,7 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
@@ -23,25 +28,33 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.AbsoluteAlignment
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.components.Badge
 import vn.momo.kits.components.BadgeDot
 import vn.momo.kits.components.DotSize
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.layout.DuoMetrics
@@ -59,14 +72,18 @@ private val RAIL_GAP = Spacing.XXS
 // selection bubble overflows the 48 rail cell by 5 above and below
 private val RAIL_BUBBLE_WIDTH = 44.dp
 private val RAIL_BUBBLE_HEIGHT = 58.dp
-private val FLOATING_HEIGHT = 62.dp
+private val FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight
 private val FLOATING_PADDING = Spacing.XS
-private val FLOATING_QR_SIZE = 44.dp
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-private const val GRID_COLUMNS = 8
-private const val GRID_SPAN = 6
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+private val FLOATING_ITEM_WIDTH = 80.dp
+// while pressed the selection bubble grows into a lens past the pill's edges
+private const val LENS_SCALE_X = 1.2f
+private const val LENS_SCALE_Y = 1.3f
+// Figma Home-2026 tab bar "Selection": brand pink at 8%
+private const val SELECTION_TINT_ALPHA = 0x14 / 255f
 // RN reanimated spring { damping: 18, stiffness: 220, mass: 0.8 }
 private val BUBBLE_SPRING = spring<Dp>(dampingRatio = 0.68f, stiffness = 275f, visibilityThreshold = Dp(0.5f))
+private val LENS_SPRING = spring<Float>(dampingRatio = 0.68f, stiffness = 275f)
 
 // Space from the window bottom the rail stack and its gap take, so the header side bar stays above it.
 internal val LocalDuoRailReserve = compositionLocalOf { 0.dp }
@@ -78,11 +95,15 @@ internal fun duoRailHeight(itemCount: Int, hasQr: Boolean, compressed: Boolean =
     return rail + if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
 }
 
+// Overlaps the home indicator inset like the system tab bar (21pt above the bottom with a 34pt inset).
+private fun floatingTabBarBottom(insetBottom: Dp): Dp =
+    maxOf(insetBottom - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S)
+
 // Space tab content leaves under the floating bar; 0 when the rail sits in the side strip or off Duo.
 internal fun duoFloatingTabBarInset(layout: ScreenLayout): Dp =
-    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + Spacing.M + layout.insetBottom else 0.dp
+    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + floatingTabBarBottom(layout.insetBottom) else 0.dp
 
-// iPhone Duo tab bar: glass rail in the side bar, or a floating glass bar when unfolded portrait.
+// iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait.
 @Composable
 internal fun BoxScope.DuoTabBar(
     layout: ScreenLayout,
@@ -147,18 +168,19 @@ private fun BoxScope.DuoRailTabBar(
     }
 }
 
-// Glass column of tab items with the sliding selection bubble.
+// Column of icon-only tab items with the sliding selection bubble.
 @Composable
 private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (Int) -> Unit) {
+    val pressedIndex = remember { mutableStateOf<Int?>(null) }
     val bubbleOffset by animateDpAsState(
-        targetValue = (ITEM_SIZE + RAIL_GAP) * selectedIndex.coerceAtLeast(0),
+        targetValue = (ITEM_SIZE + RAIL_GAP) * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
         animationSpec = BUBBLE_SPRING,
         label = "DuoRailBubble",
     )
     Box(
         Modifier
             .width(ITEM_SIZE)
-            .tabBarMaterial(RoundedCornerShape(Radius.XL))
+            .tabBarMaterial(CircleShape)
             .setAutomationId("bottom_tab_bar")
     ) {
         Box(
@@ -168,7 +190,7 @@ private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (I
                     y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
                 )
                 .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
-                .background(AppTheme.current.colors.background.selected, CircleShape)
+                .selectionLens(pressedIndex.value != null)
         )
         Column(
             modifier = Modifier.padding(vertical = RAIL_PADDING),
@@ -178,7 +200,7 @@ private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (I
                 Box(
                     modifier = Modifier
                         .size(ITEM_SIZE)
-                        .noFeedbackClickable { onItemClick(index) },
+                        .tabClickable(index, pressedIndex) { onItemClick(index) },
                     contentAlignment = Alignment.Center,
                 ) {
                     DuoTabIcon(item, selected = index == selectedIndex)
@@ -188,6 +210,7 @@ private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (I
     }
 }
 
+// Floating labelled bar for the unfolded portrait display, QR pinned in its own platter beside it.
 @Composable
 private fun BoxScope.DuoFloatingTabBar(
     layout: ScreenLayout,
@@ -196,73 +219,115 @@ private fun BoxScope.DuoFloatingTabBar(
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
 ) {
-    val columnWidth = (layout.width - Spacing.M * 2 - Spacing.M * (GRID_COLUMNS - 1)) / GRID_COLUMNS
-    val barWidth = columnWidth * GRID_SPAN + Spacing.M * (GRID_SPAN - 1)
-    val useQr = floatingButton != null && items.size % 2 == 0
-    val middle = items.size / 2
-    val cellCount = items.size + if (useQr) 1 else 0
-    val visualIndex = if (useQr && selectedIndex >= middle) selectedIndex + 1 else selectedIndex
+    val pressedIndex = remember { mutableStateOf<Int?>(null) }
 
-    Box(
+    Row(
         modifier = Modifier
             .align(Alignment.BottomCenter)
-            .padding(bottom = layout.insetBottom + Spacing.M)
-            .width(barWidth)
-            .height(FLOATING_HEIGHT)
-            .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
-            .padding(FLOATING_PADDING)
-            .setAutomationId("bottom_tab_bar")
-    ) {
-        BoxWithConstraints(Modifier.fillMaxSize()) {
-            val cellWidth = maxWidth / cellCount
-            val bubbleOffset by animateDpAsState(
-                targetValue = cellWidth * visualIndex.coerceAtLeast(0),
-                animationSpec = BUBBLE_SPRING,
-                label = "DuoFloatingBubble",
+            .fillMaxWidth()
+            .absolutePadding(
+                left = layout.insetLeft + DuoMetrics.floatingTabBarMargin,
+                right = layout.insetRight + DuoMetrics.floatingTabBarMargin,
             )
-            Box(
-                Modifier
-                    .offset(x = bubbleOffset)
-                    .width(cellWidth)
-                    .fillMaxHeight()
-                    .background(AppTheme.current.colors.background.selected, CircleShape)
-            )
-            Row(Modifier.fillMaxSize()) {
-                items.forEachIndexed { index, item ->
-                    if (useQr && index == middle) {
-                        Box(Modifier.weight(1f).fillMaxHeight(), contentAlignment = Alignment.Center) {
-                            QrButton(floatingButton, size = FLOATING_QR_SIZE)
+            .padding(bottom = floatingTabBarBottom(layout.insetBottom)),
+        horizontalArrangement = Arrangement.spacedBy(Spacing.S, Alignment.CenterHorizontally),
+    ) {
+        Box(
+            modifier = Modifier
+                .weight(1f, fill = false)
+                .width(FLOATING_ITEM_WIDTH * items.size + FLOATING_PADDING * 2)
+                .height(FLOATING_HEIGHT)
+                .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
+                .padding(FLOATING_PADDING)
+                .setAutomationId("bottom_tab_bar")
+        ) {
+            BoxWithConstraints(Modifier.fillMaxSize()) {
+                val cellWidth = maxWidth / items.size.coerceAtLeast(1)
+                val bubbleOffset by animateDpAsState(
+                    targetValue = cellWidth * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
+                    animationSpec = BUBBLE_SPRING,
+                    label = "DuoFloatingBubble",
+                )
+                Box(
+                    Modifier
+                        .offset(x = bubbleOffset)
+                        .width(cellWidth)
+                        .fillMaxHeight()
+                        .selectionLens(pressedIndex.value != null)
+                )
+                Row(Modifier.fillMaxSize()) {
+                    items.forEachIndexed { index, item ->
+                        FloatingCell(item, selected = index == selectedIndex, index, pressedIndex) {
+                            onTabSelected(index)
                         }
                     }
-                    FloatingCell(item, selected = index == selectedIndex) { onTabSelected(index) }
                 }
             }
         }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = FLOATING_HEIGHT, Modifier.shadow(3.dp, CircleShape))
+        }
     }
 }
 
 @Composable
-private fun RowScope.FloatingCell(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+private fun RowScope.FloatingCell(
+    item: BottomTabItem,
+    selected: Boolean,
+    index: Int,
+    pressedIndex: MutableState<Int?>,
+    onClick: () -> Unit,
+) {
     val colors = AppTheme.current.colors
     Column(
         modifier = Modifier
             .weight(1f)
             .fillMaxHeight()
-            .noFeedbackClickable(onClick = onClick),
+            .tabClickable(index, pressedIndex, onClick),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(Spacing.XXS, Alignment.CenterVertically),
     ) {
         DuoTabIcon(item, selected)
-        Text(
-            text = item.label,
-            style = Typography.labelXsMedium,
-            color = if (selected) colors.primary else colors.text.default,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
+        // like the system tab bar the label keeps its design size; Text grows it up to 5pt on the wide Duo displays
+        val context = LocalContext.current
+        val fixedScale = remember(context) {
+            (context ?: MiniAppContext()).copy(userScaleRate = 1f, useOSScaleRate = false)
+        }
+        CompositionLocalProvider(LocalContext provides fixedScale) {
+            Text(
+                text = item.label,
+                style = Typography.labelXsMedium,
+                color = if (selected) colors.primary else colors.text.hint,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
     }
 }
 
+// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
+@Composable
+private fun Modifier.tabClickable(index: Int, pressedIndex: MutableState<Int?>, onClick: () -> Unit): Modifier {
+    val interactionSource = remember { MutableInteractionSource() }
+    val pressed by interactionSource.collectIsPressedAsState()
+    LaunchedEffect(pressed) {
+        if (pressed) pressedIndex.value = index
+        else if (pressedIndex.value == index) pressedIndex.value = null
+    }
+    return clickable(interactionSource = interactionSource, indication = null, role = Role.Tab, onClick = onClick)
+}
+
+// Selection bubble; while pressed it grows into a lens (80x54 to about 96x70).
+@Composable
+private fun Modifier.selectionLens(pressed: Boolean): Modifier {
+    val lens by animateFloatAsState(if (pressed) 1f else 0f, LENS_SPRING, label = "DuoSelectionLens")
+    val tint = AppTheme.current.colors.primary.copy(alpha = SELECTION_TINT_ALPHA)
+    return graphicsLayer {
+        scaleX = 1 + lens * (LENS_SCALE_X - 1)
+        scaleY = 1 + lens * (LENS_SCALE_Y - 1)
+    }.background(tint, CircleShape)
+}
+
 @Composable
 private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
     val colors = AppTheme.current.colors
@@ -271,7 +336,7 @@ private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
         Icon(
             source = item.icon,
             size = ICON_SIZE,
-            color = if (selected) colors.primary else colors.text.default,
+            color = if (selected) colors.primary else colors.text.hint,
         )
         when {
             badgeLabel == null && !item.showDot -> Unit
@@ -288,9 +353,9 @@ private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
 }
 
 @Composable
-private fun QrButton(data: BottomTabFloatingButton, size: Dp) {
+private fun QrButton(data: BottomTabFloatingButton, size: Dp, modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(size)
             .clip(CircleShape)
             .background(AppTheme.current.colors.primary)
@@ -302,7 +367,7 @@ private fun QrButton(data: BottomTabFloatingButton, size: Dp) {
     }
 }
 
-// RN falls back to this when native glass is missing; Compose has no backdrop blur, so it always does.
+// RN BarMaterial: surface with a 1dp border.
 @Composable
 private fun Modifier.tabBarMaterial(shape: Shape): Modifier {
     val colors = AppTheme.current.colors

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

@@ -97,7 +97,7 @@ internal fun headerTitleMaxWidth(): Dp {
 // Scroll distance over which the Duo glass bar fades in.
 private val DUO_GLASS_FADE_DISTANCE = 16.dp
 
-// RN DuoGlassBackground fallback: translucent surface with a hairline once content scrolls under it.
+// RN DuoGlassBackground: translucent surface with a hairline once content scrolls under it.
 @Suppress("FrequentlyChangingValue")
 @Composable
 private fun Modifier.duoGlassBar(): Modifier {

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

@@ -90,7 +90,9 @@ internal fun HeaderBackground() {
             .fillMaxWidth()
             .then(if (fillsBox && !theme.isHeaderImage()) Modifier.fillMaxHeight() else Modifier.height(maxHeight))
             .conditional(!theme.isHeaderImage()) {
-                background(Brush.verticalGradient(colors = listOf(color, backgroundColor)))
+                // RN spans the gradient over 375:154 and clips it, so a default header shows only its top
+                val endY = if (fillsBox) Float.POSITIVE_INFINITY else with(density) { maxHeight.toPx() }
+                background(Brush.verticalGradient(colors = listOf(color, backgroundColor), endY = endY))
             }
         ){
             if (!theme.isHeaderImage()) return@Box

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

@@ -8,13 +8,13 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
+import vn.momo.kits.application.DesignSystemKits
 import vn.momo.kits.components.Text
-import vn.momo.kits.const.KitDesignSystem
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.setAutomationId
 
 internal val headerFontFamily: String?
-    get() = if (KitDesignSystem.isWhiteList) "MoMoTrustDisplay" else null
+    get() = if (DesignSystemKits.getConfigs().isWhiteList) "MoMoTrustDisplay" else null
 
 @Composable
 internal fun HeaderTitle(

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

@@ -7,7 +7,14 @@ import androidx.compose.ui.unit.Dp
 @Immutable
 internal data class ReservedRegion(val x: Dp, val y: Dp, val width: Dp, val height: Dp)
 
-// Regions the system occludes (iOS 27.1+), in the coordinates of the Compose root view: the
-// iPhone Duo camera, and the status bar cluster as it grows for a call or a Live Activity.
+// occlusion: regions the system occludes (iOS 27.1+), in the coordinates of the Compose root view:
+// the iPhone Duo camera, and the status bar cluster as it grows for a call or a Live Activity.
+// isFoldable: the device reports a `.division` (hinge) region, Apple's foldable check.
+@Immutable
+internal data class ReservedRegions(
+    val occlusion: List<ReservedRegion> = emptyList(),
+    val isFoldable: Boolean = false,
+)
+
 @Composable
-internal expect fun rememberReservedRegions(): List<ReservedRegion>
+internal expect fun rememberReservedRegions(): ReservedRegions

package/compose/src/iosMain/kotlin/vn/momo/kits/const/HostFont.ios.kt

@@ -5,6 +5,7 @@ package vn.momo.kits.const
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.platform.Font
 import kotlinx.cinterop.ExperimentalForeignApi
 import kotlinx.cinterop.addressOf
@@ -15,7 +16,7 @@ import platform.Foundation.dataWithContentsOfFile
 import platform.posix.memcpy
 
 @Composable
-internal actual fun hostFontFamily(fileName: String): FontFamily? = remember(fileName) {
+internal actual fun hostFontFamily(fileName: String, weight: FontWeight): FontFamily? = remember(fileName, weight) {
     val name = fileName.substringBeforeLast('.')
     val ext = fileName.substringAfterLast('.', "")
     // Font từ font-source nằm rời ở bundle root, không nằm trong compose-resources.
@@ -26,6 +27,7 @@ internal actual fun hostFontFamily(fileName: String): FontFamily? = remember(fil
             getData = {
                 NSData.dataWithContentsOfFile(path)?.toByteArray() ?: ByteArray(0)
             },
+            weight = weight,
         ),
     )
 }

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

@@ -9,9 +9,15 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.uikit.LocalUIViewController
 import androidx.compose.ui.unit.dp
 import kotlinx.cinterop.BetaInteropApi
+import kotlinx.cinterop.CFunction
+import kotlinx.cinterop.COpaquePointer
 import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.interpretCPointer
 import kotlinx.cinterop.interpretObjCPointer
+import kotlinx.cinterop.interpretObjCPointerOrNull
+import kotlinx.cinterop.invoke
 import kotlinx.cinterop.objcPtr
+import kotlinx.cinterop.reinterpret
 import kotlinx.cinterop.readValue
 import kotlinx.cinterop.useContents
 import platform.CoreGraphics.CGRectZero
@@ -25,18 +31,54 @@ import platform.UIKit.UIViewAutoresizingFlexibleHeight
 import platform.UIKit.UIViewAutoresizingFlexibleWidth
 import platform.darwin.NSObject
 import platform.Foundation.NSClassFromString
+import platform.posix.RTLD_DEFAULT
+import platform.posix.dlsym
 
 // The API is newer than the SDK Kotlin/Native binds, so it is reached through the runtime.
 @OptIn(ExperimentalForeignApi::class)
 private val regionsOfKind = NSSelectorFromString("reservedRegionsOfKind:")
 
+@OptIn(ExperimentalForeignApi::class)
+private val regionsOfKindOptions = NSSelectorFromString("reservedRegionsOfKind:options:")
+
+// a hinge never goes away, so a positive answer is kept for every later container
+private var isKnownFoldable = false
+
 @OptIn(ExperimentalForeignApi::class, BetaInteropApi::class)
-private fun UIView.occlusionRegions(target: UIView): List<ReservedRegion> {
-    if (window == null || !respondsToSelector(regionsOfKind)) return emptyList()
+private fun regionKind(name: String): Any? {
     // a class object fails `as? NSObjectProtocol` (K/N checks it as an instance), so it is reinterpreted
     val kindClass = NSClassFromString("UIViewReservedRegionKind")
-        ?.let { interpretObjCPointer<NSObject>(it.objcPtr()) } ?: return emptyList()
-    val kind = kindClass.performSelector(NSSelectorFromString("occlusionRegionKind")) ?: return emptyList()
+        ?.let { interpretObjCPointer<NSObject>(it.objcPtr()) } ?: return null
+    return kindClass.performSelector(NSSelectorFromString(name))
+}
+
+// performSelector cannot pass the NSUInteger options, so objc_msgSend is called with the method's own signature.
+@OptIn(ExperimentalForeignApi::class)
+private val msgSendRegionsOfKindOptions = dlsym(RTLD_DEFAULT, "objc_msgSend")
+    ?.reinterpret<CFunction<(COpaquePointer?, COpaquePointer?, COpaquePointer?, ULong) -> COpaquePointer?>>()
+
+// Apple's foldable check: only a device with a hinge reports a `.division` region, inactive while
+// flat (UIViewReservedRegionQueryOptionsIncludeInactive) but still there. Screen size cannot tell it
+// apart from a large iPhone in landscape or a narrowed window.
+@OptIn(ExperimentalForeignApi::class)
+private fun UIView.hasDivisionRegion(): Boolean {
+    if (window == null || !respondsToSelector(regionsOfKindOptions)) return false
+    val msgSend = msgSendRegionsOfKindOptions ?: return false
+    val kind = regionKind("divisionRegionKind") as? NSObject ?: return false
+    val result = msgSend(
+        interpretCPointer(objcPtr()),
+        regionsOfKindOptions,
+        interpretCPointer(kind.objcPtr()),
+        1uL,
+    )
+    val regions = interpretObjCPointerOrNull<NSArray>(result?.rawValue ?: return false)
+    return (regions?.count ?: 0uL) > 0uL
+}
+
+@OptIn(ExperimentalForeignApi::class)
+private fun UIView.occlusionRegions(target: UIView): List<ReservedRegion> {
+    if (window == null || !respondsToSelector(regionsOfKind)) return emptyList()
+    val kind = regionKind("occlusionRegionKind") ?: return emptyList()
     val regions = when (val result = performSelector(regionsOfKind, withObject = kind)) {
         is List<*> -> result
         is NSArray -> List(result.count.toInt()) { result.objectAtIndex(it.toULong()) }
@@ -54,9 +96,9 @@ private fun UIView.occlusionRegions(target: UIView): List<ReservedRegion> {
 // when they change, so nothing polls.
 @OptIn(ExperimentalForeignApi::class)
 private class ReservedRegionsProbe(
-    private val onChange: (List<ReservedRegion>) -> Unit,
+    private val onChange: (ReservedRegions) -> Unit,
 ) : UIView(frame = CGRectZero.readValue()) {
-    private var last: List<ReservedRegion>? = null
+    private var last: ReservedRegions? = null
 
     init {
         userInteractionEnabled = false
@@ -65,7 +107,9 @@ private class ReservedRegionsProbe(
 
     override fun layoutSubviews() {
         super.layoutSubviews()
-        val regions = superview?.let { occlusionRegions(it) } ?: emptyList()
+        // re-read until found: the window may not report the hinge on the first pass
+        if (!isKnownFoldable) isKnownFoldable = hasDivisionRegion()
+        val regions = ReservedRegions(superview?.let { occlusionRegions(it) } ?: emptyList(), isKnownFoldable)
         if (regions != last) {
             last = regions
             onChange(regions)
@@ -80,10 +124,10 @@ private class ReservedRegionsProbe(
 
 @OptIn(ExperimentalForeignApi::class)
 @Composable
-internal actual fun rememberReservedRegions(): List<ReservedRegion> {
-    if (!isPhoneIdiom()) return emptyList()
+internal actual fun rememberReservedRegions(): ReservedRegions {
+    if (!isPhoneIdiom()) return ReservedRegions()
     val host = LocalUIViewController.current.view
-    var regions by remember { mutableStateOf(emptyList<ReservedRegion>()) }
+    var regions by remember { mutableStateOf(ReservedRegions(isFoldable = isKnownFoldable)) }
     DisposableEffect(host) {
         val probe = ReservedRegionsProbe { regions = it }
         probe.setFrame(host.bounds)

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.168.1-beta.1
+version=0.167.1-beta.22
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/ApplicationEnvironment.swift

@@ -17,8 +17,8 @@ public class MiniAppContext {
     public var toolkitConfig: [String: Any] = [:]
     public var providerId: String = "momo"
     public var permissions: [[String: Any]] = []
-    // Per-mini-app font-scale override; nil falls back to FontScaleStore. Mirrors Compose's
-    // MiniAppContext.userScaleRate / useOSScaleRate, which win per field over KitFontScale.
+    // Per-mini-app font-scale override; nil falls back to DesignSystemKits. Mirrors Compose's
+    // MiniAppContext.userScaleRate / useOSScaleRate, which win per field over DesignSystemKits.
     public var userScaleRate: CGFloat? = nil
     public var useOSScaleRate: Bool? = nil
 
@@ -37,10 +37,11 @@ public class MiniAppContext {
     }
 }
 
-public class KitConfig {
-    public var trustBanner: TrustBannerData? = nil
-    public var headerBar: String? = nil
-    public var headerGradient: String? = nil
+// Value type so DesignSystemKitsConfigs can dedupe host pushes; mirrors Compose's DesignSystemConfig.
+public struct KitConfig: Equatable {
+    public var trustBanner: TrustBannerData?
+    public var headerBar: String?
+    public var headerGradient: String?
 
     public init(trustBanner: TrustBannerData? = nil, headerBar: String? = nil, headerGradient: String? = nil) {
         self.trustBanner = trustBanner

package/ios/Application/DesignSystemKits.swift

@@ -0,0 +1,100 @@
+// File: ios/Application/DesignSystemKits.swift
+// Created At: 2026-10-02 14:17:29 +07:00
+// Created By: AI
+// AI Agent: Claude Code
+// Model: claude-opus-5-5
+
+// AI-GENERATED START: app-wide design-system holder mirroring Compose's DesignSystemKits
+import SwiftUI
+
+/// Host-owned design-system inputs; mirrors Compose's `DesignSystemKitsConfigs` field for field.
+public struct DesignSystemKitsConfigs: Equatable {
+    public var userScaleRate: CGFloat
+    public var useOSScaleRate: Bool
+    public var isWhiteList: Bool
+    public var designSystemConfig: KitConfig?
+
+    public init(
+        userScaleRate: CGFloat = 1,
+        useOSScaleRate: Bool = true,
+        isWhiteList: Bool = false,
+        designSystemConfig: KitConfig? = nil
+    ) {
+        self.userScaleRate = userScaleRate
+        self.useOSScaleRate = useOSScaleRate
+        self.isWhiteList = isWhiteList
+        self.designSystemConfig = designSystemConfig
+    }
+}
+
+/// App-wide holder for the SwiftUI kit, mirroring Compose's `DesignSystemKits`. The kit is sandboxed from the
+/// host, so the host pushes `setConfigs(_:)` at startup and on every change; the OS Dynamic Type factor is
+/// tracked here. Views re-render on change as long as the subtree got `.momoFontScale()` (`NavigationContainer`
+/// applies it). Swift reserves `init`, so there is no `init(source:)` twin: the host observes and pushes.
+public final class DesignSystemKits: ObservableObject {
+    public static let shared = DesignSystemKits()
+
+    @Published private var configs = DesignSystemKitsConfigs()
+    @Published public private(set) var osFontScale: CGFloat = DesignSystemKits.currentOsFontScale()
+
+    private init() {
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(contentSizeCategoryDidChange),
+            name: UIContentSizeCategory.didChangeNotification,
+            object: nil
+        )
+    }
+
+    public func setConfigs(_ configs: DesignSystemKitsConfigs) {
+        onMain {
+            // Re-assigning an unchanged value would still publish and invalidate every kit subtree.
+            guard self.configs != configs else { return }
+            self.configs = configs
+        }
+    }
+
+    public func getConfigs() -> DesignSystemKitsConfigs {
+        configs
+    }
+
+    public var fontScale: FontScale {
+        FontScale(
+            userScaleRate: configs.userScaleRate,
+            useOSScaleRate: configs.useOSScaleRate,
+            osFontScale: osFontScale
+        )
+    }
+
+    @objc private func contentSizeCategoryDidChange() {
+        let next = Self.currentOsFontScale()
+        guard next != osFontScale else { return }
+        osFontScale = next
+    }
+
+    /// Same factor Compose's iOS `ProvideOsFontScale` derives from
+    /// `UIFont.preferredFont(forTextStyle: .body).pointSize / 17`, so both iOS surfaces scale alike.
+    static func currentOsFontScale() -> CGFloat {
+        let base = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+        return UIFontMetrics.default.scaledFont(for: base).pointSize / base.pointSize
+    }
+
+    /// Synchronous when already on main — an async hop would defer the change by a frame.
+    private func onMain(_ work: @escaping () -> Void) {
+        if Thread.isMainThread { work() } else { DispatchQueue.main.async(execute: work) }
+    }
+}
+
+private struct DesignSystemKitsConfigsKey: EnvironmentKey {
+    /// Computed, never stored: an un-injected subtree still reads the live holder, just not reactively.
+    static var defaultValue: DesignSystemKitsConfigs { DesignSystemKits.shared.getConfigs() }
+}
+
+public extension EnvironmentValues {
+    /// Injected by `.momoFontScale()`; never set it directly (same trap as `\.momoFontScale`).
+    var designSystemKitsConfigs: DesignSystemKitsConfigs {
+        get { self[DesignSystemKitsConfigsKey.self] }
+        set { self[DesignSystemKitsConfigsKey.self] = newValue }
+    }
+}
+// AI-GENERATED END: app-wide design-system holder mirroring Compose's DesignSystemKits