@momo-kits/native-kits 0.162.44-debug → 0.162.45-debug

package/ios/Layout/Section.swift

@@ -1,8 +1,8 @@
 import SwiftUI
 
-/// 12-column section container: horizontal margin, optional background image, and a
-/// wrapping row of children that read their span size from `\.gridContext`.
-/// Mirrors `vn.momo.kits.layout.Section`.
+/// Grid section container (12 columns, 24 when the content is wider than 600pt): horizontal
+/// margin, optional background image, and a wrapping row of children that read their span
+/// size from `\.gridContext`. Mirrors `vn.momo.kits.layout.Section`.
 public struct SectionView<Content: View>: View {
     // MARK: Lifecycle
 
@@ -19,116 +19,20 @@ public struct SectionView<Content: View>: View {
     // MARK: Public
 
     public var body: some View {
-        flow
-            .environment(\.gridContext, grid)
-            .frame(maxWidth: .infinity, alignment: .topLeading)
-            .background(widthReader)
+        GridFlow(gutter: Spacing.M, content: content)
             .background(background)
             .padding(.horizontal, useMargin ? Spacing.M : 0)
     }
 
     // MARK: Private
 
-    private static var columns: Int { 12 }
-    private static var gutter: CGFloat { Spacing.M }
-
     private let useMargin: Bool
     private let backgroundImage: String?
     private let content: () -> Content
 
-    /// Width available *inside* the horizontal margin — the Compose `BoxWithConstraints` equivalent.
-    @State private var availableWidth: CGFloat = 0
-
-    private var grid: GridContext {
-        let columns = CGFloat(Self.columns)
-        // The trailing `- 1 / columns` mirrors Compose: it absorbs rounding so 12 spans
-        // plus their gutters never overflow the row by a sub-point.
-        let sizePerSpan = (availableWidth - Self.gutter * (columns - 1)) / columns - 1 / columns
-        return GridContext(numberOfColumns: Self.columns, gutter: Self.gutter, sizePerSpan: max(0, sizePerSpan))
-    }
-
-    @ViewBuilder private var flow: some View {
-        if #available(iOS 16.0, *) {
-            FlowRowLayout(gutter: Self.gutter) { content() }
-        } else {
-            // No `Layout` protocol before iOS 16: children stack instead of wrapping.
-            // Full-width (span 12) items — the common case — look identical.
-            VStack(alignment: .leading, spacing: Self.gutter) { content() }
-        }
-    }
-
     @ViewBuilder private var background: some View {
         if let backgroundImage {
             ImageView(backgroundImage, contentMode: .fill).clipped()
         }
     }
-
-    private var widthReader: some View {
-        GeometryReader { proxy in
-            Color.clear.preference(key: SectionWidthKey.self, value: proxy.size.width)
-        }
-        .onPreferenceChange(SectionWidthKey.self) { availableWidth = $0 }
-    }
-}
-
-private struct SectionWidthKey: PreferenceKey {
-    static var defaultValue: CGFloat = 0
-
-    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
-        value = max(value, nextValue())
-    }
-}
-
-/// Wrapping row with equal horizontal/vertical spacing — the Compose `FlowRow` equivalent.
-@available(iOS 16.0, *)
-private struct FlowRowLayout: Layout {
-    struct Row {
-        var items: [(index: Int, size: CGSize)] = []
-        var width: CGFloat = 0
-        var height: CGFloat = 0
-    }
-
-    let gutter: CGFloat
-
-    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) -> CGSize {
-        let maxWidth = proposal.width ?? .infinity
-        let rows = rows(for: subviews, maxWidth: maxWidth)
-        let height = rows.reduce(0) { $0 + $1.height } + gutter * CGFloat(max(0, rows.count - 1))
-        return CGSize(width: proposal.width ?? rows.map(\.width).max() ?? 0, height: height)
-    }
-
-    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) {
-        var y = bounds.minY
-        for row in rows(for: subviews, maxWidth: bounds.width) {
-            var x = bounds.minX
-            for item in row.items {
-                subviews[item.index].place(
-                    at: CGPoint(x: x, y: y),
-                    anchor: .topLeading,
-                    proposal: ProposedViewSize(item.size)
-                )
-                x += item.size.width + gutter
-            }
-            y += row.height + gutter
-        }
-    }
-
-    private func rows(for subviews: Subviews, maxWidth: CGFloat) -> [Row] {
-        var rows: [Row] = []
-        var current = Row()
-        for index in subviews.indices {
-            let size = subviews[index].sizeThatFits(ProposedViewSize(width: maxWidth, height: nil))
-            let widthIfAppended = current.items.isEmpty ? size.width : current.width + gutter + size.width
-            // Sub-point tolerance: spans are computed to land exactly on `maxWidth`.
-            if !current.items.isEmpty, widthIfAppended > maxWidth + 0.5 {
-                rows.append(current)
-                current = Row()
-            }
-            current.width = current.items.isEmpty ? size.width : current.width + gutter + size.width
-            current.height = max(current.height, size.height)
-            current.items.append((index, size))
-        }
-        if !current.items.isEmpty { rows.append(current) }
-        return rows
-    }
 }

package/ios/Loader/Loader.swift

@@ -12,8 +12,7 @@ public enum LoaderType {
 /// Mirrors Compose `Loader(type:, tintColor:, modifier:)` which delegates to
 /// `DotLoader` / `SpinnerLoader`. Both variants render Lottie animations
 /// (`files/dot_loading` and `files/lottie_circle_loader`) and optionally tint
-/// the fill/stroke. The tint is reproduced here by masking a solid color rect
-/// with the (monochrome) Lottie animation.
+/// the fill/stroke through a Lottie color value provider.
 public struct Loader: View {
     private let type: LoaderType
     private let tintColor: Color?
@@ -97,17 +96,14 @@ public struct ProgressBar: View {
     }
 }
 
-/// Renders a looping Lottie animation, optionally recolored via a mask.
+// Tinted inside Lottie, as Compose does: SwiftUI masks/color effects over a UIKit-backed view aren't reliable.
 private struct TintedLottie: View {
     let name: String
     let tintColor: Color?
 
     var body: some View {
-        if let tintColor = tintColor {
-            tintColor
-                .mask(LottieView(name: name, loopMode: .loop))
-        } else {
-            LottieView(name: name, loopMode: .loop)
-        }
+        LottieView(name: name, loopMode: .loop, tintColor: tintColor.map { UIColor($0) })
+            // The tint is applied once in makeUIView; a new tint needs a new view.
+            .id(tintColor)
     }
 }

package/ios/Lottie/LottieView.swift

@@ -15,6 +15,8 @@ struct LottieView: UIViewRepresentable {
   var loopMode: LottieLoopMode = .playOnce
   var contentMode : UIView.ContentMode  = .scaleAspectFit
   var onDone: (() -> Void)?
+  // Recolors every fill and stroke, as Compose's iOS LottieAnimation does; nil keeps the file's colors.
+  var tintColor: UIColor?
 
   // Add static cache for animations
   private static var animationCache = NSCache<NSString, LottieAnimation>()
@@ -36,7 +38,8 @@ struct LottieView: UIViewRepresentable {
         animationView.animation = cachedAnimation
         setupAnimationView(animationView, view)
       } else {
-        LottieAnimation.loadedFrom(url: URL(string: url)!, closure: { animation in
+        guard let animationURL = URL(string: url) else { return view }
+        LottieAnimation.loadedFrom(url: animationURL, closure: { animation in
           if let animation = animation {
             Self.animationCache.setObject(animation, forKey: url as NSString)
             animationView.animation = animation
@@ -49,7 +52,8 @@ struct LottieView: UIViewRepresentable {
       if let cachedAnimation = Self.animationCache.object(forKey: name as NSString) {
         animationView.animation = cachedAnimation
         setupAnimationView(animationView, view)
-      } else if let animation = LottieAnimation.named(name) {
+      } else if let animation = LottieAnimation.named(name, bundle: MoMoUIKitsResources.bundle)
+                  ?? LottieAnimation.named(name) {
         Self.animationCache.setObject(animation, forKey: name as NSString)
         animationView.animation = animation
         setupAnimationView(animationView, view)
@@ -62,6 +66,12 @@ struct LottieView: UIViewRepresentable {
   private func setupAnimationView(_ animationView: LottieAnimationView, _ containerView: UIView) {
     animationView.contentMode = contentMode
     animationView.loopMode = loopMode
+    if let tintColor {
+      animationView.setValueProvider(
+        ColorValueProvider(tintColor.lottieColorValue),
+        keypath: AnimationKeypath(keypath: "**.Color")
+      )
+    }
     animationView.backgroundBehavior = loopMode == .loop ? .pauseAndRestore : .pause
 
     // Optimize rendering
@@ -71,6 +81,8 @@ struct LottieView: UIViewRepresentable {
     containerView.addSubview(animationView)
 
     NSLayoutConstraint.activate([
+      animationView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
+      animationView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
       animationView.widthAnchor.constraint(equalTo: containerView.widthAnchor),
       animationView.heightAnchor.constraint(equalTo: containerView.heightAnchor)
     ])

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,21 @@ public struct BottomSheetHeader {
 
 // MARK: - Bottom sheet view
 
-@available(iOS 16.0, *)
 struct BottomSheetView<Content: View>: View {
+    let overplayId: UUID
     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
@@ -52,6 +57,7 @@ struct BottomSheetView<Content: View>: View {
     @State private var backgroundAlpha: CGFloat = 0
     @State private var sheetHeight: CGFloat = 0
     @State private var didAppear = false
+    @State private var isClosing = false
     @State private var keyboardHeight: CGFloat = 0
     /// Live drag offset, isolated from `sheetOffset` so a touch-move only invalidates
     /// this gesture-scoped value instead of forcing the whole body (including
@@ -66,8 +72,35 @@ 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
+    }
+
+    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 +143,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 {
@@ -128,33 +161,48 @@ struct BottomSheetView<Content: View>: View {
 
     private var sheet: some View {
         VStack(spacing: 0) {
-            // Drag handle + header (the draggable region).
             VStack(spacing: 0) {
-                Spacer().frame(height: 8)
-                Capsule()
-                    .fill(Colors.black06)
-                    .frame(width: 40, height: 4)
-                Spacer().frame(height: 4)
-                headerView
-                    .frame(height: 56)
-                    .padding(.horizontal, Spacing.M)
-            }
-            .frame(maxWidth: .infinity)
-            .frame(height: 72)
-            .contentShape(Rectangle())
-            .gesture(dragGesture)
+                // Drag handle + header (the draggable region).
+                VStack(spacing: 0) {
+                    Spacer().frame(height: 8)
+                    Capsule()
+                        .fill(Colors.black06)
+                        .frame(width: 40, height: 4)
+                    Spacer().frame(height: 4)
+                    headerView
+                        .frame(height: 56)
+                        .padding(.horizontal, Spacing.M)
+                        .padding(.leading, sideInsetLeading)
+                        .padding(.trailing, sideInsetTrailing)
+                }
+                .frame(maxWidth: .infinity)
+                .frame(height: 72)
+                .contentShape(Rectangle())
+                .gesture(dragGesture, including: draggable ? .all : .subviews)
 
-            Rectangle()
-                .fill(theme.colors.border.default)
-                .frame(height: 1)
+                Rectangle()
+                    .fill(theme.colors.border.default)
+                    .frame(height: 1)
 
-            content()
+                content()
+                    .padding(.leading, sideInsetLeading)
+                    .padding(.trailing, sideInsetTrailing)
+                    // a tall sheet keeps its header (and footer) and gives the content what is left
+                    .layoutPriority(-1)
+
+                if let footer {
+                    BottomSheetFooter(content: footer)
+                }
+            }
+            // The filler stays outside the cap, which shrinks by it instead: the sheet still ends at
+            // `maxHeight`, and the iOS 15 fallback never measures the keyboard as content.
+            .modifier(CapHeight(maxHeight: maxHeight - effectiveBottomInset))
 
-            backgroundColor
+            (footer != nil ? theme.colors.background.surface : backgroundColor)
                 .frame(height: effectiveBottomInset)
         }
-        .frame(maxWidth: .infinity)
-        .frame(alignment: .bottom)
+        .frame(maxWidth: isDuoCentered ? duoCenteredWidth : .infinity)
+        .clipped()
         .background(
             GeometryReader { geo in
                 Color.clear.onAppear { sheetHeight = geo.size.height }
@@ -198,14 +246,16 @@ struct BottomSheetView<Content: View>: View {
                 // same bottom-anchored top edge — is still in flight doesn't fight a
                 // moving target. Without this, the live drag value chases an animated
                 // one, producing a couple of corrective jumps before it settles.
-                if sheetOffset != 0 {
+                // A closing sheet keeps going down.
+                if sheetOffset != 0 && !isClosing {
                     sheetOffset = 0
                 }
             }
             .updating($dragTranslation) { value, state, _ in
-                state = max(value.translation.height, 0)
+                state = isClosing ? 0 : max(value.translation.height, 0)
             }
             .onEnded { value in
+                guard !isClosing else { return }
                 let finalOffset = max(value.translation.height, 0)
                 // Capture into persisted state BEFORE @GestureState resets to 0,
                 // avoiding a one-frame snap back to rest before close()'s own
@@ -233,6 +283,8 @@ struct BottomSheetView<Content: View>: View {
     /// Mirrors Compose's `closeEvent`: slide out over 200ms, then fade the scrim
     /// out over 100ms only after the slide finishes, then dismiss.
     private func close() {
+        guard !isClosing else { return }
+        isClosing = true
         withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
             sheetOffset = max(sheetHeight, screenHeight)
         }
@@ -242,12 +294,100 @@ struct BottomSheetView<Content: View>: View {
             }
         }
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
-            navigator.finishOverplayDismiss()
+            navigator.finishOverplayDismiss(id: overplayId)
         }
     }
 }
 
+/// 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. A capped sheet can't read its ideal height (that needs a second copy of the
+/// content), so it is re-measured only when the cap grows, e.g. once the keyboard goes down.
+private struct CapHeightFallback: ViewModifier {
+    let maxHeight: CGFloat
+    @State private var capped = false
+    @State private var idealHeight: CGFloat = 0
+
+    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 { measure(proxy.size.height) }
+                        .onChange(of: proxy.size.height) { measure($0) }
+                }
+            )
+            .frame(height: capped ? maxHeight : nil, alignment: .top)
+            .onChange(of: maxHeight) { cap in
+                if capped {
+                    // the ideal height was over the old cap, so only a taller cap can release it
+                    if cap > idealHeight { capped = false }
+                } else if idealHeight > cap {
+                    capped = true
+                }
+            }
+    }
+
+    private func measure(_ height: CGFloat) {
+        guard !capped else { return }
+        idealHeight = height
+        if 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 }