@swiftbrowser/native 0.16.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/native",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "type": "module",
   "description": "Run a @swiftbrowser/react app natively: the runtime a JavaScriptCore-hosted app needs (timers, console, fetch and the other web globals over the SwiftBrowser Native bridge), the `run` entry that renders into the native SwiftUI renderer, and the bundler that builds app.js for the Xcode target.",
   "repository": {
@@ -59,8 +59,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
-    "@swiftbrowser/react": "0.16.0",
-    "@swiftbrowser/web": "0.16.0",
+    "@swiftbrowser/react": "0.17.1",
+    "@swiftbrowser/web": "0.17.1",
     "esbuild": "^0.28.2",
     "react-refresh": "^0.17.0"
   },

package/swift/Sources/SwiftBrowserNative/Views/ElementView.swift

@@ -26,7 +26,14 @@ struct ElementView: View {
         case "zstack": return ZStackElement(node: node).reportingSize(of: node)
         case "spacer": return AnyView(Spacer(minLength: SpacerProps(props: node.props).minLength.map { CGFloat($0) }))
         case "divider": return AnyView(Divider())
-        case "styled": return node.isSpinner ? AnyView(ProgressView()) : ChildrenView(node: node).styled(node.style, id: node.id)
+        case "styled":
+            if node.isSpinner { return AnyView(ProgressView()) }
+            // Its one child as itself, not through a `ForEach`: a `ForEach`'s
+            // element is the identity a scroll view's targets go by, which
+            // must stay the marked element's (the id the layout's own
+            // `ForEach` gives it), not the innermost element's.
+            if node.children.count == 1 { return ElementView(node: node.children[0]).styled(node.style, id: node.id) }
+            return ChildrenView(node: node).styled(node.style, id: node.id)
         case "decorated": return AnyView(DecoratedElement(node: node))
         case "geometry": return AnyView(GeometryElement(node: node))
         case "scrollview": return AnyView(ScrollViewElement(node: node))

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

@@ -13,9 +13,7 @@ struct ListElement: View {
 
     var body: some View {
         let props = ListProps(props: node.props)
-        let list = List {
-            ListRowsView(children: node.children)
-        }
+        let list = selectionList(props)
         let styled: AnyView = {
             switch props.style {
             case "plain": return AnyView(list.listStyle(.plain))
@@ -41,6 +39,76 @@ struct ListElement: View {
         refreshable
         #endif
     }
+
+    /// The `List`, with the selection its selectable rows make: as
+    /// `List(selection:)` makes them, the whole cell takes the tap and shows
+    /// the system's highlight, and a row the selection gains or loses sends
+    /// its `tap` (the app toggles or sets it). In edit mode a `Set`
+    /// selection is the system's multiple selection, with the checkmark
+    /// circles. Under the shim (the round trip) the shim's own list makes
+    /// rows of tags, so the rows keep their own taps there.
+    private func selectionList(_ props: ListProps) -> AnyView {
+        #if canImport(FoundationBridge)
+        return AnyView(List { ListRowsView(children: node.children) })
+        #else
+        let rows = Self.selectableRows(in: node)
+        let selected = rows.filter { ListRowProps(props: $0.props).selected }.map(\.id)
+        let editing = props.editing == true
+        if rows.isEmpty {
+            return AnyView(List { ListRowsView(children: node.children) })
+        }
+        if editing, props.multiSelect {
+            return AnyView(List(selection: Binding<Set<Int>>(
+                get: { Set(selected) },
+                set: { next in
+                    for id in Set(selected).symmetricDifference(next) { app?.dispatch(.tap(id)) }
+                }
+            )) {
+                ListRowsView(children: node.children)
+            }
+            .environment(\.listSelectsRows, true))
+        }
+        return AnyView(List(selection: Binding<Int?>(
+            get: { selected.first },
+            set: { id in
+                if let id {
+                    app?.dispatch(.tap(id))
+                } else if editing, let current = selected.first {
+                    // Edit mode deselects a chosen row: the app clears it.
+                    app?.dispatch(.tap(current))
+                }
+            }
+        )) {
+            ListRowsView(children: node.children)
+        }
+        .environment(\.listSelectsRows, true))
+        #endif
+    }
+
+    /// The list's selectable rows (not those of a list inside it).
+    static func selectableRows(in node: ElementNode) -> [ElementNode] {
+        var rows: [ElementNode] = []
+        func visit(_ element: ElementNode) {
+            for child in element.children where child.kind != "list" {
+                if child.kind == "listrow", ListRowProps(props: child.props).selectable { rows.append(child) }
+                visit(child)
+            }
+        }
+        visit(node)
+        return rows
+    }
+}
+
+private struct ListSelectsRowsKey: EnvironmentKey {
+    static let defaultValue = false
+}
+
+extension EnvironmentValues {
+    /// Whether the list around is a `List(selection:)` over its selectable rows, which are then its tags.
+    var listSelectsRows: Bool {
+        get { self[ListSelectsRowsKey.self] }
+        set { self[ListSelectsRowsKey.self] = newValue }
+    }
 }
 
 /// The rows of a `list` or `section`: sections render as `Section`s, the rest
@@ -126,18 +194,26 @@ struct SectionElement: View {
     }
 }
 
-/// `listrow`: the row's content with its edit-mode hints; a tap on a
-/// selectable row sends `tap`.
+/// `listrow`: the row's content with its edit-mode hints; a selectable
+/// row is the list's selection's tag (`ListElement`), or under the shim
+/// sends `tap` itself.
 struct ListRowElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
+    @Environment(\.listSelectsRows) private var listSelects
 
     var body: some View {
         let props = ListRowProps(props: node.props)
         // A row's children are one row: a stack when there are several.
         let content: AnyView = node.children.count == 1 ? AnyView(ElementView(node: node.children[0])) : AnyView(HStack(spacing: 0) { ChildrenView(node: node) })
-        if props.selectable {
+        if props.selectable, listSelects {
+            // The list's selection: the cell is the target, the list highlights it.
+            content.tag(node.id)
+        } else if props.selectable {
+            // The whole row takes the tap, not only its content's width (a
+            // title alone stops short of the trailing edge).
             let tappable = content
+                .frame(maxWidth: .infinity, alignment: .leading)
                 .contentShape(Rectangle())
                 .onTapGesture { app?.dispatch(.tap(node.id)) }
             if props.selected {

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

@@ -230,15 +230,32 @@ struct ToolbarElement: ToolbarContent {
     }
 }
 
-/// `navlink`: a tap on it sends `tap`, and the app pushes. In a list it is
-/// a row with a chevron, as the native link row is.
+/// `navlink`: a tap on it sends `tap`, and the app pushes. As a list's row
+/// it is a row with a chevron, as the native link row is; inside a row's
+/// content (a stack, a scroll view) it is a plain button, as in the web renderer.
 struct NavigationLinkElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
 
+    /// 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
+    /// makes it content of the row.
+    private static let rowWrappers: Set<String> = ["styled", "section", "gesture", "swipeactions", "contextmenu", "listrow", "draggable", "dropdestination"]
+
+    /// Whether the link is a list's row: only row wrappers between it and the list.
+    static func isListRow(_ node: ElementNode) -> Bool {
+        var current = node.parent
+        while let parent = current {
+            if parent.kind == "list" { return true }
+            guard rowWrappers.contains(parent.kind) else { return false }
+            current = parent.parent
+        }
+        return false
+    }
+
     var body: some View {
         let props = NavLinkProps(props: node.props)
-        let inList = node.ancestor(ofKind: "list") != nil
+        let inList = Self.isListRow(node)
         Button {
             app?.dispatch(.tap(node.id))
         } label: {

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

@@ -11,7 +11,7 @@ struct VStackElement: View {
         VStack(alignment: HorizontalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
             ChildrenView(node: node)
         }
-        .scrollTargetLayout(isEnabled: props.scrollTarget)
+        .scrollTargetLayout(when: props.scrollTarget)
     }
 }
 
@@ -33,7 +33,22 @@ struct HStackElement: View {
             HStack(alignment: VerticalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
                 ChildrenView(node: node)
             }
-            .scrollTargetLayout(isEnabled: props.scrollTarget)
+            .scrollTargetLayout(when: props.scrollTarget)
+        }
+    }
+}
+
+extension View {
+    /// `.scrollTargetLayout()` on a stack marked `scrollTarget`, and nothing
+    /// on any other: `.scrollTargetLayout(isEnabled: false)` on a stack
+    /// around a scroll view (a list row's) turns off the layout of the
+    /// stack inside it too, and the scroll view neither snaps nor reports.
+    @ViewBuilder
+    func scrollTargetLayout(when enabled: Bool) -> some View {
+        if enabled {
+            scrollTargetLayout()
+        } else {
+            self
         }
     }
 }
@@ -116,16 +131,28 @@ struct GeometryElement: View {
 /// `proxy.scrollTo(x)` arrives as a `scrollTo` hint, with a new serial each
 /// time, on the marked element it names (`scrollID`, `.id(x)`): the view
 /// finds the latest in its content and scrolls to it.
+///
+/// On iOS 18 and later the position is what the view settled on: the
+/// visible target at the anchor once the scroll phase is idle, after a drag
+/// or a `scrollTo` alike (so the app hears where a chevron's scroll ended),
+/// and never mid-gesture. A request on the view's own axes moves only this
+/// view, through its position, so a pager in a list leaves the list where
+/// it is.
 struct ScrollViewElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
     @State private var position: Int?
     @State private var served: Double = -1
+    /// The targets in view, as the last visibility change listed them.
+    @State private var visible: [Int] = []
+    @State private var idle = true
+    @State private var reported: Int?
 
     var body: some View {
         let props = ScrollViewProps(props: node.props)
         let axes: Axis.Set = props.axes == "horizontal" ? .horizontal : props.axes == "both" ? [.horizontal, .vertical] : .vertical
         let request = Self.scrollRequest(in: node)
+        let anchor = props.positionAnchor.map(UnitPoint.init(spec:))
         ScrollViewReader { proxy in
             let scroll = ScrollView(axes, showsIndicators: props.showsIndicators) {
                 ChildrenView(node: node)
@@ -134,29 +161,119 @@ struct ScrollViewElement: View {
             let snapped: AnyView = props.snap == "paging" ? AnyView(refreshed.scrollTargetBehavior(.paging))
                 : props.snap == "viewAligned" ? AnyView(refreshed.scrollTargetBehavior(.viewAligned)) : refreshed
             let positioned: AnyView = props.reportsPosition
-                ? AnyView(snapped.scrollPosition(id: Binding(get: { position }, set: { next in
+                ? reportingSettled(AnyView(snapped.scrollPosition(id: Binding(get: { position }, set: { next in
                     guard next != position else { return }
                     position = next
-                    if let next { app?.dispatch(.scrollPosition(next)) }
-                }), anchor: props.positionAnchor.map(UnitPoint.init(spec:))))
+                    // Where the settled position is reported, the binding only follows the view.
+                    if !Self.reportsSettled { report(next) }
+                }), anchor: anchor)), anchor: anchor)
                 : snapped
             positioned
-                .onAppear { perform(request, with: proxy) }
-                .onChange(of: request?.serial) { _, _ in perform(request, with: proxy) }
+                .onAppear { perform(request, props: props, with: proxy) }
+                .onChange(of: request?.serial) { _, _ in perform(request, props: props, with: proxy) }
         }
     }
 
-    private func perform(_ request: ScrollRequest?, with proxy: ScrollViewProxy) {
+    private func perform(_ request: ScrollRequest?, props: ScrollViewProps, with proxy: ScrollViewProxy) {
         guard let request, request.serial > served else { return }
         served = request.serial
-        position = request.id
+        if position == request.id {
+            // Already its position (the app, having put content in front,
+            // asks for the target again): the binding only scrolls on a
+            // change, so it lets go and takes the target back next turn.
+            position = nil
+            let id = request.id
+            Task { @MainActor in position = id }
+        } else {
+            position = request.id
+        }
+        if props.reportsPosition, Self.reportsSettled, request.id != reported {
+            // Where the request lands is the app's to hear once the scroll is
+            // over: an animated one ends in an idle phase (which reports);
+            // one without animation has no phase, so it is reported here.
+            let id = request.id
+            Task { @MainActor in
+                try? await Task.sleep(for: .milliseconds(450))
+                if idle { report(id) }
+            }
+        }
+        // On its own axes, at its own anchor, the position binding scrolls this view alone; else the proxy, which scrolls every scroll view around the target.
+        let ownAxes = request.axes == props.axes && props.axes != "both"
+        if props.reportsPosition, ownAxes, request.anchor == nil || request.anchor == props.positionAnchor.map(UnitPoint.init(spec:)) { return }
         proxy.scrollTo(request.id, anchor: request.anchor)
     }
 
+    /// Tells the app the target at the anchor, once per target, after the
+    /// pass that found it: the app answers synchronously, with a pass of its
+    /// own, which must not land in the middle of SwiftUI's update (as
+    /// GeometryElement's reports wait).
+    private func report(_ id: Int?) {
+        guard let id, id != reported else { return }
+        reported = id
+        let app = app
+        Task { @MainActor in app?.dispatch(.scrollPosition(id)) }
+    }
+
+    /// Whether this OS reports the settled position (`reportingSettled`) rather than the binding's every change.
+    static var reportsSettled: Bool {
+        #if !canImport(FoundationBridge)
+        if #available(iOS 18, macOS 15, *) { return true }
+        #endif
+        return false
+    }
+
+    /// The visible target at the anchor, reported when a scroll ends (the
+    /// phase goes from a drag, its deceleration or an animation to idle).
+    /// A change of what is visible while idle is not a scroll of the
+    /// viewer's: the first layout, before a requested position applies, or
+    /// content the app put in front, which it scrolls back itself. Reporting
+    /// those would send the app after them, in a loop.
+    private func reportingSettled(_ view: AnyView, anchor: UnitPoint?) -> AnyView {
+        #if !canImport(FoundationBridge)
+        if #available(iOS 18, macOS 15, *) {
+            let order = Self.targetOrder(in: node)
+            return AnyView(view
+                .onScrollTargetVisibilityChange(idType: Int.self, threshold: 0.5) { ids in
+                    visible = ids.sorted { (order[$0] ?? .max) < (order[$1] ?? .max) }
+                }
+                .onScrollPhaseChange { old, phase in
+                    idle = phase == .idle
+                    if idle, old != .idle { report(Self.target(at: anchor, among: visible)) }
+                })
+        }
+        #endif
+        return view
+    }
+
+    /// The target an anchor picks among the visible ones, in order: the first for a leading anchor (and none), the last for a trailing one, else the middle.
+    static func target(at anchor: UnitPoint?, among ids: [Int]) -> Int? {
+        guard !ids.isEmpty else { return nil }
+        let x = anchor?.x ?? 0
+        if x <= 0.25 { return ids.first }
+        if x >= 0.75 { return ids.last }
+        return ids[ids.count / 2]
+    }
+
+    /// The marked targets' places in the scroll target layout, in content order.
+    static func targetOrder(in node: ElementNode) -> [Int: Int] {
+        var order: [Int: Int] = [:]
+        func visit(_ element: ElementNode) {
+            for child in element.children {
+                if child.kind == "scrollview" || child.kind == "list" { continue }
+                if child.kind == "styled", child.style.scrollID { order[child.id] = order.count }
+                visit(child)
+            }
+        }
+        visit(node)
+        return order
+    }
+
     struct ScrollRequest: Equatable {
         var serial: Double
         var id: Int
         var anchor: UnitPoint?
+        /// `horizontal`, `vertical` or `both`.
+        var axes: String
     }
 
     /// The newest `scrollTo` among the content's marked elements (not those of a scroll view nested inside).
@@ -166,7 +283,7 @@ struct ScrollViewElement: View {
             for child in element.children {
                 if child.kind == "scrollview" || child.kind == "list" { 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:)))
+                    best = ScrollRequest(serial: request.serial, id: child.id, anchor: request.anchor.map(UnitPoint.init(spec:)), axes: request.axes)
                 }
                 visit(child)
             }

package/swift/Sources/SwiftBrowserProtocol/Props.swift

@@ -141,10 +141,13 @@ public struct ListProps: Equatable, Sendable {
     public var style: String
     public var refreshable: Bool
     public var editing: Bool?
+    /// `List(selection:)` over a `Set`: several rows may be selected.
+    public var multiSelect: Bool
     public init(props: JSONObject) {
         style = props.string("style") ?? "insetGrouped"
         refreshable = props.bool("refreshable") ?? false
         editing = props.bool("editing")
+        multiSelect = props.bool("multiSelect") ?? false
     }
 }
 

package/wasm/SwiftBrowserNative.wasm

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/wasm/SwiftBrowserNative.wasm
-size: 49302688 bytes
-sha256: 05f97ec252da1a85b64465ba5426d2ce1c620c78016ec4f2ae1bb7387a270be0
+size: 49329004 bytes
+sha256: 5ce7ef4d787494787133dc374d57de7d72e0173da56ce76e22d0030644a6b5f2