@swiftbrowser/native 0.18.3 → 0.21.0

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

@@ -0,0 +1,378 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+#if canImport(UniformTypeIdentifiers)
+import UniformTypeIdentifiers
+#endif
+
+// The kinds that draw or lay out on the app's say: a `canvas` replaying the
+// commands the app's renderer recorded, a custom `layout` answered by the
+// app's JavaScript, and the drag and drop pair (docs/native.md, "Views").
+
+// MARK: - canvas
+
+/// `canvas`: SwiftUI's `Canvas`, replaying each command with the context's state as the app recorded
+/// it: its clips (in the canvas's coordinates), then its transform, opacity, blend mode and filters.
+/// It fills its proposal and clips the drawing to its box, as the page's does.
+struct CanvasElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = CanvasProps(props: node.props)
+        Canvas { context, _ in
+            for command in props.commands { draw(command, into: context) }
+        }
+        .clipped()
+    }
+
+    private func draw(_ command: CanvasCommand, into canvas: GraphicsContext) {
+        var context = canvas
+        for clip in command.clips {
+            if let path = Path(svg: clip) { context.clip(to: path) }
+        }
+        if let m = command.transform { context.transform = CGAffineTransform(a: m[0], b: m[1], c: m[2], d: m[3], tx: m[4], ty: m[5]) }
+        context.opacity = command.opacity
+        if let mode = command.blendMode { setBlendMode(mode, of: &context) }
+        for filter in command.filters { context.addFilter(Self.filter(filter)) }
+        switch command.operation {
+        case .fill(let data, let shading, let evenOdd):
+            guard let path = Path(svg: data) else { return }
+            context.fill(path, with: Self.shading(shading), style: FillStyle(eoFill: evenOdd))
+        case .stroke(let data, let shading, let spec):
+            guard let path = Path(svg: data) else { return }
+            context.stroke(path, with: Self.shading(shading), style: StrokeStyle(
+                lineWidth: spec.lineWidth,
+                lineCap: spec.lineCap == "round" ? .round : spec.lineCap == "square" ? .square : .butt,
+                lineJoin: spec.lineJoin == "round" ? .round : spec.lineJoin == "bevel" ? .bevel : .miter,
+                miterLimit: spec.miterLimit ?? 10,
+                dash: spec.dash.map { CGFloat($0) },
+                dashPhase: spec.dashPhase
+            ))
+        case .text(let text, let x, let y, let anchor, let shading, let font):
+            var resolved = context.resolve(font.map { Text(verbatim: text).font(Font(spec: $0)) } ?? Text(verbatim: text))
+            resolved.shading = Self.shading(shading)
+            context.draw(resolved, at: CGPoint(x: x, y: y), anchor: UnitPoint(spec: anchor))
+        case .image(let image, let x, let y, let anchor, let width, let height, let shading):
+            // A symbol or a catalog image; a remote one has no bytes to draw synchronously here.
+            let source: Image
+            switch image {
+            case .symbol(let name, _): source = Image(systemName: name)
+            case .asset(let name, _): source = Image(name)
+            default: return
+            }
+            var resolved = context.resolve(source)
+            if let shading { resolved.shading = Self.shading(shading) }
+            if let width, let height {
+                let origin = CGPoint(x: x - anchor.x * width, y: y - anchor.y * height)
+                context.draw(resolved, in: CGRect(origin: origin, size: CGSize(width: width, height: height)))
+            } else {
+                context.draw(resolved, at: CGPoint(x: x, y: y), anchor: UnitPoint(spec: anchor))
+            }
+        }
+    }
+
+    static func shading(_ spec: CanvasShadingSpec) -> GraphicsContext.Shading {
+        let gradient = { (stops: [GradientStopSpec]) in Gradient(stops: stops.map { Gradient.Stop(color: Color(spec: $0.color), location: $0.location) }) }
+        switch spec {
+        case .style(let style):
+            return .style(AnyShapeStyle(spec: style))
+        case .linearGradient(let stops, let start, let end):
+            return .linearGradient(gradient(stops), startPoint: CGPoint(x: start.x, y: start.y), endPoint: CGPoint(x: end.x, y: end.y))
+        case .radialGradient(let stops, let center, let startRadius, let endRadius):
+            return .radialGradient(gradient(stops), center: CGPoint(x: center.x, y: center.y), startRadius: startRadius, endRadius: endRadius)
+        }
+    }
+
+    static func filter(_ spec: CanvasFilterSpec) -> GraphicsContext.Filter {
+        switch spec {
+        case .blur(let radius): .blur(radius: radius)
+        case .shadow(let color, let radius, let x, let y): .shadow(color: color.map(Color.init(spec:)) ?? Color.black.opacity(0.33), radius: radius, x: x, y: y)
+        case .grayscale(let amount): .grayscale(amount)
+        case .saturation(let amount): .saturation(amount)
+        case .brightness(let amount): .brightness(amount)
+        case .contrast(let amount): .contrast(amount)
+        case .hueRotation(let degrees): .hueRotation(.degrees(degrees))
+        case .invert(let amount): .colorInvert(amount)
+        }
+    }
+
+    /// The command's CSS blend mode. Assigned member by member: the context's blend mode is its own type
+    /// natively and the view's `BlendMode` in the shim, and both name these.
+    private func setBlendMode(_ name: String, of context: inout GraphicsContext) {
+        switch name {
+        case "multiply": context.blendMode = .multiply
+        case "screen": context.blendMode = .screen
+        case "overlay": context.blendMode = .overlay
+        case "darken": context.blendMode = .darken
+        case "lighten": context.blendMode = .lighten
+        case "color-dodge", "colorDodge": context.blendMode = .colorDodge
+        case "color-burn", "colorBurn": context.blendMode = .colorBurn
+        case "soft-light", "softLight": context.blendMode = .softLight
+        case "hard-light", "hardLight": context.blendMode = .hardLight
+        case "difference": context.blendMode = .difference
+        case "exclusion": context.blendMode = .exclusion
+        case "hue": context.blendMode = .hue
+        case "saturation": context.blendMode = .saturation
+        case "color": context.blendMode = .color
+        case "luminosity": context.blendMode = .luminosity
+        case "plus-lighter", "plusLighter": context.blendMode = .plusLighter
+        case "plus-darker", "plusDarker": context.blendMode = .plusDarker
+        default: context.blendMode = .normal
+        }
+    }
+}
+
+// MARK: - layout
+
+/// `layout`: a SwiftUI `Layout` the app's JavaScript answers. After a pass it reports the proposal it
+/// was placed with and each child's min, ideal and max sizes (`layout`, deferred past the pass, as
+/// `geometry` is, and only when they changed); the app answers with the element's `size` and `frames`.
+/// Until the first answer it fills its proposal; for another proposal it reads its flexibility from the
+/// answer's `sizes`, and places the children at the last frames.
+struct LayoutElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+    @State private var reporter = LayoutReporter()
+
+    var body: some View {
+        let reporter = reporter
+        let id = node.id
+        let app = app
+        let layout = AppLayout(props: LayoutProps(props: node.props)) { record in
+            reporter.report(RendererEvent.layout(id, proposal: record.proposal, children: record.children), app: app)
+        }
+        layout { ChildrenView(node: node) }
+    }
+}
+
+/// The last record a `layout` element sent: a pass that measured the same sends nothing.
+final class LayoutReporter: @unchecked Sendable {
+    private var last: RendererEvent?
+
+    func report(_ event: RendererEvent, app: NativeApp?) {
+        guard event != last else { return }
+        last = event
+        Task { @MainActor in app?.dispatch(event) }
+    }
+}
+
+struct AppLayout: Layout {
+    struct Record {
+        var proposal: LayoutProposalSpec
+        var children: [LayoutMeasurementSpec]
+    }
+
+    let props: LayoutProps
+    let report: (Record) -> Void
+
+    private static func spec(_ proposal: ProposedViewSize) -> LayoutProposalSpec {
+        LayoutProposalSpec(width: proposal.width.map { LayoutDimensionSpec(Double($0)) }, height: proposal.height.map { LayoutDimensionSpec(Double($0)) })
+    }
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        if let size = props.size, props.proposal == Self.spec(proposal) { return CGSize(width: size.width, height: size.height) }
+        if let min = props.min, let ideal = props.ideal, let max = props.max {
+            func axis(_ proposed: CGFloat?, _ min: LayoutDimensionSpec, _ ideal: LayoutDimensionSpec, _ max: LayoutDimensionSpec) -> CGFloat {
+                guard let proposed else { return ideal.value.isFinite ? ideal.value : 0 }
+                let clamped = Swift.min(Swift.max(Double(proposed), min.value), max.value)
+                return clamped.isFinite ? clamped : (ideal.value.isFinite ? ideal.value : 0)
+            }
+            return CGSize(width: axis(proposal.width, min.width, ideal.width, max.width), height: axis(proposal.height, min.height, ideal.height, max.height))
+        }
+        return proposal.replacingUnspecifiedDimensions()
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        let measure = { (subview: LayoutSubview, proposal: ProposedViewSize) -> LayoutSizeSpec in
+            let size = subview.sizeThatFits(proposal)
+            return LayoutSizeSpec(width: Double(size.width), height: Double(size.height))
+        }
+        report(Record(
+            proposal: Self.spec(proposal),
+            children: subviews.map { LayoutMeasurementSpec(min: measure($0, .zero), ideal: measure($0, .unspecified), max: measure($0, .infinity)) }
+        ))
+        if let frames = props.frames, frames.count == subviews.count {
+            for (subview, frame) in zip(subviews, frames) {
+                subview.place(at: CGPoint(x: bounds.minX + frame.x, y: bounds.minY + frame.y), anchor: .topLeading, proposal: ProposedViewSize(width: frame.width, height: frame.height))
+            }
+        } else {
+            for subview in subviews { subview.place(at: bounds.origin, anchor: .topLeading, proposal: ProposedViewSize(bounds.size)) }
+        }
+    }
+}
+
+// MARK: - drag and drop
+
+/// `draggable`: SwiftUI's `.draggable`, carrying the element's id as text: what is dragged stays in
+/// the app, which makes it at `dragstart` (sent as the drag begins) and hands it to the destination the
+/// drop names. A drop on no destination sends no `dragend`; the app's next lift replaces what it kept.
+struct DraggableElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let id = node.id
+        let app = app
+        content.draggable(Self.lift(id, app))
+    }
+
+    @ViewBuilder private var content: some View {
+        if node.children.count == 1 { ElementView(node: node.children[0]) } else { ChildrenView(node: node) }
+    }
+
+    /// The payload, made as the drag begins: the app hears `dragstart` first.
+    private static func lift(_ id: Int, _ app: NativeApp?) -> String {
+        Task { @MainActor in app?.dispatch(.dragStart(id)) }
+        return DragPayload.text(for: id)
+    }
+}
+
+#if !canImport(FoundationBridge)
+/// What a drop from another app carries: text (or a link) as the page offers it, or a file or folder, copied
+/// into a tmp folder of the app's while the drop runs (a received file is the system's only until then).
+struct DropPayload: Transferable {
+    enum Kind {
+        case text(String)
+        case file(URL, folder: Bool)
+    }
+    let kind: Kind
+
+    static var transferRepresentation: some TransferRepresentation {
+        FileRepresentation(importedContentType: .folder) { received in
+            DropPayload(kind: .file(try Self.keep(received.file), folder: true))
+        }
+        FileRepresentation(importedContentType: .item) { received in
+            DropPayload(kind: .file(try Self.keep(received.file), folder: false))
+        }
+        ProxyRepresentation { (url: URL) in DropPayload(kind: .text(url.absoluteString)) }
+        ProxyRepresentation { (text: String) in DropPayload(kind: .text(text)) }
+    }
+
+    /// The received item copied into a folder of its own in tmp, registered as picked (PickedFiles) until the app releases it.
+    private static func keep(_ received: URL) throws -> URL {
+        let folder = FileManager.default.temporaryDirectory.appendingPathComponent("swiftbrowser-drops-\(UUID().uuidString)", isDirectory: true)
+        try FileManager.default.createDirectory(at: folder, withIntermediateDirectories: true)
+        let kept = folder.appendingPathComponent(received.lastPathComponent)
+        try FileManager.default.copyItem(at: received, to: kept)
+        PickedFiles.shared.register([kept], temporary: folder)
+        return kept
+    }
+}
+
+/// `dropdestination`: SwiftUI's `.dropDestination`. A drag over it sends `drop` `entered` and `exited`; a
+/// drop sends `performed` with the `draggable` it came from (and that one's `dragend`), or, for what another
+/// app dragged in and `accepts` takes, the text as `items`, or each file (a dropped folder's at any depth, named
+/// by their paths in it) as an item still on disk: `{ type, name, path?, url, size }`, which the app reads on
+/// demand through the files bridge (a `LazyFile` in @swiftbrowser/native).
+struct DropDestinationElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let id = node.id
+        let app = app
+        let props = DropDestinationProps(props: node.props)
+        content.dropDestination(for: DropPayload.self) { payloads, location in
+            var events: [RendererEvent] = []
+            var outside: [JSONValue] = []
+            for payload in payloads {
+                switch payload.kind {
+                case .text(let text):
+                    if let source = DragPayload.source(of: text) {
+                        events.append(.drop(id, phase: "performed", source: source, x: location.x, y: location.y))
+                        events.append(.dragEnd(source))
+                    } else if props.acceptsText {
+                        let link = URL(string: text).map { $0.scheme != nil && !text.contains(where: \.isWhitespace) } ?? false
+                        outside.append(.object(["type": .string(link ? "text/uri-list" : "text/plain"), "text": .string(text)]))
+                    }
+                case .file(let url, let folder):
+                    guard props.acceptsFiles else { continue }
+                    outside.append(contentsOf: Self.fileItems(url, folder: folder, props: props))
+                }
+            }
+            if !outside.isEmpty { events.append(.drop(id, phase: "performed", items: outside, x: location.x, y: location.y)) }
+            guard !events.isEmpty else { return false }
+            let sent = events
+            Task { @MainActor in for event in sent { app?.dispatch(event) } }
+            return true
+        } isTargeted: { targeted in
+            Task { @MainActor in app?.dispatch(.drop(id, phase: targeted ? "entered" : "exited")) }
+        }
+    }
+
+    /// A dropped file as one item, or a dropped folder's files (at any depth, hidden ones left out) as items named by
+    /// their paths from the folder, the folder's name first, as the page names a dropped folder's files.
+    private static func fileItems(_ url: URL, folder: Bool, props: DropDestinationProps) -> [JSONValue] {
+        let mime = { (file: URL) in UTType(filenameExtension: file.pathExtension)?.preferredMIMEType ?? "application/octet-stream" }
+        let item = { (file: URL, path: String?) -> JSONValue in
+            let size = (try? file.resourceValues(forKeys: [.fileSizeKey]))?.fileSize ?? 0
+            var value: JSONObject = [
+                "type": .string(mime(file)),
+                "name": .string(file.lastPathComponent),
+                "url": .string(file.standardizedFileURL.absoluteString),
+                "size": .number(Double(size)),
+            ]
+            if let path { value["path"] = .string(path) }
+            return .object(value)
+        }
+        guard folder else { return props.accepts(mimeType: mime(url)) ? [item(url, nil)] : [] }
+        let root = url.standardizedFileURL.pathComponents
+        guard let walker = FileManager.default.enumerator(at: url, includingPropertiesForKeys: [.isRegularFileKey], options: [.skipsHiddenFiles, .skipsPackageDescendants]) else { return [] }
+        var items: [JSONValue] = []
+        var urls: [URL] = []
+        for case let file as URL in walker {
+            guard (try? file.resourceValues(forKeys: [.isRegularFileKey]))?.isRegularFile == true, props.accepts(mimeType: mime(file)) else { continue }
+            let components = file.standardizedFileURL.pathComponents
+            guard components.count > root.count else { continue }
+            items.append(item(file, ([url.lastPathComponent] + components.dropFirst(root.count)).joined(separator: "/")))
+            urls.append(file)
+        }
+        PickedFiles.shared.register(urls)
+        return items
+    }
+
+    @ViewBuilder private var content: some View {
+        if node.children.count == 1 { ElementView(node: node.children[0]) } else { ChildrenView(node: node) }
+    }
+}
+#else
+/// `dropdestination`: SwiftUI's `.dropDestination(for: String.self)`, against the shim (the round trip): in-app
+/// drags, and text from outside that `accepts` takes; files need the system's `Transferable` (above).
+struct DropDestinationElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let id = node.id
+        let app = app
+        let accepts = DropDestinationProps(props: node.props).acceptsText
+        content.dropDestination(for: String.self) { texts, location in
+            var events: [RendererEvent] = []
+            var outside: [JSONValue] = []
+            for text in texts {
+                if let source = DragPayload.source(of: text) {
+                    events.append(.drop(id, phase: "performed", source: source, x: location.x, y: location.y))
+                    events.append(.dragEnd(source))
+                } else if accepts {
+                    let link = URL(string: text).map { $0.scheme != nil && !text.contains(where: \.isWhitespace) } ?? false
+                    outside.append(.object(["type": .string(link ? "text/uri-list" : "text/plain"), "text": .string(text)]))
+                }
+            }
+            if !outside.isEmpty { events.append(.drop(id, phase: "performed", items: outside, x: location.x, y: location.y)) }
+            guard !events.isEmpty else { return false }
+            let sent = events
+            Task { @MainActor in for event in sent { app?.dispatch(event) } }
+            return true
+        } isTargeted: { targeted in
+            Task { @MainActor in app?.dispatch(.drop(id, phase: targeted ? "entered" : "exited")) }
+        }
+    }
+
+    @ViewBuilder private var content: some View {
+        if node.children.count == 1 { ElementView(node: node.children[0]) } else { ChildrenView(node: node) }
+    }
+}
+#endif
+#endif

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

@@ -156,6 +156,7 @@ struct ListRowsView: View {
 /// children are view headers.
 struct SectionElement: View {
     let node: ElementNode
+    @Environment(\.nativeApp) private var app
 
     var body: some View {
         let props = SectionProps(props: node.props)
@@ -164,7 +165,24 @@ struct SectionElement: View {
         let rows = node.children.filter { $0.kind != "sectionheader" && $0.kind != "sectionfooter" }
         let title = props.header.flatMap { $0.isEmpty ? nil : $0 }
         let note = props.footer.flatMap { $0.isEmpty ? nil : $0 }
-        if header != nil || footer != nil {
+        if props.collapsible, #available(iOS 17, macOS 14, *) {
+            // `Section(isExpanded:)`: SwiftUI collapses it in a sidebar-style
+            // list and shows it whole elsewhere; the chevron's tap goes to the
+            // app, which flips the binding and sends `expanded` back.
+            let expanded = Binding<Bool>(
+                get: { SectionProps(props: node.props).expanded },
+                set: { _ in app?.dispatch(.tap(node.id)) }
+            )
+            Section(isExpanded: expanded) {
+                ListRowsView(children: rows)
+            } header: {
+                if let header {
+                    ChildrenView(node: header)
+                } else if let title {
+                    Text(verbatim: title)
+                }
+            }
+        } else if header != nil || footer != nil {
             // View headers and footers (`sectionheader` / `sectionfooter` children).
             Section {
                 ListRowsView(children: rows)
@@ -194,6 +212,28 @@ struct SectionElement: View {
     }
 }
 
+/// `disclosuregroup`: SwiftUI's own, its label the first child, its content
+/// the rest; the chevron's tap goes to the app, which flips the binding and
+/// sends `expanded` back.
+struct DisclosureGroupElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let expanded = Binding<Bool>(
+            get: { DisclosureGroupProps(props: node.props).expanded },
+            set: { _ in app?.dispatch(.tap(node.id)) }
+        )
+        DisclosureGroup(isExpanded: expanded) {
+            ForEach(Array(node.children.dropFirst())) { ElementView(node: $0) }
+        } label: {
+            if let label = node.children.first {
+                ElementView(node: label)
+            }
+        }
+    }
+}
+
 /// `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.

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

@@ -81,7 +81,9 @@ struct DatePickerElement: View {
 /// 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
+/// pan inside a two-finger zoom does not keep the zoom from starting; on
+/// iOS 18 they are read from the fingers (PinchTracker.swift), so they begin
+/// as soon as the fingers move. 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`).
@@ -117,6 +119,75 @@ struct GestureElement: View {
                 to: dragged, mode: props.mode
             )
             : dragged
+        #if os(iOS)
+        if props.magnify || props.rotate {
+            if #available(iOS 18.0, *) {
+                fingersPinch(pressed, props: props)
+            } else {
+                systemPinch(pressed, props: props)
+            }
+        } else {
+            pressed
+        }
+        #else
+        systemPinch(pressed, props: props)
+        #endif
+    }
+
+    /// The pinch from the fingers themselves (iOS 18): `SpatialEventGesture`
+    /// reports every finger, and PinchTracker.swift takes the scale, the
+    /// rotation and the midpoint from the first two, beginning as soon as
+    /// the thresholds pass (on the first move with none), as the web
+    /// renderer and Photos do. SwiftUI's `MagnifyGesture` begins only once
+    /// the system's pinch recognizer has made up its mind, a good way into
+    /// the spread.
+    #if os(iOS)
+    @available(iOS 18.0, *)
+    private func fingersPinch(_ view: AnyView, props: GestureProps) -> some View {
+        let fingers = fingers
+        let tracker: PinchTracker = {
+            if let current = fingers.tracker, current.magnify == props.magnify, current.rotate == props.rotate,
+               current.minimumScaleDelta == max(0, props.minimumScaleDelta), current.minimumAngleDelta == max(0, props.minimumAngleDelta) {
+                return current
+            }
+            let made = PinchTracker(magnify: props.magnify, rotate: props.rotate, minimumScaleDelta: props.minimumScaleDelta, minimumAngleDelta: props.minimumAngleDelta)
+            fingers.tracker = made
+            return made
+        }()
+        return view
+            .onGeometryChange(for: CGSize.self) { proxy in proxy.size } action: { size in fingers.size = size }
+            .simultaneousGesture(
+                SpatialEventGesture()
+                    .onChanged { events in
+                        let reported = events.map { PinchTracker.Finger(id: AnyHashable($0.id), location: $0.location, active: $0.phase == .active) }
+                        let cancelled = events.contains { $0.phase == .cancelled }
+                        let time = events.map(\.timestamp).max() ?? Date().timeIntervalSinceReferenceDate
+                        send(tracker.update(fingers: reported, cancelled: cancelled, at: time), size: fingers.size)
+                    }
+                    .onEnded { events in
+                        send(tracker.end(cancelled: events.contains { $0.phase == .cancelled }), size: fingers.size)
+                    }
+            )
+    }
+
+    private func send(_ report: PinchTracker.Report?, size: CGSize) {
+        guard let report else { return }
+        let anchor = (
+            x: size.width > 0 ? Double(report.startLocation.x / size.width) : 0.5,
+            y: size.height > 0 ? Double(report.startLocation.y / size.height) : 0.5
+        )
+        app?.dispatch(.pinch(
+            node.id, phase: report.phase, scale: report.scale, rotation: report.rotation, scaleVelocity: report.scaleVelocity, rotationVelocity: report.rotationVelocity,
+            startLocation: (Double(report.startLocation.x), Double(report.startLocation.y)), startAnchor: anchor,
+            location: (Double(report.location.x), Double(report.location.y))
+        ))
+    }
+    #endif
+
+    /// SwiftUI's own `MagnifyGesture` and `RotateGesture` (before iOS 18, and
+    /// on the Mac, where a trackpad pinch is no finger), with the fingers
+    /// tracked for the pinch's location where the system reports them.
+    private func systemPinch(_ pressed: AnyView, props: GestureProps) -> AnyView {
         let tracked = props.magnify || props.rotate ? trackingFingers(pressed) : pressed
         let magnified: AnyView = props.magnify
             ? AnyView(tracked.simultaneousGesture(
@@ -132,22 +203,19 @@ struct GestureElement: View {
                     }
             ))
             : 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 {
-            magnified
-        }
+        guard props.rotate else { return magnified }
+        return AnyView(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)
+                }
+        ))
     }
 
     /// The gesture on the view as `mode` composes it with the view's others and its subviews'.
@@ -224,6 +292,9 @@ final class Fingers {
     }
     var midpoint: CGPoint?
     var pinch: Pinch?
+    /// iOS 18: the pinch taken from the fingers, and the element's size for its anchor.
+    var tracker: PinchTracker?
+    var size: CGSize = .zero
 }
 
 /// `viewthatfits`: the children are the candidates, in order.