@swiftbrowser/swift 0.0.0-stage → 0.1.0

package/Sources/SwiftUI/Runtime/Runtime.swift

@@ -0,0 +1,1367 @@
+import Observation
+
+#if canImport(WASILibc)
+import WASILibc
+#elseif canImport(Glibc)
+import Glibc
+#elseif canImport(Musl)
+import Musl
+#elseif canImport(Darwin)
+import Darwin
+#endif
+
+/// A view that has been mounted. Composite views keep their `State` boxes here
+/// so values survive the parent recreating the view struct.
+@MainActor
+final class _MountedNode {
+    var view: any View
+    var children: [_MountedNode] = []
+    var boxes: [any _AnyStateBox] = []
+    /// Identity within a keyed parent (`ForEach`).
+    var key: AnyHashable?
+    /// Position-and-type path used to restore state across hot reloads.
+    var path = ""
+    var environment = EnvironmentValues()
+    /// Handler supplied by the runtime (navigation links and screens).
+    var handler: ((_JSON) -> Void)?
+    var navTitle: String?
+    var navDisplayMode: String?
+    var depth = 0
+    var appeared = false
+    /// `.animation(_:value:)`: the last tracked value and a counter bumped on change.
+    var animationValue: Any?
+    var animationToken = 0
+    /// Sheets: the mounted sheet content (second child) and its detents.
+    var sheetDetents: [String]?
+    /// `.task`: the running task and the id it was started for.
+    var task: Task<Void, Never>?
+    var taskID: AnyHashable?
+    var taskStarted = false
+    /// `GeometryReader`: the size the renderer last reported.
+    var geometrySize = CGSize.zero
+    /// Phase 12: this stack is a `.scrollTargetLayout()`; its props carry `scrollTarget`.
+    var scrollTargetLayout = false
+    /// `TabView` / `Picker`: option tags in order, and the selected index.
+    var optionTags: [AnyHashable?] = []
+    var selectedIndex = 0
+    /// `NavigationStack`: destinations registered by descendants, kept across renders.
+    var destinations: [ObjectIdentifier: (Any) -> (any View)?] = [:]
+    var pickerOptions: [String] = []
+    var pickerLabel = ""
+    /// `NavigationSplitView`: the sidebar's `List(selection:)` binding, registered
+    /// each pass while the sidebar is reconciled.
+    var splitSelection: _ListSelection?
+    /// `NavigationStack` nested in another stack's screen: rendered in place.
+    var navFlattened = false
+    /// `navscreen` / `List`: the edit mode this node owns (`EditButton` toggles it).
+    var editMode = EditMode.inactive
+    /// `NavigationStack` / compact `NavigationSplitView`: the stack context its
+    /// screens and links share. Kept across passes: a clean pass skips the
+    /// phase that recomputes `detailShown`, and screen handlers capture it.
+    var navContext: _NavContext?
+
+    // Incremental rendering (Phase 9). A render re-runs a view's body only
+    // when the node is `dirty` (its own `@State`, observed object or
+    // `@Observable` read changed) or an ancestor re-ran (its view value is
+    // new); a clean node whose descendants are all clean is skipped whole,
+    // and the elements it produced last time are reused.
+    weak var parent: _MountedNode?
+    /// This node's body must run again.
+    var dirty = true
+    /// A descendant is dirty (the chain from the root to every dirty node).
+    var subtreeDirty = false
+    /// The elements this node produced last time, with the sheets and alerts
+    /// its subtree presented (they are collected as side effects).
+    var cachedElements: [_Element]?
+    var cachedSheets: [_Element] = []
+    var cachedAlerts: [_Element] = []
+
+    init(view: any View) {
+        self.view = view
+    }
+}
+
+/// The enclosing `NavigationStack`, shared by everything inside it.
+@MainActor
+final class _NavContext {
+    var box: _StateBox<[_PushedScreen]>
+    var path: _PathBinding?
+    /// The stack's mounted node, which owns the destination registry.
+    unowned let node: _MountedNode
+
+    init(box: _StateBox<[_PushedScreen]>, path: _PathBinding?, node: _MountedNode) {
+        self.box = box
+        self.path = path
+        self.node = node
+    }
+
+    func push(_ view: any View) { box.value.append(_PushedScreen(view: view)) }
+
+    /// Pushes a value: onto the path binding when there is one, otherwise as
+    /// a resolved destination view.
+    func push(value: AnyHashable) {
+        if let path {
+            path.set(path.get() + [value])
+        } else {
+            push(destination(for: value))
+        }
+    }
+
+    func register(_ registration: any _DestinationRegistering) {
+        node.destinations[registration._destinationType] = { registration._destination(for: $0) }
+    }
+
+    func destination(for value: AnyHashable) -> any View {
+        let type = ObjectIdentifier(Swift.type(of: value.base))
+        if let builder = node.destinations[type], let view = builder(value.base) { return view }
+        return Text("No navigationDestination(for: \(Swift.type(of: value.base)).self)")
+    }
+
+    /// Compact `NavigationSplitView`: set to the split view's node. While
+    /// `detailShown`, depth 1 is the detail screen, whose pop clears the
+    /// sidebar's selection; pushed screens follow it.
+    var splitNode: _MountedNode?
+    var detailShown = false
+
+    /// Pops so that `depth` screens below the popped one remain (`depth` 1 pops to the root).
+    func pop(to depth: Int) {
+        if let splitNode {
+            if detailShown, depth <= 1 {
+                box.value.removeAll()
+                splitNode.splitSelection?.set(nil)
+                return
+            }
+            let pushedDepth = depth - (detailShown ? 1 : 0)
+            guard pushedDepth >= 1, box.value.count >= pushedDepth else { return }
+            box.value.removeSubrange((pushedDepth - 1)...)
+            return
+        }
+        let pathCount = path?.get().count ?? 0
+        if depth <= pathCount, let path {
+            path.set(Array(path.get().prefix(depth - 1)))
+            box.value.removeAll()
+            return
+        }
+        let pushedDepth = depth - pathCount
+        guard pushedDepth >= 1, box.value.count >= pushedDepth else { return }
+        box.value.removeSubrange((pushedDepth - 1)...)
+    }
+}
+
+struct _ReconcileContext {
+    var environment: EnvironmentValues
+    /// `index:Type/index:Type/...` from the root; keys state snapshots.
+    var path: String = ""
+    var navStack: _NavContext?
+    var screen: _MountedNode?
+    /// The nearest enclosing presented sheet's node (for `presentationDetents`).
+    var sheet: _MountedNode?
+    /// The `NavigationSplitView` whose sidebar is being reconciled: its
+    /// `List(selection:)` registers with it.
+    var split: _MountedNode?
+    /// Inside a `TabView` tab that is not selected: titles stay put.
+    var inactiveTab = false
+}
+
+/// Owns the mounted tree, schedules renders and routes events.
+@MainActor
+public final class _Runtime {
+    public static let shared = _Runtime()
+
+    private(set) var host: any _RenderHost = _BufferedHost.shared
+    private var rootView: (any View)?
+    private var root: _MountedNode?
+    private let reconciler = _Reconciler()
+    private var needsRender = false
+    /// The next render re-runs every body (environment changes, `invalidate()`).
+    private var fullRender = true
+    private var rendering = false
+    private var pendingAppear: [@MainActor () -> Void] = []
+    /// Values the renderer controls, such as the color scheme.
+    private var baseEnvironment = EnvironmentValues()
+    /// `.preferredColorScheme` seen in the last pass (sticky), and what the host was told.
+    private var preferredColorScheme: ColorScheme?
+    private var sentColorScheme: ColorScheme?
+    /// State values from a previous build, applied as views first mount.
+    private var restoredState: [String: _JSON] = [:]
+    /// Animation for the next render pass, set by `withAnimation`. Shared by
+    /// every runtime instance because `withAnimation` is a free function.
+    private static var transactionAnimation: Animation?
+    /// Sheet elements collected during the current element pass, emitted after the tree.
+    private var presentedSheets: [_Element] = []
+    /// Alert elements collected during the current element pass, emitted after
+    /// the sheets so that an alert presented from a sheet covers it.
+    private var presentedAlerts: [_Element] = []
+
+    init() {}
+
+    // MARK: Entry points
+
+    /// Called from `App.main()`.
+    public func launch<A: App>(_ app: A) {
+        guard let scene = app.body as? any _RootScene else {
+            fatalError("\(A.Body.self) is not a scene the runtime can present. Use WindowGroup.")
+        }
+        let headless = _environment("SB_HEADLESS") == "1"
+        if let state = _environment("SB_STATE"), let json = try? _JSON.parse(state), case .object(let values) = json {
+            restoredState = values
+        }
+        mount(scene._rootView, host: headless ? _HeadlessHost() : _BufferedHost.shared)
+
+        if headless {
+            replay(events: _environment("SB_EVENTS") ?? "")
+            if let limit = _environment("SB_RUN_MS").flatMap(Double.init), limit > 0 {
+                runHeadlessClock(upTo: limit)
+            }
+        }
+    }
+
+    /// Sends the app's defaults to the host (a `defaults` op), which keeps them
+    /// for the next launch. Called by `UserDefaults` (Sources/_FoundationCommon).
+    public func storeDefaults(_ values: _JSON) {
+        host.apply([.defaults(values)])
+    }
+
+    /// Drives the executor with a virtual clock: runs jobs, jumps to the next
+    /// timer, and stops when none remain or the clock would pass `limit` ms.
+    private func runHeadlessClock(upTo limit: Double) {
+        let executor = _HostExecutor.shared
+        var guardCount = 0
+        while guardCount < 10_000 {
+            guardCount += 1
+            let next = executor.runJobs()
+            renderIfNeeded()
+            if next < 0 { break }
+            let nextMs = Double(executor.nowNs + UInt64(next)) / 1_000_000
+            if nextMs > limit { break }
+            executor.nowNs += UInt64(next)
+            host.apply([.event(.object(["type": .string("clock"), "ms": .number(nextMs.rounded())]))])
+        }
+    }
+
+    /// Mounts `view` as the root and performs the first render.
+    func mount(_ view: any View, host: any _RenderHost) {
+        self.host = host
+        rootView = view
+        root = nil
+        render()
+    }
+
+    /// A tap on the element with this id.
+    public func dispatch(tap id: Int) {
+        dispatch(event: .object(["type": .string("tap"), "id": .number(Double(id))]))
+    }
+
+    /// Handles one renderer event (see docs/ops-protocol.md) and renders if needed.
+    public func dispatch(event: _JSON) {
+        handle(event)
+        renderIfNeeded()
+    }
+
+    /// Applies an event's state changes without rendering. A `batch` event
+    /// (`{"type": "batch", "events": [...]}`) applies each of its events, so
+    /// one host layout pass that measured several `geometry` and `layout`
+    /// elements costs one render instead of one per element.
+    private func handle(_ event: _JSON) {
+        guard case .object(let fields) = event, case .string(let type)? = fields["type"] else { return }
+        let id: Int? = if case .number(let n)? = fields["id"] { Int(n) } else { nil }
+
+        switch type {
+        case "batch":
+            if case .array(let events)? = fields["events"] { events.forEach(handle) }
+        case "tap":
+            if let id { reconciler.handlers[id]?(.null) }
+        case "text", "toggle", "select", "step", "slide", "date":
+            if let id, let value = fields["value"] { reconciler.handlers[id]?(value) }
+        case "geometry":
+            if let id, let width = fields["width"], let height = fields["height"] {
+                reconciler.handlers[id]?(.object(["width": width, "height": height]))
+            }
+        case "layout":
+            // Host measurement of a custom `Layout`'s children; the handler
+            // parses the whole event (see CustomLayout.swift).
+            if let id { reconciler.handlers[id]?(event) }
+        case "drag", "longpress", "delete", "refresh", "focus", "submit":
+            // Phase 8: the handler receives the whole event and reads `type`
+            // (a `listrow` handles both `tap` and `delete`; Phase 12: a
+            // `textfield` handles `text`, `focus` and `submit`).
+            if let id { reconciler.handlers[id]?(event) }
+        case "environment":
+            if case .string(let scheme)? = fields["colorScheme"] {
+                baseEnvironment.colorScheme = scheme == "dark" ? .dark : .light
+                invalidate()
+            }
+            if case .string(let size)? = fields["dynamicTypeSize"], let value = DynamicTypeSize(name: size) {
+                baseEnvironment.dynamicTypeSize = value
+                invalidate()
+            }
+            if case .string(let name)? = fields["horizontalSizeClass"], let value = UserInterfaceSizeClass(name: name) {
+                baseEnvironment.horizontalSizeClass = value
+                invalidate()
+            }
+            if case .string(let name)? = fields["scenePhase"], let value = ScenePhase(name: name) {
+                baseEnvironment.scenePhase = value
+                invalidate()
+            }
+        default:
+            break
+        }
+    }
+
+    /// Schedules a render that re-evaluates the whole tree.
+    func invalidate() {
+        needsRender = true
+        fullRender = true
+    }
+
+    /// Schedules a render that re-evaluates `node`'s subtree (and whatever
+    /// else is dirty); everything else is reused.
+    func invalidate(_ node: _MountedNode) {
+        markDirty(node)
+        needsRender = true
+    }
+
+    private func markDirty(_ node: _MountedNode) {
+        node.dirty = true
+        node.cachedElements = nil
+        var ancestor = node.parent
+        while let current = ancestor, !current.subtreeDirty {
+            current.subtreeDirty = true
+            current.cachedElements = nil
+            ancestor = current.parent
+        }
+    }
+
+    /// Records the animation `withAnimation` wants for the changes that follow.
+    func beginTransaction(_ animation: Animation?) {
+        Self.transactionAnimation = animation
+    }
+
+    /// Advances the executor's clock, runs queued jobs and due timers, renders
+    /// if anything changed, and returns milliseconds until the next timer (-1: none).
+    public func runJobs(nowMilliseconds: Double) -> Double {
+        let executor = _HostExecutor.shared
+        executor.nowNs = UInt64(max(0, nowMilliseconds) * 1_000_000)
+        let next = executor.runJobs()
+        renderIfNeeded()
+        return next < 0 ? -1 : Double(next) / 1_000_000
+    }
+
+    func renderIfNeeded() {
+        if needsRender, !rendering { render() }
+    }
+
+    // MARK: Rendering
+
+    private func render() {
+        guard let rootView else { return }
+        rendering = true
+        needsRender = false
+
+        let context = _ReconcileContext(environment: baseEnvironment, path: _typeName(of: rootView))
+        let force = fullRender
+        fullRender = false
+        let node = reconcile(root, with: rootView, context: context, force: force)
+        root = node
+        presentedSheets = []
+        presentedAlerts = []
+        // Bodies are tracked per node (see `reconcileChildren`); an observable
+        // read while producing elements (rare) falls back to a full render.
+        let tree = withObservationTracking {
+            elements(of: node) + presentedSheets + presentedAlerts
+        } onChange: { [weak self] in
+            MainActor.assumeIsolated { self?.invalidate() }
+        }
+        let animation = Self.transactionAnimation?._json
+        Self.transactionAnimation = nil
+        var ops = reconciler.update(with: tree, animation: animation)
+        if preferredColorScheme != sentColorScheme {
+            // Phase 12: `.preferredColorScheme` reaches the host as a root update.
+            sentColorScheme = preferredColorScheme
+            ops.insert(.update(id: 0, props: .object(["colorScheme": preferredColorScheme.map { .string($0 == .dark ? "dark" : "light") } ?? .null])), at: 0)
+        }
+        host.apply(ops)
+        rendering = false
+
+        let appearing = pendingAppear
+        pendingAppear.removeAll()
+        for action in appearing { action() }
+        renderIfNeeded()
+    }
+
+    /// Re-evaluates the mounted tree against `view`, reusing nodes (and their
+    /// state) whose view type is unchanged at the same position or key.
+    /// `force`: the parent re-ran, so `view` is a new value and this node's
+    /// body must run (and its children are forced in turn). Otherwise `view`
+    /// is the node's own stored view and the body runs only when the node is
+    /// dirty; a clean node with no dirty descendant is returned as is.
+    private func reconcile(_ existing: _MountedNode?, with view: any View, context: _ReconcileContext,
+                           force: Bool) -> _MountedNode {
+        if let existing, !force, !existing.dirty, !existing.subtreeDirty {
+            return existing
+        }
+        var context = context
+        let node: _MountedNode
+        let clean: Bool
+        let properties: [Any]?
+        let boxes: [any _AnyStateBox]
+        let path = context.path
+
+        if let existing, type(of: existing.view) == type(of: view) {
+            node = existing
+            clean = !force && !existing.dirty
+            if clean {
+                // Same view value, same state: no reflection, no body.
+                properties = nil
+                boxes = existing.boxes
+            } else {
+                properties = _reflectedProperties(of: view)
+                boxes = stateBoxes(in: properties)
+                for (old, new) in zip(existing.boxes, boxes) where old !== new {
+                    new._adopt(old)
+                }
+            }
+        } else {
+            node = _MountedNode(view: view)
+            clean = false
+            properties = _reflectedProperties(of: view)
+            boxes = stateBoxes(in: properties)
+            restoreState(into: boxes, at: path)
+        }
+        node.dirty = false
+        node.subtreeDirty = false
+        if !clean { node.cachedElements = nil }
+        node.view = view
+        node.path = path
+        if !clean {
+            node.boxes = boxes
+            for box in boxes {
+                // Weak: a `StateObject`'s publisher keeps this closure for as long
+                // as the object lives, which may be longer than the runtime (tests).
+                box._onChange = { [weak self, weak node] in
+                    if let node { self?.invalidate(node) }
+                }
+            }
+        }
+
+        if let modifier = view as? any _EnvironmentModifying {
+            modifier._apply(to: &context.environment)
+        }
+        if let preferred = view as? any _PreferredColorSchemeModifying, !context.inactiveTab {
+            preferredColorScheme = preferred._preferredColorScheme
+        }
+        if context.environment._scrollTargetLayout, view is any _ScrollTargetContainer {
+            // This stack's children are the snap targets; nested stacks are not.
+            node.scrollTargetLayout = true
+            context.environment._scrollTargetLayout = false
+        }
+        if let title = view as? any _NavigationTitleModifying, let screen = context.screen, !context.inactiveTab {
+            if let value = title._title { screen.navTitle = value }
+            if let mode = title._displayMode { screen.navDisplayMode = mode }
+        }
+        if let appear = view as? any _OnAppearing, !node.appeared {
+            node.appeared = true
+            if let action = appear._action { pendingAppear.append(action) }
+        }
+        if let detents = view as? any _DetentsModifying, let sheet = context.sheet {
+            sheet.sheetDetents = detents._detents
+        }
+        if let animated = view as? any _AnimatedView {
+            if node === existing, animated._changed(since: node.animationValue) {
+                node.animationToken += 1
+            }
+            node.animationValue = animated._value
+        }
+        if let registration = view as? any _DestinationRegistering {
+            context.navStack?.register(registration)
+        }
+        if let sidebar = view as? _SplitSidebarView {
+            context.split = sidebar.split
+        }
+        if let list = view as? any _ListSelectionProviding {
+            if let selection = list._selection {
+                context.environment._listSelection = selection
+                context.split?.splitSelection = selection
+            }
+            // A list outside a navigation screen owns its rows' edit mode.
+            if context.environment.editMode == nil {
+                context.environment.editMode = editModeBinding(for: node)
+            }
+        }
+        if let starting = view as? any _TaskStarting {
+            if !node.taskStarted || node.taskID != starting._taskID {
+                node.task?.cancel()
+                node.taskStarted = true
+                node.taskID = starting._taskID
+                let action = starting._taskAction
+                node.task = Task { await action() }
+            }
+        }
+
+        // Decide how to produce the children first, because navigation views
+        // adjust the environment that must be resolved before any body runs.
+        var makeChildren: () -> [any View]
+        /// A second batch of children, produced after the first was reconciled
+        /// (a compact split view decides on its detail screen from the
+        /// selection its sidebar registered).
+        var makeMoreChildren: (() -> [any View])?
+        var keys: [AnyHashable]?
+        node.handler = nil
+        node.navFlattened = false
+
+        if let split = view as? any _NavigationSplitHost {
+            // Descendants fill these in as they are reconciled; a clean pass
+            // (only some descendants re-run) keeps what the skipped ones set.
+            if !clean { node.splitSelection = nil }
+            let sidebar = _SplitSidebarView(content: split._sidebar, split: node)
+            if context.environment.horizontalSizeClass == .regular {
+                // Two columns, each its own stack; they are not nested in a
+                // screen even when the split view is, so they are not flattened.
+                context.navStack = nil
+                context.screen = nil
+                let detail = split._detail
+                makeChildren = {
+                    let sidebarStack = NavigationStack {
+                        _NavigationTitleView(content: AnyView(sidebar), title: nil, displayMode: "large")
+                    }
+                    let detailStack: any View = detail is any _NavigationStackView
+                        ? detail : NavigationStack { AnyView(detail) }
+                    return [sidebarStack, detailStack]
+                }
+            } else {
+                // One stack rooted at the sidebar; the detail is pushed while
+                // the sidebar's selection is set, and deeper links push after it.
+                let nav = navContext(for: node, box: split._pushedBox, path: nil, clean: clean)
+                nav.splitNode = node
+                context.navStack = nav
+                makeChildren = { [_NavScreenView(content: sidebar, depth: 0)] }
+                let detail = split._detail
+                makeMoreChildren = {
+                    nav.detailShown = node.splitSelection?.get() != nil
+                    let base = nav.detailShown ? 1 : 0
+                    let detailScreens = nav.detailShown ? [_NavScreenView(content: detail, depth: 1)] : []
+                    let pushedScreens = nav.box.value.enumerated().map { index, pushed in
+                        _NavScreenView(content: pushed.view, depth: base + index + 1)
+                    }
+                    return detailScreens + pushedScreens
+                }
+            }
+        } else if let stack = view as? any _NavigationStackView, context.screen != nil, context.navStack != nil {
+            // Nested in another stack's screen: the root renders in place, its
+            // destinations and links use the enclosing stack, its path is ignored.
+            node.navFlattened = true
+            makeChildren = { [stack._root] }
+        } else if let stack = view as? any _NavigationStackView {
+            let nav = navContext(for: node, box: stack._pushedBox, path: stack._path, clean: clean)
+            context.navStack = nav
+            makeChildren = {
+                let pathScreens = (nav.path?.get() ?? []).enumerated().map { index, value in
+                    _NavScreenView(content: _PathScreenValue(value: value), depth: index + 1)
+                }
+                let pushedScreens = nav.box.value.enumerated().map { index, pushed in
+                    _NavScreenView(content: pushed.view, depth: pathScreens.count + index + 1)
+                }
+                return [_NavScreenView(content: stack._root, depth: 0)] + pathScreens + pushedScreens
+            }
+        } else if let screen = view as? _NavScreenView {
+            context.screen = node
+            // A screen inside an unselected tab still owns its own title.
+            context.inactiveTab = false
+            if !clean {
+                node.navTitle = nil
+                node.navDisplayMode = nil
+            }
+            node.depth = screen.depth
+            if screen.depth > 0, let nav = context.navStack {
+                let depth = screen.depth
+                node.handler = { _ in nav.pop(to: depth) }
+                context.environment.dismiss = DismissAction { nav.pop(to: depth) }
+            }
+            // Each screen owns the edit mode of its content (`EditButton`,
+            // `List.editing`), as on iOS.
+            context.environment.editMode = editModeBinding(for: node)
+            let nav = context.navStack
+            makeChildren = {
+                // Path screens resolve their value through the stack's
+                // registrations, which the root screen filled in just before.
+                if let pathValue = screen.content as? _PathScreenValue, let nav {
+                    return [nav.destination(for: pathValue.value)]
+                }
+                return [screen.content]
+            }
+        } else if let link = view as? any _NavigationLinkView {
+            let destination = link._destination
+            let value = (view as? any _NavigationValueLinkView)?._value
+            let nav = context.navStack
+            // In a split view's sidebar a value link selects the row of a
+            // `List(selection:)` instead of pushing.
+            let selection = context.environment._splitSidebar ? context.environment._listSelection : nil
+            node.handler = { _ in
+                if let value, let selection {
+                    selection.set(value)
+                } else if let value {
+                    nav?.push(value: value)
+                } else {
+                    nav?.push(destination)
+                }
+            }
+            makeChildren = { (view as? any _HostView)?._content ?? [] }
+        } else if let tabs = view as? any _TabViewHost {
+            let roots = _flattenChildren(tabs._tabContent)
+            node.optionTags = roots.map { _tag(of: $0) }
+            node.selectedIndex = tabs._selectedIndex(tags: node.optionTags)
+            let tags = node.optionTags
+            node.handler = { payload in
+                if case .number(let index) = payload { tabs._select(index: Int(index), tags: tags) }
+            }
+            let selected = node.selectedIndex
+            makeChildren = {
+                roots.enumerated().map { index, root in
+                    let label = _tabLabel(of: root)
+                    return _TabScreenView(content: root,
+                                          title: label.map { _textContent(of: $0) } ?? "",
+                                          systemImage: label.flatMap { _systemImage(of: $0) },
+                                          isSelected: index == selected)
+                }
+            }
+        } else if let tab = view as? _TabScreenView {
+            if !tab.isSelected { context.inactiveTab = true }
+            makeChildren = { [tab.content] }
+        } else if let picker = view as? any _PickerHost {
+            let options = _flattenPickerOptions(picker._options)
+            node.optionTags = options.map { $0.tag }
+            node.selectedIndex = picker._selectedIndex(tags: node.optionTags)
+            node.pickerOptions = options.map { _textContent(of: $0.view) }
+            node.pickerLabel = _textContent(of: picker._labelView)
+            let tags = node.optionTags
+            node.handler = { payload in
+                if case .number(let index) = payload { picker._select(index: Int(index), tags: tags) }
+            }
+            makeChildren = { [] }
+        } else if let reader = view as? any _GeometryReading {
+            let size = node.geometrySize
+            node.handler = { [unowned self] payload in
+                guard case .object(let fields) = payload,
+                      case .number(let width)? = fields["width"],
+                      case .number(let height)? = fields["height"] else { return }
+                let reported = CGSize(width: width, height: height)
+                if reported != node.geometrySize {
+                    node.geometrySize = reported
+                    self.invalidate(node)
+                }
+            }
+            makeChildren = { [reader._content(for: size)] }
+        } else if let sheet = view as? any _SheetPresenting {
+            // The base is always a child; the sheet content is a second child
+            // while presented, so its state survives re-renders.
+            let isPresented = sheet._isPresented
+            let onDismiss = sheet._onDismiss
+            if !clean { node.sheetDetents = nil }
+            node.handler = { _ in
+                isPresented.wrappedValue = false
+                onDismiss?()
+            }
+            if isPresented.wrappedValue {
+                makeChildren = { [sheet._base, sheet._sheetContent] }
+            } else {
+                makeChildren = { [sheet._base] }
+            }
+        } else if let alert = view as? any _AlertPresenting {
+            // Like a sheet: the actions are a second child while presented. A
+            // tap on the alert itself dismisses without running an action.
+            let isPresented = alert._isPresented
+            node.handler = { _ in isPresented.wrappedValue = false }
+            if isPresented.wrappedValue {
+                makeChildren = { [alert._base, alert._alertActions] }
+            } else {
+                makeChildren = { [alert._base] }
+            }
+        } else if let group = view as? any _GroupView {
+            keys = group._keys
+            makeChildren = { group._children }
+        } else if let hostView = view as? any _HostView {
+            makeChildren = { hostView._content }
+        } else {
+            makeChildren = { [self.body(of: view)] }
+        }
+
+        if node.handler == nil, let refreshing = view as? any _Refreshing {
+            node.handler = refreshing._refresh(in: context.environment).handler
+        }
+        if node.handler == nil, let handling = view as? any _EnvironmentHandling {
+            node.handler = handling._handler(in: context.environment)
+        }
+
+        node.environment = context.environment
+        if clean {
+            // The body's output is the children already mounted (the view
+            // value is unchanged); only the dirty ones among them re-run.
+            let kept = node.children
+            makeChildren = { kept.map(\.view) }
+            makeMoreChildren = nil
+            keys = kept.allSatisfy { $0.key != nil } && !kept.isEmpty ? kept.map { $0.key! } : nil
+        } else {
+            resolveEnvironment(in: properties, with: context.environment, owner: node)
+        }
+        var phases = [makeChildren]
+        if let makeMoreChildren { phases.append(makeMoreChildren) }
+        reconcileChildren(of: node, phases: phases, keys: keys, context: context, force: !clean)
+        return node
+    }
+
+    /// The stack context of a `NavigationStack` / split node, created once and
+    /// pointed at the current view's storage on every pass that re-ran the body.
+    private func navContext(for node: _MountedNode, box: _StateBox<[_PushedScreen]>, path: _PathBinding?,
+                            clean: Bool) -> _NavContext {
+        if let nav = node.navContext {
+            if !clean {
+                nav.box = box
+                nav.path = path
+            }
+            return nav
+        }
+        let nav = _NavContext(box: box, path: path, node: node)
+        node.navContext = nav
+        return nav
+    }
+
+    /// Reconciles the node's children phase by phase: each phase's views are
+    /// produced only after the previous phase's children were reconciled.
+    /// Keys apply to the first phase's views.
+    private func reconcileChildren(of node: _MountedNode, phases: [() -> [any View]],
+                                   keys: [AnyHashable]?, context: _ReconcileContext, force: Bool) {
+        let old = node.children
+        var oldByKey: [AnyHashable: _MountedNode] = [:]
+        for child in old {
+            if let key = child.key { oldByKey[key] = child }
+        }
+        defer {
+            let kept = Set(node.children.map(ObjectIdentifier.init))
+            for dropped in old where !kept.contains(ObjectIdentifier(dropped)) {
+                unmount(dropped)
+            }
+        }
+
+        var children: [_MountedNode] = []
+        for (phase, makeViews) in phases.enumerated() {
+            // The body (and a `ForEach`'s row closures) run under observation
+            // tracking: an `@Observable` property read here marks this node
+            // dirty when it changes, and nothing else re-renders.
+            let views: [any View] = force
+                ? withObservationTracking(makeViews) { [weak self, weak node] in
+                    MainActor.assumeIsolated { if let node { self?.invalidate(node) } }
+                }
+                : makeViews()
+            for childView in views {
+                let index = children.count
+                let key = phase == 0 ? keys?[index] : nil
+                let existing: _MountedNode?
+                if let key {
+                    existing = oldByKey.removeValue(forKey: key)
+                } else if index < old.count, old[index].key == nil {
+                    existing = old[index]
+                } else {
+                    existing = nil
+                }
+                var childContext = context
+                let segment = key.map { "\($0.base)" } ?? String(index)
+                childContext.path += "/\(segment):\(_typeName(of: childView))"
+                if index == 1, let sheet = node.view as? any _SheetPresenting {
+                    let isPresented = sheet._isPresented
+                    let onDismiss = sheet._onDismiss
+                    childContext.sheet = node
+                    childContext.navStack = nil
+                    childContext.screen = nil
+                    childContext.environment.dismiss = DismissAction {
+                        isPresented.wrappedValue = false
+                        onDismiss?()
+                    }
+                }
+                if index == 1, let alert = node.view as? any _AlertPresenting {
+                    let isPresented = alert._isPresented
+                    childContext.environment.dismiss = DismissAction { isPresented.wrappedValue = false }
+                }
+                let child = reconcile(existing, with: childView, context: childContext, force: force)
+                child.key = key
+                child.parent = node
+                children.append(child)
+            }
+        }
+        node.children = children
+    }
+
+    /// The `editMode` environment binding a `navscreen` or `List` node owns.
+    private func editModeBinding(for node: _MountedNode) -> Binding<EditMode> {
+        Binding(
+            get: { [weak node] in MainActor.assumeIsolated { node?.editMode ?? .inactive } },
+            set: { [weak self, weak node] mode in
+                MainActor.assumeIsolated {
+                    guard let node, node.editMode != mode else { return }
+                    node.editMode = mode
+                    self?.invalidate(node)
+                }
+            }
+        )
+    }
+
+    /// Cancels tasks in a subtree that left the tree.
+    private func unmount(_ node: _MountedNode) {
+        node.task?.cancel()
+        node.task = nil
+        node.children.forEach(unmount)
+    }
+
+    private func body(of view: any View) -> any View {
+        func open<V: View>(_ view: V) -> any View { view.body }
+        return open(view)
+    }
+
+    /// The property-wrapper values of a view that the runtime acts on
+    /// (`@State`, `@StateObject`, `@ObservedObject`, `@Environment`,
+    /// `@EnvironmentObject`), or `nil` when its type declares none.
+    ///
+    /// Reflection is the most expensive step of a render, and most views in a
+    /// tree are the shim's own modifiers and primitives, which declare no
+    /// such properties. The first instance of each type is reflected; when
+    /// none of its stored properties is one of those wrappers the type is
+    /// remembered as plain and never reflected again. The wrappers are
+    /// concrete struct types, so whether a stored property is one is a
+    /// property of the type, not of the instance.
+    private func _reflectedProperties(of view: any View) -> [Any]? {
+        let key = ObjectIdentifier(type(of: view))
+        if let plain = plainTypes[key], plain { return nil }
+        var values = Mirror(reflecting: view).children.map(\.value)
+        // `ModifiedContent` stores its `ViewModifier`, whose own `@State` and
+        // `@Environment` properties are managed like the view's.
+        for value in values where value is any ViewModifier {
+            values += Mirror(reflecting: value).children.map(\.value)
+        }
+        if plainTypes[key] == nil {
+            let relevant = values.contains { value in
+                value is any _StateProperty || value is any _EnvironmentProperty || value is any _ObservingProperty
+            }
+            plainTypes[key] = !relevant
+            if !relevant { return nil }
+        }
+        return values
+    }
+
+    /// Per view type: `true` when it declares no runtime-managed properties.
+    private var plainTypes: [ObjectIdentifier: Bool] = [:]
+    /// Per view type: its name without generic arguments.
+    private var typeNames: [ObjectIdentifier: String] = [:]
+
+    private func stateBoxes(in properties: [Any]?) -> [any _AnyStateBox] {
+        guard let properties else { return [] }
+        return properties.compactMap { ($0 as? any _StateProperty)?._box }
+    }
+
+    /// Resolves `@Environment`/`@EnvironmentObject` properties and subscribes
+    /// `@ObservedObject`/`@EnvironmentObject` properties so that their
+    /// object's `objectWillChange` invalidates this runtime. Resolution runs
+    /// first because an environment object is observed through its resolved value.
+    private func resolveEnvironment(in properties: [Any]?, with environment: EnvironmentValues, owner node: _MountedNode) {
+        guard let properties else { return }
+        for value in properties {
+            (value as? any _EnvironmentProperty)?._resolve(in: environment)
+            (value as? any _ObservingProperty)?._observe(owner: node) { [weak self, weak node] in
+                if let node { self?.invalidate(node) }
+            }
+        }
+    }
+
+    private func _typeName(of view: any View) -> String {
+        let key = ObjectIdentifier(type(of: view))
+        if let cached = typeNames[key] { return cached }
+        let full = String(describing: type(of: view))
+        let name = if let angle = full.firstIndex(of: "<") { String(full[..<angle]) } else { full }
+        typeNames[key] = name
+        return name
+    }
+
+    // MARK: Elements
+
+    private func elements(of node: _MountedNode) -> [_Element] {
+        if let cached = node.cachedElements {
+            presentedSheets += node.cachedSheets
+            presentedAlerts += node.cachedAlerts
+            return cached
+        }
+        let sheetsBefore = presentedSheets.count
+        let alertsBefore = presentedAlerts.count
+        let produced = produceElements(of: node)
+        node.cachedElements = produced
+        node.cachedSheets = Array(presentedSheets[sheetsBefore...])
+        node.cachedAlerts = Array(presentedAlerts[alertsBefore...])
+        return produced
+    }
+
+    private func produceElements(of node: _MountedNode) -> [_Element] {
+        var produced: [_Element]
+        if node.view is _NavScreenView {
+            // `.toolbar` / `.searchable` emit `toolbar` and `searchfield`
+            // elements wherever they were applied; the renderer wants them as
+            // the screen's own children, after the content.
+            var bar: [_Element] = []
+            let content = node.children.flatMap(elements(of:)).map { _hoistBarItems(from: $0, into: &bar) }
+            produced = [_Element(
+                kind: "navscreen",
+                props: .object([
+                    "title": .string(node.navTitle ?? ""),
+                    "displayMode": .string(node.navDisplayMode ?? "automatic"),
+                    "depth": .number(Double(node.depth)),
+                ]),
+                children: content + bar,
+                handler: node.handler
+            )]
+        } else if let sheet = node.view as? any _SheetPresenting {
+            // Base inline; the presented content becomes a root-level `sheet` element.
+            produced = node.children.first.map(elements(of:)) ?? []
+            if node.children.count > 1 {
+                let detents = sheet._fullScreen ? ["full"] : (node.sheetDetents ?? ["large"])
+                presentedSheets.append(_Element(
+                    kind: "sheet",
+                    props: .object(["detents": .array(detents.map(_JSON.string))]),
+                    children: elements(of: node.children[1]),
+                    handler: node.handler,
+                    key: AnyHashable(_SheetKey(path: node.path))
+                ))
+            }
+        } else if let alert = node.view as? any _AlertPresenting {
+            // Base inline; the actions become a root-level `alert` element whose
+            // buttons also dismiss when tapped.
+            produced = node.children.first.map(elements(of:)) ?? []
+            if node.children.count > 1 {
+                let isPresented = alert._isPresented
+                let buttons = elements(of: node.children[1]).map { _dismissing($0, with: isPresented) }
+                presentedAlerts.append(_Element(
+                    kind: "alert",
+                    props: .object([
+                        "title": .string(alert._alertTitle),
+                        "message": alert._alertMessage.map(_JSON.string) ?? .null,
+                        "style": .string(alert._alertStyle),
+                    ]),
+                    children: buttons,
+                    handler: node.handler,
+                    key: AnyHashable(_AlertKey(path: node.path))
+                ))
+            }
+        } else if node.view is any _NavigationSplitHost {
+            // Regular: `navsplit` over the two column stacks. Compact: one
+            // `navstack` whose screens are the sidebar, the detail and what
+            // the detail pushed.
+            let regular = node.environment.horizontalSizeClass == .regular
+            produced = [_Element(
+                kind: regular ? "navsplit" : "navstack",
+                props: .object([:]),
+                children: node.children.flatMap(elements(of:)),
+                handler: nil
+            )]
+        } else if node.view is any _NavigationStackView, node.navFlattened {
+            produced = node.children.flatMap(elements(of:))
+        } else if node.view is any _TabViewHost {
+            produced = [_Element(
+                kind: "tabview",
+                props: .object(["selected": .number(Double(node.selectedIndex))]),
+                children: node.children.flatMap(elements(of:)),
+                handler: node.handler
+            )]
+        } else if node.view is any _PickerHost {
+            produced = [_Element(
+                kind: "picker",
+                props: .object([
+                    "style": .string(node.environment._pickerStyle),
+                    "label": .string(node.pickerLabel),
+                    "options": .array(node.pickerOptions.map(_JSON.string)),
+                    "selected": .number(Double(node.selectedIndex)),
+                ]),
+                children: [],
+                handler: node.handler
+            )]
+        } else if let animated = node.view as? any _AnimatedView {
+            var style: [String: _JSON] = ["animationToken": .number(Double(node.animationToken))]
+            if let animation = animated._animation { style["animation"] = animation._json }
+            produced = [_Element(
+                kind: "styled",
+                props: .object(["style": .object(style)]),
+                children: node.children.flatMap(elements(of:)),
+                handler: nil
+            )]
+        } else if !(node.view is any _GroupView), let hostView = node.view as? any _HostView {
+            // Groups are checked first: casting an `Optional<SomeHostView>` to
+            // `_HostView` unwraps the optional, which would misclassify it.
+            let kind = hostView._kind
+            var children = childElements(of: node)
+            if kind == "list" { children = wrapListRows(children, in: node) }
+            var props = hostView._props(in: node.environment)
+            if node.scrollTargetLayout, case .object(var fields) = props {
+                // Phase 12: this stack's children are the scroll view's snap targets.
+                fields["scrollTarget"] = .bool(true)
+                props = .object(fields)
+            }
+            var element = _Element(
+                kind: kind,
+                props: props,
+                children: children,
+                handler: node.handler ?? hostView._handler
+            )
+            if let link = node.view as? any _NavigationValueLinkView, let value = link._value {
+                element.row = _RowMark(linkValue: value, linkHandler: element.handler)
+            }
+            // Wrappers that leave the row's content as their (first) child pass
+            // its row mark up, so `Text("x").tag(1).padding()` stays selectable.
+            let transparent = kind == "styled" || kind == "gesture" || kind == "tapgesture"
+                ? children.count == 1 : kind == "swipeactions" || kind == "contextmenu"
+            if transparent, let inner = children.first?.row {
+                element.row = (element.row ?? _RowMark()).merged(with: inner)
+            }
+            produced = [element]
+        } else {
+            produced = childElements(of: node)
+        }
+
+        if let tagged = node.view as? any _TagProviding {
+            let tag = tagged._tag
+            for index in produced.indices where produced[index].row?.tag == nil {
+                produced[index].row = (produced[index].row ?? _RowMark()).merged(with: _RowMark(tag: tag))
+            }
+        }
+        if let disabling = node.view as? any _RowEditingDisabling, disabling._deleteDisabled {
+            for index in produced.indices {
+                produced[index].row = (produced[index].row ?? _RowMark()).merged(with: _RowMark(deleteDisabled: true))
+            }
+        }
+        if let tab = node.view as? _TabScreenView, !tab.isSelected {
+            // An unselected tab's toolbars do not reach the enclosing screen.
+            var dropped: [_Element] = []
+            produced = produced.map { _hoistBarItems(from: $0, into: &dropped) }
+        }
+
+        if let key = node.key {
+            for index in produced.indices where produced[index].key == nil {
+                produced[index].key = AnyHashable(_ElementKey(base: key, index: index))
+            }
+        }
+        return produced
+    }
+
+    // MARK: State snapshot (hot reload)
+
+    /// The elements of a node's children, in order. The elements a keyed
+    /// group (`ForEach`) produces carry its ids as keys; two keyed groups
+    /// under the same parent may use the same ids (`ForEach(0..<n)` twice in
+    /// a `ZStack`), so each group's keys are qualified by its position among
+    /// the siblings. Without that the element diff matched the two groups'
+    /// elements to each other on alternate passes, swapping their props.
+    private func childElements(of node: _MountedNode) -> [_Element] {
+        let delete = (node.view as? any _DeletableGroup)?._delete
+        return node.children.enumerated().flatMap { position, child -> [_Element] in
+            var items = elements(of: child)
+            // A `ForEach` id is the row's implicit tag; an `onDelete` group's
+            // child at `position` is the row at that offset of its data.
+            if let key = child.key {
+                for index in items.indices where items[index].row?.tag == nil {
+                    items[index].row = (items[index].row ?? _RowMark()).merged(with: _RowMark(tag: key))
+                }
+            }
+            if let delete {
+                for index in items.indices where items[index].row?.delete == nil {
+                    items[index].row = (items[index].row ?? _RowMark()).merged(with: _RowMark(delete: { delete(position) }))
+                }
+            }
+            if child.key == nil, let group = child.view as? any _GroupView, group._keys != nil {
+                for index in items.indices {
+                    if let key = items[index].key {
+                        items[index].key = AnyHashable(_GroupKey(position: position, key: key))
+                    }
+                }
+            }
+            return items
+        }
+    }
+
+    /// Wraps a `list`'s rows (also those of its `section`s) that can be selected
+    /// or deleted in `listrow` elements (docs/ops-protocol.md, Phase 8). A row
+    /// is selectable when the list has a selection and the row's `.tag`,
+    /// `ForEach` id or `NavigationLink(value:)` is of the selection's type;
+    /// deletable when its `ForEach` has `onDelete` and the row is not
+    /// `deleteDisabled`. The row's key moves to the wrapper.
+    private func wrapListRows(_ elements: [_Element], in node: _MountedNode) -> [_Element] {
+        let selection = node.environment._listSelection
+        let editMode = node.environment.editMode
+        return elements.map { element in
+            if element.kind == "section" {
+                var section = element
+                section.children = wrapListRows(section.children, in: node)
+                return section
+            }
+            guard let mark = element.row else { return element }
+            let value = mark.linkValue ?? mark.tag
+            let selectable: Bool = if let selection, let value { selection.accepts(value) } else { false }
+            let deletable = mark.delete != nil && !mark.deleteDisabled
+            guard selectable || deletable else { return element }
+            let selected = selectable && selection!.contains(value!)
+
+            var inner = element
+            inner.key = nil
+            inner.row = nil
+            let handler: (_JSON) -> Void = { payload in
+                if case .object(let fields) = payload, case .string("delete")? = fields["type"] {
+                    if deletable { mark.delete?() }
+                    return
+                }
+                guard selectable, let selection, let value else {
+                    mark.linkHandler?(.null)
+                    return
+                }
+                let editing = editMode?.wrappedValue.isEditing ?? false
+                if mark.linkValue != nil, !editing {
+                    // A value link pushes (or, in a split sidebar, selects) as before.
+                    mark.linkHandler?(.null)
+                } else if selection.isMultiple || editing {
+                    selection.toggle(value)
+                } else {
+                    selection.set(value)
+                }
+            }
+            return _Element(
+                kind: "listrow",
+                props: .object([
+                    "selectable": .bool(selectable),
+                    "selected": .bool(selected),
+                    "deletable": .bool(deletable),
+                ]),
+                children: [inner],
+                handler: handler,
+                key: element.key
+            )
+        }
+    }
+
+    /// Primitive `@State` values keyed by view path, for `SB_STATE`.
+    public func snapshot() -> _JSON {
+        var values: [String: _JSON] = [:]
+        func walk(_ node: _MountedNode) {
+            for (index, box) in node.boxes.enumerated() {
+                if let json = _primitiveJSON(box._anyValue) {
+                    values["\(node.path)#\(index)"] = json
+                }
+            }
+            node.children.forEach(walk)
+        }
+        if let root { walk(root) }
+        return .object(values)
+    }
+
+    private func restoreState(into boxes: [any _AnyStateBox], at path: String) {
+        guard !restoredState.isEmpty else { return }
+        for (index, box) in boxes.enumerated() {
+            guard let saved = restoredState["\(path)#\(index)"] else { continue }
+            switch (box._anyValue, saved) {
+            case (is Int, .number(let n)) where n == n.rounded(): box._anyValue = Int(n)
+            case (is Double, .number(let n)): box._anyValue = n
+            case (is String, .string(let s)): box._anyValue = s
+            case (is Bool, .bool(let b)): box._anyValue = b
+            default: break
+            }
+        }
+    }
+
+    // MARK: Headless replay
+
+    /// Replays events separated by commas: `tap:12`, `text:7:Milk`,
+    /// `toggle:9:true`, `env:dark`, `size:regular`, `step:7:1`, `slide:7:0.35`,
+    /// `date:7:1700000000`, `drag:12:changed:40x-3`, `longpress:12`, `delete:31`,
+    /// `refresh:40`. Each is echoed before its ops.
+    func replay(events: String) {
+        for raw in events.split(separator: ",") {
+            let parts = raw.split(separator: ":", maxSplits: 2).map { String($0).trimmingSpaces() }
+            var event: [String: _JSON] = [:]
+            switch parts.first {
+            case "tap" where parts.count == 2:
+                guard let id = Double(parts[1]) else { break }
+                event = ["type": .string("tap"), "id": .number(id)]
+            case "text" where parts.count == 3:
+                guard let id = Double(parts[1]) else { break }
+                event = ["type": .string("text"), "id": .number(id), "value": .string(parts[2])]
+            case "toggle" where parts.count == 3:
+                guard let id = Double(parts[1]) else { break }
+                event = ["type": .string("toggle"), "id": .number(id), "value": .bool(parts[2] == "true")]
+            case "env" where parts.count == 2:
+                event = ["type": .string("environment"), "colorScheme": .string(parts[1])]
+            case "type" where parts.count == 2:
+                event = ["type": .string("environment"), "dynamicTypeSize": .string(parts[1])]
+            case "size" where parts.count == 2:
+                event = ["type": .string("environment"), "horizontalSizeClass": .string(parts[1])]
+            case "select" where parts.count == 3:
+                guard let id = Double(parts[1]), let index = Double(parts[2]) else { break }
+                event = ["type": .string("select"), "id": .number(id), "value": .number(index)]
+            case "step" where parts.count == 3, "slide" where parts.count == 3, "date" where parts.count == 3:
+                guard let id = Double(parts[1]), let value = Double(parts[2]) else { break }
+                event = ["type": .string(parts[0]), "id": .number(id), "value": .number(value)]
+            case "geometry" where parts.count == 3:
+                let dims = parts[2].split(separator: "x").compactMap { Double($0) }
+                guard let id = Double(parts[1]), dims.count == 2 else { break }
+                event = ["type": .string("geometry"), "id": .number(id), "width": .number(dims[0]), "height": .number(dims[1])]
+            case "drag" where parts.count == 3:
+                // drag:12:changed:40x-3 (phase and translation)
+                let rest = parts[2].split(separator: ":").map { String($0).trimmingSpaces() }
+                guard let id = Double(parts[1]), rest.count == 2 else { break }
+                let dims = rest[1].split(separator: "x").compactMap { Double($0) }
+                guard dims.count == 2 else { break }
+                event = [
+                    "type": .string("drag"), "id": .number(id), "phase": .string(rest[0]),
+                    "translation": .object(["width": .number(dims[0]), "height": .number(dims[1])]),
+                ]
+            case "longpress" where parts.count == 2, "delete" where parts.count == 2, "refresh" where parts.count == 2:
+                guard let id = Double(parts[1]) else { break }
+                event = ["type": .string(parts[0]), "id": .number(id)]
+            default:
+                break
+            }
+            guard !event.isEmpty else {
+                print("{\"message\":\"unrecognized event \(raw)\",\"op\":\"error\"}")
+                continue
+            }
+            host.apply([.event(.object(event))])
+            dispatch(event: .object(event))
+        }
+    }
+}
+
+private extension String {
+    func trimmingSpaces() -> String {
+        String(drop(while: { $0 == " " }).reversed().drop(while: { $0 == " " }).reversed())
+    }
+}
+
+/// Views that run an action when first mounted.
+protocol _OnAppearing {
+    var _action: (@MainActor () -> Void)? { get }
+}
+
+extension _OnAppearView: _OnAppearing {
+    var _action: (@MainActor () -> Void)? { action }
+}
+
+func _primitiveJSON(_ value: Any) -> _JSON? {
+    switch value {
+    case let v as Int: .number(Double(v))
+    case let v as Double: .number(v)
+    case let v as String: .string(v)
+    case let v as Bool: .bool(v)
+    default: nil
+    }
+}
+
+/// The WASI environment (`SB_*` variables the host sets); nil when unset.
+public func _environment(_ name: String) -> String? {
+    guard let value = getenv(name) else { return nil }
+    return String(cString: value)
+}
+
+/// Identity for a sheet element at the root, so re-renders keep its id.
+struct _SheetKey: Hashable {
+    let path: String
+}
+
+/// Identity for an alert element at the root.
+struct _AlertKey: Hashable {
+    let path: String
+}
+
+/// The element with every `button` in its subtree made to also set
+/// `isPresented` to false when tapped (an alert's action buttons dismiss it).
+private func _dismissing(_ element: _Element, with isPresented: Binding<Bool>) -> _Element {
+    var copy = element
+    if element.kind == "button" {
+        let action = element.handler
+        copy.handler = { payload in
+            action?(payload)
+            isPresented.wrappedValue = false
+        }
+    }
+    copy.children = element.children.map { _dismissing($0, with: isPresented) }
+    return copy
+}
+
+// MARK: - Tab and picker helpers
+
+/// Flattens structural groups (tuples, optionals, conditionals, ForEach) into
+/// the views they contribute, keeping ForEach ids as tags when asked.
+@MainActor
+func _flattenChildren(_ view: any View, keys: Bool) -> [(view: any View, tag: AnyHashable?)] {
+    if let group = view as? any _GroupView,
+       !(view is any _TabItemProviding), !(view is any _TagProviding) {
+        let children = group._children
+        let ids = keys ? group._keys : nil
+        return children.enumerated().flatMap { index, child -> [(view: any View, tag: AnyHashable?)] in
+            let nested = _flattenChildren(child, keys: keys)
+            guard let ids else { return nested }
+            return nested.map { ($0.view, $0.tag ?? ids[index]) }
+        }
+    }
+    return [(view, _tag(of: view))]
+}
+
+@MainActor
+func _flattenChildren(_ view: any View) -> [any View] {
+    _flattenChildren(view, keys: false).map(\.view)
+}
+
+/// The `.tag` applied to a view, looking through other wrappers.
+@MainActor
+func _tag(of view: any View) -> AnyHashable? {
+    if let tagged = view as? any _TagProviding { return tagged._tag }
+    if let item = view as? any _TabItemProviding { return _tag(of: item._tabContent) }
+    if let group = view as? any _GroupView, group._children.count == 1, !(view is TupleView<Any>) {
+        return _tag(of: group._children[0])
+    }
+    return nil
+}
+
+/// The `.tabItem` label applied to a view, looking through other wrappers.
+@MainActor
+func _tabLabel(of view: any View) -> (any View)? {
+    if let item = view as? any _TabItemProviding { return item._tabLabel }
+    if let tagged = view as? any _TagProviding { return _tabLabel(of: tagged._tagged) }
+    if let group = view as? any _GroupView, group._children.count == 1 {
+        return _tabLabel(of: group._children[0])
+    }
+    return nil
+}
+
+/// Removes `toolbar` and `searchfield` elements from anywhere under `element`
+/// (appending them to `bar`) and returns the element without them.
+private func _hoistBarItems(from element: _Element, into bar: inout [_Element]) -> _Element {
+    var kept: [_Element] = []
+    var changed = false
+    for child in element.children {
+        if child.kind == "toolbar" || child.kind == "searchfield" {
+            bar.append(child)
+            changed = true
+        } else {
+            let hoisted = _hoistBarItems(from: child, into: &bar)
+            if hoisted.token != child.token { changed = true }
+            kept.append(hoisted)
+        }
+    }
+    // Unchanged subtrees keep their element (and token), so the reconciler
+    // can skip them; a modified copy is a new element.
+    guard changed else { return element }
+    var copy = element
+    copy.children = kept
+    copy.token = _Element.nextToken()
+    return copy
+}
+
+/// A picker's options, looking through `Section`s (their headers are dropped).
+@MainActor
+func _flattenPickerOptions(_ options: any View) -> [(view: any View, tag: AnyHashable?)] {
+    _flattenChildren(options, keys: true).flatMap { entry -> [(view: any View, tag: AnyHashable?)] in
+        if let section = entry.view as? any _SectionView {
+            return _flattenPickerOptions(section._sectionContent)
+        }
+        return [entry]
+    }
+}