@craft-native/ios 0.0.187 → 0.0.189

package/README.md

@@ -174,12 +174,24 @@ reversing each line's main-axis children, matching Android's native host.
 
 For multiple native screens, configure named `.stx` routes and an initial screen in `native.config.json` (see [`fixtures/native-navigation`](./fixtures/native-navigation)). Compile without a positional file: `stx native compile --format bundle --output ./screen.js`. A screen can call `craft.navigation.push('details', { id: 7 })`, `.replace('home')`, or `.back()`; the destination reads `craft.route.params`. Craft uses a native navigation stack, so the back button and edge-swipe reveal the existing controller and retain its JavaScript and input state. `bun packages/ios/scripts/test-native-navigation.ts` compiles the fixture and runs its simulator test; the default WebView renderer is unchanged.
 
+Hybrid web-to-web pushes use the same shared WebView across stack entries. The maintained [`fixtures/hybrid-navigation`](./fixtures/hybrid-navigation) fixture samples the outgoing page during the UIKit transition and is run by CI with:
+
+```bash
+bun packages/ios/scripts/test-hybrid-navigation.ts
+```
+
 Hybrid apps also get the shell's completed left/right tab swipe over the
 WebView. Disable that page-wide gesture with
 `craft.tabBar.set(tabs, { swipeEnabled: false })`; a native screen can still
 use `craft.navigation.setOptions({ tabSwipeEnabled: false })` for its own
 content.
 
+Native screens can opt into an opaque navigation-bar fill that follows their
+screen background (including light/dark trait changes) with
+`craft.navigation.setOptions({ navigationBarSolid: true })`. The default stays
+UIKit's translucent material; set it back to `false` when a screen no longer
+needs a solid bar.
+
 The optional Liquid Glass tab-bar styling is compiler-gated for Xcode 26/Swift 6.2 and later. Older SDKs compile the same tab bar with the material fallback, so generated projects remain buildable on Xcode 16.
 
 The iOS host overlays `craft.config.json` on its defaults. Missing or `null` capability flags stay disabled; explicitly set a flag to `true` to enable it. Both the Swift host and Zig bridge reject malformed values and fall back to all capabilities disabled.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craft-native/ios",
-  "version": "0.0.187",
+  "version": "0.0.189",
   "homepage": "https://github.com/craft-native/craft/tree/main/packages/ios#readme",
   "repository": {
     "type": "git",

package/templates/CraftHybrid.swift

@@ -992,7 +992,10 @@ final class CraftHybridWebSlot: UIViewController {
 
     override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
-        (parent?.parent as? CraftHybridController)?.adoptWeb(into: self)
+        if let controller = parent?.parent as? CraftHybridController {
+            controller.prepareWebTransition(to: self)
+            controller.adoptWeb(into: self)
+        }
     }
 }
 
@@ -1011,11 +1014,18 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
     private var shownStacks: [ObjectIdentifier: [UIViewController]] = [:]
     /// A tab whose page has not caught up yet; shown when it has, or soon.
     private var pendingTab: (id: String, deadline: DispatchWorkItem)?
+    /// The live WebView moves to the destination before UIKit animates a web
+    /// push. Keep the outgoing page visible until that transition completes.
+    private var webTransitionSnapshots: [UIView] = []
     private var openingWeb = false
     private var firstFrameLogged = false
     private var tabBarHeight: CGFloat = 0
     private var tabSwipeRecognizers: [UIGestureRecognizer] = []
     private var activeTabSwipeTarget: String?
+    /// The edge the incoming tab started from for the current gesture. Keep
+    /// this separate from the live frame: deriving it after the drag begins
+    /// makes the target jump when the translation crosses the midpoint.
+    private var tabSwipeFrom: CGFloat = 0
 
     init(config: CraftConfig) {
         self.config = config
@@ -1134,7 +1144,8 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
         }
         target.view.isHidden = false
         let width = view.bounds.width
-        target.view.frame = view.bounds.offsetBy(dx: direction * width, dy: 0)
+        tabSwipeFrom = -direction * width
+        target.view.frame = view.bounds.offsetBy(dx: tabSwipeFrom, dy: 0)
         view.bringSubviewToFront(target.view)
         CraftChrome.shared.beginTabSwipe(to: id)
         return true
@@ -1144,9 +1155,8 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
         guard let targetId = activeTabSwipeTarget, let current = visibleStack,
               let target = stacks[targetId] else { return }
         let width = max(1, view.bounds.width)
-        let start = target.view.frame.minX >= width * 0.5 ? width : -width
         let offset = min(width, max(-width, translation))
-        target.view.frame.origin.x = start + offset
+        target.view.frame.origin.x = tabSwipeFrom + offset
         current.view.frame.origin.x = offset
     }
 
@@ -1244,6 +1254,26 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
         ])
     }
 
+    /// UIKit calls the destination's viewWillAppear before it starts a push.
+    /// Since the hybrid shell has one WebView shared by all web entries, moving
+    /// it at that point would leave the outgoing slot blank for the whole
+    /// transition. A snapshot gives that slot the page it was showing while
+    /// the live WebView is adopted by the destination.
+    func prepareWebTransition(to slot: CraftHybridWebSlot) {
+        guard let nav = slot.navigationController,
+              nav === visibleStack,
+              let from = nav.transitionCoordinator?.viewController(forKey: .from),
+              let source = from as? CraftHybridWebSlot,
+              source !== slot,
+              let webHost,
+              webHost.view.superview === source.view,
+              let snapshot = webHost.view.snapshotView(afterScreenUpdates: false) else { return }
+        snapshot.frame = source.view.bounds
+        snapshot.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        source.view.addSubview(snapshot)
+        webTransitionSnapshots.append(snapshot)
+    }
+
     private var visibleStack: UINavigationController? { stacks[currentTab] }
 
     var webIsVisible: Bool {
@@ -1593,6 +1623,8 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
         if let depth = removed.compactMap({ ($0 as? CraftHybridWebSlot)?.depth }).min() {
             hybrid.pageBack(to: depth - 1)
         }
+        for snapshot in webTransitionSnapshots { snapshot.removeFromSuperview() }
+        webTransitionSnapshots.removeAll()
         // Back at a tab's native root while the page, with no history left
         // to go back through (it reloaded on the screen just popped), still
         // shows that screen: it moves to the root's path. Left there, the

package/templates/CraftNativeActions.swift

@@ -31,7 +31,7 @@ enum CraftNativeActions {
     private static let fetchSession: URLSession = {
         let configuration = URLSessionConfiguration.default
         configuration.timeoutIntervalForRequest = craftNativeFetchTimeoutSeconds
-        configuration.timeoutIntervalForResource = craftNativeFetchTimeoutSeconds
+        configuration.timeoutIntervalForResource = 600
         return URLSession(configuration: configuration)
     }()
     private static var initialDeepLinkClaimed = false
@@ -219,6 +219,12 @@ enum CraftNativeActions {
                 CraftNativeFiles.pickImage(options, cameraEnabled: config.enableCamera) { complete(requestToken, $0, completion) }
             }
             return
+        case ("Files", "pickVideo"):
+            let options = args.first as? [String: Any] ?? [:]
+            DispatchQueue.main.async {
+                CraftNativeFiles.pickVideo(options) { complete(requestToken, $0, completion) }
+            }
+            return
         case ("Files", "download"):
             download(requestToken: requestToken, args: args, completion: completion)
             return
@@ -594,6 +600,7 @@ enum CraftNativeActions {
                 request.setValue(value, forHTTPHeaderField: name)
             }
         }
+        var uploadFile: URL?
         if let form = options["form"] as? [Any] {
             // A screen's FormData: text fields, and files craft.files made.
             guard method != "GET", method != "HEAD" else {
@@ -604,8 +611,9 @@ enum CraftNativeActions {
             case .failure(let error):
                 complete(requestToken, .failure(error), completion)
                 return
-            case .success(let (data, boundary)):
-                request.httpBody = data
+            case .success(let (file, boundary)):
+                uploadFile = file
+                request.timeoutInterval = 600
                 request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
             }
         } else if let body = options["body"] as? String {
@@ -619,7 +627,8 @@ enum CraftNativeActions {
             return
         }
 
-        let task = fetchSession.dataTask(with: request) { data, response, error in
+        let responseHandler: (Data?, URLResponse?, Error?) -> Void = { data, response, error in
+            if let uploadFile { CraftNativeFiles.remove(uploadFile.path) }
             cancellationLock.lock()
             fetchTasks.removeValue(forKey: requestToken)
             cancellationLock.unlock()
@@ -656,11 +665,14 @@ enum CraftNativeActions {
                 "body": String(decoding: body, as: UTF8.self),
             ]), completion)
         }
+        let task: URLSessionTask = uploadFile.map { fetchSession.uploadTask(with: request, fromFile: $0, completionHandler: responseHandler) }
+            ?? fetchSession.dataTask(with: request, completionHandler: responseHandler)
         cancellationLock.lock()
         let alreadyCancelled = cancelledRequests.contains(requestToken)
         if !alreadyCancelled { fetchTasks[requestToken] = task }
         cancellationLock.unlock()
         if !alreadyCancelled { task.resume() }
+        else if let uploadFile { CraftNativeFiles.remove(uploadFile.path) }
     }
 
     /// `craft.files.download`: a GET straight to a file made here (for the

package/templates/CraftNativeFiles.swift

@@ -274,41 +274,147 @@ enum CraftNativeFiles {
         }
     }
 
+    // MARK: Picking a video
+
+    /// System pickers grant access to just the selected video. Copy it while
+    /// the provider's URL is valid; no movie bytes cross JavaScriptCore.
+    static func pickVideo(_ options: [String: Any], done: @escaping (Result<Any, CraftNativeActionError>) -> Void) {
+        guard activePicker == nil else {
+            done(.failure(CraftNativeActionError(code: "BUSY", message: "A picker is already open")))
+            return
+        }
+        let limit = min(512 * 1024 * 1024, max(1, (options["maxBytes"] as? NSNumber)?.intValue ?? 512 * 1024 * 1024))
+        let finish: (Result<Any, CraftNativeActionError>) -> Void = { result in
+            DispatchQueue.main.async { activePicker = nil; done(result) }
+        }
+        if options["source"] as? String == "files" {
+            let delegate = VideoDocumentDelegate(limit: limit, done: finish)
+            var types: [UTType] = [.movie]
+            if let webm = UTType(filenameExtension: "webm") { types.append(webm) }
+            let picker = UIDocumentPickerViewController(forOpeningContentTypes: types, asCopy: true)
+            picker.allowsMultipleSelection = false
+            picker.delegate = delegate
+            activePicker = delegate
+            if !CraftPresenter.present(picker, from: nil) {
+                activePicker = nil
+                done(.failure(CraftNativeActionError(code: "PICKER_ERROR", message: "Unable to present the video picker")))
+            }
+        } else {
+            var configuration = PHPickerConfiguration()
+            configuration.filter = .videos
+            configuration.selectionLimit = 1
+            configuration.preferredAssetRepresentationMode = .current
+            let delegate = VideoLibraryDelegate(limit: limit, done: finish)
+            let picker = PHPickerViewController(configuration: configuration)
+            picker.delegate = delegate
+            activePicker = delegate
+            if !CraftPresenter.present(picker, from: nil) {
+                activePicker = nil
+                done(.failure(CraftNativeActionError(code: "PICKER_ERROR", message: "Unable to present the video picker")))
+            }
+        }
+    }
+
+    static func copyVideo(_ source: URL, limit: Int) -> Result<Any, CraftNativeActionError> {
+        let ext = source.pathExtension.lowercased()
+        let types = ["mp4": "video/mp4", "m4v": "video/x-m4v", "mov": "video/quicktime", "webm": "video/webm"]
+        guard let type = types[ext] else {
+            return .failure(CraftNativeActionError(code: "INVALID_VIDEO", message: "Choose an MP4, MOV or WebM video."))
+        }
+        do {
+            let size = ((try FileManager.default.attributesOfItem(atPath: source.path))[.size] as? NSNumber)?.intValue ?? 0
+            guard size > 0, size <= limit else {
+                return .failure(CraftNativeActionError(code: "FILE_TOO_LARGE", message: "Choose a nonempty video under \(limit / 1024 / 1024)MB."))
+            }
+            let destination = try newFile(named: source.lastPathComponent)
+            do { try FileManager.default.copyItem(at: source, to: destination) }
+            catch { try? FileManager.default.removeItem(at: destination.deletingLastPathComponent()); throw error }
+            return .success(describe(destination, type: type))
+        } catch {
+            return .failure(CraftNativeActionError(code: "READ_ERROR", message: error.localizedDescription))
+        }
+    }
+
+    private final class VideoLibraryDelegate: NSObject, PHPickerViewControllerDelegate {
+        let limit: Int
+        let done: (Result<Any, CraftNativeActionError>) -> Void
+        init(limit: Int, done: @escaping (Result<Any, CraftNativeActionError>) -> Void) { self.limit = limit; self.done = done }
+        func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
+            picker.dismiss(animated: true)
+            guard let provider = results.first?.itemProvider else { done(.success(NSNull())); return }
+            let (limit, done) = (self.limit, self.done)
+            provider.loadFileRepresentation(forTypeIdentifier: UTType.movie.identifier) { url, error in
+                guard let url else {
+                    done(.failure(CraftNativeActionError(code: "READ_ERROR", message: error?.localizedDescription ?? "The video could not be read")))
+                    return
+                }
+                done(CraftNativeFiles.copyVideo(url, limit: limit))
+            }
+        }
+    }
+
+    private final class VideoDocumentDelegate: NSObject, UIDocumentPickerDelegate {
+        let limit: Int
+        let done: (Result<Any, CraftNativeActionError>) -> Void
+        init(limit: Int, done: @escaping (Result<Any, CraftNativeActionError>) -> Void) { self.limit = limit; self.done = done }
+        func documentPickerWasCancelled(_ controller: UIDocumentPickerViewController) { done(.success(NSNull())) }
+        func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
+            guard let url = urls.first else { done(.success(NSNull())); return }
+            let (limit, done) = (self.limit, self.done)
+            DispatchQueue.global(qos: .userInitiated).async {
+                let granted = url.startAccessingSecurityScopedResource()
+                defer { if granted { url.stopAccessingSecurityScopedResource() } }
+                done(CraftNativeFiles.copyVideo(url, limit: limit))
+            }
+        }
+    }
+
     // MARK: Sending files
 
     /// A multipart/form-data body from a screen's `FormData`: parts are
     /// `{ name, value }` or `{ name, path, filename?, type? }`, a file made
     /// here. Answers the body and its boundary.
-    static func multipart(_ parts: [Any]) -> Result<(Data, String), CraftNativeActionError> {
+    static func multipart(_ parts: [Any]) -> Result<(URL, String), CraftNativeActionError> {
         let boundary = "craft-\(UUID().uuidString)"
-        var body = Data()
-        func append(_ text: String) { body.append(Data(text.utf8)) }
-        for item in parts {
-            guard let part = item as? [String: Any], let name = part["name"] as? String else {
-                return .failure(CraftNativeActionError(code: "INVALID_ARGUMENT", message: "A form part needs a name"))
-            }
-            append("--\(boundary)\r\n")
-            if let path = part["path"] as? String {
-                guard let url = owned(path) else {
-                    return .failure(CraftNativeActionError(code: "INVALID_ARGUMENT", message: "A form file must be one craft.files made, and still there"))
+        var temporary: URL?
+        do {
+            let destination = try newFile(named: "upload.multipart")
+            temporary = destination
+            FileManager.default.createFile(atPath: destination.path, contents: nil)
+            let output = try FileHandle(forWritingTo: destination)
+            defer { try? output.close() }
+            func append(_ text: String) throws { try output.write(contentsOf: Data(text.utf8)) }
+            for item in parts {
+                guard let part = item as? [String: Any], let name = part["name"] as? String else {
+                    throw CraftNativeActionError(code: "INVALID_ARGUMENT", message: "A form part needs a name")
                 }
-                guard let data = try? Data(contentsOf: url, options: .mappedIfSafe) else {
-                    return .failure(CraftNativeActionError(code: "INVALID_ARGUMENT", message: "A form file could not be read"))
+                try append("--\(boundary)\r\n")
+                if let path = part["path"] as? String {
+                    guard let url = owned(path) else {
+                        throw CraftNativeActionError(code: "INVALID_ARGUMENT", message: "A form file must be one craft.files made, and still there")
+                    }
+                    let filename = (part["filename"] as? String).map(safeName) ?? url.lastPathComponent
+                    let type = (part["type"] as? String).flatMap { $0.isEmpty ? nil : $0 } ?? "application/octet-stream"
+                    try append("Content-Disposition: form-data; name=\"\(quoted(name))\"; filename=\"\(quoted(filename))\"\r\n")
+                    try append("Content-Type: \(type.replacingOccurrences(of: "\r", with: "").replacingOccurrences(of: "\n", with: ""))\r\n\r\n")
+                    let input = try FileHandle(forReadingFrom: url)
+                    defer { try? input.close() }
+                    while let chunk = try input.read(upToCount: 64 * 1024), !chunk.isEmpty {
+                        try output.write(contentsOf: chunk)
+                    }
+                    try append("\r\n")
+                } else {
+                    try append("Content-Disposition: form-data; name=\"\(quoted(name))\"\r\n\r\n")
+                    try append(part["value"] as? String ?? "")
+                    try append("\r\n")
                 }
-                let filename = (part["filename"] as? String).map(safeName) ?? url.lastPathComponent
-                let type = (part["type"] as? String).flatMap { $0.isEmpty ? nil : $0 } ?? "application/octet-stream"
-                append("Content-Disposition: form-data; name=\"\(quoted(name))\"; filename=\"\(quoted(filename))\"\r\n")
-                append("Content-Type: \(type.replacingOccurrences(of: "\r", with: "").replacingOccurrences(of: "\n", with: ""))\r\n\r\n")
-                body.append(data)
-                append("\r\n")
-            } else {
-                append("Content-Disposition: form-data; name=\"\(quoted(name))\"\r\n\r\n")
-                append(part["value"] as? String ?? "")
-                append("\r\n")
             }
+            try append("--\(boundary)--\r\n")
+            return .success((destination, boundary))
+        } catch {
+            if let temporary { remove(temporary.path) }
+            return .failure((error as? CraftNativeActionError) ?? CraftNativeActionError(code: "WRITE_ERROR", message: error.localizedDescription))
         }
-        append("--\(boundary)--\r\n")
-        return .success((body, boundary))
     }
 
     /// A name inside a quoted header value, escaped as browsers send it.

package/templates/CraftNativeScreen.swift

@@ -135,22 +135,105 @@ private enum CraftNativeTreeLayoutBridge {
         var childCount: UInt32
     }
 
-    private struct Frame {
+    private struct StyleInputV2 {
+        var direction: UInt32 = 0
+        var width: Float = .nan
+        var height: Float = .nan
+        var intrinsicWidth: Float = .nan
+        var intrinsicHeight: Float = .nan
+        var baseline: Float = .nan
+        var aspectRatio: Float = .nan
+        var flexBasis: Float = .nan
+        var flexGrow: Float = 0
+        var flexShrink: Float = 0
+        var minWidth: Float = .nan
+        var maxWidth: Float = .nan
+        var minHeight: Float = .nan
+        var maxHeight: Float = .nan
+        var gap: Float = 0
+        var justifyContent: UInt32 = 0
+        var alignItems: UInt32 = 3
+        var alignSelf: UInt32 = 0
+        var flexWrap: UInt32 = 0
+        var alignContent: UInt32 = 6
+        var marginTop: Float = 0
+        var marginRight: Float = 0
+        var marginBottom: Float = 0
+        var marginLeft: Float = 0
+        var paddingTop: Float = 0
+        var paddingRight: Float = 0
+        var paddingBottom: Float = 0
+        var paddingLeft: Float = 0
+        var grid: UInt32 = 0
+        var gridColumns: UInt32 = 1
+        var rowGap: Float = 0
+        var columnGap: Float = 0
+        var reverse: UInt32 = 0
+    }
+
+    private struct NodeInputV2 {
+        var style: StyleInputV2
+        var firstChild: UInt32
+        var childCount: UInt32
+    }
+
+    fileprivate struct Frame {
         var x: Float
         var y: Float
         var width: Float
         var height: Float
     }
 
+    fileprivate struct TreeNode {
+        let view: UIView?
+        let style: CraftNativeLayoutStyle
+        let intrinsic: CGSize
+        let baseline: CGFloat
+        let direction: NSLayoutConstraint.Axis
+        let gap: CGFloat
+        let rowGap: CGFloat
+        let columnGap: CGFloat
+        let wrap: Bool
+        let justifyContent: String
+        let alignItems: String
+        let alignContent: String
+        let padding: UIEdgeInsets
+        let grid: Bool
+        let gridColumns: Int
+        let reverse: Bool
+        let wrapReverse: Bool
+        let children: [TreeNode]
+    }
+
+    fileprivate struct TreeResult {
+        let nodes: [TreeNode]
+        let parents: [Int]
+        let frames: [Frame]
+    }
+
     private typealias Function = @convention(c) (
         Float, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer, Int
     ) -> Int32
 
+    private typealias FunctionV2 = @convention(c) (
+        Float, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer, Int
+    ) -> Int32
+
     private static let function: Function? = {
         guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_layout_tree") else { return nil }
         return unsafeBitCast(symbol, to: Function.self)
     }()
 
+    private static let functionV2: FunctionV2? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_layout_tree_v2") else { return nil }
+        return unsafeBitCast(symbol, to: FunctionV2.self)
+    }()
+
+    private static let functionV3: FunctionV2? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_layout_tree_v3") else { return nil }
+        return unsafeBitCast(symbol, to: FunctionV2.self)
+    }()
+
     private static func finite(_ value: CGFloat?) -> Float {
         guard let value, value.isFinite else { return .nan }
         return Float(value)
@@ -260,6 +343,199 @@ private enum CraftNativeTreeLayoutBridge {
             (child.0, CGRect(x: CGFloat(frame.x), y: CGFloat(frame.y), width: CGFloat(frame.width), height: CGFloat(frame.height)))
         }
     }
+
+    fileprivate static func treeFrames(root: TreeNode, width: CGFloat, height: CGFloat) -> TreeResult? {
+        guard let function, width.isFinite, height.isFinite, width >= 0, height >= 0, !root.children.isEmpty else { return nil }
+        if containsWrapReverse(root) {
+            return treeFramesV2(root: root, width: width, height: height, function: functionV3)
+        }
+        if containsReverse(root) {
+            return treeFramesV2(root: root, width: width, height: height, function: functionV2)
+        }
+        var nodes: [TreeNode] = []
+        var parents: [Int] = []
+        func append(_ node: TreeNode, parent: Int) {
+            let index = nodes.count
+            nodes.append(node)
+            parents.append(parent)
+            node.children.forEach { append($0, parent: index) }
+        }
+        append(root, parent: -1)
+
+        func put(_ input: inout StyleInput, _ node: TreeNode, parentWidth: CGFloat, parentHeight: CGFloat, rootNode: Bool) {
+            let contentWidth = max(0, (rootNode ? width : node.intrinsic.width) - node.padding.left - node.padding.right)
+            let contentHeight = max(0, (rootNode ? height : node.intrinsic.height) - node.padding.top - node.padding.bottom)
+            let mainSize = node.direction == .horizontal ? contentWidth : contentHeight
+            input.direction = node.direction == .horizontal ? 0 : 1
+            input.width = rootNode ? Float(width) : length(node.style.width, base: parentWidth)
+            input.height = rootNode ? Float(height) : length(node.style.height, base: parentHeight)
+            input.intrinsicWidth = rootNode ? .nan : Float(max(0, node.intrinsic.width))
+            input.intrinsicHeight = rootNode ? .nan : Float(max(0, node.intrinsic.height))
+            input.baseline = rootNode ? .nan : Float(max(0, node.baseline))
+            input.aspectRatio = finite(node.style.aspectRatio)
+            input.flexBasis = length(node.style.flexBasis, base: mainSize)
+            input.flexGrow = rootNode ? 0 : Float(max(0, node.style.flexGrow))
+            let defaultShrink: CGFloat = node.view is UIScrollView || (node.view is UILabel && node.direction == .horizontal) ? 1 : 0
+            input.flexShrink = rootNode ? 0 : Float(max(0, node.style.flexShrink ?? defaultShrink))
+            input.minWidth = length(node.style.minWidth, base: contentWidth)
+            input.maxWidth = length(node.style.maxWidth, base: contentWidth)
+            input.minHeight = length(node.style.minHeight, base: contentHeight)
+            input.maxHeight = length(node.style.maxHeight, base: contentHeight)
+            input.gap = Float(max(0, node.gap))
+            input.justifyContent = justify(node.justifyContent)
+            input.alignItems = alignment(node.alignItems)
+            input.alignSelf = rootNode ? 0 : alignSelf(node.style.alignSelf)
+            input.flexWrap = node.wrap ? 1 : 0
+            input.alignContent = craftNativeAlignContentCode(node.alignContent)
+            input.marginTop = Float(max(0, node.style.marginTop))
+            input.marginRight = Float(max(0, node.style.marginRight))
+            input.marginBottom = Float(max(0, node.style.marginBottom))
+            input.marginLeft = Float(max(0, node.style.marginLeft))
+            input.paddingTop = Float(max(0, node.padding.top))
+            input.paddingRight = Float(max(0, node.padding.right))
+            input.paddingBottom = Float(max(0, node.padding.bottom))
+            input.paddingLeft = Float(max(0, node.padding.left))
+            input.grid = node.grid ? 1 : 0
+            input.gridColumns = UInt32(max(1, node.gridColumns))
+            input.rowGap = Float(max(0, node.rowGap))
+            input.columnGap = Float(max(0, node.columnGap))
+        }
+
+        var styles = [StyleInput](repeating: StyleInput(), count: nodes.count)
+        var metadata = [Float](repeating: 0, count: nodes.count * 2)
+        var cursor = 0
+        func write(_ node: TreeNode, parentWidth: CGFloat, parentHeight: CGFloat, rootNode: Bool) {
+            let index = cursor
+            cursor += 1
+            put(&styles[index], node, parentWidth: parentWidth, parentHeight: parentHeight, rootNode: rootNode)
+            let contentWidth = max(0, (rootNode ? width : node.intrinsic.width) - node.padding.left - node.padding.right)
+            let contentHeight = max(0, (rootNode ? height : node.intrinsic.height) - node.padding.top - node.padding.bottom)
+            let firstChild = cursor
+            node.children.forEach { write($0, parentWidth: contentWidth, parentHeight: contentHeight, rootNode: false) }
+            metadata[index * 2] = Float(firstChild)
+            metadata[index * 2 + 1] = Float(cursor - firstChild)
+        }
+        write(root, parentWidth: width, parentHeight: height, rootNode: true)
+        let inputs = zip(styles, stride(from: 0, to: metadata.count, by: 2)).map { style, offset in
+            NodeInput(style: style, firstChild: UInt32(metadata[offset]), childCount: UInt32(metadata[offset + 1]))
+        }
+
+        var output = [Frame](repeating: Frame(x: 0, y: 0, width: 0, height: 0), count: nodes.count)
+        let frameCount = output.count
+        let status = inputs.withUnsafeBufferPointer { inputBuffer in
+            metadata.withUnsafeBufferPointer { metadataBuffer in
+                output.withUnsafeMutableBufferPointer { outputBuffer in
+                    function(
+                        Float(width), Float(height), UnsafeRawPointer(inputBuffer.baseAddress!), inputs.count,
+                        UnsafeMutableRawPointer(outputBuffer.baseAddress!), frameCount
+                    )
+                }
+            }
+        }
+        guard status == 0, output.allSatisfy({ frame in
+            frame.x.isFinite && frame.y.isFinite && frame.width.isFinite && frame.height.isFinite &&
+                frame.width >= 0 && frame.height >= 0
+        }) else { return nil }
+        return TreeResult(nodes: nodes, parents: parents, frames: output)
+    }
+
+    private static func containsReverse(_ node: TreeNode) -> Bool {
+        node.reverse || node.children.contains(where: containsReverse)
+    }
+
+    private static func containsWrapReverse(_ node: TreeNode) -> Bool {
+        node.wrapReverse || node.children.contains(where: containsWrapReverse)
+    }
+
+    private static func treeFramesV2(root: TreeNode, width: CGFloat, height: CGFloat, function: FunctionV2?) -> TreeResult? {
+        guard let function, width.isFinite, height.isFinite, width >= 0, height >= 0, !root.children.isEmpty else { return nil }
+        var nodes: [TreeNode] = []
+        var parents: [Int] = []
+        func append(_ node: TreeNode, parent: Int) {
+            let index = nodes.count
+            nodes.append(node)
+            parents.append(parent)
+            node.children.forEach { append($0, parent: index) }
+        }
+        append(root, parent: -1)
+
+        func put(_ input: inout StyleInputV2, _ node: TreeNode, parentWidth: CGFloat, parentHeight: CGFloat, rootNode: Bool) {
+            let contentWidth = max(0, (rootNode ? width : node.intrinsic.width) - node.padding.left - node.padding.right)
+            let contentHeight = max(0, (rootNode ? height : node.intrinsic.height) - node.padding.top - node.padding.bottom)
+            let mainSize = node.direction == .horizontal ? contentWidth : contentHeight
+            input.direction = node.direction == .horizontal ? 0 : 1
+            input.width = rootNode ? Float(width) : length(node.style.width, base: parentWidth)
+            input.height = rootNode ? Float(height) : length(node.style.height, base: parentHeight)
+            input.intrinsicWidth = rootNode ? .nan : Float(max(0, node.intrinsic.width))
+            input.intrinsicHeight = rootNode ? .nan : Float(max(0, node.intrinsic.height))
+            input.baseline = rootNode ? .nan : Float(max(0, node.baseline))
+            input.aspectRatio = finite(node.style.aspectRatio)
+            input.flexBasis = length(node.style.flexBasis, base: mainSize)
+            input.flexGrow = rootNode ? 0 : Float(max(0, node.style.flexGrow))
+            let defaultShrink: CGFloat = node.view is UIScrollView || (node.view is UILabel && node.direction == .horizontal) ? 1 : 0
+            input.flexShrink = rootNode ? 0 : Float(max(0, node.style.flexShrink ?? defaultShrink))
+            input.minWidth = length(node.style.minWidth, base: contentWidth)
+            input.maxWidth = length(node.style.maxWidth, base: contentWidth)
+            input.minHeight = length(node.style.minHeight, base: contentHeight)
+            input.maxHeight = length(node.style.maxHeight, base: contentHeight)
+            input.gap = Float(max(0, node.gap))
+            input.justifyContent = justify(node.justifyContent)
+            input.alignItems = alignment(node.alignItems)
+            input.alignSelf = rootNode ? 0 : alignSelf(node.style.alignSelf)
+            input.flexWrap = node.wrap ? 1 : 0
+            input.alignContent = craftNativeAlignContentCode(node.alignContent)
+            input.marginTop = Float(max(0, node.style.marginTop))
+            input.marginRight = Float(max(0, node.style.marginRight))
+            input.marginBottom = Float(max(0, node.style.marginBottom))
+            input.marginLeft = Float(max(0, node.style.marginLeft))
+            input.paddingTop = Float(max(0, node.padding.top))
+            input.paddingRight = Float(max(0, node.padding.right))
+            input.paddingBottom = Float(max(0, node.padding.bottom))
+            input.paddingLeft = Float(max(0, node.padding.left))
+            input.grid = node.grid ? 1 : 0
+            input.gridColumns = UInt32(max(1, node.gridColumns))
+            input.rowGap = Float(max(0, node.rowGap))
+            input.columnGap = Float(max(0, node.columnGap))
+            input.reverse = (node.reverse ? 1 : 0) | (node.wrapReverse ? 2 : 0)
+        }
+
+        var styles = [StyleInputV2](repeating: StyleInputV2(), count: nodes.count)
+        var metadata = [Float](repeating: 0, count: nodes.count * 2)
+        var cursor = 0
+        func write(_ node: TreeNode, parentWidth: CGFloat, parentHeight: CGFloat, rootNode: Bool) {
+            let index = cursor
+            cursor += 1
+            put(&styles[index], node, parentWidth: parentWidth, parentHeight: parentHeight, rootNode: rootNode)
+            let contentWidth = max(0, (rootNode ? width : node.intrinsic.width) - node.padding.left - node.padding.right)
+            let contentHeight = max(0, (rootNode ? height : node.intrinsic.height) - node.padding.top - node.padding.bottom)
+            let firstChild = cursor
+            node.children.forEach { write($0, parentWidth: contentWidth, parentHeight: contentHeight, rootNode: false) }
+            metadata[index * 2] = Float(firstChild)
+            metadata[index * 2 + 1] = Float(cursor - firstChild)
+        }
+        write(root, parentWidth: width, parentHeight: height, rootNode: true)
+        let inputs = zip(styles, stride(from: 0, to: metadata.count, by: 2)).map { style, offset in
+            NodeInputV2(style: style, firstChild: UInt32(metadata[offset]), childCount: UInt32(metadata[offset + 1]))
+        }
+
+        var output = [Frame](repeating: Frame(x: 0, y: 0, width: 0, height: 0), count: nodes.count)
+        let frameCount = output.count
+        let status = inputs.withUnsafeBufferPointer { inputBuffer in
+            metadata.withUnsafeBufferPointer { metadataBuffer in
+                output.withUnsafeMutableBufferPointer { outputBuffer in
+                    function(
+                        Float(width), Float(height), UnsafeRawPointer(inputBuffer.baseAddress!), inputs.count,
+                        UnsafeMutableRawPointer(outputBuffer.baseAddress!), frameCount
+                    )
+                }
+            }
+        }
+        guard status == 0, output.allSatisfy({ frame in
+            frame.x.isFinite && frame.y.isFinite && frame.width.isFinite && frame.height.isFinite &&
+                frame.width >= 0 && frame.height >= 0
+        }) else { return nil }
+        return TreeResult(nodes: nodes, parents: parents, frames: output)
+    }
 }
 
 private enum CraftNativeFlexLineBridge {
@@ -1548,6 +1824,137 @@ private class CraftNativeFlowView: UIStackView {
         flowChildren.filter { $0.superview === self && !$0.isHidden && !($0 is CraftNativeModalView) }
     }
 
+    /// Builds the eligible portion of this container for the host-neutral
+    /// tree ABI. The local algorithm remains authoritative for
+    /// grid-auto-rows, absolute children, and any subtree whose measurement
+    /// cannot be represented by the shared contract.
+    fileprivate func sharedTreeNode(parentWidth: CGFloat, parentHeight: CGFloat) -> CraftNativeTreeLayoutBridge.TreeNode? {
+        guard gridAutoRows == nil else { return nil }
+        let children = visibleChildren
+        let flow = children.filter { $0.craftLayoutStyle.position != "absolute" }
+        guard flow.count == children.count else { return nil }
+        let style = craftLayoutStyle
+        let width = style.width?.resolve(parentWidth)
+        let height = style.height?.resolve(parentHeight)
+        let intrinsic = CraftNativeFlexLayout.measure(
+            self, width: width, height: height,
+            maxWidth: max(0, parentWidth), maxHeight: max(0, parentHeight)
+        )
+        let measuredWidth = width ?? intrinsic.width
+        let measuredHeight = height ?? intrinsic.height
+        let contentWidth = max(0, measuredWidth - effectivePadding.left - effectivePadding.right)
+        let contentHeight = max(0, measuredHeight - effectivePadding.top - effectivePadding.bottom)
+        let nodes = flow.map { child -> CraftNativeTreeLayoutBridge.TreeNode? in
+            let childStyle = child.craftLayoutStyle
+            let childWidth = childStyle.width?.resolve(contentWidth)
+            let childHeight = childStyle.height?.resolve(contentHeight)
+            let childIntrinsic = CraftNativeFlexLayout.measure(
+                child, width: childWidth, height: childHeight,
+                maxWidth: contentWidth, maxHeight: contentHeight
+            )
+            let nested = child as? CraftNativeFlowView
+            let nestedNode = nested?.sharedTreeNode(
+                parentWidth: contentWidth, parentHeight: contentHeight
+            )
+            if nested != nil && nestedNode == nil { return nil }
+            return CraftNativeTreeLayoutBridge.TreeNode(
+                view: child,
+                style: childStyle,
+                intrinsic: childIntrinsic,
+                baseline: Self.firstBaseline(child, cross: childIntrinsic.height),
+                direction: nested?.axis ?? .horizontal,
+                gap: nested.map { $0.axis == .horizontal ? ($0.columnGap ?? $0.gap) : ($0.rowGap ?? $0.gap) } ?? 0,
+                rowGap: nested?.rowGap ?? 0,
+                columnGap: nested?.columnGap ?? 0,
+                wrap: nested?.wrap ?? false,
+                justifyContent: nested?.justifyContent ?? "flex-start",
+                alignItems: nested?.alignItems ?? "stretch",
+                alignContent: nested?.alignContent ?? "flex-start",
+                padding: nested?.effectivePadding ?? .zero,
+                grid: nested?.grid ?? false,
+                gridColumns: nested?.gridColumns ?? 1,
+                reverse: nested?.reverse ?? false,
+                wrapReverse: nested?.wrapReverse ?? false,
+                children: nestedNode?.children ?? []
+            )
+        }
+        guard nodes.allSatisfy({ $0 != nil }) else { return nil }
+        return CraftNativeTreeLayoutBridge.TreeNode(
+            view: self,
+            style: style,
+            intrinsic: intrinsic,
+            baseline: 0,
+            direction: axis,
+            gap: axis == .horizontal ? (columnGap ?? gap) : (rowGap ?? gap),
+            rowGap: rowGap ?? 0,
+            columnGap: columnGap ?? 0,
+            wrap: wrap,
+            justifyContent: justifyContent,
+            alignItems: alignItems,
+            alignContent: alignContent,
+            padding: effectivePadding,
+            grid: grid,
+            gridColumns: gridColumns,
+            reverse: reverse,
+            wrapReverse: wrapReverse,
+            children: nodes.compactMap { $0 }
+        )
+    }
+
+    private func sharedTreeFrames(_ children: [UIView], width: CGFloat?, height: CGFloat?) -> CraftNativeTreeLayoutBridge.TreeResult? {
+        guard let width, let height, gridAutoRows == nil,
+              width.isFinite, height.isFinite, width >= 0, height >= 0 else { return nil }
+        let nodes = children.map { child -> CraftNativeTreeLayoutBridge.TreeNode? in
+            let style = child.craftLayoutStyle
+            let intrinsic = CraftNativeFlexLayout.measure(child, width: style.width?.resolve(width), height: style.height?.resolve(height), maxWidth: width, maxHeight: height)
+            let nested = child as? CraftNativeFlowView
+            let nestedNode = nested?.sharedTreeNode(parentWidth: width, parentHeight: height)
+            if nested != nil && nestedNode == nil { return nil }
+            return CraftNativeTreeLayoutBridge.TreeNode(
+                view: child,
+                style: style,
+                intrinsic: intrinsic,
+                baseline: Self.firstBaseline(child, cross: intrinsic.height),
+                direction: nested?.axis ?? .horizontal,
+                gap: nested.map { $0.axis == .horizontal ? ($0.columnGap ?? $0.gap) : ($0.rowGap ?? $0.gap) } ?? 0,
+                rowGap: nested?.rowGap ?? 0,
+                columnGap: nested?.columnGap ?? 0,
+                wrap: nested?.wrap ?? false,
+                justifyContent: nested?.justifyContent ?? "flex-start",
+                alignItems: nested?.alignItems ?? "stretch",
+                alignContent: nested?.alignContent ?? "flex-start",
+                padding: nested?.effectivePadding ?? .zero,
+                grid: nested?.grid ?? false,
+                gridColumns: nested?.gridColumns ?? 1,
+                reverse: nested?.reverse ?? false,
+                wrapReverse: nested?.wrapReverse ?? false,
+                children: nestedNode?.children ?? []
+            )
+        }
+        guard nodes.allSatisfy({ $0 != nil }) else { return nil }
+        let root = CraftNativeTreeLayoutBridge.TreeNode(
+            view: nil,
+            style: .empty,
+            intrinsic: .zero,
+            baseline: 0,
+            direction: axis,
+            gap: axis == .horizontal ? (columnGap ?? gap) : (rowGap ?? gap),
+            rowGap: rowGap ?? 0,
+            columnGap: columnGap ?? 0,
+            wrap: wrap,
+            justifyContent: justifyContent,
+            alignItems: alignItems,
+            alignContent: alignContent,
+            padding: effectivePadding,
+            grid: grid,
+            gridColumns: gridColumns,
+            reverse: reverse,
+            wrapReverse: wrapReverse,
+            children: nodes.compactMap { $0 }
+        )
+        return CraftNativeTreeLayoutBridge.treeFrames(root: root, width: width, height: height)
+    }
+
     /// The flexbox algorithm, single pass. `width`/`height` are this view's
     /// outer size when its parent fixes it, nil when it sizes to its content
     /// within `maxWidth`/`maxHeight`. Returns its outer size and, when
@@ -1609,7 +2016,19 @@ private class CraftNativeFlowView: UIStackView {
                 frames: &frames
             )
         }
-        if place, flow.count == children.count, let shared = sharedDirectFrames(flow, width: width, height: height) {
+        if place, flow.count == children.count, let sharedTree = sharedTreeFrames(flow, width: width, height: height), (sharedTree.nodes.count > flow.count + 1 || grid) {
+            frames = []
+            for index in 1..<sharedTree.nodes.count {
+                guard let view = sharedTree.nodes[index].view else { continue }
+                let offset = sharedTree.frames[index]
+                let parent = sharedTree.parents[index]
+                let parentFrame = sharedTree.frames[parent]
+                frames.append((view, CGRect(
+                    x: CGFloat(offset.x - parentFrame.x), y: CGFloat(offset.y - parentFrame.y),
+                    width: CGFloat(offset.width), height: CGFloat(offset.height)
+                )))
+            }
+        } else if place, flow.count == children.count, let shared = sharedDirectFrames(flow, width: width, height: height) {
             frames = shared
         }
         let size = CGSize(width: width ?? contentSize.width + paddingWidth, height: height ?? contentSize.height + paddingHeight)
@@ -3321,6 +3740,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             // a screen that hid its own.
             navigationController?.setNavigationBarHidden(false, animated: animated)
         }
+        applyNavigationBarAppearance()
         // Each screen says whether it wants the tab bar, so one that hid it
         // never leaves it hidden for the next.
         CraftChrome.shared.setHiddenByScreen(tabBarHidden)
@@ -3406,6 +3826,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     private func refreshTraitDefaults() {
         view.backgroundColor = screenBackgroundColor ?? config.resolvedBackgroundColor
+        applyNavigationBarAppearance()
         if let document = mutationDocument.node("root") {
             renderCommitted(document)
         } else {
@@ -3637,7 +4058,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// - `craft.secureStorage.getSync(key)`: the Keychain item the web page's
     ///   `craft.secureStorage.set` wrote.
     /// - `craft.navigation.setOptions({ title, largeTitle, hidden, backTitle,
-    ///   tabBarHidden, swipeBack, contentSwipeBack, tabSwipeEnabled, backgroundColor, rightButtons })`;
+    ///   tabBarHidden, swipeBack, contentSwipeBack, tabSwipeEnabled,
+    ///   backgroundColor, navigationBarSolid, rightButtons })`;
     ///   a right button's tap is the event `navButton`.
     ///
     /// A runtime that assigns `craft.storage` (or the others) afterwards keeps
@@ -3905,6 +4327,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// own horizontal pager or chart gesture.
     private(set) var tabSwipeEnabled = true
     private var prefersLargeTitle: Bool?
+    /// Whether this screen opts into an opaque navigation bar filled with its
+    /// own background colour. The default keeps UIKit's material appearance.
+    private var navigationBarSolid = false
     /// The screen's own colour (`backgroundColor`), under the status bar and
     /// the home indicator too, where its content never reaches: a black
     /// full-screen timer is black edge to edge. nil is the app's.
@@ -3964,6 +4389,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             screenBackgroundColor = color(options["backgroundColor"])
             view.backgroundColor = screenBackgroundColor ?? config.resolvedBackgroundColor
         }
+        if let solid = options["navigationBarSolid"] as? Bool {
+            navigationBarSolid = solid
+        }
         if let hidden = options["hidden"] as? Bool {
             navigationBarHidden = hidden
             if navigationController?.topViewController === self {
@@ -3974,6 +4402,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             let buttons = (options["rightButtons"] as? [[String: Any]]) ?? []
             navigationItem.rightBarButtonItems = buttons.compactMap(navigationButton).reversed()
         }
+        if options.keys.contains("backgroundColor") || options.keys.contains("navigationBarSolid") {
+            applyNavigationBarAppearance()
+        }
         // Asked for after the bar was hidden for a bare root screen.
         if navigationBarHidden == nil, wantsNavigationBar, navigationController?.topViewController === self,
            navigationController?.isNavigationBarHidden == true {
@@ -3981,6 +4412,26 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    /// Applies the screen's optional opaque bar without changing the default
+    /// UIKit material when the screen did not opt in.
+    private func applyNavigationBarAppearance() {
+        guard navigationBarSolid else {
+            navigationItem.standardAppearance = nil
+            navigationItem.scrollEdgeAppearance = nil
+            navigationItem.compactAppearance = nil
+            navigationItem.compactScrollEdgeAppearance = nil
+            return
+        }
+        let appearance = UINavigationBarAppearance()
+        appearance.configureWithOpaqueBackground()
+        appearance.backgroundColor = screenBackgroundColor ?? config.resolvedBackgroundColor
+        appearance.shadowColor = .clear
+        navigationItem.standardAppearance = appearance
+        navigationItem.scrollEdgeAppearance = appearance
+        navigationItem.compactAppearance = appearance
+        navigationItem.compactScrollEdgeAppearance = appearance
+    }
+
     private func applyStatusBar(_ props: [String: Any]) {
         let style: UIStatusBarStyle?
         switch (props["barStyle"] as? String)?.lowercased() {