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

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()
 

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

@@ -0,0 +1,106 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+internal fun HeaderJourney(
+    data: HeaderTitle,
+    tintIconColor: Color,
+) {
+    if (data !is HeaderTitle.Journey) return
+    if (data.isLoading) return TitleJourneyShimmer()
+
+    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
+    val iconTint = parseHeaderTint(data.iconColor) ?: tint
+
+    Column(
+        modifier = Modifier
+            .widthIn(max = maxWidth)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = data.start,
+                color = tint,
+                style = Typography.actionXsBold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+            Spacer(Modifier.width(Spacing.S))
+            if (data.icon.isNotBlank()) {
+                Icon(source = data.icon, size = 16.dp, color = iconTint)
+            } else {
+                Spacer(Modifier.width(16.dp))
+            }
+            Spacer(Modifier.width(Spacing.S))
+            if (!data.end.isNullOrEmpty()) {
+                Text(
+                    text = data.end,
+                    color = tint,
+                    style = Typography.actionXsBold,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f, fill = false),
+                )
+            }
+            Spacer(Modifier.width(Spacing.XS))
+            Icon(source = "16_arrow_chevron_down_small", size = 16.dp, color = tint)
+        }
+        if (!data.description.isNullOrEmpty()) {
+            Text(
+                text = data.description,
+                color = tint,
+                style = Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+@Composable
+private fun TitleJourneyShimmer() {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Box(modifier = Modifier.height(18.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+        Spacer(Modifier.height(Spacing.XXS))
+        Box(modifier = Modifier.height(12.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+    }
+}
+
+internal fun parseHeaderTint(value: String?): Color? {
+    val raw = value?.trim()?.removePrefix("#") ?: return null
+    val hex = when (raw.length) {
+        3 -> "FF" + raw.map { "$it$it" }.joinToString("")
+        6 -> "FF$raw"
+        8 -> raw
+        else -> return null
+    }
+    val v = hex.toLongOrNull(16) ?: return null
+    return Color(v)
+}

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

@@ -0,0 +1,75 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+internal fun HeaderLocation(
+    data: HeaderTitle,
+    tintIconColor: Color,
+) {
+    if (data !is HeaderTitle.Location) return
+    if (data.isLoading) return TitleLocationShimmer()
+
+    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
+
+    Column(
+        modifier = Modifier
+            .widthIn(max = maxWidth)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        horizontalAlignment = Alignment.Start,
+    ) {
+        if (!data.description.isNullOrEmpty()) {
+            Text(
+                text = data.description,
+                color = tint,
+                style = Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = data.location,
+                color = tint,
+                style = Typography.actionXsBold,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
+            )
+            Spacer(Modifier.width(Spacing.XS))
+            Icon(source = "16_arrow_chevron_down_small", size = 16.dp, color = tint)
+        }
+    }
+}
+
+@Composable
+private fun TitleLocationShimmer() {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Box(modifier = Modifier.height(12.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+        Spacer(Modifier.height(Spacing.XXS))
+        Box(modifier = Modifier.height(18.dp).width(120.dp).clip(RoundedCornerShape(8.dp))) { Skeleton() }
+    }
+}

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

@@ -0,0 +1,12 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+
+/** Fraction of container width, `null` when idle. Observe only — consuming would steal the
+ *  gesture from NavHost. Always `null` on Android. */
+@Composable
+expect fun rememberBackGestureProgress(): State<Float?>
+
+/** Android is a no-op: no host-owned recogniser to hand the gesture to. */
+expect fun reportFloatingArrowBack(shouldUse: Boolean)

package/compose/src/iosMain/kotlin/vn/momo/kits/navigation/HostBackGesture.ios.kt

@@ -0,0 +1,98 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.remember
+import androidx.navigationevent.NavigationEvent
+import androidx.navigationevent.NavigationEventDispatcher
+import androidx.navigationevent.NavigationEventInput
+
+/**
+ * Kit end of the host's edge-pan recogniser. The host owns the only recogniser on iOS and replays
+ * its drag here; events reach NavHost's `PredictiveBackHandler` and seek the stack transition.
+ *
+ * **Call every method from the main thread** — nothing here is synchronised, and [attachedInputs]
+ * is also written from composition.
+ */
+object HostBackGestureBridge {
+    private val attachedInputs = mutableListOf<HostNavigationEventInput>()
+    private var gestureInput: HostNavigationEventInput? = null
+
+    /** `false` means no container is mounted, or it opted out — host falls back to its own nav. */
+    val hasEnabledHandlers: Boolean
+        get() = attachedInputs.lastOrNull()?.hasEnabledHandlers == true
+
+    /** Set on tabs other than the first; host pulls it when its recogniser begins. */
+    var shouldUseFloatingArrowBack: Boolean = false
+        internal set
+
+    /** Begins a drag. Pairs with exactly one [completed] or [cancelled]. */
+    fun started() {
+        val input = attachedInputs.lastOrNull() ?: return
+        gestureInput = input
+        input.backStarted()
+    }
+
+    /** Drag progress in `0f..1f` — the fraction of the screen width travelled. */
+    fun progressed(progress: Float) {
+        gestureInput?.backProgressed(progress.coerceIn(0f, 1f))
+    }
+
+    /** Falls back to the attached input when no drag was started: a host that commits without
+     *  ever seeking still needs its back. */
+    fun completed() {
+        (gestureInput ?: attachedInputs.lastOrNull())?.backCompleted()
+        gestureInput = null
+    }
+
+    /** Released below the commit threshold: the screen springs back. */
+    fun cancelled() {
+        gestureInput?.backCancelled()
+        gestureInput = null
+    }
+
+    internal fun attach(input: HostNavigationEventInput) {
+        attachedInputs += input
+    }
+
+    internal fun detach(input: HostNavigationEventInput) {
+        attachedInputs -= input
+        // else a container unmounted mid-drag hands its terminal event to whoever is on top now
+        if (gestureInput === input) gestureInput = null
+    }
+}
+
+/** Wires one [NavigationContainer]'s dispatcher to [HostBackGestureBridge] while it is composed. */
+@Composable
+internal fun AttachHostBackGesture(dispatcher: NavigationEventDispatcher) {
+    val input = remember(dispatcher) { HostNavigationEventInput() }
+
+    DisposableEffect(dispatcher, input) {
+        dispatcher.addInput(input)
+        HostBackGestureBridge.attach(input)
+        onDispose {
+            HostBackGestureBridge.detach(input)
+            dispatcher.removeInput(input)
+        }
+    }
+}
+
+internal class HostNavigationEventInput : NavigationEventInput() {
+    var hasEnabledHandlers: Boolean = false
+        private set
+
+    override fun onHasEnabledHandlersChanged(hasEnabledHandlers: Boolean) {
+        this.hasEnabledHandlers = hasEnabledHandlers
+    }
+
+    // Touch coordinates are not forwarded: progress alone seeks the transition.
+    fun backStarted() = dispatchOnBackStarted(NavigationEvent(swipeEdge = NavigationEvent.EDGE_LEFT))
+
+    fun backProgressed(progress: Float) = dispatchOnBackProgressed(
+        NavigationEvent(swipeEdge = NavigationEvent.EDGE_LEFT, progress = progress)
+    )
+
+    fun backCancelled() = dispatchOnBackCancelled()
+
+    fun backCompleted() = dispatchOnBackCompleted()
+}