@momo-kits/native-kits 0.168.1-beta.1 → 0.168.1-beta.10

package/CLAUDE.md

@@ -48,7 +48,9 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 - **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.
+- **`DesignSystemKits`** (`application/DesignSystemKits.kt`) is the single app-wide holder for the host-owned design-system inputs: font scale (`userScaleRate` / `useOSScaleRate`), whitelist (`isWhiteList`) and the remote `DesignSystemConfig`, bundled as `DesignSystemKitsConfigs`. The host calls `DesignSystemKits.init(source)` once at startup with its `DesignSystemKitsSource` (sync `getConfigs()` seed + `configsFlow`); `init` is idempotent. Without a source, call `setConfigs(...)` directly. Read with `getConfigs()` (snapshot state, recomposes); non-Compose observers use `configsFlow`.
+- **SwiftUI twin:** `ios/Application/DesignSystemKits.swift` mirrors it field for field (`DesignSystemKitsConfigs` with `designSystemConfig: KitConfig?`, `setConfigs` / `getConfigs`), plus the OS Dynamic Type factor (`osFontScale`). There is no `init(source:)` (Swift reserves `init`): the host observes its own bridge and pushes. A host that can't share Swift types (the KMP bridge) calls `DesignSystemKits.shared.setConfigs(json:)` (`ios/Application/DesignSystemKitsPayload.swift`); the JSON field names are a contract with momo-app's serializer (`HostDesignSystemKits.observeConfigsJson`, payload classes in `DesignSystemData.kt`) — change both together. Invalid JSON is ignored. The SwiftUI kit can't link the Kotlin `kits` framework (a second Kotlin/Native runtime would hold a second, never-initialized singleton), so the render-time logic — `FontScale` formula, Dynamic Type observation — is intentionally duplicated in Swift; only values flow across.
+- **Design-system config** (`trustBanner`, `headerBar`, `headerGradient`): `NavigationContainer` provides it as `LocalDesignSystemConfig` (param `designSystemConfig` → parent → `DesignSystemKits`) 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.
 - **Native bridge:** `IMaxApi` (`vn.momo.maxapi`, exposed as `LocalMaxApi`) is the host-app bridge (dismiss, tracking, device info, language).
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
@@ -69,7 +71,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 ## 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.
+- 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` (Apple's foldable check: a `.division` reserved region, queried with include-inactive; Swift also latches on `UIHingeInteraction`) 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).
@@ -104,9 +106,9 @@ The SwiftUI port differs from Compose in one important way: **it follows the hos
 
 One formula, both platforms: the device-width scale (`width / 375`, capped at `+5pt`) and the OS Dynamic Type scale (capped at `1.5×`) are computed independently and the **larger wins**. When `useOSScaleRate` is false neither applies — the size is just multiplied by `userScaleRate`. Max font scale is fixed at 1.5; the old per-call/per-scope override is deprecated and ignored on both sides.
 
-- **Compose** — `const/Typography.kt` (`scaleSize` overloads for `Float`/`Dp`/`TextUnit`/`TextStyle`). The `TextUnit` overload divides by `density.fontScale` so Compose's own `sp` scaling isn't applied twice. Inputs: `LocalContext.current` (`MiniAppContext.userScaleRate` / `useOSScaleRate`, per-field) falling back to the `KitFontScale` global. On iOS, `platform/OsFontScale.ios.kt` observes `UIContentSizeCategoryDidChangeNotification` and overrides `LocalDensity` — Compose MP otherwise reads `fontScale` once at `ComposeUIViewController` creation. Wired at `NavigationContainer`.
-- **SwiftUI** — `ios/Typography/FontScale.swift`. `FontScale` is an immutable snapshot with `callAsFunction`, so a view reads `@Environment(\.momoFontScale) private var fontScale` and calls `fontScale(16)`. `FontScaleStore.shared` is the `ObservableObject` holding both inputs and the OS factor (it observes `UIContentSizeCategory.didChangeNotification`); the host pushes its preference with `update(userScaleRate:useOSScaleRate:)`.
-- **Never set `\.momoFontScale` directly** — same trap as `\.localize`. Inject via `.momoFontScale(_:context:)`, which holds the store as `@ObservedObject`; that is what re-publishes the snapshot. `NavigationContainer` does it (passing `MiniAppContext` so the per-mini-app override applies); a bare `UIHostingController` root must too. The environment default reads the live store, so an un-injected subtree still gets correct values — just not live ones.
+- **Compose** — `const/Typography.kt` (`scaleSize` overloads for `Float`/`Dp`/`TextUnit`/`TextStyle`). The `TextUnit` overload divides by `density.fontScale` so Compose's own `sp` scaling isn't applied twice. Inputs: `LocalContext.current` (`MiniAppContext.userScaleRate` / `useOSScaleRate`, per-field) falling back to `DesignSystemKits.getConfigs()`. On iOS, `platform/OsFontScale.ios.kt` observes `UIContentSizeCategoryDidChangeNotification` and overrides `LocalDensity` — Compose MP otherwise reads `fontScale` once at `ComposeUIViewController` creation. Wired at `NavigationContainer`.
+- **SwiftUI** — `ios/Typography/FontScale.swift`. `FontScale` is an immutable snapshot with `callAsFunction`, so a view reads `@Environment(\.momoFontScale) private var fontScale` and calls `fontScale(16)`. `DesignSystemKits.shared` is the `ObservableObject` holding the host inputs and the OS factor (it observes `UIContentSizeCategory.didChangeNotification`); the host pushes them with `setConfigs(_:)`.
+- **Never set `\.momoFontScale` directly** — same trap as `\.localize`. Inject via `.momoFontScale(_:context:)`, which holds `DesignSystemKits` as `@ObservedObject`; that is what re-publishes the snapshot. It also injects `\.designSystemKitsConfigs`, which `MomoText` (whitelist font) and `TrustBanner` (fallback after `ApplicationEnvironment.config`) read so a host push re-renders them. `NavigationContainer` does it (passing `MiniAppContext` so the per-mini-app override applies); a bare `UIHostingController` root must too. The environment default reads the live store, so an un-injected subtree still gets correct values — just not live ones.
 - The global `scaleSize(_:)` and `Font.appFont(size:)` remain for call sites that can't read the environment (UIKit bridges, free functions). They are **not** reactive. `Font.header_default_bold` & friends are computed `static var`s for the same reason — as stored `static let`s they froze the scale at first access. `UIViewRepresentable`s should read `context.environment.momoFontScale` instead, and re-apply the font in `updateUIView`, not only in `makeUIView`.
 
 ## Code conventions

package/ios/Application/ApplicationEnvironment.swift

@@ -17,8 +17,8 @@ public class MiniAppContext {
     public var toolkitConfig: [String: Any] = [:]
     public var providerId: String = "momo"
     public var permissions: [[String: Any]] = []
-    // Per-mini-app font-scale override; nil falls back to FontScaleStore. Mirrors Compose's
-    // MiniAppContext.userScaleRate / useOSScaleRate, which win per field over KitFontScale.
+    // Per-mini-app font-scale override; nil falls back to DesignSystemKits. Mirrors Compose's
+    // MiniAppContext.userScaleRate / useOSScaleRate, which win per field over DesignSystemKits.
     public var userScaleRate: CGFloat? = nil
     public var useOSScaleRate: Bool? = nil
 
@@ -37,10 +37,11 @@ public class MiniAppContext {
     }
 }
 
-public class KitConfig {
-    public var trustBanner: TrustBannerData? = nil
-    public var headerBar: String? = nil
-    public var headerGradient: String? = nil
+// Value type so DesignSystemKitsConfigs can dedupe host pushes; mirrors Compose's DesignSystemConfig.
+public struct KitConfig: Equatable {
+    public var trustBanner: TrustBannerData?
+    public var headerBar: String?
+    public var headerGradient: String?
 
     public init(trustBanner: TrustBannerData? = nil, headerBar: String? = nil, headerGradient: String? = nil) {
         self.trustBanner = trustBanner

package/ios/Application/DesignSystemKits.swift

@@ -0,0 +1,100 @@
+// File: ios/Application/DesignSystemKits.swift
+// Created At: 2026-10-02 14:17:29 +07:00
+// Created By: AI
+// AI Agent: Claude Code
+// Model: claude-opus-5-5
+
+// AI-GENERATED START: app-wide design-system holder mirroring Compose's DesignSystemKits
+import SwiftUI
+
+/// Host-owned design-system inputs; mirrors Compose's `DesignSystemKitsConfigs` field for field.
+public struct DesignSystemKitsConfigs: Equatable {
+    public var userScaleRate: CGFloat
+    public var useOSScaleRate: Bool
+    public var isWhiteList: Bool
+    public var designSystemConfig: KitConfig?
+
+    public init(
+        userScaleRate: CGFloat = 1,
+        useOSScaleRate: Bool = true,
+        isWhiteList: Bool = false,
+        designSystemConfig: KitConfig? = nil
+    ) {
+        self.userScaleRate = userScaleRate
+        self.useOSScaleRate = useOSScaleRate
+        self.isWhiteList = isWhiteList
+        self.designSystemConfig = designSystemConfig
+    }
+}
+
+/// App-wide holder for the SwiftUI kit, mirroring Compose's `DesignSystemKits`. The kit is sandboxed from the
+/// host, so the host pushes `setConfigs(_:)` at startup and on every change; the OS Dynamic Type factor is
+/// tracked here. Views re-render on change as long as the subtree got `.momoFontScale()` (`NavigationContainer`
+/// applies it). Swift reserves `init`, so there is no `init(source:)` twin: the host observes and pushes.
+public final class DesignSystemKits: ObservableObject {
+    public static let shared = DesignSystemKits()
+
+    @Published private var configs = DesignSystemKitsConfigs()
+    @Published public private(set) var osFontScale: CGFloat = DesignSystemKits.currentOsFontScale()
+
+    private init() {
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(contentSizeCategoryDidChange),
+            name: UIContentSizeCategory.didChangeNotification,
+            object: nil
+        )
+    }
+
+    public func setConfigs(_ configs: DesignSystemKitsConfigs) {
+        onMain {
+            // Re-assigning an unchanged value would still publish and invalidate every kit subtree.
+            guard self.configs != configs else { return }
+            self.configs = configs
+        }
+    }
+
+    public func getConfigs() -> DesignSystemKitsConfigs {
+        configs
+    }
+
+    public var fontScale: FontScale {
+        FontScale(
+            userScaleRate: configs.userScaleRate,
+            useOSScaleRate: configs.useOSScaleRate,
+            osFontScale: osFontScale
+        )
+    }
+
+    @objc private func contentSizeCategoryDidChange() {
+        let next = Self.currentOsFontScale()
+        guard next != osFontScale else { return }
+        osFontScale = next
+    }
+
+    /// Same factor Compose's iOS `ProvideOsFontScale` derives from
+    /// `UIFont.preferredFont(forTextStyle: .body).pointSize / 17`, so both iOS surfaces scale alike.
+    static func currentOsFontScale() -> CGFloat {
+        let base = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+        return UIFontMetrics.default.scaledFont(for: base).pointSize / base.pointSize
+    }
+
+    /// Synchronous when already on main — an async hop would defer the change by a frame.
+    private func onMain(_ work: @escaping () -> Void) {
+        if Thread.isMainThread { work() } else { DispatchQueue.main.async(execute: work) }
+    }
+}
+
+private struct DesignSystemKitsConfigsKey: EnvironmentKey {
+    /// Computed, never stored: an un-injected subtree still reads the live holder, just not reactively.
+    static var defaultValue: DesignSystemKitsConfigs { DesignSystemKits.shared.getConfigs() }
+}
+
+public extension EnvironmentValues {
+    /// Injected by `.momoFontScale()`; never set it directly (same trap as `\.momoFontScale`).
+    var designSystemKitsConfigs: DesignSystemKitsConfigs {
+        get { self[DesignSystemKitsConfigsKey.self] }
+        set { self[DesignSystemKitsConfigsKey.self] = newValue }
+    }
+}
+// AI-GENERATED END: app-wide design-system holder mirroring Compose's DesignSystemKits

package/ios/Application/DesignSystemKitsPayload.swift

@@ -0,0 +1,68 @@
+// File: ios/Application/DesignSystemKitsPayload.swift
+// Created At: 2026-10-02 15:40:00 +07:00
+// Created By: AI
+// AI Agent: Claude Code
+// Model: claude-opus-5-5
+
+// AI-GENERATED START: JSON entry point for hosts that can't share Swift types with the kit
+import Foundation
+
+public extension DesignSystemKits {
+    /// Applies configs pushed as JSON by a host that can't share Swift types with the kit (e.g. the KMP bridge).
+    /// Invalid JSON is ignored and the current configs are kept.
+    func setConfigs(json: String) {
+        guard let data = json.data(using: .utf8),
+              let payload = try? JSONDecoder().decode(DesignSystemKitsPayload.self, from: data) else { return }
+        setConfigs(payload.configs)
+    }
+}
+
+// Wire format; field names match the host's serializer (momo-app HostDesignSystemKits / DesignSystemData.kt).
+private struct DesignSystemKitsPayload: Decodable {
+    let userScaleRate: CGFloat
+    let useOSScaleRate: Bool
+    let isWhiteList: Bool
+    let designSystemConfig: KitConfigPayload?
+
+    var configs: DesignSystemKitsConfigs {
+        DesignSystemKitsConfigs(
+            userScaleRate: userScaleRate,
+            useOSScaleRate: useOSScaleRate,
+            isWhiteList: isWhiteList,
+            designSystemConfig: designSystemConfig?.kitConfig
+        )
+    }
+}
+
+private struct KitConfigPayload: Decodable {
+    let trustBanner: TrustBannerPayload?
+    let headerBar: String?
+    let headerGradient: String?
+
+    var kitConfig: KitConfig {
+        KitConfig(trustBanner: trustBanner?.trustBannerData, headerBar: headerBar, headerGradient: headerGradient)
+    }
+}
+
+private struct TrustBannerPayload: Decodable {
+    let content: [String: String]
+    let subContent: [String: String]
+    let pciImage: String?
+    let sslImage: String?
+    let urlConfig: String?
+    let icons: [String]?
+    let momoImage: String?
+
+    var trustBannerData: TrustBannerData {
+        TrustBannerData(
+            content: content,
+            subContent: subContent,
+            pciImage: pciImage,
+            momoImage: momoImage,
+            sslImage: sslImage,
+            icons: icons,
+            urlConfig: urlConfig ?? ""
+        )
+    }
+}
+// AI-GENERATED END: JSON entry point for hosts that can't share Swift types with the kit

package/ios/Badge/BadgeRibbon.swift

@@ -203,7 +203,9 @@ public struct BadgeRibbon: View {
 /// rotation) — the label gets the same scale applied a second time so it stays right-reading
 /// while only the ribbon shape flips.
 public struct RoundedBadgeRibbon: View {
+    @Environment(\.appTheme) private var theme
     @Environment(\.momoFontScale) private var fontScale
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
     let text: String
     let position: RibbonPosition
 
@@ -223,7 +225,12 @@ public struct RoundedBadgeRibbon: View {
 
     private var measuredTextSize: CGSize {
         let fontSize = fontScale(TypographyStyle.labelXsMedium.fontSize)
-        let font = UIFont.systemFont(ofSize: fontSize, weight: .medium)
+        let font = momoUIFont(
+            size: fontSize,
+            weight: .medium,
+            family: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
+        )
         return text.size(withAttributes: [.font: font])
     }
 

package/ios/Extensions/Color++.swift

@@ -4,16 +4,14 @@ import Foundation
 private final class MoMoUIKitsBundleToken {}
 
 enum MoMoUIKitsResources {
+
     static let bundle: Bundle = {
         let bundleName = "MoMoUIKitsResources"
         let tokenBundle = Bundle(for: MoMoUIKitsBundleToken.self)
-        let frameworkBundle = Bundle(identifier: "org.cocoapods.MoMoUIKits")
         let candidates = [
             Bundle.main.resourceURL,
             tokenBundle.resourceURL,
-            tokenBundle.bundleURL,
-            frameworkBundle?.resourceURL,
-            frameworkBundle?.bundleURL
+            tokenBundle.bundleURL
         ]
 
         for candidate in candidates {

package/ios/Input/Input.swift

@@ -153,7 +153,7 @@ public struct Input: View {
                             handleFocusChange(focused)
                         })
                         .keyboardType(keyboardType)
-                        .font(fontScale.font(size: 14, weight: fontWeight == .bold ? .bold : .regular))
+                        .kitFont(fontWeight == .bold ? .actionSBold : .bodyDefaultRegular)
                         .ignoreBoldTextSetting()
                         .foregroundColor(getTextColor())
                         .disabled(disabled || readOnly)
@@ -345,7 +345,12 @@ private struct SecureInputField: UIViewRepresentable {
         textField.spellCheckingType = .no
         textField.delegate = context.coordinator
         textField.keyboardType = keyboardType
-        textField.font = UIFont.systemFont(ofSize: fontSize, weight: fontWeight)
+        textField.font = momoUIFont(
+            size: fontSize,
+            weight: fontWeight,
+            family: context.environment.appTheme.font,
+            isWhiteList: context.environment.designSystemKitsConfigs.isWhiteList
+        )
         textField.textColor = textColor
         textField.isEnabled = !isDisabled
         textField.setContentHuggingPriority(.defaultLow, for: .horizontal)
@@ -370,7 +375,12 @@ private struct SecureInputField: UIViewRepresentable {
         if textField.text != text {
             textField.text = text
         }
-        let font = UIFont.systemFont(ofSize: fontSize, weight: fontWeight)
+        let font = momoUIFont(
+            size: fontSize,
+            weight: fontWeight,
+            family: context.environment.appTheme.font,
+            isWhiteList: context.environment.designSystemKitsConfigs.isWhiteList
+        )
         if textField.font != font {
             textField.font = font
         }

package/ios/Input/InputPhoneNumber.swift

@@ -104,9 +104,7 @@ public struct InputPhoneNumber: View {
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
-                    .font(size == .small
-                          ? fontScale.font(size: 14, weight: .semibold)
-                          : fontScale.font(size: 18, weight: .bold))
+                    .kitFont(size == .small ? .headerSSemibold : .headerMBold)
                     .ignoreBoldTextSetting()
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)

package/ios/Input/InputSearch.swift

@@ -120,7 +120,6 @@ public struct InputSearchProps {
 
 public struct InputSearch: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
     @Binding var text: String
     var buttonText: String = ""
     var showButtonText: Bool = false
@@ -263,7 +262,7 @@ public struct InputSearch: View {
                     }, onCommit: onSubmit)
                     .disabled(disabled)
                     .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
-                    .font(.system(size: fontScale(14), weight: fontWeight))
+                    .kitFont(size: 14, weight: fontWeight)
                     .ignoreBoldTextSetting()
                     .keyboardType(keyboardType)
                     .applyCursorColor(theme.colors.primary)

package/ios/Input/InputTextArea.swift

@@ -41,9 +41,11 @@ struct UITextViewWrapper: UIViewRepresentable {
         uiView.tintColor = UIColor(cursorColor)
         // Read through `context.environment` rather than the global `scaleSize`: that is what makes
         // SwiftUI re-run updateUIView when the font scale changes.
-        uiView.font = UIFont.systemFont(
-            ofSize: context.environment.momoFontScale(16),
-            weight: fontWeight == .bold ? .bold : .regular
+        uiView.font = momoUIFont(
+            size: context.environment.momoFontScale(16),
+            weight: fontWeight == .bold ? .bold : .regular,
+            family: context.environment.appTheme.font,
+            isWhiteList: context.environment.designSystemKitsConfigs.isWhiteList
         )
         uiView.isEditable = !disabled
         if uiView.keyboardType != keyboardType {

package/ios/InputMoney/InputMoney.swift

@@ -356,14 +356,13 @@ private struct MoneyTextField: UIViewRepresentable {
         return numeric.isEmpty ? "" : formatNumberToMoney(numeric)
     }
 
-    // Theme family as Compose `getFontFamily`: Momo Trust Sans only for whitelisted hosts, else system.
     private func font(_ context: Context) -> UIFont {
-        let size = context.environment.momoFontScale(20)
-        if KitDesignSystem.shared.isWhiteList, fontFamily == "MomoTrustSans",
-           let font = UIFont(name: fontWeight == .bold ? "MomoTrustSans-Bold" : "MomoTrustSans-Regular", size: size) {
-            return font
-        }
-        return .systemFont(ofSize: size, weight: fontWeight)
+        momoUIFont(
+            size: context.environment.momoFontScale(20),
+            weight: fontWeight,
+            family: fontFamily,
+            isWhiteList: context.environment.designSystemKitsConfigs.isWhiteList
+        )
     }
 
     final class Coordinator: NSObject, UITextFieldDelegate {

package/ios/Layout/ScreenLayout.swift

@@ -32,6 +32,8 @@ public struct ScreenLayout: Equatable {
     public let width: CGFloat
     public let height: CGFloat
     public let isIPhoneDuo: Bool
+    /// The device has a hinge, folded or not, whatever the window size; drives popups, modal and bottom sheet.
+    public let isDuoDevice: Bool
     public let insets: EdgeInsets
     public let insetLeft: CGFloat
     public let insetRight: CGFloat
@@ -68,8 +70,11 @@ enum DuoMetrics {
     // (x 550–643 of 669, clock digits centered on y 47); its reserved region is taller than the glyphs.
     static let innerStatusBarCenterY: CGFloat = 47
     static let innerStatusBarWidth: CGFloat = 120
-    // Widest short side of any single-display iPhone.
-    static let iPhoneMaxShortSide: CGFloat = 440
+    // Host app's iOS 26 tab bar on the inner display in portrait: a 62pt glass pill sized to its tabs,
+    // QR as a 62pt platter beside it, ≥ 20pt from the sides, 13pt into the home indicator inset.
+    static let floatingTabBarHeight: CGFloat = 62
+    static let floatingTabBarMargin: CGFloat = 20
+    static let floatingTabBarInsetOverlap: CGFloat = 13
 }
 
 enum HeaderMetrics {
@@ -104,15 +109,17 @@ extension ScreenLayout {
         size: CGSize,
         insets: EdgeInsets,
         reservedRegions: [CGRect] = ReservedRegions.current,
-        isPhone: Bool = isPhoneIdiom
+        isPhone: Bool = isPhoneIdiom,
+        isFoldable: Bool = FoldableDevice.isFoldable(measuredIn: keyWindow)
     ) -> ScreenLayout {
         let width = size.width
         let height = size.height
+        let isDuoDevice = isPhone && isFoldable
         var (headerHeight, headerStatusBarHeight) = headerGeometry(topInset: insets.top, isPhone: isPhone)
         let isDuo = isPhone && isIPhoneDuoWindow(width: width, height: height, insets: insets)
         guard isDuo else {
             return ScreenLayout(
-                width: width, height: height, isIPhoneDuo: false, insets: insets,
+                width: width, height: height, isIPhoneDuo: false, isDuoDevice: isDuoDevice, insets: insets,
                 insetLeft: 0, insetRight: 0, contentWidth: width,
                 headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: nil,
                 statusBarClearance: nil
@@ -172,7 +179,7 @@ extension ScreenLayout {
         }
 
         return ScreenLayout(
-            width: width, height: height, isIPhoneDuo: true, insets: insets,
+            width: width, height: height, isIPhoneDuo: true, isDuoDevice: isDuoDevice, insets: insets,
             insetLeft: insets.leading, insetRight: insets.trailing,
             contentWidth: width - insets.leading - insets.trailing,
             headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar,
@@ -251,13 +258,40 @@ extension ScreenLayout {
     }
 }
 
-/// Port of RN `device.ts` `isIPhoneDuo()`: UIScreen stays on the outer display, so this
-/// still matches when Split View narrows the window. Used by popups and overlays.
+/// Snapshot for call sites without `\.screenLayout`; not reactive. `windowSize` is ignored,
+/// kept for host call sites.
 public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
-    guard isPhoneIdiom else { return false }
-    let screen = UIScreen.main.bounds.size
-    let window = windowSize ?? keyWindow?.bounds.size ?? screen
-    return max(min(screen.width, screen.height), min(window.width, window.height)) > DuoMetrics.iPhoneMaxShortSide
+    isPhoneIdiom && FoldableDevice.isFoldable(measuredIn: keyWindow)
+}
+
+/// Apple's foldable check (as the host's `SideTabRailView.isFoldableDevice`): only a device with a
+/// hinge reports a `.division` region, inactive while flat but still there. Screen size cannot tell
+/// it apart from a large iPhone in landscape or a narrowed window.
+enum FoldableDevice {
+    // a hinge never goes away, so a positive answer is kept
+    private static var isKnownFoldable = false
+
+    static func isFoldable(measuredIn view: UIView?) -> Bool {
+        if isKnownFoldable { return true }
+        // compiled out on SDKs older than iOS 27.1 (UIKit 9127.0.85.28)
+        #if canImport(UIKit, _version: 9127.0.85.28)
+        guard #available(iOS 27.1, *), let view, view.window != nil || view is UIWindow else { return false }
+        isKnownFoldable = !view.reservedRegions(kind: .division, options: .includeInactive).isEmpty
+        #endif
+        return isKnownFoldable
+    }
+
+    /// Catches the hinge when the regions were read too early (before the window had them).
+    static func observe(in view: UIView) {
+        #if canImport(UIKit, _version: 9127.0.85.28)
+        guard #available(iOS 27.1, *) else { return }
+        view.addInteraction(UIHingeInteraction { _, update in
+            guard update.hinge != nil, !isKnownFoldable else { return }
+            isKnownFoldable = true
+            NotificationCenter.default.post(name: ReservedRegions.didChange, object: nil)
+        })
+        #endif
+    }
 }
 
 // MARK: - Reserved regions
@@ -282,6 +316,7 @@ private final class ReservedRegionsProbe: UIView {
     override init(frame: CGRect) {
         super.init(frame: frame)
         isUserInteractionEnabled = false
+        FoldableDevice.observe(in: self)
     }
 
     required init?(coder: NSCoder) { nil }

package/ios/Navigation/BottomTab/DuoBarCompression.swift

@@ -35,8 +35,6 @@ struct DuoBarCompression {
     static let defaultToolbarHeight = DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch
     /// Back, then the single button the toolbar folds into.
     private static let compressedToolbarHeight = 2 * DuoMetrics.controlSize + Spacing.M
-    /// Back alone, while a rail opened from the compressed state takes the toolbar slot.
-    private static let backOnlyHeight = DuoMetrics.controlSize
 
     /// - both fit: both stay whole
     /// - one fits whole beside the other compressed: one is compressed, tapping it swaps them
@@ -72,7 +70,8 @@ struct DuoBarCompression {
 
         let expandToolbar = { opened.wrappedValue = .toolbar }
         let expandTabBar = { opened.wrappedValue = .tabBar }
-        if opened.wrappedValue == .tabBar && fits(backOnlyHeight, tabBar) {
+        // an opened rail always shows, even when only the group gap is short: it closes once a tab is picked
+        if opened.wrappedValue == .tabBar {
             return DuoBarCompression(
                 toolbarCompressed: true,
                 tabBarCompressed: false,

package/ios/Navigation/BottomTab/DuoTabBar.swift

@@ -3,7 +3,7 @@
 //  MoMoUIKits
 //
 //  iPhone Duo tab bar, port of RN `BottomTab/DuoTabBar.tsx` (Figma Fold-Design-System MT1/MT2):
-//  a glass rail in the side bar, or a floating glass bar when unfolded portrait.
+//  a rail in the side bar, or a floating bar when unfolded portrait.
 //
 
 import SwiftUI
@@ -16,12 +16,15 @@ private let railGap = Spacing.XXS
 // selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
 private let railBubbleWidth: CGFloat = 44
 private let railBubbleHeight: CGFloat = 58
-let duoFloatingTabBarHeight: CGFloat = 62
+private let floatingHeight = DuoMetrics.floatingTabBarHeight
 private let floatingPadding = Spacing.XS
-private let floatingQrSize: CGFloat = 44
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-private let gridColumns: CGFloat = 8
-private let gridSpan: CGFloat = 6
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+private let floatingItemWidth: CGFloat = 80
+// while pressed the selection bubble grows into a lens past the pill's edges
+private let lensScaleX: CGFloat = 1.2
+private let lensScaleY: CGFloat = 1.3
+// Figma Home-2026 tab bar "Selection": brand pink at 8%
+private let selectionTintOpacity: Double = 0x14 / 255
 private let tabSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
 
 /// Room tab screens leave for the Duo tab bar, provided by BottomTab to its tab StackScreens.
@@ -51,47 +54,34 @@ func duoRailHeight(itemCount: Int, hasQr: Bool, compressed: Bool = false) -> CGF
 }
 
 extension ScreenLayout {
+    /// Overlaps the home indicator inset like the system tab bar (21pt above the bottom with a 34pt inset).
+    var duoFloatingTabBarBottom: CGFloat {
+        max(insets.bottom - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S)
+    }
+
     func duoTabBarInsets(itemCount: Int, hasFloatingButton: Bool, tabBarCompressed: Bool = false) -> DuoTabBarInsets {
         guard isIPhoneDuo else { return DuoTabBarInsets() }
         guard let sideBar else {
-            return DuoTabBarInsets(overlay: duoFloatingTabBarHeight + Spacing.M)
+            // overlay is measured from the bottom safe area, the bar reaches into it
+            return DuoTabBarInsets(overlay: floatingHeight + duoFloatingTabBarBottom - insets.bottom)
         }
         let rail = duoRailHeight(itemCount: itemCount, hasQr: hasFloatingButton, compressed: tabBarCompressed)
         return DuoTabBarInsets(sideBarReserve: sideBar.bottom + rail + DuoBarCompression.groupGap)
     }
 }
 
-/// Glass on iOS 26, a system blur before it (RN GlassView's fallback).
-struct DuoBarMaterial<S: Shape>: ViewModifier {
+/// RN `BarMaterial`: surface with a 1pt border.
+struct DuoBarMaterial<S: InsettableShape>: ViewModifier {
     let shape: S
-    var visible: Bool = true
-
-    func body(content: Content) -> some View {
-        content.background(material.allowsHitTesting(false))
-    }
 
-    @ViewBuilder
-    private var material: some View {
-        #if compiler(>=6.2)
-        if #available(iOS 26.0, *) {
-            // glass materializes by toggling its effect, it does not fade with opacity
-            Color.clear
-                .glassEffect(visible ? .regular : .identity, in: shape)
-                .shadow(color: Color.black.opacity(visible ? 0.16 : 0), radius: 16, x: 0, y: 6)
-                .animation(.easeInOut(duration: 0.25), value: visible)
-        } else {
-            blur
-        }
-        #else
-        blur
-        #endif
-    }
+    @Environment(\.appTheme) private var theme
 
-    private var blur: some View {
-        shape.fill(.regularMaterial)
-            .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
-            .opacity(visible ? 1 : 0)
-            .animation(.easeInOut(duration: 0.25), value: visible)
+    func body(content: Content) -> some View {
+        content.background(
+            shape.fill(theme.colors.background.surface)
+                .overlay(shape.strokeBorder(theme.colors.border.default, lineWidth: 1))
+                .allowsHitTesting(false)
+        )
     }
 }
 
@@ -126,7 +116,7 @@ private struct DuoRailTabBar: View {
     let onTabSelected: (Int) -> Void
     let compression: DuoBarCompression
 
-    @Environment(\.appTheme) private var theme
+    @State private var pressedIndex: Int?
 
     private var isRight: Bool { sideBar.edge == .right }
 
@@ -157,15 +147,15 @@ private struct DuoRailTabBar: View {
         .ignoresSafeArea()
     }
 
-    /// Glass column of tab items with the sliding selection bubble.
+    /// Column of icon-only tab items with the sliding selection bubble.
     private var rail: some View {
         ZStack(alignment: .top) {
-            Capsule()
-                .fill(theme.colors.background.selected)
+            DuoSelectionMaterial(lens: pressedIndex != nil)
                 .frame(width: railBubbleWidth, height: railBubbleHeight)
                 .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
-                    + CGFloat(selectedIndex) * (itemSize + railGap))
+                    + CGFloat(pressedIndex ?? selectedIndex) * (itemSize + railGap))
                 .animation(tabSpring, value: selectedIndex)
+                .animation(tabSpring, value: pressedIndex)
 
             VStack(spacing: railGap) {
                 ForEach(items.indices, id: \.self) { index in
@@ -177,19 +167,19 @@ private struct DuoRailTabBar: View {
                             .frame(width: itemSize, height: itemSize)
                             .contentShape(Rectangle())
                     }
-                    .buttonStyle(.plain)
+                    .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
                     .accessibilityLabel(items[index].label)
                 }
             }
             .padding(.vertical, railPadding)
         }
         .frame(width: itemSize)
-        .modifier(DuoBarMaterial(shape: RoundedRectangle(cornerRadius: Radius.XL)))
+        .modifier(DuoBarMaterial(shape: Capsule()))
         .accessibilityIdentifier("bottom_tab_bar")
     }
 }
 
-/// Floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M).
+/// Floating labelled bar for the unfolded portrait display, QR pinned in its own platter beside it.
 private struct DuoFloatingTabBar: View {
     let items: [BottomTabItem]
     let floatingButton: BottomTabFloatingButton?
@@ -198,45 +188,48 @@ private struct DuoFloatingTabBar: View {
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
+    @State private var pressedIndex: Int?
 
     private var barWidth: CGFloat {
-        let columnWidth = (layout.width - 2 * Spacing.M - (gridColumns - 1) * Spacing.M) / gridColumns
-        return columnWidth * gridSpan + (gridSpan - 1) * Spacing.M
+        let margins = layout.insets.leading + layout.insets.trailing + 2 * DuoMetrics.floatingTabBarMargin
+        let qr = floatingButton == nil ? 0 : floatingHeight + Spacing.S
+        let preferred = CGFloat(items.count) * floatingItemWidth + 2 * floatingPadding
+        return max(min(preferred, layout.width - margins - qr), 0)
     }
 
-    private var useQr: Bool { floatingButton != nil && items.count % 2 == 0 }
-    private var middle: Int { items.count / 2 }
-    private var cellCount: Int { items.count + (useQr ? 1 : 0) }
-    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(cellCount, 1)) }
-    private var visualIndex: Int { useQr && selectedIndex >= middle ? selectedIndex + 1 : selectedIndex }
+    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(items.count, 1)) }
 
     var body: some View {
+        HStack(spacing: Spacing.S) {
+            bar
+            if let floatingButton {
+                DuoQrButton(data: floatingButton, size: floatingHeight)
+                    .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
+            }
+        }
+        .padding(.bottom, layout.duoFloatingTabBarBottom)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
+        .ignoresSafeArea()
+    }
+
+    private var bar: some View {
         ZStack(alignment: .leading) {
-            Capsule()
-                .fill(theme.colors.background.selected)
+            DuoSelectionMaterial(lens: pressedIndex != nil)
                 .frame(width: cellWidth)
-                .offset(x: CGFloat(visualIndex) * cellWidth)
-                .animation(tabSpring, value: visualIndex)
+                .offset(x: CGFloat(pressedIndex ?? selectedIndex) * cellWidth)
+                .animation(tabSpring, value: selectedIndex)
+                .animation(tabSpring, value: pressedIndex)
 
             HStack(spacing: 0) {
-                ForEach(0..<cellCount, id: \.self) { cell in
-                    if useQr && cell == middle, let floatingButton {
-                        DuoQrButton(data: floatingButton, size: floatingQrSize)
-                            .frame(width: cellWidth)
-                    } else {
-                        let index = useQr && cell > middle ? cell - 1 : cell
-                        tabCell(index)
-                    }
+                ForEach(items.indices, id: \.self) { index in
+                    tabCell(index)
                 }
             }
         }
         .padding(floatingPadding)
-        .frame(width: barWidth, height: duoFloatingTabBarHeight)
+        .frame(width: barWidth, height: floatingHeight)
         .modifier(DuoBarMaterial(shape: Capsule()))
         .accessibilityIdentifier("bottom_tab_bar")
-        .padding(.bottom, layout.insets.bottom + Spacing.M)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
-        .ignoresSafeArea()
     }
 
     private func tabCell(_ index: Int) -> some View {
@@ -247,20 +240,52 @@ private struct DuoFloatingTabBar: View {
                 MomoText(
                     items[index].label,
                     typography: .labelXsMedium,
-                    color: selected ? theme.colors.primary : theme.colors.text.default,
+                    color: selected ? theme.colors.primary : theme.colors.text.hint,
                     textAlign: .center,
                     maxLines: 1
                 )
+                // like the system tab bar the label keeps its design size; a constant snapshot, nothing to observe
+                .environment(\.momoFontScale, FontScale(userScaleRate: 1, useOSScaleRate: false))
             }
             .frame(width: cellWidth)
             .frame(maxHeight: .infinity)
             .contentShape(Rectangle())
         }
-        .buttonStyle(.plain)
+        .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
         .accessibilityLabel(items[index].label)
     }
 }
 
+/// Pink tinted capsule under the selected tab; while pressed it grows into a lens (80x54 to about 96x70).
+private struct DuoSelectionMaterial: View {
+    let lens: Bool
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        Capsule()
+            .fill(theme.colors.primary.opacity(selectionTintOpacity))
+            .scaleEffect(x: lens ? lensScaleX : 1, y: lens ? lensScaleY : 1)
+            .allowsHitTesting(false)
+    }
+}
+
+/// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
+private struct DuoLensPressStyle: ButtonStyle {
+    let index: Int
+    @Binding var pressedIndex: Int?
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label.onChange(of: configuration.isPressed) { pressed in
+            if pressed {
+                pressedIndex = index
+            } else if pressedIndex == index {
+                pressedIndex = nil
+            }
+        }
+    }
+}
+
 private struct DuoTabIcon: View {
     let item: BottomTabItem
     let selected: Bool
@@ -274,7 +299,7 @@ private struct DuoTabIcon: View {
     }
 
     var body: some View {
-        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.default)
+        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.hint)
             .overlay(alignment: .topTrailing) {
                 if let badgeLabel, !badgeLabel.isEmpty {
                     Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)

package/ios/Navigation/Component/HeaderBackground.swift

@@ -90,6 +90,27 @@ private let duoGradientExtra: CGFloat = 52
 // scroll distance over which the extended gradient collapses to the header
 private let duoExtendedCollapseDistance: CGFloat = 100
 
+// scroll distance over which the bar fades in
+private let duoBarFadeDistance: CGFloat = 16
+
+/// Port of RN `DuoGlassBackground`: translucent surface with a hairline, shown once the content
+/// scrolls `fadeStart` under the header.
+struct DuoHeaderBar: View {
+    let scrollOffset: CGFloat
+    var fadeStart: CGFloat = 0
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        theme.colors.background.surface.opacity(0.8)
+            .overlay(alignment: .bottom) {
+                theme.colors.border.default.frame(height: 0.5)
+            }
+            .opacity(min(max((scrollOffset - fadeStart) / duoBarFadeDistance, 0), 1))
+            .allowsHitTesting(false)
+    }
+}
+
 /// Port of RN `DuoScrollGradient`: with the glass header the content scrolls under the bar, so the
 /// header gradient is drawn under it. Compose draws this inside `HeaderBackground`.
 struct DuoScrollGradient: View {
@@ -114,7 +135,7 @@ struct DuoScrollGradient: View {
                 let progress = min(scroll / duoExtendedCollapseDistance, 1)
                 gradient
                     .frame(height: headerHeight + (extended ? duoGradientExtra * (1 - progress) : 0))
-                    .opacity(1 - min(scroll / duoGradientExtra, 1))
+                    .opacity(Double(1 - min(scroll / duoGradientExtra, 1)))
             }
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)

package/ios/Navigation/StackScreen.swift

@@ -403,11 +403,8 @@ public struct StackScreen<Content: View>: View {
                     .background(alignment: .top) {
                         Group {
                             if layout.sideBar != nil {
-                                // glass shows once the banner has scrolled under the header
-                                Color.clear.modifier(DuoBarMaterial(
-                                    shape: Rectangle(),
-                                    visible: scrollOffset > heroGlassStart(animatedHeader)
-                                ))
+                                // the bar shows once the banner has scrolled under the header
+                                DuoHeaderBar(scrollOffset: scrollOffset, fadeStart: heroGlassStart(animatedHeader))
                             } else {
                                 HeaderBarBackground(opacity: opacity)
                             }
@@ -457,8 +454,7 @@ public struct StackScreen<Content: View>: View {
 
                 header
                     .background(
-                        Color.clear
-                            .modifier(DuoBarMaterial(shape: Rectangle(), visible: scrollOffset > 0))
+                        DuoHeaderBar(scrollOffset: scrollOffset)
                             .edgesIgnoringSafeArea([.top, .horizontal])
                     )
                     .offset(y: -headerHide)

package/ios/Popup/PopupLayout.swift

@@ -5,8 +5,6 @@ import SwiftUI
 private let duoPopupMaxWidth: CGFloat = 440
 
 extension ScreenLayout {
-    var isDuoDevice: Bool { isIPhoneDuoDevice(windowSize: CGSize(width: width, height: height)) }
-
     /// Card width cap (Compose `popupMaxWidth`); unbounded off iPhone Duo, where the popup's own padding sets the width.
     var popupMaxWidth: CGFloat {
         isDuoDevice ? duoPopupMaxWidth : .infinity

package/ios/Stepper/Stepper.swift

@@ -84,7 +84,6 @@ private struct StepperButton: View {
 
 private struct StepperNumberView: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
 
     @Binding var text: String
     var size: StepperSize
@@ -106,7 +105,7 @@ private struct StepperNumberView: View {
                 MomoText(text, typography: .descriptionDefaultRegular, color: textColor)
             }
         }
-        .font(.system(size: fontScale(12)))
+        .kitFont(size: 12)
         .ignoreBoldTextSetting()
         .foregroundColor(textColor)
         // Compose's min width includes the horizontal padding.

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -11,7 +11,7 @@ import SDWebImageSwiftUI
 
 let jsonUrl = "https://static.momocdn.net/app/json/component-kits/design_system.json"
 
-public struct TrustBannerData: Decodable {
+public struct TrustBannerData: Decodable, Equatable {
     public let content: [String: String]
     public let subContent: [String: String]
     public let pciImage: String?
@@ -85,6 +85,7 @@ let defaultBanner = TrustBannerData(
 public struct TrustBanner: View {
     @Environment(\.applicationEnvironment) var applicationEnvironment
     @Environment(\.localize) private var localize
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
 
     var onPress: ((String)->Void)?
     private let serviceName: String
@@ -104,7 +105,8 @@ public struct TrustBanner: View {
     }
 
     private var banner: TrustBannerData {
-        applicationEnvironment.config?.trustBanner ?? defaultBanner
+        // Container config wins, else the host-pushed DesignSystemKits config (Compose parity).
+        (applicationEnvironment.config ?? designSystemKitsConfigs.designSystemConfig)?.trustBanner ?? defaultBanner
     }
 
     func onPressSecurity() {

package/ios/Typography/FontScale.swift

@@ -52,7 +52,7 @@ public struct FontScale: Equatable {
     }
 
     /// A host-pushed mini-app context wins per field, matching Compose's
-    /// `context?.useOSScaleRate ?: KitFontScale.useOSScaleRate`.
+    /// `context?.useOSScaleRate ?: DesignSystemKits.getConfigs().useOSScaleRate`.
     public func overriding(userScaleRate: CGFloat?, useOSScaleRate: Bool?) -> FontScale {
         guard userScaleRate != nil || useOSScaleRate != nil else { return self }
         return FontScale(
@@ -66,7 +66,7 @@ public struct FontScale: Equatable {
 private struct FontScaleKey: EnvironmentKey {
     /// Computed, never stored: a bare `UIHostingController` root that never got `.momoFontScale()`
     /// still reads the live store instead of a value frozen at first access.
-    static var defaultValue: FontScale { FontScaleStore.shared.snapshot }
+    static var defaultValue: FontScale { DesignSystemKits.shared.fontScale }
 }
 
 public extension EnvironmentValues {
@@ -77,9 +77,10 @@ public extension EnvironmentValues {
 }
 
 public extension View {
-    /// Injects a Dynamic-Type-observing font scale and re-renders this subtree on change.
+    /// Injects a Dynamic-Type-observing font scale plus `\.designSystemKitsConfigs` (whitelist, remote config)
+    /// and re-renders this subtree on change.
     /// Use at every `UIHostingController` root that is not inside a `NavigationContainer`.
-    func momoFontScale(_ store: FontScaleStore = .shared, context: MiniAppContext? = nil) -> some View {
+    func momoFontScale(_ store: DesignSystemKits = .shared, context: MiniAppContext? = nil) -> some View {
         modifier(MomoFontScaleModifier(store: store, context: context))
     }
 }
@@ -87,17 +88,19 @@ public extension View {
 /// `@ObservedObject` is load-bearing, same as `MomoLocalizeModifier`: `@Environment(\.momoFontScale)`
 /// only invalidates when the boxed snapshot changes, which requires *this* body to re-run on publish.
 private struct MomoFontScaleModifier: ViewModifier {
-    @ObservedObject var store: FontScaleStore
+    @ObservedObject var store: DesignSystemKits
     let context: MiniAppContext?
 
     func body(content: Content) -> some View {
-        content.environment(
-            \.momoFontScale,
-            store.snapshot.overriding(
-                userScaleRate: context?.userScaleRate,
-                useOSScaleRate: context?.useOSScaleRate
+        content
+            .environment(
+                \.momoFontScale,
+                store.fontScale.overriding(
+                    userScaleRate: context?.userScaleRate,
+                    useOSScaleRate: context?.useOSScaleRate
+                )
             )
-        )
+            .environment(\.designSystemKitsConfigs, store.getConfigs())
     }
 }
 // AI-GENERATED END: reactive font-scale snapshot injected through the environment

package/ios/Typography/Text.swift

@@ -4,7 +4,7 @@ import SwiftUI
 /// free functions). Inside a SwiftUI view prefer `@Environment(\.momoFontScale)` so the view
 /// re-renders when Dynamic Type or the host preference changes.
 public func scaleSize(_ size: CGFloat) -> CGFloat {
-    FontScaleStore.shared.snapshot(size)
+    DesignSystemKits.shared.fontScale(size)
 }
 
 @available(*, deprecated, message: "Max font scale is fixed at 1.5; this override is no longer applied. Drop the second argument.")
@@ -105,10 +105,10 @@ private enum MomoFontFace {
 }
 
 /// Port of Compose `getFontFamily`; SF Pro Text is the iOS system font, so the legacy family is `.system`.
-private func momoFontFace(family: String, weight: Font.Weight) -> MomoFontFace? {
+private func momoFontFace(family: String, weight: Font.Weight, isWhiteList: Bool) -> MomoFontFace? {
     let isNewFamily = family == "MomoTrustSans" || family == headerFontFamily
     // Outside the whitelist the new DS families drop to the legacy font, as before DS-791.
-    if family == "SFProText" || (isNewFamily && !KitDesignSystem.shared.isWhiteList) { return .system }
+    if family == "SFProText" || (isNewFamily && !isWhiteList) { return .system }
     // single-file families (Compose maps every weight to the same .otf)
     if family == headerFontFamily || family == "MoMoSignature" { return .named(family) }
     guard family == "MomoTrustSans" else { return nil }
@@ -127,8 +127,14 @@ private func momoFontFace(family: String, weight: Font.Weight) -> MomoFontFace?
 /// Header title family (Compose `HEADER_FONT_FAMILY`), whitelist only like the default font.
 let headerFontFamily = "MoMoTrustDisplay"
 
-private func momoFont(size: CGFloat, weight: Font.Weight, family: String, fallbackFamily: String? = nil) -> Font {
-    switch momoFontFace(family: family, weight: weight) {
+private func momoFont(
+    size: CGFloat,
+    weight: Font.Weight,
+    family: String,
+    fallbackFamily: String? = nil,
+    isWhiteList: Bool
+) -> Font {
+    switch momoFontFace(family: family, weight: weight, isWhiteList: isWhiteList) {
     case .system:
         return .system(size: size, weight: weight)
     case .named(let name) where UIFont(name: name, size: size) != nil:
@@ -136,15 +142,15 @@ private func momoFont(size: CGFloat, weight: Font.Weight, family: String, fallba
     default:
         // Compose falls back to the default font file when a family is missing
         if let fallbackFamily, fallbackFamily != family {
-            return momoFont(size: size, weight: weight, family: fallbackFamily)
+            return momoFont(size: size, weight: weight, family: fallbackFamily, isWhiteList: isWhiteList)
         }
         return .system(size: size, weight: weight)
     }
 }
 
 // lineHeight is identical across weights of a family, so the regular face is enough.
-private func momoLineHeight(size: CGFloat, family: String, fallbackFamily: String? = nil) -> CGFloat {
-    switch momoFontFace(family: family, weight: .regular) {
+private func momoLineHeight(size: CGFloat, family: String, fallbackFamily: String? = nil, isWhiteList: Bool) -> CGFloat {
+    switch momoFontFace(family: family, weight: .regular, isWhiteList: isWhiteList) {
     case .system:
         break
     case .named(let name):
@@ -152,15 +158,71 @@ private func momoLineHeight(size: CGFloat, family: String, fallbackFamily: Strin
         fallthrough
     case nil:
         if let fallbackFamily, fallbackFamily != family {
-            return momoLineHeight(size: size, family: fallbackFamily)
+            return momoLineHeight(size: size, family: fallbackFamily, isWhiteList: isWhiteList)
         }
     }
     return UIFont.systemFont(ofSize: size).lineHeight
 }
 
+/// UIKit counterpart of `momoFont`, for text that is not a `MomoText` (UITextField/UITextView, text measuring).
+func momoUIFont(size: CGFloat, weight: UIFont.Weight, family: String, isWhiteList: Bool) -> UIFont {
+    guard case .named(let name) = momoFontFace(family: family, weight: Font.Weight(weight), isWhiteList: isWhiteList),
+          let font = UIFont(name: name, size: size) else {
+        return .systemFont(ofSize: size, weight: weight)
+    }
+    return font
+}
+
+private extension Font.Weight {
+    init(_ weight: UIFont.Weight) {
+        switch weight {
+        case .ultraLight: self = .ultraLight
+        case .thin: self = .thin
+        case .light: self = .light
+        case .medium: self = .medium
+        case .semibold: self = .semibold
+        case .bold: self = .bold
+        case .heavy: self = .heavy
+        case .black: self = .black
+        default: self = .regular
+        }
+    }
+}
+
+/// Gives input text the same family as `MomoText` (Compose's `getFontFamily`), e.g. a TextField
+/// next to a `MomoText` placeholder. `size` is unscaled; the environment font scale is applied here.
+private struct KitFontModifier: ViewModifier {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
+    let size: CGFloat
+    let weight: Font.Weight
+
+    func body(content: Content) -> some View {
+        content.font(momoFont(
+            size: fontScale(size),
+            weight: weight,
+            family: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
+        ))
+    }
+}
+
+extension View {
+    func kitFont(_ typography: TypographyStyle) -> some View {
+        modifier(KitFontModifier(size: typography.fontSize, weight: typography.fontWeight))
+    }
+
+    func kitFont(size: CGFloat, weight: Font.Weight = .regular) -> some View {
+        modifier(KitFontModifier(size: size, weight: weight))
+    }
+}
+
 public struct MomoText: View {
     @Environment(\.appTheme) private var theme
     @Environment(\.momoFontScale) private var fontScale
+    // From the environment, not DesignSystemKits.shared, so a whitelist flip re-renders the text.
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
     private let content: String
     private let typography: TypographyStyle
     private let color: Color?
@@ -236,7 +298,8 @@ public struct MomoText: View {
             size: fontScale(fontSize),
             weight: typography.fontWeight,
             family: fontFamily ?? theme.font,
-            fallbackFamily: theme.font
+            fallbackFamily: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
         )
     }
 
@@ -244,7 +307,13 @@ public struct MomoText: View {
     private var baseText: SwiftUI.Text {
         let keywords = highlightText.filter { !$0.isEmpty }.sorted { $0.count > $1.count }
         guard !keywords.isEmpty else { return SwiftUI.Text(content) }
-        let highlightFont = momoFont(size: fontScale(fontSize), weight: TypographyStyle.headerXsSemibold.fontWeight, family: fontFamily ?? theme.font, fallbackFamily: theme.font)
+        let highlightFont = momoFont(
+            size: fontScale(fontSize),
+            weight: TypographyStyle.headerXsSemibold.fontWeight,
+            family: fontFamily ?? theme.font,
+            fallbackFamily: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
+        )
         func isWordChar(_ character: Character?) -> Bool {
             guard let character else { return false }
             return character.isLetter || character.isNumber || character == "_"
@@ -282,7 +351,12 @@ public struct MomoText: View {
 
         // lineSpacing is added on top of the font's natural line height, not on top of fontSize.
         let lineSpacing = max(0, fontScale(lineHeight)
-            - momoLineHeight(size: fontScale(fontSize), family: fontFamily ?? theme.font, fallbackFamily: theme.font))
+            - momoLineHeight(
+                size: fontScale(fontSize),
+                family: fontFamily ?? theme.font,
+                fallbackFamily: theme.font,
+                isWhiteList: designSystemKitsConfigs.isWhiteList
+            ))
 
         var text = baseText
             .font(font)

package/ios/Typography/Typography.swift

@@ -10,12 +10,12 @@ public extension View {
 }
 
 public extension Font {
-    /// Non-reactive: resolves against the current `FontScaleStore` snapshot at each access. The
+    /// Non-reactive: resolves against the current `DesignSystemKits` font scale at each access. The
     /// styles below are computed properties for that reason — as stored `static let`s they would
     /// freeze the scale at first access and never pick up a Dynamic Type change.
     /// Inside a view, `@Environment(\.momoFontScale)` + `fontScale.font(size:weight:)` also re-renders.
     static func appFont(size: CGFloat) -> Font {
-        FontScaleStore.shared.snapshot.font(size: size)
+        DesignSystemKits.shared.fontScale.font(size: size)
     }
 
     // New supported typography styles

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.168.1-beta.1'
+  s.version          = '0.167.1-beta.22'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.168.1-beta.1'
+  s.version          = '0.167.1-beta.22'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.168.1-beta.1",
+  "version": "0.168.1-beta.10",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},

package/ios/Typography/FontScaleStore.swift

@@ -1,58 +0,0 @@
-import SwiftUI
-
-/// App-wide font-scale inputs for the SwiftUI kit, and the single place they publish from.
-/// The host writes `update(...)` at startup (from the cache-backed `FontScaleProvider`) and again
-/// whenever the in-app font-size preference changes; the OS Dynamic Type factor is tracked here.
-/// Mirrors Compose's `KitFontScale` + `ProvideOsFontScale` pair, including its live behaviour —
-/// views re-render on change as long as the subtree got `.momoFontScale()` (`NavigationContainer`
-/// applies it). When `useOSScaleRate` is false the kit applies `userScaleRate` instead of the OS factor.
-public final class FontScaleStore: ObservableObject {
-    public static let shared = FontScaleStore()
-
-    @Published public private(set) var userScaleRate: CGFloat = 1
-    @Published public private(set) var useOSScaleRate: Bool = true
-    @Published public private(set) var osFontScale: CGFloat = FontScaleStore.currentOsFontScale()
-
-    private init() {
-        NotificationCenter.default.addObserver(
-            self,
-            selector: #selector(contentSizeCategoryDidChange),
-            name: UIContentSizeCategory.didChangeNotification,
-            object: nil
-        )
-    }
-
-    public var snapshot: FontScale {
-        FontScale(
-            userScaleRate: userScaleRate,
-            useOSScaleRate: useOSScaleRate,
-            osFontScale: osFontScale
-        )
-    }
-
-    public func update(userScaleRate: CGFloat, useOSScaleRate: Bool) {
-        onMain {
-            // Re-assigning an unchanged value would still publish and invalidate every kit subtree.
-            if self.userScaleRate != userScaleRate { self.userScaleRate = userScaleRate }
-            if self.useOSScaleRate != useOSScaleRate { self.useOSScaleRate = useOSScaleRate }
-        }
-    }
-
-    @objc private func contentSizeCategoryDidChange() {
-        let next = Self.currentOsFontScale()
-        guard next != osFontScale else { return }
-        osFontScale = next
-    }
-
-    /// Same factor Compose's iOS `ProvideOsFontScale` derives from
-    /// `UIFont.preferredFont(forTextStyle: .body).pointSize / 17`, so both iOS surfaces scale alike.
-    static func currentOsFontScale() -> CGFloat {
-        let base = UIFont.systemFont(ofSize: UIFont.labelFontSize)
-        return UIFontMetrics.default.scaledFont(for: base).pointSize / base.pointSize
-    }
-
-    /// Synchronous when already on main — an async hop would defer the change by a frame.
-    private func onMain(_ work: @escaping () -> Void) {
-        if Thread.isMainThread { work() } else { DispatchQueue.main.async(execute: work) }
-    }
-}

package/ios/Typography/KitDesignSystem.swift

@@ -1,17 +0,0 @@
-import Foundation
-
-/// Design-system rollout flag for the SwiftUI kit, mirroring Compose's `KitDesignSystem`.
-/// The kit is sandboxed and can't read the host config, so the host writes `update(_:)` once at
-/// startup from `DesignSystemConfig`. Startup-only and non-reactive, like `FontScaleStore` was
-/// before it gained live updates: there is no SwiftUI navigation container to re-render from.
-public final class KitDesignSystem {
-    public static let shared = KitDesignSystem()
-
-    public private(set) var isWhiteList: Bool = false
-
-    private init() {}
-
-    public func update(isWhiteList: Bool) {
-        self.isWhiteList = isWhiteList
-    }
-}