@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/CLAUDE.md

@@ -40,7 +40,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 ## Architecture essentials
 
 - **Entry point:** wrap content in `NavigationContainer(...)` from `navigation/`. It builds the `Navigator`, takes a host-supplied `Localize` (falls back to an empty one), and provides the CompositionLocals below. **Do not use** `ApplicationContainer` (`application/NavigationContainer.kt`) — deprecated and does **not** wire `LocalLocalize` / `LocalNavigator` / `LocalMaxApi`.
-- **Configuration flows via CompositionLocals**, not params. Public ones: `AppTheme`, `AppStatusBar`, `AppNavigationBar` (`const/Theme.kt`); `ApplicationContext`, `AppConfig`, `AppLanguage`, `LocalLocalize`, `ScaleSizeMaxRate` (`application/`); `LocalNavigator`, `LocalMaxApi` (`navigation/`). Read with `X.current`.
+- **Configuration flows via CompositionLocals**, not params. Public ones: `AppTheme`, `AppStatusBar`, `AppNavigationBar` (`const/Theme.kt`); `ApplicationContext`, `AppConfig`, `AppLanguage`, `LocalLocalize` (`application/`); `LocalNavigator`, `LocalMaxApi` (`navigation/`). Read with `X.current`.
 - **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`.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-beta.8-debug"
+        version = "0.163.1-beta.9-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.162.2-beta.19'
+    spec.version                  = '0.163.1-beta.9-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -0,0 +1,7 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+// Android's LocalDensity.fontScale already tracks Configuration.fontScale live.
+@Composable
+actual fun ProvideOsFontScale(content: @Composable () -> Unit) = content()

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

@@ -8,7 +8,10 @@ import android.graphics.PorterDuffColorFilter
 import android.os.Build
 import androidx.compose.foundation.layout.Box
 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 androidx.compose.ui.graphics.NativePaint
@@ -21,7 +24,7 @@ import androidx.compose.ui.unit.dp
 import com.airbnb.lottie.LottieProperty
 import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieCompositionSpec
-import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.airbnb.lottie.compose.rememberLottieDynamicProperties
 import com.airbnb.lottie.compose.rememberLottieDynamicProperty
@@ -78,11 +81,14 @@ 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
     }
 
@@ -110,9 +116,30 @@ actual fun LottieAnimation(
         )
     )
 
+    val lottieState = animateLottieCompositionAsState(
+        composition = composition,
+        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) }
+        }
+    }
+
     LottieAnimation(
         composition = composition,
-        iterations = LottieConstants.IterateForever,
+        progress = { lottieState.progress },
         dynamicProperties = if (tintColor != null) dynamicProperties else null,
         modifier = modifier
     )

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Context.kt

@@ -29,6 +29,8 @@ data class MiniAppContext(
     val permissions: List<Map<String, Any>>? = emptyList(),
     val features: FeatureFlags? = null,
     val scaleSizeMaxRate: Float? = null,
+    val userScaleRate: Float? = null,
+    val useOSScaleRate: Boolean? = null,
 ) {
     companion object {
 
@@ -61,6 +63,8 @@ data class MiniAppContext(
                 permissions = if (!parent.permissions.isNullOrEmpty()) parent.permissions else child.permissions,
                 features = mergeFeatureFlags(parent.features, child.features),
                 scaleSizeMaxRate = parent.scaleSizeMaxRate ?: child.scaleSizeMaxRate,
+                userScaleRate = parent.userScaleRate ?: child.userScaleRate,
+                useOSScaleRate = parent.useOSScaleRate ?: child.useOSScaleRate,
             )
         }
 
@@ -98,4 +102,5 @@ val LocalComponentInformation = staticCompositionLocalOf<ComponentInformation?>
     null
 }
 
+@Deprecated("Max font scale is fixed at MAX_FONT_SCALE (1.5); this CompositionLocal is no longer read.")
 val ScaleSizeMaxRate = staticCompositionLocalOf<Float?> { null }

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

@@ -139,7 +139,7 @@ private fun ToolkitHeaderRight(
     }
 
     fun onPressClose() {
-        api?.request("dismissAll", "")
+        api?.request("dismissAll", "", { _ -> })
     }
 
     fun onPressMore() {

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -7,6 +7,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.DeprecatedModifier
+import vn.momo.kits.platform.ProvideOsFontScale
 import vn.momo.kits.platform.getStatusBarHeight
 
 @Deprecated("Use IMaxApi instead", ReplaceWith("IMaxApi"))
@@ -93,6 +94,7 @@ fun ApplicationContainer(
 
     val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
 
+    ProvideOsFontScale {
     CompositionLocalProvider(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,
@@ -103,5 +105,6 @@ fun ApplicationContainer(
             content()
         }
     }
+    }
 
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/application/WidgetContainer.kt

@@ -0,0 +1,56 @@
+package vn.momo.kits.application
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Theme
+import vn.momo.kits.navigation.LocalMaxApi
+import vn.momo.kits.platform.ProvideOsFontScale
+import vn.momo.maxapi.IMaxApi
+
+
+@Composable
+fun WidgetContainer(
+    theme: Theme? = null,
+    miniAppContext: MiniAppContext? = null,
+    maxApi: IMaxApi? = null,
+    localize: Localize? = null,
+    content: @Composable () -> Unit,
+) {
+    val parentContext = LocalContext.current
+    val mergedContext = remember(parentContext, miniAppContext) {
+        MiniAppContext.merge(parentContext, miniAppContext)
+    }
+    val resolvedTheme = theme ?: AppTheme.current
+    val resolvedLocalize = localize ?: LocalLocalize.current
+    val resolvedMaxApi = maxApi ?: LocalMaxApi.current
+
+    LaunchedEffect(resolvedMaxApi, localize) {
+        val api = resolvedMaxApi ?: return@LaunchedEffect
+        val target = localize ?: return@LaunchedEffect
+        runCatching {
+            api.getLanguage(callback = { data ->
+                if (parseLanguage(data) == Localize.EN) target.changeLanguage(Localize.EN)
+            })
+        }
+    }
+
+    ProvideOsFontScale {
+        CompositionLocalProvider(
+            AppTheme provides resolvedTheme,
+            LocalContext provides mergedContext,
+            LocalLocalize provides resolvedLocalize,
+            LocalMaxApi provides resolvedMaxApi,
+        ) {
+            content()
+        }
+    }
+}
+
+private fun parseLanguage(raw: Map<String, Any?>?): String? {
+    val code = (raw?.get("response") as? String)?.trim()?.lowercase()
+    if (code.isNullOrEmpty()) return null
+    return if (code.startsWith(Localize.EN)) Localize.EN else Localize.VI
+}

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

@@ -4,6 +4,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import vn.momo.kits.application.ScaleSizeMaxRate
 
+@Deprecated(
+    "Max font scale is fixed at MAX_FONT_SCALE (1.5); this override is no longer applied. Remove the wrapper.",
+    ReplaceWith("content()"),
+)
 @Composable
 fun ScaleSizeScope(
     scaleSizeMaxRate: Float? = null,

package/compose/src/commonMain/kotlin/vn/momo/kits/const/KitFontScale.kt

@@ -0,0 +1,22 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+// App-wide font-scale holder. The kit is sandboxed and can't read the host cache directly, so the
+// host (which sees both core and this kit) seeds this once at startup and pushes runtime updates into
+// it. scaleSize() reads it as the fallback, so every screen — including direct NavigationContainer
+// screens with no host-pushed MiniAppContext — scales with no per-render prop and no async flicker.
+// Backed by snapshot state: writes recompose text automatically.
+object KitFontScale {
+    var userScaleRate by mutableStateOf(1f)
+        private set
+    var useOSScaleRate by mutableStateOf(true)
+        private set
+
+    fun update(userScaleRate: Float, useOSScaleRate: Boolean) {
+        this.userScaleRate = userScaleRate
+        this.useOSScaleRate = useOSScaleRate
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -11,7 +11,7 @@ import androidx.compose.ui.unit.*
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
-import vn.momo.kits.application.ScaleSizeMaxRate
+import vn.momo.kits.application.LocalContext
 import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.uikits.resources.*
 import kotlin.math.max
@@ -23,7 +23,13 @@ const val MAX_DEVICE_SCALE = 5
 
 @Composable
 fun scaleSize(size: Float): Float {
-    val scaleSizeMaxRate: Float = ScaleSizeMaxRate.current ?: MAX_FONT_SCALE
+    val context = LocalContext.current
+    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
+    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    if (!useOsScale) {
+        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
+    }
+    val scaleSizeMaxRate: Float = MAX_FONT_SCALE
     val deviceWidth = getScreenDimensions().width
     val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
 

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -1,2 +1,65 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+
+/**
+ * A white rounded surface card that lays its [Item]s on a 12-column grid
+ * (React kit foundations/Layout/Card). 8dp gutter, 12dp padding, 12dp
+ * horizontal margin, Radius.M corners, background = theme surface, optional
+ * shadow or [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Card(
+    useShadow: Boolean = false,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 8.dp
+    val shape = RoundedCornerShape(Radius.M)
+    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
+    if (useShadow) surface = surface.shadow(4.dp, shape)
+    surface = surface.clip(shape)
+    // The React kit drops the surface colour when a backgroundImage is supplied
+    // (`!!backgroundImage && { backgroundColor: undefined }`).
+    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    Box(modifier = surface) {
+        // React renders this as an absolutely-filled child BEHIND the content
+        // (styles.imageBackground: position absolute, inset 0) — matchParentSize
+        // fills the card without contributing to its measured size.
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(12.dp)) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge: it keeps a full 12-span Item ~1dp narrower than the content
+            // box so sub-pixel rounding can never overflow and wrap the FlowRow.
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -4,32 +4,45 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 
+/**
+ * Grid context supplied by [Section] / [Card]: the per-span cell size + gutter,
+ * so an [Item] can resolve its pixel width from a 1-12 `widthSpan`. Mirrors the
+ * React kit's GridContext (foundations/Layout/GridSystem).
+ */
 data class GridContext(
-    val numberOfColumns: Number,
-    val gutterSize: Number,
-    val sizePerSpan: Number,
-    val getSizeSpan: (Number) -> Number
-)
+    val numberOfColumns: Int = 12,
+    val gutter: Dp = 12.dp,
+    val sizePerSpan: Dp = 0.dp,
+) {
+    /** Width covering `span` columns + the (span-1) gutters between them. */
+    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+}
+
+/** Provided by Section/Card; null when an Item is rendered outside a grid. */
+val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
+/**
+ * A grid cell. `widthSpan` (1-12) sets the width as a fraction of the parent
+ * Section/Card; the parent's flex-wrap flows the cells into rows. Rendered
+ * outside a grid it just wraps its content at its natural size.
+ */
 @Composable
 fun Item(
-    heightSpan: Number = 1,
-    widthSpan: Number = 1,
-    content: @Composable () -> Unit,
+    widthSpan: Int = 12,
+    heightSpan: Int = 0,
     modifier: Modifier = Modifier,
-    grid: GridContext
+    content: @Composable () -> Unit,
 ) {
-
-    val widthItem = grid.getSizeSpan(widthSpan)
-    val heightItem = grid.getSizeSpan(heightSpan)
-
-    Box(
-        modifier = modifier.width(width = Dp(widthItem.toFloat()))
-            .height(height = Dp(heightItem.toFloat()))
-    ) {
-        content()
+    val grid = LocalGridContext.current
+    var m = modifier
+    if (grid != null) {
+        m = m.width(grid.sizeForSpan(widthSpan))
+        if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-}
+    Box(modifier = m) { content() }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -1,2 +1,51 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+/**
+ * A transparent 12-column grid row that wraps its [Item]s (React kit
+ * foundations/Layout/Section). 12dp gutter; 12dp horizontal margin when
+ * `useMargin`; optional [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 12.dp
+    val margin = if (useMargin) 12.dp else 0.dp
+    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        // React renders this as an absolutely-filled child behind the content
+        // (styles.imageBackground: position absolute, inset 0).
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge — keeps a full 12-span Item ~1dp inside the content box so
+            // sub-pixel rounding can never overflow and wrap the FlowRow.
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

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

@@ -117,7 +117,7 @@ internal fun BottomSheet(
                     easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
                 )
             )
-            navigator.pop()
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

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

@@ -81,7 +81,7 @@ internal fun ModalScreen(
                 targetValue = 0.8f,
                 animationSpec = tween(durationMillis = 200)
             )
-            navigator.pop()
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

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

@@ -85,7 +85,9 @@ data class NavigationOptions(
     val footerComponent: @Composable (() -> Unit)? = null,
     val floatingButtonProps: FloatingButtonProps? = null,
     val keyboardOptions: KeyboardOptions = KeyboardOptions()
-)
+) {
+    internal fun hasFooter() : Boolean = footerComponent != null
+}
 
 data class KeyboardOptions(
     val keyboardShouldPersistTaps: Boolean = false,