@momo-kits/native-kits 0.164.1-trustsans-12-debug → 0.165.1-beta.10-debug

package/.codegraph/daemon.log

@@ -0,0 +1,100 @@
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 51873, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 58673, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 80799, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 34253, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 65894, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Auto-synced 1 file(s) in 446ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 219ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 212ms
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 68727, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Auto-synced 1 file(s) in 466ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 225ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 218ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 211ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 203ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 200ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 204ms
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 97060, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Caught up 1 file(s) changed since last run
+[CodeGraph MCP] Auto-synced 1 file(s) in 485ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 328ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 280ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 208ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 206ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 178ms
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 2726, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Auto-synced 1 file(s) in 427ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 178ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 170ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 196ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 180ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 146ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 170ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 190ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 178ms
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 8036, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 14133, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 34560, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 73920, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 8855, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 39954, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Auto-synced 124 file(s) in 1892ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 247ms
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 70751, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Caught up 1 file(s) changed since last run
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 89552, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 98891, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 57037, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 32794, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Caught up 4 file(s) changed since last run
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 57725, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Caught up 17 file(s) changed since last run
+[CodeGraph MCP] Auto-synced 13 file(s) in 241ms
+[CodeGraph MCP] Auto-synced 13 file(s) in 246ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 181ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 186ms
+[CodeGraph MCP] Auto-synced 1 file(s) in 176ms
+[CodeGraph daemon] Shutting down (idle timeout; clients=0).
+[CodeGraph daemon] Listening on /Users/sonnguyen/Documents/Momo/momo-native-kits/.codegraph/daemon.sock (pid 26309, v1.1.0). Idle timeout 300000ms.
+[CodeGraph MCP] File watcher active — graph will auto-sync on changes
+[CodeGraph MCP] Caught up 267 file(s) changed since last run
+[CodeGraph daemon] Shutting down (inactivity backstop; clients=1).

package/CLAUDE.md

@@ -41,6 +41,7 @@ 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`.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.164.1-trustsans-12-debug"
+        version = "0.165.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.164.1-trustsans-9-debug'
+    spec.version                  = '0.165.1-beta.10-debug'
     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/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/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/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/navigation/Navigation.kt

@@ -33,6 +33,7 @@ class Navigation(
         tintColor: Color? = null,
         footerComponent: (@Composable () -> Unit)? = null,
         footerTransparent: Boolean? = null,
+        footerUseMargin: Boolean? = null,
         floatingButtonProps: FloatingButtonProps? = null,
         keyboardOptions: KeyboardOptions? = null
     ) {
@@ -50,6 +51,7 @@ class Navigation(
                 tintColor = tintColor ?: options.tintColor,
                 footerComponent = footerComponent ?: options.footerComponent,
                 footerTransparent = footerTransparent ?: options.footerTransparent,
+                footerUseMargin = footerUseMargin ?: options.footerUseMargin,
                 floatingButtonProps = floatingButtonProps ?: options.floatingButtonProps,
                 keyboardOptions = keyboardOptions ?: options.keyboardOptions,
             )
@@ -86,6 +88,7 @@ data class NavigationOptions(
     val tintColor: Color? = null,
     val footerComponent: @Composable (() -> Unit)? = null,
     val footerTransparent: Boolean = false,
+    val footerUseMargin: Boolean = true,
     val floatingButtonProps: FloatingButtonProps? = null,
     val keyboardOptions: KeyboardOptions = KeyboardOptions()
 ) {

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

@@ -2,9 +2,7 @@ package vn.momo.kits.navigation
 
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
-import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideInVertically
-import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -19,7 +17,12 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 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.LocalContext
+import vn.momo.kits.application.LocalDesignSystemConfig
 import vn.momo.kits.application.LocalLocalize
 import vn.momo.kits.application.Localize
 import vn.momo.kits.application.MiniAppContext
@@ -33,6 +36,7 @@ import vn.momo.kits.platform.ProvideOsFontScale
 import vn.momo.kits.utils.getAppStatusBarHeight
 import vn.momo.kits.utils.getNavigationBarHeight
 import vn.momo.maxapi.IMaxApi
+import kotlin.time.Duration.Companion.milliseconds
 
 @Composable
 fun NavigationContainer(
@@ -45,6 +49,7 @@ fun NavigationContainer(
     setNavigator: ((Navigator) -> Unit)? = null,
     statusBarHeight: Dp? = null,
     localize: Localize? = null,
+    designSystemConfig: DesignSystemConfig? = null,
 ) {
     val navController = rememberNavController()
     val registry = remember { DynamicScreenRegistry() }
@@ -55,7 +60,19 @@ fun NavigationContainer(
     val parentContext = LocalContext.current
     val mergedContext = MiniAppContext.merge(parentContext, miniAppContext)
 
+    val stackTransition = remember { StackTransitionCoordinator() }
     val theme = remember { mutableStateOf(initialTheme) }
+    val resolvedDesignSystemConfig =
+        designSystemConfig ?: LocalDesignSystemConfig.current ?: KitDesignSystemConfig.config
+    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) {
+        if (theme.value.isHeaderImage() || headerBar.isNullOrEmpty()) {
+            theme.value
+        } else {
+            theme.value.copy(assets = theme.value.assets.copy(headerBackground = headerBar))
+        }
+    }
     val fallbackLocalize = remember { Localize() }
 
     val resolvedLocalize = localize ?: fallbackLocalize
@@ -81,43 +98,59 @@ fun NavigationContainer(
                 LocalNavigator provides navigator,
                 LocalDynamicScreenRegistry provides registry,
                 LocalMaxApi provides maxApi,
-                AppTheme provides theme.value,
+                AppTheme provides resolvedTheme,
                 AppStatusBar provides statusBarHeight,
                 AppNavigationBar provides navigationBarHeight,
                 LocalContext provides mergedContext,
+                LocalDesignSystemConfig provides resolvedDesignSystemConfig,
                 LocalLocalize provides resolvedLocalize,
+                LocalStackTransition provides stackTransition,
             ) {
                 LaunchedEffect(Unit) {
                     setNavigator?.invoke(navigator)
                 }
 
-                NavHost(navController, startDestination = startDestination) {
-                    composable<DynamicScreenRoute>(
-                        enterTransition = {
-                            slideInHorizontally(
-                                animationSpec = tween(300),
-                                initialOffsetX = { it }
-                            )
-                        },
-                        exitTransition = null,
-                        popEnterTransition = { fadeIn(animationSpec = tween(0)) },
-                        popExitTransition = {
-                            slideOutHorizontally(
-                                animationSpec = tween(300),
-                                targetOffsetX = { it }
-                            )
+                SwipeBackHaptic(maxApi)
+
+                // Gesture pops never reach Navigator.dismissScreen(), so prune the registry from
+                // the back stack itself. collectLatest lets a rapid re-push cancel a pending prune.
+                LaunchedEffect(navController, registry) {
+                    navController.currentBackStack.collectLatest { entries ->
+                        delay(STACK_TRANSITION_DURATION.milliseconds)
+                        val aliveIds = entries.mapNotNullTo(mutableSetOf()) { entry ->
+                            runCatching { entry.toRoute<DynamicScreenRoute>().id }.getOrNull()
+                                ?: runCatching { entry.toRoute<DynamicDialogRoute>().id }.getOrNull()
                         }
-                    ) { backStackEntry ->
+                        aliveIds.add(screenId)
+                        registry.retainOnly(aliveIds)
+                    }
+                }
+
+                // The transitions must live on the NavHost call site, not on the destinations:
+                // NavHost.uikit computes isDefaultTransition from these arguments alone, and while
+                // it is true the library paints its own hard-coded black iOS blackout that would
+                // sit over the pink scrim.
+                NavHost(
+                    navController,
+                    startDestination = startDestination,
+                    enterTransition = { stackEnter() },
+                    exitTransition = { stackExit() },
+                    popEnterTransition = { stackPopEnter() },
+                    popExitTransition = { stackPopExit() },
+                ) {
+                    composable<DynamicScreenRoute> { backStackEntry ->
                         val route = backStackEntry.toRoute<DynamicScreenRoute>()
                         val screen = registry.getScreen(route.id)
 
                         if (screen != null) {
-                            StackScreen(
-                                id = route.id,
-                                name = screen.name,
-                                content = screen.content,
-                                navigationOptions = screen.options
-                            )
+                            StackTransitionDecor(id = route.id, isStackRoute = true) {
+                                StackScreen(
+                                    id = route.id,
+                                    name = screen.name,
+                                    content = screen.content,
+                                    navigationOptions = screen.options
+                                )
+                            }
                         }
                     }
 
@@ -141,12 +174,14 @@ fun NavigationContainer(
                         val screen = registry.getScreen(route.id)
 
                         if (screen != null) {
-                            StackScreen(
-                                id = route.id,
-                                name = screen.name,
-                                content = screen.content,
-                                navigationOptions = screen.options
-                            )
+                            StackTransitionDecor(id = route.id, isStackRoute = false) {
+                                StackScreen(
+                                    id = route.id,
+                                    name = screen.name,
+                                    content = screen.content,
+                                    navigationOptions = screen.options
+                                )
+                            }
                         }
                     }
                 }