@momo-kits/native-kits 0.167.1-duo.8-debug → 0.167.1-duo.9

package/ios/{Application → Navigation}/StackScreen.swift

@@ -1,13 +1,10 @@
 //
 //  StackScreen.swift
-//  Pods
+//  MoMoUIKits
 //
-//  SwiftUI mirror of Compose's `StackScreen`. This is a refactor of `Screen`:
-//  the body is decomposed into the same focused pieces Compose uses — header
-//  layer, scrollable content (`StackScreenContent`), floating button
-//  (`FloatingContent`) and footer (`NavigationFooter`) — instead of one
-//  monolithic, partially-duplicated view. The public init matches `Screen`
-//  so call sites (e.g. NavigationContainer's ScreenHost) can swap over.
+//  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
@@ -34,7 +31,9 @@ public struct StackScreen<Content: View>: View {
     var useAvoidKeyboard: Bool
     var keyboardShouldPersistTaps: Bool
     var footer: (() -> AnyView)?
-    var headerRight: (()->any View)? = {HeaderRight()}
+    var footerTransparent: Bool
+    var footerUseMargin: Bool
+    var headerRight: (() -> any View)? = { HeaderRight() }
     var animatedHeader: AnimatedHeader? = nil
     var layoutOffset: CGFloat
     var inputSearchProps: InputSearchProps?
@@ -62,7 +61,9 @@ public struct StackScreen<Content: View>: View {
         useAvoidKeyboard: Bool = true,
         keyboardShouldPersistTaps: Bool = false,
         footer: (() -> AnyView)? = nil,
-        headerRight:  (()->any View)? = {HeaderRight()},
+        footerTransparent: Bool = false,
+        footerUseMargin: Bool = true,
+        headerRight: (() -> any View)? = { HeaderRight() },
         animatedHeader: AnimatedHeader? = nil,
         layoutOffset: CGFloat = 56,
         inputSearchProps: InputSearchProps? = nil,
@@ -89,6 +90,8 @@ public struct StackScreen<Content: View>: View {
         self.useAvoidKeyboard = useAvoidKeyboard
         self.keyboardShouldPersistTaps = keyboardShouldPersistTaps
         self.footer = footer
+        self.footerTransparent = footerTransparent
+        self.footerUseMargin = footerUseMargin
         self.headerRight = headerRight
         self.animatedHeader = animatedHeader
         self.layoutOffset = layoutOffset
@@ -105,32 +108,46 @@ public struct StackScreen<Content: View>: View {
     @State private var headerHide: CGFloat = 0
     @State private var lastScrollOffset: CGFloat = 0
     @State private var headerSettle: Task<Void, Never>?
+    @State private var footerHeight: CGFloat = 0
 
     @Environment(\.applicationEnvironment) private var appEnv
     @Environment(\.screenLayout) private var layout
     @Environment(\.duoTabBarInsets) private var duoTabBarInsets
-    @State private var footerHeight: CGFloat = 0
+    @Environment(\.appTheme) private var theme
+    @OptionalEnvironmentObject private var navigation: Navigation?
 
-    // Auto-tracking state (mirrors Compose's `remember { ScreenTrackingState() }` +
-    // the once-computed push/back `action`).
+    // Auto-tracking state (Compose's `remember { ScreenTrackingState() }` + the once-computed action).
     @State private var trackingState = ScreenTrackingState()
     @State private var trackingAction: String = ScreenTracker.getLastScreenName() != nil ? "push" : "back"
 
-    /// Header background fade tied to scroll: 0 → transparent (over a hero image
-    /// or transparent header), 1 → opaque surface with the drop shadow.
-    private var scrollOpacity: CGFloat { min(scrollOffset / 114, 1) }
+    /// 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 (mirrors Compose's getInputSearchType / SearchAnimated)
+    // MARK: - Search header (Compose's getInputSearchType / SearchAnimated)
 
     private enum InputSearchType { case none, header, animated }
 
     private var inputSearchType: InputSearchType {
-        guard inputSearchProps != nil else { return .none }
+        guard inputSearchProps != nil, headerType != .none else { return .none }
         return useAnimated ? .animated : .header
     }
 
-    private static var headerHeight: CGFloat { 52 }
-
     private var toolkit: (data: HeaderRightData?, tintColor: Color?)? { toolkitHeaderRight(headerRight) }
 
     private var showsSideBar: Bool {
@@ -176,6 +193,8 @@ public struct StackScreen<Content: View>: View {
         }
     }
 
+    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 {
         if footer != nil { return footerHeight + NavigationFooter.safeAreaBottom + Spacing.XL }
@@ -183,35 +202,43 @@ public struct StackScreen<Content: View>: View {
         return NavigationFooter.navigationBarInset + Spacing.XL
     }
 
+    /// 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
     }
 
-    /// Extra top space reserved inside the content so the animated search bar has
-    /// room below the header at scroll 0; it shrinks to 0 as the bar slides up.
+    /// 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(Self.headerHeight - scroll, 0), Self.headerHeight)
+        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 / Self.headerHeight, 0), 1)
+        return 1 - min(max(scroll / HEADER_HEIGHT, 0), 1)
     }
 
     // MARK: - Body
 
     public var body: some View {
         GeometryReader { _ in
-            let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
-
             ZStack(alignment: .top) {
-                // Background color
-                (backgroundColor ?? Color.white)
+                (backgroundColor ?? theme.colors.background.default)
                     .edgesIgnoringSafeArea(.all)
 
                 VStack(spacing: 0) {
@@ -229,18 +256,22 @@ public struct StackScreen<Content: View>: View {
                         .padding(.bottom, footer == nil ? duoTabBarInsets.overlay : 0)
                     }
 
-                    NavigationFooter(footerComponent: footer, keyboardSize: keyboardSize)
-                        .padding(.bottom, duoTabBarInsets.overlay)
-                        .background(
-                            GeometryReader { proxy in
-                                Color.clear
-                                    .onAppear { footerHeight = proxy.size.height }
-                                    .onChange(of: proxy.size.height) { footerHeight = $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 }
+                        }
+                    )
                 }
 
-                // Animated search bar overlay (mirrors Compose's SearchAnimated layer).
                 if inputSearchType == .animated, let props = inputSearchProps {
                     SearchAnimatedHeader(
                         props: props,
@@ -248,7 +279,6 @@ public struct StackScreen<Content: View>: View {
                         hiddenBack: !isBack,
                         hasHeaderRight: headerRight != nil,
                         headerRightWidth: headerRightWidth,
-                        headerHeight: Self.headerHeight,
                         useSideBar: layout.sideBar != nil,
                         hasToolkit: toolkit != nil
                     )
@@ -259,12 +289,7 @@ public struct StackScreen<Content: View>: View {
                         sideBar: sideBar,
                         goBack: goBack,
                         toolkit: toolkit,
-                        headerColor: getHeaderColor(
-                            isAnimated: animatedHeader != nil,
-                            isSurface: animatedHeader?.isSurface ?? true,
-                            opacity: scrollOpacity,
-                            tintColor: tintColor
-                        ),
+                        headerColor: headerColor,
                         bottomInset: bottomBarsHeight
                     )
                 }
@@ -284,10 +309,11 @@ public struct StackScreen<Content: View>: View {
                     keyboardHeight = keyboardReferenceHeight - endFrame.origin.y
                 }
             }
-            // Mirrors Compose's `hideKeyboardOnTap()`: a simultaneous gesture so
-            // taps still reach buttons/fields while also dismissing the keyboard.
+            // Compose's `hideKeyboardOnTap()`: simultaneous, so taps still reach buttons and fields.
             .modifier(HideKeyboardOnTap(enabled: keyboardShouldPersistTaps))
         }
+        .onAppear(perform: reportBottomObstruction)
+        .onChange(of: bottomObstruction) { _ in reportBottomObstruction() }
         .task(id: screenName) {
             ScreenTracker.trackScreenNavigated(
                 maxApi: appEnv.maxApi,
@@ -301,7 +327,7 @@ public struct StackScreen<Content: View>: View {
             } catch {
                 return
             }
-            let loadTime = Date().timeIntervalSince1970 * 1000 - trackingState.time
+            let loadTime = ScreenTracker.now() - trackingState.time
             ScreenTracker.trackScreenDisplayed(
                 maxApi: appEnv.maxApi,
                 context: appEnv.applicationContext,
@@ -309,7 +335,7 @@ public struct StackScreen<Content: View>: View {
                 duration: loadTime,
                 state: trackingState
             )
-            let interactionTime = Date().timeIntervalSince1970 * 1000 - trackingState.time
+            let interactionTime = ScreenTracker.now() - trackingState.time
             ScreenTracker.trackScreenInteracted(
                 maxApi: appEnv.maxApi,
                 context: appEnv.applicationContext,
@@ -326,10 +352,8 @@ public struct StackScreen<Content: View>: View {
     @ViewBuilder
     private var headerAndContent: some View {
         if let animatedHeader = animatedHeader {
-            // Animated (hero) header: the image is the top of the scroll content
-            // and the body overlaps its lower part; the header bar background
-            // fades in over the image as the screen scrolls (mirrors Compose's
-            // ScreenContent for HeaderType.Animated).
+            // 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,
@@ -342,7 +366,7 @@ public struct StackScreen<Content: View>: View {
                 .edgesIgnoringSafeArea(.all)
 
                 header
-                    .background(
+                    .background(alignment: .top) {
                         Group {
                             if layout.sideBar != nil {
                                 // glass shows once the banner has scrolled under the header
@@ -351,29 +375,29 @@ public struct StackScreen<Content: View>: View {
                                     visible: scrollOffset > heroGlassStart(animatedHeader)
                                 ))
                             } else {
-                                Colors.black01.opacity(scrollOpacity)
+                                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
-                    .background(
-                        NavigationHeaderBackground(
-                            headerType: headerType,
-                            scrollState: scrollOffset,
-                            headerTransparent: headerTransparent,
-                            fullScreenContent: fullScreenContent
-                        )
-                    )
                     .zIndex(100)
 
-                StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, bottomInset: duoTabBarInsets.overlay, content: { duoInsetContent })
-                    .edgesIgnoringSafeArea(.all)
+                StackScreenContent(
+                    scrollable: scrollable,
+                    scrollOffset: $scrollOffset,
+                    scrollToTopCallback: scrollToTopCallback,
+                    animatedSearchInset: animatedSearchInset,
+                    bottomInset: duoTabBarInsets.overlay,
+                    content: { duoInsetContent }
+                )
+                .edgesIgnoringSafeArea(.all)
             }
         } else if useDuoGlass {
             ZStack(alignment: .top) {
@@ -404,17 +428,29 @@ public struct StackScreen<Content: View>: View {
             }
         } else {
             header
-                .background(
-                    NavigationHeaderBackground(
-                        headerType: headerType,
-                        scrollState: scrollOffset,
-                        headerTransparent: headerTransparent,
-                        fullScreenContent: fullScreenContent
-                    )
+                // top-aligned: an extended band runs past the bar, under the content
+                .background(alignment: .top) {
+                    ZStack(alignment: .top) {
+                        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, content: content)
+            StackScreenContent(
+                scrollable: scrollable,
+                scrollOffset: $scrollOffset,
+                scrollToTopCallback: scrollToTopCallback,
+                animatedSearchInset: animatedSearchInset,
+                bottomInset: duoTabBarInsets.overlay,
+                content: content
+            )
         }
     }
 
@@ -430,9 +466,8 @@ public struct StackScreen<Content: View>: View {
         max(layout.width / animatedHeader.aspectRatio.value - layout.headerHeight, 0)
     }
 
-    /// Hero image + body for an animated header. The image fills the width at its
-    /// aspect-ratio height; the body is offset below the header band so it overlaps
-    /// the lower part of the image (mirrors Compose's image box + padded content).
+    /// 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
@@ -458,11 +493,10 @@ public struct StackScreen<Content: View>: View {
             headerTitle: headerTitle,
             headerRight: headerRight,
             goBack: goBack,
-            opacity: scrollOpacity,
+            opacity: opacity,
             animatedHeader: animatedHeader,
             scrollState: scrollOffset,
-            // For the animated search the bar is rendered by the overlay, so the
-            // header shows the (fading) title instead of an inline search field.
+            // the animated search draws its own field over the (fading) title
             inputSearchProps: inputSearchType == .header ? inputSearchProps : nil,
             tintColor: tintColor,
             titleOpacity: titleOpacity
@@ -470,18 +504,26 @@ public struct StackScreen<Content: View>: View {
     }
 }
 
+// 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)
 
-/// Mirrors Compose's `ScreenContent`/`MainContent`: renders the screen body and,
-/// when scrollable, tracks the scroll offset so the header/FAB can react to it.
+/// 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
-    /// Mirrors Compose's `ScrollData.scrollToTopCallback`; fired alongside the
-    /// scroll-to-top triggered by a status-bar tap.
+    /// Compose's `ScrollData.scrollToTopCallback`, fired with the status-bar tap scroll-to-top.
     let scrollToTopCallback: (() -> Void)?
-    /// Extra top space reserved for the animated search bar (mirrors Compose's
-    /// MainContent animated top spacer). Zero for non-animated screens.
+    /// 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
@@ -497,9 +539,8 @@ private struct StackScreenContent<Content: View>: View {
             ScrollViewReader { proxy in
                 ScrollView(.vertical, showsIndicators: false) {
                     VStack(spacing: 0) {
-                        // Top probe + scroll-to-top anchor. Measured in the scroll's
-                        // own coordinate space so the offset is a clean 0-based
-                        // "pixels scrolled" value, independent of the inset below.
+                        // 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)
@@ -527,8 +568,7 @@ private struct StackScreenContent<Content: View>: View {
                     }
                 }
                 .coordinateSpace(name: scrollSpace)
-                // Status-bar tap (via MoMoStatusBarTap swizzle) scrolls to top and
-                // notifies the consumer, mirroring Compose's scrollToTopCallback.
+                // 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)
@@ -546,28 +586,26 @@ private struct StackScreenContent<Content: View>: View {
 
 // MARK: - Animated search header
 
-/// Mirrors Compose's `SearchAnimated`: the search bar slides from below the
-/// header (scroll 0) up into the header band as the user scrolls, while its
-/// horizontal insets grow to make room for the back button and header-right.
-/// Note: Compose's scroll-end snap and background-color lerp are not ported.
+/// 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
-    let headerHeight: CGFloat
     var useSideBar: Bool = false
     var hasToolkit: Bool = false
 
     @Environment(\.screenLayout) private var layout
+    @Environment(\.appTheme) private var theme
 
     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 - headerHeight) / 2
+        let minTop = rowTop + (layout.headerBarHeight - HEADER_HEIGHT) / 2
         let maxTop = layout.headerHeight - layout.insets.top
         let minSide = Spacing.M
         let maxStart: CGFloat = hiddenBack || useSideBar ? Spacing.M : 48
@@ -581,8 +619,8 @@ private struct SearchAnimatedHeader: View {
 
         VStack(spacing: 0) {
             Spacer().frame(height: top)
-            InputSearch(props: props)
-                .frame(height: headerHeight)
+            InputSearch(props: headerSearchProps(props, scroll: scroll, layout: layout, theme: theme))
+                .frame(height: HEADER_HEIGHT)
                 .padding(.leading, start)
                 .padding(.trailing, end)
             Spacer(minLength: 0)
@@ -593,7 +631,7 @@ private struct SearchAnimatedHeader: View {
 
 // MARK: - Floating content
 
-/// Mirrors Compose's `FloatingContent`: no FAB props means nothing renders.
+/// Compose's `FloatingContent`: no FAB props means nothing renders.
 private struct FloatingContent: View {
     let fabProps: FabProps?
     let keyboardSize: CGFloat
@@ -624,11 +662,106 @@ private struct FloatingContent: View {
     }
 }
 
+// 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.
+/// Named `NavigationFooter` to coexist with the deprecated `Screen`'s footer.
+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
+
+    /// 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.
+            .background(
+                (transparent ? Color.clear : theme.colors.background.surface)
+                    .ignoresSafeArea(.container, edges: [.bottom, .horizontal])
+            )
+            .overlay(alignment: .top) {
+                if !transparent { shadow }
+            }
+            .offset(y: Self.verticalOffset(keyboardSize: keyboardSize))
+        }
+    }
+
+    /// 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
 
-/// Mirrors Compose's `Modifier.hideKeyboardOnTap()`. When enabled, a tap
-/// anywhere resigns the first responder. Uses `simultaneousGesture` so the tap
-/// is not consumed — buttons and text fields keep working.
+/// 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
 

package/ios/{Application/Navigation → Navigation}/Tracking/ScreenTracker.swift

@@ -9,7 +9,7 @@
 import Foundation
 
 public final class ScreenTrackingState {
-    public var time: Double = Date().timeIntervalSince1970 * 1000
+    public var time: Double = ScreenTracker.now()
     public var releaseNavigated: Bool = false
     public var releaseLoad: Bool = false
     public var releaseInteraction: Bool = false
@@ -22,6 +22,12 @@ public final class ScreenTrackingState {
 public enum ScreenTracker {
     private static var lastScreenName: String?
 
+    /// Epoch milliseconds, the clock Compose tracks with.
+    public static func now() -> Double { Date().timeIntervalSince1970 * 1000 }
+
+    /// Compose sends whole milliseconds (`Long`).
+    private static func millis(_ value: Double) -> Int64 { Int64(value.rounded()) }
+
     public static func trackScreenNavigated(
         maxApi: MaxApi?,
         context: MiniAppContext?,
@@ -35,7 +41,8 @@ public enum ScreenTracker {
         lastScreenName = screenName
 
         var params = buildBaseParams(context: context, screenName: screenName)
-        params["pre_screen_name"] = previousScreen
+        // keeps the key with a null value; a subscript assignment of nil would drop it
+        params.updateValue(previousScreen, forKey: "pre_screen_name")
         params["state"] = "navigated"
         params["action"] = action
         maxApi?.track(eventName: "auto_screen_navigated", params: params)
@@ -55,7 +62,7 @@ public enum ScreenTracker {
 
         var params = buildBaseParams(context: context, screenName: screenName)
         params["state"] = "load"
-        params["duration"] = duration
+        params["duration"] = millis(duration)
         maxApi?.track(eventName: "auto_screen_displayed", params: params)
 
         state.releaseLoad = true
@@ -73,8 +80,8 @@ public enum ScreenTracker {
 
         var params = buildBaseParams(context: context, screenName: screenName)
         params["state"] = "interaction"
-        params["duration"] = duration
-        params["total_duration"] = totalDuration
+        params["duration"] = millis(duration)
+        params["total_duration"] = millis(totalDuration)
         maxApi?.track(eventName: "auto_screen_interacted", params: params)
 
         state.releaseInteraction = true