@swiftbrowser/native 0.18.3 → 0.21.0

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Navigation.swift

@@ -7,9 +7,10 @@ import SwiftUI
 /// `navstack`: the children are `navscreen`s, bottom to top. The protocol
 /// expresses push and pop purely as children appearing and disappearing;
 /// natively the path is derived from them. A native pop (the back button, an
-/// edge swipe) sends `tap` with the popped screen's id, as the protocol says,
-/// and the app removes the child in the same call, so the next read of the
-/// path already agrees with the screen.
+/// edge swipe) sends `tap` with the popped screen's id, as the protocol says
+/// (PopTap.swift: once UIKit's pop transition has finished, and not for a
+/// cancelled swipe), and the app removes the child, so the next read of the
+/// path agrees with the screen.
 struct NavigationStackElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
@@ -27,11 +28,14 @@ struct NavigationStackElement: View {
         let screens = node?.children.filter { $0.kind == "navscreen" } ?? []
         let pushed = screens.dropFirst().map(\.id)
         let path = Binding<[Int]>(
-            get: { node?.children.filter { $0.kind == "navscreen" }.dropFirst().map(\.id) ?? [] },
+            // A screen whose pop is under way is left out, as SwiftUI's own
+            // path has it, while the tree keeps it until the pop has finished.
+            get: { node?.children.filter { $0.kind == "navscreen" }.dropFirst().map(\.id).filter { !PopTap.pending.contains($0) } ?? [] },
             set: { next in
-                // Only pops come from here (pushes come from the app).
+                // Only pops come from here (pushes come from the app; a
+                // cancelled swipe puts its id back).
                 for id in pushed where !next.contains(id) {
-                    app?.dispatch(.tap(id))
+                    PopTap.send(id, app: app)
                 }
             }
         )
@@ -43,10 +47,14 @@ struct NavigationStackElement: View {
                     }
                 }
                 .navigationDestination(for: Int.self) { id in
-                    if let screen = node?.children.first(where: { $0.id == id }) {
+                    // A screen the app has popped already (on the tap a back
+                    // swipe or button sent, before the pop's transition has
+                    // run) is still drawn as it was, from the tree's record
+                    // of it, so the pop slides it away rather than dropping
+                    // its content in one frame.
+                    if let screen = node?.children.first(where: { $0.id == id }) ?? app?.tree.poppedScreen(id) {
                         NavigationScreenElement(node: screen)
                     } else {
-                        // Popped by the app already; SwiftUI is on its way out.
                         Color.clear
                     }
                 }
@@ -106,6 +114,16 @@ struct NavigationSplitElement: View {
 struct NavigationScreenElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
+    /// The bar's items as the push began, shown until it settles (`held`
+    /// below): iOS sizes an item's glass as a push starts and lays it out
+    /// again only once the push ends, so an item that changes meanwhile (an
+    /// Edit button arriving with the rows) would sit clipped in the old shape
+    /// until then. Held, the change shows after the push, laid out whole.
+    @State private var held: [ToolbarSnapshot]?
+    @State private var settled = false
+
+    /// How long a push takes, with a margin.
+    private static let pushSettles: Duration = .milliseconds(600)
 
     var body: some View {
         let props = NavScreenProps(props: node.props)
@@ -122,10 +140,22 @@ struct NavigationScreenElement: View {
         let content = ZStack {
             ForEach(node.children(except: ["toolbar", "searchfield"])) { ElementView(node: $0) }
         }
+        let live = toolbars.map(ToolbarSnapshot.init)
+        let shown = props.depth > 0 && !settled ? (held ?? live) : live
         let titled = content
             .modifier(KeyboardBarInset(toolbars: keyboardToolbars))
             .navigationTitle(props.title)
-            .toolbar { ScreenToolbar(toolbars: toolbars) }
+            .toolbar { ScreenToolbar(toolbars: shown) }
+            .onAppear {
+                // A pushed screen, appearing: its bar as it is now, until the push has settled.
+                guard props.depth > 0, !settled, held == nil else { return }
+                held = live
+                Task { @MainActor in
+                    try? await Task.sleep(for: Self.pushSettles)
+                    settled = true
+                    held = nil
+                }
+            }
         let searched: AnyView = {
             guard let search else { return AnyView(titled) }
             let searchProps = SearchFieldProps(props: search.props)
@@ -135,8 +165,13 @@ struct NavigationScreenElement: View {
             ))
         }()
         #if os(iOS) || canImport(FoundationBridge)
+        // `.toolbar(.hidden, for:)` and `.statusBarHidden`: SwiftUI hides the
+        // bars (animated in an animated commit); `.automatic` leaves a shown one as it is.
         let modeTitled = searched
             .navigationBarTitleDisplayMode(props.displayMode == "inline" ? .inline : props.displayMode == "large" ? .large : .automatic)
+            .toolbar(props.navigationBarHidden ? .hidden : .automatic, for: .navigationBar)
+            .toolbar(props.bottomBarHidden ? .hidden : .automatic, for: .bottomBar)
+            .statusBarHidden(props.statusBarHidden)
         #if canImport(FoundationBridge)
         modeTitled // the shim has no `navigationBarBackButtonHidden` (nor does the protocol carry it)
         #else
@@ -188,8 +223,19 @@ struct NavigationScreenElement: View {
 /// group (and share the bar's glass) as the app's do. A toolbar content
 /// builder takes no loop, so the elements go in by index, eight to a chunk
 /// and the rest in the next.
+/// A `toolbar` element with the items it had at one moment (`NavigationScreenElement.held`), or has now.
+struct ToolbarSnapshot {
+    let node: ElementNode
+    let items: [ElementNode]
+
+    init(node: ElementNode) {
+        self.node = node
+        self.items = node.children
+    }
+}
+
 struct ScreenToolbar: ToolbarContent {
-    let toolbars: [ElementNode]
+    let toolbars: [ToolbarSnapshot]
     var from = 0
 
     var body: some ToolbarContent {
@@ -209,7 +255,7 @@ struct ScreenToolbar: ToolbarContent {
     @ToolbarContentBuilder
     private func item(_ offset: Int) -> some ToolbarContent {
         if from + offset < toolbars.count {
-            ToolbarElement(node: toolbars[from + offset])
+            ToolbarElement(toolbar: toolbars[from + offset])
         }
     }
 }
@@ -221,9 +267,10 @@ struct ScreenToolbar: ToolbarContent {
 /// `ToolbarItem` iOS 26 shows only the first), without the bar's shared
 /// glass when `sharedBackground` is `hidden` (iOS 26).
 struct ToolbarElement: ToolbarContent {
-    let node: ElementNode
+    let toolbar: ToolbarSnapshot
 
     var body: some ToolbarContent {
+        let node = toolbar.node
         let props = ToolbarProps(props: node.props)
         let placement = NavigationScreenElement.placement(props.placement)
         if let spacer = props.spacer {
@@ -234,12 +281,12 @@ struct ToolbarElement: ToolbarContent {
             }
         } else if props.sharedBackground == "hidden" {
             if #available(iOS 26, macOS 26, *) {
-                ToolbarItemGroup(placement: placement) { ChildrenView(node: node) }.sharedBackgroundVisibility(.hidden)
+                ToolbarItemGroup(placement: placement) { ForEach(toolbar.items) { ElementView(node: $0) } }.sharedBackgroundVisibility(.hidden)
             } else {
-                ToolbarItemGroup(placement: placement) { ChildrenView(node: node) }
+                ToolbarItemGroup(placement: placement) { ForEach(toolbar.items) { ElementView(node: $0) } }
             }
         } else {
-            ToolbarItemGroup(placement: placement) { ChildrenView(node: node) }
+            ToolbarItemGroup(placement: placement) { ForEach(toolbar.items) { ElementView(node: $0) } }
         }
     }
 }
@@ -250,6 +297,10 @@ struct ToolbarElement: ToolbarContent {
 struct NavigationLinkElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
+    @Environment(\.listSelectsRows) private var listSelects
+    #if os(iOS) || canImport(FoundationBridge)
+    @Environment(\.editMode) private var editMode
+    #endif
 
     /// The wrappers a row's link may sit in and still be the row (the web
     /// engine's transparent kinds): any other kind between it and the list
@@ -267,12 +318,24 @@ struct NavigationLinkElement: View {
         return false
     }
 
+    /// Whether the list around is in edit mode with a selection: a link row
+    /// is then selected by its tap (the row's `tag`, ListRowElement), not
+    /// followed, as iOS selects a `NavigationLink` row then. A split view
+    /// sidebar's link (`selects`) is its row's selection always: the cell
+    /// takes the touch and selects itself before the app pushes, so the
+    /// list does not change under the push's transition.
+    private func selecting(_ props: NavLinkProps) -> Bool {
+        #if os(iOS) || canImport(FoundationBridge)
+        listSelects && (props.selects || editMode?.wrappedValue.isEditing == true)
+        #else
+        listSelects && props.selects
+        #endif
+    }
+
     var body: some View {
         let props = NavLinkProps(props: node.props)
         let inList = Self.isListRow(node)
-        Button {
-            app?.dispatch(.tap(node.id))
-        } label: {
+        let label = Group {
             if inList {
                 // The disclosure chevron in the trailing 22 points, as measured
                 // against iOS's row: 13 pt semibold, 2 in from the content's edge
@@ -291,9 +354,12 @@ struct NavigationLinkElement: View {
                 ChildrenView(node: node)
             }
         }
-        .buttonStyle(.plain)
-        .foregroundStyle(inList || props.plain ? AnyShapeStyle(HierarchicalShapeStyle.primary) : AnyShapeStyle(TintShapeStyle()))
-        .listRowBackground(props.selected ? Color.accentColor.opacity(0.15) : nil)
+        let tappable: AnyView = inList && selecting(props)
+            ? AnyView(label)
+            : AnyView(Button { app?.dispatch(.tap(node.id)) } label: { label }.buttonStyle(.plain))
+        tappable
+            .foregroundStyle(inList || props.plain ? AnyShapeStyle(HierarchicalShapeStyle.primary) : AnyShapeStyle(TintShapeStyle()))
+            .listRowBackground(props.selected ? Color.accentColor.opacity(0.15) : nil)
     }
 }
 

package/swift/Sources/SwiftBrowserNative/Views/Kinds/PinchTracker.swift

@@ -0,0 +1,200 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftUI
+
+/// A pinch taken from the fingers themselves (iOS 18's `SpatialEventGesture`,
+/// Views/Kinds/More.swift), as the web renderer takes one from two pointers
+/// (Web/src/pinch.ts): the scale is the distance between the first two
+/// fingers over their distance when the second came down, the rotation the
+/// turn of the line between them (unwrapped past a half turn), the location
+/// their midpoint. The pinch begins the moment the scale has moved
+/// `minimumScaleDelta` or the angle `minimumAngleDelta` (with no minimum, on
+/// the first move), where SwiftUI's `MagnifyGesture` waits for the system's
+/// recognizer to make up its mind, a good way into the spread. A third
+/// finger waits; lifting one of the pair hands the pinch to it, the scale
+/// unbroken, and lifting the last two ends it. A report that leaves a finger
+/// out keeps it where it was. A reference, so a move redraws nothing.
+final class PinchTracker {
+    struct Report: Equatable {
+        var phase: String
+        var scale: Double
+        /// Degrees.
+        var rotation: Double
+        var scaleVelocity: Double
+        var rotationVelocity: Double
+        var startLocation: CGPoint
+        var location: CGPoint
+    }
+
+    /// The window the velocities are taken over, as the web renderer's.
+    static let velocityWindow: TimeInterval = 0.1
+
+    let magnify: Bool
+    let rotate: Bool
+    let minimumScaleDelta: Double
+    /// Degrees.
+    let minimumAngleDelta: Double
+
+    private struct Base {
+        var a: AnyHashable
+        var b: AnyHashable
+        var distance: Double
+        var angle: Double
+        var midpoint: CGPoint
+    }
+
+    /// A finger on the element: where it was last reported.
+    struct Finger: Equatable {
+        var id: AnyHashable
+        var location: CGPoint
+        /// `active`, or `ended` / `cancelled` as the system reported it.
+        var active: Bool
+    }
+
+    private var base: Base?
+    /// The fingers down, in order of arrival, at their last reported location.
+    private var fingers: [(id: AnyHashable, location: CGPoint)] = []
+    private var began = false
+    private var scale = 1.0
+    private var rotation = 0.0
+    private var lastAngle = 0.0
+    private var location = CGPoint.zero
+    private var samples: [(t: TimeInterval, scale: Double, rotation: Double)] = []
+    private var reported: Report?
+
+    init(magnify: Bool, rotate: Bool, minimumScaleDelta: Double, minimumAngleDelta: Double) {
+        self.magnify = magnify
+        self.rotate = rotate
+        self.minimumScaleDelta = max(0, minimumScaleDelta)
+        self.minimumAngleDelta = max(0, minimumAngleDelta)
+    }
+
+    /// Whether two fingers are being followed (a pinch, begun or not).
+    var tracking: Bool { base != nil }
+
+    /// Takes the fingers now down (in the element's coordinates) at `time`;
+    /// what to send, or nil when there is nothing to say yet.
+    func update(active: [(id: AnyHashable, location: CGPoint)], cancelled: Bool, at time: TimeInterval) -> Report? {
+        update(fingers: active.map { Finger(id: $0.id, location: $0.location, active: true) }, cancelled: cancelled, at: time)
+    }
+
+    /// Takes the fingers the system reported at `time`: a finger it reports
+    /// as ended or cancelled has lifted, one it leaves out is where it was
+    /// (a report need not name every finger). What to send, or nil when
+    /// there is nothing to say yet.
+    func update(fingers reports: [Finger], cancelled: Bool, at time: TimeInterval) -> Report? {
+        for finger in reports {
+            if !finger.active {
+                fingers.removeAll { $0.id == finger.id }
+            } else if let index = fingers.firstIndex(where: { $0.id == finger.id }) {
+                fingers[index].location = finger.location
+            } else {
+                fingers.append((finger.id, finger.location))
+            }
+        }
+        guard let base else {
+            guard fingers.count >= 2 else { return nil }
+            let a = fingers[0]
+            let b = fingers[1]
+            let distance = max(Self.distance(a.location, b.location), 1)
+            let angle = Self.angle(a.location, b.location)
+            let midpoint = Self.midpoint(a.location, b.location)
+            self.base = Base(a: a.id, b: b.id, distance: distance, angle: angle, midpoint: midpoint)
+            scale = 1
+            rotation = 0
+            lastAngle = angle
+            location = midpoint
+            samples = [(time, 1, 0)]
+            return nil
+        }
+        var a = fingers.first { $0.id == base.a }?.location
+        var b = fingers.first { $0.id == base.b }?.location
+        if a == nil || b == nil {
+            // A finger of the pair lifted. With two fingers still down (the
+            // system gave one a new identity, or a third was waiting) the
+            // pinch carries on from where it is, its scale unbroken.
+            guard fingers.count >= 2 else { return end(cancelled: cancelled) }
+            let next = (fingers[0], fingers[1])
+            let distance = Self.distance(next.0.location, next.1.location)
+            let angle = Self.angle(next.0.location, next.1.location)
+            self.base = Base(a: next.0.id, b: next.1.id, distance: max(distance / max(scale, 0.0001), 1), angle: base.angle, midpoint: base.midpoint)
+            lastAngle = angle
+            a = next.0.location
+            b = next.1.location
+        }
+        guard let a, let b, let base = self.base else { return nil }
+        scale = Self.distance(a, b) / base.distance
+        let angle = Self.angle(a, b)
+        var delta = angle - lastAngle
+        if delta > 180 { delta -= 360 } else if delta <= -180 { delta += 360 }
+        rotation += delta
+        lastAngle = angle
+        location = Self.midpoint(a, b)
+        samples.append((time, scale, rotation))
+        while samples.count > 2, let first = samples.first, time - first.t > Self.velocityWindow { samples.removeFirst() }
+        if !began {
+            let scaled = magnify && abs(scale - 1) >= minimumScaleDelta
+            let turned = rotate && abs(rotation) >= minimumAngleDelta
+            guard scaled || turned else { return nil }
+            began = true
+            return report("began")
+        }
+        let previous = reported
+        let next = report("changed")
+        if let previous, previous.scale == next.scale, previous.rotation == next.rotation, previous.location == next.location { return nil }
+        return next
+    }
+
+    /// Every finger up (or the gesture cancelled): the end of a pinch that began.
+    func end(cancelled: Bool) -> Report? {
+        defer {
+            base = nil
+            fingers = []
+            began = false
+            samples = []
+            reported = nil
+        }
+        guard began else { return nil }
+        return report(cancelled ? "cancelled" : "ended")
+    }
+
+    private func report(_ phase: String) -> Report {
+        let first = samples.first
+        let last = samples.last
+        let dt = first.map { f in (last?.t ?? f.t) - f.t } ?? 0
+        let scaleVelocity = first != nil && last != nil && dt > 0 ? (last!.scale - first!.scale) / dt : 0
+        let rotationVelocity = first != nil && last != nil && dt > 0 ? (last!.rotation - first!.rotation) / dt : 0
+        let out = Report(
+            phase: phase,
+            scale: Self.round(scale, 4),
+            rotation: Self.round(rotation, 2),
+            scaleVelocity: Self.round(scaleVelocity, 4),
+            rotationVelocity: Self.round(rotationVelocity, 2),
+            startLocation: base?.midpoint ?? .zero,
+            location: location
+        )
+        reported = out
+        return out
+    }
+
+    private static func distance(_ a: CGPoint, _ b: CGPoint) -> Double {
+        let dx = Double(b.x - a.x)
+        let dy = Double(b.y - a.y)
+        return (dx * dx + dy * dy).squareRoot()
+    }
+
+    /// Degrees, as `atan2` gives them (counterclockwise on screen is negative, as the web's).
+    private static func angle(_ a: CGPoint, _ b: CGPoint) -> Double {
+        atan2(Double(b.y - a.y), Double(b.x - a.x)) * 180 / .pi
+    }
+
+    private static func midpoint(_ a: CGPoint, _ b: CGPoint) -> CGPoint {
+        CGPoint(x: (a.x + b.x) / 2, y: (a.y + b.y) / 2)
+    }
+
+    private static func round(_ value: Double, _ places: Int) -> Double {
+        let factor = pow(10.0, Double(places))
+        return (value * factor).rounded() / factor
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/Kinds/PopTap.swift

@@ -0,0 +1,103 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftUI
+#if os(iOS) && !canImport(FoundationBridge)
+import UIKit
+#endif
+
+/// The `tap` a native pop sends with the popped screen's id (Navigation.swift),
+/// timed to the pop. SwiftUI sets the stack's path as UIKit's pop begins (a
+/// back button's tap, or the start of an edge swipe, before anyone knows
+/// whether it will go through); the tap waits until the transition has
+/// finished, and a cancelled swipe sends none. Meanwhile the screen is
+/// `pending`: the stack's path leaves it out, as SwiftUI's own has, while
+/// the tree still has it, so the departing screen is drawn as it is, title
+/// included. Removed at once, it was drawn from the tree's record of it
+/// (`OpTree.poppedScreen`) and UIKit dropped its large title in the pop's
+/// first frame. Without a transition (a programmatic pop, or no navigation
+/// controller to ask) the tap goes at once.
+enum PopTap {
+    /// The screens whose pop is under way: their taps wait for its end.
+    @MainActor private(set) static var pending: Set<Int> = []
+
+    @MainActor
+    static func send(_ id: Int, app: NativeApp?) {
+        #if os(iOS) && !canImport(FoundationBridge)
+        if let coordinator = runningTransition() {
+            send(id, during: CoordinatorTransition(coordinator: coordinator)) { app?.dispatch(.tap($0)) }
+            return
+        }
+        #endif
+        app?.dispatch(.tap(id))
+    }
+
+    /// The tap through the pop's transition: once it has finished, and only
+    /// when the pop went through; at once without one.
+    @MainActor
+    static func send(_ id: Int, during transition: (any PopTransition)?, dispatch: @escaping @MainActor (Int) -> Void) {
+        guard let transition else {
+            dispatch(id)
+            return
+        }
+        guard !pending.contains(id) else { return }
+        pending.insert(id)
+        transition.whenFinished { cancelled in
+            pending.remove(id)
+            if !cancelled { dispatch(id) }
+        }
+    }
+
+    #if os(iOS) && !canImport(FoundationBridge)
+    /// The transition of a navigation controller in the app's windows, if one is running.
+    @MainActor
+    private static func runningTransition() -> (any UIViewControllerTransitionCoordinator)? {
+        let windows = UIApplication.shared.connectedScenes.compactMap { $0 as? UIWindowScene }.flatMap(\.windows)
+        for window in windows {
+            for nav in navigationControllers(in: window) {
+                if let coordinator = nav.transitionCoordinator { return coordinator }
+            }
+        }
+        return nil
+    }
+
+    /// The navigation controllers behind the views in `window`, by their responder chains.
+    @MainActor
+    static func navigationControllers(in window: UIWindow) -> [UINavigationController] {
+        var found: [UINavigationController] = []
+        func visit(_ view: UIView) {
+            var responder: UIResponder? = view.next
+            while let r = responder {
+                if let nav = r as? UINavigationController, !found.contains(where: { $0 === nav }) { found.append(nav) }
+                responder = r.next
+            }
+            for subview in view.subviews { visit(subview) }
+        }
+        visit(window)
+        return found
+    }
+    #endif
+}
+
+/// A pop's transition as `PopTap` reads it: word of its end, and whether
+/// the pop went through (UIKit's transition coordinator, or a test's).
+@MainActor
+protocol PopTransition {
+    /// Calls `handler` once the transition has finished, with whether the pop was cancelled.
+    func whenFinished(_ handler: @escaping @MainActor (_ cancelled: Bool) -> Void)
+}
+
+#if os(iOS) && !canImport(FoundationBridge)
+/// UIKit's transition coordinator as a `PopTransition`.
+@MainActor
+struct CoordinatorTransition: PopTransition {
+    let coordinator: any UIViewControllerTransitionCoordinator
+
+    func whenFinished(_ handler: @escaping @MainActor (_ cancelled: Bool) -> Void) {
+        coordinator.animate(alongsideTransition: nil) { context in
+            let cancelled = context.isCancelled
+            MainActor.assumeIsolated { handler(cancelled) }
+        }
+    }
+}
+#endif
+#endif

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Stacks.swift

@@ -204,6 +204,7 @@ struct ScrollViewElement: View {
             let scroll = ScrollView(axes, showsIndicators: props.showsIndicators) {
                 ChildrenView(node: node)
             }
+            .scrollDismissesKeyboard(props.dismissesKeyboard == "interactively" ? .interactively : props.dismissesKeyboard == "immediately" ? .immediately : .automatic)
             let anchored = anchored(AnyView(scroll), props: props)
             let refreshed: AnyView = props.refreshable ? AnyView(anchored.refreshable { app?.dispatch(.refresh(node.id)) }) : anchored
             let snapped: AnyView = props.snap == "paging" ? AnyView(refreshed.scrollTargetBehavior(.paging))
@@ -382,7 +383,7 @@ struct ScrollViewElement: View {
         var order: [Int: Int] = [:]
         func visit(_ element: ElementNode) {
             for child in element.children {
-                if child.kind == "scrollview" || child.kind == "list" { continue }
+                guard child.kind != "scrollview", child.kind != "list" else { continue }
                 if child.kind == "styled", child.style.scrollID { order[child.id] = order.count }
                 visit(child)
             }
@@ -404,7 +405,7 @@ struct ScrollViewElement: View {
         var best: ScrollRequest?
         func visit(_ element: ElementNode) {
             for child in element.children {
-                if child.kind == "scrollview" || child.kind == "list" { continue }
+                guard child.kind != "scrollview", child.kind != "list" else { continue }
                 if child.kind == "styled", let request = child.style.scrollTo, best == nil || request.serial > best!.serial {
                     best = ScrollRequest(serial: request.serial, id: child.id, anchor: request.anchor.map(UnitPoint.init(spec:)), axes: request.axes)
                 }