@swiftbrowser/native 0.17.7 → 0.18.0

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

@@ -0,0 +1,84 @@
+#if canImport(SwiftUI)
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// A screen's `keyboard` toolbars (`ToolbarItemGroup(placement: .keyboard)`)
+/// as a bottom safe-area inset of its content, drawn by `KeyboardBar` on
+/// iOS; elsewhere, and against the shim, the content is left as it is and
+/// the toolbars go to SwiftUI's own placement.
+struct KeyboardBarInset: ViewModifier {
+    let toolbars: [ElementNode]
+
+    func body(content: Content) -> some View {
+        #if os(iOS) && !canImport(FoundationBridge)
+        if toolbars.contains(where: { ToolbarProps(props: $0.props).spacer == nil }) {
+            content.safeAreaInset(edge: .bottom, spacing: 0) { KeyboardBar(toolbars: toolbars) }
+        } else {
+            content
+        }
+        #else
+        content
+        #endif
+    }
+}
+
+#if os(iOS) && !canImport(FoundationBridge)
+import Combine
+import UIKit
+
+/// The bar above the keyboard as Notes draws its format bar on iOS 26: a
+/// glass capsule 48 tall, inset 10 from the screen's sides, floating 10
+/// above the keyboard, there while the keyboard is up and gone with it.
+/// SwiftUI's `.keyboard` placement is the input accessory view, a bar flush
+/// with the keyboard across the screen, which the system's apps no longer
+/// show. The items are the screen's `keyboard` toolbars' children in one
+/// row, a `spacer` toolbar a `Spacer` (8 wide when fixed), as the page lays
+/// them out (docs/ops-protocol.md, "The keyboard toolbar"). As a safe-area
+/// inset of the content, the bar keeps the content above it, as the
+/// keyboard does; with the keyboard down it has no height.
+struct KeyboardBar: View {
+    let toolbars: [ElementNode]
+    @State private var shown = false
+
+    var body: some View {
+        Group {
+            if shown {
+                HStack(spacing: 0) {
+                    ForEach(toolbars) { toolbar in
+                        if let spacer = ToolbarProps(props: toolbar.props).spacer {
+                            if spacer == "fixed" { Spacer().frame(width: 8) } else { Spacer(minLength: 0) }
+                        } else {
+                            ChildrenView(node: toolbar)
+                        }
+                    }
+                }
+                .padding(.horizontal, 16)
+                .frame(maxWidth: .infinity, minHeight: 48)
+                .modifier(CapsuleGlass())
+                .padding(.horizontal, 10)
+                .padding(.bottom, 10)
+                .transition(.move(edge: .bottom).combined(with: .opacity))
+            }
+        }
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
+            withAnimation(.easeOut(duration: 0.25)) { shown = true }
+        }
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+            withAnimation(.easeOut(duration: 0.25)) { shown = false }
+        }
+    }
+}
+
+/// Liquid Glass from iOS 26; a material before it.
+private struct CapsuleGlass: ViewModifier {
+    func body(content: Content) -> some View {
+        if #available(iOS 26, *) {
+            content.glassEffect(.regular, in: .capsule)
+        } else {
+            content.background(.regularMaterial, in: Capsule())
+        }
+    }
+}
+#endif
+#endif

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

@@ -77,19 +77,28 @@ struct DatePickerElement: View {
     }
 }
 
-/// `gesture`: one child; a drag sends `drag` events through its phases and
-/// a long press sends `longpress`.
+/// `gesture`: one child; a drag sends `drag` events through its phases, a
+/// long press sends `longpress`, and two fingers spreading (`magnify`) or
+/// turning (`rotate`) send `pinch` events. The pinches go alongside the
+/// view's other gestures (`simultaneousGesture`), so a canvas's one-finger
+/// pan inside a two-finger zoom does not keep the zoom from starting. The
+/// drag and the long press attach as `mode` says (`.gesture`,
+/// `.highPriorityGesture` or `.simultaneousGesture`), and the drag's points
+/// are in `coordinateSpace` (`.local` or `.global`).
 struct GestureElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
     @State private var dragging = false
+    @State private var magnifying = false
+    @State private var rotating = false
+    @State private var fingers = Fingers()
 
     var body: some View {
         let props = GestureProps(props: node.props)
-        let content = ChildrenView(node: node).contentShape(Rectangle())
+        let content = AnyView(ChildrenView(node: node).contentShape(Rectangle()))
         let dragged: AnyView = props.drag
-            ? AnyView(content.gesture(
-                DragGesture(minimumDistance: props.minimumDistance)
+            ? attach(
+                DragGesture(minimumDistance: props.minimumDistance, coordinateSpace: props.coordinateSpace == "global" ? .global : .local)
                     .onChanged { value in
                         let phase = dragging ? "changed" : "began"
                         dragging = true
@@ -98,18 +107,99 @@ struct GestureElement: View {
                     .onEnded { value in
                         dragging = false
                         send(value, phase: "ended")
+                    },
+                to: content, mode: props.mode
+            )
+            : content
+        let pressed: AnyView = props.longPress
+            ? attach(
+                LongPressGesture(minimumDuration: props.minimumDuration).onEnded { _ in app?.dispatch(.longPress(node.id)) },
+                to: dragged, mode: props.mode
+            )
+            : dragged
+        let tracked = props.magnify || props.rotate ? trackingFingers(pressed) : pressed
+        let magnified: AnyView = props.magnify
+            ? AnyView(tracked.simultaneousGesture(
+                MagnifyGesture(minimumScaleDelta: props.minimumScaleDelta)
+                    .onChanged { value in
+                        let phase = magnifying ? "changed" : "began"
+                        magnifying = true
+                        sendPinch(phase: phase, scale: value.magnification, rotation: 0, scaleVelocity: value.velocity, rotationVelocity: 0, startLocation: value.startLocation, startAnchor: value.startAnchor)
+                    }
+                    .onEnded { value in
+                        magnifying = false
+                        sendPinch(phase: "ended", scale: value.magnification, rotation: 0, scaleVelocity: value.velocity, rotationVelocity: 0, startLocation: value.startLocation, startAnchor: value.startAnchor)
                     }
             ))
-            : AnyView(content)
-        if props.longPress {
-            dragged.onLongPressGesture(minimumDuration: props.minimumDuration) {
-                app?.dispatch(.longPress(node.id))
-            }
+            : tracked
+        if props.rotate {
+            magnified.simultaneousGesture(
+                RotateGesture(minimumAngleDelta: .degrees(props.minimumAngleDelta))
+                    .onChanged { value in
+                        let phase = rotating ? "changed" : "began"
+                        rotating = true
+                        sendPinch(phase: phase, scale: 1, rotation: value.rotation.degrees, scaleVelocity: 0, rotationVelocity: value.velocity.degrees, startLocation: value.startLocation, startAnchor: value.startAnchor)
+                    }
+                    .onEnded { value in
+                        rotating = false
+                        sendPinch(phase: "ended", scale: 1, rotation: value.rotation.degrees, scaleVelocity: 0, rotationVelocity: value.velocity.degrees, startLocation: value.startLocation, startAnchor: value.startAnchor)
+                    }
+            )
         } else {
-            dragged
+            magnified
+        }
+    }
+
+    /// The gesture on the view as `mode` composes it with the view's others and its subviews'.
+    private func attach<G: Gesture>(_ gesture: G, to view: AnyView, mode: String?) -> AnyView {
+        switch mode {
+        case "simultaneous": AnyView(view.simultaneousGesture(gesture))
+        case "highPriority": AnyView(view.highPriorityGesture(gesture))
+        default: AnyView(view.gesture(gesture))
         }
     }
 
+    private func sendPinch(phase: String, scale: CGFloat, rotation: Double, scaleVelocity: CGFloat, rotationVelocity: Double, startLocation: CGPoint, startAnchor: UnitPoint) {
+        let pinch = Fingers.Pinch(scale: scale, rotation: rotation, scaleVelocity: scaleVelocity, rotationVelocity: rotationVelocity, startLocation: startLocation, startAnchor: startAnchor)
+        fingers.pinch = phase == "ended" ? nil : pinch
+        sendPinch(pinch, phase: phase)
+    }
+
+    private func sendPinch(_ pinch: Fingers.Pinch, phase: String) {
+        app?.dispatch(.pinch(
+            node.id, phase: phase, scale: pinch.scale, rotation: pinch.rotation, scaleVelocity: pinch.scaleVelocity, rotationVelocity: pinch.rotationVelocity,
+            startLocation: (pinch.startLocation.x, pinch.startLocation.y), startAnchor: (pinch.startAnchor.x, pinch.startAnchor.y),
+            location: fingers.midpoint.map { ($0.x, $0.y) }
+        ))
+    }
+
+    /// The fingers on the element, for the pinch's `location`: SwiftUI's
+    /// `MagnifyGesture` and `RotateGesture` tell where the fingers began, not
+    /// where they are. A move of the fingers alone (two fingers panning)
+    /// sends the pinch again with the new midpoint. Before iOS 18 there is no
+    /// `SpatialEventGesture`, and the pinch goes without a location.
+    private func trackingFingers(_ view: AnyView) -> AnyView {
+        // Apple's SwiftUI only: the shim the package also builds against has no spatial events.
+        #if os(iOS) || os(macOS)
+        guard #available(iOS 18.0, macOS 15.0, *) else { return view }
+        let fingers = fingers
+        return AnyView(view.simultaneousGesture(
+            SpatialEventGesture()
+                .onChanged { events in
+                    let down = events.filter { $0.phase == .active }.map(\.location)
+                    guard down.count >= 2 else { return }
+                    let midpoint = CGPoint(x: down.map(\.x).reduce(0, +) / CGFloat(down.count), y: down.map(\.y).reduce(0, +) / CGFloat(down.count))
+                    guard midpoint != fingers.midpoint else { return }
+                    fingers.midpoint = midpoint
+                    if let pinch = fingers.pinch { sendPinch(pinch, phase: "changed") }
+                }
+                .onEnded { _ in fingers.midpoint = nil }
+        ))
+        #else
+        return view
+        #endif
+    }
+
     private func send(_ value: DragGesture.Value, phase: String) {
         app?.dispatch(.drag(
             node.id, phase: phase,
@@ -121,6 +211,21 @@ struct GestureElement: View {
     }
 }
 
+/// A pinch element's fingers: their midpoint while two are down, and the
+/// pinch they drive. A reference, so a move of the fingers does not redraw.
+final class Fingers {
+    struct Pinch {
+        var scale: CGFloat
+        var rotation: Double
+        var scaleVelocity: CGFloat
+        var rotationVelocity: Double
+        var startLocation: CGPoint
+        var startAnchor: UnitPoint
+    }
+    var midpoint: CGPoint?
+    var pinch: Pinch?
+}
+
 /// `viewthatfits`: the children are the candidates, in order.
 struct ViewThatFitsElement: View {
     let node: ElementNode

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

@@ -109,12 +109,21 @@ struct NavigationScreenElement: View {
 
     var body: some View {
         let props = NavScreenProps(props: node.props)
-        let toolbars = node.children.filter { $0.kind == "toolbar" }
+        let allToolbars = node.children.filter { $0.kind == "toolbar" }
+        // On iOS the `keyboard` toolbars are a bar of the content's (KeyboardBar.swift), not SwiftUI's placement.
+        #if os(iOS) && !canImport(FoundationBridge)
+        let keyboardToolbars = allToolbars.filter { ToolbarProps(props: $0.props).placement == "keyboard" }
+        let toolbars = allToolbars.filter { ToolbarProps(props: $0.props).placement != "keyboard" }
+        #else
+        let keyboardToolbars: [ElementNode] = []
+        let toolbars = allToolbars
+        #endif
         let search = node.children.first { $0.kind == "searchfield" }
         let content = ZStack {
             ForEach(node.children(except: ["toolbar", "searchfield"])) { ElementView(node: $0) }
         }
         let titled = content
+            .modifier(KeyboardBarInset(toolbars: keyboardToolbars))
             .navigationTitle(props.title)
             .toolbar { ScreenToolbar(toolbars: toolbars) }
         let searched: AnyView = {
@@ -155,6 +164,8 @@ struct NavigationScreenElement: View {
         case "principal": return .principal
         case "secondary": return .secondaryAction
         case "bottom": return bottomPlacement
+        // The bar above the keyboard while a text input of the screen is focused.
+        case "keyboard": return .keyboard
         case "largeTitle":
             // In the large title's place: the shim's placement, and SwiftUI's
             // from iOS 26 (it stands in for `navigationTitle`'s text while the

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

@@ -29,7 +29,14 @@ struct ShapeElement: View {
                 shape.fill(fill)
             }
             if let stroke = props.stroke {
-                let style = StrokeStyle(lineWidth: stroke.lineWidth, dash: stroke.dash.map { CGFloat($0) })
+                let style = StrokeStyle(
+                    lineWidth: stroke.lineWidth,
+                    lineCap: stroke.lineCap == "round" ? .round : stroke.lineCap == "square" ? .square : .butt,
+                    lineJoin: stroke.lineJoin == "round" ? .round : stroke.lineJoin == "bevel" ? .bevel : .miter,
+                    miterLimit: stroke.miterLimit,
+                    dash: stroke.dash.map { CGFloat($0) },
+                    dashPhase: stroke.dashPhase
+                )
                 let paint = stroke.style.map(AnyShapeStyle.init(spec:)) ?? AnyShapeStyle(ForegroundStyle())
                 if stroke.inset, props.trimFrom == nil, let insettable = props.insettableShape {
                     strokeBorder(insettable, paint, style)
@@ -72,23 +79,37 @@ extension AnyShape {
         case "ellipse": self = AnyShape(Ellipse())
         case "roundedRectangle", "containerRelative": self = AnyShape(RoundedRectangle(cornerRadius: spec.cornerRadius, style: .continuous))
         case "path":
-            #if canImport(FoundationBridge)
-            // The shim's `Path` does not parse SVG path data yet: nothing to draw.
-            self = AnyShape(NoPathShape())
-            #else
-            if let path = spec.path, !path.isEmpty, let parsed = Path(path) {
+            if let data = spec.path, !data.isEmpty, let parsed = Path(svg: data) {
                 self = AnyShape(PathShape(path: parsed, size: spec.size.map { CGSize(width: $0.width, height: $0.height) }))
             } else {
-                // No path yet (the size is not reported): nothing to draw.
+                // No path yet (the size is not reported), or none to read: nothing to draw.
                 self = AnyShape(NoPathShape())
             }
-            #endif
         default: self = AnyShape(Rectangle())
         }
     }
 }
 
-/// A custom shape from SVG path data (`Path(_:)` parses it). The app drew it
+extension Path {
+    /// A path from SVG path data (`SVGPath`): what the protocol carries. SwiftUI's
+    /// own `Path(_:)` reads only `Path.description`'s form, so it read none of it.
+    init?(svg data: String) {
+        guard let elements = SVGPath.parse(data) else { return nil }
+        func point(_ p: SVGPath.Point) -> CGPoint { CGPoint(x: p.x, y: p.y) }
+        self.init()
+        for element in elements {
+            switch element {
+            case .move(let to): move(to: point(to))
+            case .line(let to): addLine(to: point(to))
+            case .quadCurve(let to, let control): addQuadCurve(to: point(to), control: point(control))
+            case .curve(let to, let control1, let control2): addCurve(to: point(to), control1: point(control1), control2: point(control2))
+            case .closeSubpath: closeSubpath()
+            }
+        }
+    }
+}
+
+/// A custom shape from SVG path data (`Path(svg:)` reads it). The app drew it
 /// for the size the element reported (`size`); until the next report it is
 /// stretched to the box, as the web renderer stretches its view box.
 /// A shape with no path, for a custom shape before its first size report.

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

@@ -4,17 +4,33 @@ import SwiftBrowserProtocol
 import SwiftBrowserTree
 import SwiftUI
 
+/// `vstack`; one with `pinned` is a `LazyVStack(pinnedViews:)`, whose `Section` children pin their headers.
 struct VStackElement: View {
     let node: ElementNode
     var body: some View {
         let props = StackProps(props: node.props)
-        VStack(alignment: HorizontalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
-            ChildrenView(node: node)
+        if let pinned = pinnedViews(props.pinned) {
+            LazyVStack(alignment: HorizontalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }, pinnedViews: pinned) {
+                ChildrenView(node: node)
+            }
+            .scrollTargetLayout(when: props.scrollTarget)
+        } else {
+            VStack(alignment: HorizontalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
+                ChildrenView(node: node)
+            }
+            .scrollTargetLayout(when: props.scrollTarget)
         }
-        .scrollTargetLayout(when: props.scrollTarget)
     }
 }
 
+/// `pinnedViews` from the protocol's names (`sectionHeaders`, `sectionFooters`); nil when none.
+func pinnedViews(_ names: [String]) -> PinnedScrollableViews? {
+    var views: PinnedScrollableViews = []
+    if names.contains("sectionHeaders") { views.insert(.sectionHeaders) }
+    if names.contains("sectionFooters") { views.insert(.sectionFooters) }
+    return views.isEmpty ? nil : views
+}
+
 /// `hstack`; a `Label` in its default style (the marked icon, `labelIcon` on
 /// its `styled` wrapper, then the title) is a `Label`, so iOS lays it out and
 /// colors it as one: the icon column and tint in a list row, the inherited
@@ -29,6 +45,11 @@ struct HStackElement: View {
             } icon: {
                 ElementView(node: icon)
             }
+        } else if let pinned = pinnedViews(props.pinned) {
+            LazyHStack(alignment: VerticalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }, pinnedViews: pinned) {
+                ChildrenView(node: node)
+            }
+            .scrollTargetLayout(when: props.scrollTarget)
         } else {
             HStack(alignment: VerticalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
                 ChildrenView(node: node)
@@ -97,7 +118,15 @@ struct GeometryElement: View {
         let props = GeometryProps(props: node.props)
         GeometryReader { proxy in
             let frame = proxy.frame(in: .global)
-            ChildrenView(node: node)
+            // The report hangs off a clear view filling the reader, not off the
+            // children: a reader whose content draws nothing (a component that
+            // renders null) has no view for a modifier to run on, and never
+            // reported. The children sit at its top leading corner, as a
+            // reader's content does.
+            ZStack(alignment: .topLeading) {
+                Color.clear
+                ChildrenView(node: node)
+            }
                 .onChange(of: frame, initial: true) { _, frame in
                     report(frame, reportsFrame: props.reportsFrame)
                 }
@@ -132,6 +161,13 @@ struct GeometryElement: View {
 /// time, on the marked element it names (`scrollID`, `.id(x)`): the view
 /// finds the latest in its content and scrolls to it.
 ///
+/// `reportsGeometry` (`.onScrollGeometryChange`, iOS 18) sends
+/// `scrollgeometry` as the view scrolls and lays out; `scrollOffset`
+/// (`ScrollPosition.scrollTo(x:y:)`, iOS 18) scrolls to a content offset
+/// once per serial. A view with an offset command is positioned by a
+/// `ScrollPosition` of its own and does not report ids (`reportsPosition`),
+/// since SwiftUI takes one position per scroll view.
+///
 /// 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),
@@ -148,6 +184,8 @@ struct ScrollViewElement: View {
     @State private var idle = true
     @State private var reported: Int?
     @State private var appeared = false
+    /// The `scrollOffset` serial last carried out.
+    @State private var offsetServed: Double = -1
 
     var body: some View {
         let props = ScrollViewProps(props: node.props)
@@ -166,10 +204,13 @@ struct ScrollViewElement: View {
             let scroll = ScrollView(axes, showsIndicators: props.showsIndicators) {
                 ChildrenView(node: node)
             }
-            let refreshed: AnyView = props.refreshable ? AnyView(scroll.refreshable { app?.dispatch(.refresh(node.id)) }) : AnyView(scroll)
+            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))
                 : props.snap == "viewAligned" ? AnyView(refreshed.scrollTargetBehavior(.viewAligned)) : refreshed
-            let positioned: AnyView = props.reportsPosition
+            let positioned: AnyView = props.scrollOffset != nil
+                ? offsetPositioned(snapped, props: props)
+                : props.reportsPosition
                 ? reportingSettled(AnyView(snapped.scrollPosition(id: Binding(get: { ahead ?? position }, set: { next in
                     guard next != position else { return }
                     position = next
@@ -177,7 +218,7 @@ struct ScrollViewElement: View {
                     if !Self.reportsSettled { report(next) }
                 }), anchor: anchor)), anchor: anchor)
                 : snapped
-            positioned
+            reportingGeometry(positioned, when: props.reportsGeometry)
                 .onAppear {
                     perform(request, props: props, with: proxy)
                     appeared = true
@@ -186,6 +227,22 @@ struct ScrollViewElement: View {
         }
     }
 
+    /// `defaultScrollAnchor`: the app's anchor, with all SwiftUI makes of it
+    /// (where the content starts, where it stays as it grows, and where
+    /// content smaller than the view sits). Without one, a view that scrolls
+    /// both ways keeps smaller content at its origin, as the page lays it out
+    /// (docs/ops-protocol.md, the `scrollview` layout row): SwiftUI centers it
+    /// along the vertical axis and reports the centering as a negative offset,
+    /// which put a short sheet in Numbers 92 points below its frozen header.
+    private func anchored(_ view: AnyView, props: ScrollViewProps) -> AnyView {
+        if let anchor = props.defaultScrollAnchor { return AnyView(view.defaultScrollAnchor(UnitPoint(spec: anchor))) }
+        guard props.axes == "both" else { return view }
+        #if !canImport(FoundationBridge)
+        if #available(iOS 18, macOS 15, *) { return AnyView(view.defaultScrollAnchor(.topLeading, for: .alignment)) }
+        #endif
+        return view
+    }
+
     private func perform(_ request: ScrollRequest?, props: ScrollViewProps, with proxy: ScrollViewProxy) {
         guard let request, request.serial > served else { return }
         served = request.serial
@@ -274,6 +331,43 @@ struct ScrollViewElement: View {
         return view
     }
 
+    /// `.onScrollGeometryChange` (iOS 18): the offset, the content's and the
+    /// view's sizes and the insets, sent in the action itself. The app
+    /// answers synchronously with a pass, and what that pass moves (Numbers'
+    /// frozen headers, offset by the scroll) SwiftUI draws in the update the
+    /// scroll is drawn in, as a `@State` set in the action is: the frame the
+    /// web renderer gets by sending the geometry in the animation frame of
+    /// the scroll, before it paints. Deferred a turn (as GeometryElement's
+    /// reports are, measured during layout), the headers trailed the cells
+    /// by a frame.
+    private func reportingGeometry(_ view: AnyView, when reports: Bool) -> AnyView {
+        guard reports else { return view }
+        #if !canImport(FoundationBridge)
+        if #available(iOS 18, macOS 15, *) {
+            let app = app
+            let id = node.id
+            return AnyView(view.onScrollGeometryChange(for: ScrollGeometryRecord.self) { geometry in
+                ScrollGeometryRecord(geometry)
+            } action: { _, record in
+                app?.dispatch(record.event(id))
+            })
+        }
+        #endif
+        return view
+    }
+
+    /// `scrollOffset` (iOS 18): a `ScrollPosition` of the view's own, told to
+    /// scroll to the command's point once per serial, from the view's
+    /// appearance on (the first pass has no size to scroll in).
+    private func offsetPositioned(_ view: AnyView, props: ScrollViewProps) -> AnyView {
+        #if !canImport(FoundationBridge)
+        if #available(iOS 18, macOS 15, *) {
+            return AnyView(OffsetPositioned(content: view, command: props.scrollOffset, served: $offsetServed))
+        }
+        #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 }
@@ -322,14 +416,15 @@ struct ScrollViewElement: View {
     }
 }
 
-/// `LazyVGrid`: `columns` are `GridItem`s; children are the cells.
+/// `LazyVGrid`: `columns` are `GridItem`s; children are the cells; `pinned` its `pinnedViews`.
 struct LazyVGridElement: View {
     let node: ElementNode
     var body: some View {
         LazyVGrid(
             columns: gridItems(node.props.array("columns") ?? []),
             alignment: HorizontalAlignment(name: node.props.string("alignment") ?? "center"),
-            spacing: node.props.double("spacing").map { CGFloat($0) }
+            spacing: node.props.double("spacing").map { CGFloat($0) },
+            pinnedViews: pinnedViews(node.props.array("pinned")?.compactMap(\.string) ?? []) ?? []
         ) {
             ChildrenView(node: node)
         }
@@ -342,7 +437,8 @@ struct LazyHGridElement: View {
         LazyHGrid(
             rows: gridItems(node.props.array("rows") ?? []),
             alignment: VerticalAlignment(name: node.props.string("alignment") ?? "center"),
-            spacing: node.props.double("spacing").map { CGFloat($0) }
+            spacing: node.props.double("spacing").map { CGFloat($0) },
+            pinnedViews: pinnedViews(node.props.array("pinned")?.compactMap(\.string) ?? []) ?? []
         ) {
             ChildrenView(node: node)
         }
@@ -384,4 +480,61 @@ struct GridRowElement: View {
         }
     }
 }
+#if !canImport(FoundationBridge)
+/// A `ScrollGeometry` as the protocol sends it; `Equatable` so the action hears real changes only.
+@available(iOS 18, macOS 15, *)
+struct ScrollGeometryRecord: Equatable {
+    var offset: CGPoint
+    var contentSize: CGSize
+    var containerSize: CGSize
+    var insets: EdgeInsets
+
+    init(_ geometry: ScrollGeometry) {
+        offset = geometry.contentOffset
+        contentSize = geometry.contentSize
+        containerSize = geometry.containerSize
+        insets = geometry.contentInsets
+    }
+
+    func event(_ id: Int) -> RendererEvent {
+        .scrollGeometry(
+            id, offset: (offset.x, offset.y), contentSize: (contentSize.width, contentSize.height),
+            containerSize: (containerSize.width, containerSize.height),
+            contentInsets: (insets.top, insets.leading, insets.bottom, insets.trailing)
+        )
+    }
+}
+
+/// A scroll view positioned by a `ScrollPosition`, scrolled to each new `scrollOffset` command.
+@available(iOS 18, macOS 15, *)
+struct OffsetPositioned: View {
+    let content: AnyView
+    let command: ScrollOffsetSpec?
+    @Binding var served: Double
+    @State private var position = ScrollPosition(edge: .top)
+    @State private var appeared = false
+
+    var body: some View {
+        content
+            .scrollPosition($position)
+            .onAppear {
+                appeared = true
+                perform()
+            }
+            .onChange(of: command?.serial) { _, _ in perform() }
+    }
+
+    private func perform() {
+        guard appeared, let command, command.serial > served else { return }
+        served = command.serial
+        // `scrollTo` takes the axes it is given; an absent one keeps its offset.
+        switch (command.x.map { CGFloat($0) }, command.y.map { CGFloat($0) }) {
+        case let (x?, y?): position.scrollTo(x: x, y: y)
+        case let (x?, nil): position.scrollTo(x: x)
+        case let (nil, y?): position.scrollTo(y: y)
+        case (nil, nil): break
+        }
+    }
+}
+#endif
 #endif

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

@@ -40,15 +40,28 @@ struct TextElement: View {
             case .asset(let name, _): text = Text(Image(name))
             default: text = Text(verbatim: "")
             }
-        } else if let link = run.link, let url = URL(string: link) {
-            // Markdown gives a tappable link run; the text is escaped for it.
+        } else if run.link != nil || run.background != nil {
+            // A link run is tappable, a background run colored behind its
+            // glyphs: both are attributes of an `AttributedString`, which
+            // `Text` has and `Text`'s own modifiers do not.
             var string = AttributedString(run.text ?? "")
-            string.link = url
+            if let link = run.link, let url = URL(string: link) { string.link = url }
+            if let background = run.background { string.backgroundColor = Color(spec: background) }
             text = Text(string)
         } else {
             text = Text(verbatim: run.text ?? "")
         }
-        if let font = run.font { text = text.font(Font(spec: font)) }
+        if let font = run.font {
+            if font.size == nil, font.textStyle == nil {
+                // Only a weight or design (a bold run): over the text's own
+                // font, as `StyleModifier` does, not the body font in it.
+                if let weight = font.weight { text = text.fontWeight(Font.Weight(name: weight)) }
+                if let design = font.design { text = text.fontDesign(Font.Design(name: design)) }
+                if font.monospacedDigit { text = text.monospacedDigit() }
+            } else {
+                text = text.font(Font(spec: font))
+            }
+        }
         if run.italic { text = text.italic() }
         if run.underline { text = text.underline(true, color: run.underlineColor.map(Color.init(spec:))) }
         if run.strikethrough { text = text.strikethrough(true, color: run.strikethroughColor.map(Color.init(spec:))) }