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

package/CLAUDE.md

@@ -48,7 +48,9 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 - **Entry point:** wrap content in `NavigationContainer(...)` from `navigation/`. It builds the `Navigator`, takes a host-supplied `Localize` (falls back to an empty one), and provides the CompositionLocals below. The legacy `Screen` / `ApplicationContainer` / `ComposeApi` stack has been removed on both sides — don't reintroduce it.
 - **Configuration flows via CompositionLocals**, not params. Public ones: `AppTheme`, `AppStatusBar`, `AppNavigationBar` (`const/Theme.kt`); `ApplicationContext`, `AppConfig`, `AppLanguage`, `LocalLocalize` (`application/`); `LocalNavigator`, `LocalMaxApi` (`navigation/`). Read with `X.current`.
-- **Design-system config** (`trustBanner`, `headerBar`, `headerGradient`): the host seeds `KitDesignSystemConfig.update(...)` once (same pattern as `KitFontScale`); `NavigationContainer` provides it as `LocalDesignSystemConfig` (param `designSystemConfig` → parent → global) and applies `headerBar` as the header image when the theme has none.
+- **`DesignSystemKits`** (`application/DesignSystemKits.kt`) is the single app-wide holder for the host-owned design-system inputs: font scale (`userScaleRate` / `useOSScaleRate`), whitelist (`isWhiteList`) and the remote `DesignSystemConfig`, bundled as `DesignSystemKitsConfigs`. The host calls `DesignSystemKits.init(source)` once at startup with its `DesignSystemKitsSource` (sync `getConfigs()` seed + `configsFlow`); `init` is idempotent. Without a source, call `setConfigs(...)` directly. Read with `getConfigs()` (snapshot state, recomposes); non-Compose observers use `configsFlow`.
+- **SwiftUI twin:** `ios/Application/DesignSystemKits.swift` mirrors it field for field (`DesignSystemKitsConfigs` with `designSystemConfig: KitConfig?`, `setConfigs` / `getConfigs`), plus the OS Dynamic Type factor (`osFontScale`). There is no `init(source:)` (Swift reserves `init`): the host observes its own bridge and pushes. A host that can't share Swift types (the KMP bridge) calls `DesignSystemKits.shared.setConfigs(json:)` (`ios/Application/DesignSystemKitsPayload.swift`); the JSON field names are a contract with momo-app's serializer (`HostDesignSystemKits.observeConfigsJson`, payload classes in `DesignSystemData.kt`) — change both together. Invalid JSON is ignored. The SwiftUI kit can't link the Kotlin `kits` framework (a second Kotlin/Native runtime would hold a second, never-initialized singleton), so the render-time logic — `FontScale` formula, Dynamic Type observation — is intentionally duplicated in Swift; only values flow across.
+- **Design-system config** (`trustBanner`, `headerBar`, `headerGradient`): `NavigationContainer` provides it as `LocalDesignSystemConfig` (param `designSystemConfig` → parent → `DesignSystemKits`) and applies `headerBar` as the header image when the theme has none.
 - **Platform code** goes through `expect`/`actual` in `platform/` — never reference Android/iOS APIs from `commonMain` directly.
 - **Native bridge:** `IMaxApi` (`vn.momo.maxapi`, exposed as `LocalMaxApi`) is the host-app bridge (dismiss, tracking, device info, language).
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
@@ -69,7 +71,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 ## Screen layout / iPhone Duo (port of RN `useScreenLayout`, momo-kits !664)
 
 - `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.
+- 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` (Apple's foldable check: a `.division` reserved region, queried with include-inactive; Swift also latches on `UIHingeInteraction`) 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).
@@ -104,9 +106,9 @@ The SwiftUI port differs from Compose in one important way: **it follows the hos
 
 One formula, both platforms: the device-width scale (`width / 375`, capped at `+5pt`) and the OS Dynamic Type scale (capped at `1.5×`) are computed independently and the **larger wins**. When `useOSScaleRate` is false neither applies — the size is just multiplied by `userScaleRate`. Max font scale is fixed at 1.5; the old per-call/per-scope override is deprecated and ignored on both sides.
 
-- **Compose** — `const/Typography.kt` (`scaleSize` overloads for `Float`/`Dp`/`TextUnit`/`TextStyle`). The `TextUnit` overload divides by `density.fontScale` so Compose's own `sp` scaling isn't applied twice. Inputs: `LocalContext.current` (`MiniAppContext.userScaleRate` / `useOSScaleRate`, per-field) falling back to the `KitFontScale` global. On iOS, `platform/OsFontScale.ios.kt` observes `UIContentSizeCategoryDidChangeNotification` and overrides `LocalDensity` — Compose MP otherwise reads `fontScale` once at `ComposeUIViewController` creation. Wired at `NavigationContainer`.
-- **SwiftUI** — `ios/Typography/FontScale.swift`. `FontScale` is an immutable snapshot with `callAsFunction`, so a view reads `@Environment(\.momoFontScale) private var fontScale` and calls `fontScale(16)`. `FontScaleStore.shared` is the `ObservableObject` holding both inputs and the OS factor (it observes `UIContentSizeCategory.didChangeNotification`); the host pushes its preference with `update(userScaleRate:useOSScaleRate:)`.
-- **Never set `\.momoFontScale` directly** — same trap as `\.localize`. Inject via `.momoFontScale(_:context:)`, which holds the store as `@ObservedObject`; that is what re-publishes the snapshot. `NavigationContainer` does it (passing `MiniAppContext` so the per-mini-app override applies); a bare `UIHostingController` root must too. The environment default reads the live store, so an un-injected subtree still gets correct values — just not live ones.
+- **Compose** — `const/Typography.kt` (`scaleSize` overloads for `Float`/`Dp`/`TextUnit`/`TextStyle`). The `TextUnit` overload divides by `density.fontScale` so Compose's own `sp` scaling isn't applied twice. Inputs: `LocalContext.current` (`MiniAppContext.userScaleRate` / `useOSScaleRate`, per-field) falling back to `DesignSystemKits.getConfigs()`. On iOS, `platform/OsFontScale.ios.kt` observes `UIContentSizeCategoryDidChangeNotification` and overrides `LocalDensity` — Compose MP otherwise reads `fontScale` once at `ComposeUIViewController` creation. Wired at `NavigationContainer`.
+- **SwiftUI** — `ios/Typography/FontScale.swift`. `FontScale` is an immutable snapshot with `callAsFunction`, so a view reads `@Environment(\.momoFontScale) private var fontScale` and calls `fontScale(16)`. `DesignSystemKits.shared` is the `ObservableObject` holding the host inputs and the OS factor (it observes `UIContentSizeCategory.didChangeNotification`); the host pushes them with `setConfigs(_:)`.
+- **Never set `\.momoFontScale` directly** — same trap as `\.localize`. Inject via `.momoFontScale(_:context:)`, which holds `DesignSystemKits` as `@ObservedObject`; that is what re-publishes the snapshot. It also injects `\.designSystemKitsConfigs`, which `MomoText` (whitelist font) and `TrustBanner` (fallback after `ApplicationEnvironment.config`) read so a host push re-renders them. `NavigationContainer` does it (passing `MiniAppContext` so the per-mini-app override applies); a bare `UIHostingController` root must too. The environment default reads the live store, so an un-injected subtree still gets correct values — just not live ones.
 - The global `scaleSize(_:)` and `Font.appFont(size:)` remain for call sites that can't read the environment (UIKit bridges, free functions). They are **not** reactive. `Font.header_default_bold` & friends are computed `static var`s for the same reason — as stored `static let`s they froze the scale at first access. `UIViewRepresentable`s should read `context.environment.momoFontScale` instead, and re-apply the font in `updateUIView`, not only in `makeUIView`.
 
 ## Code conventions

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.168.1-beta.1-debug"
+        version = "0.168.1-beta.10-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.168.1-beta.1-debug'
+    spec.version                  = '0.167.1-beta.22-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/androidMain/kotlin/vn/momo/kits/const/HostFont.android.kt

@@ -5,15 +5,16 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 
 @Composable
-internal actual fun hostFontFamily(fileName: String): FontFamily? {
+internal actual fun hostFontFamily(fileName: String, weight: FontWeight): FontFamily? {
     val assets = LocalContext.current.applicationContext.assets
-    return remember(fileName) {
+    return remember(fileName, weight) {
         val path = "fonts/$fileName"
         // AssetManager.open ném IOException nếu thiếu file; Font(path, assetManager) thì lỗi
         // muộn lúc render nên phải kiểm tra tồn tại trước.
         val exists = runCatching { assets.open(path).close() }.isSuccess
-        if (exists) FontFamily(Font(path = path, assetManager = assets)) else null
+        if (exists) FontFamily(Font(path = path, assetManager = assets, weight = weight)) else null
     }
 }

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

@@ -3,4 +3,4 @@ package vn.momo.kits.platform
 import androidx.compose.runtime.Composable
 
 @Composable
-internal actual fun rememberReservedRegions(): List<ReservedRegion> = emptyList()
+internal actual fun rememberReservedRegions(): ReservedRegions = ReservedRegions()

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Context.kt

@@ -1,9 +1,6 @@
 package vn.momo.kits.application
 
 import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import vn.momo.kits.components.TrustBannerData
 
@@ -19,17 +16,6 @@ data class DesignSystemConfig(
     val headerGradient: String? = null,
 )
 
-// App-wide holder seeded by the host (same pattern as KitFontScale), so direct NavigationContainer
-// callers get the config without passing it. Snapshot state: a config fetched after first frame recomposes.
-object KitDesignSystemConfig {
-    var config by mutableStateOf<DesignSystemConfig?>(null)
-        private set
-
-    fun update(config: DesignSystemConfig?) {
-        this.config = config
-    }
-}
-
 @Immutable
 data class MiniAppContext(
     val appIcon: String = "",

package/compose/src/commonMain/kotlin/vn/momo/kits/application/DesignSystemKits.kt

@@ -0,0 +1,62 @@
+package vn.momo.kits.application
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+
+@Immutable
+data class DesignSystemKitsConfigs(
+    val userScaleRate: Float = 1f,
+    val useOSScaleRate: Boolean = true,
+    val isWhiteList: Boolean = false,
+    val designSystemConfig: DesignSystemConfig? = null,
+)
+
+// The kit is sandboxed from the host's storage/config, so the host implements this and hands it to init().
+interface DesignSystemKitsSource {
+    // Sync read: seeds the kit before the first frame, so there is no default-then-real flicker.
+    fun getConfigs(): DesignSystemKitsConfigs
+
+    val configsFlow: Flow<DesignSystemKitsConfigs>
+}
+
+// App-wide design-system inputs (font scale, whitelist, remote config). scaleSize(), defaultTheme and
+// NavigationContainer fall back to these when no MiniAppContext / LocalDesignSystemConfig is provided.
+object DesignSystemKits {
+    private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    private var observeJob: Job? = null
+
+    // Snapshot state so Compose readers recompose (including non-composable getters like defaultTheme);
+    // the StateFlow is for non-Compose observers, e.g. the host's SwiftUI bridge, where Compose's
+    // global snapshot apply loop may never have started.
+    private var currentConfigs by mutableStateOf(DesignSystemKitsConfigs())
+    private val mutableConfigsFlow = MutableStateFlow(currentConfigs)
+    val configsFlow: StateFlow<DesignSystemKitsConfigs> = mutableConfigsFlow.asStateFlow()
+
+    // Idempotent: a repeated call (e.g. Activity re-creation) replaces the previous observer.
+    fun init(source: DesignSystemKitsSource) {
+        observeJob?.cancel()
+        setConfigs(source.getConfigs())
+        observeJob = scope.launch {
+            source.configsFlow.collect { setConfigs(it) }
+        }
+    }
+
+    // While init() is observing a source, its next emission overrides a value set here.
+    fun setConfigs(configs: DesignSystemKitsConfigs) {
+        currentConfigs = configs
+        mutableConfigsFlow.value = configs
+    }
+
+    fun getConfigs(): DesignSystemKitsConfigs = currentConfigs
+}

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

@@ -2,6 +2,7 @@ package vn.momo.kits.const
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 
 /**
  * Nạp font từ tài nguyên native của app host thay vì đóng gói bản copy riêng trong SDK.
@@ -13,4 +14,4 @@ import androidx.compose.ui.text.font.FontFamily
  * Trả về `null` nếu host không có font đó — caller tự fallback [FontFamily.Default].
  */
 @Composable
-internal expect fun hostFontFamily(fileName: String): FontFamily?
+internal expect fun hostFontFamily(fileName: String, weight: FontWeight): FontFamily?

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

@@ -8,6 +8,7 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.*
+import vn.momo.kits.application.DesignSystemKits
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.platform.getScreenDimensions
 import kotlin.math.max
@@ -20,10 +21,9 @@ const val MAX_DEVICE_SCALE = 5
 @Composable
 fun scaleSize(size: Float): Float {
     val context = LocalContext.current
-    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
-    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    val useOsScale = context?.useOSScaleRate ?: DesignSystemKits.getConfigs().useOSScaleRate
     if (!useOsScale) {
-        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
+        return size * (context?.userScaleRate ?: DesignSystemKits.getConfigs().userScaleRate)
     }
     val scaleSizeMaxRate: Float = MAX_FONT_SCALE
     // Short side, not width: landscape must not inflate every font.
@@ -84,12 +84,6 @@ fun scaleSize(textStyle: TextStyle): TextStyle {
 }
 
 
-/**
- * Tên file font trong tài nguyên native của app host (xem [hostFontFamily]).
- *
- * SDK không đóng gói font riêng nữa: app host đã bundle sẵn toàn bộ font từ `font-source`
- * cho cả React Native lẫn native, nên bản copy trong `composeResources` chỉ làm phình app.
- */
 private const val LEGACY_DEFAULT_FONT_FILE = "SFProText-Regular.ttf"
 private const val NEW_DEFAULT_FONT_FILE = "MomoTrustSans-Regular.ttf"
 
@@ -124,17 +118,27 @@ private val hostFontFiles: Map<String, String> = mapOf(
 private const val NEW_DEFAULT_FONT_FAMILY = "MomoTrustSans"
 private const val LEGACY_DEFAULT_FONT_FAMILY = "SFProText"
 
+// Families that ship one file per weight; the others map every weight to a single file.
+private val weightedFontFamilies = setOf(NEW_DEFAULT_FONT_FAMILY, LEGACY_DEFAULT_FONT_FAMILY)
+
 internal val defaultFontFamily: String
-    get() = if (KitDesignSystem.isWhiteList) NEW_DEFAULT_FONT_FAMILY else LEGACY_DEFAULT_FONT_FAMILY
+    get() = if (DesignSystemKits.getConfigs().isWhiteList) NEW_DEFAULT_FONT_FAMILY else LEGACY_DEFAULT_FONT_FAMILY
 
 @Composable
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
-    val isWhiteList = KitDesignSystem.isWhiteList
+    val isWhiteList = DesignSystemKits.getConfigs().isWhiteList
     val defaultFile = if (isWhiteList) NEW_DEFAULT_FONT_FILE else LEGACY_DEFAULT_FONT_FILE
     val key = "$fontFamily-${fontWeight?.weight}"
-    val fileName = hostFontFiles[key] ?: defaultFile
-    return hostFontFamily(fileName)
-        ?: hostFontFamily(defaultFile)
+    val mappedFile = hostFontFiles[key]
+    val fileName = mappedFile ?: defaultFile
+    // Declaring the file's real weight keeps Compose from synthesizing bold on top of a bold file.
+    val fileWeight = if (mappedFile != null && fontFamily in weightedFontFamilies) {
+        fontWeight ?: FontWeight.Normal
+    } else {
+        FontWeight.Normal
+    }
+    return hostFontFamily(fileName, fileWeight)
+        ?: hostFontFamily(defaultFile, FontWeight.Normal)
         ?: FontFamily.Default
 }
 

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

@@ -14,7 +14,6 @@ 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
@@ -52,7 +51,7 @@ 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.
+    // The device has a hinge, folded or not, whatever the window size; drives popups, modal and bottom sheet.
     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().
@@ -86,11 +85,13 @@ internal object DuoMetrics {
     // (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.
@@ -129,10 +130,9 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
     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) {
+    return remember(size, leftPx, rightPx, bottomPx, topInset, density, reservedRegions) {
         with(density) {
             val width = size.width.toDp()
             val height = size.height.toDp()
@@ -145,11 +145,8 @@ internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null):
                 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,
+                isDuoDevice = isPhone && reservedRegions.isFoldable,
+                reservedRegions = reservedRegions.occlusion,
             )
         }
     }

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

@@ -20,7 +20,7 @@ import androidx.navigation.toRoute
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collectLatest
 import vn.momo.kits.application.DesignSystemConfig
-import vn.momo.kits.application.KitDesignSystemConfig
+import vn.momo.kits.application.DesignSystemKits
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.LocalDesignSystemConfig
 import vn.momo.kits.application.LocalLocalize
@@ -66,7 +66,7 @@ fun NavigationContainer(
     val stackTransition = remember { StackTransitionCoordinator() }
     val theme = remember { mutableStateOf(initialTheme) }
     val resolvedDesignSystemConfig =
-        designSystemConfig ?: LocalDesignSystemConfig.current ?: KitDesignSystemConfig.config
+        designSystemConfig ?: LocalDesignSystemConfig.current ?: DesignSystemKits.getConfigs().designSystemConfig
     val headerBar = resolvedDesignSystemConfig?.headerBar
     // RN parity: the theme's own header image wins; config headerBar is only the fallback.
     val resolvedTheme = remember(theme.value, headerBar) {

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

@@ -39,8 +39,6 @@ internal val DUO_GROUP_GAP = Spacing.M
 private val DEFAULT_TOOLBAR_HEIGHT = DuoMetrics.controlSize + Spacing.M + DuoMetrics.itemPitch * 2
 // Back, then the single button the toolbar folds into
 private val COMPRESSED_TOOLBAR_HEIGHT = DuoMetrics.controlSize * 2 + Spacing.M
-// Back alone, while a rail opened from the compressed state takes the toolbar slot
-private val BACK_ONLY_HEIGHT = DuoMetrics.controlSize
 
 // Port of RN DuoBarCompression (HIG, Designing for iPhone Duo: Vertical controls):
 // - both fit: both stay whole
@@ -78,7 +76,8 @@ internal fun rememberDuoBarCompression(
                 expandTabBar = { expanded = DuoBar.TAB_BAR },
                 setToolbarHeight = setToolbarHeight,
             )
-            opened == DuoBar.TAB_BAR && fits(BACK_ONLY_HEIGHT, tabBar) -> DuoBarCompression(
+            // an opened rail always shows, even when only the group gap is short: it closes once a tab is picked
+            opened == DuoBar.TAB_BAR -> DuoBarCompression(
                 toolbarCompressed = true,
                 toolbarHidden = true,
                 expandToolbar = { opened = DuoBar.TOOLBAR },