@momo-kits/native-kits 0.168.1-beta.4-debug → 0.168.1-beta.5-debug

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

@@ -2,8 +2,12 @@ package vn.momo.kits.navigation.bottomtab
 
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -15,6 +19,7 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.absolutePadding
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
@@ -23,25 +28,33 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.AbsoluteAlignment
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.components.Badge
 import vn.momo.kits.components.BadgeDot
 import vn.momo.kits.components.DotSize
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.layout.DuoMetrics
@@ -59,14 +72,18 @@ private val RAIL_GAP = Spacing.XXS
 // selection bubble overflows the 48 rail cell by 5 above and below
 private val RAIL_BUBBLE_WIDTH = 44.dp
 private val RAIL_BUBBLE_HEIGHT = 58.dp
-private val FLOATING_HEIGHT = 62.dp
+private val FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight
 private val FLOATING_PADDING = Spacing.XS
-private val FLOATING_QR_SIZE = 44.dp
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-private const val GRID_COLUMNS = 8
-private const val GRID_SPAN = 6
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+private val FLOATING_ITEM_WIDTH = 80.dp
+// while pressed the selection bubble grows into a lens past the pill's edges
+private const val LENS_SCALE_X = 1.2f
+private const val LENS_SCALE_Y = 1.3f
+// Figma Home-2026 tab bar "Selection": brand pink at 8%
+private const val SELECTION_TINT_ALPHA = 0x14 / 255f
 // RN reanimated spring { damping: 18, stiffness: 220, mass: 0.8 }
 private val BUBBLE_SPRING = spring<Dp>(dampingRatio = 0.68f, stiffness = 275f, visibilityThreshold = Dp(0.5f))
+private val LENS_SPRING = spring<Float>(dampingRatio = 0.68f, stiffness = 275f)
 
 // Space from the window bottom the rail stack and its gap take, so the header side bar stays above it.
 internal val LocalDuoRailReserve = compositionLocalOf { 0.dp }
@@ -78,11 +95,15 @@ internal fun duoRailHeight(itemCount: Int, hasQr: Boolean, compressed: Boolean =
     return rail + if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
 }
 
+// Overlaps the home indicator inset like the system tab bar (21pt above the bottom with a 34pt inset).
+private fun floatingTabBarBottom(insetBottom: Dp): Dp =
+    maxOf(insetBottom - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S)
+
 // Space tab content leaves under the floating bar; 0 when the rail sits in the side strip or off Duo.
 internal fun duoFloatingTabBarInset(layout: ScreenLayout): Dp =
-    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + Spacing.M + layout.insetBottom else 0.dp
+    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + floatingTabBarBottom(layout.insetBottom) else 0.dp
 
-// iPhone Duo tab bar: glass rail in the side bar, or a floating glass bar when unfolded portrait.
+// iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait.
 @Composable
 internal fun BoxScope.DuoTabBar(
     layout: ScreenLayout,
@@ -147,18 +168,19 @@ private fun BoxScope.DuoRailTabBar(
     }
 }
 
-// Glass column of tab items with the sliding selection bubble.
+// Column of icon-only tab items with the sliding selection bubble.
 @Composable
 private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (Int) -> Unit) {
+    val pressedIndex = remember { mutableStateOf<Int?>(null) }
     val bubbleOffset by animateDpAsState(
-        targetValue = (ITEM_SIZE + RAIL_GAP) * selectedIndex.coerceAtLeast(0),
+        targetValue = (ITEM_SIZE + RAIL_GAP) * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
         animationSpec = BUBBLE_SPRING,
         label = "DuoRailBubble",
     )
     Box(
         Modifier
             .width(ITEM_SIZE)
-            .tabBarMaterial(RoundedCornerShape(Radius.XL))
+            .tabBarMaterial(CircleShape)
             .setAutomationId("bottom_tab_bar")
     ) {
         Box(
@@ -168,7 +190,7 @@ private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (I
                     y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2 + bubbleOffset,
                 )
                 .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
-                .background(AppTheme.current.colors.background.selected, CircleShape)
+                .selectionLens(pressedIndex.value != null)
         )
         Column(
             modifier = Modifier.padding(vertical = RAIL_PADDING),
@@ -178,7 +200,7 @@ private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (I
                 Box(
                     modifier = Modifier
                         .size(ITEM_SIZE)
-                        .noFeedbackClickable { onItemClick(index) },
+                        .tabClickable(index, pressedIndex) { onItemClick(index) },
                     contentAlignment = Alignment.Center,
                 ) {
                     DuoTabIcon(item, selected = index == selectedIndex)
@@ -188,6 +210,7 @@ private fun Rail(items: List<BottomTabItem>, selectedIndex: Int, onItemClick: (I
     }
 }
 
+// Floating labelled bar for the unfolded portrait display, QR pinned in its own platter beside it.
 @Composable
 private fun BoxScope.DuoFloatingTabBar(
     layout: ScreenLayout,
@@ -196,73 +219,115 @@ private fun BoxScope.DuoFloatingTabBar(
     selectedIndex: Int,
     onTabSelected: (Int) -> Unit,
 ) {
-    val columnWidth = (layout.width - Spacing.M * 2 - Spacing.M * (GRID_COLUMNS - 1)) / GRID_COLUMNS
-    val barWidth = columnWidth * GRID_SPAN + Spacing.M * (GRID_SPAN - 1)
-    val useQr = floatingButton != null && items.size % 2 == 0
-    val middle = items.size / 2
-    val cellCount = items.size + if (useQr) 1 else 0
-    val visualIndex = if (useQr && selectedIndex >= middle) selectedIndex + 1 else selectedIndex
+    val pressedIndex = remember { mutableStateOf<Int?>(null) }
 
-    Box(
+    Row(
         modifier = Modifier
             .align(Alignment.BottomCenter)
-            .padding(bottom = layout.insetBottom + Spacing.M)
-            .width(barWidth)
-            .height(FLOATING_HEIGHT)
-            .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
-            .padding(FLOATING_PADDING)
-            .setAutomationId("bottom_tab_bar")
-    ) {
-        BoxWithConstraints(Modifier.fillMaxSize()) {
-            val cellWidth = maxWidth / cellCount
-            val bubbleOffset by animateDpAsState(
-                targetValue = cellWidth * visualIndex.coerceAtLeast(0),
-                animationSpec = BUBBLE_SPRING,
-                label = "DuoFloatingBubble",
+            .fillMaxWidth()
+            .absolutePadding(
+                left = layout.insetLeft + DuoMetrics.floatingTabBarMargin,
+                right = layout.insetRight + DuoMetrics.floatingTabBarMargin,
             )
-            Box(
-                Modifier
-                    .offset(x = bubbleOffset)
-                    .width(cellWidth)
-                    .fillMaxHeight()
-                    .background(AppTheme.current.colors.background.selected, CircleShape)
-            )
-            Row(Modifier.fillMaxSize()) {
-                items.forEachIndexed { index, item ->
-                    if (useQr && index == middle) {
-                        Box(Modifier.weight(1f).fillMaxHeight(), contentAlignment = Alignment.Center) {
-                            QrButton(floatingButton, size = FLOATING_QR_SIZE)
+            .padding(bottom = floatingTabBarBottom(layout.insetBottom)),
+        horizontalArrangement = Arrangement.spacedBy(Spacing.S, Alignment.CenterHorizontally),
+    ) {
+        Box(
+            modifier = Modifier
+                .weight(1f, fill = false)
+                .width(FLOATING_ITEM_WIDTH * items.size + FLOATING_PADDING * 2)
+                .height(FLOATING_HEIGHT)
+                .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
+                .padding(FLOATING_PADDING)
+                .setAutomationId("bottom_tab_bar")
+        ) {
+            BoxWithConstraints(Modifier.fillMaxSize()) {
+                val cellWidth = maxWidth / items.size.coerceAtLeast(1)
+                val bubbleOffset by animateDpAsState(
+                    targetValue = cellWidth * (pressedIndex.value ?: selectedIndex).coerceAtLeast(0),
+                    animationSpec = BUBBLE_SPRING,
+                    label = "DuoFloatingBubble",
+                )
+                Box(
+                    Modifier
+                        .offset(x = bubbleOffset)
+                        .width(cellWidth)
+                        .fillMaxHeight()
+                        .selectionLens(pressedIndex.value != null)
+                )
+                Row(Modifier.fillMaxSize()) {
+                    items.forEachIndexed { index, item ->
+                        FloatingCell(item, selected = index == selectedIndex, index, pressedIndex) {
+                            onTabSelected(index)
                         }
                     }
-                    FloatingCell(item, selected = index == selectedIndex) { onTabSelected(index) }
                 }
             }
         }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = FLOATING_HEIGHT, Modifier.shadow(3.dp, CircleShape))
+        }
     }
 }
 
 @Composable
-private fun RowScope.FloatingCell(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+private fun RowScope.FloatingCell(
+    item: BottomTabItem,
+    selected: Boolean,
+    index: Int,
+    pressedIndex: MutableState<Int?>,
+    onClick: () -> Unit,
+) {
     val colors = AppTheme.current.colors
     Column(
         modifier = Modifier
             .weight(1f)
             .fillMaxHeight()
-            .noFeedbackClickable(onClick = onClick),
+            .tabClickable(index, pressedIndex, onClick),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(Spacing.XXS, Alignment.CenterVertically),
     ) {
         DuoTabIcon(item, selected)
-        Text(
-            text = item.label,
-            style = Typography.labelXsMedium,
-            color = if (selected) colors.primary else colors.text.default,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
+        // like the system tab bar the label keeps its design size; Text grows it up to 5pt on the wide Duo displays
+        val context = LocalContext.current
+        val fixedScale = remember(context) {
+            (context ?: MiniAppContext()).copy(userScaleRate = 1f, useOSScaleRate = false)
+        }
+        CompositionLocalProvider(LocalContext provides fixedScale) {
+            Text(
+                text = item.label,
+                style = Typography.labelXsMedium,
+                color = if (selected) colors.primary else colors.text.hint,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
     }
 }
 
+// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
+@Composable
+private fun Modifier.tabClickable(index: Int, pressedIndex: MutableState<Int?>, onClick: () -> Unit): Modifier {
+    val interactionSource = remember { MutableInteractionSource() }
+    val pressed by interactionSource.collectIsPressedAsState()
+    LaunchedEffect(pressed) {
+        if (pressed) pressedIndex.value = index
+        else if (pressedIndex.value == index) pressedIndex.value = null
+    }
+    return clickable(interactionSource = interactionSource, indication = null, role = Role.Tab, onClick = onClick)
+}
+
+// Selection bubble; while pressed it grows into a lens (80x54 to about 96x70).
+@Composable
+private fun Modifier.selectionLens(pressed: Boolean): Modifier {
+    val lens by animateFloatAsState(if (pressed) 1f else 0f, LENS_SPRING, label = "DuoSelectionLens")
+    val tint = AppTheme.current.colors.primary.copy(alpha = SELECTION_TINT_ALPHA)
+    return graphicsLayer {
+        scaleX = 1 + lens * (LENS_SCALE_X - 1)
+        scaleY = 1 + lens * (LENS_SCALE_Y - 1)
+    }.background(tint, CircleShape)
+}
+
 @Composable
 private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
     val colors = AppTheme.current.colors
@@ -271,7 +336,7 @@ private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
         Icon(
             source = item.icon,
             size = ICON_SIZE,
-            color = if (selected) colors.primary else colors.text.default,
+            color = if (selected) colors.primary else colors.text.hint,
         )
         when {
             badgeLabel == null && !item.showDot -> Unit
@@ -288,9 +353,9 @@ private fun DuoTabIcon(item: BottomTabItem, selected: Boolean) {
 }
 
 @Composable
-private fun QrButton(data: BottomTabFloatingButton, size: Dp) {
+private fun QrButton(data: BottomTabFloatingButton, size: Dp, modifier: Modifier = Modifier) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(size)
             .clip(CircleShape)
             .background(AppTheme.current.colors.primary)
@@ -302,7 +367,7 @@ private fun QrButton(data: BottomTabFloatingButton, size: Dp) {
     }
 }
 
-// RN falls back to this when native glass is missing; Compose has no backdrop blur, so it always does.
+// RN BarMaterial: surface with a 1dp border.
 @Composable
 private fun Modifier.tabBarMaterial(shape: Shape): Modifier {
     val colors = AppTheme.current.colors

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

@@ -97,7 +97,7 @@ internal fun headerTitleMaxWidth(): Dp {
 // Scroll distance over which the Duo glass bar fades in.
 private val DUO_GLASS_FADE_DISTANCE = 16.dp
 
-// RN DuoGlassBackground fallback: translucent surface with a hairline once content scrolls under it.
+// RN DuoGlassBackground: translucent surface with a hairline once content scrolls under it.
 @Suppress("FrequentlyChangingValue")
 @Composable
 private fun Modifier.duoGlassBar(): Modifier {

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

@@ -17,17 +17,6 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-// AI-GENERATED START: dispose toolkit requests with their UI owner
-import androidx.compose.runtime.DisposableEffect
-import kotlinx.serialization.json.booleanOrNull
-import kotlinx.serialization.json.jsonPrimitive
-import vn.momo.maxapi.contract.navigation.model.DismissTarget
-import vn.momo.maxapi.contract.toolkit.model.ToolAction
-import vn.momo.maxapi.contract.toolkit.model.ToolkitOptions
-import vn.momo.maxapi.contract.toolkit.model.ToolkitToolGroup
-import vn.momo.maxapi.contract.toolkit.model.ToolkitTool
-import vn.momo.maxapi.runtime.ApiResult
-// AI-GENERATED END: dispose toolkit requests with their UI owner
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -106,56 +95,53 @@ internal fun Toolkit(
     var isFavorite by remember { mutableStateOf(false) }
     val isLoading by remember { mutableStateOf(false) }
 
-    // AI-GENERATED START: retain custom tool data and typed callback outcomes
-    val requests = remember(api, context?.appCode) { ToolkitRequests() }
-    DisposableEffect(requests) { onDispose { requests.close() } }
-
-    LaunchedEffect(requests) {
-        val client = api ?: return@LaunchedEffect
-        requests.launch<Boolean>({ callback -> client.checkFavorite(context?.appCode, callback) }) { result ->
-            if (result is ApiResult.Success) isFavorite = result.value
+    LaunchedEffect(context?.appCode) {
+        api?.isFavoriteApp(mapOf("code" to context?.appCode)) { callback ->
+            val response = callback?.get("response") as? Boolean
+            isFavorite = response == true
         }
     }
 
     fun onPressShortcut() {
-        val client = api ?: return
-        requests.launch({ callback ->
-            client.performToolAction(ToolAction.FAVORITE, context?.appCode, callback)
-        }) { result ->
-            if (result is ApiResult.Success) {
-                result.value.jsonPrimitive.booleanOrNull?.let { isFavorite = it }
+        api?.onToolAction(mapOf("item" to mapOf("key" to "onFavorite"), "context" to MiniAppContext.toMap(context))) { callback ->
+            val response = callback?.get("response") as? Map<*, *>?
+            val success = response?.get("success") as? Boolean
+            if (success == true){
+                isFavorite = !isFavorite
             }
         }
     }
 
     fun onPressMore() {
-        val client = api ?: return
-        val options = ToolkitOptions(
-            customToolGroups = headerRight.tools.map { group ->
-                ToolkitToolGroup(group.title, group.items.map { tool ->
-                    ToolkitTool(tool.key, tool.icon, tool.showBadge, tool.name, tool.showRightIcon)
-                })
-            },
-            useSystemTools = headerRight.useSystemTools,
-        )
-        requests.launch({ callback -> client.showToolkit(options, callback) }) { result ->
-            if (result is ApiResult.Success) headerRight.toolCallback?.invoke(result.value.actionKey)
+        api?.showTools(
+            mapOf(
+                "useSystemTools" to headerRight.useSystemTools,
+                "tools" to headerRight.tools.map { it.toMap() },
+                "context" to MiniAppContext.toMap(context)
+            )
+        ) { callback ->
+            val response = callback?.get("response") as? String
+            if (response != null) {
+                headerRight.toolCallback?.invoke(response)
+            }
         }
     }
-    // AI-GENERATED END: retain custom tool data and typed callback outcomes
 
     fun onPressHelpCenter() {
         if (context == null) return
-        // AI-GENERATED START: preserve Help Center context and own its event subscription
-        val client = api ?: return
-        requests.observe({ callback -> client.showBottomSheet(context.helpCenterRequest(), callback) }) {}
-        // AI-GENERATED END: preserve Help Center context and own its event subscription
+        api?.showHelpCenter(
+            mapOf(
+                "appId" to context.appId,
+                "code" to context.appCode,
+                "name" to context.appName,
+                "icon" to context.appIcon,
+                "description" to context.description
+            )
+        ) {}
     }
 
     fun onPressClose() {
-        // AI-GENERATED START: preserve current-container and whole-stack dismissal
-        api?.dismiss(if (headerRight.useCloseIcon) DismissTarget.Current() else DismissTarget.All) {}
-        // AI-GENERATED END: preserve current-container and whole-stack dismissal
+        if (headerRight.useCloseIcon) api?.dismiss { } else api?.dismissAll { }
     }
 
     val useHelpCenter = usesHelpCenter(context)

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

@@ -2,12 +2,6 @@ package vn.momo.kits.navigation.tracking
 
 import vn.momo.kits.application.MiniAppContext
 import vn.momo.maxapi.IMaxApi
-// AI-GENERATED START: serialize tracking attributes with their existing value types
-import kotlinx.serialization.json.JsonNull
-import kotlinx.serialization.json.JsonElement
-import kotlinx.serialization.json.JsonObject
-import kotlinx.serialization.json.JsonPrimitive
-// AI-GENERATED END: serialize tracking attributes with their existing value types
 import kotlin.time.Clock
 import kotlin.time.ExperimentalTime
 
@@ -21,7 +15,6 @@ class ScreenTrackingState {
     var action: String = "push"
 }
 
-// AI-GENERATED START: retain screen event names and typed tracking attributes
 object ScreenTracker {
 
     private var lastScreenName: String? = null
@@ -38,13 +31,13 @@ object ScreenTracker {
         val previousScreen = lastScreenName
         lastScreenName = screenName
 
-        maxApi?.trackEvent(
+        maxApi?.track(
             eventName = "auto_screen_navigated",
-            attributes = JsonObject(buildBaseParams(context, screenName).apply {
-                put("pre_screen_name", JsonPrimitive(previousScreen))
-                put("state", JsonPrimitive("navigated"))
-                put("action", JsonPrimitive(action))
-            })
+            params = buildBaseParams(context, screenName).apply {
+                put("pre_screen_name", previousScreen)
+                put("state", "navigated")
+                put("action", action)
+            }
         )
 
         state.releaseNavigated = true
@@ -60,12 +53,12 @@ object ScreenTracker {
     ) {
         if (state.releaseLoad) return
 
-        maxApi?.trackEvent(
+        maxApi?.track(
             eventName = "auto_screen_displayed",
-            attributes = JsonObject(buildBaseParams(context, screenName).apply {
-                put("state", JsonPrimitive("load"))
-                put("duration", JsonPrimitive(duration))
-            })
+            params = buildBaseParams(context, screenName).apply {
+                put("state", "load")
+                put("duration", duration)
+            }
         )
 
         state.releaseLoad = true
@@ -81,13 +74,13 @@ object ScreenTracker {
     ) {
         if (state.releaseInteraction) return
 
-        maxApi?.trackEvent(
+        maxApi?.track(
             eventName = "auto_screen_interacted",
-            attributes = JsonObject(buildBaseParams(context, screenName).apply {
-                put("state", JsonPrimitive("interaction"))
-                put("duration", JsonPrimitive(duration))
-                put("total_duration", JsonPrimitive(totalDuration))
-            })
+            params = buildBaseParams(context, screenName).apply {
+                put("state", "interaction")
+                put("duration", duration)
+                put("total_duration", totalDuration)
+            }
         )
 
         state.releaseInteraction = true
@@ -97,13 +90,13 @@ object ScreenTracker {
         context: MiniAppContext?,
         screenName: String,
         componentName: String = "Screen"
-    ): MutableMap<String, JsonElement> {
+    ): MutableMap<String, Any?> {
         return mutableMapOf(
-            "app_id" to JsonPrimitive(context?.appId),
-            "feature_code" to JsonPrimitive(context?.appCode),
-            "screen_name" to JsonPrimitive(screenName),
-            "component_name" to JsonPrimitive(componentName),
-            "tracking_source" to JsonPrimitive(1)
+            "app_id" to context?.appId,
+            "feature_code" to context?.appCode,
+            "screen_name" to screenName,
+            "component_name" to componentName,
+            "tracking_source" to 1
         )
     }
 
@@ -112,16 +105,16 @@ object ScreenTracker {
         context: MiniAppContext?,
         parentScreenName: String?
     ) {
-        maxApi?.trackEvent(
+        maxApi?.track(
             eventName = "auto_popup_displayed",
-            attributes = JsonObject(mapOf(
-                "screen_name" to JsonPrimitive(parentScreenName),
-                "tracking_source" to JsonPrimitive(1),
-                "app_id" to JsonPrimitive(context?.appId),
-                "feature_code" to JsonPrimitive(context?.appCode),
-                "kits_version" to JsonNull,
-                "component_name" to JsonPrimitive("Modal")
-            ))
+            params = mutableMapOf<String, Any?>(
+                "screen_name" to parentScreenName,
+                "tracking_source" to 1,
+                "app_id" to context?.appId,
+                "feature_code" to context?.appCode,
+                "kits_version" to null,
+                "component_name" to "Modal"
+            )
         )
     }
 
@@ -132,4 +125,3 @@ object ScreenTracker {
         lastScreenName = null
     }
 }
-// AI-GENERATED END: retain screen event names and typed tracking attributes

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

@@ -12,9 +12,7 @@ private const val STATUS_BAR_TAPPED_NOTIFICATION = "statusBarSelected"
 @Composable
 internal actual fun RegisterScrollToTop(callback: (() -> Unit)?) {
     val maxApi = LocalMaxApi.current
-    // AI-GENERATED START: capture the current typed logger client
-    DisposableEffect(callback, maxApi) {
-    // AI-GENERATED END: capture the current typed logger client
+    DisposableEffect(callback) {
         val token: NSObjectProtocol? = if (callback != null) {
             NSNotificationCenter.defaultCenter.addObserverForName(
                 name = STATUS_BAR_TAPPED_NOTIFICATION,
@@ -22,9 +20,7 @@ internal actual fun RegisterScrollToTop(callback: (() -> Unit)?) {
                 queue = NSOperationQueue.mainQueue,
             ) { _: NSNotification? ->
                 runCatching { callback() }.onFailure {
-                    // AI-GENERATED START: use typed host logging
-                    maxApi?.writeLog("[ScrollToTop] callback threw: ${it.message}")
-                    // AI-GENERATED END: use typed host logging
+                    maxApi?.logFile("[ScrollToTop] callback threw: ${it.message}") {}
 
                 }
             }

package/gradle/libs.versions.toml

@@ -1,7 +1,5 @@
 [versions]
-# AI-GENERATED START: align Kits and its samples with the approved SDK 36 toolchain
-android-compileSdk = "36"
-# AI-GENERATED END: align Kits and its samples with the approved SDK 36 toolchain
+android-compileSdk = "37"
 android-minSdk = "24"
 android-targetSdk = "36"
 ktor-version = "3.0.0-rc-1"
@@ -11,9 +9,7 @@ kSerialize = "1.7.1"
 compose = "1.10.3"
 navigation-multiplatform = "2.9.2"
 coil3-multiplatform = "3.0.0-alpha10"
-# AI-GENERATED START: align the Android toolchain with the integrating app
-androidGradlePlugin = "9.2.1"
-# AI-GENERATED END: align the Android toolchain with the integrating app
+androidGradlePlugin = "8.13.2"
 r8 = "8.9.35"
 kotlinx-datetime = "0.7.1"
 airbnb-lottie = "5.2.0"
@@ -21,9 +17,10 @@ compottie = "2.1.0"
 androidx-activity = "1.9.1"
 androidx-appcompat = "1.7.0"
 material = "1.10.0"
+maxapi = "0.1.1"
 vanniktechMavenPublish = "0.34.0"
 kits = "0.167.1-duo.1"
-nativemaxapi = "0.3.9"
+nativemaxapi = "0.0.6"
 gif-image = "0.1.2"
 
 [libraries]
@@ -70,7 +67,3 @@ compose = { id = "org.jetbrains.compose", version.ref = "compose" }
 android-library = { id = "com.android.library", version.ref = "androidGradlePlugin" }
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }
 vanniktech-mavenPublish = { id = "com.vanniktech.maven.publish", version.ref = "vanniktechMavenPublish" }
-
-# AI-GENERATED START: use the AGP Android target for Kotlin Multiplatform libraries
-android-kotlin-multiplatform-library = { id = "com.android.kotlin.multiplatform.library", version.ref = "androidGradlePlugin" }
-# AI-GENERATED END: use the AGP Android target for Kotlin Multiplatform libraries

package/gradle/wrapper/gradle-wrapper.properties

@@ -1,9 +1,7 @@
 #Thu Jul 31 17:05:40 ICT 2025
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-# AI-GENERATED START: align the Gradle wrapper with the integrating app
-distributionUrl=https\://services.gradle.org/distributions/gradle-9.5.0-bin.zip
-# AI-GENERATED END: align the Gradle wrapper with the integrating app
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME