@swiftbrowser/native 0.0.0-stage → 0.10.0

package/swift/Sources/SwiftBrowserNative/Runtime/NativeApp.swift

@@ -0,0 +1,251 @@
+#if canImport(SwiftUI)
+import Foundation
+import Observation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+#if canImport(FoundationBridge)
+import FoundationBridge // `Bundle.main` (ShimAliases.swift) in a default argument needs the import here
+#endif
+
+/// A JavaScript app and the tree it draws: the engine, the bridge, and the
+/// `OpTree` the SwiftUI views read. One per app; `NativeRootView` shows it.
+///
+/// ```swift
+/// @main struct MyApp: App {
+///     @State private var app = NativeApp()
+///     var body: some Scene {
+///         WindowGroup { NativeRootView(app: app).task { app.loadBundledApp() } }
+///     }
+/// }
+/// ```
+///
+/// Every call across the bridge is synchronous on the main thread: a tap's
+/// `dispatch` returns after JavaScript handled it and its render pass
+/// reached the tree (docs/native.md, "Synchronous calls").
+@MainActor
+@Observable
+public final class NativeApp {
+    public let tree: OpTree
+    public let host: JSHost
+    private var bridge: HostBridge?
+    /// The last error JavaScript raised, shown over the app in Debug builds.
+    public private(set) var error: String?
+    /// Whether a script was loaded and its `__sbDispatch` is there to call.
+    public private(set) var isLoaded = false
+    /// The environment last sent to the app.
+    public private(set) var colorScheme: String?
+    public private(set) var dynamicTypeSize: String?
+    public private(set) var horizontalSizeClass: String?
+
+    #if canImport(JavaScriptCore)
+    public convenience init() {
+        self.init(host: JavaScriptCoreHost())
+    }
+    #endif
+
+    public init(host: JSHost) {
+        self.host = host
+        tree = OpTree()
+        tree.animate = { spec, body in
+            if let animation = spec.map(Animation.init(spec:)) {
+                withAnimation(animation, body)
+            } else {
+                body()
+            }
+        }
+        tree.onEvent = { [weak self] event in self?.dispatch(event) }
+        #if canImport(JavaScriptCore)
+        (host as? JavaScriptCoreHost)?.onError = { [weak self] error in self?.error = error.description }
+        #endif
+        bridge = HostBridge(host: host, tree: tree)
+    }
+
+    /// Evaluates the app's bundle (what `@swiftbrowser/native` built: it calls
+    /// `run(<App/>)` at the end, which renders the first pass into the tree
+    /// before this returns). The environment, if known, is sent right after.
+    public func load(script: String, name: String = "app.js") {
+        error = nil
+        if isLoaded { reset() }
+        do {
+            try host.evaluate(script, name: name)
+            isLoaded = host.hasGlobal("__sbDispatch")
+            if !isLoaded { error = "\(name) did not call run(): no __sbDispatch" }
+            sendEnvironment()
+        } catch {
+            self.error = "\(error)"
+        }
+    }
+
+    /// Starts over for a reload: a fresh engine (the old one's globals and
+    /// timers go with it) and an empty tree, which the views are observing.
+    private func reset() {
+        bridge?.invalidate()
+        isLoaded = false
+        try? tree.apply(tree.root.children.map { Op.remove(id: $0.id) } + [.commit(animation: nil)])
+        host.reset()
+        bridge = HostBridge(host: host, tree: tree)
+    }
+
+    /// Loads a bundled resource, `app.js` by default.
+    public func load(resource: String = "app", extension ext: String = "js", bundle: Bundle = .main) {
+        guard let url = bundle.url(forResource: resource, withExtension: ext) else {
+            error = "\(resource).\(ext) is not in the app bundle (build it with `npm run build` in the app's JavaScript project)"
+            return
+        }
+        do {
+            load(script: try String(contentsOf: url, encoding: .utf8), name: "\(resource).\(ext)")
+        } catch {
+            self.error = "\(error)"
+        }
+    }
+
+    #if !canImport(FoundationBridge)
+    /// Loads the bundle from a URL (a dev server's `http://localhost:5173/app.js`),
+    /// then re-evaluates whenever `reload` is called. Debug builds use it to
+    /// pick up a rebuilt bundle without reinstalling the app.
+    public func load(url: URL) async {
+        do {
+            let (data, _) = try await URLSession.shared.data(from: url)
+            load(script: String(decoding: data, as: UTF8.self), name: url.lastPathComponent)
+        } catch {
+            self.error = "\(url): \(error.localizedDescription)"
+        }
+    }
+
+    /// The dev loop over `swiftbrowser-native dev`'s server (`url` is the
+    /// server, `http://localhost:5173/`; an `app.js` URL from earlier builds
+    /// names the same server). Polls `manifest.json` every `interval` until
+    /// the task is cancelled: a new `vendor` half starts the app over (a fresh
+    /// engine and tree, as `swiftbrowser dev` reloads a page); a new `app`
+    /// half is evaluated in place and React Fast Refresh keeps the mounted
+    /// components' state where their hooks are unchanged (docs/native.md).
+    /// A server without a manifest is read as one bundle at `app.js`.
+    public func watch(url: URL, interval: Duration = .seconds(1)) async {
+        let base = url.pathExtension == "js" ? url.deletingLastPathComponent() : url
+        var vendorHash: String?
+        var appHash: String?
+        var legacyETag: String?
+        while !Task.isCancelled {
+            if let manifest = await fetchJSON(base.appendingPathComponent("manifest.json")) {
+                let vendor = manifest["vendor"].string ?? ""
+                let app = manifest["app"].string ?? ""
+                if vendor != vendorHash {
+                    if let vendorCode = await fetchText(base.appendingPathComponent("vendor.js")),
+                       let appCode = await fetchText(base.appendingPathComponent("app.js"))
+                    {
+                        load(scripts: [("vendor.js", vendorCode), ("app.js", appCode)])
+                        vendorHash = vendor
+                        appHash = app
+                    }
+                } else if app != appHash {
+                    if let appCode = await fetchText(base.appendingPathComponent("app.js")) {
+                        refresh(script: appCode)
+                        appHash = app
+                    }
+                }
+            } else if let probe = await head(base.appendingPathComponent("app.js")) {
+                let etag = probe.0
+                if etag != legacyETag {
+                    legacyETag = etag
+                    await load(url: base.appendingPathComponent("app.js"))
+                }
+            } else if !isLoaded {
+                error = "waiting for the dev server at \(base)"
+            }
+            try? await Task.sleep(for: interval)
+        }
+    }
+
+    #endif
+
+    /// How many Fast Refreshes applied since the last full load.
+    public private(set) var refreshes = 0
+
+    /// Evaluates the app half again in the running engine: its modules
+    /// re-register their components and `run` refreshes the mounted ones.
+    public func refresh(script: String, name: String = "app.js") {
+        guard isLoaded else {
+            load(script: script, name: name)
+            return
+        }
+        error = nil
+        do {
+            try host.evaluate(script, name: name)
+            refreshes += 1
+        } catch {
+            self.error = "\(error)"
+        }
+    }
+
+    /// Evaluates several scripts as one load (the vendor half, then the app half).
+    public func load(scripts: [(name: String, script: String)]) {
+        error = nil
+        if isLoaded { reset() }
+        refreshes = 0
+        do {
+            for (name, script) in scripts { try host.evaluate(script, name: name) }
+            isLoaded = host.hasGlobal("__sbDispatch")
+            if !isLoaded { error = "the scripts did not call run(): no __sbDispatch" }
+            sendEnvironment()
+        } catch {
+            self.error = "\(error)"
+        }
+    }
+
+    #if !canImport(FoundationBridge)
+    private func fetchText(_ url: URL) async -> String? {
+        var request = URLRequest(url: url)
+        request.cachePolicy = .reloadIgnoringLocalCacheData
+        guard let result = try? await URLSession.shared.data(for: request),
+              (result.1 as? HTTPURLResponse).map({ (200..<300).contains($0.statusCode) }) ?? true
+        else { return nil }
+        return String(decoding: result.0, as: UTF8.self)
+    }
+
+    private func fetchJSON(_ url: URL) async -> JSONValue? {
+        guard let text = await fetchText(url) else { return nil }
+        return try? JSONValue.parse(text)
+    }
+
+    /// A `HEAD` request's `ETag` and status, or nil when the server is not there.
+    private func head(_ url: URL) async -> (String, Int)? {
+        var request = URLRequest(url: url)
+        request.httpMethod = "HEAD"
+        request.cachePolicy = .reloadIgnoringLocalCacheData
+        guard let result = try? await URLSession.shared.data(for: request), let http = result.1 as? HTTPURLResponse else { return nil }
+        return (http.value(forHTTPHeaderField: "ETag") ?? "", http.statusCode)
+    }
+    #endif
+
+    /// Delivers a renderer event to the app; returns after its render pass applied.
+    public func dispatch(_ event: RendererEvent) {
+        guard isLoaded else { return }
+        do {
+            try host.call("__sbDispatch", [.string(event.jsonString)])
+        } catch {
+            self.error = "\(error)"
+        }
+    }
+
+    /// Tells the app the device environment; sent once at load and on change.
+    public func setEnvironment(colorScheme: String? = nil, dynamicTypeSize: String? = nil, horizontalSizeClass: String? = nil) {
+        var changed = false
+        if let colorScheme, colorScheme != self.colorScheme { self.colorScheme = colorScheme; changed = true }
+        if let dynamicTypeSize, dynamicTypeSize != self.dynamicTypeSize { self.dynamicTypeSize = dynamicTypeSize; changed = true }
+        if let horizontalSizeClass, horizontalSizeClass != self.horizontalSizeClass { self.horizontalSizeClass = horizontalSizeClass; changed = true }
+        if changed { sendEnvironment() }
+    }
+
+    private func sendEnvironment() {
+        guard isLoaded, colorScheme != nil || dynamicTypeSize != nil || horizontalSizeClass != nil else { return }
+        dispatch(.environment(colorScheme: colorScheme, dynamicTypeSize: dynamicTypeSize, horizontalSizeClass: horizontalSizeClass))
+    }
+
+    /// The scene moved between the foreground, inactive and the background.
+    public func setScenePhase(_ phase: String) {
+        guard isLoaded else { return }
+        dispatch(.environment(scenePhase: phase))
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Runtime/NativeRegistry.swift

@@ -0,0 +1,53 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// What a registered native view gets: the element's `props` as the app
+/// wrote them, its children (SwiftUI views the app put inside it) and a way
+/// to send a value back, which reaches the element's `onEvent` in JavaScript.
+public struct NativeViewContext {
+    public let id: Int
+    public let props: JSONValue
+    public let children: [ElementNode]
+    public let send: (JSONValue) -> Void
+
+    /// The children as a view (built on the main actor, as views are).
+    @MainActor public var content: some View {
+        ForEach(children) { ElementView(node: $0) }
+    }
+}
+
+/// The escape hatch (docs/native.md): the `native` element kind, which only
+/// a JavaScript producer emits, names a view the Swift app registered.
+///
+/// ```swift
+/// NativeRegistry.register("MapView") { context in
+///     MapView(region: context.props["region"]) { context.send(["tapped": true]) }
+/// }
+/// ```
+///
+/// ```tsx
+/// <Native name="MapView" props={{ region }} onEvent={(value) => …} />
+/// ```
+@MainActor
+public enum NativeRegistry {
+    public typealias Builder = (NativeViewContext) -> AnyView
+    private static var builders: [String: Builder] = [:]
+
+    public static func register<V: View>(_ name: String, @ViewBuilder _ builder: @escaping (NativeViewContext) -> V) {
+        builders[name] = { AnyView(builder($0)) }
+    }
+
+    public static func unregister(_ name: String) {
+        builders[name] = nil
+    }
+
+    public static func isRegistered(_ name: String) -> Bool { builders[name] != nil }
+
+    static func view(name: String, context: NativeViewContext) -> AnyView? {
+        builders[name]?(context)
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/SwiftBrowserNative.swift

@@ -0,0 +1,6 @@
+// SwiftBrowserNative: the render ops drawn by SwiftUI, with the app's logic
+// in JavaScriptCore (docs/native.md). Everything in this module is for Apple
+// platforms; each file is wrapped in `#if canImport(SwiftUI)` so the package
+// builds and its core tests run on Linux too.
+@_exported import SwiftBrowserProtocol
+@_exported import SwiftBrowserTree

package/swift/Sources/SwiftBrowserNative/Views/Conversions.swift

@@ -0,0 +1,361 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftUI
+#if canImport(UIKit)
+import UIKit
+#endif
+
+// The protocol's value types as SwiftUI's. Names are SwiftUI's own (the shim
+// emits them from the real API), so most of these are lookups.
+
+extension Color {
+    init(spec: SwiftBrowserProtocol.ColorSpec) {
+        switch spec {
+        case .rgba(let r, let g, let b, let a):
+            self = Color(.sRGB, red: r, green: g, blue: b, opacity: a)
+        case .named(let name, let opacity):
+            self = Color.named(name).opacity(opacity)
+        case .asset(let name, let opacity):
+            self = Color(name, bundle: .main).opacity(opacity)
+        }
+    }
+
+    /// The semantic names of docs/ops-protocol.md ("Color") and UIKit's.
+    static func named(_ name: String) -> Color {
+        switch name {
+        case "primary", "label": return .primary
+        case "secondary", "secondaryLabel": return .secondary
+        case "foreground": return .primary
+        case "accent", "tint": return .accentColor
+        case "red": return .red
+        case "orange": return .orange
+        case "yellow": return .yellow
+        case "green": return .green
+        case "mint": return .mint
+        case "teal": return .teal
+        case "cyan": return .cyan
+        case "blue": return .blue
+        case "indigo": return .indigo
+        case "purple": return .purple
+        case "pink": return .pink
+        case "brown": return .brown
+        case "gray": return .gray
+        case "clear": return .clear
+        case "white": return .white
+        case "black": return .black
+        default: break
+        }
+        #if canImport(UIKit)
+        switch name {
+        case "systemBackground": return Color(uiColor: .systemBackground)
+        case "secondarySystemBackground": return Color(uiColor: .secondarySystemBackground)
+        case "tertiarySystemBackground": return Color(uiColor: .tertiarySystemBackground)
+        case "systemGroupedBackground": return Color(uiColor: .systemGroupedBackground)
+        case "secondarySystemGroupedBackground": return Color(uiColor: .secondarySystemGroupedBackground)
+        case "tertiarySystemGroupedBackground": return Color(uiColor: .tertiarySystemGroupedBackground)
+        case "tertiaryLabel": return Color(uiColor: .tertiaryLabel)
+        case "quaternaryLabel": return Color(uiColor: .quaternaryLabel)
+        case "placeholderText": return Color(uiColor: .placeholderText)
+        case "separator": return Color(uiColor: .separator)
+        case "opaqueSeparator": return Color(uiColor: .opaqueSeparator)
+        case "systemFill": return Color(uiColor: .systemFill)
+        case "secondarySystemFill": return Color(uiColor: .secondarySystemFill)
+        case "tertiarySystemFill": return Color(uiColor: .tertiarySystemFill)
+        case "quaternarySystemFill": return Color(uiColor: .quaternarySystemFill)
+        case "systemGray2": return Color(uiColor: .systemGray2)
+        case "systemGray3": return Color(uiColor: .systemGray3)
+        case "systemGray4": return Color(uiColor: .systemGray4)
+        case "systemGray5": return Color(uiColor: .systemGray5)
+        case "systemGray6": return Color(uiColor: .systemGray6)
+        default: break
+        }
+        #else
+        switch name {
+        case "systemBackground", "secondarySystemGroupedBackground", "tertiarySystemBackground": return Color(white: 1)
+        case "secondarySystemBackground", "systemGroupedBackground", "tertiarySystemGroupedBackground": return Color(white: 0.95)
+        case "tertiaryLabel", "quaternaryLabel", "placeholderText": return Color.gray.opacity(0.5)
+        case "separator", "opaqueSeparator": return Color.gray.opacity(0.3)
+        case "systemFill", "secondarySystemFill", "tertiarySystemFill", "quaternarySystemFill": return Color.gray.opacity(0.2)
+        case "systemGray2", "systemGray3", "systemGray4", "systemGray5", "systemGray6": return Color.gray.opacity(0.4)
+        default: break
+        }
+        #endif
+        // An unknown name is visible, as the web renderer draws unknown asset colors.
+        return Color(.sRGB, red: 1, green: 0, blue: 1, opacity: 1)
+    }
+}
+
+extension AnyShapeStyle {
+    /// Any `ShapeStyle` of the protocol, type-erased.
+    init(spec: ShapeStyleSpec) {
+        switch spec {
+        case .color(.named("tint", let opacity)):
+            self = opacity < 1 ? AnyShapeStyle(TintShapeStyle().opacity(opacity)) : AnyShapeStyle(TintShapeStyle())
+        case .color(let color):
+            self = AnyShapeStyle(Color(spec: color))
+        case .hierarchical(let level, let opacity):
+            let style: AnyShapeStyle
+            switch level {
+            case 2: style = AnyShapeStyle(HierarchicalShapeStyle.secondary)
+            case 3: style = AnyShapeStyle(HierarchicalShapeStyle.tertiary)
+            case 4: style = AnyShapeStyle(HierarchicalShapeStyle.quaternary)
+            default: style = AnyShapeStyle(HierarchicalShapeStyle.primary)
+            }
+            self = opacity < 1 ? AnyShapeStyle(style.opacity(opacity)) : style
+        case .linearGradient(let stops, let start, let end, let opacity):
+            let gradient = LinearGradient(gradient: Gradient(stops: stops.map(Gradient.Stop.init(spec:))), startPoint: UnitPoint(spec: start), endPoint: UnitPoint(spec: end))
+            self = opacity < 1 ? AnyShapeStyle(gradient.opacity(opacity)) : AnyShapeStyle(gradient)
+        case .radialGradient(let stops, let center, let startRadius, let endRadius, let opacity):
+            let gradient = RadialGradient(gradient: Gradient(stops: stops.map(Gradient.Stop.init(spec:))), center: UnitPoint(spec: center), startRadius: startRadius, endRadius: endRadius)
+            self = opacity < 1 ? AnyShapeStyle(gradient.opacity(opacity)) : AnyShapeStyle(gradient)
+        case .angularGradient(let stops, let center, let startAngle, let endAngle, let opacity):
+            let gradient = AngularGradient(gradient: Gradient(stops: stops.map(Gradient.Stop.init(spec:))), center: UnitPoint(spec: center), startAngle: .degrees(startAngle), endAngle: .degrees(endAngle))
+            self = opacity < 1 ? AnyShapeStyle(gradient.opacity(opacity)) : AnyShapeStyle(gradient)
+        case .colorGradient(let color, let opacity):
+            let gradient = Color(spec: color).gradient
+            self = opacity < 1 ? AnyShapeStyle(gradient.opacity(opacity)) : AnyShapeStyle(gradient)
+        case .material(let name, let opacity):
+            let material: Material
+            switch name {
+            case "ultraThin": material = .ultraThinMaterial
+            case "thin": material = .thinMaterial
+            case "thick": material = .thickMaterial
+            case "ultraThick": material = .ultraThickMaterial
+            default: material = .regularMaterial
+            }
+            self = opacity < 1 ? AnyShapeStyle(material.opacity(opacity)) : AnyShapeStyle(material)
+        }
+    }
+}
+
+extension Gradient.Stop {
+    init(spec: GradientStopSpec) {
+        self.init(color: Color(spec: spec.color), location: spec.location)
+    }
+}
+
+extension UnitPoint {
+    init(spec: UnitPointSpec) {
+        self.init(x: spec.x, y: spec.y)
+    }
+}
+
+extension Font {
+    init(spec: FontSpec) {
+        let weight = spec.weight.map(Font.Weight.init(name:))
+        let design = spec.design.map(Font.Design.init(name:))
+        var font: Font
+        if let size = spec.size {
+            font = .system(size: size, weight: weight, design: design)
+        } else {
+            let style = Font.TextStyle(name: spec.textStyle ?? "body")
+            font = .system(style, design: design, weight: weight)
+        }
+        if spec.monospacedDigit { font = font.monospacedDigit() }
+        self = font
+    }
+}
+
+extension Font.Weight {
+    init(name: String) {
+        switch name {
+        case "ultraLight": self = .ultraLight
+        case "thin": self = .thin
+        case "light": self = .light
+        case "medium": self = .medium
+        case "semibold": self = .semibold
+        case "bold": self = .bold
+        case "heavy": self = .heavy
+        case "black": self = .black
+        default: self = .regular
+        }
+    }
+}
+
+extension Font.Design {
+    init(name: String) {
+        switch name {
+        case "serif": self = .serif
+        case "rounded": self = .rounded
+        case "monospaced": self = .monospaced
+        default: self = .default
+        }
+    }
+}
+
+extension Font.TextStyle {
+    init(name: String) {
+        switch name {
+        case "largeTitle": self = .largeTitle
+        case "title": self = .title
+        case "title2": self = .title2
+        case "title3": self = .title3
+        case "headline": self = .headline
+        case "subheadline": self = .subheadline
+        case "callout": self = .callout
+        case "footnote": self = .footnote
+        case "caption": self = .caption
+        case "caption2": self = .caption2
+        default: self = .body
+        }
+    }
+}
+
+extension Alignment {
+    init(name: String) {
+        switch name {
+        case "leading": self = .leading
+        case "trailing": self = .trailing
+        case "top": self = .top
+        case "bottom": self = .bottom
+        case "topLeading": self = .topLeading
+        case "topTrailing": self = .topTrailing
+        case "bottomLeading": self = .bottomLeading
+        case "bottomTrailing": self = .bottomTrailing
+        default: self = .center
+        }
+    }
+}
+
+extension HorizontalAlignment {
+    init(name: String) {
+        switch name {
+        case "leading": self = .leading
+        case "trailing": self = .trailing
+        default: self = .center
+        }
+    }
+}
+
+extension VerticalAlignment {
+    init(name: String) {
+        switch name {
+        case "top": self = .top
+        case "bottom": self = .bottom
+        case "firstTextBaseline": self = .firstTextBaseline
+        case "lastTextBaseline": self = .lastTextBaseline
+        default: self = .center
+        }
+    }
+}
+
+extension TextAlignment {
+    init(name: String) {
+        switch name {
+        case "leading": self = .leading
+        case "trailing": self = .trailing
+        default: self = .center
+        }
+    }
+}
+
+extension Edge {
+    init?(name: String) {
+        switch name {
+        case "top": self = .top
+        case "leading": self = .leading
+        case "bottom": self = .bottom
+        case "trailing": self = .trailing
+        default: return nil
+        }
+    }
+}
+
+extension Edge.Set {
+    init(names: [String]) {
+        var set: Edge.Set = []
+        for name in names {
+            if let edge = Edge(name: name) { set.insert(Edge.Set(edge)) }
+        }
+        self = set
+    }
+}
+
+extension CGFloat {
+    init?(dimension: DimensionSpec?) {
+        switch dimension {
+        case .points(let value)?: self = value
+        case .infinity?: self = .infinity
+        case nil: return nil
+        }
+    }
+}
+
+extension Animation {
+    /// A `commit`'s or `.animation(_:value:)`'s animation.
+    init(spec: AnimationSpec) {
+        let duration = spec.duration ?? 0.35
+        var animation: Animation
+        switch spec.type {
+        case "linear": animation = .linear(duration: duration)
+        case "easeIn": animation = .easeIn(duration: duration)
+        case "easeOut": animation = .easeOut(duration: duration)
+        case "easeInOut": animation = .easeInOut(duration: duration)
+        case "spring": animation = .spring(duration: duration, bounce: spec.bounce ?? 0)
+        default: animation = spec.duration == nil ? .default : .easeInOut(duration: duration)
+        }
+        if let delay = spec.delay, delay > 0 { animation = animation.delay(delay) }
+        if spec.repeatsForever {
+            animation = animation.repeatForever(autoreverses: spec.autoreverses)
+        } else if let count = spec.repeatCount, count > 1 {
+            animation = animation.repeatCount(count, autoreverses: spec.autoreverses)
+        }
+        self = animation
+    }
+}
+
+extension AnyTransition {
+    /// A `transition` field: one part, or several combined.
+    init(specs: [TransitionSpec]) {
+        guard let first = specs.first else {
+            self = .identity
+            return
+        }
+        var transition = AnyTransition(spec: first)
+        for spec in specs.dropFirst() { transition = transition.combined(with: AnyTransition(spec: spec)) }
+        self = transition
+    }
+
+    init(spec: TransitionSpec) {
+        switch spec.kind {
+        case "opacity": self = .opacity
+        case "scale": self = .scale(scale: spec.scale ?? 0.5)
+        case "slide": self = .slide
+        case "move": self = .move(edge: spec.edge.flatMap(Edge.init(name:)) ?? .bottom)
+        case "offset": self = .offset(x: spec.x ?? 0, y: spec.y ?? 0)
+        case "asymmetric":
+            self = .asymmetric(insertion: AnyTransition(specs: spec.insertion ?? []), removal: AnyTransition(specs: spec.removal ?? []))
+        default: self = .identity
+        }
+    }
+}
+
+extension EdgeInsets {
+    /// `.padding(...)` edges: a missing edge is not padded.
+    init(spec: EdgeInsetsSpec) {
+        self.init(top: spec.top ?? 0, leading: spec.leading ?? 0, bottom: spec.bottom ?? 0, trailing: spec.trailing ?? 0)
+    }
+}
+
+extension DynamicTypeSize {
+    /// The protocol's name for the size (`xSmall` ... `accessibility5`).
+    var protocolName: String {
+        switch self {
+        case .xSmall: return "xSmall"
+        case .small: return "small"
+        case .medium: return "medium"
+        case .large: return "large"
+        case .xLarge: return "xLarge"
+        case .xxLarge: return "xxLarge"
+        case .xxxLarge: return "xxxLarge"
+        case .accessibility1: return "accessibility1"
+        case .accessibility2: return "accessibility2"
+        case .accessibility3: return "accessibility3"
+        case .accessibility4: return "accessibility4"
+        case .accessibility5: return "accessibility5"
+        @unknown default: return "large"
+        }
+    }
+}
+#endif