@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

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

@@ -3,23 +3,27 @@ package vn.momo.kits.navigation.component
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+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.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
+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.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
+import vn.momo.kits.layout.getScreenLayout
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
+import vn.momo.kits.navigation.getInputSearchType
+import vn.momo.kits.navigation.usesDuoGlassHeader
 
 enum class AnimatedHeaderRatio(val value: Float){
     RATIO_16_9(16f / 9f),
@@ -29,6 +33,9 @@ enum class AnimatedHeaderRatio(val value: Float){
 
 internal val HEADER_BACKGROUND_HEIGHT = 154.dp
 
+// RN DuoScrollGradient: extended gradient runs this far below the header
+private val DUO_GRADIENT_EXTRA = 52.dp
+
 @Suppress("FrequentlyChangingValue")
 @Composable
 internal fun HeaderBackground() {
@@ -38,7 +45,8 @@ internal fun HeaderBackground() {
     val scrollState = LocalScrollState.current
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
 
-    val minHeight = AppStatusBar.current + HEADER_HEIGHT.dp
+    val layout = getScreenLayout()
+    val minHeight = layout.headerHeight
     val maxHeight = HEADER_BACKGROUND_HEIGHT
     val opacity by animateFloatAsState(
         targetValue = (1 - (scrollState.value * 1f / HEADER_HEIGHT * 1f)).coerceIn(0f, 1f),
@@ -57,20 +65,32 @@ internal fun HeaderBackground() {
         else -> 0.dp
     }
 
-    Box(Modifier.fillMaxWidth().height(height).background(backgroundColor)) {
+    // iPhone Duo glass header: the gradient leaves with the content, as the quick return header does
+    val useDuoGlass = options.usesDuoGlassHeader(layout)
+    // RN HeaderExtendHeader with search on the side bar layout: the gradient fills the header box,
+    // which for extended shrinks from 52pt below the header over the first 100pt of scroll
+    val duoSearch = layout.sideBar != null && getInputSearchType(options) != InputSearchType.None
+    val fillsBox = useDuoGlass || duoSearch
+    val duoModifier = when {
+        useDuoGlass -> {
+            val extra = if (options.headerType is HeaderType.Extended) DUO_GRADIENT_EXTRA else 0.dp
+            Modifier.height(minHeight + extra).graphicsLayer { translationY = -scrollState.value.toFloat() }
+        }
+        duoSearch && options.headerType is HeaderType.Extended -> {
+            val progress = (with(density) { scrollState.value.toDp() } / 100.dp).coerceIn(0f, 1f)
+            Modifier.height(minHeight + DUO_GRADIENT_EXTRA * (1 - progress))
+        }
+        duoSearch -> Modifier.height(minHeight)
+        else -> Modifier.height(height)
+    }
+
+    Box(Modifier.fillMaxWidth().then(duoModifier).clipToBounds().background(backgroundColor)) {
+        // on Duo the fade spans the gradient box; a banner image keeps its 375:154 shape, clipped
         Box(Modifier
-            .height(maxHeight)
             .fillMaxWidth()
+            .then(if (fillsBox && !theme.isHeaderImage()) Modifier.fillMaxHeight() else Modifier.height(maxHeight))
             .conditional(!theme.isHeaderImage()) {
-                background(Brush.linearGradient(
-                    colors = listOf(
-                        color,
-                        backgroundColor
-                    ),
-                    start = Offset(0f, 0f),
-                    end = Offset(0f, with(density) { maxHeight.toPx() })
-                    )
-                )
+                background(Brush.verticalGradient(colors = listOf(color, backgroundColor)))
             }
         ){
             if (!theme.isHeaderImage()) return@Box

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

@@ -23,7 +23,6 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
 internal fun HeaderJourney(
@@ -33,7 +32,7 @@ internal fun HeaderJourney(
     if (data !is HeaderTitle.Journey) return
     if (data.isLoading) return TitleJourneyShimmer()
 
-    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val maxWidth = headerTitleMaxWidth()
     val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
     val iconTint = parseHeaderTint(data.iconColor) ?: tint
 
@@ -98,7 +97,8 @@ internal fun parseHeaderTint(value: String?): Color? {
     val hex = when (raw.length) {
         3 -> "FF" + raw.map { "$it$it" }.joinToString("")
         6 -> "FF$raw"
-        8 -> raw
+        // CSS #RRGGBBAA, as RN passes it; Compose wants AARRGGBB
+        8 -> raw.substring(6) + raw.substring(0, 6)
         else -> return null
     }
     val v = hex.toLongOrNull(16) ?: return null

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

@@ -22,7 +22,6 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
 internal fun HeaderLocation(
@@ -32,7 +31,7 @@ internal fun HeaderLocation(
     if (data !is HeaderTitle.Location) return
     if (data.isLoading) return TitleLocationShimmer()
 
-    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val maxWidth = headerTitleMaxWidth()
     val tint = parseHeaderTint(data.tintColor) ?: tintIconColor
 
     Column(

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

@@ -6,6 +6,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
@@ -36,7 +37,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.layout.DuoMetrics
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.components.BadgeDot
@@ -70,11 +73,32 @@ fun HeaderRight(
     }
 }
 
+private const val HELP_CENTER_APP_ID = "vn.momo.helpcenter"
+
+private fun usesHelpCenter(context: MiniAppContext?): Boolean =
+    context != null && context.appId != HELP_CENTER_APP_ID
+
+private fun showsShortcut(headerRight: HeaderRight.Toolkit, context: MiniAppContext?): Boolean =
+    headerRight.useShortcut && !(headerRight.useMore && context == null)
+
+// Height of the vertical toolkit: the optional shortcut, then the help/home capsule.
+@Composable
+internal fun toolkitColumnHeight(headerRight: HeaderRight.Toolkit): Dp {
+    val context = LocalContext.current
+    val shortcut = if (showsShortcut(headerRight, context)) DuoMetrics.controlSize + Spacing.M else 0.dp
+    val groupCount = if (usesHelpCenter(context)) 2 else 1
+    return shortcut + if (groupCount > 1) DuoMetrics.itemPitch * groupCount else DuoMetrics.controlSize
+}
+
+// SideBarColumn: the iPhone Duo side bar; SideBarRow: the Duo header row on the status bar, same 48pt controls.
+internal enum class ToolkitLayout { Bar, SideBarColumn, SideBarRow }
+
 @Composable
 internal fun Toolkit(
     headerRight: HeaderRight.Toolkit,
     tintColor: Color? = null,
-    headerColor: HeaderColor
+    headerColor: HeaderColor,
+    layout: ToolkitLayout = ToolkitLayout.Bar,
 ) {
     val api = LocalMaxApi.current
     val context = LocalContext.current
@@ -120,6 +144,23 @@ internal fun Toolkit(
     }
     // 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
+    }
+
+    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
+    }
+
+    val useHelpCenter = usesHelpCenter(context)
+    val closeIcon = if (headerRight.useCloseIcon) "16_navigation_close_circle" else "16_basic_home"
+
     val navButtonConfig = getNavigationButtonConfig(
         headerRight,
         ::onPressShortcut,
@@ -130,12 +171,7 @@ internal fun Toolkit(
         group.items.any { it.showBadge }
     }
 
-    val isShowShortcut by remember(headerRight.useShortcut, headerRight.useMore, context) {
-        derivedStateOf {
-            (headerRight.useShortcut == true) &&
-                    !(headerRight.useMore == true && context == null)
-        }
-    }
+    val isShowShortcut = showsShortcut(headerRight, context)
 
     val icon by remember(navButtonConfig.icon, isFavorite) {
         derivedStateOf {
@@ -144,6 +180,47 @@ internal fun Toolkit(
         }
     }
 
+    if (layout != ToolkitLayout.Bar) {
+        val horizontal = layout == ToolkitLayout.SideBarRow
+        val controls = @Composable {
+            if (isShowShortcut) {
+                SideBarButton(
+                    icon = icon,
+                    headerColor = headerColor,
+                    enabled = !isLoading,
+                    showBadge = showBadge,
+                    onClick = navButtonConfig.onPress,
+                )
+            }
+            SideBarGroup(headerColor = headerColor, itemCount = if (useHelpCenter) 2 else 1, horizontal = horizontal) { item ->
+                if (useHelpCenter) {
+                    SideBarGroupItem(
+                        icon = "help_center",
+                        headerColor = headerColor,
+                        automationId = "btn_navigation_help_center",
+                        onClick = ::onPressHelpCenter,
+                        modifier = item,
+                    )
+                }
+                SideBarGroupItem(
+                    icon = closeIcon,
+                    headerColor = headerColor,
+                    automationId = "btn_navigation_close",
+                    onClick = ::onPressClose,
+                    modifier = item,
+                )
+            }
+        }
+        if (horizontal) {
+            Row(horizontalArrangement = Arrangement.spacedBy(Spacing.M), verticalAlignment = Alignment.CenterVertically) {
+                controls()
+            }
+        } else {
+            Column(verticalArrangement = Arrangement.spacedBy(Spacing.M)) { controls() }
+        }
+        return
+    }
+
     Row(
         verticalAlignment = Alignment.CenterVertically
     ) {
@@ -167,20 +244,12 @@ internal fun Toolkit(
                 .clip(shape = RoundedCornerShape(14.dp))
                 .background(headerColor.backgroundButton)
         ) {
-            if (context != null) {
+            if (useHelpCenter) {
                 Icon(
                     source = "help_center",
                     size = 20.dp,
                     color = headerColor.tintIconColor,
-                    modifier = Modifier.padding(4.dp).activeOpacityClickable {
-                        // AI-GENERATED START: open support through the typed action
-                        api?.let { client ->
-                            requests.launch({ callback ->
-                                client.performToolAction(ToolAction.SUPPORT, context.appCode, callback)
-                            }) {}
-                        }
-                        // AI-GENERATED END: open support through the typed action
-                    }
+                    modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressHelpCenter)
                 )
                 Box(
                     modifier = Modifier
@@ -190,14 +259,10 @@ internal fun Toolkit(
                 )
             }
             Icon(
-                source = "16_basic_home",
+                source = closeIcon,
                 size = 20.dp,
                 color = headerColor.tintIconColor,
-                modifier = Modifier.padding(4.dp).activeOpacityClickable {
-                    // AI-GENERATED START: preserve dismiss-all without selecting Home
-                    api?.dismiss(DismissTarget.All) {}
-                    // AI-GENERATED END: preserve dismiss-all without selecting Home
-                }
+                modifier = Modifier.padding(4.dp).activeOpacityClickable(onClick = ::onPressClose)
             )
         }
     }
@@ -205,16 +270,36 @@ internal fun Toolkit(
 
 
 
+// Colors follow the enclosing header, so it fits a `HeaderRight.Custom` next to the toolkit.
+@Composable
+fun NavigationButton(
+    icon: String,
+    onClick: () -> Unit,
+    showBadge: Boolean = false,
+    disabled: Boolean = false,
+    modifier: Modifier = Modifier,
+) {
+    NavigationButton(
+        disabled = disabled,
+        icon = icon,
+        showBadge = showBadge,
+        onClick = onClick,
+        headerColor = LocalHeaderColor.current ?: getHeaderColor(HeaderType.Default(), 1f, null, Colors.black_17),
+        modifier = modifier,
+    )
+}
+
 @Composable
 internal fun NavigationButton(
     disabled: Boolean,
     icon: String,
     showBadge: Boolean? = false,
     onClick: () -> Unit,
-    headerColor: HeaderColor
+    headerColor: HeaderColor,
+    modifier: Modifier = Modifier,
 ) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .size(28.dp)
             .activeOpacityClickable(enabled = !disabled, onClick = onClick)
     ) {
@@ -287,7 +372,9 @@ sealed interface HeaderRight {
         val useMore: Boolean = false,
         val useSystemTools: Boolean = true,
         val tools: List<ToolGroup> = emptyList(),
-        val toolCallback: ((String) -> Unit)? = { _ -> }
+        val toolCallback: ((String) -> Unit)? = { _ -> },
+        // Close dismisses only this mini app instead of returning home.
+        val useCloseIcon: Boolean = false,
     ) : HeaderRight
 }
 

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

@@ -8,13 +8,13 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
+import vn.momo.kits.application.DesignSystemKits
 import vn.momo.kits.components.Text
-import vn.momo.kits.const.KitDesignSystem
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.setAutomationId
 
 internal val headerFontFamily: String?
-    get() = if (KitDesignSystem.isWhiteList) "MoMoTrustDisplay" else null
+    get() = if (DesignSystemKits.getConfigs().isWhiteList) "MoMoTrustDisplay" else null
 
 @Composable
 internal fun HeaderTitle(

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

@@ -32,7 +32,6 @@ import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.navigation.component.HeaderTitle.User
-import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
 internal fun HeaderUser(
@@ -44,7 +43,7 @@ internal fun HeaderUser(
         return TitleUserShimmer()
     }
 
-    val maxWidth = getScreenDimensions().width.dp - 172.dp
+    val maxWidth = headerTitleMaxWidth()
 
     Row(
         modifier = Modifier

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

@@ -0,0 +1,37 @@
+// File: HelpCenterRequest.kt
+// Created At: 2026-10-19 +07:00
+// Created By: AI | AI Agent: Codex | Model: GPT-6
+// AI-GENERATED START: preserve the toolkit Help Center payload in the typed request
+package vn.momo.kits.navigation.component
+
+import kotlinx.serialization.json.JsonArray
+import kotlinx.serialization.json.JsonElement
+import kotlinx.serialization.json.JsonNull
+import kotlinx.serialization.json.JsonObject
+import kotlinx.serialization.json.JsonPrimitive
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.maxapi.contract.navigation.model.BottomSheetRequest
+import vn.momo.maxapi.contract.navigation.model.HelpCenterContext
+
+internal fun MiniAppContext.helpCenterRequest() = BottomSheetRequest.HelpCenter(
+    HelpCenterContext(
+        appId = appId,
+        code = appCode,
+        name = appName?.helpCenterJson(),
+        icon = appIcon,
+        description = description?.helpCenterJson(),
+    ),
+)
+
+private fun Any?.helpCenterJson(): JsonElement = when (this) {
+    null -> JsonNull
+    is JsonElement -> this
+    is String -> JsonPrimitive(this)
+    is Boolean -> JsonPrimitive(this)
+    is Number -> JsonPrimitive(this)
+    is Map<*, *> -> JsonObject(entries.associate { (key, value) -> key.toString() to value.helpCenterJson() })
+    is Iterable<*> -> JsonArray(map { it.helpCenterJson() })
+    is Array<*> -> JsonArray(map { it.helpCenterJson() })
+    else -> JsonPrimitive(toString())
+}
+// AI-GENERATED END: preserve the toolkit Help Center payload in the typed request

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

@@ -0,0 +1,192 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.size
+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.LaunchedEffect
+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.Shape
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.constrainHeight
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.bottomtab.LocalDuoBarCompression
+
+private val SIDE_BAR_ICON_SIZE = 24.dp
+
+// iPhone Duo: back and toolkit leave the bar for a column in the side safe area, as the system bars do.
+// bottomInset is what footer / tab bar / home indicator take from the bottom, gap included; the column stays above it.
+@Composable
+internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifier) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val screenLayout = getScreenLayout()
+    val sideBar = screenLayout.sideBar ?: return
+    val toolkit = options.headerRight as? HeaderRight.Toolkit
+    val empty = options.headerType == HeaderType.None || (options.hiddenBack && toolkit == null)
+    val compression = LocalDuoBarCompression.current
+    val fullHeight = if (empty) 0.dp else DuoMetrics.controlSize + (toolkit?.let { Spacing.M + toolkitColumnHeight(it) } ?: 0.dp)
+    LaunchedEffect(fullHeight, compression.setToolbarHeight) { compression.setToolbarHeight(fullHeight) }
+    if (empty) return
+
+    val headerColor = getHeaderColor(options.headerType, headerOpacity(), options.tintColor, Colors.black_17)
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+
+    Column(
+        modifier = modifier
+            .align(if (isRight) AbsoluteAlignment.TopRight else AbsoluteAlignment.TopLeft)
+            .width(sideBar.width)
+            .layout { measurable, constraints ->
+                val placeable = measurable.measure(constraints.copy(minHeight = 0))
+                val maxY = screenLayout.height.roundToPx() - bottomInset.roundToPx() - placeable.height
+                val y = minOf(sideBar.top.roundToPx(), maxY).coerceAtLeast(0)
+                layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
+                    placeable.place(0, y)
+                }
+            }
+            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+        verticalArrangement = Arrangement.spacedBy(Spacing.M),
+    ) {
+        if (options.hiddenBack) {
+            // keep the slot so the toolkit does not jump between root and pushed screens
+            Spacer(Modifier.size(DuoMetrics.controlSize))
+        } else {
+            SideBarButton(
+                icon = "arrow-back",
+                headerColor = headerColor,
+                automationId = "btn_navigation_back",
+                onClick = { navigator.onBackSafe { } },
+            )
+        }
+        when {
+            toolkit == null || compression.toolbarHidden -> Unit
+            // HIG "Toolbar compressed": tools fold into one button, distinct from the useMore icon
+            compression.toolbarCompressed -> SideBarButton(
+                icon = "navigation_menu",
+                headerColor = headerColor,
+                showBadge = toolkit.tools.any { group -> group.items.any { it.showBadge } },
+                automationId = "btn_navigation_toolbar",
+                onClick = compression.expandToolbar,
+            )
+            else -> Toolkit(
+                headerRight = toolkit,
+                tintColor = options.tintColor,
+                headerColor = headerColor,
+                layout = ToolkitLayout.SideBarColumn,
+            )
+        }
+    }
+}
+
+@Composable
+internal fun SideBarButton(
+    icon: String,
+    headerColor: HeaderColor,
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    showBadge: Boolean = false,
+    automationId: String? = null,
+) {
+    Box {
+        Box(
+            modifier = Modifier
+                .size(DuoMetrics.controlSize)
+                .sideBarGlass(headerColor, CircleShape)
+                .activeOpacityClickable(enabled = enabled, onClick = onClick)
+                .conditional(automationId != null) { setAutomationId(automationId.orEmpty()) },
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
+        }
+        if (showBadge) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.align(Alignment.TopEnd).offset(x = -Spacing.XXS, y = Spacing.XXS),
+            )
+        }
+    }
+}
+
+// Capsule grouping related controls, one item per 50pt: vertical in the side bar, horizontal on a header row.
+@Composable
+internal fun SideBarGroup(
+    headerColor: HeaderColor,
+    itemCount: Int,
+    horizontal: Boolean = false,
+    content: @Composable (itemModifier: Modifier) -> Unit,
+) {
+    val length = if (itemCount > 1) DuoMetrics.itemPitch * itemCount else DuoMetrics.controlSize
+    val item = length / itemCount.coerceAtLeast(1)
+    val glass = Modifier.sideBarGlass(headerColor, RoundedCornerShape(Radius.XL))
+    if (horizontal) {
+        Row(Modifier.size(width = length, height = DuoMetrics.controlSize).then(glass)) {
+            content(Modifier.size(width = item, height = DuoMetrics.controlSize))
+        }
+    } else {
+        Column(Modifier.size(width = DuoMetrics.controlSize, height = length).then(glass)) {
+            content(Modifier.size(width = DuoMetrics.controlSize, height = item))
+        }
+    }
+}
+
+@Composable
+internal fun SideBarGroupItem(
+    icon: String,
+    headerColor: HeaderColor,
+    automationId: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .activeOpacityClickable(onClick = onClick)
+            .setAutomationId(automationId),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
+    }
+}
+
+// Dark glass under light icons (banner headers), light glass otherwise. The light one is opaque:
+// Compose has no backdrop blur and a translucent fill shows its own shadow through (RN uses 85% white).
+private fun Modifier.sideBarGlass(headerColor: HeaderColor, shape: Shape): Modifier =
+    if (headerColor.tintIconColor == Colors.black_01) {
+        clip(shape)
+            .background(Colors.black_20.copy(alpha = 0.5f))
+            .border(0.5.dp, Colors.black_01.copy(alpha = 0.2f), shape)
+    } else {
+        shadow(3.dp, shape)
+            .background(Colors.black_01)
+            .border(0.5.dp, Colors.black_20.copy(alpha = 0.08f), shape)
+    }

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

@@ -83,7 +83,8 @@ internal fun SnackBar(
                     durationMillis = 200,
                 )
             )
-            navigator.hideSnackBar()
+            // hideSnackBar() would call clear() -> this close again while still bound
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

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

@@ -23,6 +23,14 @@ internal class ToolkitRequests {
         if (!active) created.cancel() else if (!completed) handles.add(created)
     }
 
+    // AI-GENERATED START: retain subscriptions across nonterminal sheet events
+    fun <T> observe(request: (ApiCallback<T>) -> ApiRequestHandle, onResult: ApiCallback<T>) {
+        if (!active) return
+        val handle = request { result -> if (active) onResult(result) }
+        if (active) handles.add(handle) else handle.cancel()
+    }
+    // AI-GENERATED END: retain subscriptions across nonterminal sheet events
+
     fun close() {
         active = false
         val pending = handles.toList()

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

@@ -14,6 +14,9 @@ data class ScreenDimension(
 
 expect fun getPlatformName(): String
 
+// iPhone idiom only; iPad windows and Android never get the iPhone / iPhone Duo layout.
+expect fun isPhoneIdiom(): Boolean
+
 @Composable
 expect fun getScreenDimensions(): ScreenDimension