@swiftbrowser/native 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/native",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "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.0",
+    "@swiftbrowser/web": "0.17.0",
     "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,23 @@ struct ListElement: View {
 
     var body: some View {
         let props = ListProps(props: node.props)
-        let list = List {
-            ListRowsView(children: node.children)
-        }
+        // Selectable rows are the list's selection, as `List(selection:)`
+        // makes them: the whole cell takes the tap and shows the system's
+        // highlight, and choosing a row sends its `tap`. In edit mode a row
+        // keeps its own tap (several may be chosen).
+        let rows = Self.selectableRows(in: node)
+        let selects = !rows.isEmpty && props.editing != true
+        let list: AnyView = selects
+            ? AnyView(List(selection: Binding<Int?>(
+                get: { rows.first { ListRowProps(props: $0.props).selected }?.id },
+                set: { id in if let id { app?.dispatch(.tap(id)) } }
+            )) {
+                ListRowsView(children: node.children)
+            }
+            .environment(\.listSelectsRows, true))
+            : AnyView(List {
+                ListRowsView(children: node.children)
+            })
         let styled: AnyView = {
             switch props.style {
             case "plain": return AnyView(list.listStyle(.plain))
@@ -41,6 +55,31 @@ struct ListElement: View {
         refreshable
         #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 +165,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 in edit mode 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,92 @@ 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
+        // 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.
+    private func report(_ id: Int?) {
+        guard let id, id != reported else { return }
+        reported = id
+        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 the view is idle.
+    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) }
+                    if idle { report(Self.target(at: anchor, among: visible)) }
+                }
+                .onScrollPhaseChange { _, phase in
+                    idle = phase == .idle
+                    if 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 +256,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/wasm/SwiftBrowserNative.wasm

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