@momo-kits/native-kits 0.168.1-beta.2-debug → 0.168.1-beta.24-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`; or asymmetric side insets, since the outer display reports no hinge) 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).
@@ -78,8 +80,10 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height (0 when the screen puts nothing there) so the decision follows each screen's toolkit.
 - Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient leaves with the content.
 - Quick return header: glass headers and Animated headers (with a `ScrollState`) on the Duo side bar layout slide out with the content and back in on a reverse scroll; a half-shown header settles in or out once the scroll stops. The side bar is drawn apart from the header, so it stays put.
-- Overlays on Duo: popups cap at 440pt wide and the room between `duoTopInset` and the bottom inset (body scrolls, actions stay); modal centers inside that room; bottom sheet uses the window height, centers at width ≥ 600 and pads by side insets in landscape.
+- Overlays on Duo: the modal sits inside the safe area (all four insets, so clear of the side toolbar strip) and caps its content at `duoModalMaxWidth` / `duoModalMaxHeight` (440 × 640pt, at least XL off the safe area); popups fill that width with radius XL and drop their own side padding (body scrolls, actions stay). Snackbars keep clear of the strip.
+- Bottom sheet on Duo: radius XL, window height less `duoTopInset` (it never passes the side status bar: unlike RN, nothing restyles the clock over it), centered when the short side ≥ 600 (inner display in either orientation, buttons stay in the header row; RN parity). Below that (outer display, landscape too) it floats `Spacing.M` off the side edges, pads header/content/footer by `inset − M`, and a `Title` header moves back / close into 48pt side bar buttons on the strip part of the sheet (HIG: sheet controls go vertical on the outer display) when the strip fits one; they follow the header row while the sheet is short and stay below `sideBar.top` when it is tall. `BottomHeader.Title(onBack)` / `.title(onBack:)` closes the sheet, then runs (RN `leftOptions.onPressIconLeft`).
 - Font scale deliberately uses the short side (`min(w, h)`), unlike RN which reads the window width — landscape must not inflate every font.
+- Font scale measures the **window**, never `UIScreen.main`: on iPhone Duo the main screen stays on one display while the window follows the one in use. Compose iOS `getScreenDimensions()` reads `LocalWindowInfo.containerSize` (recomposes on fold/unfold); SwiftUI `DesignSystemKits` KVO-observes each `UIWindowScene.effectiveGeometry` and republishes `windowShortSide`.
 - `StackScreen` pads content/footer/search/FAB by the side insets and provides an inset-consumed layout to its content; a bottom-tab root stays full width (tab bar + each tab's StackScreen handle insets). Grid columns use `contentWidth`.
 
 ## i18n / Localize (port of RN `Localize`)
@@ -104,9 +108,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.2-debug"
+        version = "0.168.1-beta.24-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.167.1-duo.15-debug'
+    spec.version                  = '0.168.1-beta.24-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/components/PopupNotify.kt

@@ -22,6 +22,8 @@ import vn.momo.kits.application.LocalLocalize
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.layout.duoModalMaxHeight
+import vn.momo.kits.layout.duoModalMaxWidth
 import vn.momo.kits.layout.getScreenLayout
 import kotlin.math.min
 
@@ -36,22 +38,29 @@ enum class PopupActionDirection {
     AUTO
 }
 
-// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
-private val DUO_POPUP_MAX_WIDTH = 440.dp
+// Card width cap on iPhone Duo (the modal bounds, RN Popup/utils.ts); unbounded elsewhere.
+@Composable
+internal fun popupMaxWidth(): Dp {
+    val layout = getScreenLayout()
+    return if (layout.isIPhoneDuoDevice) layout.duoModalMaxWidth else Dp.Unspecified
+}
 
-// Card width cap plus the popup's own side padding; unbounded off iPhone Duo.
+// The modal bounds already keep iPhone Duo popups off the edges, so their own side padding goes.
 @Composable
-internal fun popupMaxWidth(horizontalPadding: Dp): Dp =
-    if (getScreenLayout().isIPhoneDuoDevice) DUO_POPUP_MAX_WIDTH + horizontalPadding * 2 else Dp.Unspecified
+internal fun popupHorizontalPadding(padding: Dp): Dp =
+    if (getScreenLayout().isIPhoneDuoDevice) 0.dp else padding
 
-// Room left for a popup on iPhone Duo, where landscape is too short for it; null elsewhere.
+// Tallest a popup gets on iPhone Duo, landscape and the inner display included; null elsewhere.
 @Composable
 internal fun popupMaxHeight(): Dp? {
     val layout = getScreenLayout()
-    if (!layout.isIPhoneDuoDevice) return null
-    return layout.height - layout.duoTopInset - layout.insetBottom - Spacing.XL * 2
+    return if (layout.isIPhoneDuoDevice) layout.duoModalMaxHeight else null
 }
 
+// Rounder on iPhone Duo, closer to its system alerts.
+@Composable
+internal fun popupRadius(): Dp = if (getScreenLayout().isIPhoneDuoDevice) Radius.XL else Radius.L
+
 private fun heightForLines(
     layout: TextLayoutResult,
 ): Float {
@@ -145,20 +154,19 @@ fun PopupNotify(
 
     val maxHeight = popupMaxHeight()
     val bodyScrollState = rememberScrollState()
+    val horizontalPadding = popupHorizontalPadding(12.dp)
+    val shape = RoundedCornerShape(popupRadius())
 
     Box(
         Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
     ) {
         Column(
             modifier = Modifier
-                .widthIn(max = popupMaxWidth(horizontalPadding = 12.dp))
+                .widthIn(max = popupMaxWidth())
                 .fillMaxWidth()
-                .padding(horizontal = 12.dp)
-                .clip(RoundedCornerShape(Radius.L))
-                .background(
-                    AppTheme.current.colors.background.surface,
-                    RoundedCornerShape(Radius.L)
-                )
+                .padding(horizontal = horizontalPadding)
+                .clip(shape)
+                .background(AppTheme.current.colors.background.surface, shape)
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
@@ -215,7 +223,8 @@ fun PopupNotify(
                 Modifier
                     .width(22.dp)
                     .height(22.dp)
-                    .offset(x = -(1).dp, y = (-11).dp)
+                    // centered on the card's top right corner
+                    .offset(x = 11.dp - horizontalPadding, y = (-11).dp)
                     .background(
                         color = AppTheme.current.colors.text.default,
                         shape = RoundedCornerShape(Radius.M)

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

@@ -32,15 +32,15 @@ fun PopupPromotion(
     onClose: (() -> Unit) = {},
 ) {
     val maxHeight = popupMaxHeight()
-    var maxWidth = popupMaxWidth(horizontalPadding = Spacing.M)
+    var maxWidth = popupMaxWidth()
     if (maxHeight != null) {
         // fit the portrait image by height when iPhone Duo leaves too little room
-        maxWidth = minOf(maxWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO + Spacing.M * 2)
+        maxWidth = minOf(maxWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO)
     }
 
     Column(Modifier
         .widthIn(max = maxWidth)
-        .padding(horizontal = Spacing.M)
+        .padding(horizontal = popupHorizontalPadding(Spacing.M))
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
         }

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,8 @@ 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.
+    // iPhone Duo folded or not, whatever the window size (its hinge, or the outer display's one-sided strip);
+    // 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 +86,18 @@ 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
+    // Width of a system alert on the inner display, in both orientations.
+    val modalMaxWidth = 440.dp
+    // Fits a PopupNotify with image, scrolled description and actions at the max width (RN
+    // Application/device.ts); taller content scrolls instead of filling the inner display.
+    val modalMaxHeight = 640.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 +136,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,16 +151,21 @@ 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,
             )
         }
     }
 }
 
+// Room for a dialog on iPhone Duo: inside the safe area, so clear of the side toolbar strip, and
+// capped so it stays a dialog on the inner display.
+internal val ScreenLayout.duoModalMaxWidth: Dp
+    get() = minOf(width - insetLeft - insetRight - Spacing.XL * 2, DuoMetrics.modalMaxWidth)
+
+internal val ScreenLayout.duoModalMaxHeight: Dp
+    get() = minOf(height - insetTop - insetBottom - Spacing.XL * 2, DuoMetrics.modalMaxHeight)
+
 // 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)
@@ -302,7 +313,8 @@ private fun screenLayoutOf(
         headerHeight = headerHeight,
         headerStatusBarHeight = headerStatusBarHeight,
         sideBar = sideBar,
-        isIPhoneDuoDevice = isDuoDevice,
+        // the outer display reports no hinge; its one-sided strip still gives it away
+        isIPhoneDuoDevice = isDuoDevice || (isPhone && asymmetricInsets),
         duoTopInset = maxOf(topInset, if (height > width) sideInset * 2 else 0.dp),
         statusBarClearance = statusBarClearance,
     )