@momo-kits/native-kits 0.168.1-beta.24 → 0.168.1-beta.25

package/CLAUDE.md

@@ -77,6 +77,7 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. `sideBar.top` is 170pt in portrait, 120pt on the inner display in landscape (height ≥ 600), 24pt on the outer display in landscape, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN the column is clamped above footer (24pt gap) / rail (12pt gap).
 - Reserved regions (iOS 27.1 `reservedRegionsOfKind:`, reached through the ObjC runtime so older SDKs still build): a probe `UIView` (`platform/ReservedRegions.ios.kt` on the Compose root view; `ReservedRegionsProbe` inside SwiftUI `momoScreenLayout()`) re-reads them in `layoutSubviews`, which UIKit re-runs when they change. They push `sideBar.top` below the status cluster as it grows for calls / Live Activities, and `sideBar.bottom` (≥ 24pt) above a camera at the bottom end of the strip.
 - Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (`sideBar.bottom` above the window bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
+- Duo tab selection motion (`bottomtab/DuoLiquidSelection.kt` / `ios/Navigation/BottomTab/DuoLiquidSelection.swift`, port of RN `useLiquidSelection.ts`, momo-kits !682): press lifts the lens, a drag past 10pt takes over (Compose: the bar's `pointerInput` consumes and so cancels the tab's clickable; SwiftUI: one `DragGesture` over the bar, tabs are not `Button`s), long press calls `BottomTab(onTabLongPress)` and release still selects, Reduce Motion (`platform/ReduceMotion`) falls back to a plain slide. SwiftUI integrates the lens spring on a display link because the stretch and the tabs' active tint read it every frame. Constants mirror RN — change both together.
 - Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height (0 when the screen puts nothing there) so the decision follows each screen's toolkit.
 - Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient leaves with the content.
 - Quick return header: glass headers and Animated headers (with a `ScrollState`) on the Duo side bar layout slide out with the content and back in on a reverse scroll; a half-shown header settles in or out once the scroll stops. The side bar is drawn apart from the header, so it stays put.

package/ios/Navigation/BottomTab/BottomTab.swift

@@ -16,6 +16,7 @@ public struct BottomTab: View {
     private let compressionBehavior: DuoBarCompressionBehavior
     private let onTabPress: ((_ index: Int, _ switchTab: @escaping () -> Void) -> Void)?
     private let backToInitialTab: Bool
+    private let onTabLongPress: ((_ index: Int) -> Void)?
 
     @EnvironmentObject private var navigator: Navigator
     /// The screen hosting the tabs (Compose's `LocalNavigation` in BottomTab).
@@ -34,19 +35,22 @@ public struct BottomTab: View {
     /// starts compressed; tapping the compressed one swaps them.
     /// `onTabPress` gets every tab press with the switch to perform, e.g. after a login gate.
     /// `backToInitialTab`: back off another tab returns to the initial one before leaving the screen.
+    /// `onTabLongPress`: RN `tabLongPress`; on iPhone Duo the held tab is still selected on release.
     public init(
         items: [BottomTabItem],
         floatingButton: BottomTabFloatingButton? = nil,
         compressionBehavior: DuoBarCompressionBehavior = .toolbar,
         initialRouteName: String? = nil,
         onTabPress: ((_ index: Int, _ switchTab: @escaping () -> Void) -> Void)? = nil,
-        backToInitialTab: Bool = true
+        backToInitialTab: Bool = true,
+        onTabLongPress: ((_ index: Int) -> Void)? = nil
     ) {
         self.items = items
         self.floatingButton = floatingButton
         self.compressionBehavior = compressionBehavior
         self.onTabPress = onTabPress
         self.backToInitialTab = backToInitialTab
+        self.onTabLongPress = onTabLongPress
         let start = items.firstIndex { $0.name == initialRouteName } ?? 0
         _startIndex = State(initialValue: start)
         _selectedIndex = State(initialValue: start)
@@ -101,7 +105,15 @@ public struct BottomTab: View {
                     floatingButton: floatingButton,
                     selectedIndex: selectedIndex,
                     onTabSelected: selectTab,
-                    compression: compression
+                    compression: compression,
+                    onTabLongPress: onTabLongPress,
+                    onTick: { [maxApi = navigator.maxApi] in
+                        if let maxApi {
+                            maxApi.triggerEventVibration("light")
+                        } else {
+                            UIImpactFeedbackGenerator(style: .light).impactOccurred()
+                        }
+                    }
                 )
             } else {
                 // Tab bar + home-indicator filler.
@@ -110,7 +122,8 @@ public struct BottomTab: View {
                         items: items,
                         floatingButton: floatingButton,
                         selectedIndex: selectedIndex,
-                        onTabSelected: selectTab
+                        onTabSelected: selectTab,
+                        onTabLongPress: onTabLongPress
                     )
                     theme.colors.background.surface
                         .frame(height: bottomInset + Spacing.S)

package/ios/Navigation/BottomTab/BottomTabBar.swift

@@ -67,6 +67,7 @@ struct BottomTabBar: View {
     let floatingButton: BottomTabFloatingButton?
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
+    var onTabLongPress: ((Int) -> Void)?
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
@@ -133,7 +134,10 @@ struct BottomTabBar: View {
             TabBarItem(
                 item: items[index],
                 selected: index == selectedIndex,
-                onClick: { onTabSelected(index) }
+                // from the icon's center to the cell's end edge, inside both XXS paddings
+                badgeMaxWidth: tabWidth / 2 - Spacing.XXS * 2,
+                onClick: { onTabSelected(index) },
+                onLongClick: onTabLongPress.map { callback in { callback(index) } }
             )
             .frame(maxWidth: .infinity)
         }
@@ -145,7 +149,9 @@ struct BottomTabBar: View {
 private struct TabBarItem: View {
     let item: BottomTabItem
     let selected: Bool
+    let badgeMaxWidth: CGFloat
     let onClick: () -> Void
+    let onLongClick: (() -> Void)?
 
     @Environment(\.appTheme) private var theme
 
@@ -159,40 +165,52 @@ private struct TabBarItem: View {
     }
 
     var body: some View {
-        ZStack(alignment: .topTrailing) {
-            VStack(spacing: 0) {
-                Icon(source: item.icon, size: 28, color: tintColor)
-                    .padding(Spacing.XS)
-                MomoText(
-                    item.label,
-                    typography: selected ? .labelXsMedium : .descriptionXsRegular,
-                    color: tintColor,
-                    textAlign: .center,
-                    maxLines: 1
-                )
-                    .truncationMode(.tail)
-            }
-            .frame(maxWidth: .infinity, maxHeight: .infinity)
-            .padding(.horizontal, Spacing.S)
-            .padding(.vertical, Spacing.S)
-
-            if let badgeLabel {
-                if badgeLabel.isEmpty {
-                    BadgeDot(size: .small)
-                        .offset(x: -Spacing.S, y: Spacing.XS)
-                } else {
-                    Badge(label: badgeLabel)
-                        .offset(x: -Spacing.XS, y: 0)
+        VStack(spacing: 0) {
+            Icon(source: item.icon, size: 28, color: tintColor)
+                .overlay(alignment: .topLeading) {
+                    // starts at the icon's center and grows toward the cell's end edge, ellipsized past it
+                    if let badgeLabel, !badgeLabel.isEmpty {
+                        Badge(label: badgeLabel)
+                            .frame(width: max(badgeMaxWidth, 0), alignment: .leading)
+                            .offset(x: 14, y: -Spacing.S)
+                    }
                 }
-            } else if item.showDot {
-                BadgeDot(size: .small)
-                    .offset(x: -Spacing.S, y: Spacing.XS)
-            }
+                .overlay(alignment: .topTrailing) {
+                    if badgeLabel?.isEmpty == true || (badgeLabel == nil && item.showDot) {
+                        BadgeDot(size: .small).offset(x: 4, y: -4)
+                    }
+                }
+                .padding(Spacing.XS)
+            MomoText(
+                item.label,
+                typography: selected ? .labelXsMedium : .descriptionXsRegular,
+                color: tintColor,
+                textAlign: .center,
+                maxLines: 1
+            )
+            .truncationMode(.tail)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.S)
+        .padding(.vertical, Spacing.S)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .padding(.horizontal, Spacing.XXS)
         .contentShape(Rectangle())
         .onTapGesture { onClick() }
+        .modifier(TabLongPress(action: onLongClick))
+    }
+}
+
+/// Only attached with a callback, so a held tab without one still selects on release.
+private struct TabLongPress: ViewModifier {
+    let action: (() -> Void)?
+
+    func body(content: Content) -> some View {
+        if let action {
+            content.onLongPressGesture(minimumDuration: 0.5, perform: action)
+        } else {
+            content
+        }
     }
 }
 

package/ios/Navigation/BottomTab/DuoLiquidSelection.swift

@@ -0,0 +1,364 @@
+//
+//  DuoLiquidSelection.swift
+//  MoMoUIKits
+//
+//  iOS 26 tab bar selection motion without the glass material, port of RN
+//  `BottomTab/useLiquidSelection.ts` (Compose `DuoLiquidSelection.kt`).
+//
+
+import SwiftUI
+import UIKit
+
+enum LiquidAxis {
+    case x, y
+}
+
+// RN reanimated { damping: 18, stiffness: 220, mass: 0.8 }
+let liquidSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
+
+private struct SpringParams {
+    let mass: CGFloat
+    let stiffness: CGFloat
+    let damping: CGFloat
+
+    static let standard = SpringParams(mass: 0.8, stiffness: 220, damping: 18)
+    // the lens trails the finger a little while dragged
+    static let drag = SpringParams(mass: 0.6, stiffness: 600, damping: 24)
+}
+
+private let reducedDuration: CFTimeInterval = 0.2
+// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
+let liquidLensScaleX: CGFloat = 1.2
+let liquidLensScaleY: CGFloat = 1.3
+// a moving lens stretches along its path and thins across it, eased per frame
+private let stretchPerPoint: CGFloat = 0.012
+private let maxStretch: CGFloat = 0.25
+private let stretchEasing: CGFloat = 0.25
+private let restStretch: CGFloat = 0.002
+// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
+private let tapLiftDuration: Double = 0.12
+private let barSwell: CGFloat = 0.04
+private let iconPop: CGFloat = 1.15
+private let iconPopDuration: Double = 0.12
+// below it a press is a tap
+private let dragSlop: CGFloat = 10
+// UIScrollView rubber band constant
+private let rubberBandConstant: CGFloat = 0.55
+// a vetoed switch: the lens returns to the selected tab after this
+private let resyncDelay: Double = 0.1
+// RN TouchableOpacity delayLongPress
+private let longPressDelay: Double = 0.5
+
+/// Resistance past the first and last tab, the further the finger goes the less the lens follows.
+private func rubberBand(_ value: CGFloat, max: CGFloat, dimension: CGFloat) -> CGFloat {
+    func band(_ overshoot: CGFloat) -> CGFloat {
+        (1 - 1 / (overshoot * rubberBandConstant / dimension + 1)) * dimension
+    }
+    if value < 0 { return -band(-value) }
+    if value > max { return max + band(value - max) }
+    return value
+}
+
+/// Owns the lens: its offset is integrated on a display link (SwiftUI can't expose an animation's
+/// in-flight value, and the stretch and the tabs' active tint follow it every frame); lift and pop
+/// are plain SwiftUI springs. Input is one gesture over the whole bar, so a press is either a tap,
+/// a long press or a drag.
+final class DuoLiquidSelection: ObservableObject {
+    @Published private(set) var offset: CGFloat = 0
+    @Published private(set) var stretch: CGFloat = 0
+    @Published private(set) var lift: CGFloat = 0
+    @Published private(set) var selectedIndex = 0
+    @Published private(set) var popIndex: Int?
+    @Published private(set) var pop: CGFloat = 1
+
+    var axis: LiquidAxis = .x
+    var count = 0
+    /// Distance between two neighbouring tab centers.
+    var pitch: CGFloat = 0
+    /// The first tab's center in the gesture's coordinate space.
+    var firstCenter: CGFloat = 0
+    var reduceMotion = false
+    var onSelect: (Int) -> Void = { _ in }
+    var onLongPress: ((Int) -> Void)?
+    var onTick: () -> Void = {}
+
+    private var velocity: CGFloat = 0
+    // where the lens is heading, so a re-render doesn't restart a spring already going there
+    private var destination: CGFloat = 0
+    private var spring = SpringParams.standard
+    private var timed: (from: CGFloat, start: CFTimeInterval?)?
+    private var displayLink: CADisplayLink?
+    private var lastTimestamp: CFTimeInterval?
+    private var measured = false
+
+    private var touchIndex: Int?
+    private var dragging = false
+    private var hovered = 0
+    private var longPressWork: DispatchWorkItem?
+    private var resyncWork: DispatchWorkItem?
+    private var lastSample: (position: CGFloat, time: Date)?
+    private var dragVelocity: CGFloat = 0
+    private var liftGeneration = 0
+    private var popGeneration = 0
+
+    deinit {
+        displayLink?.invalidate()
+    }
+
+    func sync(index: Int) {
+        let changed = index != selectedIndex
+        selectedIndex = index
+        let target = CGFloat(index) * pitch
+        // snap on first layout so the lens doesn't slide in from the leading edge
+        if measured {
+            move(to: target)
+            if changed { popIcon(index) }
+        } else {
+            stop()
+            destination = target
+            offset = target
+        }
+        measured = pitch > 0
+    }
+
+    func activeOpacity(_ index: Int) -> Double {
+        guard pitch > 0 else { return selectedIndex == index ? 1 : 0 }
+        return Double(min(max(1 - abs(offset - CGFloat(index) * pitch) / pitch, 0), 1))
+    }
+
+    var barScale: CGFloat { 1 + lift * barSwell }
+
+    var lensScale: (along: CGFloat, across: CGFloat, x: CGFloat, y: CGFloat) {
+        (1 + stretch, 1 - stretch * 0.5, 1 + lift * (liquidLensScaleX - 1), 1 + lift * (liquidLensScaleY - 1))
+    }
+
+    // MARK: Input
+
+    func touchChanged(location: CGPoint, translation: CGSize, time: Date) {
+        let value = position(location)
+        defer { lastSample = (value, time) }
+        guard let touchIndex else {
+            let index = nearest(value)
+            touchIndex = index
+            dragging = false
+            dragVelocity = 0
+            pressIn(index)
+            let work = DispatchWorkItem { [weak self] in self?.onLongPress?(index) }
+            longPressWork = work
+            DispatchQueue.main.asyncAfter(deadline: .now() + longPressDelay, execute: work)
+            return
+        }
+        if !dragging, hypot(translation.width, translation.height) > dragSlop {
+            dragging = true
+            longPressWork?.cancel()
+            hovered = touchIndex
+            animateLift(1)
+        }
+        guard dragging else { return }
+        if let lastSample {
+            let dt = time.timeIntervalSince(lastSample.time)
+            if dt > 0 { dragVelocity = (value - lastSample.position) / CGFloat(dt) }
+        }
+        let target = nearest(value)
+        if target != hovered {
+            hovered = target
+            onTick()
+        }
+        let follow = rubberBand(value, max: CGFloat(count - 1) * pitch, dimension: pitch)
+        if reduceMotion {
+            stop()
+            destination = follow
+            offset = follow
+        } else {
+            move(to: follow, spring: .drag)
+        }
+    }
+
+    func touchEnded(location: CGPoint) {
+        longPressWork?.cancel()
+        longPressWork = nil
+        defer {
+            touchIndex = nil
+            lastSample = nil
+        }
+        guard let touchIndex else { return }
+        if dragging {
+            dragging = false
+            animateLift(0)
+            let target = nearest(position(location))
+            move(to: CGFloat(target) * pitch, velocity: dragVelocity)
+            select(target)
+        } else {
+            pulseLift()
+            // a tap or a held tab, both pick the pressed tab like the system tab bar
+            select(touchIndex)
+        }
+    }
+
+    /// The system took the touch: nothing is selected, the lens returns to the selected tab.
+    func touchCancelled() {
+        guard touchIndex != nil else { return }
+        longPressWork?.cancel()
+        longPressWork = nil
+        touchIndex = nil
+        lastSample = nil
+        dragging = false
+        animateLift(0)
+        move(to: CGFloat(selectedIndex) * pitch, velocity: 0)
+    }
+
+    // MARK: Motion
+
+    private func position(_ point: CGPoint) -> CGFloat {
+        (axis == .x ? point.x : point.y) - firstCenter
+    }
+
+    private func nearest(_ value: CGFloat) -> Int {
+        guard pitch > 0 else { return 0 }
+        return min(max(Int((value / pitch).rounded()), 0), max(count - 1, 0))
+    }
+
+    private func pressIn(_ index: Int) {
+        resyncWork?.cancel()
+        // the lens heads to the pressed tab, not only the selected one
+        move(to: CGFloat(index) * pitch)
+        animateLift(1)
+    }
+
+    private func select(_ index: Int) {
+        onSelect(index)
+        resync()
+    }
+
+    /// Returns the lens to the selected tab unless a switch to where it is heading happened.
+    private func resync() {
+        resyncWork?.cancel()
+        let work = DispatchWorkItem { [weak self] in
+            guard let self, !self.dragging else { return }
+            let target = CGFloat(self.selectedIndex) * self.pitch
+            if self.destination != target { self.move(to: target) }
+        }
+        resyncWork = work
+        DispatchQueue.main.asyncAfter(deadline: .now() + resyncDelay, execute: work)
+    }
+
+    private func animateLift(_ target: CGFloat) {
+        liftGeneration += 1
+        if reduceMotion {
+            lift = 0
+            return
+        }
+        withAnimation(liquidSpring) { lift = target }
+    }
+
+    private func pulseLift() {
+        guard !reduceMotion else { return animateLift(0) }
+        liftGeneration += 1
+        let generation = liftGeneration
+        withAnimation(.linear(duration: tapLiftDuration)) { lift = 1 }
+        DispatchQueue.main.asyncAfter(deadline: .now() + tapLiftDuration) { [weak self] in
+            guard let self, self.liftGeneration == generation else { return }
+            withAnimation(liquidSpring) { self.lift = 0 }
+        }
+    }
+
+    private func popIcon(_ index: Int) {
+        guard !reduceMotion else { return }
+        popGeneration += 1
+        let generation = popGeneration
+        popIndex = index
+        pop = 1
+        withAnimation(.linear(duration: iconPopDuration)) { pop = iconPop }
+        DispatchQueue.main.asyncAfter(deadline: .now() + iconPopDuration) { [weak self] in
+            guard let self, self.popGeneration == generation else { return }
+            withAnimation(liquidSpring) { self.pop = 1 }
+        }
+    }
+
+    private func move(to target: CGFloat, velocity: CGFloat? = nil, spring: SpringParams = .standard) {
+        if destination == target, velocity == nil { return }
+        destination = target
+        self.spring = spring
+        if let velocity { self.velocity = velocity }
+        timed = reduceMotion ? (from: offset, start: nil) : nil
+        startDisplayLink()
+    }
+
+    private func stop() {
+        velocity = 0
+        timed = nil
+    }
+
+    fileprivate func tick(_ link: CADisplayLink) {
+        let now = link.targetTimestamp
+        let dt = min(now - (lastTimestamp ?? link.timestamp), 1.0 / 30)
+        lastTimestamp = now
+        let previous = offset
+        var next = offset
+        var settled = false
+
+        if var timed {
+            let start = timed.start ?? link.timestamp
+            timed.start = start
+            self.timed = timed
+            let fraction = min(max((now - start) / reducedDuration, 0), 1)
+            // reanimated withTiming default: ease in-out quad
+            let eased = fraction < 0.5 ? 2 * fraction * fraction : 1 - 2 * (1 - fraction) * (1 - fraction)
+            next = timed.from + (destination - timed.from) * CGFloat(eased)
+            settled = fraction >= 1
+        } else {
+            // a few sub steps keep the stiff drag spring stable
+            let steps = 4
+            let h = CGFloat(dt) / CGFloat(steps)
+            for _ in 0..<steps {
+                let force = -spring.stiffness * (next - destination) - spring.damping * velocity
+                velocity += force / spring.mass * h
+                next += velocity * h
+            }
+            settled = abs(next - destination) < 0.1 && abs(velocity) < 1
+        }
+        if settled {
+            next = destination
+            stop()
+        }
+        offset = next
+
+        if reduceMotion {
+            stretch = 0
+        } else {
+            let target = min(abs(next - previous) * stretchPerPoint, maxStretch)
+            // eased both ways: a slow frame (the spring turning at its overshoot) must not snap the shape
+            let eased = stretch + (target - stretch) * stretchEasing
+            stretch = eased < restStretch ? 0 : eased
+        }
+        if settled, stretch == 0 { stopDisplayLink() }
+    }
+
+    private func startDisplayLink() {
+        guard displayLink == nil else { return }
+        let link = CADisplayLink(target: DisplayLinkProxy(owner: self), selector: #selector(DisplayLinkProxy.tick))
+        link.preferredFrameRateRange = CAFrameRateRange(minimum: 60, maximum: 120, preferred: 120)
+        link.add(to: .main, forMode: .common)
+        displayLink = link
+        lastTimestamp = nil
+    }
+
+    private func stopDisplayLink() {
+        displayLink?.invalidate()
+        displayLink = nil
+    }
+}
+
+/// CADisplayLink retains its target; the proxy keeps the selection free to deinit mid motion.
+private final class DisplayLinkProxy: NSObject {
+    weak var owner: DuoLiquidSelection?
+
+    init(owner: DuoLiquidSelection) {
+        self.owner = owner
+    }
+
+    @objc func tick(_ link: CADisplayLink) {
+        guard let owner else { return link.invalidate() }
+        owner.tick(link)
+    }
+}

package/ios/Navigation/BottomTab/DuoTabBar.swift

@@ -20,12 +20,11 @@ private let floatingHeight = DuoMetrics.floatingTabBarHeight
 private let floatingPadding = Spacing.XS
 // 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
+// the rail's badge stays inside the capsule: its end sits XXS off the cell's end edge
+private let railBadgeMaxWidth = itemSize - Spacing.XXS * 2
+private let railBadgeEndOffset = (itemSize - iconSize) / 2 - Spacing.XXS
 // 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.
 struct DuoTabBarInsets: Equatable {
@@ -91,16 +90,20 @@ struct DuoTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
     var compression = DuoBarCompression()
+    var onTabLongPress: ((Int) -> Void)?
+    /// A tick per tab the lens enters while dragged.
+    var onTick: () -> Void = {}
 
     @Environment(\.screenLayout) private var layout
 
     var body: some View {
         if let sideBar = layout.sideBar {
             DuoRailTabBar(sideBar: sideBar, items: items, floatingButton: floatingButton,
-                          selectedIndex: selectedIndex, onTabSelected: onTabSelected, compression: compression)
+                          selectedIndex: selectedIndex, onTabSelected: onTabSelected, compression: compression,
+                          onTabLongPress: onTabLongPress, onTick: onTick)
         } else {
-            DuoFloatingTabBar(items: items, floatingButton: floatingButton,
-                              selectedIndex: selectedIndex, onTabSelected: onTabSelected)
+            DuoFloatingTabBar(items: items, floatingButton: floatingButton, selectedIndex: selectedIndex,
+                              onTabSelected: onTabSelected, onTabLongPress: onTabLongPress, onTick: onTick)
         }
     }
 }
@@ -115,8 +118,11 @@ private struct DuoRailTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
     let compression: DuoBarCompression
+    let onTabLongPress: ((Int) -> Void)?
+    let onTick: () -> Void
 
-    @State private var pressedIndex: Int?
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    @StateObject private var selection = DuoLiquidSelection()
 
     private var isRight: Bool { sideBar.edge == .right }
 
@@ -124,11 +130,11 @@ private struct DuoRailTabBar: View {
         VStack(spacing: Spacing.M) {
             if compression.tabBarCompressed, items.indices.contains(selectedIndex) {
                 SwiftUI.Button(action: compression.expandTabBar) {
-                    DuoTabIcon(item: items[selectedIndex], selected: true)
+                    DuoTabIcon(item: items[selectedIndex], selected: true, badgeMaxWidth: railBadgeMaxWidth, inRail: true)
                         .frame(width: itemSize, height: itemSize)
                         .contentShape(Circle())
                 }
-                .buttonStyle(.plain)
+                .buttonStyle(DuoPressLiftStyle())
                 .modifier(DuoBarMaterial(shape: Circle()))
                 .accessibilityLabel(items[selectedIndex].label)
                 .accessibilityIdentifier("bottom_tab_bar")
@@ -147,35 +153,51 @@ private struct DuoRailTabBar: View {
         .ignoresSafeArea()
     }
 
-    /// Column of icon-only tab items with the sliding selection bubble.
+    private func select(_ index: Int) {
+        onTabSelected(index)
+        compression.onTabSelected()
+    }
+
+    /// Column of icon-only tab items with the sliding selection lens.
     private var rail: some View {
-        ZStack(alignment: .top) {
-            DuoSelectionMaterial(lens: pressedIndex != nil)
+        let selection = configured()
+        let lens = selection.lensScale
+        return ZStack(alignment: .top) {
+            DuoSelectionMaterial()
                 .frame(width: railBubbleWidth, height: railBubbleHeight)
-                .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
-                    + CGFloat(pressedIndex ?? selectedIndex) * (itemSize + railGap))
-                .animation(tabSpring, value: selectedIndex)
-                .animation(tabSpring, value: pressedIndex)
+                .scaleEffect(x: lens.x * lens.across, y: lens.y * lens.along)
+                .offset(y: railPadding - (railBubbleHeight - itemSize) / 2 + selection.offset)
 
             VStack(spacing: railGap) {
                 ForEach(items.indices, id: \.self) { index in
-                    SwiftUI.Button {
-                        onTabSelected(index)
-                        compression.onTabSelected()
-                    } label: {
-                        DuoTabIcon(item: items[index], selected: index == selectedIndex)
+                    DuoLiquidTab(selection: selection, index: index, label: items[index].label,
+                                 selected: index == selectedIndex, onSelect: { select(index) }) { active in
+                        DuoTabIcon(item: items[index], selected: active, badgeMaxWidth: railBadgeMaxWidth, inRail: true)
                             .frame(width: itemSize, height: itemSize)
-                            .contentShape(Rectangle())
                     }
-                    .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
-                    .accessibilityLabel(items[index].label)
                 }
             }
             .padding(.vertical, railPadding)
         }
         .frame(width: itemSize)
+        .modifier(DuoLiquidInput(selection: selection, space: "DuoRail"))
         .modifier(DuoBarMaterial(shape: Capsule()))
+        .scaleEffect(selection.barScale)
         .accessibilityIdentifier("bottom_tab_bar")
+        .onAppear { selection.sync(index: selectedIndex) }
+        .onChange(of: selectedIndex) { selection.sync(index: $0) }
+    }
+
+    private func configured() -> DuoLiquidSelection {
+        selection.axis = .y
+        selection.count = items.count
+        selection.pitch = itemSize + railGap
+        selection.firstCenter = railPadding + itemSize / 2
+        selection.reduceMotion = reduceMotion
+        selection.onSelect = select
+        selection.onLongPress = onTabLongPress
+        selection.onTick = onTick
+        return selection
     }
 }
 
@@ -185,10 +207,13 @@ private struct DuoFloatingTabBar: View {
     let floatingButton: BottomTabFloatingButton?
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
+    let onTabLongPress: ((Int) -> Void)?
+    let onTick: () -> Void
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
-    @State private var pressedIndex: Int?
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    @StateObject private var selection = DuoLiquidSelection()
 
     private var barWidth: CGFloat {
         let margins = layout.insets.leading + layout.insets.trailing + 2 * DuoMetrics.floatingTabBarMargin
@@ -213,82 +238,139 @@ private struct DuoFloatingTabBar: View {
     }
 
     private var bar: some View {
-        ZStack(alignment: .leading) {
-            DuoSelectionMaterial(lens: pressedIndex != nil)
+        let selection = configured()
+        let lens = selection.lensScale
+        return ZStack(alignment: .leading) {
+            DuoSelectionMaterial()
                 .frame(width: cellWidth)
-                .offset(x: CGFloat(pressedIndex ?? selectedIndex) * cellWidth)
-                .animation(tabSpring, value: selectedIndex)
-                .animation(tabSpring, value: pressedIndex)
+                .scaleEffect(x: lens.x * lens.along, y: lens.y * lens.across)
+                .offset(x: selection.offset)
 
             HStack(spacing: 0) {
                 ForEach(items.indices, id: \.self) { index in
-                    tabCell(index)
+                    DuoLiquidTab(selection: selection, index: index, label: items[index].label,
+                                 selected: index == selectedIndex, onSelect: { onTabSelected(index) }) { active in
+                        tabCell(index, active: active)
+                    }
                 }
             }
         }
+        .modifier(DuoLiquidInput(selection: selection, space: "DuoFloatingBar"))
         .padding(floatingPadding)
         .frame(width: barWidth, height: floatingHeight)
         .modifier(DuoBarMaterial(shape: Capsule()))
+        .scaleEffect(selection.barScale)
         .accessibilityIdentifier("bottom_tab_bar")
+        .onAppear { selection.sync(index: selectedIndex) }
+        .onChange(of: selectedIndex) { selection.sync(index: $0) }
+        .onChange(of: cellWidth) { _ in selection.sync(index: selectedIndex) }
     }
 
-    private func tabCell(_ index: Int) -> some View {
-        let selected = index == selectedIndex
-        return SwiftUI.Button { onTabSelected(index) } label: {
-            VStack(spacing: Spacing.XXS) {
-                DuoTabIcon(item: items[index], selected: selected)
-                MomoText(
-                    items[index].label,
-                    typography: .labelXsMedium,
-                    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)
+    private func configured() -> DuoLiquidSelection {
+        selection.axis = .x
+        selection.count = items.count
+        selection.pitch = cellWidth
+        selection.firstCenter = cellWidth / 2
+        selection.reduceMotion = reduceMotion
+        selection.onSelect = onTabSelected
+        selection.onLongPress = onTabLongPress
+        selection.onTick = onTick
+        return selection
+    }
+
+    private func tabCell(_ index: Int, active: Bool) -> some View {
+        VStack(spacing: Spacing.XXS) {
+            DuoTabIcon(item: items[index], selected: active, badgeMaxWidth: cellWidth / 2 - Spacing.XXS)
+            MomoText(
+                items[index].label,
+                typography: .labelXsMedium,
+                color: active ? 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)
+    }
+}
+
+/// One gesture over the whole bar drives the selection; SwiftUI drops `onEnded` when the system
+/// cancels a touch, so the reset of the gesture state ends it instead.
+private struct DuoLiquidInput: ViewModifier {
+    let selection: DuoLiquidSelection
+    let space: String
+
+    @GestureState private var touching = false
+
+    func body(content: Content) -> some View {
+        content
+            .coordinateSpace(name: space)
             .contentShape(Rectangle())
+            .gesture(
+                DragGesture(minimumDistance: 0, coordinateSpace: .named(space))
+                    .updating($touching) { _, state, _ in state = true }
+                    .onChanged { selection.touchChanged(location: $0.location, translation: $0.translation, time: $0.time) }
+                    .onEnded { selection.touchEnded(location: $0.location) }
+            )
+            .onChange(of: touching) { if !$0 { selection.touchCancelled() } }
+    }
+}
+
+/// A tab drawn twice, inactive with the active layer over it fading in as the lens passes;
+/// the tab the lens lands on pops.
+private struct DuoLiquidTab<Content: View>: View {
+    @ObservedObject var selection: DuoLiquidSelection
+    let index: Int
+    let label: String
+    let selected: Bool
+    let onSelect: () -> Void
+    @ViewBuilder let content: (_ active: Bool) -> Content
+
+    var body: some View {
+        ZStack {
+            content(false)
+            content(true).opacity(selection.activeOpacity(index))
         }
-        .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
-        .accessibilityLabel(items[index].label)
+        .scaleEffect(selection.popIndex == index ? selection.pop : 1)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel(label)
+        .accessibilityAddTraits(selected ? [.isButton, .isSelected] : .isButton)
+        .accessibilityAction { onSelect() }
     }
 }
 
-/// Pink tinted capsule under the selected tab; while pressed it grows into a lens (80x54 to about 96x70).
+/// Pink tinted capsule under the selected tab.
 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?
+/// Lift of a single button, e.g. the compressed rail (RN `usePressLift`).
+private struct DuoPressLiftStyle: ButtonStyle {
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
 
     func makeBody(configuration: Configuration) -> some View {
-        configuration.label.onChange(of: configuration.isPressed) { pressed in
-            if pressed {
-                pressedIndex = index
-            } else if pressedIndex == index {
-                pressedIndex = nil
-            }
-        }
+        configuration.label
+            .scaleEffect(configuration.isPressed && !reduceMotion ? 1 + (liquidLensScaleX - 1) * 0.5 : 1)
+            .animation(liquidSpring, value: configuration.isPressed)
     }
 }
 
+/// Floating bar: the badge starts at the icon's center and grows toward the cell's end edge.
+/// Rail: it ends just inside the capsule and grows back over the icon (RN TabBarIcon `end: -3`).
+/// Capped at `badgeMaxWidth` (an overlay alone would only offer it the icon's 28pt).
 private struct DuoTabIcon: View {
     let item: BottomTabItem
     let selected: Bool
+    let badgeMaxWidth: CGFloat
+    var inRail = false
 
     @Environment(\.appTheme) private var theme
 
@@ -300,10 +382,15 @@ private struct DuoTabIcon: View {
 
     var body: some View {
         Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.hint)
-            .overlay(alignment: .topTrailing) {
+            .overlay(alignment: inRail ? .topTrailing : .topLeading) {
                 if let badgeLabel, !badgeLabel.isEmpty {
-                    Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)
-                } else if badgeLabel != nil || item.showDot {
+                    Badge(label: badgeLabel)
+                        .frame(width: max(badgeMaxWidth, 0), alignment: inRail ? .trailing : .leading)
+                        .offset(x: inRail ? railBadgeEndOffset : iconSize / 2, y: -Spacing.XS)
+                }
+            }
+            .overlay(alignment: .topTrailing) {
+                if badgeLabel?.isEmpty == true || (badgeLabel == nil && item.showDot) {
                     BadgeDot(size: .small)
                 }
             }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.168.1-beta.24'
+  s.version          = '0.168.1-beta.8'
   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.24'
+  s.version          = '0.168.1-beta.8'
   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.24",
+  "version": "0.168.1-beta.25",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},