@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.20-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/`.
@@ -35,11 +35,18 @@ No unit-test suite is configured. Validate changes by compiling the relevant tar
 ./gradlew :sample:androidApp:installDebug                 # run demo on device/emulator
 ```
 
+The SwiftUI kit (`ios/`, pod `MoMoUIKits`) compiles on its own through the sample's Pods project (`pod install` in `sample/iosApp` first when files are added):
+
+```bash
+xcodebuild -project sample/iosApp/Pods/Pods.xcodeproj -scheme MoMoUIKits -sdk iphonesimulator \
+  -destination 'generic/platform=iOS Simulator' build
+```
+
 Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do not publish manually unless asked: `sh publish.sh beta` / `sh publish.sh release` (Maven→GitLab + NPM).
 
 ## 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.
@@ -47,11 +54,32 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
 - **iOS swipe-back:** the host owns the only edge-pan recogniser and replays it through `HostBackGestureBridge` (`navigation/HostBackGestureBridge.kt`; the kit framework is never exported, so the host reaches it through its own Koin-provided facade): `checkCanPop` / `canPopInner` / `pop` route the back into the kit stack, `started` / `progressed` / `completed` / `cancelled` seek the NavHost transition, `shouldUseFloatingArrowBack` is set by bottom tabs. `NavigationContainer` attaches itself automatically (`AttachHostBackGesture`, iOS only, detached by identity on dispose) — hosts need no wrapper and no `setNavigator`. `maxApi` is a required parameter of `NavigationContainer` — every container, nested or root, is handed its host bridge explicitly.
 
-## Screen layout / iPhone Duo (port of RN `useScreenLayout`)
-
-- `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, side safe-area insets, `contentWidth`, header geometry and the iPhone Duo `sideBar`. `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.
-- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight`. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered.
-- 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. The column starts below the camera / status-bar cluster: 170pt portrait, 120pt in any landscape (folded too — RN still uses 170 there), below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN it is clamped 24pt above footer / tab bar, so a long toolkit (shortcut + group) never covers the footer.
+## SwiftUI kit (`ios/`)
+
+- **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).
+- 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`.
+
+## Screen layout / iPhone Duo (port of RN `useScreenLayout`, momo-kits !664)
+
+- `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 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 (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.
+- Font scale deliberately uses the short side (`min(w, h)`), unlike RN which reads the window width — landscape must not inflate every font.
 - `StackScreen` pads content/footer/search/FAB by the side insets and provides an inset-consumed layout to its content; a bottom-tab root stays full width (tab bar + each tab's StackScreen handle insets). Grid columns use `contentWidth`.
 
 ## i18n / Localize (port of RN `Localize`)
@@ -102,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.2-debug"
+        version = "0.167.1-duo.20-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -188,3 +188,17 @@ compose {
 //         }
 //     }
 // }
+
+// Xcode 27 rejects pods below iOS 15 (lottie-ios 4.4.3 declares 13.0), and the synthetic Podfile has no post_install hook.
+val syntheticPodsProject = layout.buildDirectory.file("cocoapods/synthetic/ios/Pods/Pods.xcodeproj/project.pbxproj")
+tasks.matching { it.name.startsWith("podInstallSynthetic") }.configureEach {
+    doLast {
+        val pbxproj = syntheticPodsProject.get().asFile
+        if (!pbxproj.exists()) return@doLast
+        val target = Regex("IPHONEOS_DEPLOYMENT_TARGET = ([0-9.]+);")
+        pbxproj.writeText(pbxproj.readText().replace(target) { match ->
+            val major = match.groupValues[1].substringBefore('.').toIntOrNull() ?: 0
+            if (major < 15) "IPHONEOS_DEPLOYMENT_TARGET = 15.0;" else match.value
+        })
+    }
+}

package/compose/build.gradle.kts.backup

@@ -188,3 +188,17 @@ mavenPublishing {
         }
     }
 }
+
+// Xcode 27 rejects pods below iOS 15 (lottie-ios 4.4.3 declares 13.0), and the synthetic Podfile has no post_install hook.
+val syntheticPodsProject = layout.buildDirectory.file("cocoapods/synthetic/ios/Pods/Pods.xcodeproj/project.pbxproj")
+tasks.matching { it.name.startsWith("podInstallSynthetic") }.configureEach {
+    doLast {
+        val pbxproj = syntheticPodsProject.get().asFile
+        if (!pbxproj.exists()) return@doLast
+        val target = Regex("IPHONEOS_DEPLOYMENT_TARGET = ([0-9.]+);")
+        pbxproj.writeText(pbxproj.readText().replace(target) { match ->
+            val major = match.groupValues[1].substringBefore('.').toIntOrNull() ?: 0
+            if (major < 15) "IPHONEOS_DEPLOYMENT_TARGET = 15.0;" else match.value
+        })
+    }
+}

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/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -36,6 +36,8 @@ import androidx.activity.compose.BackHandler as AndroidBackHandler
 
 actual fun getPlatformName(): String = "Android"
 
+actual fun isPhoneIdiom(): Boolean = false
+
 @Composable
 actual fun getScreenDimensions(): ScreenDimension {
     val config = LocalConfiguration.current

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

@@ -0,0 +1,6 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+@Composable
+internal actual fun rememberReservedRegions(): List<ReservedRegion> = emptyList()

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

@@ -1,17 +1,37 @@
 package vn.momo.kits.application
 
 import androidx.annotation.FloatRange
-import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.*
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.FocusInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.*
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Stable
+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
@@ -25,13 +45,25 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.*
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasurePolicy
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.layout.Placeable
+import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.*
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.lerp
+import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.mapNotNull
 import vn.momo.kits.components.Icon
@@ -41,14 +73,26 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
+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.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.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
+import vn.momo.kits.navigation.component.getHeaderColor as getNavigationHeaderColor
 
 
 data class AnimationOption(
@@ -73,6 +117,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,
@@ -169,6 +237,8 @@ private fun LiteScreenLayout(
     content: @Composable () -> Unit,
 ) {
     val statusBarHeight = getAppStatusBarHeight()
+    val screenLayout = getScreenLayout()
+    val applySafeAreaPadding = screenLayout.sideBar != null
     val isHeaderNone = remember(headerType) {
         headerType == HeaderType.NONE
     }
@@ -204,6 +274,7 @@ private fun LiteScreenLayout(
             borderColor = Colors.black_20.copy(alpha = 0.2f)
         )
     }
+    val toolkit = remember(headerRightData) { (headerRightData ?: HeaderRightData()).toToolkit() }
 
     val scrollPercentage = produceState(
         initialValue = 0f,
@@ -230,6 +301,12 @@ private fun LiteScreenLayout(
     val animationOpacityModifier = Modifier.graphicsLayer {
         alpha = animationOption?.animateOpacity ?: 1f
     }
+    val sideBarColor = getNavigationHeaderColor(
+        vn.momo.kits.navigation.component.HeaderType.Default(),
+        1f,
+        null,
+        Colors.black_17,
+    )
     val titleModifier = Modifier
         .kitsAutomationId("title_navigation_header")
         .layoutId(HeaderId.TITLE_ID)
@@ -241,6 +318,8 @@ private fun LiteScreenLayout(
         }
 
     val policy = remember(
+        screenLayout,
+        applySafeAreaPadding,
         useAnimationSearch,
         isHeaderNone,
         isHeaderExtend,
@@ -253,6 +332,8 @@ private fun LiteScreenLayout(
         horizontalAlignment,
     ) {
         LiteScreenLayoutPolicy(
+            screenLayout = screenLayout,
+            applySafeAreaPadding = applySafeAreaPadding,
             useAnimationSearch = useAnimationSearch,
             isHeaderNone = isHeaderNone,
             isHeaderExtend = isHeaderExtend,
@@ -267,13 +348,13 @@ private fun LiteScreenLayout(
     }
 
     Layout(
-        modifier = modifier
-            .animateContentSize(),
+        modifier = modifier,
         content = {
             Box(
                 modifier = animationOpacityModifier
                     .layoutId(HeaderId.CONTENT_ID)
-                    .then(contentModifier),
+                    .then(contentModifier)
+                    .then(if (applySafeAreaPadding) Modifier.horizontalSafeAreaPadding() else Modifier),
                 contentAlignment = Alignment.TopCenter,
             ) {
                 content()
@@ -309,28 +390,44 @@ private fun LiteScreenLayout(
             }
 
             if (!isHeaderNone && onGoBack != null) {
-                val coreModifier = Modifier
-                    .layoutId(HeaderId.BACK_ID)
-                    .then(animationOpacityModifier)
-                    .clip(CircleShape)
-                    .noFeedbackClickable(onClick = onGoBack)
-                    .setAutomationId("btn_navigation_back")
-                inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
-                    modifier = coreModifier
-                        .size(28.dp)
-                        .border(
-                            width = 0.2.dp,
-                            color = headerColor.borderColor,
-                            shape = CircleShape,
-                        )
-                        .background(color = headerColor.backgroundButton)
-                        .padding(Spacing.XS),
-                ) {
-                    Icon(
-                        source = "arrow-back",
-                        color = headerColor.tintIconColor,
-                        size = 20.dp,
-                    )
+                when {
+                    screenLayout.sideBar != null -> {
+                        Box(
+                            modifier = Modifier.layoutId(HeaderId.BACK_ID),
+                        ) {
+                            SideBarButton(
+                                icon = "arrow-back",
+                                headerColor = sideBarColor,
+                                onClick = onGoBack,
+                                automationId = "btn_navigation_back",
+                            )
+                        }
+                    }
+                    else -> {
+                        val coreModifier = Modifier
+                            .layoutId(HeaderId.BACK_ID)
+                            .then(animationOpacityModifier)
+                            .clip(CircleShape)
+                            .noFeedbackClickable(onClick = onGoBack)
+                            .setAutomationId("btn_navigation_back")
+                        inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
+                            modifier = coreModifier
+                                .size(28.dp)
+                                .border(
+                                    width = 0.2.dp,
+                                    color = headerColor.borderColor,
+                                    shape = CircleShape,
+                                )
+                                .background(color = headerColor.backgroundButton)
+                                .padding(Spacing.XS),
+                        ) {
+                            Icon(
+                                source = "arrow-back",
+                                color = headerColor.tintIconColor,
+                                size = 20.dp,
+                            )
+                        }
+                    }
                 }
             }
 
@@ -343,9 +440,10 @@ private fun LiteScreenLayout(
                     if (headerRight != null) {
                         headerRight()
                     } else {
-                        HeaderRight(
-                            headerRight = headerRightData,
+                        Toolkit(
+                            headerRight = toolkit,
                             tintColor = tintColor,
+                            headerColor = headerColor,
                         )
                     }
                 }
@@ -362,7 +460,7 @@ private fun LiteScreenLayout(
                     text = title,
                     color = headerColor.tintIconColor,
                     style = titleStyle,
-                    fontFamily = HEADER_FONT_FAMILY,
+                    fontFamily = headerFontFamily,
                     modifier = titleModifier,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
@@ -374,6 +472,8 @@ private fun LiteScreenLayout(
 }
 
 private class LiteScreenLayoutPolicy(
+    private val screenLayout: ScreenLayout,
+    private val applySafeAreaPadding: Boolean,
     private val useAnimationSearch: Boolean,
     private val isHeaderNone: Boolean,
     private val isHeaderExtend: Boolean,
@@ -407,10 +507,13 @@ private class LiteScreenLayoutPolicy(
 
         val contentMeasurable = measurables.find { it.layoutId == HeaderId.CONTENT_ID }
 
+        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 realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
-            maxWidth = (constraints.maxWidth - spacing12 * 2)
+            maxWidth = (safeWidth - spacing12 * 2)
                 .coerceAtLeast(0),
         )
         val backIconPlaceable =
@@ -421,9 +524,10 @@ private class LiteScreenLayoutPolicy(
                     maxWidth = realConstraints.maxWidth / 2,
                 )
             )
+        val headerBackWidth = if (screenLayout.sideBar == null) backIconPlaceable.safeWidth else 0
         val baseInputSearchConstraints = if (isHeaderExtend) {
             val minWidth =
-                if (useAnimationSearch) realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                if (useAnimationSearch) realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
                 else realConstraints.maxWidth
             realConstraints.copy(
                 maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
@@ -431,7 +535,7 @@ private class LiteScreenLayoutPolicy(
             )
         } else {
             var spaceConsumed = 0
-            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spaceBetween
+            if (headerBackWidth != 0) spaceConsumed += headerBackWidth + spaceBetween
             if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spaceBetween
             realConstraints.copy(
                 maxWidth = realConstraints.maxWidth - spaceConsumed
@@ -442,7 +546,7 @@ private class LiteScreenLayoutPolicy(
             ?.measure(inputSearchConstraints)
         val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
             constraints = realConstraints.copy(
-                maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                maxWidth = realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
             )
         )
 
@@ -464,6 +568,7 @@ private class LiteScreenLayoutPolicy(
 
         val layoutWidth = constraints.maxWidth
         val layoutHeight = constraints.maxHeight
+        val backgroundInsetLeft = if (!applySafeAreaPadding && screenLayout.sideBar != null) screenLayout.insetLeft.roundToPx() else 0
         val contentHeight = (layoutHeight - headerHeight).coerceAtLeast(0)
         val contentPlaceable = contentMeasurable?.measure(
             constraints.copy(
@@ -500,7 +605,7 @@ private class LiteScreenLayoutPolicy(
         ) {
             val progress = animationOption?.progress?.value ?: 1f
 
-            val startX = spacing12
+            val startX = insetLeft + spacing12
             val startY = headerY + statusBarPx
             var curX = startX
             var curY = startY
@@ -515,27 +620,38 @@ private class LiteScreenLayoutPolicy(
             )
 
             backgroundPlaceable?.place(
-                x = 0,
+                x = -backgroundInsetLeft,
                 y = headerY,
             )
 
             if (backIconPlaceable != null) {
-                backIconPlaceable.place(
-                    x = startX,
-                    y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
-                )
-                curX += backIconPlaceable.safeWidth + spaceBetween
+                val sideBar = screenLayout.sideBar
+                if (sideBar == null) {
+                    backIconPlaceable.place(
+                        x = startX,
+                        y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
+                    )
+                    curX += backIconPlaceable.safeWidth + spaceBetween
+                } else {
+                    val x = when (sideBar.edge) {
+                        SideBarEdge.LEFT -> insetLeft - screenLayout.insetLeft.roundToPx() + sideBar.width.roundToPx() - spacing12 - backIconPlaceable.width
+                        SideBarEdge.RIGHT -> layoutWidth + (if (applySafeAreaPadding) 0 else screenLayout.insetRight.roundToPx()) - sideBar.width.roundToPx() + spacing12
+                    }
+                    backIconPlaceable.place(
+                        x = x,
+                        y = sideBar.top.roundToPx() + (DuoMetrics.controlSize.roundToPx() - backIconPlaceable.height) / 2,
+                    )
+                }
             }
-
             headerRightPlaceable?.place(
-                x = layoutWidth - spacing12 - headerRightPlaceable.safeWidth,
+                x = layoutWidth - insetRight - spacing12 - headerRightPlaceable.safeWidth,
                 y = startY + headerRightPlaceable.verticalCenterOffset(headerRowDefault),
             )
 
             val titleOffset = IntOffset(
                 x = if (titlePosition == TitlePosition.LEFT) curX
-                else titlePlaceable.horizontalCenterOffset(
-                    space = layoutWidth,
+                else insetLeft + titlePlaceable.horizontalCenterOffset(
+                    space = safeWidth - spacing12 * 2,
                     layoutDirection = layoutDirection,
                 ),
                 y = startY + titlePlaceable.verticalCenterOffset(headerRowDefault),
@@ -543,7 +659,7 @@ private class LiteScreenLayoutPolicy(
 
             titlePlaceable?.place(titleOffset)
 
-            if (backIconPlaceable != null || headerRightPlaceable != null || titlePlaceable != null) {
+            if ((backIconPlaceable != null && screenLayout.sideBar == null) || headerRightPlaceable != null || titlePlaceable != null) {
                 curY += headerRowDefault
             }
 
@@ -553,7 +669,7 @@ private class LiteScreenLayoutPolicy(
                     startY + inputSearchPlaceable.verticalCenterOffset(headerRowDefault)
                 )
                 IntOffset(
-                    x = startX + ((backIconPlaceable.safeWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
+                    x = startX + ((headerBackWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
                         0f, 1f
                     )).toInt(),
                     y = y,