@swiftbrowser/native 0.0.0-stage → 0.10.0

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

@@ -0,0 +1,189 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+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)
+        }
+    }
+}
+
+/// `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
+/// foreground elsewhere.
+struct HStackElement: View {
+    let node: ElementNode
+    var body: some View {
+        let props = StackProps(props: node.props)
+        if node.children.count == 2, let icon = node.children.first, icon.kind == "styled", icon.style.labelIcon {
+            Label {
+                ElementView(node: node.children[1])
+            } icon: {
+                ElementView(node: icon)
+            }
+        } else {
+            HStack(alignment: VerticalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
+                ChildrenView(node: node)
+            }
+        }
+    }
+}
+
+struct ZStackElement: View {
+    let node: ElementNode
+    var body: some View {
+        ZStack(alignment: Alignment(name: StackProps(props: node.props).alignment)) {
+            ChildrenView(node: node)
+        }
+    }
+}
+
+/// `.overlay { }` / `.background { }` with a view: children are `[content, decoration]`.
+struct DecoratedElement: View {
+    let node: ElementNode
+    var body: some View {
+        let props = DecoratedProps(props: node.props)
+        let alignment = Alignment(name: props.alignment)
+        if let content = node.children.first {
+            // The decoration is the child after the content: a `ForEach` over
+            // it rather than an `if let`, which is a conditional decoration
+            // to SwiftUI (aligned by its edges, its guides unused).
+            let decoration = Array(node.children.dropFirst().prefix(1))
+            if props.role == "background" {
+                ElementView(node: content).background(alignment: alignment) {
+                    ForEach(decoration) { ElementView(node: $0) }
+                }
+            } else {
+                ElementView(node: content).overlay(alignment: alignment) {
+                    ForEach(decoration) { ElementView(node: $0) }
+                }
+            }
+        }
+    }
+}
+
+/// `GeometryReader`: fills its proposal and reports its size, after the
+/// layout pass (the tree is never mutated during one).
+struct GeometryElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+    @State private var reported: CGRect = .null
+
+    var body: some View {
+        let props = GeometryProps(props: node.props)
+        GeometryReader { proxy in
+            let frame = proxy.frame(in: .global)
+            ChildrenView(node: node)
+                .onChange(of: frame, initial: true) { _, frame in
+                    report(frame, reportsFrame: props.reportsFrame)
+                }
+                .onChange(of: props.reader) { _, _ in
+                    // A new reader has not heard the size: report it again.
+                    reported = .null
+                    report(frame, reportsFrame: props.reportsFrame)
+                }
+        }
+    }
+
+    private func report(_ frame: CGRect, reportsFrame: Bool) {
+        let rounded = CGRect(x: frame.minX.rounded(), y: frame.minY.rounded(), width: frame.width.rounded(), height: frame.height.rounded())
+        let same = reportsFrame ? rounded == reported : rounded.size == reported.size
+        if same { return }
+        reported = rounded
+        let event: RendererEvent = reportsFrame
+            ? .geometry(node.id, width: rounded.width, height: rounded.height, x: rounded.minX, y: rounded.minY)
+            : .geometry(node.id, width: rounded.width, height: rounded.height)
+        // Past the pass that measured it, as the web renderer batches geometry events.
+        let app = app
+        Task { @MainActor in app?.dispatch(event) }
+    }
+}
+
+struct ScrollViewElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    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)
+        }
+        if props.refreshable {
+            scroll.refreshable { app?.dispatch(.refresh(node.id)) }
+        } else {
+            scroll
+        }
+    }
+}
+
+/// `LazyVGrid`: `columns` are `GridItem`s; children are the cells.
+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) }
+        ) {
+            ChildrenView(node: node)
+        }
+    }
+}
+
+struct LazyHGridElement: View {
+    let node: ElementNode
+    var body: some View {
+        LazyHGrid(
+            rows: gridItems(node.props.array("rows") ?? []),
+            alignment: VerticalAlignment(name: node.props.string("alignment") ?? "center"),
+            spacing: node.props.double("spacing").map { CGFloat($0) }
+        ) {
+            ChildrenView(node: node)
+        }
+    }
+}
+
+/// `GridItem` JSON: `{ size: { kind: fixed | flexible | adaptive, ... }, spacing, alignment }`.
+func gridItems(_ items: [JSONValue]) -> [GridItem] {
+    items.map { item in
+        let size = item["size"]
+        let gridSize: GridItem.Size
+        switch size["kind"].string {
+        case "fixed": gridSize = .fixed(size["value"].double ?? 0)
+        case "adaptive": gridSize = .adaptive(minimum: size["minimum"].double ?? 10, maximum: CGFloat(dimension: DimensionSpec(json: size["maximum"])) ?? .infinity)
+        default: gridSize = .flexible(minimum: size["minimum"].double ?? 10, maximum: CGFloat(dimension: DimensionSpec(json: size["maximum"])) ?? .infinity)
+        }
+        return GridItem(gridSize, spacing: item["spacing"].double.map { CGFloat($0) }, alignment: item["alignment"].string.map(Alignment.init(name:)))
+    }
+}
+
+struct GridElement: View {
+    let node: ElementNode
+    var body: some View {
+        Grid(
+            alignment: Alignment(name: node.props.string("alignment") ?? "center"),
+            horizontalSpacing: node.props.double("horizontalSpacing").map { CGFloat($0) },
+            verticalSpacing: node.props.double("verticalSpacing").map { CGFloat($0) }
+        ) {
+            ChildrenView(node: node)
+        }
+    }
+}
+
+struct GridRowElement: View {
+    let node: ElementNode
+    var body: some View {
+        GridRow(alignment: node.props.string("alignment").map(VerticalAlignment.init(name:))) {
+            ChildrenView(node: node)
+        }
+    }
+}
+#endif

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

@@ -0,0 +1,102 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+#if canImport(FoundationBridge)
+import FoundationBridge // `AsyncImage`, against the shim
+#endif
+
+/// `text`: a string, or rich runs concatenated into one `Text`.
+struct TextElement: View {
+    let node: ElementNode
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = TextProps(props: node.props)
+        if props.runs.isEmpty {
+            Text(verbatim: props.text)
+        } else {
+            richText(props.runs)
+                .environment(\.openURL, OpenURLAction { url in
+                    // A tapped link run sends `link`; the app decides what opens.
+                    app?.dispatch(.link(node.id, url.absoluteString))
+                    return .handled
+                })
+        }
+    }
+
+    private func richText(_ runs: [TextRunSpec]) -> Text {
+        let texts = runs.map(text(for:))
+        guard let first = texts.first else { return Text(verbatim: "") }
+        return texts.dropFirst().reduce(first, +)
+    }
+
+    private func text(for run: TextRunSpec) -> Text {
+        var text: Text
+        if let image = run.image {
+            switch image {
+            case .symbol(let name, _): text = Text(Image(systemName: name))
+            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.
+            var string = AttributedString(run.text ?? "")
+            string.link = url
+            text = Text(string)
+        } else {
+            text = Text(verbatim: run.text ?? "")
+        }
+        if let font = run.font { 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:))) }
+        if let kerning = run.kerning { text = text.kerning(kerning) }
+        if let offset = run.baselineOffset { text = text.baselineOffset(offset) }
+        if let foreground = run.foreground { text = text.foregroundStyle(AnyShapeStyle(spec: foreground)) }
+        return text
+    }
+}
+
+/// `image`: an SF Symbol (every name is right here, unlike the web's mapped
+/// glyphs), an asset catalog image, a remote image, or a bitmap recipe (not drawn yet).
+struct ImageElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        switch ImageProps(props: node.props) {
+        // `ProgressView()` with no value reaches the protocol as this symbol.
+        case .symbol("progress.indicator", _):
+            ProgressView()
+        case .symbol(let name, let palette):
+            if palette {
+                Image(systemName: name).symbolRenderingMode(.palette)
+            } else {
+                Image(systemName: name)
+            }
+        case .asset(let name, let resizable):
+            if resizable {
+                Image(name).resizable()
+            } else {
+                Image(name)
+            }
+        case .url(let url, let resizable, let width, let height):
+            AsyncImage(url: URL(string: url)) { phase in
+                if let image = phase.image {
+                    if resizable { image.resizable() } else { image }
+                } else if width > 0, height > 0 {
+                    Color.clear.frame(width: width, height: height)
+                } else {
+                    Color.clear
+                }
+            }
+        case .bitmap(_, _, let width, let height):
+            // A `UIImage` recipe the page would decode; not drawn natively yet.
+            Rectangle().fill(.quaternary).frame(width: width > 0 ? CGFloat(width) : nil, height: height > 0 ? CGFloat(height) : nil)
+        case .unknown:
+            Image(systemName: "questionmark.square.dashed")
+        }
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/NativeRootView.swift

@@ -0,0 +1,190 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// The app on screen: the root container's children, with the root-level
+/// `sheet` and `alert` elements presented over them, the root's
+/// `.preferredColorScheme`, and the device environment sent to the app as it
+/// changes. In Debug builds a JavaScript error shows over the app.
+public struct NativeRootView: View {
+    let app: NativeApp
+    @Environment(\.colorScheme) private var colorScheme
+    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
+    @Environment(\.scenePhase) private var scenePhase
+    #if os(iOS) || canImport(FoundationBridge)
+    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+    private var sizeClassName: String { horizontalSizeClass == .regular ? "regular" : "compact" }
+    #else
+    private var sizeClassName: String { "regular" }
+    #endif
+
+    public init(app: NativeApp) {
+        self.app = app
+    }
+
+    public var body: some View {
+        let root = app.tree.root
+        let scheme = app.tree.rootProps.colorScheme
+        let preferred: ColorScheme? = scheme == "dark" ? .dark : scheme == "light" ? .light : nil
+        let presented = root.children.filter { $0.kind == "sheet" || $0.kind == "alert" }
+        let content = PresentationHost(presenter: root, presented: presented) {
+            ZStack {
+                ForEach(root.children.filter { $0.kind != "sheet" && $0.kind != "alert" }) { ElementView(node: $0) }
+            }
+        }
+        .environment(\.nativeApp, app)
+        .preferredColorScheme(preferred)
+        .overlay(alignment: .bottom) { errorOverlay }
+        return observingEnvironment(content)
+    }
+
+    /// The device environment, sent to the app as it changes. Type-erased
+    /// step by step: one chain of closures is more than the type checker
+    /// finishes in reasonable time.
+    private func observingEnvironment<V: View>(_ view: V) -> AnyView {
+        var observed = AnyView(view.onAppear { sendEnvironment() })
+        observed = AnyView(observed.onChange(of: colorScheme) { _, _ in sendEnvironment() })
+        observed = AnyView(observed.onChange(of: dynamicTypeSize) { _, _ in sendEnvironment() })
+        observed = AnyView(observed.onChange(of: sizeClassName) { _, _ in sendEnvironment() })
+        observed = AnyView(observed.onChange(of: scenePhase) { _, phase in app.setScenePhase(Self.name(of: phase)) })
+        observed = AnyView(observed.onChange(of: app.isLoaded) { _, loaded in
+            if loaded { sendEnvironment() }
+        })
+        return observed
+    }
+
+    private static func name(of phase: ScenePhase) -> String {
+        switch phase {
+        case .active: return "active"
+        case .inactive: return "inactive"
+        default: return "background"
+        }
+    }
+
+    @ViewBuilder
+    private var errorOverlay: some View {
+        #if DEBUG
+        if let error = app.error {
+            ErrorBanner(message: error)
+        }
+        #endif
+    }
+
+    private func sendEnvironment() {
+        app.setEnvironment(
+            colorScheme: colorScheme == .dark ? "dark" : "light",
+            dynamicTypeSize: dynamicTypeSize.protocolName,
+            horizontalSizeClass: sizeClassName
+        )
+    }
+}
+
+/// Presents the first of `presented` over `content` (a sheet, a full-screen
+/// cover or an alert), and the rest, in order, over that one. Dismissing one
+/// sends `tap` with its id, as the protocol defines a dismiss request, and
+/// the app removes it; the binding then reads nil.
+struct PresentationHost<Content: View>: View {
+    let presenter: ElementNode
+    let presented: [ElementNode]
+    @ViewBuilder let content: () -> Content
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let first = presented.first
+        let rest = Array(presented.dropFirst())
+        let sheet = first.flatMap { $0.kind == "sheet" && !SheetProps(props: $0.props).isFullScreen ? PresentedItem(node: $0) : nil }
+        let cover = first.flatMap { $0.kind == "sheet" && SheetProps(props: $0.props).isFullScreen ? PresentedItem(node: $0) : nil }
+        let alert = first.flatMap { $0.kind == "alert" ? $0 : nil }
+        let dismiss: (ElementNode) -> Void = { node in app?.dispatch(.tap(node.id)) }
+        let sheeted = content()
+            .sheet(item: Binding(get: { sheet }, set: { if $0 == nil, let sheet { dismiss(sheet.node) } })) { item in
+                SheetContent(node: item.node, rest: rest)
+            }
+        covered(sheeted, cover: cover, rest: rest, dismiss: dismiss)
+            .alert(
+                alert.map { AlertProps(props: $0.props).title } ?? "",
+                isPresented: Binding(get: { alert != nil }, set: { if !$0, let alert { dismiss(alert) } }),
+                presenting: alert
+            ) { alert in
+                // The buttons: each sends its own tap; the app dismisses.
+                ForEach(alert.children) { ElementView(node: $0) }
+            } message: { alert in
+                if let message = AlertProps(props: alert.props).message {
+                    Text(verbatim: message)
+                }
+            }
+    }
+}
+
+extension PresentationHost {
+    /// `.fullScreenCover` where the platform has it.
+    @ViewBuilder
+    func covered<V: View>(_ view: V, cover: PresentedItem?, rest: [ElementNode], dismiss: @escaping (ElementNode) -> Void) -> some View {
+        #if os(iOS) || canImport(FoundationBridge)
+        view.fullScreenCover(item: Binding(get: { cover }, set: { if $0 == nil, let cover { dismiss(cover.node) } })) { item in
+            SheetContent(node: item.node, rest: rest)
+        }
+        #else
+        view
+        #endif
+    }
+}
+
+struct PresentedItem: Identifiable, Equatable {
+    let node: ElementNode
+    var id: Int { node.id }
+    static func == (lhs: PresentedItem, rhs: PresentedItem) -> Bool { lhs.node === rhs.node }
+}
+
+/// A `sheet`'s content with its detents, and the presentations stacked over it.
+struct SheetContent: View {
+    let node: ElementNode
+    let rest: [ElementNode]
+    @Environment(\.nativeApp) private var app
+
+    var body: some View {
+        let props = SheetProps(props: node.props)
+        PresentationHost(presenter: node, presented: rest) {
+            ZStack { ChildrenView(node: node) }
+        }
+        .environment(\.nativeApp, app)
+        .presentationDetents(detents(props.detents))
+        .interactiveDismissDisabled(props.interactiveDismissDisabled)
+    }
+
+    private func detents(_ names: [String]) -> Set<PresentationDetent> {
+        var detents: Set<PresentationDetent> = []
+        for name in names {
+            if name == "medium" {
+                detents.insert(.medium)
+            } else if name == "large" || name == "full" {
+                detents.insert(.large)
+            } else if name.hasPrefix("height:"), let value = Double(name.dropFirst("height:".count)) {
+                detents.insert(.height(value))
+            } else if name.hasPrefix("fraction:"), let value = Double(name.dropFirst("fraction:".count)) {
+                detents.insert(.fraction(value))
+            }
+        }
+        return detents.isEmpty ? [.large] : detents
+    }
+}
+
+#if DEBUG
+struct ErrorBanner: View {
+    let message: String
+    var body: some View {
+        ScrollView {
+            Text(verbatim: message)
+                .font(.system(.footnote, design: .monospaced))
+                .foregroundStyle(.white)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding()
+        }
+        .frame(maxHeight: 200)
+        .background(Color.red.opacity(0.92))
+    }
+}
+#endif
+#endif

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

@@ -0,0 +1,182 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftUI
+
+/// A `styled` element's style as modifiers on its one child. Each nested
+/// `styled` is one modifier of the app's, outermost last, so the nesting of
+/// elements reproduces the app's modifier chain; the fields of one style are
+/// order-independent (the shim only merges modifiers that commute).
+///
+/// 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 {
+        var view = AnyView(self)
+
+        // Text attributes, which flow down the environment. A font with only a
+        // weight or design (`.fontWeight`, `.fontDesign`) adjusts the inherited one.
+        if let font = style.font {
+            if font.size == nil, font.textStyle == nil {
+                if let weight = font.weight { view = AnyView(view.fontWeight(Font.Weight(name: weight))) }
+                if let design = font.design { view = AnyView(view.fontDesign(Font.Design(name: design))) }
+                if font.monospacedDigit { view = AnyView(view.monospacedDigit()) }
+            } else {
+                view = AnyView(view.font(Font(spec: font)))
+            }
+        }
+        if style.italic == true { view = AnyView(view.italic()) }
+        if let underline = style.underline { view = AnyView(view.underline(underline)) }
+        if let strikethrough = style.strikethrough { view = AnyView(view.strikethrough(strikethrough)) }
+        if let foreground = style.foreground {
+            if style.foregroundLevels.count >= 2 {
+                view = AnyView(view.foregroundStyle(AnyShapeStyle(spec: foreground), AnyShapeStyle(spec: style.foregroundLevels[0]), AnyShapeStyle(spec: style.foregroundLevels[1])))
+            } else if style.foregroundLevels.count == 1 {
+                view = AnyView(view.foregroundStyle(AnyShapeStyle(spec: foreground), AnyShapeStyle(spec: style.foregroundLevels[0])))
+            } else {
+                view = AnyView(view.foregroundStyle(AnyShapeStyle(spec: foreground)))
+            }
+        }
+        if let alignment = style.multilineTextAlignment { view = AnyView(view.multilineTextAlignment(TextAlignment(name: alignment))) }
+        if style.lineLimitLifted {
+            view = AnyView(view.lineLimit(nil))
+        } else if let limit = style.lineLimit {
+            if let minimum = style.lineLimitMin {
+                view = AnyView(view.lineLimit(minimum...limit))
+            } else {
+                view = AnyView(view.lineLimit(limit))
+            }
+        }
+        if let scale = style.imageScale {
+            view = AnyView(view.imageScale(scale == "small" ? .small : scale == "large" ? .large : .medium))
+        }
+        if let tint = style.tint { view = AnyView(view.tint(Color(spec: tint))) }
+        // `labelIcon` marks a `Label`'s icon; HStackElement draws the label as one.
+        if let alignment = style.raw.string("gridColumnAlignment") { view = AnyView(view.gridColumnAlignment(HorizontalAlignment(name: alignment))) }
+
+        // Layout.
+        if style.fixedSizeHorizontal != nil || style.fixedSizeVertical != nil {
+            view = AnyView(view.fixedSize(horizontal: style.fixedSizeHorizontal ?? false, vertical: style.fixedSizeVertical ?? false))
+        }
+        if let priority = style.layoutPriority { view = AnyView(view.layoutPriority(priority)) }
+        if let padding = style.padding {
+            // `.padding(.vertical, 6)` pads the edges given; `EdgeInsets` would
+            // name them all, with 0 for the rest.
+            let given: [(Edge.Set, Double)] = [(.top, padding.top), (.leading, padding.leading), (.bottom, padding.bottom), (.trailing, padding.trailing)]
+                .compactMap { edge, length in length.map { (edge, $0) } }
+            if given.count < 4, let length = given.first?.1, given.allSatisfy({ $0.1 == length }) {
+                view = AnyView(view.padding(given.reduce(into: Edge.Set()) { $0.insert($1.0) }, CGFloat(length)))
+            } else {
+                view = AnyView(view.padding(EdgeInsets(spec: padding)))
+            }
+        }
+        if let frame = style.frame {
+            if frame.isFlexible {
+                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)
+                ))
+            } else {
+                view = AnyView(view.frame(width: frame.width.map { CGFloat($0) }, height: frame.height.map { CGFloat($0) }, alignment: Alignment(name: frame.alignment)))
+            }
+        }
+        if let ratio = style.aspectRatio {
+            let mode: ContentMode = style.aspectRatioContentMode == "fill" ? .fill : .fit
+            view = AnyView(view.aspectRatio(ratio.map { CGFloat($0) }, contentMode: mode))
+        }
+        if let position = style.position { view = AnyView(view.position(x: position.x, y: position.y)) }
+
+        // Paint.
+        if let background = style.background {
+            if let radius = style.backgroundCornerRadius {
+                view = AnyView(view.background(AnyShapeStyle(spec: background), in: RoundedRectangle(cornerRadius: radius, style: .continuous)))
+            } else {
+                view = AnyView(view.background(AnyShapeStyle(spec: background)))
+            }
+        }
+        if let radius = style.cornerRadius { view = AnyView(view.clipShape(RoundedRectangle(cornerRadius: radius, style: .continuous))) }
+        if style.clipped { view = AnyView(view.clipped()) }
+        if let mask = style.mask { view = AnyView(view.mask { Rectangle().fill(AnyShapeStyle(spec: mask)) }) }
+        if let shadow = style.shadow {
+            view = AnyView(view.shadow(color: shadow.color.map(Color.init(spec:)) ?? Color.black.opacity(0.33), radius: shadow.radius, x: shadow.x, y: shadow.y))
+        }
+
+        // Effects.
+        if let opacity = style.opacity { view = AnyView(view.opacity(opacity)) }
+        if let blur = style.blur { view = AnyView(view.blur(radius: blur)) }
+        if let brightness = style.brightness { view = AnyView(view.brightness(brightness)) }
+        if let saturation = style.saturation { view = AnyView(view.saturation(saturation)) }
+        if let contrast = style.contrast { view = AnyView(view.contrast(contrast)) }
+        if let grayscale = style.grayscale { view = AnyView(view.grayscale(grayscale)) }
+        if let hue = style.hueRotation { view = AnyView(view.hueRotation(.degrees(hue))) }
+        if style.colorInvert { view = AnyView(view.colorInvert()) }
+        if let multiply = style.colorMultiply { view = AnyView(view.colorMultiply(Color(spec: multiply))) }
+        if let blend = style.blendMode, let mode = BlendMode(name: blend) { view = AnyView(view.blendMode(mode)) }
+        if let rotation = style.rotation {
+            view = AnyView(view.rotationEffect(.degrees(rotation), anchor: style.rotationAnchor.map(UnitPoint.init(spec:)) ?? .center))
+        }
+        if let scale = style.scale {
+            view = AnyView(view.scaleEffect(x: scale.x, y: scale.y, anchor: style.scaleAnchor.map(UnitPoint.init(spec:)) ?? .center))
+        }
+        if let offset = style.offset { view = AnyView(view.offset(x: offset.x, y: offset.y)) }
+        if let zIndex = style.zIndex { view = AnyView(view.zIndex(zIndex)) }
+
+        // Interaction and visibility.
+        if style.disabled == true { view = AnyView(view.disabled(true)) }
+        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)) }
+
+        // Lists.
+        if let badge = style.badge { view = AnyView(view.badge(Text(badge))) }
+        if let insets = style.listRowInsets { view = AnyView(view.listRowInsets(EdgeInsets(spec: insets))) }
+        if let background = style.listRowBackground { view = AnyView(view.listRowBackground(Rectangle().fill(AnyShapeStyle(spec: background)))) }
+
+        // Safe area.
+        if let edges = style.ignoresSafeArea { view = AnyView(view.ignoresSafeArea(.container, edges: Edge.Set(names: edges))) }
+        if style.ignoresKeyboard { view = AnyView(view.ignoresSafeArea(.keyboard)) }
+
+        // Motion.
+        if let transition = style.transition { view = AnyView(view.transition(AnyTransition(specs: transition))) }
+        if let animation = style.animation {
+            // `.animation(_:value:)`: the token changes when the value does.
+            view = AnyView(view.animation(Animation(spec: animation), value: style.animationToken ?? 0))
+        }
+        if let kind = style.contentTransition {
+            switch kind {
+            case "numericText": view = AnyView(view.contentTransition(.numericText()))
+            case "interpolate": view = AnyView(view.contentTransition(.interpolate))
+            default: view = AnyView(view.contentTransition(.opacity))
+            }
+        }
+        return view
+    }
+}
+
+extension BlendMode {
+    init?(name: String) {
+        switch name {
+        case "normal": self = .normal
+        case "multiply": self = .multiply
+        case "screen": self = .screen
+        case "overlay": self = .overlay
+        case "darken": self = .darken
+        case "lighten": self = .lighten
+        case "color-dodge", "colorDodge": self = .colorDodge
+        case "color-burn", "colorBurn": self = .colorBurn
+        case "soft-light", "softLight": self = .softLight
+        case "hard-light", "hardLight": self = .hardLight
+        case "difference": self = .difference
+        case "exclusion": self = .exclusion
+        case "hue": self = .hue
+        case "saturation": self = .saturation
+        case "color": self = .color
+        case "luminosity": self = .luminosity
+        case "plus-lighter", "plusLighter": self = .plusLighter
+        case "plus-darker", "plusDarker": self = .plusDarker
+        default: return nil
+        }
+    }
+}
+#endif