@swiftbrowser/native 0.0.0-stage → 0.10.0

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

@@ -0,0 +1,196 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `gauge`: a `Gauge` in one of its styles, or a determinate `ProgressView`
+/// (`style: "progress"`). Children, in order: the label (when `hasLabel`)
+/// and the current value label (when `hasCurrentValueLabel`).
+struct GaugeElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = GaugeProps(props: node.props)
+        let label = props.hasLabel ? node.children.first : nil
+        // The protocol writes the current value label in the secondary color
+        // (a `styled` around it); SwiftUI draws the slot that way itself.
+        let current = (props.hasCurrentValueLabel ? node.children.dropFirst(props.hasLabel ? 1 : 0).first : nil).map { $0.secondaryColorContent ?? $0 }
+        if props.style == "progress" {
+            ProgressView(value: props.value) {
+                if let label { ElementView(node: label) }
+            } currentValueLabel: {
+                if let current { ElementView(node: current) }
+            }
+        } else {
+            let gauge = Gauge(value: props.value, in: 0...1) {
+                if let label { ElementView(node: label) }
+            } currentValueLabel: {
+                if let current { ElementView(node: current) }
+            }
+            switch props.style {
+            case "accessoryCircular": gauge.gaugeStyle(.accessoryCircular)
+            case "accessoryCircularCapacity": gauge.gaugeStyle(.accessoryCircularCapacity)
+            case "accessoryLinear": gauge.gaugeStyle(.accessoryLinear)
+            #if !canImport(FoundationBridge) // not in the shim (nor the web renderer)
+            case "accessoryLinearCapacity": gauge.gaugeStyle(.accessoryLinearCapacity)
+            #endif
+            case "linearCapacity": gauge.gaugeStyle(.linearCapacity)
+            default: gauge.gaugeStyle(.automatic)
+            }
+        }
+    }
+}
+
+/// `datepicker`: a controlled `DatePicker`; the label is the child.
+struct DatePickerElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = DatePickerProps(props: node.props)
+        let selection = Binding<Date>(
+            get: { Date(timeIntervalSince1970: DatePickerProps(props: node.props).seconds) },
+            set: { app?.dispatch(.date(node.id, seconds: $0.timeIntervalSince1970.rounded(.down))) }
+        )
+        let components: DatePickerComponents = props.components == "hourAndMinute" ? [.hourAndMinute] : props.components == "dateAndTime" ? [.date, .hourAndMinute] : [.date]
+        let picker: AnyView = {
+            let minimum = props.min.map { Date(timeIntervalSince1970: $0) }
+            let maximum = props.max.map { Date(timeIntervalSince1970: $0) }
+            if let minimum, let maximum, minimum <= maximum {
+                return AnyView(DatePicker(selection: selection, in: minimum...maximum, displayedComponents: components) { ChildrenView(node: node) })
+            }
+            if let minimum {
+                return AnyView(DatePicker(selection: selection, in: minimum..., displayedComponents: components) { ChildrenView(node: node) })
+            }
+            if let maximum {
+                return AnyView(DatePicker(selection: selection, in: ...maximum, displayedComponents: components) { ChildrenView(node: node) })
+            }
+            return AnyView(DatePicker(selection: selection, displayedComponents: components) { ChildrenView(node: node) })
+        }()
+        let labeled = props.labelsHidden ? AnyView(picker.labelsHidden()) : picker
+        if let zone = props.timeZone, let timeZone = TimeZone(identifier: zone) {
+            labeled.environment(\.timeZone, timeZone)
+        } else {
+            labeled
+        }
+    }
+}
+
+/// `gesture`: one child; a drag sends `drag` events through its phases and
+/// a long press sends `longpress`.
+struct GestureElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+    @State private var dragging = false
+
+    var body: some View {
+        let props = GestureProps(props: node.props)
+        let content = ChildrenView(node: node).contentShape(Rectangle())
+        let dragged: AnyView = props.drag
+            ? AnyView(content.gesture(
+                DragGesture(minimumDistance: props.minimumDistance)
+                    .onChanged { value in
+                        let phase = dragging ? "changed" : "began"
+                        dragging = true
+                        send(value, phase: phase)
+                    }
+                    .onEnded { value in
+                        dragging = false
+                        send(value, phase: "ended")
+                    }
+            ))
+            : AnyView(content)
+        if props.longPress {
+            dragged.onLongPressGesture(minimumDuration: props.minimumDuration) {
+                app?.dispatch(.longPress(node.id))
+            }
+        } else {
+            dragged
+        }
+    }
+
+    private func send(_ value: DragGesture.Value, phase: String) {
+        app?.dispatch(.drag(
+            node.id, phase: phase,
+            translation: (value.translation.width, value.translation.height),
+            location: (value.location.x, value.location.y),
+            startLocation: (value.startLocation.x, value.startLocation.y),
+            velocity: (value.velocity.width, value.velocity.height)
+        ))
+    }
+}
+
+/// `viewthatfits`: the children are the candidates, in order.
+struct ViewThatFitsElement: View {
+    let node: ElementNode
+    var body: some View {
+        let axes = ViewThatFitsProps(props: node.props).axes
+        ViewThatFits(in: axes == "horizontal" ? .horizontal : axes == "vertical" ? .vertical : [.horizontal, .vertical]) {
+            ChildrenView(node: node)
+        }
+    }
+}
+
+/// `lazyspacer`: stands in for the rows not built yet; when it comes into
+/// view (a `List` and the lazy stacks build rows as they scroll in) it asks
+/// the app for the next batch with `lazy`.
+struct LazySpacerElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+    var body: some View {
+        let props = LazySpacerProps(props: node.props)
+        Color.clear
+            .frame(width: props.axis == "horizontal" ? 1 : nil, height: props.axis == "vertical" ? 1 : nil)
+            .onAppear {
+                let app = app
+                let id = node.id
+                Task { @MainActor in app?.dispatch(.lazy(id)) }
+            }
+    }
+}
+
+/// Reports an element's laid-out size (and frame, with `reportsFrame`) with
+/// `geometry` events, as a `GeometryReader` does, without changing its
+/// layout: anchor preferences (`zstack`) and custom shapes (`shape`) ask for
+/// it. Reported again when `reader` changes, since a new view has not heard it.
+struct SizeReportModifier: ViewModifier {
+    let id: Int
+    let report: SizeReportProps
+    @Environment(\.nativeApp) private var app
+    @State private var reported: CGRect = .null
+
+    func body(content: Content) -> some View {
+        content.background(
+            GeometryReader { proxy in
+                let frame = proxy.frame(in: .global)
+                Color.clear
+                    .onChange(of: frame, initial: true) { _, frame in send(frame) }
+                    .onChange(of: report.reader) { _, _ in
+                        reported = .null
+                        send(frame)
+                    }
+            }
+        )
+    }
+
+    private func send(_ frame: CGRect) {
+        let rounded = CGRect(x: frame.minX.rounded(), y: frame.minY.rounded(), width: frame.width.rounded(), height: frame.height.rounded())
+        if report.reportsFrame ? rounded == reported : rounded.size == reported.size { return }
+        reported = rounded
+        let event: RendererEvent = report.reportsFrame
+            ? .geometry(id, width: rounded.width, height: rounded.height, x: rounded.minX, y: rounded.minY)
+            : .geometry(id, width: rounded.width, height: rounded.height)
+        let app = app
+        Task { @MainActor in app?.dispatch(event) }
+    }
+}
+
+extension View {
+    /// Reports the element's size when its props ask for it.
+    func reportingSize(of node: ElementNode) -> AnyView {
+        let report = SizeReportProps(props: node.props)
+        return report.reportsSize || report.reportsFrame ? AnyView(modifier(SizeReportModifier(id: node.id, report: report))) : AnyView(self)
+    }
+}
+#endif

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

@@ -0,0 +1,246 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `navstack`: the children are `navscreen`s, bottom to top. The protocol
+/// expresses push and pop purely as children appearing and disappearing;
+/// natively the path is derived from them. A native pop (the back button, an
+/// edge swipe) sends `tap` with the popped screen's id, as the protocol says,
+/// and the app removes the child in the same call, so the next read of the
+/// path already agrees with the screen.
+struct NavigationStackElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let screens = node.children.filter { $0.kind == "navscreen" }
+        let pushed = screens.dropFirst().map(\.id)
+        let path = Binding<[Int]>(
+            get: { node.children.filter { $0.kind == "navscreen" }.dropFirst().map(\.id) },
+            set: { next in
+                // Only pops come from here (pushes come from the app).
+                for id in pushed where !next.contains(id) {
+                    app?.dispatch(.tap(id))
+                }
+            }
+        )
+        NavigationStack(path: path) {
+            Group {
+                if let root = screens.first {
+                    NavigationScreenElement(node: root)
+                }
+            }
+            .navigationDestination(for: Int.self) { id in
+                if let screen = node.children.first(where: { $0.id == id }) {
+                    NavigationScreenElement(node: screen)
+                } else {
+                    // Popped by the app already; SwiftUI is on its way out.
+                    Color.clear
+                }
+            }
+        }
+    }
+}
+
+/// `navscreen`: the content, with its `toolbar` and `searchfield` children as
+/// the bar's items and the search field, and its title.
+struct NavigationScreenElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = NavScreenProps(props: node.props)
+        let toolbars = node.children.filter { $0.kind == "toolbar" }
+        let search = node.children.first { $0.kind == "searchfield" }
+        let content = ZStack {
+            ForEach(node.children(except: ["toolbar", "searchfield"])) { ElementView(node: $0) }
+        }
+        let titled = content
+            .navigationTitle(props.title)
+            .toolbar { ScreenToolbar(toolbars: toolbars) }
+        let searched: AnyView = {
+            guard let search else { return AnyView(titled) }
+            let searchProps = SearchFieldProps(props: search.props)
+            return AnyView(titled.searchable(
+                text: Binding(get: { SearchFieldProps(props: search.props).text }, set: { app?.dispatch(.text(search.id, $0)) }),
+                prompt: Text(verbatim: searchProps.placeholder)
+            ))
+        }()
+        #if os(iOS) || canImport(FoundationBridge)
+        let modeTitled = searched
+            .navigationBarTitleDisplayMode(props.displayMode == "inline" ? .inline : props.displayMode == "large" ? .large : .automatic)
+        #if canImport(FoundationBridge)
+        modeTitled // the shim has no `navigationBarBackButtonHidden` (nor does the protocol carry it)
+        #else
+        modeTitled.navigationBarBackButtonHidden(props.backButtonHidden)
+        #endif
+        #else
+        searched
+        #endif
+    }
+
+    #if os(iOS) || canImport(FoundationBridge)
+    static let leadingPlacement: ToolbarItemPlacement = .topBarLeading
+    static let trailingPlacement: ToolbarItemPlacement = .topBarTrailing
+    static let bottomPlacement: ToolbarItemPlacement = .bottomBar
+    #else
+    static let leadingPlacement: ToolbarItemPlacement = .navigation
+    static let trailingPlacement: ToolbarItemPlacement = .primaryAction
+    static let bottomPlacement: ToolbarItemPlacement = .automatic
+    #endif
+
+    /// The protocol's placement names as SwiftUI's.
+    static func placement(_ name: String) -> ToolbarItemPlacement {
+        switch name {
+        case "leading": return leadingPlacement
+        case "principal": return .principal
+        case "secondary": return .secondaryAction
+        case "bottom": return bottomPlacement
+        default: return trailingPlacement // `trailing`, and `largeTitle` beside it
+        }
+    }
+}
+
+/// A screen's `toolbar` elements as toolbar content: one item per element
+/// in the app's order, as the app made them, so items of one placement
+/// group (and share the bar's glass) as the app's do. A toolbar content
+/// builder takes no loop, so the elements go in by index, eight to a chunk
+/// and the rest in the next.
+struct ScreenToolbar: ToolbarContent {
+    let toolbars: [ElementNode]
+    var from = 0
+
+    var body: some ToolbarContent {
+        item(0)
+        item(1)
+        item(2)
+        item(3)
+        item(4)
+        item(5)
+        item(6)
+        item(7)
+        if from + 8 < toolbars.count {
+            ScreenToolbar(toolbars: toolbars, from: from + 8)
+        }
+    }
+
+    @ToolbarContentBuilder
+    private func item(_ offset: Int) -> some ToolbarContent {
+        if from + offset < toolbars.count {
+            ToolbarElement(node: toolbars[from + offset])
+        }
+    }
+}
+
+/// One `toolbar` element: a `ToolbarSpacer` for a `spacer` (iOS 26; a
+/// `Spacer` item before it), else an item with the element's children,
+/// without the bar's shared glass when `sharedBackground` is `hidden` (iOS 26).
+struct ToolbarElement: ToolbarContent {
+    let node: ElementNode
+
+    var body: some ToolbarContent {
+        let props = ToolbarProps(props: node.props)
+        let placement = NavigationScreenElement.placement(props.placement)
+        if let spacer = props.spacer {
+            if #available(iOS 26, macOS 26, *) {
+                ToolbarSpacer(spacer == "fixed" ? .fixed : .flexible, placement: placement)
+            } else {
+                ToolbarItem(placement: placement) { Spacer() }
+            }
+        } else if props.sharedBackground == "hidden" {
+            if #available(iOS 26, macOS 26, *) {
+                ToolbarItem(placement: placement) { ChildrenView(node: node) }.sharedBackgroundVisibility(.hidden)
+            } else {
+                ToolbarItem(placement: placement) { ChildrenView(node: node) }
+            }
+        } else {
+            ToolbarItem(placement: placement) { ChildrenView(node: node) }
+        }
+    }
+}
+
+/// `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.
+struct NavigationLinkElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = NavLinkProps(props: node.props)
+        let inList = node.ancestor(ofKind: "list") != nil
+        Button {
+            app?.dispatch(.tap(node.id))
+        } label: {
+            if inList {
+                // The disclosure chevron in the trailing 22 points, as measured
+                // against iOS's row: 13 pt semibold, 2 in from the content's edge
+                // (the web renderer's LIST_CHEVRON_WIDTH reserves 20).
+                HStack(spacing: 0) {
+                    ChildrenView(node: node)
+                    Spacer(minLength: 0)
+                    Image(systemName: "chevron.right")
+                        .font(.system(size: 13, weight: .semibold))
+                        .foregroundStyle(.tertiary)
+                        .frame(width: 20, alignment: .trailing)
+                        .padding(.trailing, 2)
+                }
+                .contentShape(Rectangle())
+            } else {
+                ChildrenView(node: node)
+            }
+        }
+        .buttonStyle(.plain)
+        .foregroundStyle(inList || props.plain ? AnyShapeStyle(HierarchicalShapeStyle.primary) : AnyShapeStyle(TintShapeStyle()))
+        .listRowBackground(props.selected ? Color.accentColor.opacity(0.15) : nil)
+    }
+}
+
+/// `tabview`: one `tab` child per tab; the bar item shows its title and symbol.
+struct TabViewElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let tabs = node.children.filter { $0.kind == "tab" }
+        let selection = Binding(
+            get: { TabViewProps(props: node.props).selected },
+            set: { app?.dispatch(.select(node.id, $0)) }
+        )
+        if #available(iOS 18, macOS 15, *) {
+            TabView(selection: selection) {
+                ForEach(Array(tabs.enumerated()), id: \.element.id) { index, tab in
+                    let props = TabProps(props: tab.props)
+                    Tab(props.title, systemImage: props.systemImage ?? "", value: index) {
+                        ChildrenView(node: tab)
+                    }
+                    .badge(props.badge.map { Text(verbatim: $0) })
+                }
+            }
+        } else {
+            TabView(selection: selection) {
+                ForEach(Array(tabs.enumerated()), id: \.element.id) { index, tab in
+                    let props = TabProps(props: tab.props)
+                    let item = ChildrenView(node: tab)
+                        .tabItem {
+                            if let symbol = props.systemImage {
+                                Label(props.title, systemImage: symbol)
+                            } else if let image = props.image {
+                                Label(props.title, image: image)
+                            } else {
+                                Text(verbatim: props.title)
+                            }
+                        }
+                        .tag(index)
+                    if let badge = props.badge {
+                        item.badge(Text(verbatim: badge))
+                    } else {
+                        item
+                    }
+                }
+            }
+        }
+    }
+}
+#endif

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

@@ -0,0 +1,108 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `color`: a box filled with the color.
+struct ColorElement: View {
+    let node: ElementNode
+    var body: some View {
+        ColorProps(props: node.props).color.map(Color.init(spec:)) ?? Color.clear
+    }
+}
+
+/// `shape`: a built-in shape with a fill (null: the foreground) and a stroke.
+struct ShapeElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = ShapeProps(props: node.props)
+        let shape: AnyShape = {
+            let base = AnyShape(spec: props)
+            if let from = props.trimFrom, let to = props.trimTo { return AnyShape(base.trim(from: from, to: to)) }
+            return base
+        }()
+        let fill: AnyShapeStyle? = props.fill.map(AnyShapeStyle.init(spec:)) ?? (props.fillIsNull && props.stroke == nil ? AnyShapeStyle(ForegroundStyle()) : nil)
+        ZStack {
+            if let fill {
+                shape.fill(fill)
+            }
+            if let stroke = props.stroke {
+                let style = StrokeStyle(lineWidth: stroke.lineWidth, dash: stroke.dash.map { CGFloat($0) })
+                let paint = stroke.style.map(AnyShapeStyle.init(spec:)) ?? AnyShapeStyle(ForegroundStyle())
+                if stroke.inset, props.trimFrom == nil, let insettable = props.insettableShape {
+                    strokeBorder(insettable, paint, style)
+                } else if stroke.inset {
+                    // A path (or a trimmed shape) cannot be inset: padding the
+                    // stroked copy by half the line keeps the line inside.
+                    shape.stroke(paint, style: style).padding(stroke.lineWidth / 2)
+                } else {
+                    shape.stroke(paint, style: style)
+                }
+            }
+        }
+    }
+}
+
+/// `.strokeBorder` needs the concrete shape (the existential is opened here).
+private func strokeBorder(_ shape: some InsettableShape, _ paint: AnyShapeStyle, _ style: StrokeStyle) -> AnyView {
+    AnyView(shape.strokeBorder(paint, style: style))
+}
+
+extension ShapeProps {
+    /// The built-in shape, which can be inset; nil for a path.
+    var insettableShape: (any InsettableShape)? {
+        switch shape {
+        case "circle": return Circle()
+        case "capsule": return Capsule()
+        case "ellipse": return Ellipse()
+        case "roundedRectangle", "containerRelative": return RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
+        case "path": return nil
+        default: return Rectangle()
+        }
+    }
+}
+
+extension AnyShape {
+    init(spec: ShapeProps) {
+        switch spec.shape {
+        case "circle": self = AnyShape(Circle())
+        case "capsule": self = AnyShape(Capsule())
+        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) {
+                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.
+                self = AnyShape(NoPathShape())
+            }
+            #endif
+        default: self = AnyShape(Rectangle())
+        }
+    }
+}
+
+/// A custom shape from SVG path data (`Path(_:)` parses 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.
+struct NoPathShape: Shape {
+    func path(in rect: CGRect) -> Path { Path() }
+}
+
+struct PathShape: Shape {
+    let path: Path
+    let size: CGSize?
+    func path(in rect: CGRect) -> Path {
+        guard let size, size.width > 0, size.height > 0, size != rect.size else { return path.offsetBy(dx: rect.minX, dy: rect.minY) }
+        let transform = CGAffineTransform(translationX: rect.minX, y: rect.minY).scaledBy(x: rect.width / size.width, y: rect.height / size.height)
+        return path.applying(transform)
+    }
+}
+#endif