@momo-kits/native-kits 0.164.1-beta.9-debug → 0.164.1-headerconfig.1-debug

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
 }
 

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

@@ -0,0 +1,58 @@
+package vn.momo.kits.navigation
+
+interface HostBackTarget {
+    fun canPop(): Boolean
+
+    fun onBack()
+
+    fun backStarted()
+    fun backProgressed(progress: Float)
+    fun backCompleted()
+    fun backCancelled()
+}
+
+object HostBackGestureBridge {
+    private val targets = mutableListOf<HostBackTarget>()
+    private var gestureTarget: HostBackTarget? = null
+
+    var shouldUseFloatingArrowBack: Boolean = false
+
+    fun checkCanPop(): Boolean = targets.isNotEmpty()
+
+    fun canPopInner(): Boolean = top()?.canPop() == true
+
+    fun pop() {
+        top()?.onBack()
+    }
+
+    fun started() {
+        val target = top() ?: return
+        gestureTarget = target
+        target.backStarted()
+    }
+
+    fun progressed(progress: Float) {
+        gestureTarget?.backProgressed(progress.coerceIn(0f, 1f))
+    }
+
+    fun completed() {
+        (gestureTarget ?: top())?.backCompleted()
+        gestureTarget = null
+    }
+
+    fun cancelled() {
+        gestureTarget?.backCancelled()
+        gestureTarget = null
+    }
+
+    fun attach(target: HostBackTarget) {
+        targets += target
+    }
+
+    fun detach(target: HostBackTarget) {
+        targets -= target
+        if (gestureTarget === target) gestureTarget = null
+    }
+
+    private fun top(): HostBackTarget? = targets.lastOrNull()
+}

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

@@ -19,7 +19,10 @@ 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
@@ -39,13 +42,14 @@ import kotlin.time.Duration.Companion.milliseconds
 fun NavigationContainer(
     initialScreenName: String,
     initialScreen: @Composable () -> Unit,
+    maxApi: IMaxApi,
     options: NavigationOptions? = null,
     initialTheme: Theme = defaultTheme,
     miniAppContext: MiniAppContext? = null,
-    maxApi: IMaxApi? = null,
     setNavigator: ((Navigator) -> Unit)? = null,
     statusBarHeight: Dp? = null,
     localize: Localize? = null,
+    designSystemConfig: DesignSystemConfig? = null,
 ) {
     val navController = rememberNavController()
     val registry = remember { DynamicScreenRegistry() }
@@ -58,6 +62,17 @@ fun NavigationContainer(
 
     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
@@ -78,15 +93,16 @@ fun NavigationContainer(
     val startDestination = remember(screenId) { DynamicScreenRoute(screenId) }
 
     ProvideOsFontScale {
-        ProvideNavigationEventDispatcherOwner {
+        ProvideNavigationEventDispatcherOwner(navigator) {
             CompositionLocalProvider(
                 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,
             ) {
@@ -96,8 +112,6 @@ fun NavigationContainer(
 
                 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)
@@ -110,10 +124,6 @@ fun NavigationContainer(
                     }
                 }
 
-                // 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,
@@ -163,8 +173,7 @@ fun NavigationContainer(
                                     id = route.id,
                                     name = screen.name,
                                     content = screen.content,
-                                    navigationOptions = screen.options,
-                                    isDialogRoute = true
+                                    navigationOptions = screen.options
                                 )
                             }
                         }

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

@@ -4,15 +4,11 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.navigation.NavBackStackEntry
 import androidx.navigation.NavController
-import androidx.navigation.NavGraph
 import androidx.navigation.toRoute
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -35,6 +31,9 @@ class Navigator(
 ) {
     private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
 
+    // currentScreen() reads the root back stack, so it never sees the nested tab NavHost.
+    internal var tabBackHandler: (() -> Unit)? = null
+
     private fun currentScreen(): DynamicScreen? {
         val entry = navController.currentBackStackEntry ?: return null
         val id = runCatching { entry.toRoute<DynamicScreenRoute>().id }.getOrNull()
@@ -56,6 +55,10 @@ class Navigator(
     }
 
     fun onBackSafe(callBack: (() -> Unit)? = null) {
+        tabBackHandler?.let {
+            it()
+            return
+        }
         val currentScreen = currentScreen()
         val options = currentScreen?.options
         if (options?.onBackHandler != null) {
@@ -83,21 +86,9 @@ class Navigator(
     }
 
     // The swipe-back opt-out predicate in StackScreen needs this: the root screen must keep custom
-    // back handling so it still reaches maxApi.dismiss. It has to read currentBackStack rather than
-    // previousBackStackEntry — the latter walks a plain ArrayDeque, so a composable reading it never
-    // recomposes and the predicate would freeze at the value it had on first composition.
-    @Composable
-    internal fun rememberCanPop(): Boolean {
-        val backStack by navController.currentBackStack.collectAsState()
-        return backStack.hasPoppableEntry()
-    }
-
-    /**
-     * Non-composable twin of [rememberCanPop] for the iOS host: its own back check is mount-based
-     * and so answers `true` even on the mini-app root, where a swipe must dismiss rather than pop.
-     * Reads the StateFlow value directly — correct here precisely because nothing recomposes on it.
-     */
-    fun canPop(): Boolean = navController.currentBackStack.value.hasPoppableEntry()
+    // back handling so it still reaches maxApi.dismiss.
+    // Public: the iOS host asks this to decide whether the kit owns the swipe on this screen.
+    fun canPop(): Boolean = navController.previousBackStackEntry != null
 
     fun pop(count: Int = 1, callBack: (() -> Unit)? = null) {
         scope.launch {
@@ -196,10 +187,6 @@ class Navigator(
     }
 }
 
-// The NavGraph itself sits in the back stack as an entry; only real destinations can be popped.
-private fun List<NavBackStackEntry>.hasPoppableEntry(): Boolean =
-    count { it.destination !is NavGraph } > 1
-
 val LocalNavigator = staticCompositionLocalOf<Navigator> {
     error("No NavigationStack provided")
 }

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

@@ -93,7 +93,6 @@ internal fun StackScreen(
     id: Int = -1,
     name: String = "",
     bottomTabIndex: Int = -1,
-    isDialogRoute: Boolean = false,
     onBackHandler: (() -> Unit)? = null,
 ) {
     val navigator = LocalNavigator.current
@@ -170,29 +169,13 @@ internal fun StackScreen(
         RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
     }
 
-    // Hoisted out of the `||` chain below: short-circuiting would drop the back-stack subscription
-    // whenever an earlier term is true.
-    val canPop = navigator.rememberCanPop()
+    val canPop = navigator.canPop()
 
-    // Port of RN's `hasCustomBackHandling`: this handler is registered inside the NavHost
-    // destination, so while it is enabled it beats NavHost's own predictive-back handler and
-    // swallows the swipe. Enable it only when a plain pop is the wrong answer.
-    //
-    // A presented route is one of those cases: NavHost arms predictive back on back-stack size
-    // alone, so a horizontal edge drag over a dialog would seek its *vertical* slide.
     val hasCustomBackHandling = !SwipeBackConfig.enabled ||
-            isBottomTabChild ||
-            isDialogRoute ||
-            options.onBackHandler != null ||
-            options.headerBackProps.preventBack != null ||
             OverplayComponentRegistry.isOverplayShowing() ||
             !canPop
 
-    // BottomTab supplies a tab-aware handler; falling through to onBackSafe() there would dismiss
-    // the whole mini-app instead of returning to tab 0.
-    val onBack = onBackHandler ?: { navigator.onBackSafe() }
-
-    BackHandler(hasCustomBackHandling, onBack)
+    BackHandler(hasCustomBackHandling) { navigator.onBackSafe() }
 
     CompositionLocalProvider(
         StackScreenScrollableState provides options.scrollData.scrollState,
@@ -321,7 +304,10 @@ internal fun ScreenContent(content: @Composable () -> Unit) {
     if (options.headerType is HeaderType.Animated) {
         val animatedHeader = options.headerType
         Box {
-            Box(Modifier.fillMaxWidth().aspectRatio(animatedHeader.aspectRatio.value)) {
+            val bannerModifier = animatedHeader.height
+                ?.let { Modifier.fillMaxWidth().height(it) }
+                ?: Modifier.fillMaxWidth().aspectRatio(animatedHeader.aspectRatio.value)
+            Box(bannerModifier) {
                 animatedHeader.composable.invoke(scrollState.value)
             }
             Box(Modifier.padding(top = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)) {
@@ -342,7 +328,8 @@ internal fun FooterContent() {
         Footer(
             footerComponent = options.footerComponent,
             bottomPadding = bottomPadding,
-            transparent = options.footerTransparent
+            transparent = options.footerTransparent,
+            useMargin = options.footerUseMargin
         )
     }
 }
@@ -367,7 +354,12 @@ internal fun OverplayView(isBottomTabChild: Boolean, id: Int) {
 }
 
 @Composable
-fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp, transparent: Boolean = false) {
+fun Footer(
+    footerComponent: @Composable (() -> Unit)?,
+    bottomPadding: Dp,
+    transparent: Boolean = false,
+    useMargin: Boolean = true,
+) {
     if (footerComponent == null) return
 
     val footerHeightPx = LocalFooterHeightPx.current
@@ -390,7 +382,12 @@ fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp, transp
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
-                .padding(top = Spacing.S, start = Spacing.M, end = Spacing.M, bottom = bottomPadding + Spacing.S)
+                .padding(
+                    top = if (useMargin) Spacing.S else 0.dp,
+                    start = if (useMargin) Spacing.M else 0.dp,
+                    end = if (useMargin) Spacing.M else 0.dp,
+                    bottom = bottomPadding + if (useMargin) Spacing.S else 0.dp,
+                )
         ) {
             footerComponent.invoke()
         }