@momo-kits/native-kits 0.162.34-debug → 0.162.35-debug

package/CLAUDE.md

@@ -41,9 +41,11 @@ 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. **Do not use** `ApplicationContainer` (`application/NavigationContainer.kt`) — deprecated and does **not** wire `LocalLocalize` / `LocalNavigator` / `LocalMaxApi`.
 - **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.
 - **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`.
+- **iOS swipe-back:** the host owns the only edge-pan recogniser and replays it through `HostBackGestureBridge` (`navigation/HostBackGestureBridge.kt`; the kit framework is never exported, so the host reaches it through its own Koin-provided facade): `checkCanPop` / `canPopInner` / `pop` route the back into the kit stack, `started` / `progressed` / `completed` / `cancelled` seek the NavHost transition, `shouldUseFloatingArrowBack` is set by bottom tabs. `NavigationContainer` attaches itself automatically (`AttachHostBackGesture`, iOS only, detached by identity on dispose) — hosts need no wrapper and no `setNavigator`. `maxApi` is a required parameter of `NavigationContainer` — every container, nested or root, is handed its host bridge explicitly.
 
 ## i18n / Localize (port of RN `Localize`)
 

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.162.34-debug"
+        version = "0.162.35-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.164.1-beta.2-debug'
+    spec.version                  = '0.164.1-swipeback.1'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -0,0 +1,12 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+
+// No passive observer at androidx.activity 1.10.x; a second callback would steal the gesture.
+@Composable
+actual fun rememberBackGestureProgress(): State<Float?> = remember { mutableStateOf(null) }
+
+actual fun reportFloatingArrowBack(shouldUse: Boolean) = Unit

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

@@ -30,6 +30,7 @@ import com.airbnb.lottie.compose.rememberLottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.navigation.Navigator
 import vn.momo.kits.utils.readJson
 import androidx.activity.compose.BackHandler as AndroidBackHandler
 
@@ -64,7 +65,7 @@ actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
 }
 
 @Composable
-actual fun ProvideNavigationEventDispatcherOwner(content: @Composable () -> Unit) {
+actual fun ProvideNavigationEventDispatcherOwner(navigator: Navigator, content: @Composable () -> Unit) {
     content()
 }
 

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

@@ -1,6 +1,9 @@
 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
 
@@ -16,6 +19,17 @@ 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 = "",
@@ -102,5 +116,9 @@ val LocalComponentInformation = staticCompositionLocalOf<ComponentInformation?>
     null
 }
 
+val LocalDesignSystemConfig = staticCompositionLocalOf<DesignSystemConfig?> {
+    null
+}
+
 @Deprecated("Max font scale is fixed at MAX_FONT_SCALE (1.5); this CompositionLocal is no longer read.")
 val ScaleSizeMaxRate = staticCompositionLocalOf<Float?> { null }

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

@@ -40,9 +40,11 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.component.HEADER_FONT_FAMILY
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
@@ -360,6 +362,7 @@ private fun LiteScreenLayout(
                     text = title,
                     color = headerColor.tintIconColor,
                     style = titleStyle,
+                    fontFamily = HEADER_FONT_FAMILY,
                     modifier = titleModifier,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
@@ -688,9 +691,11 @@ private fun LiteInputSearch(
             inputSearchProps.isShowBtnText && !inputSearchProps.btnText.isNullOrEmpty()
         }
     }
-    val inputFieldStyle = remember(theme) {
+    val inputFieldFontFamily = getFontFamily(theme.font, Typography.bodyDefaultRegular.fontWeight)
+    val inputFieldStyle = remember(theme, inputFieldFontFamily) {
         Typography.bodyDefaultRegular.copy(
             color = theme.colors.text.default,
+            fontFamily = inputFieldFontFamily,
         )
     }
 

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

@@ -1,5 +1,6 @@
 package vn.momo.kits.components
 
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -7,17 +8,42 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
 
+enum class DividerType { DEFAULT, DASH }
+
 @Composable
-fun Divider() {
+fun Divider(useMargin: Boolean = true, type: DividerType = DividerType.DEFAULT) {
+    val color = AppTheme.current.colors.border.default
+    val margin = if (useMargin) Spacing.XS else 0.dp
+    if (type == DividerType.DASH) {
+        Canvas(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = margin)
+                .height(1.dp),
+        ) {
+            drawLine(
+                color = color,
+                start = Offset(0f, size.height / 2f),
+                end = Offset(size.width, size.height / 2f),
+                strokeWidth = size.height,
+                cap = StrokeCap.Round,
+                pathEffect = PathEffect.dashPathEffect(floatArrayOf(4.dp.toPx(), 4.dp.toPx())),
+            )
+        }
+        return
+    }
     Box(
         modifier = Modifier
             .fillMaxWidth()
+            .padding(vertical = margin)
             .height(1.dp)
-            .background(color = AppTheme.current.colors.border.default)
-            .padding(vertical = Spacing.XS)
+            .background(color = color),
     )
-}
+}

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

@@ -266,7 +266,7 @@ fun Input(
         )
     }
 
-    val passwordFontFamily = getFontFamily("SFProText", FontWeight.Normal)
+    val passwordFontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
     val passwordFontSize = scaleSize(24.sp)
     val visualTransformation = remember(secureTextEntry, inputState.passHidden, passwordFontFamily) {
         if (secureTextEntry && !inputState.passHidden)

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

@@ -44,6 +44,7 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.utils.formatNumberToMoney
 
@@ -122,7 +123,8 @@ fun InputMoney(
                 color = textColor,
                 fontSize = 20.sp,
                 lineHeight = 24.sp,
-                fontWeight = fontWeight.value
+                fontWeight = fontWeight.value,
+                fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             visualTransformation = CustomConverter(),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),

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

@@ -21,6 +21,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 
@@ -97,7 +98,13 @@ fun InputPhoneNumber(
     }
 
     val (textColor, placeholderColor, iconTintColor) = colors
-    val textStyle = scaleSize(size.values.textStyle.copy(color = textColor))
+    val baseTextStyle = size.values.textStyle
+    val textStyle = scaleSize(
+        baseTextStyle.copy(
+            color = textColor,
+            fontFamily = getFontFamily(AppTheme.current.font, baseTextStyle.fontWeight)
+        )
+    )
 
 
     Column(modifier = modifier

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

@@ -42,6 +42,7 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.utils.ifTrue
@@ -131,19 +132,23 @@ fun InputSearch(
     val fontSize = 14.sp
     val scaleFontSize = scaleSize(fontSize)
 
-    val textStyle = remember(textColor, inputSearchProps.fontWeight.value) {
+    val fontFamily = getFontFamily(AppTheme.current.font, inputSearchProps.fontWeight.value)
+
+    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily) {
         TextStyle(
             color = textColor,
             fontSize = scaleFontSize,
-            fontWeight = inputSearchProps.fontWeight.value
+            fontWeight = inputSearchProps.fontWeight.value,
+            fontFamily = fontFamily
         )
     }
 
-    val placeHolderStyle = remember(textColor, inputSearchProps.fontWeight.value) {
+    val placeHolderStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily) {
         TextStyle(
             color = textColor,
             fontSize = fontSize,
-            fontWeight = inputSearchProps.fontWeight.value
+            fontWeight = inputSearchProps.fontWeight.value,
+            fontFamily = fontFamily
         )
     }
 

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

@@ -21,6 +21,8 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
 
@@ -75,7 +77,8 @@ fun InputTextArea(
                 color = textColor,
                 fontSize = scaleFontSize,
                 lineHeight = scaleLineHeight,
-                fontWeight = fontWeight.value
+                fontWeight = fontWeight.value,
+                fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
             modifier = Modifier.height(scaleHeight).onFocusChanged {

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

@@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
@@ -19,6 +20,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 
@@ -108,6 +110,7 @@ private fun StepperNumberView(
         color = textColor,
         fontSize = scaledFontSize,
         textAlign = TextAlign.Center,
+        fontFamily = getFontFamily(theme.font, FontWeight.Normal),
     )
 
     Box(

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

@@ -11,6 +11,9 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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
 import androidx.compose.ui.platform.LocalDensity
@@ -304,47 +307,126 @@ private fun CardTabBar(
     onPressTabItem: (Int) -> Unit,
 ) {
     val theme = AppTheme.current
-
-    Row(
+    val surface = theme.colors.background.surface
+
+    // react-kits `CardTabBar` draws the bar in TWO layers: a flat strip where every
+    // tab looks unselected, and one raised card laid OVER it for the active tab.
+    // The card is 4dp taller, sits `Spacing.XS` higher, and is joined to the strip
+    // on each side by a curved "ear" — the browser-tab silhouette that gives this
+    // variant its name. Rendering the active tab in place (just taller) loses both
+    // the overlap and the ears, and the strip used the theme's `tonal` pink where
+    // react-kits uses `Colors.black_02`, so the bar came out pink and flat.
+    val pathWidth = if (tabs.size > 2) 22.dp else 28.dp
+    val isFirst = selectedIndex == 0
+    val isLast = selectedIndex == tabs.lastIndex
+
+    // The bar is exactly as tall as the FLAT strip — react-kits' raised card is
+    // `position: absolute`, so it never adds height; it just overflows upward into
+    // the 4dp margin. Letting the 44dp card size this box instead left a 4dp band of
+    // background showing between the tabs and the panel they sit on.
+    BoxWithConstraints(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(top = Spacing.XS),
-        verticalAlignment = Alignment.Bottom,
+            .padding(top = Spacing.XS)
+            .height(CARD_TAB_HEIGHT),
     ) {
-        tabs.forEachIndexed { index, tab ->
-            val isActive = selectedIndex == index
-            val iconColor = if (isActive) selectedColor else unselectedColor
+        val itemWidth = maxWidth / tabs.size
+
+        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.Bottom) {
+            tabs.forEachIndexed { index, tab ->
+                Box(
+                    modifier = Modifier
+                        .width(itemWidth)
+                        .height(CARD_TAB_HEIGHT)
+                        .background(
+                            color = Colors.black_02,
+                            shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M),
+                        )
+                        .activeOpacityClickable { onPressTabItem(index) }
+                        .padding(horizontal = Spacing.S),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        TabLeadingIcon(tab = tab, active = false, color = unselectedColor)
+                        Text(
+                            text = tab.title,
+                            style = Typography.bodyDefaultRegular,
+                            color = unselectedColor,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            modifier = Modifier.weight(1f, fill = false),
+                        )
+                        TabTrailingBadge(tab)
+                    }
+                }
+            }
+        }
 
+        val active = tabs[selectedIndex]
+        Row(
+            modifier = Modifier
+                // Pinned to the strip's BOTTOM edge so the two always end on the same
+                // pixel; `requiredHeight` then grows it upward into the 4dp margin.
+                // Offsetting it up by hand instead left a sub-dp sliver of strip
+                // showing under the card once rounding got involved.
+                .align(Alignment.BottomStart)
+                .offset(x = itemWidth * selectedIndex - (if (isFirst) 0.dp else pathWidth))
+                // `requiredHeight`, not `height`: the bar box is only as tall as the
+                // flat strip, so a plain height would be coerced down to 40 and the
+                // raised card would stop 4dp short of the panel below, leaving a grey
+                // sliver. react-kits gets this free — its card is absolutely
+                // positioned and ignores the parent box entirely.
+                .requiredHeight(CARD_TAB_ACTIVE_HEIGHT),
+            verticalAlignment = Alignment.Bottom,
+        ) {
+            // react-kits nudges each ear 8pt UNDER the card so the join has no seam.
+            if (!isFirst) CardTabEar(pathWidth, mirrored = true, color = surface, nudge = 8.dp)
             Box(
                 modifier = Modifier
-                    .weight(1f)
-                    .height(if (isActive) 44.dp else 40.dp)
+                    .width(itemWidth)
+                    .fillMaxHeight()
                     .background(
-                        color = if (isActive) theme.colors.background.surface
-                        else theme.colors.background.tonal,
-                        shape = RoundedCornerShape(
-                            topStart = Radius.M,
-                            topEnd = Radius.M,
-                        ),
+                        color = surface,
+                        shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M),
                     )
-                    .activeOpacityClickable { onPressTabItem(index) }
-                    .padding(horizontal = Spacing.S),
+                    .activeOpacityClickable { onPressTabItem(selectedIndex) }
+                    .padding(horizontal = if (tabs.size == 3) Spacing.S else Spacing.M),
                 contentAlignment = Alignment.Center,
             ) {
                 Row(verticalAlignment = Alignment.CenterVertically) {
-                    TabLeadingIcon(tab = tab, active = isActive, color = iconColor)
+                    TabLeadingIcon(tab = active, active = true, color = selectedColor)
                     Text(
-                        text = tab.title,
-                        style = if (isActive) Typography.headerSSemibold else Typography.bodyDefaultRegular,
-                        color = if (isActive) selectedColor else unselectedColor,
+                        text = active.title,
+                        style = Typography.headerSSemibold,
+                        color = selectedColor,
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis,
                         modifier = Modifier.weight(1f, fill = false),
                     )
-                    TabTrailingBadge(tab)
+                    TabTrailingBadge(active)
                 }
             }
+            if (!isLast) CardTabEar(pathWidth, mirrored = false, color = surface, nudge = -8.dp)
+        }
+    }
+}
+
+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)) {
+        val path = Path().apply {
+            moveTo(0f, 0f)
+            lineTo(0.60765f, 0f)
+            cubicTo(6.47582f, 0f, 11.4819f, 4.23831f, 12.4602f, 10.0244f)
+            cubicTo(13.9248f, 18.6872f, 15.9294f, 30.37f, 16.6925f, 34f)
+            cubicTo(17.9536f, 40f, 22.259f, 44f, 27.9996f, 44f)
+            lineTo(0f, 44f)
+            close()
         }
+        val draw: DrawScope.() -> Unit = { drawPath(path = path, color = color) }
+        if (mirrored) withTransform({ scale(-1f, 1f) }) { draw() } else draw()
     }
 }
 

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

@@ -78,15 +78,9 @@ fun Text(
     // Cache theme access to avoid repeated lookups
     val theme = AppTheme.current
 
-    // Call @Composable functions directly in composable context
-    val scaledFontSize = scaleSize(style.fontSize)
-    val scaledLineHeight = scaleSize(style.lineHeight)
-    val fontFamilyResult = getFontFamily(fontFamily ?: theme.font, style.fontWeight)
-
-    // Now memoize the results
-    val fontSize = remember(scaledFontSize) { scaledFontSize }
-    val lineHeight = remember(scaledLineHeight) { scaledLineHeight }
-    val font = remember(fontFamilyResult) { fontFamilyResult }
+    val fontSize = scaleSize(style.fontSize)
+    val lineHeight = scaleSize(style.lineHeight)
+    val font = getFontFamily(fontFamily ?: theme.font, style.fontWeight)
 
     // Memoize color calculation
     val textColor = remember(color, theme) {

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

@@ -47,9 +47,9 @@ fun Title(
     val theme = AppTheme.current
     val textStyle: TextStyle = when (type) {
         TitleType.Card -> when (size) {
-            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp)
-            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp)
-            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp)
+            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp, fontWeight = FontWeight.Bold)
+            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp, fontWeight = FontWeight.Bold)
+            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp, fontWeight = FontWeight.Bold)
         }
 
         TitleType.Section -> when (size) {
@@ -89,7 +89,11 @@ fun Title(
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
-            .padding(8.dp),
+            // react-kits' Title root is `styles.wrapper` = `{flexDirection:'row'}`
+            // plus, for a SECTION only, `marginTop: Spacing.S` (foundations/Title
+            // index.tsx). It has no padding at all, so the 8dp box here inset every
+            // title by 8dp against the web render.
+            .padding(top = if (type == TitleType.Section) Spacing.S else 0.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         icon?.let {

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

@@ -18,6 +18,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.LocalDesignSystemConfig
 import vn.momo.kits.application.LocalLocalize
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
@@ -68,7 +69,7 @@ fun TrustBanner(
     trackEvent: ((String, Map<String, String>) -> Unit)? = null
 ) {
     val localize = LocalLocalize.current
-    val trustBanner = defaultBanner
+    val trustBanner = LocalDesignSystemConfig.current?.trustBanner ?: defaultBanner
     val trackParams = mapOf(
         "service_name" to serviceName,
         "screen_name" to screenName,

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

@@ -0,0 +1,18 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+// Design-system rollout holder, same shape as KitFontScale: the kit is sandboxed and can't read the
+// host config, so the host seeds this once at startup from DesignSystemConfig. getFontFamily() reads
+// it to decide whether the new default font applies, so every screen follows the flag with no prop
+// threading. Backed by snapshot state: writes recompose text automatically.
+object KitDesignSystem {
+    var isWhiteList by mutableStateOf(false)
+        private set
+
+    fun update(isWhiteList: Boolean) {
+        this.isWhiteList = isWhiteList
+    }
+}

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

@@ -117,7 +117,7 @@ val defaultTheme = Theme(
             container = Colors.blue_08
         )
     ),
-    font = "SFProText",
+    font = "MomoTrustSans",
     assets = ThemeAssets(
         headerBackground = null
     )
@@ -174,7 +174,7 @@ val darkTheme = Theme(
             container = Colors.blue_08
         )
     ),
-    font = "SFProText",
+    font = "MomoTrustSans",
     assets = ThemeAssets(
         headerBackground = null
     )

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

@@ -89,18 +89,29 @@ fun scaleSize(textStyle: TextStyle): TextStyle {
  * 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 DEFAULT_FONT_FILE = "SFProText-Regular.ttf"
+private const val LEGACY_DEFAULT_FONT_FILE = "SFProText-Regular.ttf"
+private const val NEW_DEFAULT_FONT_FILE = "MomoTrustSans-Regular.ttf"
 
 private val hostFontFiles: Map<String, String> = mapOf(
     "SFProText-100" to "SFProText-Thin.ttf",
     "SFProText-200" to "SFProText-Ultralight.ttf",
     "SFProText-300" to "SFProText-Light.ttf",
-    "SFProText-400" to DEFAULT_FONT_FILE,
+    "SFProText-400" to LEGACY_DEFAULT_FONT_FILE,
     "SFProText-500" to "SFProText-Medium.ttf",
     "SFProText-600" to "SFProText-Semibold.ttf",
     "SFProText-700" to "SFProText-Bold.ttf",
     "SFProText-800" to "SFProText-Heavy.ttf",
     "SFProText-900" to "SFProText-Black.ttf",
+
+    "MomoTrustSans-100" to "MomoTrustSans-ExtraLight.ttf",
+    "MomoTrustSans-200" to "MomoTrustSans-ExtraLight.ttf",
+    "MomoTrustSans-300" to "MomoTrustSans-Light.ttf",
+    "MomoTrustSans-400" to "MomoTrustSans-Regular.ttf",
+    "MomoTrustSans-500" to "MomoTrustSans-Medium.ttf",
+    "MomoTrustSans-600" to "MomoTrustSans-SemiBold.ttf",
+    "MomoTrustSans-700" to "MomoTrustSans-Bold.ttf",
+    "MomoTrustSans-800" to "MomoTrustSans-ExtraBold.ttf",
+    "MomoTrustSans-900" to "MomoTrustSans-ExtraBold.ttf",
 ) + (1..9).flatMap { step ->
     val weight = step * 100
     listOf(
@@ -109,12 +120,34 @@ private val hostFontFiles: Map<String, String> = mapOf(
     )
 }
 
+/**
+ * Font mặc định mới, chỉ áp cho user nằm trong whitelist design system ([KitDesignSystem]).
+ * Ngoài whitelist thì quay về [LEGACY_DEFAULT_FONT_FAMILY] như trước.
+ */
+private const val NEW_DEFAULT_FONT_FAMILY = "MomoTrustSans"
+private const val LEGACY_DEFAULT_FONT_FAMILY = "SFProText"
+
+/**
+ * Font thuoc bo design system moi. MoMoTrustDisplay chi duoc header dung tu DS-791
+ * (commit header title 5bfde6251); truoc do header lay font theo theme, nen ngoai
+ * whitelist ca hai deu ha ve [LEGACY_DEFAULT_FONT_FAMILY].
+ */
+private val newFontFamilies = setOf(NEW_DEFAULT_FONT_FAMILY, "MoMoTrustDisplay")
+
 @Composable
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
-    val key = "$fontFamily-${fontWeight?.weight}"
-    val fileName = hostFontFiles[key] ?: DEFAULT_FONT_FILE
+    val isWhiteList = KitDesignSystem.isWhiteList
+    val resolvedFamily =
+        if (fontFamily in newFontFamilies && !isWhiteList) {
+            LEGACY_DEFAULT_FONT_FAMILY
+        } else {
+            fontFamily
+        }
+    val defaultFile = if (isWhiteList) NEW_DEFAULT_FONT_FILE else LEGACY_DEFAULT_FONT_FILE
+    val key = "$resolvedFamily-${fontWeight?.weight}"
+    val fileName = hostFontFiles[key] ?: defaultFile
     return hostFontFamily(fileName)
-        ?: hostFontFamily(DEFAULT_FONT_FILE)
+        ?: hostFontFamily(defaultFile)
         ?: FontFamily.Default
 }