@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.20-debug

package/ios/{Application/Navigation/Overplay → Navigation}/BottomSheet.swift

@@ -2,7 +2,7 @@
 //  BottomSheet.swift
 //  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `BottomSheet` (navigation/BottomSheet.kt).
+//  SwiftUI mirror of Compose's `navigation/BottomSheet.kt`.
 //  A sheet that slides up from the bottom over a dimmed scrim, with a drag
 //  handle, a header (title or custom), a divider and the content body.
 //  Dragging down past a threshold (or tapping the scrim) dismisses it.
@@ -35,16 +35,20 @@ public struct BottomSheetHeader {
 
 // MARK: - Bottom sheet view
 
-@available(iOS 16.0, *)
 struct BottomSheetView<Content: View>: View {
     let header: BottomSheetHeader
     let isSurface: Bool
     let barrierDismissible: Bool
+    var draggable: Bool = true
+    /// Keeps the content above the home indicator (Compose `AppNavigationBar` padding).
+    var useBottomInset: Bool = true
+    var footer: (() -> AnyView)? = nil
     let content: () -> Content
 
     @EnvironmentObject private var navigator: Navigator
     @Environment(\.appTheme) private var theme
     @Environment(\.applicationEnvironment) private var appEnv
+    @Environment(\.screenLayout) private var layout
 
     /// Vertical translation of the sheet; starts off-screen and animates to 0.
     @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
@@ -66,8 +70,36 @@ struct BottomSheetView<Content: View>: View {
     /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
     private let maxDynamicAlpha: CGFloat = 0.3
 
-    private var screenHeight: CGFloat { UIScreen.main.bounds.height }
-    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    // UIScreen stays on the outer display on iPhone Duo, even when unfolded
+    private var screenHeight: CGFloat { isDuo ? layout.height : UIScreen.main.bounds.height }
+
+    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 }
+
+    /// Keeps the portrait width in landscape, like system sheets.
+    private var duoCenteredWidth: CGFloat {
+        min(
+            min(layout.width, layout.height) - Spacing.L * 2,
+            layout.width - max(layout.insets.leading, layout.insets.trailing, Spacing.L) * 2
+        )
+    }
+
+    /// Landscape side buttons span the full height, so the content is inset; in portrait the
+    /// side status bar only covers the top corner.
+    private var sideInsetLeading: CGFloat {
+        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.leading : 0
+    }
+
+    private var sideInsetTrailing: CGFloat {
+        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.trailing : 0
+    }
+
+    /// The keyboard filler is part of the sheet, so capping the sheet shrinks the content by it.
+    private var maxHeight: CGFloat {
+        isDuo ? layout.height - max(layout.duoTopInset, Spacing.XL) : screenHeight - 90
+    }
+    private var bottomInset: CGFloat { useBottomInset ? safeAreaBottomInset() : 0 }
     /// While the keyboard is up, it already covers the home-indicator area, so it
     /// replaces (rather than adds to) the usual bottom-inset filler.
     private var effectiveBottomInset: CGFloat { keyboardHeight > 0 ? keyboardHeight : bottomInset }
@@ -110,7 +142,7 @@ struct BottomSheetView<Content: View>: View {
         .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
             guard let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
             withAnimation(.easeOut(duration: 0.25)) {
-                keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+                keyboardHeight = screenHeight - endFrame.origin.y
             }
         }
         .onAppear {
@@ -138,23 +170,34 @@ struct BottomSheetView<Content: View>: View {
                 headerView
                     .frame(height: 56)
                     .padding(.horizontal, Spacing.M)
+                    .padding(.leading, sideInsetLeading)
+                    .padding(.trailing, sideInsetTrailing)
             }
             .frame(maxWidth: .infinity)
             .frame(height: 72)
             .contentShape(Rectangle())
-            .gesture(dragGesture)
+            .gesture(dragGesture, including: draggable ? .all : .subviews)
 
             Rectangle()
                 .fill(theme.colors.border.default)
                 .frame(height: 1)
 
             content()
+                .padding(.leading, sideInsetLeading)
+                .padding(.trailing, sideInsetTrailing)
+                // a tall sheet keeps its header (and footer) and gives the content what is left
+                .layoutPriority(-1)
 
-            backgroundColor
+            if let footer {
+                BottomSheetFooter(content: footer)
+            }
+
+            (footer != nil ? theme.colors.background.surface : backgroundColor)
                 .frame(height: effectiveBottomInset)
         }
-        .frame(maxWidth: .infinity)
-        .frame(alignment: .bottom)
+        .frame(maxWidth: isDuoCentered ? duoCenteredWidth : .infinity)
+        .modifier(CapHeight(maxHeight: maxHeight))
+        .clipped()
         .background(
             GeometryReader { geo in
                 Color.clear.onAppear { sheetHeight = geo.size.height }
@@ -247,7 +290,83 @@ struct BottomSheetView<Content: View>: View {
     }
 }
 
+/// Compose's `heightIn(max:)`. `.frame(maxHeight:)` grows to the cap whenever the proposal is
+/// larger, leaving a gap above the header; this sizes the sheet to its content and only caps it
+/// when taller.
+private struct CapHeight: ViewModifier {
+    let maxHeight: CGFloat
+
+    func body(content: Content) -> some View {
+        if #available(iOS 16.0, *) {
+            CapHeightLayout(maxHeight: maxHeight) { content }
+        } else {
+            content.modifier(CapHeightFallback(maxHeight: maxHeight))
+        }
+    }
+}
+
+/// iOS 15 has no `Layout`: the sheet hugs its ideal height until that outgrows the cap, then is
+/// held at the cap (the ideal height can't be read again without a second copy of the content).
+private struct CapHeightFallback: ViewModifier {
+    let maxHeight: CGFloat
+    @State private var capped = false
+
+    func body(content: Content) -> some View {
+        content
+            // both modifiers stay in place whatever `capped` is, so the content keeps its identity
+            .fixedSize(horizontal: false, vertical: !capped)
+            .background(
+                GeometryReader { proxy in
+                    Color.clear
+                        .onAppear { cap(proxy.size.height) }
+                        .onChange(of: proxy.size.height) { cap($0) }
+                }
+            )
+            .frame(height: capped ? maxHeight : nil, alignment: .top)
+    }
+
+    private func cap(_ height: CGFloat) {
+        if !capped, height > maxHeight { capped = true }
+    }
+}
+
 @available(iOS 16.0, *)
+private struct CapHeightLayout: Layout {
+    let maxHeight: CGFloat
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        guard let subview = subviews.first else { return .zero }
+        let cap = min(maxHeight, proposal.height ?? .infinity)
+        // ideal first: a scroll view would otherwise fill whatever height it is offered
+        let ideal = subview.sizeThatFits(ProposedViewSize(width: proposal.width, height: nil))
+        return subview.sizeThatFits(ProposedViewSize(width: proposal.width, height: min(ideal.height, cap)))
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        subviews.first?.place(at: bounds.origin, proposal: ProposedViewSize(bounds.size))
+    }
+}
+
+/// Mirrors Compose's `BottomSheetFooter`: a surface band with a soft shadow cast on the content.
+private struct BottomSheetFooter: View {
+    let content: () -> AnyView
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        content()
+            .frame(maxWidth: .infinity)
+            .padding(.vertical, Spacing.S)
+            .background(theme.colors.background.surface)
+            .overlay(alignment: .top) {
+                LinearGradient(colors: [.clear, Color.black.opacity(0.05)], startPoint: .top, endPoint: .bottom)
+                    .frame(height: 6)
+                    .offset(y: -6)
+                    .allowsHitTesting(false)
+            }
+    }
+}
+
 private func safeAreaBottomInset() -> CGFloat {
     let bottomInset = UIApplication.shared.connectedScenes
         .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }

package/ios/Navigation/BottomTab/BottomTab.swift

@@ -0,0 +1,185 @@
+//
+//  BottomTab.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/bottomtab/BottomTab.kt`: tabbed screens, each in
+//  `StackScreen` chrome built from its own `Navigation`, over a `BottomTabBar` (or the iPhone Duo
+//  rail / floating bar). Switching tabs cross-fades + scales the content.
+//
+
+import SwiftUI
+
+public struct BottomTab: View {
+    private let items: [BottomTabItem]
+    private let floatingButton: BottomTabFloatingButton?
+    private let compressionBehavior: DuoBarCompressionBehavior
+
+    @EnvironmentObject private var navigator: Navigator
+    /// The screen hosting the tabs (Compose's `LocalNavigation` in BottomTab).
+    @OptionalEnvironmentObject private var hostNavigation: Navigation?
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+    @StateObject private var tabNavigations = TabNavigations()
+    @State private var selectedIndex: Int = 0
+    @State private var toolbarHeight = DuoBarCompression.defaultToolbarHeight
+    @State private var expandedBar: DuoBar?
+    @State private var openedBar: DuoBar?
+
+    /// `compressionBehavior`: on iPhone Duo, when the side bar can't hold both bars, which one
+    /// starts compressed; tapping the compressed one swaps them.
+    public init(
+        items: [BottomTabItem],
+        floatingButton: BottomTabFloatingButton? = nil,
+        compressionBehavior: DuoBarCompressionBehavior = .toolbar
+    ) {
+        self.items = items
+        self.floatingButton = floatingButton
+        self.compressionBehavior = compressionBehavior
+    }
+
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    // the Duo bars overlay the content or sit in the side strip, so only the home indicator is kept clear
+    private var reservedBottom: CGFloat {
+        layout.isIPhoneDuo ? layout.insets.bottom : BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S
+    }
+
+    private var compression: DuoBarCompression {
+        DuoBarCompression.resolve(
+            layout: layout,
+            tabCount: items.count,
+            hasQr: floatingButton != nil,
+            toolbarHeight: toolbarHeight,
+            // 'toolbar' compression keeps the tab bar whole until the toolbar is tapped
+            expanded: Binding(
+                get: { expandedBar ?? (compressionBehavior == .toolbar ? .tabBar : .toolbar) },
+                set: { expandedBar = $0 }
+            ),
+            opened: $openedBar,
+            setToolbarHeight: { height in
+                if toolbarHeight != height { toolbarHeight = height }
+            }
+        )
+    }
+
+    private func duoInsets(_ compression: DuoBarCompression) -> DuoTabBarInsets {
+        layout.duoTabBarInsets(
+            itemCount: items.count,
+            hasFloatingButton: floatingButton != nil,
+            tabBarCompressed: compression.tabBarCompressed
+        )
+    }
+
+    public var body: some View {
+        let compression = compression
+        ZStack(alignment: .bottom) {
+            // Tab content area, inset above the bar.
+            ZStack {
+                ForEach(items.indices, id: \.self) { index in
+                    if index == selectedIndex {
+                        tabScreen(for: index)
+                            .transition(.scale(scale: 0.97).combined(with: .opacity))
+                    }
+                }
+            }
+            .padding(.bottom, reservedBottom)
+            .environment(\.duoTabBarInsets, duoInsets(compression))
+            .environment(\.duoBarCompression, compression)
+            .animation(.easeInOut(duration: 0.2), value: selectedIndex)
+
+            if layout.isIPhoneDuo {
+                DuoTabBar(
+                    items: items,
+                    floatingButton: floatingButton,
+                    selectedIndex: selectedIndex,
+                    onTabSelected: selectTab,
+                    compression: compression
+                )
+            } else {
+                // Tab bar + home-indicator filler.
+                VStack(spacing: 0) {
+                    BottomTabBar(
+                        items: items,
+                        floatingButton: floatingButton,
+                        selectedIndex: selectedIndex,
+                        onTabSelected: selectTab
+                    )
+                    theme.colors.background.surface
+                        .frame(height: bottomInset + Spacing.S)
+                        .ignoresSafeArea(edges: .horizontal)
+                }
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea(edges: .bottom)
+        .preference(key: IsBottomTabRootKey.self, value: true)
+        .onAppear {
+            hostNavigation?.setOptions {
+                $0.headerType = .none
+                $0.useAvoidKeyboard = false
+            }
+            updateTabBack()
+        }
+        .onChange(of: selectedIndex) { _ in updateTabBack() }
+        .onDisappear {
+            // both live outside this view
+            navigator.tabBackHandler = nil
+            HostBackGestureBridge.shared.shouldUseFloatingArrowBack = false
+        }
+    }
+
+    private func selectTab(_ index: Int) {
+        if index != selectedIndex { selectedIndex = index }
+    }
+
+    /// Back off the first tab returns to it; the host shows its floating arrow there (RN parity).
+    private func updateTabBack() {
+        let isFirstTab = selectedIndex == 0
+        HostBackGestureBridge.shared.shouldUseFloatingArrowBack = !isFirstTab
+        navigator.tabBackHandler = isFirstTab ? nil : (hostNavigation?.id ?? -1, { selectedIndex = 0 })
+    }
+
+    private func tabScreen(for index: Int) -> some View {
+        let item = items[index]
+        return TabScreenHost(
+            navigation: tabNavigations.navigation(for: index, options: item.options),
+            screen: item.screen,
+            goBack: { navigator.onBackSafe() }
+        )
+    }
+}
+
+/// Keeps each tab's `Navigation`, so options a tab set at runtime survive switching away.
+private final class TabNavigations: ObservableObject {
+    private var navigations: [Int: Navigation] = [:]
+
+    func navigation(for index: Int, options: NavigationOptions?) -> Navigation {
+        if let navigation = navigations[index] { return navigation }
+        let navigation = Navigation(bottomTabIndex: index, options: options)
+        navigations[index] = navigation
+        return navigation
+    }
+}
+
+private struct TabScreenHost: View {
+    @ObservedObject var navigation: Navigation
+    let screen: () -> AnyView
+    let goBack: () -> Void
+
+    var body: some View {
+        OptionsStackScreen(
+            options: navigation.options,
+            screenName: navigation.options.screenName ?? "",
+            goBack: goBack,
+            content: screen
+        )
+        .environmentObject(navigation)
+    }
+}
+
+/// Bottom safe-area inset (home indicator).
+private func safeAreaBottomInset() -> CGFloat {
+    let bottomInset = UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+    return min(bottomInset, 21)
+}

package/ios/{Application/Navigation → Navigation}/BottomTab/BottomTabBar.swift

@@ -2,7 +2,7 @@
 //  BottomTabBar.swift
 //  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `BottomTabBar` (navigation/bottomtab/BottomTabBar.kt).
+//  SwiftUI mirror of Compose's `navigation/bottomtab/BottomTabBar.kt`.
 //  Renders the row of tab items, an animated selection indicator, a top shadow,
 //  badges/dots, and an optional center floating button (with the curved notch).
 //
@@ -65,7 +65,11 @@ struct BottomTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
 
-    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+
+    // the bar sits between the side safe areas
+    private var screenWidth: CGFloat { layout.width - layout.insets.leading - layout.insets.trailing }
     private var mid: Int { items.count / 2 }
 
     private var tabWidth: CGFloat {
@@ -95,11 +99,11 @@ struct BottomTabBar: View {
             }
             .frame(maxWidth: .infinity)
             .frame(height: BOTTOM_TAB_BAR_HEIGHT)
-            .background(Colors.black01)
+            .background(theme.colors.background.surface.ignoresSafeArea(edges: .horizontal))
 
             // Animated selection indicator.
             RoundedRectangle(cornerRadius: 2)
-                .fill(Colors.primary)
+                .fill(theme.colors.primary)
                 .frame(width: 44, height: 2)
                 .offset(x: indicatorOffset, y: -BOTTOM_TAB_BAR_HEIGHT + 2)
                 .animation(.easeInOut(duration: 0.25), value: selectedIndex)
@@ -140,7 +144,9 @@ private struct TabBarItem: View {
     let selected: Bool
     let onClick: () -> Void
 
-    private var tintColor: Color { selected ? Colors.primary : Colors.black10 }
+    @Environment(\.appTheme) private var theme
+
+    private var tintColor: Color { selected ? theme.colors.primary : theme.colors.text.hint }
 
     /// Mirrors Compose's `formatLabel`: hide a badge that is the number "0".
     private var badgeLabel: String? {
@@ -192,18 +198,20 @@ private struct TabBarItem: View {
 private struct CenterFloatingButton: View {
     let data: BottomTabFloatingButton
 
+    @Environment(\.appTheme) private var theme
+
     var body: some View {
         VStack(spacing: 0) {
             CurvedContainer()
             Circle()
-                .fill(Colors.primary)
+                .fill(theme.colors.primary)
                 .frame(width: 48, height: 48)
                 .overlay(Icon(source: data.icon, size: 28, color: .white))
             Spacer().frame(height: 4)
             MomoText(data.label, typography: .labelXsMedium, color: Colors.black01, textAlign: .center, maxLines: 1)
                 .frame(maxWidth: .infinity)
                 .frame(height: 14)
-                .background(Colors.primary)
+                .background(theme.colors.primary)
                 .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
         }
         .frame(width: bottomTabFloatingButtonWidth)

package/ios/Navigation/BottomTab/DuoBarCompression.swift

@@ -0,0 +1,105 @@
+//
+//  DuoBarCompression.swift
+//  MoMoUIKits
+//
+//  Port of RN `BottomTab/DuoBarCompression.tsx` (HIG, Designing for iPhone Duo: Vertical controls):
+//  keeps the side bar's toolbar and tab bar clear of each other.
+//
+
+import SwiftUI
+
+/// iPhone Duo: which side bar bar starts compressed when the strip cannot hold both whole.
+public enum DuoBarCompressionBehavior {
+    case toolbar, tabBar
+}
+
+enum DuoBar {
+    case toolbar, tabBar
+}
+
+struct DuoBarCompression {
+    var toolbarCompressed = false
+    var tabBarCompressed = false
+    /// The open rail needs the toolbar button slot too: only Back stays.
+    var toolbarHidden = false
+    var expandToolbar: () -> Void = {}
+    var expandTabBar: () -> Void = {}
+    /// A rail opened from the compressed state closes once a tab is picked.
+    var onTabSelected: () -> Void = {}
+    /// Side bar toolkits report their full height so the tab bar knows what is left.
+    var setToolbarHeight: (CGFloat) -> Void = { _ in }
+
+    /// Space kept between the top and the bottom groups (HIG Vertical controls).
+    static let groupGap = Spacing.M
+    /// Back, then the right toolkit: help + home capsule.
+    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
+    /// - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
+    ///   again once a tab is picked)
+    static func resolve(
+        layout: ScreenLayout,
+        tabCount: Int,
+        hasQr: Bool,
+        toolbarHeight: CGFloat,
+        expanded: Binding<DuoBar>,
+        opened: Binding<DuoBar?>,
+        setToolbarHeight: @escaping (CGFloat) -> Void
+    ) -> DuoBarCompression {
+        guard let sideBar = layout.sideBar else { return DuoBarCompression() }
+        let room = layout.height - sideBar.bottom - sideBar.top - groupGap
+        let tabBar = duoRailHeight(itemCount: tabCount, hasQr: hasQr)
+        let compressedTabBar = duoRailHeight(itemCount: 1, hasQr: hasQr, compressed: true)
+        func fits(_ toolbar: CGFloat, _ tabs: CGFloat) -> Bool { toolbar + tabs <= room }
+
+        if fits(toolbarHeight, tabBar) {
+            return DuoBarCompression(setToolbarHeight: setToolbarHeight)
+        }
+        if fits(compressedToolbarHeight, tabBar) && fits(toolbarHeight, compressedTabBar) {
+            return DuoBarCompression(
+                toolbarCompressed: expanded.wrappedValue == .tabBar,
+                tabBarCompressed: expanded.wrappedValue == .toolbar,
+                expandToolbar: { expanded.wrappedValue = .toolbar },
+                expandTabBar: { expanded.wrappedValue = .tabBar },
+                setToolbarHeight: setToolbarHeight
+            )
+        }
+
+        let expandToolbar = { opened.wrappedValue = .toolbar }
+        let expandTabBar = { opened.wrappedValue = .tabBar }
+        if opened.wrappedValue == .tabBar && fits(backOnlyHeight, tabBar) {
+            return DuoBarCompression(
+                toolbarCompressed: true,
+                tabBarCompressed: false,
+                toolbarHidden: true,
+                expandToolbar: expandToolbar,
+                expandTabBar: expandTabBar,
+                onTabSelected: { opened.wrappedValue = nil },
+                setToolbarHeight: setToolbarHeight
+            )
+        }
+        return DuoBarCompression(
+            toolbarCompressed: opened.wrappedValue != .toolbar,
+            tabBarCompressed: true,
+            expandToolbar: expandToolbar,
+            expandTabBar: expandTabBar,
+            setToolbarHeight: setToolbarHeight
+        )
+    }
+}
+
+private struct DuoBarCompressionKey: EnvironmentKey {
+    static let defaultValue = DuoBarCompression()
+}
+
+extension EnvironmentValues {
+    var duoBarCompression: DuoBarCompression {
+        get { self[DuoBarCompressionKey.self] }
+        set { self[DuoBarCompressionKey.self] = newValue }
+    }
+}