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

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)