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

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

@@ -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,18 +36,20 @@ 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(
     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() }
@@ -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
@@ -76,48 +93,58 @@ 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,
             ) {
                 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)
+
+                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)
+                    }
+                }
+
+                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 +168,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
+                                )
+                            }
                         }
                     }
                 }

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

@@ -31,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()
@@ -52,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) {
@@ -78,6 +85,11 @@ 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.
+    // 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 {
             repeat(count) {
@@ -104,7 +116,7 @@ class Navigator(
         if (navController.previousBackStackEntry != null){
             val dismissing = currentScreen()
             navController.popBackStack()
-            delay(300L.milliseconds)
+            delay(STACK_TRANSITION_DURATION.milliseconds)
             dismissing?.let { registry.unregisterScreen(it.id) }
         } else {
             maxApi?.dismiss {  }
@@ -222,6 +234,15 @@ class DynamicScreenRegistry {
         screens.remove(id)
     }
 
+    // Gesture pops go through composeNavigator.popBackStack() inside NavHost and never reach
+    // Navigator.dismissScreen(), so screens would leak without a stack-driven prune.
+    fun retainOnly(ids: Set<Int>) {
+        val stale = screens.keys.filter { it !in ids }
+        for (id in stale) {
+            screens.remove(id)
+        }
+    }
+
     fun unregisterAll(){
         val ids = screens.keys.toList()
         for (id in ids) {

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

@@ -169,7 +169,13 @@ internal fun StackScreen(
         RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
     }
 
-    BackHandler(true) { navigator.onBackSafe() }
+    val canPop = navigator.canPop()
+
+    val hasCustomBackHandling = !SwipeBackConfig.enabled ||
+            OverplayComponentRegistry.isOverplayShowing() ||
+            !canPop
+
+    BackHandler(hasCustomBackHandling) { navigator.onBackSafe() }
 
     CompositionLocalProvider(
         StackScreenScrollableState provides options.scrollData.scrollState,
@@ -298,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)) {
@@ -319,7 +328,8 @@ internal fun FooterContent() {
         Footer(
             footerComponent = options.footerComponent,
             bottomPadding = bottomPadding,
-            transparent = options.footerTransparent
+            transparent = options.footerTransparent,
+            useMargin = options.footerUseMargin
         )
     }
 }
@@ -344,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
@@ -367,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()
         }

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

@@ -0,0 +1,148 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.EnterExitState
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateMapOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavBackStackEntry
+import androidx.navigation.NavDestination.Companion.hasRoute
+import vn.momo.kits.const.Colors
+import kotlin.math.roundToInt
+
+internal const val STACK_TRANSITION_DURATION = 300
+
+// Ported 1:1 from the RN kit's `forStackTransitionWithOverlay` so both kits look identical.
+private const val PARALLAX_RATIO = 0.3f
+private const val SCRIM_MAX_ALPHA = 0.6f
+private const val EDGE_SHADOW_MAX_ALPHA = 0.3f
+private val EDGE_SHADOW_WIDTH = 8.dp
+
+/** Kill switch: `false` restores pre-DS-760 back handling without a kit release. Transitions
+ *  stay on the new curve either way. */
+object SwipeBackConfig {
+    var enabled: Boolean = true
+}
+
+// LinearEasing is mandatory: seekTo() maps drag fraction onto the timeline, so a curve would
+// decouple the card from the finger.
+private val stackSpec = tween<IntOffset>(STACK_TRANSITION_DURATION, easing = LinearEasing)
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackEnter(): EnterTransition =
+    slideInHorizontally(stackSpec) { it }
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackExit(): ExitTransition =
+    if (targetState.destination.hasRoute<DynamicDialogRoute>()) ExitTransition.None
+    else slideOutHorizontally(stackSpec) { -(it * PARALLAX_RATIO).roundToInt() }
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackPopEnter(): EnterTransition =
+    if (initialState.destination.hasRoute<DynamicDialogRoute>()) EnterTransition.None
+    else slideInHorizontally(stackSpec) { -(it * PARALLAX_RATIO).roundToInt() }
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackPopExit(): ExitTransition =
+    slideOutHorizontally(stackSpec) { it }
+
+/**
+ * Which composed screen is the top card. Ids are monotonic and NavHost keeps both entries composed
+ * for the whole segment, so "highest id" is stable both ways. `currentBackStackEntry` is not: it
+ * flips at frame 0 of a pop and the scrim would vanish instead of fading.
+ */
+@Stable
+internal class StackTransitionCoordinator {
+    private val composedRoutes = mutableStateMapOf<Int, Boolean>()
+
+    val topStackId: Int by derivedStateOf {
+        composedRoutes.entries.filter { it.value }.maxOfOrNull { it.key } ?: -1
+    }
+
+    fun attach(id: Int, isStackRoute: Boolean) {
+        composedRoutes[id] = isStackRoute
+    }
+
+    fun detach(id: Int) {
+        composedRoutes.remove(id)
+    }
+}
+
+internal val LocalStackTransition = staticCompositionLocalOf { StackTransitionCoordinator() }
+
+/** Draws the covered-screen scrim and the top card's left-edge shadow around a stack destination. */
+@Composable
+internal fun AnimatedVisibilityScope.StackTransitionDecor(
+    id: Int,
+    isStackRoute: Boolean,
+    content: @Composable () -> Unit,
+) {
+    val coordinator = LocalStackTransition.current
+    coordinator.attach(id, isStackRoute)
+    DisposableEffect(coordinator, id) {
+        onDispose { coordinator.detach(id) }
+    }
+
+    val isTopCard = isStackRoute && id == coordinator.topStackId
+    val isCovered = isStackRoute && !isTopCard
+
+    val scrimAlpha = transition.animateFloat(
+        transitionSpec = { tween(STACK_TRANSITION_DURATION, easing = LinearEasing) },
+        label = "stackScrimAlpha",
+    ) { state -> if (isCovered && state != EnterExitState.Visible) SCRIM_MAX_ALPHA else 0f }
+
+    val shadowAlpha = transition.animateFloat(
+        transitionSpec = { tween(STACK_TRANSITION_DURATION, easing = LinearEasing) },
+        label = "stackEdgeShadowAlpha",
+    ) { state -> if (isTopCard && state == EnterExitState.Visible) EDGE_SHADOW_MAX_ALPHA else 0f }
+
+    val shadowWidthPx = with(LocalDensity.current) { EDGE_SHADOW_WIDTH.toPx() }
+    val shadowBrush = remember(shadowWidthPx) {
+        Brush.horizontalGradient(
+            colors = listOf(Color.Transparent, Colors.black_20),
+            startX = -shadowWidthPx,
+            endX = 0f,
+        )
+    }
+
+    Box(Modifier.fillMaxSize()) {
+        content()
+
+        if (isStackRoute) {
+            Box(
+                Modifier
+                    .matchParentSize()
+                    // read inside drawBehind: in the body this would recompose every gesture frame
+                    .drawBehind {
+                        drawRect(
+                            brush = shadowBrush,
+                            topLeft = Offset(-shadowWidthPx, 0f),
+                            size = Size(shadowWidthPx, size.height),
+                            alpha = shadowAlpha.value,
+                        )
+                        drawRect(Colors.pink_09, alpha = scrimAlpha.value)
+                    }
+            )
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.snapshotFlow
+import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.platform.rememberBackGestureProgress
+import vn.momo.maxapi.IMaxApi
+
+// Unscaled, so the tick lands at the same physical distance on every device.
+private const val SWIPE_BACK_HAPTIC_THRESHOLD_DP = 50f
+
+/** One light tick per crossing, re-armed below the threshold. iOS only. */
+@Composable
+internal fun SwipeBackHaptic(maxApi: IMaxApi?) {
+    if (maxApi == null) return
+
+    val progress = rememberBackGestureProgress()
+    val screenWidth = getScreenDimensions().width.toFloat()
+
+    LaunchedEffect(maxApi, screenWidth) {
+        if (screenWidth <= 0f) return@LaunchedEffect
+        val threshold = SWIPE_BACK_HAPTIC_THRESHOLD_DP / screenWidth
+        var isSendHaptic = false
+        snapshotFlow { progress.value }.collect { fraction ->
+            val travelled = fraction ?: 0f
+            if (travelled >= threshold && !isSendHaptic) {
+                runCatching { maxApi.triggerEventVibration("light", callback = null) }
+                isSendHaptic = true
+            } else if (travelled < threshold && isSendHaptic) {
+                isSendHaptic = false
+            }
+        }
+    }
+}

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

@@ -8,12 +8,14 @@ import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
@@ -24,6 +26,7 @@ import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.platform.reportFloatingArrowBack
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 internal fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -59,6 +62,22 @@ fun BottomTab(
         )
     }
 
+    // Tab 0 keeps the seeked transition; other tabs go to the host's floating arrow. Matches RN.
+    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
+    val isFirstTab = currentRoute == null || currentRoute == "option0"
+
+    DisposableEffect(isFirstTab) {
+        reportFloatingArrowBack(!isFirstTab)
+        navigator.tabBackHandler = if (isFirstTab) null else ({
+            navController.popBackStack(navController.graph.startDestinationRoute!!, false)
+        })
+        // both live outside this composition
+        onDispose {
+            reportFloatingArrowBack(false)
+            navigator.tabBackHandler = null
+        }
+    }
+
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()

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

@@ -191,8 +191,18 @@ internal fun HeaderContent(
                     textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
                 )
             }
-            is HeaderTitle.Journey -> {}
-            is HeaderTitle.Location -> {}
+            is HeaderTitle.Journey -> {
+                HeaderJourney(
+                    data = headerTitle,
+                    tintIconColor = tintIconColor
+                )
+            }
+            is HeaderTitle.Location -> {
+                HeaderLocation(
+                    data = headerTitle,
+                    tintIconColor = tintIconColor
+                )
+            }
             is HeaderTitle.User -> {
                 HeaderUser(
                     data = headerTitle
@@ -274,6 +284,7 @@ sealed class HeaderType {
         val aspectRatio: AnimatedHeaderRatio = AnimatedHeaderRatio.RATIO_16_9,
         val isSurface: Boolean = true,
         val layoutOffSet: Dp = 56.dp,
+        val height: Dp? = null,
         val composable: @Composable (scrollState: Int) -> Unit = {}
     ) : HeaderType()