@momo-kits/native-kits 0.168.1-beta.2-debug → 0.168.1-beta.24-debug

package/ios/Navigation/BottomSheet.swift

@@ -15,16 +15,25 @@ import SwiftUI
 
 /// Mirrors Compose's `sealed class BottomHeader` (Title / Custom).
 public struct BottomSheetHeader {
+    struct Back {
+        let icon: String
+        let action: () -> Void
+    }
+
     enum Style {
-        case title(String)
+        case title(String, back: Back?)
         case custom(() -> AnyView)
     }
 
     let style: Style
 
-    /// Mirrors `BottomHeader.Title`.
-    public static func title(_ text: String = "Bottom Sheet Title") -> BottomSheetHeader {
-        BottomSheetHeader(style: .title(text))
+    /// Mirrors `BottomHeader.Title`. `onBack` shows a back button; the sheet closes, then it runs.
+    public static func title(
+        _ text: String = "Bottom Sheet Title",
+        backIcon: String = "arrow-back",
+        onBack: (() -> Void)? = nil
+    ) -> BottomSheetHeader {
+        BottomSheetHeader(style: .title(text, back: onBack.map { Back(icon: backIcon, action: $0) }))
     }
 
     /// Mirrors `BottomHeader.Custom`.
@@ -68,6 +77,9 @@ struct BottomSheetView<Content: View>: View {
     /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
     private let closeThreshold: CGFloat = 100
 
+    private let indicatorHeight: CGFloat = 16
+    private let headerRowHeight: CGFloat = 56
+
     /// Mirrors Compose's per-term peak (0.3f). Combined with `backgroundAlpha` the
     /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
     private let maxDynamicAlpha: CGFloat = 0.3
@@ -77,7 +89,23 @@ struct BottomSheetView<Content: View>: View {
 
     private var isDuo: Bool { layout.isDuoDevice }
     // iPhone Duo inner display: center the sheet instead of spanning the width
-    private var isDuoCentered: Bool { isDuo && layout.width >= 600 }
+    // short side, as RN: the outer display stays floating in landscape (678pt wide) too
+    private var isDuoCentered: Bool { isDuo && min(layout.width, layout.height) >= 600 }
+    /// Outer display: the sheet floats Spacing.M off the side edges like system sheets, its content
+    /// stays in the safe area and its buttons move to the side bar column (HIG).
+    private var isDuoFloating: Bool { isDuo && !isDuoCentered }
+
+    private var titleBack: BottomSheetHeader.Back? {
+        if case .title(_, let back) = header.style { return back }
+        return nil
+    }
+
+    private var sideColumn: SideBarLayout? {
+        guard isDuoFloating, case .title = header.style, let sideBar = layout.sideBar,
+              sideBar.width - Spacing.M >= DuoMetrics.controlSize + Spacing.M
+        else { return nil }
+        return sideBar
+    }
 
     /// Keeps the portrait width in landscape, like system sheets.
     private var duoCenteredWidth: CGFloat {
@@ -87,18 +115,20 @@ struct BottomSheetView<Content: View>: View {
         )
     }
 
-    /// Landscape side buttons span the full height, so the content is inset; in portrait the
-    /// side status bar only covers the top corner.
+    /// The floating sheet spans the side safe area, its content stays clear of it.
     private var sideInsetLeading: CGFloat {
-        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.leading : 0
+        isDuoFloating ? max(layout.insets.leading - Spacing.M, 0) : 0
     }
 
     private var sideInsetTrailing: CGFloat {
-        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.trailing : 0
+        isDuoFloating ? max(layout.insets.trailing - Spacing.M, 0) : 0
     }
 
     private var maxHeight: CGFloat {
-        isDuo ? layout.height - max(layout.duoTopInset, Spacing.XL) : screenHeight - 90
+        guard isDuo else { return screenHeight - 90 }
+        // stays below the side status bar: unlike RN (StatusBar.pushStackEntry) nothing restyles it, so a light
+        // clock over the sheet would vanish
+        return layout.height - max(layout.duoTopInset, Spacing.XL)
     }
     private var bottomInset: CGFloat { useBottomInset ? safeAreaBottomInset() : 0 }
     /// While the keyboard is up, it already covers the home-indicator area, so it
@@ -170,19 +200,21 @@ struct BottomSheetView<Content: View>: View {
                         .frame(width: 40, height: 4)
                     Spacer().frame(height: 4)
                     headerView
-                        .frame(height: 56)
+                        .frame(height: headerRowHeight)
                         .padding(.horizontal, Spacing.M)
-                        .padding(.leading, sideInsetLeading)
-                        .padding(.trailing, sideInsetTrailing)
                 }
+                .padding(.leading, sideInsetLeading)
+                .padding(.trailing, sideInsetTrailing)
                 .frame(maxWidth: .infinity)
-                .frame(height: 72)
+                .frame(height: indicatorHeight + headerRowHeight)
                 .contentShape(Rectangle())
                 .gesture(dragGesture, including: draggable ? .all : .subviews)
 
                 Rectangle()
                     .fill(theme.colors.border.default)
                     .frame(height: 1)
+                    .padding(.leading, sideInsetLeading)
+                    .padding(.trailing, sideInsetTrailing)
 
                 content()
                     .padding(.leading, sideInsetLeading)
@@ -191,7 +223,7 @@ struct BottomSheetView<Content: View>: View {
                     .layoutPriority(-1)
 
                 if let footer {
-                    BottomSheetFooter(content: footer)
+                    BottomSheetFooter(content: footer, leadingInset: sideInsetLeading, trailingInset: sideInsetTrailing)
                 }
             }
             // The filler stays outside the cap, which shrinks by it instead: the sheet still ends at
@@ -209,27 +241,61 @@ struct BottomSheetView<Content: View>: View {
             }
         )
         .background(backgroundColor)
-        .clipShape(RoundedCorner(radius: Radius.M, corners: [.topLeft, .topRight]))
+        .overlay {
+            if let sideColumn {
+                BottomSheetSideColumn(
+                    sideBar: sideColumn,
+                    windowHeight: layout.height,
+                    topOffset: indicatorHeight + (headerRowHeight - DuoMetrics.controlSize) / 2,
+                    back: titleBack,
+                    onBack: goBack,
+                    onClose: { close() }
+                )
+            }
+        }
+        .clipShape(RoundedCorner(radius: isDuo ? Radius.XL : Radius.M, corners: [.topLeft, .topRight]))
+        .padding(.horizontal, isDuoFloating ? Spacing.M : 0)
     }
 
     @ViewBuilder
     private var headerView: some View {
         switch header.style {
-        case .title(let text):
+        case .title(let text, let back):
+            // the side column holds back and close, the row keeps only the title
+            let showsButtons = sideColumn == nil
             HStack(spacing: 0) {
-                Color.clear.frame(width: 24, height: 24)
+                if showsButtons {
+                    if let back {
+                        headerButton(icon: back.icon, accessibilityId: "btn_bottom_sheet_back") { goBack(back) }
+                    } else {
+                        Color.clear.frame(width: 24, height: 24)
+                    }
+                }
                 MomoText(text, typography: .headerDefaultBold, color: Colors.black17)
                     .frame(maxWidth: .infinity, alignment: .center)
-                Icon(source: "navigation_close", size: 24, color: Colors.black17)
-                    .frame(width: 24, height: 24)
-                    .contentShape(Rectangle())
-                    .onTapGesture { close() }
+                    .padding(.horizontal, showsButtons ? 0 : Spacing.M)
+                if showsButtons {
+                    headerButton(icon: "navigation_close", accessibilityId: "btn_bottom_sheet_close") { close() }
+                }
             }
         case .custom(let builder):
             builder()
         }
     }
 
+    private func headerButton(icon: String, accessibilityId: String, action: @escaping () -> Void) -> some View {
+        Icon(source: icon, size: 24, color: Colors.black17)
+            .frame(width: 24, height: 24)
+            .contentShape(Rectangle())
+            .onTapGesture(perform: action)
+            .accessibilityIdentifier(accessibilityId)
+    }
+
+    /// RN `leftOptions.onPressIconLeft`: the sheet closes first, then the back runs.
+    private func goBack(_ back: BottomSheetHeader.Back) {
+        close(then: back.action)
+    }
+
     // MARK: - Drag handling (mirrors Compose's detectDragGestures)
 
     private var dragGesture: some Gesture {
@@ -282,7 +348,7 @@ struct BottomSheetView<Content: View>: View {
 
     /// Mirrors Compose's `closeEvent`: slide out over 200ms, then fade the scrim
     /// out over 100ms only after the slide finishes, then dismiss.
-    private func close() {
+    private func close(then onClosed: (() -> Void)? = nil) {
         guard !isClosing else { return }
         isClosing = true
         withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
@@ -294,7 +360,67 @@ struct BottomSheetView<Content: View>: View {
             }
         }
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+            // a newer overlay replaced this one: it stays, and this sheet's back is dropped
+            guard navigator.overplay?.id == overplayId else { return }
             navigator.finishOverplayDismiss(id: overplayId)
+            onClosed?()
+        }
+    }
+}
+
+/// iPhone Duo outer display: back and close sit on the part of the sheet under the side safe area,
+/// 12pt from the strip's inner edge like the screen side bar. They follow the header row while the
+/// sheet is short and stay below the status bar cluster while it is tall.
+private struct BottomSheetSideColumn: View {
+    let sideBar: SideBarLayout
+    let windowHeight: CGFloat
+    /// Lines the controls up with the header row.
+    let topOffset: CGFloat
+    let back: BottomSheetHeader.Back?
+    let onBack: (BottomSheetHeader.Back) -> Void
+    let onClose: () -> Void
+
+    @Environment(\.appTheme) private var theme
+
+    private var isRight: Bool { sideBar.edge == .right }
+
+    private var columnHeight: CGFloat {
+        let count: CGFloat = back != nil ? 2 : 1
+        return count * DuoMetrics.controlSize + (count - 1) * Spacing.M
+    }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(isAnimated: false, isSurface: true, opacity: 1, tintColor: nil, defaultColor: theme.colors.text.default)
+    }
+
+    var body: some View {
+        GeometryReader { proxy in
+            let sheetHeight = proxy.size.height
+            // the sheet rests on the window bottom; its slide is an offset outside this layout
+            let sheetTop = windowHeight - sheetHeight
+            // clear of a camera at the bottom end of the strip when it can
+            let lowest = sheetHeight - sideBar.bottom - columnHeight
+            let top = max(min(max(sideBar.top - sheetTop, topOffset), lowest), 0)
+            VStack(alignment: isRight ? .leading : .trailing, spacing: Spacing.M) {
+                if let back {
+                    SideBarButton(
+                        icon: back.icon,
+                        headerColor: headerColor,
+                        accessibilityId: "btn_bottom_sheet_back",
+                        action: { onBack(back) }
+                    )
+                }
+                SideBarButton(
+                    icon: "navigation_close",
+                    headerColor: headerColor,
+                    accessibilityId: "btn_bottom_sheet_close",
+                    action: onClose
+                )
+            }
+            .padding(isRight ? .leading : .trailing, Spacing.M)
+            .frame(width: sideBar.width - Spacing.M, alignment: isRight ? .leading : .trailing)
+            .padding(.top, top)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .topTrailing : .topLeading)
         }
     }
 }
@@ -371,12 +497,16 @@ private struct CapHeightLayout: Layout {
 /// Mirrors Compose's `BottomSheetFooter`: a surface band with a soft shadow cast on the content.
 private struct BottomSheetFooter: View {
     let content: () -> AnyView
+    var leadingInset: CGFloat = 0
+    var trailingInset: CGFloat = 0
 
     @Environment(\.appTheme) private var theme
 
     var body: some View {
         content()
             .frame(maxWidth: .infinity)
+            .padding(.leading, leadingInset)
+            .padding(.trailing, trailingInset)
             .padding(.vertical, Spacing.S)
             .background(theme.colors.background.surface)
             .overlay(alignment: .top) {

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/Component/SnackBar.swift

@@ -57,6 +57,7 @@ struct SnackBarView: View {
     let bottomInset: CGFloat
 
     @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
 
     @State private var contentHeight: CGFloat = 0
     @State private var offsetY: CGFloat = 0
@@ -75,6 +76,9 @@ struct SnackBarView: View {
                 )
                 .offset(y: offsetY)
                 .padding(.bottom, bottomInset)
+                // iPhone Duo: clear of the side toolbar strip, like the screen content (0 elsewhere)
+                .padding(.leading, layout.insetLeft)
+                .padding(.trailing, layout.insetRight)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .ignoresSafeArea()

package/ios/Navigation/ModalScreen.swift

@@ -34,11 +34,15 @@ struct ModalScreen<Content: View>: View {
                 }
 
             content()
+                // iPhone Duo: capped so it stays a dialog on the inner display; nil leaves the size alone
+                .frame(
+                    maxWidth: layout.isDuoDevice ? layout.duoModalMaxWidth : nil,
+                    maxHeight: layout.isDuoDevice ? layout.duoModalMaxHeight : nil
+                )
                 .scaleEffect(contentScale)
                 .opacity(contentOpacity)
-                // iPhone Duo: center below the side status bar and above the home indicator
-                .padding(.top, layout.isDuoDevice ? layout.duoTopInset : 0)
-                .padding(.bottom, layout.isDuoDevice ? layout.insets.bottom : 0)
+                // iPhone Duo: center in the safe area, clear of the side toolbar strip and the home indicator
+                .padding(layout.isDuoDevice ? layout.insets : EdgeInsets())
         }
         // Full screen like RN's Modal, so asymmetric landscape insets don't shift the content sideways.
         .frame(maxWidth: .infinity, maxHeight: .infinity)