@momo-kits/native-kits 0.163.1-beta.2-debug → 0.163.1-beta.20-debug

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

@@ -23,12 +23,14 @@ import androidx.navigation.compose.currentBackStackEntryAsState
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.components.*
 import vn.momo.kits.const.*
+import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
 internal val floatingButtonWidth = 75.dp
-internal const val BOTTOM_TAB_BAR_HEIGHT = 64
+@InternalApi
+const val BOTTOM_TAB_BAR_HEIGHT = 64
 
 @Composable
 internal fun BottomTabBar(

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

@@ -44,7 +44,8 @@ import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 import vn.momo.kits.navigation.getInputSearchType
 
-internal const val HEADER_HEIGHT = 52
+@InternalApi
+const val HEADER_HEIGHT = 52
 internal enum class InputSearchType { None, Header, Animated }
 enum class TitlePosition { LEFT, CENTER }
 

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

@@ -31,7 +31,6 @@ object ScreenTracker {
         val previousScreen = lastScreenName
         lastScreenName = screenName
 
-        println("Tracking screen navigated native kit: $screenName")
         maxApi?.track(
             eventName = "auto_screen_navigated",
             params = buildBaseParams(context, screenName).apply {

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

@@ -5,10 +5,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import io.github.alexzhirkevich.compottie.Compottie
 import io.github.alexzhirkevich.compottie.ExperimentalCompottieApi
 import io.github.alexzhirkevich.compottie.LottieCompositionSpec
 import io.github.alexzhirkevich.compottie.animateLottieCompositionAsState
@@ -23,6 +25,9 @@ internal fun ComposeLottieAnimation(
     path: String,
     tintColor: Color?,
     bgColor: Color?,
+    iterations: Int,
+    isPlaying: Boolean,
+    onEvent: ((String) -> Unit)?,
     modifier: Modifier,
 ) {
     val json = readJson(path)
@@ -49,9 +54,25 @@ internal fun ComposeLottieAnimation(
 
     val lottieState = animateLottieCompositionAsState(
         composition = composition,
-        iterations = Compottie.IterateForever,
+        iterations = iterations,
+        isPlaying = isPlaying,
+        restartOnPlay = false,
     )
 
+    val currentOnEvent by rememberUpdatedState(onEvent)
+
+    LaunchedEffect(isPlaying) {
+        currentOnEvent?.invoke(if (isPlaying) LottieEvent.Start else LottieEvent.Pause)
+    }
+
+    LaunchedEffect(lottieState) {
+        var armed = false
+        snapshotFlow { lottieState.isAtEnd }.collect { atEnd ->
+            if (!atEnd) armed = true
+            else if (armed) { armed = false; currentOnEvent?.invoke(LottieEvent.Finish) }
+        }
+    }
+
     Box(modifier.background(bgColor ?: Color.Transparent)) {
         Image(
             painter = rememberLottiePainter(

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

@@ -0,0 +1,9 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+// Overrides LocalDensity.fontScale with the live OS Dynamic Type scale so text re-scales while a
+// screen is visible. Wrapped inside the containers so every screen is covered, not just callers of
+// the app-level wrappers.
+@Composable
+expect fun ProvideOsFontScale(content: @Composable () -> Unit)

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

@@ -43,12 +43,23 @@ fun supportsImePadding(): Boolean = when (val v = getOSVersion()) {
     is OSVersion.Android -> v.sdk > 29
     is OSVersion.IOS -> true
 }
+const val LottieIterateForever: Int = Int.MAX_VALUE
+
+object LottieEvent {
+    const val Start = "start"
+    const val Pause = "pause"
+    const val Finish = "finish"
+}
+
 @Composable
 expect fun LottieAnimation(
     path: String,
     tintColor: Color? = null,
     bgColor: Color? = null,
     placedAsOverlay: Boolean = false,
+    iterations: Int = LottieIterateForever,
+    isPlaying: Boolean = true,
+    onEvent: ((String) -> Unit)? = null,
     modifier: Modifier = Modifier,
     useCompose: Boolean = false
 )

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/OsFontScale.ios.kt

@@ -0,0 +1,66 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
+import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.ObjCAction
+import platform.Foundation.NSNotification
+import platform.Foundation.NSNotificationCenter
+import platform.Foundation.NSSelectorFromString
+import platform.UIKit.UIContentSizeCategoryDidChangeNotification
+import platform.UIKit.UIFont
+import platform.UIKit.UIFontTextStyleBody
+import platform.darwin.NSObject
+
+// Compose MP iOS reads LocalDensity.fontScale once at ComposeUIViewController creation and does not
+// recompose it when UIContentSizeCategory changes (Android tracks Configuration.fontScale live). We
+// observe the notification and override LocalDensity.fontScale so scaleSize() recomposes live. The
+// formula matches the SwiftUI kit (UIFont body point size / 17) so both iOS surfaces scale alike.
+private const val DEFAULT_BODY_POINT_SIZE = 17.0
+
+private fun currentOsFontScale(): Float =
+    (UIFont.preferredFontForTextStyle(UIFontTextStyleBody).pointSize / DEFAULT_BODY_POINT_SIZE).toFloat()
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+actual fun ProvideOsFontScale(content: @Composable () -> Unit) {
+    val osFontScale = remember { mutableStateOf(currentOsFontScale()) }
+
+    val listener = remember {
+        object : NSObject() {
+            @Suppress("unused")
+            @ObjCAction
+            fun contentSizeChanged(arg: NSNotification) {
+                osFontScale.value = currentOsFontScale()
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        NSNotificationCenter.defaultCenter.addObserver(
+            observer = listener,
+            selector = NSSelectorFromString(listener::contentSizeChanged.name + ":"),
+            name = UIContentSizeCategoryDidChangeNotification,
+            `object` = null,
+        )
+        onDispose {
+            NSNotificationCenter.defaultCenter.removeObserver(
+                observer = listener,
+                name = UIContentSizeCategoryDidChangeNotification,
+                `object` = null,
+            )
+        }
+    }
+
+    val density = LocalDensity.current
+    CompositionLocalProvider(
+        LocalDensity provides Density(density.density, osFontScale.value),
+    ) {
+        content()
+    }
+}

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/Platform.ios.kt

@@ -11,6 +11,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.InternalComposeUiApi
@@ -96,20 +97,41 @@ actual fun LottieAnimation(
     tintColor: Color?,
     bgColor: Color?,
     placedAsOverlay: Boolean,
+    iterations: Int,
+    isPlaying: Boolean,
+    onEvent: ((String) -> Unit)?,
     modifier: Modifier,
     useCompose: Boolean
 ) {
     if (useCompose) {
-        ComposeLottieAnimation(path, tintColor, bgColor, modifier)
+        ComposeLottieAnimation(path, tintColor, bgColor, iterations, isPlaying, onEvent, modifier)
         return
     }
 
+    val loopCount = if (iterations == LottieIterateForever) -1.0 else iterations.toDouble()
+
     var animation by remember { mutableStateOf<CompatibleAnimation?>(null) }
+    val animationView = remember { mutableStateOf<CompatibleAnimationView?>(null) }
 
     LaunchedEffect(Unit) {
         animation = CompatibleAnimation(name = "compose-resources/composeResources/vn.momo.compose.resources/".plus(path), subdirectory = null, NSBundle.mainBundle)
     }
 
+    val currentOnEvent by rememberUpdatedState(onEvent)
+
+    LaunchedEffect(isPlaying) {
+        currentOnEvent?.invoke(if (isPlaying) LottieEvent.Start else LottieEvent.Pause)
+    }
+
+    LaunchedEffect(animationView.value, isPlaying) {
+        val view = animationView.value ?: return@LaunchedEffect
+        if (isPlaying) {
+            view.playWithCompletion(completion = { finished -> if (finished) currentOnEvent?.invoke(LottieEvent.Finish) })
+        } else {
+            view.pause()
+        }
+    }
+
     when (val value = animation) {
         null -> {
             Box(modifier)
@@ -126,7 +148,7 @@ actual fun LottieAnimation(
 
                             setBackgroundColor(bgColor?.toUIColor() ?: UIColor.clearColor)
 
-                            setLoopAnimationCount(-1.0)
+                            setLoopAnimationCount(loopCount)
                             setAnimationSpeed(1.0)
 
                             if (tintColor != null) {
@@ -140,12 +162,13 @@ actual fun LottieAnimation(
                                 setColorValue(uiColor, CompatibleAnimationKeypath("**.Stroke.Color"))
                             }
 
-                            play()
+                            animationView.value = this
                         }
                     },
 
                     update = { view ->
                         view.setBackgroundColor(bgColor?.toUIColor() ?: UIColor.clearColor)
+                        view.setLoopAnimationCount(loopCount)
 
                         if (tintColor != null) {
                             val uiColor = tintColor.toUIColor()

package/gradle/libs.versions.toml

@@ -21,6 +21,7 @@ maxapi = "0.1.1"
 vanniktechMavenPublish = "0.34.0"
 kits = "0.159.1-beta.7"
 nativemaxapi = "0.0.6"
+gif-image = "0.1.2"
 
 [libraries]
 ktor-client-core = { group = "io.ktor", name = "ktor-client-core", version.ref = "ktor-version" }
@@ -53,6 +54,7 @@ androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "a
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
 material = { module = "com.google.android.material:material", version.ref = "material" }
 
+gif-image = { module = "vn.momo.kits:gif-image", version.ref = "gif-image" }
 [plugins]
 jetbrains-kotlin-jvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
 jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.163.1-beta.2
+version=0.163.1-beta.20
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/ApplicationEnvironment.swift

@@ -41,11 +41,23 @@ public class ApplicationEnvironment: ObservableObject {
     let applicationContext: MiniAppContext?
     let composeApi: KitComposeApi?
     let config: KitConfig?
-    
-    public init(applicationContext: MiniAppContext? = nil, composeApi: KitComposeApi? = nil, config: KitConfig? = nil) {
+    let maxApi: MaxApi?
+
+    public init(applicationContext: MiniAppContext? = nil, composeApi: KitComposeApi? = nil, config: KitConfig? = nil, maxApi: MaxApi? = nil) {
         self.applicationContext = applicationContext
         self.composeApi = composeApi
         self.config = config
-        FontScaleStore.shared.bind(composeApi)
+        self.maxApi = maxApi
+    }
+}
+
+private struct ApplicationEnvironmentKey: EnvironmentKey {
+    static let defaultValue = ApplicationEnvironment()
+}
+
+public extension EnvironmentValues {
+    var applicationEnvironment: ApplicationEnvironment {
+        get { self[ApplicationEnvironmentKey.self] }
+        set { self[ApplicationEnvironmentKey.self] = newValue }
     }
 }

package/ios/Application/Components.swift

@@ -83,9 +83,8 @@ public struct HeaderBackground: View {
         self.headerTransparent = headerTransparent
         self.fullScreenContent = fullScreenContent
     }
-    
+
     public var body: some View {
-        
         let statusBarHeight = safeAreaTopInset()
         let opacity = max(0, 1 - scrollState / 200)
         let height = fullScreenContent ? 0 :  statusBarHeight + 52
@@ -115,7 +114,6 @@ public struct HeaderBackground: View {
                                     .opacity(opacity)
                                     .frame(height: height))
                         )
-
                     if !headerTransparent {
                         Rectangle()
                             .fill(Color.black.opacity(0.1))
@@ -148,12 +146,31 @@ public struct HeaderBackground: View {
     }
 }
 
+// MARK: - Bottom-tab root preference
+
+/// Set by `BottomTab` on appear so its enclosing `StackScreen` can detect that
+/// it's hosting a self-contained bottom-tab surface and skip its own bottom
+/// safe-area reservation — mirrors Compose's `Navigation.markAsBottomTabRoot()`
+/// (`navigation.isBottomTabRoot`, read by `StackScreen.kt`'s `MainContent`).
+/// Without this, `BottomTab`'s own internal safe-area handling gets an extra,
+/// unwanted inset stacked on top of it by the outer `StackScreen`, pushing the
+/// tab bar up higher than the true bottom inset.
+public struct IsBottomTabRootKey: PreferenceKey {
+    public static var defaultValue: Bool = false
+    public static func reduce(value: inout Bool, nextValue: () -> Bool) {
+        value = value || nextValue()
+    }
+}
+
 // MARK: - Header View
 
 public struct Header: View {
     var headerType: HeaderType = .default
     var titlePosition: TitlePosition
     var title: String
+    /// Optional rich title (mirrors Compose's `HeaderTitle`); `.user` renders an
+    /// avatar group instead of `title`. Defaults to nil → plain `title` text.
+    var headerTitle: HeaderTitle?
     var headerRight:  (()->any View)? = {HeaderRight()}
     var goBack: (() -> Void)?
     var opacity: CGFloat = 1
@@ -161,22 +178,27 @@ public struct Header: View {
     var scrollState: CGFloat = 0
     var inputSearchProps: InputSearchProps?
     var tintColor: Color?
+    /// Title opacity; used by the animated search header to fade the title out on scroll.
+    var titleOpacity: CGFloat = 1
 
     public init(
         headerType: HeaderType = .default,
         titlePosition: TitlePosition,
         title: String,
+        headerTitle: HeaderTitle? = nil,
         headerRight:  (()->any View)? = {HeaderRight()},
         goBack: (() -> Void)? = nil,
         opacity: CGFloat = 1,
         animatedHeader: AnimatedHeader? = nil,
         scrollState: CGFloat = 0,
         inputSearchProps: InputSearchProps? = nil,
-        tintColor: Color? = nil
+        tintColor: Color? = nil,
+        titleOpacity: CGFloat = 1
     ) {
         self.headerType = headerType
         self.titlePosition = titlePosition
         self.title = title
+        self.headerTitle = headerTitle
         self.headerRight = headerRight
         self.goBack = goBack
         self.opacity = opacity
@@ -184,10 +206,11 @@ public struct Header: View {
         self.scrollState = scrollState
         self.inputSearchProps = inputSearchProps
         self.tintColor = tintColor
+        self.titleOpacity = titleOpacity
     }
-    
+
     public var body: some View {
-        
+
         let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
         let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
 
@@ -223,33 +246,16 @@ public struct Header: View {
                         }
 
                         if let inputProps = inputSearchProps {
-                            InputSearch(
-                                text: inputProps.$text,
-                                buttonText: inputProps.buttonText,
-                                showButtonText: inputProps.showButtonText,
-                                showBorder: inputProps.showBorder,
-                                placeholder: inputProps.placeholder,
-                                onChangeText: inputProps.onChangeText,
-                                onPressButtonText: inputProps.onPressButtonText,
-                                error: inputProps.error,
-                                disabled: inputProps.disabled,
-                                icon: inputProps.icon,
-                                iconColor: inputProps.iconColor,
-                                onRightIconPressed: inputProps.onRightIconPressed,
-                                onFocus: inputProps.onFocus,
-                                onBlur: inputProps.onBlur,
-                                loading: inputProps.loading,
-                                fontWeight: inputProps.fontWeight,
-                                keyboardType: inputProps.keyboardType
-                            )
+                            InputSearch(props: inputProps)
+                        } else if case let .user(userData)? = headerTitle {
+                            if #available(iOS 16.0, *) {
+                                HeaderUserView(userData)
+                            }
                         } else {
-                            Text(title)
-                                .font(.system(size: 17, weight: .bold))
-                                .ignoreBoldTextSetting()
-                                .foregroundColor(tintColor ?? Colors.black17)
+                            MomoText(headerTitle?.defaultTitle ?? title, typography: .headerDefaultBold, color: tintColor ?? Colors.black17, maxLines: 1)
+                                .opacity(titleOpacity)
                                 .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
                                 .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
-                                .lineLimit(1)
                         }
 
                         Spacer()

package/ios/Application/FloatingButton.swift

@@ -3,11 +3,16 @@ import Combine
 
 public enum FABSize {
     case small
+    case `default`
+    /// Backward-compatible alias for older iOS call sites. Compose names this
+    /// size `DEFAULT`.
     case large
-    
 }
 
 public enum FABPosition {
+    case end
+    /// Backward-compatible alias for older iOS call sites. Compose names this
+    /// position `END`.
     case right
     case center
 }
@@ -31,10 +36,10 @@ public struct FabProps {
         label: String? = nil,
         onClick: (() -> Void)? = nil,
         containerColor: Color? = Colors.primary,
-        size: FABSize? = .small,
+        size: FABSize? = .default,
         iconSize: CGFloat? = nil,
         scrollOffset: CGFloat? = nil,
-        position: FABPosition? = .right,
+        position: FABPosition? = .end,
         bottomPadding: CGFloat? = nil,
         renderComponent: (() -> AnyView)? = nil
     ) {
@@ -65,7 +70,7 @@ public struct FloatingButton: View {
     private var keyboardOffset: CGFloat
     private var scrollOffset: CGFloat
     private var bottomPadding: CGFloat { props.bottomPadding ?? 12 + keyboardOffset}
-    private var position: FABPosition? { props.position ?? .right }
+    private var position: FABPosition? { props.position ?? .end }
     private var containerColor: Color? { props.containerColor ?? Colors.primary }
     private var iconColor: Color? { props.iconColor ?? .white }
     private var label: String? { props.label }
@@ -152,11 +157,7 @@ public struct FloatingButton: View {
             if let label = label {
                 if showText {
                     Spacer().frame(width: 8)
-                    Text(label)
-                        .foregroundColor(.white)
-                        .font(.system(size: scaleSize(16), weight: .bold))
-                        .ignoreBoldTextSetting()
-                        .lineLimit(1)
+                    MomoText(label, typography: .actionDefaultBold, color: .white, maxLines: 1)
                         .background(
                             GeometryReader { geo in
                                 Color.clear.onAppear {