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

package/.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "WebSearch",
+      "Bash(./gradlew assembleDebug 2>&1)",
+      "Bash(./gradlew :sample:androidApp:installDebug 2>&1)",
+      "Bash(./gradlew :compose:compileCommonMainKotlinMetadata -q)",
+      "Bash(mkdir -p compose/src/commonMain/composeResources/files)",
+      "Bash(cp sample/shared/src/commonMain/composeResources/files/anim_processing_transaction.json sample/shared/src/commonMain/composeResources/files/dot_loading.json sample/shared/src/commonMain/composeResources/files/face_loading.json sample/shared/src/commonMain/composeResources/files/lottie_circle_loader.json compose/src/commonMain/composeResources/files/)",
+      "Bash(git rm *)",
+      "Bash(./gradlew :sample:androidApp:compileDebugKotlin -q)"
+    ]
+  }
+}

package/CLAUDE.md

@@ -45,6 +45,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - **Platform code** goes through `expect`/`actual` in `platform/` — never reference Android/iOS APIs from `commonMain` directly.
 - **Native bridge:** `IMaxApi` (`vn.momo.maxapi`, exposed as `LocalMaxApi`) is the host-app bridge (dismiss, tracking, device info, language).
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
+- **iOS swipe-back:** the host owns the only edge-pan recogniser and replays it through `HostBackGestureBridge` (`navigation/HostBackGestureBridge.kt`; the kit framework is never exported, so the host reaches it through its own Koin-provided facade): `checkCanPop` / `canPopInner` / `pop` route the back into the kit stack, `started` / `progressed` / `completed` / `cancelled` seek the NavHost transition, `shouldUseFloatingArrowBack` is set by bottom tabs. `NavigationContainer` attaches itself automatically (`AttachHostBackGesture`, iOS only, detached by identity on dispose) — hosts need no wrapper and no `setNavigator`. `maxApi` is a required parameter of `NavigationContainer` — every container, nested or root, is handed its host bridge explicitly.
 
 ## i18n / Localize (port of RN `Localize`)
 

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.165.1-beta.10-debug"
+        version = "0.165.1-beta.12-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.165.1-beta.10-debug'
+    spec.version                  = '0.165.1-beta.12-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

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

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

@@ -18,7 +18,7 @@ import vn.momo.kits.const.Spacing
 enum class DividerType { DEFAULT, DASH }
 
 @Composable
-fun Divider(useMargin: Boolean = true, type: DividerType = DividerType.DEFAULT) {
+fun Divider(useMargin: Boolean = false, type: DividerType = DividerType.DEFAULT) {
     val color = AppTheme.current.colors.border.default
     val margin = if (useMargin) Spacing.XS else 0.dp
     if (type == DividerType.DASH) {

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

@@ -9,13 +9,20 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontSynthesis
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 
@@ -37,6 +44,7 @@ fun Information(
     showIconClose: Boolean = true,
     onPressClose: (() -> Unit)? = null,
     accessibilityLabel: String? = null,
+    highlightText: List<String> = emptyList(),
 ) {
     val automationId = remember(accessibilityLabel, title) {
         accessibilityLabel ?: "Information${if (title != null) "/$title" else ""}"
@@ -61,6 +69,22 @@ fun Information(
         iconSource = "24_notifications_alert_octagon"
     }
 
+    // Host fonts are one file per weight: swap fontFamily and disable synthesis so the SemiBold file isn't
+    // faux-bolded again; fontWeight still applies when no host font is bundled and the system font is used.
+    val highlightWeight = Typography.headerXsSemibold.fontWeight
+    val highlightFontFamily = getFontFamily(AppTheme.current.font, highlightWeight)
+    val annotatedDescription = remember(description, highlightText, highlightFontFamily) {
+        highlightDescription(
+            description,
+            highlightText,
+            SpanStyle(
+                fontFamily = highlightFontFamily,
+                fontWeight = highlightWeight,
+                fontSynthesis = FontSynthesis.None,
+            ),
+        )
+    }
+
     Column(
         modifier = Modifier.border(
             width = 0.5.dp,
@@ -100,7 +124,7 @@ fun Information(
                     )
                 }
                 Text(
-                    description,
+                    annotatedDescription,
                     style = Typography.descriptionDefaultRegular,
                     accessibilityId = "$automationId|description-text"
                 )
@@ -131,4 +155,35 @@ fun Information(
         }
     }
 
-}
+}
+
+// Whole-word matches only; the longest keyword wins when keywords overlap (RN parity).
+private fun highlightDescription(
+    description: String,
+    highlightText: List<String>,
+    style: SpanStyle,
+): AnnotatedString {
+    val keywords = highlightText.filter { it.isNotEmpty() }
+    if (keywords.isEmpty()) return AnnotatedString(description)
+    val regex = Regex(keywords.sortedByDescending { it.length }.joinToString("|") { Regex.escape(it) })
+    fun isWordChar(index: Int) = description.getOrNull(index)?.let { it.isLetterOrDigit() || it == '_' } == true
+
+    return buildAnnotatedString {
+        var lastIndex = 0
+        var searchFrom = 0
+        while (true) {
+            val match = regex.find(description, searchFrom) ?: break
+            val start = match.range.first
+            val end = match.range.last + 1
+            if (isWordChar(start - 1) || isWordChar(end)) {
+                searchFrom = start + 1
+                continue
+            }
+            append(description.substring(lastIndex, start))
+            withStyle(style) { append(match.value) }
+            lastIndex = end
+            searchFrom = end
+        }
+        append(description.substring(lastIndex))
+    }
+}

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

@@ -30,12 +30,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.text.input.OffsetMapping
-import androidx.compose.ui.text.input.TransformedText
-import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
@@ -46,34 +44,63 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.conditional
-import vn.momo.kits.utils.formatNumberToMoney
 
-class CustomConverter : VisualTransformation {
-    override fun filter(text: AnnotatedString): TransformedText {
-        if (text.text.isEmpty()) {
-            return TransformedText(
-                AnnotatedString("0"),
-                object : OffsetMapping {
-                    override fun originalToTransformed(offset: Int): Int = 0
-                    override fun transformedToOriginal(offset: Int): Int = 0
-                }
-            )
-        }
-        
-        if (text.text == "0") {
-            return TransformedText(AnnotatedString("0"), OffsetMapping.Identity)
-        }
-        
-        val formattedText = formatNumberToMoney(text.text.toLong())
+private const val MONEY_CURRENCY = "đ"
 
-        return TransformedText(
-            AnnotatedString(formattedText),
-            object : OffsetMapping {
-                override fun originalToTransformed(offset: Int): Int = formattedText.length
-                override fun transformedToOriginal(offset: Int): Int = text.length
-            }
-        )
+private data class MoneyEdit(val start: Int, val end: Int, val inserted: String)
+
+private fun digitsOf(text: String) = text.filter { it in '0'..'9' }
+
+private fun normalizeDigits(text: String) = digitsOf(text).let { digits ->
+    digits.trimStart('0').ifEmpty { digits.take(1) }
+}
+
+private fun moneyDisplay(digits: String) =
+    if (digits.isEmpty()) "" else digits.reversed().chunked(3).joinToString(".").reversed() + MONEY_CURRENCY
+
+// Caret position right after the `digitIndex`-th digit of `display`.
+private fun caretFromDigitIndex(display: String, digitIndex: Int): Int {
+    var count = 0
+    display.forEachIndexed { index, char ->
+        if (char in '0'..'9' && ++count == digitIndex) return index + 1
     }
+    return 0
+}
+
+// Finds which range of `old` was replaced to produce `next`, given the post-edit caret.
+private fun detectEdit(old: String, next: String, caret: Int): MoneyEdit {
+    val tail = next.length - caret
+    if (tail in 0..old.length && next.substring(caret) == old.substring(old.length - tail)) {
+        var prefix = 0
+        while (prefix < minOf(caret, old.length - tail) && old[prefix] == next[prefix]) prefix++
+        return MoneyEdit(prefix, old.length - tail, next.substring(prefix, caret))
+    }
+    var prefix = 0
+    while (prefix < minOf(old.length, next.length) && old[prefix] == next[prefix]) prefix++
+    var suffix = 0
+    while (suffix < minOf(old.length, next.length) - prefix &&
+        old[old.length - 1 - suffix] == next[next.length - 1 - suffix]
+    ) suffix++
+    return MoneyEdit(prefix, old.length - suffix, next.substring(prefix, next.length - suffix))
+}
+
+// Applies `edit` to the digits of `display`. Separators and currency are never
+// deleted: removing a separator deletes the digit before it instead, removing
+// only the currency leaves the digits untouched.
+// Returns the new digits and the caret as a digit index.
+private fun applyEdit(display: String, edit: MoneyEdit): Pair<String, Int> {
+    val digits = digitsOf(display)
+    var left = digitsOf(display.substring(0, edit.start)).length
+    var removed = digitsOf(display.substring(edit.start, edit.end)).length
+    val inserted = digitsOf(edit.inserted)
+    if (removed == 0 && inserted.isEmpty() && left > 0 && '.' in display.substring(edit.start, edit.end)) {
+        left -= 1
+        removed = 1
+    }
+    if (removed == 0 && inserted.isEmpty()) return digits to left
+    val next = digits.substring(0, left) + inserted + digits.substring(left + removed)
+    val trimmed = next.trimStart('0').ifEmpty { next.take(1) }
+    return trimmed to maxOf(0, left + inserted.length - (next.length - trimmed.length))
 }
 
 @Composable
@@ -102,6 +129,11 @@ fun InputMoney(
     keyboardType: KeyboardType = KeyboardType.Number,
 ) {
     var isFocused by remember { mutableStateOf(false) }
+    var field by remember { mutableStateOf(TextFieldValue()) }
+    val digits = normalizeDigits(text.value)
+    val current = if (digitsOf(field.text) == digits) field else moneyDisplay(digits).let {
+        TextFieldValue(it, TextRange(caretFromDigitIndex(it, digits.length)))
+    }
     var isBlurred = false
     val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
         getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
@@ -118,7 +150,7 @@ fun InputMoney(
         BasicTextField(
             enabled = !disabled,
             singleLine = true,
-            value = text.value,
+            value = current,
             textStyle = TextStyle(
                 color = textColor,
                 fontSize = 20.sp,
@@ -126,7 +158,6 @@ fun InputMoney(
                 fontWeight = fontWeight.value,
                 fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
-            visualTransformation = CustomConverter(),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
             modifier = Modifier.height(size.values.height).onFocusChanged {
                 isFocused = it.isFocused
@@ -136,9 +167,28 @@ fun InputMoney(
                 if (!it.isFocused && isBlurred) onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            onValueChange = {
-                val numericValue = it.filter { char -> char.isDigit() }
-                onChangeText(numericValue)
+            onValueChange = { value ->
+                if (value.text == current.text) {
+                    // Keeps the caret out of the currency suffix.
+                    val max = if (current.text.isEmpty()) 0 else current.text.length - MONEY_CURRENCY.length
+                    field = value.copy(
+                        selection = TextRange(
+                            value.selection.start.coerceAtMost(max),
+                            value.selection.end.coerceAtMost(max)
+                        )
+                    )
+                } else {
+                    val (newDigits, caretDigit) = applyEdit(
+                        current.text,
+                        detectEdit(current.text, value.text, value.selection.min)
+                    )
+                    val display = moneyDisplay(newDigits)
+                    field = TextFieldValue(display, TextRange(caretFromDigitIndex(display, caretDigit)))
+                    if (newDigits != digits) {
+                        text.value = newDigits
+                        onChangeText(newDigits)
+                    }
+                }
             },
             decorationBox = { innerTextField ->
                 // Floating Icon

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/NavigationContainer.kt

@@ -42,10 +42,10 @@ 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,
@@ -93,7 +93,7 @@ fun NavigationContainer(
     val startDestination = remember(screenId) { DynamicScreenRoute(screenId) }
 
     ProvideOsFontScale {
-        ProvideNavigationEventDispatcherOwner {
+        ProvideNavigationEventDispatcherOwner(navigator) {
             CompositionLocalProvider(
                 LocalNavigator provides navigator,
                 LocalDynamicScreenRegistry provides registry,
@@ -112,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)
@@ -126,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,

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

@@ -1,11 +1,11 @@
 package vn.momo.kits.navigation
 
 import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.ScrollableState
+import androidx.compose.foundation.gestures.animateScrollBy
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ExperimentalMaterialApi
@@ -45,8 +44,11 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.lerp
 import androidx.compose.ui.zIndex
 import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.launch
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
@@ -154,13 +156,15 @@ internal fun StackScreen(
     }
 
     val limit = with(density) {
-        (statusBar).toPx() + HEADER_HEIGHT
+        (statusBar + HEADER_HEIGHT.dp).toPx()
     }.toInt()
 
-    val (scrollState, scrollInProcess) = if (options.scrollData.scrollState is LazyListState)
-        (options.scrollData.scrollState as? LazyListState ?: rememberLazyListState()).proxyScrollState(limit, 15)
+    val lazyListState = options.scrollData.scrollState as? LazyListState
+    val (scrollState, _) = if (lazyListState != null)
+        lazyListState.proxyScrollState(limit, 1)
     else
-        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 15)
+        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 1)
+    val snapState: ScrollableState = lazyListState ?: scrollState
 
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
@@ -205,7 +209,7 @@ internal fun StackScreen(
             }
 
             Column(Modifier.zIndex(5f)) {
-                SearchAnimated(isScrollInProgress = scrollInProcess)
+                SearchAnimated(snapState = snapState)
             }
 
             Column(Modifier.zIndex(2f).fillMaxSize()) {
@@ -269,11 +273,7 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
     if (inputSearchType == InputSearchType.Animated) {
         val scrollDp = with(density) { scrollState.value.toDp() }
 
-        val animatedTopPadding by animateDpAsState(
-            targetValue = (HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp),
-            label = "AnimatedTopPadding"
-        )
-        Spacer(Modifier.height(animatedTopPadding))
+        Spacer(Modifier.height((HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp)))
     }
     Column(
         Modifier
@@ -413,7 +413,7 @@ data class InputSearchLayoutParams(
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun SearchAnimated(
-    isScrollInProgress: Boolean
+    snapState: ScrollableState
 ) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
@@ -453,44 +453,24 @@ internal fun SearchAnimated(
         }
 
         InputSearchType.Animated -> {
-            val animatedTopPadding by animateDpAsState(
-                targetValue = (maxTopPadding - scrollDp).coerceIn(minTopPadding, maxTopPadding),
-                label = "AnimatedTopPadding"
-            )
-
-            val animatedStartPadding by animateDpAsState(
-                targetValue = (minStartPadding + scrollDp).coerceIn(minStartPadding, maxStartPadding),
-                label = "AnimatedStartPadding"
-            )
-
-            val animatedEndPadding by animateDpAsState(
-                targetValue = (minEndPadding + scrollDp).coerceIn(minEndPadding, maxEndPadding),
-                label = "AnimatedEndPadding"
-            )
-
-            val maxPadding = remember(maxTopPadding, maxStartPadding, maxEndPadding) {
-                maxOf(maxEndPadding, maxStartPadding, maxTopPadding)
-            }
-            val snapScrollValue = with(density) { maxPadding.toPx().toInt() }
-
-            LaunchedEffect(isScrollInProgress && scrollState.value != 0 && scrollState.value != snapScrollValue) {
-                if (scrollDp < maxPadding) {
-                    if (!isScrollInProgress) {
-                        val midpoint = (maxTopPadding - minTopPadding) / 2
-
-                        if (scrollDp < midpoint) {
-                            scrollState.animateScrollTo(0)
-                        } else {
-                            scrollState.animateScrollTo(snapScrollValue)
-                        }
+            val collapsePx = with(density) { HEADER_HEIGHT.dp.roundToPx() }
+            val progress = (scrollState.value / collapsePx.toFloat()).coerceIn(0f, 1f)
+
+            LaunchedEffect(snapState, collapsePx) {
+                snapshotFlow { snapState.isScrollInProgress }
+                    .filter { !it }
+                    .collect {
+                        val offset = snapState.headerOffsetPx() ?: return@collect
+                        if (offset <= 0 || offset >= collapsePx) return@collect
+                        val target = if (offset < collapsePx / 2) 0 else collapsePx
+                        launch { snapState.animateScrollBy((target - offset).toFloat()) }
                     }
-                }
             }
 
             InputSearchLayoutParams(
-                topPadding = animatedTopPadding,
-                startPadding = animatedStartPadding,
-                endPadding = animatedEndPadding
+                topPadding = lerp(maxTopPadding, minTopPadding, progress),
+                startPadding = lerp(minStartPadding, maxStartPadding, progress),
+                endPadding = lerp(minEndPadding, maxEndPadding, progress)
             )
         }
 
@@ -519,6 +499,12 @@ internal fun SearchAnimated(
     }
 }
 
+private fun ScrollableState.headerOffsetPx(): Int? = when (this) {
+    is LazyListState -> if (firstVisibleItemIndex == 0) firstVisibleItemScrollOffset else null
+    is ScrollState -> value
+    else -> null
+}
+
 private fun quantize(value: Int, stepPx: Int): Int {
     if (stepPx <= 1) return value
     return (value / stepPx) * stepPx

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

@@ -15,11 +15,14 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
@@ -28,6 +31,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Image
 import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -88,15 +92,38 @@ internal fun Header(onBackHandler: (() -> Unit)? = null) {
     // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
     val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
 
+    val headerImage = AppTheme.current.assets.headerBackground
+        .takeUnless { options.headerType is HeaderType.Transparent }
+
     Box(
         Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
             .fillMaxWidth()
-            .background(background.copy(alpha = animatedAlpha))
+            .conditional(headerImage.isNullOrEmpty()) {
+                background(background.copy(alpha = animatedAlpha))
+            }
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             },
         contentAlignment = Alignment.BottomCenter
     ) {
+        if (!headerImage.isNullOrEmpty()) {
+            Box(
+                Modifier
+                    .matchParentSize()
+                    .clipToBounds()
+                    .graphicsLayer { alpha = animatedAlpha }
+                    .background(background)
+            ) {
+                Image(
+                    source = headerImage,
+                    loading = false,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .wrapContentHeight(Alignment.Top, unbounded = true)
+                        .height(HEADER_BACKGROUND_HEIGHT),
+                )
+            }
+        }
         Row(
             modifier = Modifier.height(HEADER_HEIGHT.dp)
                 .fillMaxWidth()

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

@@ -27,6 +27,8 @@ enum class AnimatedHeaderRatio(val value: Float){
     RATIO_3_2(3f / 2f)
 }
 
+internal val HEADER_BACKGROUND_HEIGHT = 154.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun HeaderBackground() {
@@ -37,7 +39,7 @@ internal fun HeaderBackground() {
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
 
     val minHeight = AppStatusBar.current + HEADER_HEIGHT.dp
-    val maxHeight = 154.dp
+    val maxHeight = HEADER_BACKGROUND_HEIGHT
     val opacity by animateFloatAsState(
         targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
     )