@swiftbrowser/native 0.11.0 → 0.13.0

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

@@ -0,0 +1,340 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `chart`: Swift Charts as the protocol carries it, already resolved (the
+/// marks in unit coordinates of the plot, the axes' grid lines, ticks and
+/// formatted labels, the legend), drawn with paths and texts, following the
+/// web renderer's layout rules (docs/ops-protocol.md, "Layout rules: chart"):
+/// the legend row, the axis bands as wide as their labels, and the plot in
+/// what remains. `chartitem` children are annotations against their mark's
+/// rect, or axis label views at their tick.
+struct ChartElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = ChartProps(props: node.props)
+        let items = node.children.filter { $0.kind == "chartitem" }
+        GeometryReader { geometry in
+            ChartCanvas(props: props, items: items, size: geometry.size)
+        }
+    }
+}
+
+/// The chart's boxes in points.
+struct ChartLayout {
+    var plot: CGRect
+    var xBand: CGRect?
+    var yBand: CGRect?
+    var legend: CGRect?
+
+    static let axisFontSize: CGFloat = 12
+    /// A caption glyph's average width, for the y band's width (the labels are not measured).
+    static let glyphWidth: CGFloat = 6.6
+    static let labelGap: CGFloat = 6
+    static let legendHeight: CGFloat = 16
+    static let legendGap: CGFloat = 8
+
+    init(props: ChartProps, size: CGSize) {
+        var plot = CGRect(origin: .zero, size: size)
+        if let legend = props.legend, !legend.items.isEmpty {
+            switch legend.position {
+            case "top":
+                self.legend = CGRect(x: 0, y: 0, width: size.width, height: Self.legendHeight)
+                plot.origin.y += Self.legendHeight + Self.legendGap
+                plot.size.height -= Self.legendHeight + Self.legendGap
+            case "leading", "trailing":
+                let width = legend.items.map { CGFloat($0.label.count) * Self.glyphWidth + 14 }.max() ?? 0
+                if legend.position == "leading" {
+                    self.legend = CGRect(x: 0, y: 0, width: width, height: size.height)
+                    plot.origin.x += width + Self.legendGap
+                } else {
+                    self.legend = CGRect(x: size.width - width, y: 0, width: width, height: size.height)
+                }
+                plot.size.width -= width + Self.legendGap
+            default:
+                self.legend = CGRect(x: 0, y: size.height - Self.legendHeight, width: size.width, height: Self.legendHeight)
+                plot.size.height -= Self.legendHeight + Self.legendGap
+            }
+        }
+        if let axis = props.yAxis, !axis.labels.isEmpty {
+            let width = (axis.labels.map { CGFloat($0.text.count) }.max() ?? 0) * Self.glyphWidth + Self.labelGap
+            if axis.position == "leading" {
+                yBand = CGRect(x: plot.minX, y: plot.minY, width: width, height: plot.height)
+                plot.origin.x += width
+            } else {
+                yBand = CGRect(x: plot.maxX - width, y: plot.minY, width: width, height: plot.height)
+            }
+            plot.size.width -= width
+        }
+        if let axis = props.xAxis, !axis.labels.isEmpty {
+            let height = Self.axisFontSize * 4 / 3 + Self.labelGap
+            if axis.position == "top" {
+                xBand = CGRect(x: plot.minX, y: plot.minY, width: plot.width, height: height)
+                plot.origin.y += height
+            } else {
+                xBand = CGRect(x: plot.minX, y: plot.maxY - height, width: plot.width, height: height)
+            }
+            plot.size.height -= height
+        }
+        self.plot = CGRect(x: plot.minX, y: plot.minY, width: max(plot.width, 0), height: max(plot.height, 0))
+    }
+
+    func point(x: Double, y: Double) -> CGPoint {
+        CGPoint(x: plot.minX + plot.width * x, y: plot.minY + plot.height * y)
+    }
+
+    func rect(x0: Double, x1: Double, y0: Double, y1: Double) -> CGRect {
+        let a = point(x: min(x0, x1), y: min(y0, y1)), b = point(x: max(x0, x1), y: max(y0, y1))
+        return CGRect(x: a.x, y: a.y, width: b.x - a.x, height: b.y - a.y)
+    }
+}
+
+struct ChartCanvas: View {
+    let props: ChartProps
+    let items: [ElementNode]
+    let size: CGSize
+
+    var body: some View {
+        let layout = ChartLayout(props: props, size: size)
+        ZStack(alignment: .topLeading) {
+            axisLines(props.xAxis, layout: layout, horizontal: true)
+            axisLines(props.yAxis, layout: layout, horizontal: false)
+            ForEach(Array(props.marks.enumerated()), id: \.offset) { _, mark in
+                ChartMarkView(mark: mark, layout: layout)
+            }
+            axisLabels(props.xAxis, layout: layout, horizontal: true)
+            axisLabels(props.yAxis, layout: layout, horizontal: false)
+            if let legend = props.legend, let box = layout.legend {
+                ChartLegendView(legend: legend)
+                    .frame(width: box.width, height: box.height)
+                    .position(x: box.midX, y: box.midY)
+            }
+            ForEach(items) { item in
+                ChartItemView(item: item, layout: layout)
+            }
+        }
+        .frame(width: size.width, height: size.height, alignment: .topLeading)
+        .clipped()
+    }
+
+    /// The grid lines across the plot and the ticks outside it.
+    @ViewBuilder
+    private func axisLines(_ axis: ChartAxisSpec?, layout: ChartLayout, horizontal: Bool) -> some View {
+        if let axis {
+            let plot = layout.plot
+            let grid = Path { path in
+                for line in axis.gridLines {
+                    if horizontal {
+                        let x = plot.minX + plot.width * line
+                        path.move(to: CGPoint(x: x, y: plot.minY))
+                        path.addLine(to: CGPoint(x: x, y: plot.maxY))
+                    } else {
+                        let y = plot.minY + plot.height * line
+                        path.move(to: CGPoint(x: plot.minX, y: y))
+                        path.addLine(to: CGPoint(x: plot.maxX, y: y))
+                    }
+                }
+            }
+            let ticks = Path { path in
+                for tick in axis.ticks {
+                    if horizontal {
+                        let x = plot.minX + plot.width * tick
+                        let y = axis.position == "top" ? plot.minY : plot.maxY
+                        path.move(to: CGPoint(x: x, y: y))
+                        path.addLine(to: CGPoint(x: x, y: axis.position == "top" ? y - 4 : y + 4))
+                    } else {
+                        let y = plot.minY + plot.height * tick
+                        let x = axis.position == "leading" ? plot.minX : plot.maxX
+                        path.move(to: CGPoint(x: x, y: y))
+                        path.addLine(to: CGPoint(x: axis.position == "leading" ? x - 4 : x + 4, y: y))
+                    }
+                }
+            }
+            let separator = Color.secondary.opacity(0.3)
+            grid.stroke(separator, style: StrokeStyle(lineWidth: 1, dash: axis.dashed ? [2, 2] : []))
+            ticks.stroke(separator, lineWidth: 1)
+        }
+    }
+
+    /// The default text labels, centered on their ticks in the band.
+    @ViewBuilder
+    private func axisLabels(_ axis: ChartAxisSpec?, layout: ChartLayout, horizontal: Bool) -> some View {
+        if let axis {
+            ForEach(Array(axis.labels.enumerated()), id: \.offset) { _, label in
+                let text = Text(verbatim: label.text)
+                    .font(.system(size: ChartLayout.axisFontSize))
+                    .foregroundStyle(.secondary)
+                    .lineLimit(1)
+                    .fixedSize()
+                if horizontal, let band = layout.xBand {
+                    let x = layout.plot.minX + layout.plot.width * label.at
+                    if label.anchor == "leading" {
+                        text.frame(width: max(band.width, 1), alignment: .leading).position(x: x + band.width / 2, y: band.midY)
+                    } else {
+                        text.position(x: min(max(x, layout.plot.minX), layout.plot.maxX), y: band.midY)
+                    }
+                } else if !horizontal, let band = layout.yBand {
+                    let y = layout.plot.minY + layout.plot.height * label.at
+                    text.frame(width: max(band.width - ChartLayout.labelGap, 1), alignment: axis.position == "leading" ? .trailing : .leading)
+                        .position(x: band.midX + (axis.position == "leading" ? -ChartLayout.labelGap / 2 : ChartLayout.labelGap / 2), y: min(max(y, layout.plot.minY), layout.plot.maxY))
+                }
+            }
+        }
+    }
+}
+
+/// One mark, in the plot's points.
+struct ChartMarkView: View {
+    let mark: ChartMarkSpec
+    let layout: ChartLayout
+
+    var body: some View {
+        let style = mark.style.map(AnyShapeStyle.init(spec:)) ?? AnyShapeStyle(Color.accentColor)
+        Group {
+            switch mark.kind {
+            case "rect":
+                let unit = layout.rect(x0: mark.x0, x1: mark.x1, y0: mark.y0, y1: mark.y1)
+                let width = mark.fixedWidth.map { CGFloat($0) } ?? unit.width
+                RoundedRectangle(cornerRadius: mark.cornerRadius, style: .continuous)
+                    .fill(style)
+                    .frame(width: max(width, 0), height: max(unit.height, 0))
+                    .position(x: unit.midX, y: unit.midY)
+            case "line":
+                let points = mark.points.map { layout.point(x: $0.x, y: $0.y) }
+                Path { path in
+                    if let first = points.first {
+                        path.move(to: first)
+                        path.addLines(Array(points.dropFirst()))
+                    }
+                }
+                .stroke(style, style: StrokeStyle(lineWidth: mark.lineWidth, lineCap: .round, lineJoin: .round))
+                if let symbol = mark.symbol {
+                    ForEach(Array(points.enumerated()), id: \.offset) { _, point in
+                        ChartSymbolView(symbol: symbol, size: mark.symbolSize, style: style).position(point)
+                    }
+                }
+            case "area":
+                let upper = mark.points.map { layout.point(x: $0.x, y: $0.y0) }
+                let lower = mark.points.reversed().map { layout.point(x: $0.x, y: $0.y1) }
+                Path { path in
+                    if let first = upper.first {
+                        path.move(to: first)
+                        path.addLines(Array(upper.dropFirst()))
+                        path.addLines(lower)
+                        path.closeSubpath()
+                    }
+                }
+                .fill(style)
+            case "point":
+                ChartSymbolView(symbol: mark.symbol ?? "circle", size: mark.symbolSize, style: style)
+                    .position(layout.point(x: mark.x0, y: mark.y0))
+            case "rule":
+                Path { path in
+                    path.move(to: layout.point(x: mark.x0, y: mark.y0))
+                    path.addLine(to: layout.point(x: mark.x1, y: mark.y1))
+                }
+                .stroke(style, lineWidth: mark.lineWidth)
+            default:
+                EmptyView()
+            }
+        }
+        .opacity(mark.opacity)
+    }
+}
+
+/// A mark's symbol glyph: a circle, a square, or a diamond for the rest.
+struct ChartSymbolView: View {
+    let symbol: String
+    let size: Double
+    let style: AnyShapeStyle
+
+    var body: some View {
+        switch symbol {
+        case "square":
+            Rectangle().fill(style).frame(width: size, height: size)
+        case "circle":
+            Circle().fill(style).frame(width: size, height: size)
+        default:
+            Rectangle().fill(style).frame(width: size * 0.8, height: size * 0.8).rotationEffect(.degrees(45))
+        }
+    }
+}
+
+/// The legend's items: a symbol (or a short line) and the label, flowing in a row.
+struct ChartLegendView: View {
+    let legend: ChartLegendSpec
+
+    var body: some View {
+        let items = Array(legend.items.enumerated())
+        if legend.position == "leading" || legend.position == "trailing" {
+            VStack(alignment: .leading, spacing: 4) {
+                ForEach(items, id: \.offset) { _, item in row(item) }
+            }
+        } else {
+            HStack(spacing: 12) {
+                ForEach(items, id: \.offset) { _, item in row(item) }
+            }
+        }
+    }
+
+    private func row(_ item: ChartLegendItemSpec) -> some View {
+        let style = item.style.map(AnyShapeStyle.init(spec:)) ?? AnyShapeStyle(Color.accentColor)
+        return HStack(spacing: 4) {
+            if let symbol = item.symbol {
+                ChartSymbolView(symbol: symbol, size: 10, style: style)
+            } else {
+                Rectangle().fill(style).frame(width: 18, height: 3)
+            }
+            Text(verbatim: item.label).font(.system(size: ChartLayout.axisFontSize)).foregroundStyle(.secondary).lineLimit(1)
+        }
+    }
+}
+
+/// A `chartitem`: its one child against its mark's rect (an annotation) or
+/// at its tick in the band (an axis label view). An annotation beside the
+/// rect sits in a frame the rect's size, aligned to the edge it leaves from,
+/// so it overflows outward by its own size plus the spacing.
+struct ChartItemView: View {
+    let item: ElementNode
+    let layout: ChartLayout
+
+    var body: some View {
+        let props = ChartItemProps(props: item.props)
+        let content = ZStack { ChildrenView(node: item) }
+        switch props.role {
+        case "xLabel":
+            let band = layout.xBand ?? CGRect(x: layout.plot.minX, y: layout.plot.maxY, width: layout.plot.width, height: 0)
+            content.position(x: layout.plot.minX + layout.plot.width * props.x0, y: band.midY)
+        case "yLabel":
+            let band = layout.yBand ?? CGRect(x: layout.plot.maxX, y: layout.plot.minY, width: 0, height: layout.plot.height)
+            content.position(x: band.midX, y: layout.plot.minY + layout.plot.height * props.y0)
+        default:
+            let rect = layout.rect(x0: props.x0, x1: props.x1, y0: props.y0, y1: props.y1)
+            let spacing = CGFloat(props.spacing)
+            let across = Alignment(name: props.alignment)
+            Group {
+                switch props.position {
+                case "top":
+                    VStack(spacing: spacing) { content; Color.clear.frame(width: rect.width, height: rect.height) }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: across.horizontal, vertical: .bottom))
+                case "bottom":
+                    VStack(spacing: spacing) { Color.clear.frame(width: rect.width, height: rect.height); content }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: across.horizontal, vertical: .top))
+                case "leading":
+                    HStack(spacing: spacing) { content; Color.clear.frame(width: rect.width, height: rect.height) }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: .trailing, vertical: across.vertical))
+                case "trailing":
+                    HStack(spacing: spacing) { Color.clear.frame(width: rect.width, height: rect.height); content }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: .leading, vertical: across.vertical))
+                default:
+                    content.frame(width: rect.width, height: rect.height, alignment: across)
+                }
+            }
+            .position(x: rect.midX, y: rect.midY)
+        }
+    }
+}
+#endif

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

@@ -0,0 +1,29 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `inspector`: `.inspector(isPresented:)` in a regular width. The children
+/// are the modified view's elements and, last, an `inspectorpanel` holding
+/// the inspector's content (its `inspectorColumnWidth` hint rides the
+/// panel content's style). The app owns the binding: `presented` is what it
+/// holds, and the protocol has no dismiss from this side (in a compact width
+/// the app presents a sheet instead and the element never appears).
+struct InspectorElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = InspectorProps(props: node.props)
+        let panel = node.children.last { $0.kind == "inspectorpanel" }
+        ZStack {
+            ForEach(node.children.filter { $0.kind != "inspectorpanel" }) { ElementView(node: $0) }
+        }
+        .inspector(isPresented: Binding(get: { props.presented }, set: { _ in })) {
+            if let panel {
+                ZStack { ChildrenView(node: panel) }
+            }
+        }
+    }
+}
+#endif

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

@@ -155,7 +155,14 @@ struct NavigationScreenElement: View {
         case "principal": return .principal
         case "secondary": return .secondaryAction
         case "bottom": return bottomPlacement
-        default: return trailingPlacement // `trailing`, and `largeTitle` beside it
+        case "largeTitle":
+            // Beside the large title: the shim's own placement; SwiftUI has none, so the bar's trailing edge.
+            #if canImport(FoundationBridge)
+            return .largeTitle
+            #else
+            return trailingPlacement
+            #endif
+        default: return trailingPlacement
         }
     }
 }

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

@@ -11,6 +11,7 @@ struct VStackElement: View {
         VStack(alignment: HorizontalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
             ChildrenView(node: node)
         }
+        .scrollTargetLayout(isEnabled: props.scrollTarget)
     }
 }
 
@@ -32,6 +33,7 @@ struct HStackElement: View {
             HStack(alignment: VerticalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
                 ChildrenView(node: node)
             }
+            .scrollTargetLayout(isEnabled: props.scrollTarget)
         }
     }
 }
@@ -106,21 +108,71 @@ struct GeometryElement: View {
     }
 }
 
+/// `scrollview`: its axes and indicators; `refreshable` sends `refresh`;
+/// `snap` is its scroll target behavior (the stack inside marked
+/// `scrollTarget` is the layout whose children snap); `reportsPosition`
+/// is `.scrollPosition(id:)`, which sends `scrollposition` with the marked
+/// element at the anchor once the view settles. A `ScrollViewReader`'s
+/// `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.
 struct ScrollViewElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
+    @State private var position: Int?
+    @State private var served: Double = -1
 
     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 scroll = ScrollView(axes, showsIndicators: props.showsIndicators) {
-            ChildrenView(node: node)
+        let request = Self.scrollRequest(in: node)
+        ScrollViewReader { proxy in
+            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 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
+                    guard next != position else { return }
+                    position = next
+                    if let next { app?.dispatch(.scrollPosition(next)) }
+                }), anchor: props.positionAnchor.map(UnitPoint.init(spec:))))
+                : snapped
+            positioned
+                .onAppear { perform(request, with: proxy) }
+                .onChange(of: request?.serial) { _, _ in perform(request, with: proxy) }
         }
-        if props.refreshable {
-            scroll.refreshable { app?.dispatch(.refresh(node.id)) }
-        } else {
-            scroll
+    }
+
+    private func perform(_ request: ScrollRequest?, with proxy: ScrollViewProxy) {
+        guard let request, request.serial > served else { return }
+        served = request.serial
+        position = request.id
+        proxy.scrollTo(request.id, anchor: request.anchor)
+    }
+
+    struct ScrollRequest: Equatable {
+        var serial: Double
+        var id: Int
+        var anchor: UnitPoint?
+    }
+
+    /// The newest `scrollTo` among the content's marked elements (not those of a scroll view nested inside).
+    static func scrollRequest(in node: ElementNode) -> ScrollRequest? {
+        var best: ScrollRequest?
+        func visit(_ element: ElementNode) {
+            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:)))
+                }
+                visit(child)
+            }
         }
+        visit(node)
+        return best
     }
 }
 

package/swift/Sources/SwiftBrowserNative/Views/StyleModifier.swift

@@ -11,7 +11,7 @@ import SwiftUI
 /// Type-erased step by step: a chain of sixty optional modifiers would
 /// otherwise be one type the compiler has to name.
 extension View {
-    func styled(_ style: Style) -> AnyView {
+    func styled(_ style: Style, id: Int? = nil) -> AnyView {
         var view = AnyView(self)
 
         // Text attributes, which flow down the environment. A font with only a
@@ -71,16 +71,31 @@ extension View {
             }
         }
         if let frame = style.frame {
-            if frame.isFlexible {
+            // Per axis, a fixed length wins over a min/max, as the web renderer
+            // lays it out: `{ maxWidth: "infinity", height: 1 }` is
+            // `.frame(height: 1).frame(maxWidth: .infinity)`, a rule across
+            // the width.
+            let alignment = Alignment(name: frame.alignment)
+            if frame.width != nil || frame.height != nil {
+                view = AnyView(view.frame(width: frame.width.map { CGFloat($0) }, height: frame.height.map { CGFloat($0) }, alignment: alignment))
+            }
+            let flexibleWidth = frame.width == nil && (frame.minWidth != nil || frame.maxWidth != nil)
+            let flexibleHeight = frame.height == nil && (frame.minHeight != nil || frame.maxHeight != nil)
+            if flexibleWidth || flexibleHeight {
                 view = AnyView(view.frame(
-                    minWidth: CGFloat(dimension: frame.minWidth), maxWidth: CGFloat(dimension: frame.maxWidth),
-                    minHeight: CGFloat(dimension: frame.minHeight), maxHeight: CGFloat(dimension: frame.maxHeight),
-                    alignment: Alignment(name: frame.alignment)
+                    minWidth: flexibleWidth ? CGFloat(dimension: frame.minWidth) : nil, maxWidth: flexibleWidth ? CGFloat(dimension: frame.maxWidth) : nil,
+                    minHeight: flexibleHeight ? CGFloat(dimension: frame.minHeight) : nil, maxHeight: flexibleHeight ? CGFloat(dimension: frame.maxHeight) : nil,
+                    alignment: alignment
                 ))
-            } else {
-                view = AnyView(view.frame(width: frame.width.map { CGFloat($0) }, height: frame.height.map { CGFloat($0) }, alignment: Alignment(name: frame.alignment)))
             }
         }
+        if let relative = style.containerRelativeFrame {
+            var axes: Axis.Set = []
+            if relative.horizontal { axes.insert(.horizontal) }
+            if relative.vertical { axes.insert(.vertical) }
+            let a = relative.a, b = relative.b
+            view = AnyView(view.containerRelativeFrame(axes, alignment: Alignment(name: relative.alignment)) { length, _ in a * length + b })
+        }
         if let ratio = style.aspectRatio {
             let mode: ContentMode = style.aspectRatioContentMode == "fill" ? .fill : .fit
             view = AnyView(view.aspectRatio(ratio.map { CGFloat($0) }, contentMode: mode))
@@ -127,6 +142,9 @@ extension View {
         if style.hitTesting == false { view = AnyView(view.allowsHitTesting(false)) }
         if style.hidden { view = AnyView(view.hidden()) }
         if let help = style.help { view = AnyView(view.help(help)) }
+        // A `ScrollViewReader`'s `.id(x)`: the element's own id names it to a `scrollTo` and a scroll position.
+        if style.scrollID, let id { view = AnyView(view.id(id)) }
+        if let width = style.raw.double("inspectorColumnWidth") { view = AnyView(view.inspectorColumnWidth(width)) }
 
         // Lists.
         if let badge = style.badge { view = AnyView(view.badge(Text(badge))) }