@momo-kits/native-kits 0.167.1-sizescale.2-debug → 0.168.1-beta.1-debug

package/ios/Navigation/StackScreen.swift

@@ -0,0 +1,934 @@
+//
+//  StackScreen.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/StackScreen.kt`: header layer, scrollable content
+//  (`StackScreenContent`), animated search, floating button, footer (`NavigationFooter`) and the
+//  iPhone Duo side bar.
+//
+
+import SwiftUI
+
+public struct StackScreen<Content: View>: View {
+    // MARK: - Properties
+
+    var backgroundColor: Color?
+    // AI-GENERATED START: custom screen background view (Compose backgroundComponent)
+    var background: (() -> AnyView)?
+    // AI-GENERATED END: custom screen background view (Compose backgroundComponent)
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+    var tintColor: Color? = Colors.black17
+    var isBack: Bool
+    var headerType: HeaderType
+    var useAnimated: Bool = false
+    var verticalAlignment: VerticalAlignment
+    var horizontalAlignment: HorizontalAlignment
+    var title: String
+    var headerTitle: HeaderTitle?
+    var titlePosition: TitlePosition
+    var goBack: (() -> Void)?
+    var scrollable: Bool
+    var scrollToTopCallback: (() -> Void)?
+    var onContentLayout: ((CGRect) -> Void)?
+    var useAvoidKeyboard: Bool
+    var keyboardShouldPersistTaps: Bool
+    var footer: (() -> AnyView)?
+    var footerTransparent: Bool
+    var footerUseMargin: Bool
+    var headerRight: (() -> any View)? = { HeaderRight() }
+    var animatedHeader: AnimatedHeader? = nil
+    var layoutOffset: CGFloat
+    var inputSearchProps: InputSearchProps?
+    var fabProps: FabProps?
+    var screenName: String = ""
+    var content: () -> Content
+
+    public init(
+        backgroundColor: Color? = nil,
+        // AI-GENERATED START: custom screen background view (Compose backgroundComponent)
+        background: (() -> AnyView)? = nil,
+        // AI-GENERATED END: custom screen background view (Compose backgroundComponent)
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false,
+        tintColor: Color = Colors.black17,
+        isBack: Bool = true,
+        headerType: HeaderType = .default,
+        useAnimated: Bool = false,
+        verticalAlignment: VerticalAlignment = .top,
+        horizontalAlignment: HorizontalAlignment = .leading,
+        title: String = "Stack",
+        headerTitle: HeaderTitle? = nil,
+        titlePosition: TitlePosition = .left,
+        goBack: (() -> Void)? = nil,
+        scrollable: Bool = true,
+        scrollToTopCallback: (() -> Void)? = nil,
+        onContentLayout: ((CGRect) -> Void)? = nil,
+        useAvoidKeyboard: Bool = true,
+        keyboardShouldPersistTaps: Bool = false,
+        footer: (() -> AnyView)? = nil,
+        footerTransparent: Bool = false,
+        footerUseMargin: Bool = true,
+        headerRight: (() -> any View)? = { HeaderRight() },
+        animatedHeader: AnimatedHeader? = nil,
+        layoutOffset: CGFloat = 56,
+        inputSearchProps: InputSearchProps? = nil,
+        fabProps: FabProps? = nil,
+        screenName: String = "",
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.backgroundColor = backgroundColor
+        // AI-GENERATED START: custom screen background view (Compose backgroundComponent)
+        self.background = background
+        // AI-GENERATED END: custom screen background view (Compose backgroundComponent)
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+        self.tintColor = tintColor
+        self.isBack = isBack
+        self.headerType = headerType
+        self.useAnimated = useAnimated
+        self.verticalAlignment = verticalAlignment
+        self.horizontalAlignment = horizontalAlignment
+        self.title = title
+        self.headerTitle = headerTitle
+        self.titlePosition = titlePosition
+        self.goBack = goBack
+        self.scrollable = scrollable
+        self.scrollToTopCallback = scrollToTopCallback
+        self.onContentLayout = onContentLayout
+        self.useAvoidKeyboard = useAvoidKeyboard
+        self.keyboardShouldPersistTaps = keyboardShouldPersistTaps
+        self.footer = footer
+        self.footerTransparent = footerTransparent
+        self.footerUseMargin = footerUseMargin
+        self.headerRight = headerRight
+        self.animatedHeader = animatedHeader
+        self.layoutOffset = layoutOffset
+        self.inputSearchProps = inputSearchProps
+        self.fabProps = fabProps
+        self.screenName = screenName
+        self.content = content
+    }
+
+    @State private var scrollOffset: CGFloat = 0
+    @State private var keyboardHeight: CGFloat = 0
+    @State private var headerRightWidth: CGFloat = 0
+    @State private var isBottomTabRoot: Bool = false
+    @State private var headerHide: CGFloat = 0
+    @State private var lastScrollOffset: CGFloat = 0
+    @State private var footerHeight: CGFloat = 0
+
+    @Environment(\.applicationEnvironment) private var appEnv
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.duoTabBarInsets) private var duoTabBarInsets
+    @Environment(\.duoBarCompression) private var compression
+    @Environment(\.appTheme) private var theme
+    @OptionalEnvironmentObject private var navigation: Navigation?
+
+    @State private var tracking: Task<Void, Never>?
+
+    /// Compose's `headerOpacity()`: 0 over a banner or transparent header, 1 once the bar is opaque.
+    private var opacity: CGFloat {
+        headerOpacity(
+            scrollOffset: scrollOffset,
+            isAnimated: animatedHeader != nil,
+            layoutOffset: layoutOffset,
+            transparent: headerTransparent
+        )
+    }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(
+            isAnimated: animatedHeader != nil,
+            isSurface: animatedHeader?.isSurface ?? true,
+            opacity: opacity,
+            tintColor: tintColor
+        )
+    }
+
+    // MARK: - Search header (Compose's getInputSearchType / SearchAnimated)
+
+    private enum InputSearchType { case none, header, animated }
+
+    private var inputSearchType: InputSearchType {
+        guard inputSearchProps != nil, headerType != .none else { return .none }
+        return useAnimated ? .animated : .header
+    }
+
+    private var toolkit: (data: HeaderRightData?, tintColor: Color?)? { toolkitHeaderRight(headerRight) }
+
+    private var showsSideBar: Bool {
+        layout.sideBar != nil && headerType != .none && !isBottomTabRoot && (goBack != nil || toolkit != nil)
+    }
+
+    /// `HeaderSideBar` reports its own height; an empty column reports 0, or the rail keeps the previous tab's.
+    private func reportEmptySideBar() {
+        if layout.sideBar != nil && !showsSideBar { compression.setToolbarHeight(0) }
+    }
+
+    /// iPhone Duo: content scrolls under a glass header instead of starting below it.
+    private var useDuoGlass: Bool {
+        layout.sideBar != nil && headerType != .none && animatedHeader == nil
+            && inputSearchProps == nil && !headerTransparent && !fullScreenContent
+    }
+
+    /// iPhone Duo: the header leaves with the content and slides back in on a reverse scroll
+    /// (RN DuoQuickReturnHeader). The side bar is drawn apart from the header, so it stays put.
+    private var useQuickReturn: Bool {
+        layout.sideBar != nil && scrollable && (useDuoGlass || animatedHeader != nil)
+    }
+
+    private func updateHeaderHide(_ offset: CGFloat) {
+        let delta = offset - lastScrollOffset
+        lastScrollOffset = offset
+        guard useQuickReturn, offset > 0 else {
+            if headerHide != 0 { headerHide = 0 }
+            return
+        }
+        headerHide = min(max(headerHide + delta, 0), layout.headerHeight)
+    }
+
+    /// A half-shown header settles fully in or out once the scroll comes to rest.
+    private func settleHeader() {
+        let height = layout.headerHeight
+        // within the first header height the header still sits on the content
+        guard useQuickReturn, scrollOffset >= height, headerHide > 0, headerHide < height else { return }
+        withAnimation(.easeOut(duration: 0.2)) {
+            headerHide = headerHide > height / 2 ? height : 0
+        }
+    }
+
+    /// Compose snaps the animated search fully in or out when the scroll stops.
+    private var searchSnapDistance: CGFloat? { inputSearchType == .animated ? HEADER_HEIGHT : nil }
+
+    private var keyboardSize: CGFloat { useAvoidKeyboard ? max(keyboardHeight, 0) : 0 }
+
+    /// What the footer, tab bar or home indicator takes from the bottom of the window, gap included.
+    private var bottomBarsHeight: CGFloat {
+        let bars = footer != nil ? footerHeight + NavigationFooter.safeAreaBottom : NavigationFooter.navigationBarInset
+        return max(bars + Spacing.XL, duoTabBarInsets.sideBarReserve)
+    }
+
+    /// Top of the footer (or the navigation bar) from the window bottom; snack bars sit above it.
+    private var bottomObstruction: CGFloat {
+        guard footer != nil else { return keyboardSize + NavigationFooter.navigationBarInset }
+        return footerHeight + NavigationFooter.safeAreaBottom - NavigationFooter.verticalOffset(keyboardSize: keyboardSize)
+    }
+
+    private func reportBottomObstruction() {
+        // bottom tab children leave overplays to the screen hosting the tabs, as in Compose
+        guard let navigation, navigation.bottomTabIndex == -1 else { return }
+        navigation.bottomObstruction = bottomObstruction
+    }
+
+    /// Keyboard frames are in screen coordinates; UIScreen stays on the outer display on iPhone Duo.
+    private var keyboardReferenceHeight: CGFloat {
+        layout.isIPhoneDuo ? layout.height : UIScreen.main.bounds.height
+    }
+
+    /// Room for the animated search below the header at scroll 0; shrinks as the bar slides up.
+    private var animatedSearchInset: CGFloat {
+        guard inputSearchType == .animated else { return 0 }
+        let scroll = max(scrollOffset, 0)
+        return min(max(HEADER_HEIGHT - scroll, 0), HEADER_HEIGHT)
+    }
+
+    /// Title fades out as the animated search bar rises into the header.
+    private var titleOpacity: CGFloat {
+        guard inputSearchType == .animated else { return 1 }
+        let scroll = max(scrollOffset, 0)
+        return 1 - min(max(scroll / HEADER_HEIGHT, 0), 1)
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        GeometryReader { _ in
+            ZStack(alignment: .top) {
+                // AI-GENERATED START: custom screen background view (Compose backgroundComponent)
+                Group {
+                    if let background {
+                        background()
+                    } else {
+                        backgroundColor ?? theme.colors.background.default
+                    }
+                }
+                .edgesIgnoringSafeArea(.all)
+                // AI-GENERATED END: custom screen background view (Compose backgroundComponent)
+
+                VStack(spacing: 0) {
+                    ZStack(alignment: fabProps?.position == .center ? .bottom : .bottomTrailing) {
+                        VStack(alignment: horizontalAlignment, spacing: 0) {
+                            headerAndContent
+                        }
+
+                        FloatingContent(
+                            fabProps: fabProps,
+                            keyboardSize: keyboardSize,
+                            hasFooter: footer != nil,
+                            scrollOffset: scrollOffset
+                        )
+                        .padding(.bottom, footer == nil ? duoTabBarInsets.overlay : 0)
+                    }
+
+                    NavigationFooter(
+                        footerComponent: footer,
+                        keyboardSize: keyboardSize,
+                        transparent: footerTransparent,
+                        useMargin: footerUseMargin
+                    )
+                    .padding(.bottom, duoTabBarInsets.overlay)
+                    .background(
+                        GeometryReader { proxy in
+                            Color.clear
+                                .onAppear { footerHeight = proxy.size.height }
+                                .onChange(of: proxy.size.height) { footerHeight = $0 }
+                        }
+                    )
+                }
+
+                if inputSearchType == .animated, let props = inputSearchProps {
+                    SearchAnimatedHeader(
+                        props: props,
+                        scrollOffset: scrollOffset,
+                        hiddenBack: goBack == nil,
+                        hasHeaderRight: headerRight != nil,
+                        headerRightWidth: headerRightWidth,
+                        useSideBar: layout.sideBar != nil,
+                        hasToolkit: toolkit != nil
+                    )
+                }
+
+                if showsSideBar, let sideBar = layout.sideBar {
+                    HeaderSideBar(
+                        sideBar: sideBar,
+                        goBack: goBack,
+                        toolkit: toolkit,
+                        headerColor: headerColor,
+                        bottomInset: bottomBarsHeight
+                    )
+                }
+            }
+            .ignoresSafeArea(.keyboard, edges: .bottom)
+            .onChange(of: scrollOffset) { updateHeaderHide($0) }
+            .onAppear { reportEmptySideBar() }
+            .onChange(of: showsSideBar) { _ in reportEmptySideBar() }
+            .onPreferenceChange(HeaderRightWidthKey.self) { width in
+                if headerRightWidth != width { headerRightWidth = width }
+            }
+            .onPreferenceChange(IsBottomTabRootKey.self) { isRoot in
+                if isBottomTabRoot != isRoot { isBottomTabRoot = isRoot }
+            }
+            .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
+                guard useAvoidKeyboard,
+                      let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
+                withAnimation(.easeOut(duration: 0.25)) {
+                    keyboardHeight = keyboardReferenceHeight - endFrame.origin.y
+                }
+            }
+            // Compose's `hideKeyboardOnTap()`: simultaneous, so taps still reach buttons and fields.
+            .modifier(HideKeyboardOnTap(enabled: keyboardShouldPersistTaps))
+        }
+        .onAppear(perform: reportBottomObstruction)
+        .onChange(of: bottomObstruction) { _ in reportBottomObstruction() }
+        .onAppear(perform: startTracking)
+        .onChange(of: screenName) { _ in startTracking() }
+        .onDisappear { tracking?.cancel() }
+    }
+
+    /// Compose tracks from a `LaunchedEffect` with `remember`ed state, so every visit — first show, a
+    /// pop back, a tab switch — starts over with fresh state. A covered hosting controller keeps its
+    /// `@State` and doesn't re-run `.task`, so the run hangs off appear / disappear instead.
+    private func startTracking() {
+        tracking?.cancel()
+        let state = ScreenTrackingState()
+        let action = ScreenTracker.getLastScreenName() != nil ? "push" : "back"
+        let maxApi = appEnv.maxApi
+        let context = appEnv.applicationContext
+        let screenName = screenName
+        tracking = Task { @MainActor in
+            ScreenTracker.trackScreenNavigated(
+                maxApi: maxApi,
+                context: context,
+                screenName: screenName,
+                action: action,
+                state: state
+            )
+            do {
+                try await Task.sleep(nanoseconds: 2_000_000_000)
+            } catch {
+                return
+            }
+            let loadTime = ScreenTracker.now() - state.time
+            ScreenTracker.trackScreenDisplayed(
+                maxApi: maxApi,
+                context: context,
+                screenName: screenName,
+                duration: loadTime,
+                state: state
+            )
+            let interactionTime = ScreenTracker.now() - state.time
+            ScreenTracker.trackScreenInteracted(
+                maxApi: maxApi,
+                context: context,
+                screenName: screenName,
+                duration: interactionTime - loadTime,
+                totalDuration: interactionTime,
+                state: state
+            )
+        }
+    }
+
+    // MARK: - Header + content layer
+
+    @ViewBuilder
+    private var headerAndContent: some View {
+        if let animatedHeader = animatedHeader {
+            // The banner is the top of the scroll content and the body overlaps its lower part;
+            // the bar fades in over it (Compose's ScreenContent for HeaderType.Animated).
+            ZStack(alignment: .top) {
+                StackScreenContent(
+                    scrollable: scrollable,
+                    scrollOffset: $scrollOffset,
+                    scrollToTopCallback: scrollToTopCallback,
+                    animatedSearchInset: animatedSearchInset,
+                    bottomInset: duoTabBarInsets.overlay,
+                    snapDistance: searchSnapDistance,
+                    onScrollIdle: settleHeader,
+                    content: { animatedHeroBody(animatedHeader) }
+                )
+                .edgesIgnoringSafeArea(.all)
+
+                header
+                    .background(alignment: .top) {
+                        Group {
+                            if layout.sideBar != nil {
+                                // glass shows once the banner has scrolled under the header
+                                Color.clear.modifier(DuoBarMaterial(
+                                    shape: Rectangle(),
+                                    visible: scrollOffset > heroGlassStart(animatedHeader)
+                                ))
+                            } else {
+                                HeaderBarBackground(opacity: opacity)
+                            }
+                        }
+                        .edgesIgnoringSafeArea([.top, .horizontal])
+                    }
+                    .offset(y: -headerHide)
+                    .zIndex(100)
+            }
+        } else if headerTransparent && fullScreenContent {
+            // Compose's HeaderType.Transparent(isFullScreenContent): content starts under a clear bar
+            ZStack(alignment: .top) {
+                header
+                    .zIndex(100)
+
+                StackScreenContent(
+                    scrollable: scrollable,
+                    scrollOffset: $scrollOffset,
+                    scrollToTopCallback: scrollToTopCallback,
+                    animatedSearchInset: animatedSearchInset,
+                    bottomInset: duoTabBarInsets.overlay,
+                    snapDistance: searchSnapDistance,
+                    onScrollIdle: settleHeader,
+                    content: { duoInsetContent }
+                )
+                .edgesIgnoringSafeArea(.all)
+            }
+        } else if useDuoGlass {
+            ZStack(alignment: .top) {
+                DuoScrollGradient(
+                    scrollOffset: scrollOffset,
+                    headerHeight: layout.headerHeight,
+                    extended: headerType == .extended,
+                    followScroll: useQuickReturn
+                )
+
+                StackScreenContent(
+                    scrollable: scrollable,
+                    scrollOffset: $scrollOffset,
+                    scrollToTopCallback: scrollToTopCallback,
+                    topInset: layout.headerHeight - layout.insets.top,
+                    bottomInset: duoTabBarInsets.overlay,
+                    snapDistance: searchSnapDistance,
+                    onScrollIdle: settleHeader,
+                    content: content
+                )
+
+                header
+                    .background(
+                        Color.clear
+                            .modifier(DuoBarMaterial(shape: Rectangle(), visible: scrollOffset > 0))
+                            .edgesIgnoringSafeArea([.top, .horizontal])
+                    )
+                    .offset(y: -headerHide)
+                    .zIndex(100)
+            }
+        } else {
+            header
+                // top-aligned: an extended band runs past the bar, under the content
+                .background(alignment: .top) {
+                    ZStack(alignment: .top) {
+                        if layout.sideBar != nil && inputSearchType != .none && !headerTransparent {
+                            // RN HeaderExtendHeader with search on the side bar layout: the
+                            // gradient fades out within the header box, as without the search
+                            DuoScrollGradient(
+                                scrollOffset: scrollOffset,
+                                headerHeight: layout.headerHeight,
+                                extended: headerType == .extended
+                            )
+                        } else {
+                            NavigationHeaderBackground(
+                                headerType: headerType,
+                                scrollState: scrollOffset,
+                                headerTransparent: headerTransparent,
+                                fullScreenContent: fullScreenContent,
+                                backgroundColor: backgroundColor
+                            )
+                        }
+                        HeaderBarBackground(opacity: opacity, transparent: headerTransparent || headerType == .none)
+                    }
+                    .edgesIgnoringSafeArea([.top, .horizontal])
+                }
+
+            StackScreenContent(
+                scrollable: scrollable,
+                scrollOffset: $scrollOffset,
+                scrollToTopCallback: scrollToTopCallback,
+                animatedSearchInset: animatedSearchInset,
+                bottomInset: duoTabBarInsets.overlay,
+                snapDistance: searchSnapDistance,
+                onScrollIdle: settleHeader,
+                content: content
+            )
+        }
+    }
+
+    /// Edge-to-edge branches lay out outside the safe area; iPhone Duo content still keeps
+    /// clear of the side strips, as RN's Screen does.
+    private var duoInsetContent: some View {
+        content()
+            .padding(.leading, layout.insetLeft)
+            .padding(.trailing, layout.insetRight)
+    }
+
+    private func heroGlassStart(_ animatedHeader: AnimatedHeader) -> CGFloat {
+        max(layout.width / animatedHeader.aspectRatio.value - layout.headerHeight, 0)
+    }
+
+    /// The banner fills the width at its aspect ratio; the body starts `layoutOffset` below the
+    /// header band so it overlaps the banner's lower part.
+    @ViewBuilder
+    private func animatedHeroBody(_ animatedHeader: AnimatedHeader) -> some View {
+        let width = layout.width
+        let imageHeight = width / animatedHeader.aspectRatio.value
+        let contentTopInset = layout.headerHeight + layoutOffset
+
+        ZStack(alignment: .top) {
+            animatedHeader.composable(scrollOffset)
+                .frame(width: width, height: imageHeight)
+                .clipped()
+
+            duoInsetContent
+                .padding(.top, contentTopInset)
+        }
+        .frame(maxWidth: .infinity, alignment: .top)
+    }
+
+    private var header: NavigationHeader {
+        NavigationHeader(
+            headerType: headerType,
+            titlePosition: titlePosition,
+            title: title,
+            headerTitle: headerTitle,
+            headerRight: headerRight,
+            goBack: goBack,
+            opacity: opacity,
+            animatedHeader: animatedHeader,
+            scrollState: scrollOffset,
+            // the animated search draws its own field over the (fading) title
+            inputSearchProps: inputSearchType == .header ? inputSearchProps : nil,
+            tintColor: tintColor,
+            titleOpacity: titleOpacity
+        )
+    }
+}
+
+// MARK: - Bottom-tab root preference
+
+/// Set by `BottomTab` so the `StackScreen` hosting it keeps the full width and leaves the side
+/// bar to the tabs (Compose's `Navigation.markAsBottomTabRoot()`).
+public struct IsBottomTabRootKey: PreferenceKey {
+    public static var defaultValue: Bool = false
+    public static func reduce(value: inout Bool, nextValue: () -> Bool) {
+        value = value || nextValue()
+    }
+}
+
+// MARK: - Screen content (scrollable body)
+
+/// Compose's `MainContent` / `ScreenContent`: the body, tracking the scroll offset when scrollable.
+private struct StackScreenContent<Content: View>: View {
+    let scrollable: Bool
+    @Binding var scrollOffset: CGFloat
+    /// Compose's `ScrollData.scrollToTopCallback`, fired with the status-bar tap scroll-to-top.
+    let scrollToTopCallback: (() -> Void)?
+    /// Room for the animated search below the header (Compose's MainContent spacer).
+    var animatedSearchInset: CGFloat = 0
+    /// Room for a header the content scrolls under (iPhone Duo glass header).
+    var topInset: CGFloat = 0
+    /// Room for a bar that overlays the content (iPhone Duo floating tab bar).
+    var bottomInset: CGFloat = 0
+    /// Compose's animated-search snap: a scroll that comes to rest part way through this distance
+    /// finishes the move, up or back down.
+    var snapDistance: CGFloat? = nil
+    var onScrollIdle: (() -> Void)? = nil
+    let content: () -> Content
+
+    private let topAnchorID = "stack_screen_top_anchor"
+    private let scrollSpace = "stack_screen_scroll_space"
+
+    @State private var scrollView = WeakScrollView()
+
+    private func scrollDidRest() {
+        onScrollIdle?()
+        guard let snapDistance, scrollOffset > 0, scrollOffset < snapDistance,
+              let scrollView = scrollView.value else { return }
+        // UIKit, not `ScrollViewProxy.scrollTo`: SwiftUI keeps re-applying a scrollTo target while the
+        // content above it resizes, which this content does as the search inset shrinks with the scroll
+        let target = scrollOffset < snapDistance / 2 ? 0 : snapDistance
+        scrollView.setContentOffset(
+            CGPoint(x: scrollView.contentOffset.x, y: target - scrollView.adjustedContentInset.top),
+            animated: true
+        )
+    }
+
+    var body: some View {
+        if scrollable {
+            ScrollViewReader { proxy in
+                ScrollView(.vertical, showsIndicators: false) {
+                    VStack(spacing: 0) {
+                        // Top probe + scroll-to-top anchor, measured in the scroll's own space so the
+                        // offset is a clean 0-based "points scrolled", independent of the insets below.
+                        Color.clear
+                            .frame(height: 0)
+                            .id(topAnchorID)
+                            .background(GeometryReader { geo in
+                                Color.clear
+                                    .onAppear {
+                                        scrollOffset = -geo.frame(in: .named(scrollSpace)).minY
+                                    }
+                                    .onChange(of: geo.frame(in: .named(scrollSpace)).minY) { minY in
+                                        scrollOffset = -minY
+                                    }
+                            })
+                            .background(ScrollViewProbe { scrollView.value = $0 })
+
+                        if animatedSearchInset + topInset > 0 {
+                            Spacer().frame(height: animatedSearchInset + topInset)
+                        }
+
+                        VStack {
+                            content()
+                        }
+
+                        if bottomInset > 0 {
+                            Spacer().frame(height: bottomInset)
+                        }
+                    }
+                }
+                .coordinateSpace(name: scrollSpace)
+                .modifier(ScrollRest(offset: scrollOffset, onRest: scrollDidRest))
+                // Status-bar tap (MoMoStatusBarTap swizzle) scrolls to top and notifies the consumer.
+                .onReceive(NotificationCenter.default.publisher(for: MoMoStatusBarTap.notificationName)) { _ in
+                    withAnimation {
+                        proxy.scrollTo(topAnchorID, anchor: .top)
+                    }
+                    scrollToTopCallback?()
+                }
+            }
+        } else {
+            content()
+                .padding(.top, topInset)
+                .padding(.bottom, bottomInset)
+        }
+    }
+}
+
+private final class WeakScrollView {
+    weak var value: UIScrollView?
+}
+
+/// Finds the UIScrollView behind the enclosing SwiftUI `ScrollView` once placed in its content.
+private struct ScrollViewProbe: UIViewRepresentable {
+    let found: (UIScrollView) -> Void
+
+    func makeUIView(context: Context) -> Probe { Probe(found: found) }
+
+    func updateUIView(_ uiView: Probe, context: Context) {}
+
+    final class Probe: UIView {
+        let found: (UIScrollView) -> Void
+
+        init(found: @escaping (UIScrollView) -> Void) {
+            self.found = found
+            super.init(frame: .zero)
+            isUserInteractionEnabled = false
+        }
+
+        required init?(coder: NSCoder) { nil }
+
+        override func didMoveToWindow() {
+            super.didMoveToWindow()
+            var view = superview
+            while let current = view, !(current is UIScrollView) { view = current.superview }
+            if let scrollView = view as? UIScrollView { found(scrollView) }
+        }
+    }
+}
+
+/// Calls `onRest` once the scroll comes to rest. Scroll phases need iOS 18; before that the scroll
+/// counts as ended once the offset stops changing, which a finger held still also looks like.
+private struct ScrollRest: ViewModifier {
+    let offset: CGFloat
+    let onRest: () -> Void
+
+    @State private var pending: Task<Void, Never>?
+
+    func body(content: Content) -> some View {
+        #if compiler(>=6.0)
+        if #available(iOS 18.0, *) {
+            content.onScrollPhaseChange { _, phase in
+                if phase == .idle { onRest() }
+            }
+        } else {
+            debounced(content)
+        }
+        #else
+        debounced(content)
+        #endif
+    }
+
+    private func debounced(_ content: Content) -> some View {
+        content
+            .onChange(of: offset) { _ in
+                pending?.cancel()
+                pending = Task { @MainActor in
+                    try? await Task.sleep(nanoseconds: 150_000_000)
+                    guard !Task.isCancelled else { return }
+                    onRest()
+                }
+            }
+            .onDisappear { pending?.cancel() }
+    }
+}
+
+// MARK: - Animated search header
+
+/// Compose's `SearchAnimated`: the search slides from below the header (scroll 0) up into the bar
+/// while its insets grow to clear the back button and header right.
+private struct SearchAnimatedHeader: View {
+    let props: InputSearchProps
+    let scrollOffset: CGFloat
+    let hiddenBack: Bool
+    let hasHeaderRight: Bool
+    let headerRightWidth: CGFloat
+    var useSideBar: Bool = false
+    var hasToolkit: Bool = false
+
+    @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
+    @OptionalEnvironmentObject private var navigator: Navigator?
+
+    var body: some View {
+        let scroll = max(scrollOffset, 0)
+
+        // Insets are measured from the safe-area top; collapsed, the search is centered in the bar row.
+        let rowTop = layout.headerStatusBarHeight - layout.insets.top
+        let minTop = rowTop + (layout.headerBarHeight - HEADER_HEIGHT) / 2
+        let maxTop = layout.headerHeight - layout.insets.top
+        let minSide = Spacing.M
+        // collapsed on the iPhone Duo status bar row, the search stays between its clusters (48pt back there)
+        let clearance = layout.statusBarClearance
+        let backWidth: CGFloat = clearance != nil && !useSideBar ? DuoMetrics.controlSize : 28
+        let maxStart = (clearance?.left ?? 0) + (hiddenBack || useSideBar ? Spacing.M : backWidth + Spacing.M + Spacing.S)
+        let maxEnd = (clearance?.right ?? 0) + (useSideBar && hasToolkit
+            ? Spacing.M
+            : headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M))
+
+        // one progress for all three, so the field docks with its final insets and never covers the toolkit
+        let progress = min(scroll / HEADER_HEIGHT, 1)
+        let top = maxTop + (minTop - maxTop) * progress
+        let start = minSide + (maxStart - minSide) * progress
+        let end = minSide + (maxEnd - minSide) * progress
+
+        // padding, not a Spacer: on the iPhone Duo status bar row the collapsed top is above the safe area
+        InputSearch(props: headerSearchProps(
+            props,
+            scroll: scroll,
+            layout: layout,
+            theme: theme,
+            pop: navigator.map { navigator in { navigator.pop() } }
+        ))
+            .frame(height: HEADER_HEIGHT)
+            .padding(.leading, start)
+            .padding(.trailing, end)
+            .padding(.top, top)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+    }
+}
+
+// MARK: - Floating content
+
+/// Compose's `FloatingContent`: no FAB props means nothing renders.
+private struct FloatingContent: View {
+    let fabProps: FabProps?
+    let keyboardSize: CGFloat
+    /// With a footer the FAB is anchored to the footer's *layout* top, which does not move
+    /// when the band offsets itself over the keyboard — so it rides the same offset.
+    let hasFooter: Bool
+    let scrollOffset: CGFloat
+
+    /// Compose keeps the FAB `Spacing.M + AppNavigationBar` above the bottom of the screen
+    /// and lifts it with `imePadding()`; here it sits `Spacing.M` above the safe area and
+    /// nothing lifts it, so the difference is applied as an offset (see NavigationFooter).
+    private var verticalOffset: CGFloat {
+        if hasFooter { return NavigationFooter.verticalOffset(keyboardSize: keyboardSize) }
+        return NavigationFooter.safeAreaBottom - NavigationFooter.navigationBarInset - keyboardSize
+    }
+
+    var body: some View {
+        if let fabProps = fabProps {
+            FloatingButton(
+                props: fabProps,
+                keyboardOffset: 0,
+                scrollOffset: scrollOffset
+            )
+            .padding(.horizontal, Spacing.M)
+            .offset(y: verticalOffset)
+            .ignoresSafeArea(.keyboard, edges: .bottom)
+        }
+    }
+}
+
+// MARK: - Footer
+
+/// Compose's `Footer`: the band pinned under the content — surface background, S/M padding,
+/// the navigation-bar reserve, and a 6pt shadow cast up onto the content.
+public struct NavigationFooter: View {
+    /// Nothing renders when nil.
+    var footerComponent: (() -> AnyView)?
+    /// Current keyboard height, measured from the bottom of the screen.
+    var keyboardSize: CGFloat
+    var transparent: Bool
+    var useMargin: Bool
+
+    public init(
+        footerComponent: (() -> AnyView)?,
+        keyboardSize: CGFloat = 0,
+        transparent: Bool = false,
+        useMargin: Bool = true
+    ) {
+        self.footerComponent = footerComponent
+        self.keyboardSize = keyboardSize
+        self.transparent = transparent
+        self.useMargin = useMargin
+    }
+
+    @Environment(\.appTheme) private var theme
+    @Environment(\.screenLayout) private var layout
+
+    /// Read from the window, not from an enclosing `GeometryProxy`: the proxy's bottom
+    /// inset grows to the keyboard height while the keyboard is up.
+    static var safeAreaBottom: CGFloat {
+        UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+            .first ?? 0
+    }
+
+    /// Compose's `AppNavigationBar.current` (`getNavigationBarHeight` clamps iOS to 21pt).
+    static var navigationBarInset: CGFloat { min(safeAreaBottom, 21) }
+
+    /// Compose's `bottomPadding + Spacing.S` with the keyboard down. The footer is laid
+    /// out inside the safe area, which already covers part of that gap.
+    static var bottomPadding: CGFloat {
+        max(navigationBarInset + Spacing.S - safeAreaBottom, 0)
+    }
+
+    /// Deliberately an offset and not padding: growing the footer feeds back into SwiftUI's
+    /// keyboard avoidance, so a padding-based lift never settles at the right place.
+    /// Negative lifts the band over the keyboard; positive shaves the few points by which
+    /// the safe area over-reserves compared to Compose. `FloatingContent` rides the same
+    /// amount so the FAB keeps its distance above the band.
+    ///
+    /// Natural position is `safeAreaBottom + bottomPadding` above the bottom of the screen;
+    /// Compose puts it at `(AppNavigationBar - keyboard).coerceAtLeast(0) + Spacing.S` on
+    /// top of the `imePadding()` lift — i.e. `max(navigationBar, keyboard) + Spacing.S`.
+    static func verticalOffset(keyboardSize: CGFloat) -> CGFloat {
+        (safeAreaBottom + bottomPadding) - (max(navigationBarInset, keyboardSize) + Spacing.S)
+    }
+
+    public var body: some View {
+        if let footerComponent = footerComponent {
+            let margin: CGFloat = useMargin ? Spacing.S : 0
+            VStack(alignment: .leading, spacing: 0) {
+                footerComponent()
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(.top, margin)
+            .padding(.horizontal, useMargin ? Spacing.M : 0)
+            // without the margin the Spacing.S under the content goes too: negative, so the
+            // content sinks into the reserve while the frame keeps its bottom edge
+            .padding(.bottom, Self.bottomPadding - (Spacing.S - margin))
+            // Compose paints the surface all the way to the bottom of the screen; the
+            // footer's own frame stops at the safe area, so only the fill bleeds down.
+            // With side insets (iPhone Duo) it stays inside them, off the side bar.
+            .background(
+                (transparent ? Color.clear : theme.colors.background.surface)
+                    .ignoresSafeArea(.container, edges: hasSideInsets ? .bottom : [.bottom, .horizontal])
+            )
+            .overlay(alignment: .top) {
+                if !transparent { shadow }
+            }
+            .offset(y: Self.verticalOffset(keyboardSize: keyboardSize))
+        }
+    }
+
+    private var hasSideInsets: Bool { layout.insetLeft > 0 || layout.insetRight > 0 }
+
+    /// Compose offsets the shadow box by -6dp, so it lands on the content above the
+    /// footer rather than on the footer surface itself.
+    private var shadow: some View {
+        LinearGradient(
+            colors: [Color.clear, Color.black.opacity(0.05)],
+            startPoint: .top,
+            endPoint: .bottom
+        )
+        .frame(height: 6)
+        .offset(y: -6)
+        .allowsHitTesting(false)
+    }
+}
+
+// MARK: - Hide keyboard on tap
+
+/// Compose's `Modifier.hideKeyboardOnTap()`. Uses `simultaneousGesture` so the tap is not
+/// consumed — buttons and text fields keep working.
+private struct HideKeyboardOnTap: ViewModifier {
+    let enabled: Bool
+
+    func body(content: Content) -> some View {
+        if enabled {
+            content.simultaneousGesture(
+                TapGesture().onEnded {
+                    UIApplication.shared.sendAction(
+                        #selector(UIResponder.resignFirstResponder),
+                        to: nil, from: nil, for: nil
+                    )
+                }
+            )
+        } else {
+            content
+        }
+    }
+}