@momo-kits/native-kits 0.167.1-duo-search.3-debug → 0.167.1-duo-search.22-debug

package/CLAUDE.md

@@ -18,7 +18,7 @@ Guidance for working in this repo. Keep it accurate — update it when structure
 ## Source layout (`compose/src/commonMain/kotlin/vn/momo/kits/`)
 
 - `components/` — ~50 UI components, **one file per component** (`Button.kt`, `Input*.kt`, `PopupNotify.kt`, …).
-- `application/` — app-level context & config: `Context.kt` (CompositionLocals, `MiniAppContext`, `DesignSystemConfig`), `Localize.kt` (i18n: `LocalizationObject`, `Localize`, default dictionary), `Screen.kt`, header pieces. Also holds the **deprecated** `ApplicationContainer`.
+- `application/` — app-level context & config: `Context.kt` (CompositionLocals, `MiniAppContext`, `DesignSystemConfig`), `Localize.kt` (i18n: `LocalizationObject`, `Localize`, default dictionary), `LiteScreen.kt` (standalone lightweight screen with its own header), `WidgetContainer.kt`.
 - `navigation/` — `NavigationContainer.kt` (**canonical entry point**), `Navigator.kt`, `Navigation.kt`, `StackScreen.kt`, `bottomtab/`, `component/`, `tracking/`.
 - `const/` — design tokens: `Theme.kt`, `Colors.kt`, `Typography.kt`, `Spacing.kt`, `Radius.kt`.
 - `layout/`, `modifier/`, `utils/`.
@@ -46,7 +46,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`.
+- **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. The legacy `Screen` / `ApplicationContainer` / `ComposeApi` stack has been removed on both sides — don't reintroduce it.
 - **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`.
 - **Design-system config** (`trustBanner`, `headerBar`, `headerGradient`): the host seeds `KitDesignSystemConfig.update(...)` once (same pattern as `KitFontScale`); `NavigationContainer` provides it as `LocalDesignSystemConfig` (param `designSystemConfig` → parent → global) and applies `headerBar` as the header image when the theme has none.
 - **Platform code** goes through `expect`/`actual` in `platform/` — never reference Android/iOS APIs from `commonMain` directly.
@@ -56,11 +56,13 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 ## SwiftUI kit (`ios/`)
 
-- **Layout mirrors Compose:** `ios/Navigation/` follows `navigation/` file for file (`NavigationContainer`, `Navigator`, `Navigation` (options + per-screen `Navigation`), `StackScreen` (incl. `NavigationFooter`), `BottomSheet`, `ModalScreen`, `HostBackGestureBridge`, `BottomTab/`, `Component/`, `Tracking/`); `ios/Layout/ScreenLayout.swift` mirrors `layout/`. `ios/Application/` keeps only context (`ApplicationEnvironment`), `Localize*`, `MaxApi` and the deprecated `Screen` / `LegacyHeader` (Compose `application/`). Change a navigation piece on both sides together.
-- **File basenames must be unique across the pod** — Swift fails with "filename used twice" even in different folders (hence `LegacyHeader.swift` next to `Navigation/Component/Header.swift`). New folders under `ios/` must be added to `source_files` in `ios/native-kits.podspec`.
+- **Layout mirrors Compose:** `ios/Navigation/` follows `navigation/` file for file (`NavigationContainer`, `Navigator`, `Navigation` (options + per-screen `Navigation`), `StackScreen` (incl. `NavigationFooter`), `StackTransition`, `SwipeBackHaptic`, `BottomSheet`, `ModalScreen`, `HostBackGestureBridge`, `BottomTab/`, `Component/`, `Tracking/`); `ios/Layout/ScreenLayout.swift` mirrors `layout/`. `ios/Application/` keeps only context (`ApplicationEnvironment`), `Localize*` and `MaxApi` (Compose `application/`). Change a navigation piece on both sides together.
+- **File basenames must be unique across the pod** — Swift fails with "filename used twice" even in different folders. New folders under `ios/` must be added to `source_files` in `ios/native-kits.podspec`.
 - Screens update their own chrome at runtime through `@EnvironmentObject var navigation: Navigation` → `setOptions { $0.title = … }` (Compose `LocalNavigation`); bottom tabs keep one `Navigation` per tab. The host back bridge is `HostBackGestureBridge.shared` (`NavigatorManager` is a deprecated alias); a bottom tab off its first tab routes back to the first tab (`Navigator.tabBackHandler`, keyed by the hosting screen).
-- The pod's minimum is **iOS 15**, but the navigation shell (`NavigationContainer`, `Navigator`, `HostBackGestureBridge`, `BottomTab`, overplay views) is **iOS 16+** (`@available(iOS 16.0, *)`) because it is built on `NavigationStack`. Keep components outside that shell iOS 15-compatible.
-- `present` opens one `fullScreenCover` that hosts its own `NavigationStack` (`Navigator.presentedPath`): pushes and pops act on the presented flow while it is up, and each overplay (modal / bottom sheet / snackbar) renders in the context it was shown over (`OverplayItem.presentedId`).
+- Everything, navigation shell included, supports the pod's minimum **iOS 15** — no `@available` gates on public types. iOS 16+ APIs only behind `#available` with an iOS 15 path (`Layout`: `BottomSheet` `CapHeight`, `GridFlow` → `_VariadicView` flow row).
+- **Usage is `NavigationContainer` + `Navigator` + `Navigation` only**; the kit owns the stack, transitions, overplays and back gesture. There is no `NavigationStack`: `StackTransition.swift` holds `StackHost` (representable) + `StackController`, the NavHost counterpart. Each entry gets its own `UIHostingController`, kept while on the stack and removed from the window while covered (state kept, onDisappear / onAppear like UINavigationController). Motion is a SwiftUI `offset` per card driven by one `coverage` value on a display link (a UIKit transform would move the safe area); it is Compose `StackTransition` 1:1 (RN `forStackTransitionWithOverlay`: linear 300ms slide, 0.3 parallax, `pink09` scrim to 0.6, 8pt edge shadow to 0.3). Card roots get the container environment via `.environment(\.self, …)` with the kit environment re-applied on top, so host environment objects reach screens.
+- One back stack, root first (`Navigator.entries`, Compose's back stack): `present` appends a dialog entry that rises (FastOutSlowIn 300ms) and later pushes stack on top of it; `dismiss` drops the topmost dialog and everything above it (slides down whole); `popToRoot` returns to the active flow's root. Overplays (modal / bottom sheet / snackbar) render inside the screen they were shown over (`OverplayItem.screenId`, Compose `currentRootId`), so a later push slides over them.
+- Host back gesture: `HostBackGestureBridge.started` / `progressed` / `completed` / `cancelled` scrub the pop (`Navigator.backStarted` …) only for a plain pop; tab back, `onBackHandler`, `preventBack`, an open overplay or a presented top wait for the release and go through `onBackSafe`. `SwipeBackHaptic` ticks at 50pt (`MaxApi.triggerEventVibration`, default = system light impact).
 - Icons are compiled in: `ios/Icon/Icons.swift` is generated from Compose `utils/Icons.kt` by `node scripts/gen-ios-icons.mjs` — don't hand-edit it. A host `icon.json` in the main bundle only adds keys the kit lacks.
 - Bundled assets (colors, Lottie JSON) live in `ios/Resources` and ship in the `MoMoUIKitsResources` bundle; load them through `MoMoUIKitsResources.bundle`, never `Bundle.main`.
 
@@ -68,11 +70,12 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 - `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, raw top/bottom + side insets, `contentWidth`, header geometry, the iPhone Duo `sideBar` and `duoTopInset`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
 - iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (short side of screen or window > 440, RN `device.ts`) drives popups, modal and bottom sheet.
-- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display in portrait, where the header is 76pt and the row starts at 14pt so the title centers on the camera punchout.
+- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display: in portrait the header is 76pt and the row starts at 14pt so the title centers on the camera punchout; in landscape the row centers on the camera when it sits at the top end of the strip (else on the back button) and the header reaches 8pt below the back button.
+- iPhone Duo inner display in portrait (status bar on top): the header row shares the status bar band — `headerHeight` 94pt (2 × the clock digits' y 47), `headerStatusBarHeight` 0 — and `ScreenLayout.statusBarClearance` keeps it between the clock / battery clusters (from reserved regions, else 128pt on the right). Back and toolkit use the 48pt side bar controls laid out horizontally (`ToolkitLayout.SideBarRow`); the collapsed search and a centered title stay clear of the clusters. Port of momo-kits `90af33ba2`.
 - iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. `sideBar.top` is 170pt in portrait, 120pt on the inner display in landscape (height ≥ 600), 24pt on the outer display in landscape, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN the column is clamped above footer (24pt gap) / rail (12pt gap).
 - Reserved regions (iOS 27.1 `reservedRegionsOfKind:`, reached through the ObjC runtime so older SDKs still build): a probe `UIView` (`platform/ReservedRegions.ios.kt` on the Compose root view; `ReservedRegionsProbe` inside SwiftUI `momoScreenLayout()`) re-reads them in `layoutSubviews`, which UIKit re-runs when they change. They push `sideBar.top` below the status cluster as it grows for calls / Live Activities, and `sideBar.bottom` (≥ 24pt) above a camera at the bottom end of the strip.
 - Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (`sideBar.bottom` above the window bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
-- Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height so the decision follows each screen's toolkit.
+- Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height (0 when the screen puts nothing there) so the decision follows each screen's toolkit.
 - Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient leaves with the content.
 - Quick return header: glass headers and Animated headers (with a `ScrollState`) on the Duo side bar layout slide out with the content and back in on a reverse scroll; a half-shown header settles in or out once the scroll stops. The side bar is drawn apart from the header, so it stays put.
 - Overlays on Duo: popups cap at 440pt wide and the room between `duoTopInset` and the bottom inset (body scrolls, actions stay); modal centers inside that room; bottom sheet uses the window height, centers at width ≥ 600 and pads by side insets in landscape.
@@ -127,7 +130,7 @@ Prefer one tight line at the surprising spot over a paragraph. Match the (low) c
 ## Gotchas
 
 - **Resource qualifier drift:** the generated Compose `Res` namespace is `vn.momo.uikits.resources`, but `utils/Resources.kt` and `platform/Platform.ios.kt` reference `vn.momo.compose.resources`. Keep bundled strings/dictionaries as plain Kotlin (the `defaultLanguage` map in `Localize.kt`), not `composeResources/values`, to avoid iOS framework resource-loading issues.
-- Prefer `NavigationContainer` over the deprecated `ApplicationContainer`; prefer `IMaxApi`/`LocalMaxApi` over the deprecated `PlatformApi`.
+- `LiteScreen` keeps its own `application.HeaderType` enum (`DEFAULT`/`EXTENDED`/`NONE`), unrelated to the sealed `navigation.component.HeaderType`; its toolkit is the navigation `Toolkit` (through `LocalMaxApi`).
 - iOS strings/maps must survive Kotlin/Native framework packaging — keep them compiled-in, not loaded from resource bundles.
 
 ## Code comments

package/README.md

@@ -150,8 +150,8 @@ themeController(defaultTheme.copy(colors = defaultTheme.colors.copy(primary = Co
 ---
 
 ### Lưu ý khác
-- `Screen` composable cũ được đánh dấu `@Deprecated`; sử dụng `NavigationContainer + StackScreen` để hưởng lợi dynamic route và animation.
-- `DesignSystemWhiteList` trong `application/ApplicationContainer.kt` hỗ trợ fallback cho host cũ; đừng kích hoạt nếu không cần.
+- `Screen` / `ApplicationContainer` cũ (Compose và SwiftUI) đã bị gỡ; dùng `NavigationContainer + StackScreen`.
+- `KitDesignSystem.update(isWhiteList = …)` (`const/KitDesignSystem.kt`) bật font design system mới cho host trong whitelist; đừng kích hoạt nếu không cần.
 - Khi thêm tài nguyên mới, đặt trong `shared/src/commonMain/composeResources` để Compose Multiplatform plugin sinh accessor tự động.
 - Repo không bundle SDK bên thứ ba ngoại trừ `vn.momo.corex.maxapi`, Compose/Coil/Ktor **và Compottie** cho animation.
 

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-duo-search.3-debug"
+        version = "0.167.1-duo-search.22-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.167.1-beta.4-debug'
+    spec.version                  = '0.167.1-duo.15-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -20,6 +20,7 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.Stable
@@ -27,16 +28,14 @@ import androidx.compose.runtime.State
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.produceState
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.runtime.snapshotFlow
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
@@ -77,13 +76,20 @@ import vn.momo.kits.layout.DuoMetrics
 import vn.momo.kits.layout.ScreenLayout
 import vn.momo.kits.layout.SideBarEdge
 import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.hideKeyboardOnTap
 import vn.momo.kits.utils.horizontalSafeAreaPadding
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.navigation.component.HEADER_FONT_FAMILY
+import vn.momo.kits.navigation.component.headerFontFamily
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.navigation.component.HeaderColor
+import vn.momo.kits.navigation.component.LocalHeaderColor
+import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.SideBarButton
+import vn.momo.kits.navigation.component.TitlePosition
+import vn.momo.kits.navigation.component.ToolGroup
+import vn.momo.kits.navigation.component.Toolkit
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
 import kotlin.math.roundToInt
@@ -112,6 +118,30 @@ data class AnimationOption(
 
 val LocalAnimationOption = staticCompositionLocalOf<AnimationOption?> { null }
 
+// LiteScreen's own header kinds; StackScreen uses the sealed navigation.component.HeaderType.
+enum class HeaderType {
+    DEFAULT,
+    EXTENDED,
+    NONE
+}
+
+@Stable
+data class HeaderRightData(
+    val useShortcut: Boolean = false,
+    val useMore: Boolean = false,
+    val useSystemTools: Boolean = true,
+    val tools: List<ToolGroup> = emptyList(),
+    val toolCallback: ((String) -> Unit)? = { _ -> }
+) {
+    internal fun toToolkit() = HeaderRight.Toolkit(
+        useShortcut = useShortcut,
+        useMore = useMore,
+        useSystemTools = useSystemTools,
+        tools = tools,
+        toolCallback = toolCallback,
+    )
+}
+
 @Composable
 fun LiteScreen(
     scrollable: Boolean = true,
@@ -245,18 +275,16 @@ private fun LiteScreenLayout(
             borderColor = Colors.black_20.copy(alpha = 0.2f)
         )
     }
+    val toolkit = remember(headerRightData) { (headerRightData ?: HeaderRightData()).toToolkit() }
 
-    val scrollPercentage = produceState(
-        initialValue = 0f,
-        key1 = useAnimationSearch,
-        key2 = scrollState,
-        key3 = backgroundHeight,
-    ) {
-        if (!useAnimationSearch) return@produceState
-        scrollState ?: return@produceState
-        val rangePx = with(density) { backgroundHeight.toPx() }
-        snapshotFlow { scrollState.value }.collectLatest {
-            value = (it / rangePx).coerceIn(0f, 1f)
+    val scrollPercentage = remember(useAnimationSearch, scrollState, backgroundHeight, density) {
+        derivedStateOf {
+            if (!useAnimationSearch || scrollState == null) {
+                0f
+            } else {
+                val rangePx = with(density) { backgroundHeight.toPx() }
+                (scrollState.value / rangePx).coerceIn(0f, 1f)
+            }
         }
     }
 
@@ -335,25 +363,27 @@ private fun LiteScreenLayout(
                     modifier = Modifier
                         .layoutId(HeaderId.BACKGROUND_ID)
                         .then(animationOpacityModifier)
-                        .drawBehind {
-                            val headerHeight = max(
-                                HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
-                                size.height,
-                            )
-                            headerBackgroundColor?.let {
-                                drawRect(color = it)
-                            } ?: run {
-                                drawRect(color = Colors.black_01)
-                                drawRect(
-                                    brush = Brush.linearGradient(
-                                        colors = listGradientColors,
-                                        start = Offset.Zero,
-                                        end = Offset(
-                                            x = 0f,
-                                            y = headerHeight * (1 - scrollPercentage.value),
-                                        ),
-                                    )
+                        .drawWithCache {
+                            if (headerBackgroundColor != null) {
+                                val backgroundColor = headerBackgroundColor
+                                onDrawBehind { drawRect(color = backgroundColor) }
+                            } else {
+                                val headerHeight = max(
+                                    HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
+                                    size.height,
+                                )
+                                val gradientBrush = Brush.linearGradient(
+                                    colors = listGradientColors,
+                                    start = Offset.Zero,
+                                    end = Offset(
+                                        x = 0f,
+                                        y = headerHeight * (1 - scrollPercentage.value),
+                                    ),
                                 )
+                                onDrawBehind {
+                                    drawRect(color = Colors.black_01)
+                                    drawRect(brush = gradientBrush)
+                                }
                             }
                         },
                 )
@@ -408,11 +438,14 @@ private fun LiteScreenLayout(
                         .then(animationOpacityModifier)
                 ) {
                     if (headerRight != null) {
-                        headerRight()
+                        CompositionLocalProvider(LocalHeaderColor provides headerColor) {
+                            headerRight()
+                        }
                     } else {
-                        HeaderRight(
-                            headerRight = headerRightData,
+                        Toolkit(
+                            headerRight = toolkit,
                             tintColor = tintColor,
+                            headerColor = headerColor,
                         )
                     }
                 }
@@ -429,7 +462,7 @@ private fun LiteScreenLayout(
                     text = title,
                     color = headerColor.tintIconColor,
                     style = titleStyle,
-                    fontFamily = HEADER_FONT_FAMILY,
+                    fontFamily = headerFontFamily,
                     modifier = titleModifier,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
@@ -440,6 +473,125 @@ private fun LiteScreenLayout(
     )
 }
 
+private interface LiteScreenGeometry {
+    fun MeasureScope.safeWidth(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetLeft: Int,
+        insetRight: Int,
+    ): Int
+
+    fun MeasureScope.searchStartX(
+        screenLayout: ScreenLayout,
+        insetLeft: Int,
+        spacing: Int,
+    ): Int
+
+    fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int
+    fun MeasureScope.headerRightStartX(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetRight: Int,
+        spacing: Int,
+        rightWidth: Int,
+    ): Int
+
+    fun MeasureScope.collapsedHeaderHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int
+
+    fun MeasureScope.searchStartY(
+        screenLayout: ScreenLayout,
+        headerY: Int,
+        statusBar: Int,
+        rowHeight: Int,
+    ): Int
+}
+
+private class StandardPhoneLiteScreenGeometry : LiteScreenGeometry {
+    override fun MeasureScope.safeWidth(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetLeft: Int,
+        insetRight: Int,
+    ) = (width - insetLeft - insetRight).coerceAtLeast(0)
+
+    override fun MeasureScope.searchStartX(screenLayout: ScreenLayout, insetLeft: Int, spacing: Int) =
+        insetLeft + spacing
+
+    override fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int) =
+        statusBar + rowHeight
+    override fun MeasureScope.collapsedHeaderHeight(
+        screenLayout: ScreenLayout,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = statusBar + rowHeight
+    override fun MeasureScope.headerRightStartX(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetRight: Int,
+        spacing: Int,
+        rightWidth: Int,
+    ) = width - insetRight - spacing - rightWidth
+
+    override fun MeasureScope.searchStartY(
+        screenLayout: ScreenLayout,
+        headerY: Int,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = headerY + statusBar
+}
+
+private class IPhoneDuoLiteScreenGeometry : LiteScreenGeometry {
+    override fun MeasureScope.safeWidth(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetLeft: Int,
+        insetRight: Int,
+    ): Int {
+        val clearance = screenLayout.statusBarClearance
+        return (
+            width - insetLeft - insetRight -
+                (clearance?.left?.roundToPx() ?: 0) -
+                (clearance?.right?.roundToPx() ?: 0)
+            ).coerceAtLeast(0)
+    }
+
+    override fun MeasureScope.searchStartX(screenLayout: ScreenLayout, insetLeft: Int, spacing: Int) =
+        insetLeft + (screenLayout.statusBarClearance?.left?.roundToPx() ?: 0) + spacing
+
+    override fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int {
+        val rowTop = screenLayout.headerStatusBarHeight +
+            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
+        return max(screenLayout.headerHeight.roundToPx(), rowTop.roundToPx() + rowHeight)
+    }
+    override fun MeasureScope.collapsedHeaderHeight(
+        screenLayout: ScreenLayout,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = (
+        screenLayout.headerStatusBarHeight +
+            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
+        ).roundToPx() + rowHeight
+    override fun MeasureScope.headerRightStartX(
+        screenLayout: ScreenLayout,
+        width: Int,
+        insetRight: Int,
+        spacing: Int,
+        rightWidth: Int,
+    ) = width - insetRight -
+        (screenLayout.statusBarClearance?.right?.roundToPx() ?: 0) -
+        spacing - rightWidth
+
+    override fun MeasureScope.searchStartY(
+        screenLayout: ScreenLayout,
+        headerY: Int,
+        statusBar: Int,
+        rowHeight: Int,
+    ) = headerY + (
+        screenLayout.headerStatusBarHeight +
+            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
+        ).roundToPx()
+}
+
 private class LiteScreenLayoutPolicy(
     private val screenLayout: ScreenLayout,
     private val applySafeAreaPadding: Boolean,
@@ -454,6 +606,11 @@ private class LiteScreenLayoutPolicy(
     private val verticalArrangement: Arrangement.Vertical,
     private val horizontalAlignment: Alignment.Horizontal,
 ) : MeasurePolicy {
+    private val geometry = if (screenLayout.isIPhoneDuo) {
+        IPhoneDuoLiteScreenGeometry()
+    } else {
+        StandardPhoneLiteScreenGeometry()
+    }
 
     val searchStartPosition: IntOffset by lazy {
         if (animationOption == null) return@lazy IntOffset.Zero
@@ -478,12 +635,14 @@ private class LiteScreenLayoutPolicy(
 
         val insetLeft = if (applySafeAreaPadding) screenLayout.insetLeft.roundToPx() else 0
         val insetRight = if (applySafeAreaPadding) screenLayout.insetRight.roundToPx() else 0
-        val safeWidth = (constraints.maxWidth - insetLeft - insetRight).coerceAtLeast(0)
+        val safeLayoutWidth = with(geometry) {
+            safeWidth(screenLayout, constraints.maxWidth, insetLeft, insetRight)
+        }
+        val searchStartX = with(geometry) { searchStartX(screenLayout, insetLeft, spacing12) }
         val realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
-            maxWidth = (safeWidth - spacing12 * 2)
-                .coerceAtLeast(0),
+            maxWidth = (safeLayoutWidth - spacing12 * 2).coerceAtLeast(0),
         )
         val backIconPlaceable =
             measurables.find { it.layoutId == HeaderId.BACK_ID }?.measure(realConstraints)
@@ -522,15 +681,20 @@ private class LiteScreenLayoutPolicy(
         /**
          * replicate logic from [vn.momo.kits.navigation.component.HeaderBackground]
          * */
-        var defaultHeight = statusBarPx + headerRowDefault
+        var defaultHeight = with(geometry) { headerHeight(screenLayout, statusBarPx, headerRowDefault) }
         if (isHeaderExtend) {
-            defaultHeight = 154.dp.roundToPx()
+            defaultHeight = if (screenLayout.isIPhoneDuo) {
+                max(defaultHeight, 154.dp.roundToPx())
+            } else {
+                154.dp.roundToPx()
+            }
         }
         val headerHeight = when {
             isHeaderNone -> statusBarPx
             !useAnimationSearch && !isHeaderExtend -> defaultHeight
             else -> {
-                val collapsableSpace = defaultHeight - statusBarPx - headerRowDefault
+                val collapsableSpace = defaultHeight -
+                    with(geometry) { collapsedHeaderHeight(screenLayout, statusBarPx, headerRowDefault) }
                 (defaultHeight - scrollPercent * collapsableSpace).toInt()
             }
         }
@@ -574,8 +738,10 @@ private class LiteScreenLayoutPolicy(
         ) {
             val progress = animationOption?.progress?.value ?: 1f
 
-            val startX = insetLeft + spacing12
-            val startY = headerY + statusBarPx
+            val startX = searchStartX
+            val startY = with(geometry) {
+                searchStartY(screenLayout, headerY, statusBarPx, headerRowDefault)
+            }
             var curX = startX
             var curY = startY
 
@@ -613,14 +779,22 @@ private class LiteScreenLayoutPolicy(
                 }
             }
             headerRightPlaceable?.place(
-                x = layoutWidth - insetRight - spacing12 - headerRightPlaceable.safeWidth,
+                x = with(geometry) {
+                    headerRightStartX(
+                        screenLayout,
+                        layoutWidth,
+                        insetRight,
+                        spacing12,
+                        headerRightPlaceable.safeWidth,
+                    )
+                },
                 y = startY + headerRightPlaceable.verticalCenterOffset(headerRowDefault),
             )
 
             val titleOffset = IntOffset(
                 x = if (titlePosition == TitlePosition.LEFT) curX
-                else insetLeft + titlePlaceable.horizontalCenterOffset(
-                    space = safeWidth - spacing12 * 2,
+                else searchStartX - spacing12 + titlePlaceable.horizontalCenterOffset(
+                    space = safeLayoutWidth - spacing12 * 2,
                     layoutDirection = layoutDirection,
                 ),
                 y = startY + titlePlaceable.verticalCenterOffset(headerRowDefault),
@@ -771,11 +945,8 @@ private fun LiteInputSearch(
     val interactionSource = remember { MutableInteractionSource() }
     val textState by remember { inputSearchProps.textFieldState }
 
-    val isShowBtnText by remember(inputSearchProps.isShowBtnText, inputSearchProps.btnText) {
-        derivedStateOf {
-            inputSearchProps.isShowBtnText && !inputSearchProps.btnText.isNullOrEmpty()
-        }
-    }
+    val isShowBtnText = inputSearchProps.isShowBtnText &&
+        !inputSearchProps.btnText.isNullOrEmpty()
     val inputFieldFontFamily = getFontFamily(theme.font, Typography.bodyDefaultRegular.fontWeight)
     val inputFieldStyle = remember(theme, inputFieldFontFamily) {
         Typography.bodyDefaultRegular.copy(
@@ -817,12 +988,8 @@ private fun LiteInputSearch(
                         inputSearchProps.clearCondition?.invoke() == true || (isFocused.value && textState.isNotEmpty())
                     }
                 }
-                val placeHolder by produceState<String?>(null, inputSearchProps.placeHolder) {
-                    if (inputSearchProps.placeHolder.isNullOrEmpty()) return@produceState
-                    snapshotFlow { textState }.collectLatest {
-                        value = if (it.isEmpty()) inputSearchProps.placeHolder else null
-                    }
-                }
+                val placeHolder = inputSearchProps.placeHolder
+                    ?.takeIf { textState.isEmpty() }
                 val iconRightModifier = remember {
                     Modifier
                         .padding(start = Spacing.L)
@@ -865,7 +1032,7 @@ private fun LiteInputSearch(
                     ) {
                         if (!placeHolder.isNullOrEmpty()) {
                             inputSearchProps.customPlaceHolder?.invoke() ?: Text(
-                                text = placeHolder ?: "",
+                                text = placeHolder,
                                 style = inputSearchProps.customTextStyle
                                     ?: Typography.bodyDefaultRegular,
                                 maxLines = 1,
@@ -893,7 +1060,7 @@ private fun LiteInputSearch(
 
         if (isShowBtnText) {
             Text(
-                text = inputSearchProps.btnText ?: "",
+                text = inputSearchProps.btnText,
                 style = Typography.actionDefaultBold,
                 color = theme.colors.text.default,
                 modifier = Modifier.padding(start = Spacing.L)
@@ -902,15 +1069,3 @@ private fun LiteInputSearch(
         }
     }
 }
-
-fun Modifier.hideKeyboardOnTap() = composed {
-    val focusManager = LocalFocusManager.current
-    val keyboardManager = LocalSoftwareKeyboardController.current
-
-    pointerInput(Unit) {
-        detectTapGestures {
-            keyboardManager?.hide()
-            focusManager.clearFocus()
-        }
-    }
-}

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

@@ -19,6 +19,7 @@ import coil3.request.ImageRequest
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
+import vn.momo.kits.gifimage.GifImage
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.utils.Icons
 import vn.momo.kits.utils.noThemeIcons
@@ -59,18 +60,27 @@ fun Icon(
             }
             .semantics { contentDescription = contentDesc }
     ) {
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = ImageRequest.Builder(context)
-                .data(iconUrl)
-                .size(
-                    coil3.size.Dimension.Undefined,
-                    coil3.size.Dimension.Undefined
-                )
-                .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Fit,
-            colorFilter = colorFilter,
-        )
+        if (isGifUrl(iconUrl)) {
+            GifImage(
+                modifier = Modifier.matchParentSize(),
+                url = iconUrl,
+                contentDescription = null,
+                contentScale = ContentScale.Fit,
+            )
+        } else {
+            AsyncImage(
+                modifier = Modifier.matchParentSize(),
+                model = ImageRequest.Builder(context)
+                    .data(iconUrl)
+                    .size(
+                        coil3.size.Dimension.Undefined,
+                        coil3.size.Dimension.Undefined
+                    )
+                    .build(),
+                contentDescription = null,
+                contentScale = ContentScale.Fit,
+                colorFilter = colorFilter,
+            )
+        }
     }
 }

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

@@ -77,7 +77,7 @@ private fun getHostFromUrl(url: String): String? {
     }
 }
 
-private fun isGifUrl(url: String): Boolean {
+internal fun isGifUrl(url: String): Boolean {
     val path = url.substringBefore('#').substringBefore('?')
     return path.endsWith(".gif", ignoreCase = true)
 }

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

@@ -10,6 +10,10 @@ import androidx.compose.ui.text.font.FontFamily
  *  - Android: `assets/fonts/<fileName>` (gradle task `syncMomoFonts`)
  *  - iOS: file rời ở bundle root (pbxproj fileRef được `post_install.rb` trỏ về font-source)
  *
+ * AI-GENERATED START: note SF Pro -> iOS system font (ITMS-91182)
+ * Ngoại lệ: SF Pro trên iOS dùng system font (chính là SF Pro) — Apple cấm app nhúng font của Apple.
+ * AI-GENERATED END: note SF Pro -> iOS system font (ITMS-91182)
+ *
  * Trả về `null` nếu host không có font đó — caller tự fallback [FontFamily.Default].
  */
 @Composable