craft-native 0.0.173 → 0.0.175

package/dist/ios/templates/CraftNativeScreen.swift

@@ -4,6 +4,7 @@ import AVKit
 import CryptoKit
 import Darwin
 import JavaScriptCore
+import MapKit
 import OSLog
 import Security
 import SwiftUI
@@ -426,6 +427,183 @@ private final class CraftNativeVideoView: UIView {
     deinit { stop() }
 }
 
+private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
+    private var annotationsByID: [String: MKPointAnnotation] = [:]
+    private var overlaysByID: [String: MKPolyline] = [:]
+    private var overlayColors: [ObjectIdentifier: UIColor] = [:]
+    private var overlayWidths: [ObjectIdentifier: CGFloat] = [:]
+    private(set) var markerHandlers: [String: String] = [:]
+    var onMarkerTap: ((String) -> Void)?
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        delegate = self
+        showsCompass = false
+        showsScale = false
+        isRotateEnabled = false
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        delegate = self
+    }
+
+    func configure(props: [String: Any], children: [Any], markerHandler: @escaping (String) -> Void) {
+        onMarkerTap = markerHandler
+        isScrollEnabled = props["scrollEnabled"] as? Bool ?? true
+        isZoomEnabled = props["zoomEnabled"] as? Bool ?? true
+        isRotateEnabled = props["rotateEnabled"] as? Bool ?? false
+        mapType = Self.mapType(props["mapType"] as? String)
+        // Showing the user dot must not trigger a permission prompt from a
+        // renderer pass. The app's existing location capability owns that
+        // prompt; a map only opts in after authorization is already granted.
+        showsUserLocation = props["showsUserLocation"] as? Bool == true && Self.locationPermissionGranted()
+
+        var nextMarkers: [String: (coordinate: CLLocationCoordinate2D, title: String?)] = [:]
+        var nextHandlers: [String: String] = [:]
+        var nextPolylines: [String: (coordinates: [CLLocationCoordinate2D], color: UIColor, width: CGFloat)] = [:]
+        for (index, child) in children.enumerated() {
+            guard let node = child as? [String: Any], let rawType = node["type"] as? String else { continue }
+            let type = rawType.lowercased()
+            let childProps = node["props"] as? [String: Any] ?? [:]
+            let childEvents = node["events"] as? [String: String] ?? [:]
+            let id = (childProps["id"] as? CustomStringConvertible)?.description
+                ?? (node["id"] as? String)
+                ?? "overlay-\(index)"
+            let points = Self.coordinates(childProps["geometry"])
+            if type == "mapmarker" || type == "marker" {
+                guard let point = points.first else { continue }
+                nextMarkers[id] = (point, childProps["title"] as? String)
+                if let handler = childEvents["onPress"] ?? childEvents["onMarkerPress"], !handler.isEmpty {
+                    nextHandlers[id] = handler
+                }
+            } else if type == "mappolyline" || type == "polyline" {
+                guard points.count > 1 else { continue }
+                nextPolylines[id] = (points, Self.color(childProps["strokeColor"] as? String), CGFloat((childProps["strokeWidth"] as? NSNumber)?.doubleValue ?? 3))
+            }
+        }
+
+        let staleMarkers = annotationsByID.keys.filter { nextMarkers[$0] == nil }
+        removeAnnotations(staleMarkers.compactMap { annotationsByID.removeValue(forKey: $0) })
+        for (id, value) in nextMarkers {
+            if let annotation = annotationsByID[id] {
+                annotation.coordinate = value.coordinate
+                annotation.title = value.title
+            } else {
+                let annotation = MKPointAnnotation()
+                annotation.coordinate = value.coordinate
+                annotation.title = value.title
+                annotationsByID[id] = annotation
+                addAnnotation(annotation)
+            }
+        }
+        markerHandlers = nextHandlers
+
+        removeOverlays(Array(overlaysByID.values))
+        overlaysByID.removeAll(keepingCapacity: true)
+        overlayColors.removeAll(keepingCapacity: true)
+        overlayWidths.removeAll(keepingCapacity: true)
+        for (id, value) in nextPolylines {
+            let overlay = MKPolyline(coordinates: value.coordinates, count: value.coordinates.count)
+            overlaysByID[id] = overlay
+            overlayColors[ObjectIdentifier(overlay)] = value.color
+            overlayWidths[ObjectIdentifier(overlay)] = value.width
+            addOverlay(overlay)
+        }
+
+        if let region = Self.region(props["region"] ?? props["initialRegion"]) {
+            setRegion(region, animated: false)
+        } else if props["fitToBounds"] as? Bool == true {
+            fitToOverlays()
+        }
+    }
+
+    private func fitToOverlays() {
+        var rect = MKMapRect.null
+        for overlay in overlaysByID.values { rect = rect.union(overlay.boundingMapRect) }
+        for annotation in annotationsByID.values {
+            let point = MKMapPoint(annotation.coordinate)
+            rect = rect.union(MKMapRect(x: point.x, y: point.y, width: 0, height: 0))
+        }
+        guard !rect.isNull else { return }
+        let inset = UIEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
+        setVisibleMapRect(rect, edgePadding: inset, animated: false)
+    }
+
+    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
+        guard let id = annotationsByID.first(where: { $0.value === annotation })?.key else { return nil }
+        let view = (dequeueReusableAnnotationView(withIdentifier: "craft-native-marker") as? MKMarkerAnnotationView)
+            ?? MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "craft-native-marker")
+        view.annotation = annotation
+        view.markerTintColor = .systemRed
+        view.accessibilityIdentifier = id
+        return view
+    }
+
+    func mapView(_ mapView: MKMapView, didSelect annotation: MKAnnotation) {
+        guard let id = annotationsByID.first(where: { $0.value === annotation })?.key else { return }
+        onMarkerTap?(id)
+        deselectAnnotation(annotation, animated: false)
+    }
+
+    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
+        let renderer = MKPolylineRenderer(overlay: overlay)
+        renderer.strokeColor = overlayColors[ObjectIdentifier(overlay)] ?? .systemBlue
+        renderer.lineWidth = overlayWidths[ObjectIdentifier(overlay)] ?? 3
+        return renderer
+    }
+
+    private static func coordinates(_ value: Any?) -> [CLLocationCoordinate2D] {
+        let numbers = (value as? [Any])?.compactMap { ($0 as? NSNumber)?.doubleValue }
+            ?? (value as? [NSNumber])?.map(\.doubleValue)
+            ?? []
+        return stride(from: 0, to: numbers.count - 1, by: 2).map {
+            CLLocationCoordinate2D(latitude: numbers[$0], longitude: numbers[$0 + 1])
+        }
+    }
+
+    private static func region(_ value: Any?) -> MKCoordinateRegion? {
+        guard let value = value as? [String: Any],
+              let center = value["center"] as? [String: Any],
+              let span = value["span"] as? [String: Any],
+              let latitude = (center["latitude"] as? NSNumber)?.doubleValue,
+              let longitude = (center["longitude"] as? NSNumber)?.doubleValue,
+              let latitudeDelta = (span["latitudeDelta"] as? NSNumber)?.doubleValue ?? (span["latitude_delta"] as? NSNumber)?.doubleValue,
+              let longitudeDelta = (span["longitudeDelta"] as? NSNumber)?.doubleValue ?? (span["longitude_delta"] as? NSNumber)?.doubleValue else { return nil }
+        return MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: latitude, longitude: longitude), span: MKCoordinateSpan(latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta))
+    }
+
+    private static func color(_ value: String?) -> UIColor {
+        switch value?.lowercased() {
+        case "red": return .systemRed
+        case "green": return .systemGreen
+        case "orange": return .systemOrange
+        case "purple": return .systemPurple
+        case "yellow": return .systemYellow
+        default: return .systemBlue
+        }
+    }
+
+    private static func mapType(_ value: String?) -> MKMapType {
+        switch value?.lowercased() {
+        case "satellite": return .satellite
+        case "hybrid": return .hybrid
+        case "muted_standard": return .mutedStandard
+        default: return .standard
+        }
+    }
+
+    private static func locationPermissionGranted() -> Bool {
+        let status: CLAuthorizationStatus
+        if #available(iOS 14.0, *) {
+            status = CLLocationManager().authorizationStatus
+        } else {
+            status = CLLocationManager.authorizationStatus()
+        }
+        return status == .authorizedAlways || status == .authorizedWhenInUse
+    }
+}
+
 /// A WebView-free host for the first stx native vertical slice. The bundled
 /// JavaScript sends whole, compiled view trees to UIKit and receives control
 /// events and Craft API replies through JavaScriptCore.
@@ -781,11 +959,28 @@ private class CraftNativeFlowView: UIStackView {
     var wrapReverse = false { didSet { if wrapReverse != oldValue { invalidateMeasurements() } } }
     var padding = UIEdgeInsets.zero {
         didSet {
-            layoutMargins = padding
+            layoutMargins = effectivePadding
             isLayoutMarginsRelativeArrangement = true
             if padding != oldValue { invalidateMeasurements() }
         }
     }
+    /// Insets contributed by a native SafeAreaView root. Authored padding
+    /// remains separate so a reconciliation can remove either source without
+    /// leaving stale safe-area space behind.
+    var safeAreaPadding = UIEdgeInsets.zero {
+        didSet {
+            layoutMargins = effectivePadding
+            if safeAreaPadding != oldValue { invalidateMeasurements() }
+        }
+    }
+    var effectivePadding: UIEdgeInsets {
+        UIEdgeInsets(
+            top: padding.top + safeAreaPadding.top,
+            left: padding.left + safeAreaPadding.left,
+            bottom: padding.bottom + safeAreaPadding.bottom,
+            right: padding.right + safeAreaPadding.right
+        )
+    }
     override var axis: NSLayoutConstraint.Axis {
         didSet { if axis != oldValue { invalidateMeasurements() } }
     }
@@ -1020,8 +1215,9 @@ private class CraftNativeFlowView: UIStackView {
         let children = visibleChildren
         let flow = children.filter { $0.craftLayoutStyle.position != "absolute" }
         let horizontal = axis == .horizontal
-        let paddingWidth = padding.left + padding.right
-        let paddingHeight = padding.top + padding.bottom
+        let contentPadding = effectivePadding
+        let paddingWidth = contentPadding.left + contentPadding.right
+        let paddingHeight = contentPadding.top + contentPadding.bottom
         let innerWidth = width.map { max(0, $0 - paddingWidth) }
         let innerHeight = height.map { max(0, $0 - paddingHeight) }
         let roomWidth = max(0, (width ?? maxWidth) - paddingWidth)
@@ -1046,7 +1242,7 @@ private class CraftNativeFlowView: UIStackView {
         let size = CGSize(width: width ?? contentSize.width + paddingWidth, height: height ?? contentSize.height + paddingHeight)
 
         if place {
-            let content = CGRect(x: padding.left, y: padding.top, width: max(0, size.width - paddingWidth), height: max(0, size.height - paddingHeight))
+            let content = CGRect(x: contentPadding.left, y: contentPadding.top, width: max(0, size.width - paddingWidth), height: max(0, size.height - paddingHeight))
             for child in children where child.craftLayoutStyle.position == "absolute" {
                 let style = child.craftLayoutStyle
                 var fixedWidth = style.left != nil && style.right != nil
@@ -1432,8 +1628,8 @@ private class CraftNativeFlowView: UIStackView {
                         ? (sharedLine?[offset].position ?? (mainOffset + item.mainLeading))
                         : mainOffset + item.mainLeading
                     let frame = horizontal
-                        ? CGRect(x: padding.left + mainPosition, y: padding.top + physicalLineOffset + physicalCrossPosition, width: item.main, height: item.cross)
-                        : CGRect(x: padding.left + physicalLineOffset + physicalCrossPosition, y: padding.top + mainPosition, width: item.cross, height: item.main)
+                        ? CGRect(x: contentPadding.left + mainPosition, y: contentPadding.top + physicalLineOffset + physicalCrossPosition, width: item.main, height: item.cross)
+                        : CGRect(x: contentPadding.left + physicalLineOffset + physicalCrossPosition, y: contentPadding.top + mainPosition, width: item.cross, height: item.main)
                     frames.append((item.view, frame))
                     if !useSharedPositions { mainOffset += item.mainMargins + item.main + mainGap + between }
                 }
@@ -1475,7 +1671,10 @@ private class CraftNativeFlowView: UIStackView {
             let align = style.alignSelf ?? alignItems
             var fixedWidth = style.width?.resolve(cellWidth)
             var fixedHeight = style.height?.resolve(nil)
-            if fixedWidth == nil && fixedHeight == nil && align == "stretch" { fixedWidth = available }
+            // A cell's item is as wide as its column unless it sets a width
+            // (or an aspect ratio derives one from its height), whatever its
+            // height: a fixed-height swatch with no content was drawn 0 wide.
+            if fixedWidth == nil && align == "stretch" && (fixedHeight == nil || style.aspectRatio == nil) { fixedWidth = available }
             (fixedWidth, fixedHeight) = aspectDimensions(style, width: fixedWidth, height: fixedHeight)
             let size = CraftNativeFlexLayout.measure(
                 child,
@@ -1506,7 +1705,7 @@ private class CraftNativeFlowView: UIStackView {
                 let alignment: UInt32 = align == "center" ? 1 : align == "flex-end" ? 2 : 0
                 var explicitWidth = style.width?.resolve(cellWidth)
                 var explicitHeight = style.height?.resolve(nil)
-                if explicitWidth == nil && explicitHeight == nil && align == "stretch" {
+                if explicitWidth == nil && align == "stretch" && (explicitHeight == nil || style.aspectRatio == nil) {
                     explicitWidth = max(0, cellWidth - style.marginLeft - style.marginRight)
                 }
                 (explicitWidth, explicitHeight) = aspectDimensions(style, width: explicitWidth, height: explicitHeight)
@@ -1526,7 +1725,7 @@ private class CraftNativeFlowView: UIStackView {
             if let sharedFrames {
                 for (index, child) in children.enumerated() {
                     let frame = sharedFrames[index]
-                    frames.append((child, CGRect(x: padding.left + frame.x, y: padding.top + frame.y, width: frame.width, height: frame.height)))
+                    frames.append((child, CGRect(x: contentPadding.left + frame.x, y: contentPadding.top + frame.y, width: frame.width, height: frame.height)))
                 }
                 return CGSize(width: width, height: innerHeight ?? height)
             }
@@ -1550,7 +1749,7 @@ private class CraftNativeFlowView: UIStackView {
             case "stretch": rowExtra = gridFree / CGFloat(max(1, rowHeights.count))
             default: break
             }
-            var rowTop = padding.top + rowLeading
+            var rowTop = contentPadding.top + rowLeading
             for (index, child) in children.enumerated() {
                 let style = child.craftLayoutStyle
                 let row = index / columns
@@ -1562,7 +1761,7 @@ private class CraftNativeFlowView: UIStackView {
                 let availableHeight = max(0, rowHeight - style.marginTop - style.marginBottom)
                 let childWidth = min(availableWidth, size.width)
                 let childHeight = align == "stretch" && style.height == nil && style.aspectRatio == nil ? availableHeight : min(availableHeight, size.height)
-                let x = padding.left + CGFloat(column) * (cellWidth + horizontalGap) + style.marginLeft
+                let x = contentPadding.left + CGFloat(column) * (cellWidth + horizontalGap) + style.marginLeft
                     + (align == "center" ? (availableWidth - childWidth) / 2 : align == "flex-end" ? availableWidth - childWidth : 0)
                 let y = rowTop + style.marginTop
                     + (align == "center" ? (availableHeight - childHeight) / 2 : align == "flex-end" ? availableHeight - childHeight : 0)
@@ -1574,6 +1773,41 @@ private class CraftNativeFlowView: UIStackView {
     }
 }
 
+/// A container that applies only the requested system safe-area edges. The
+/// host keeps the root edge-to-edge when this node is the screen root so the
+/// node, rather than the controller's outer stack, owns the insets.
+private final class CraftNativeSafeAreaView: CraftNativeFlowView {
+    private var edges: Set<String> = ["top", "right", "bottom", "left"]
+
+    func setSafeAreaEdges(_ raw: Any?) {
+        guard let values = raw as? [Any] else {
+            edges = ["top", "right", "bottom", "left"]
+            updateSafeAreaPadding()
+            return
+        }
+        edges = Set(values.compactMap { value in
+            guard let edge = value as? String, ["top", "right", "bottom", "left"].contains(edge) else { return nil }
+            return edge
+        })
+        updateSafeAreaPadding()
+    }
+
+    override func safeAreaInsetsDidChange() {
+        super.safeAreaInsetsDidChange()
+        updateSafeAreaPadding()
+    }
+
+    private func updateSafeAreaPadding() {
+        let insets = safeAreaInsets
+        safeAreaPadding = UIEdgeInsets(
+            top: edges.contains("top") ? insets.top : 0,
+            left: edges.contains("left") ? insets.left : 0,
+            bottom: edges.contains("bottom") ? insets.bottom : 0,
+            right: edges.contains("right") ? insets.right : 0
+        )
+    }
+}
+
 /// A flex container that responds to the controller's keyboard overlap.
 /// `padding` keeps the content visible without moving the field; `position`
 /// lifts the whole container; `height` reduces its viewport.
@@ -1773,6 +2007,18 @@ private final class CraftNativeModalView: UIView {
     }
 }
 
+/// Whether a scrolling view's gesture runs together with `other`. A scroll
+/// view is the delegate of its own pan as well as of its keyboard tap, so this
+/// answers for both. Everything runs together (the keyboard tap watches
+/// alongside a control's own gestures; the back-swipe and the tab swipe decide
+/// for themselves) except two scroll views' pans: run together, a drag on a
+/// nested scroll view scrolled its parent at the same time.
+func craftScrollGesture(_ gesture: UIGestureRecognizer, runsWith other: UIGestureRecognizer) -> Bool {
+    guard let scroll = gesture.view as? UIScrollView, gesture === scroll.panGestureRecognizer,
+          let otherScroll = other.view as? UIScrollView, other === otherScroll.panGestureRecognizer else { return true }
+    return false
+}
+
 private final class CraftNativeScrollView: UIScrollView, UIGestureRecognizerDelegate {
     let contentStack = CraftNativeFlowView()
     private let keyboardTapGesture = UITapGestureRecognizer()
@@ -1994,6 +2240,22 @@ private final class CraftNativeScrollView: UIScrollView, UIGestureRecognizerDele
         }
     }
 
+    /// Applies the shared RefreshControl appearance props. UIKit's refresh
+    /// control owns the spinner and optional title; keep the authored values
+    /// on the control so a later reconciliation can clear them as well.
+    func setRefreshAppearance(_ props: [String: Any]) {
+        pullToRefresh.tintColor = (props["tintColor"] as? String).flatMap { UIColor(hex: $0) }
+        guard let title = props["title"] as? String, !title.isEmpty else {
+            pullToRefresh.attributedTitle = nil
+            return
+        }
+        var attributes: [NSAttributedString.Key: Any] = [:]
+        if let titleColor = (props["titleColor"] as? String).flatMap({ UIColor(hex: $0) }) {
+            attributes[.foregroundColor] = titleColor
+        }
+        pullToRefresh.attributedTitle = NSAttributedString(string: title, attributes: attributes)
+    }
+
     var isRefreshingNow: Bool { pullToRefresh.isRefreshing }
 
     @objc private func refreshPulled() {
@@ -2025,7 +2287,7 @@ private final class CraftNativeScrollView: UIScrollView, UIGestureRecognizerDele
     }
 
     func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
-        true
+        craftScrollGesture(gestureRecognizer, runsWith: otherGestureRecognizer)
     }
 
     func setAxis(_ axis: NSLayoutConstraint.Axis) {
@@ -2510,6 +2772,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private var imageLoadHandlers: [ObjectIdentifier: String] = [:]
     private var imageLoadEndHandlers: [ObjectIdentifier: String] = [:]
     private var imageErrorHandlers: [ObjectIdentifier: String] = [:]
+    /// Native links keep their target separate from optional press handlers.
+    /// The compiler can emit an anchor as `TouchableOpacity`, so this map is
+    /// intentionally shared by Link and the generic pressable path.
+    private var linkTargets: [ObjectIdentifier: String] = [:]
     private var renderedRoot: RenderedNode?
     private weak var lastFocusedInput: UIView?
     private var flatListRows: [ObjectIdentifier: [String: RenderedNode]] = [:]
@@ -2582,11 +2848,17 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         view.addSubview(rootStack)
         rootTopToSafeArea = rootStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
         rootTopToView = rootStack.topAnchor.constraint(equalTo: view.topAnchor)
+        rootBottomToSafeArea = rootStack.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
+        rootBottomToView = rootStack.bottomAnchor.constraint(equalTo: view.bottomAnchor)
+        rootLeadingToSafeArea = rootStack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor)
+        rootLeadingToView = rootStack.leadingAnchor.constraint(equalTo: view.leadingAnchor)
+        rootTrailingToSafeArea = rootStack.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+        rootTrailingToView = rootStack.trailingAnchor.constraint(equalTo: view.trailingAnchor)
         NSLayoutConstraint.activate([
             rootTopToSafeArea!,
-            rootStack.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
-            rootStack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
-            rootStack.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+            rootBottomToSafeArea!,
+            rootLeadingToSafeArea!,
+            rootTrailingToSafeArea!
         ])
         setupJavaScript()
         loadBundle()
@@ -3137,7 +3409,17 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private var titleFromOptions = false
     private var rootTopToSafeArea: NSLayoutConstraint?
     private var rootTopToView: NSLayoutConstraint?
+    private var rootBottomToSafeArea: NSLayoutConstraint?
+    private var rootBottomToView: NSLayoutConstraint?
+    private var rootLeadingToSafeArea: NSLayoutConstraint?
+    private var rootLeadingToView: NSLayoutConstraint?
+    private var rootTrailingToSafeArea: NSLayoutConstraint?
+    private var rootTrailingToView: NSLayoutConstraint?
+    private var rootIsSafeAreaView = false
     private var navigationBarHidden: Bool?
+    /// A native `<StatusBar>` node overrides the app default for this screen.
+    private var statusBarStyleOverride: UIStatusBarStyle?
+    private var statusBarHiddenOverride: Bool?
     /// The app's tab bar away while this screen shows (`tabBarHidden`).
     private var tabBarHidden = false
     /// Whether a back-swipe may leave this screen at all, the edge's
@@ -3158,6 +3440,14 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// full-screen timer is black edge to edge. nil is the app's.
     private var screenBackgroundColor: UIColor?
 
+    override var preferredStatusBarStyle: UIStatusBarStyle {
+        statusBarStyleOverride ?? .default
+    }
+
+    override var prefersStatusBarHidden: Bool {
+        statusBarHiddenOverride ?? false
+    }
+
     /// Whether this screen asked for a bar of its own through `setOptions`: a
     /// title, a large title or buttons, and not `hidden`. A tab's root screen
     /// in a hybrid app is shown bare unless it did.
@@ -3221,6 +3511,22 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    private func applyStatusBar(_ props: [String: Any]) {
+        let style: UIStatusBarStyle?
+        switch (props["barStyle"] as? String)?.lowercased() {
+        case "light-content", "light": style = .lightContent
+        case "dark-content", "dark": style = .darkContent
+        case "default": style = .default
+        default: style = nil
+        }
+        let hidden = props["hidden"] as? Bool
+        if statusBarStyleOverride != style || statusBarHiddenOverride != hidden {
+            statusBarStyleOverride = style
+            statusBarHiddenOverride = hidden
+            setNeedsStatusBarAppearanceUpdate()
+        }
+    }
+
     /// A bar button from `{ id, symbol | title }`. Its tap is the event
     /// `navButton` with `{ id }`.
     private func navigationButton(_ spec: [String: Any]) -> UIBarButtonItem? {
@@ -3417,10 +3723,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         // effect, rather than over the bar's back button. Other screens stay
         // inside the safe area.
         let edgeToEdge = scroll != nil && (prefersLargeTitle == true || scroll === leading(renderedRoot))
-        if rootTopToView?.isActive != edgeToEdge {
-            rootTopToSafeArea?.isActive = !edgeToEdge
-            rootTopToView?.isActive = edgeToEdge
-        }
+        let fullEdgeToEdge = rootIsSafeAreaView
+        let topEdgeToEdge = fullEdgeToEdge || edgeToEdge
+        rootTopToSafeArea?.isActive = !topEdgeToEdge
+        rootTopToView?.isActive = topEdgeToEdge
+        rootBottomToSafeArea?.isActive = !fullEdgeToEdge
+        rootBottomToView?.isActive = fullEdgeToEdge
+        rootLeadingToSafeArea?.isActive = !fullEdgeToEdge
+        rootLeadingToView?.isActive = fullEdgeToEdge
+        rootTrailingToSafeArea?.isActive = !fullEdgeToEdge
+        rootTrailingToView?.isActive = fullEdgeToEdge
         scroll?.contentInsetAdjustmentBehavior = edgeToEdge ? .automatic : .never
         guard scroll !== trackedScrollView else { return }
         trackedScrollView = scroll
@@ -3898,6 +4210,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     private func renderCommitted(_ document: [String: Any]) {
         let focused = firstResponder(in: rootStack) ?? lastFocusedInput
+        statusBarStyleOverride = nil
+        statusBarHiddenOverride = nil
         let previous = renderedRoot
         let next = reconcile(document, identity: "root", path: "root", previous: previous)
         if previous?.view !== next.view {
@@ -3920,15 +4234,29 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         rootStack.setLayoutStyle(rootStyle, for: next.view)
         rootStack.invalidateMeasurements()
         renderedRoot = next
+        rootIsSafeAreaView = next.type == "SafeAreaView"
         updateKeyboardAvoidingViews()
         syncGlobalKeyboardSafeArea()
         trackContentScrollView()
+        setNeedsStatusBarAppearanceUpdate()
         restoreFocus(focused)
     }
 
     private func clearRenderedTree() {
         if let root = renderedRoot { detach(root, from: rootStack) }
         renderedRoot = nil
+        rootIsSafeAreaView = false
+        rootTopToSafeArea?.isActive = true
+        rootTopToView?.isActive = false
+        rootBottomToSafeArea?.isActive = true
+        rootBottomToView?.isActive = false
+        rootLeadingToSafeArea?.isActive = true
+        rootLeadingToView?.isActive = false
+        rootTrailingToSafeArea?.isActive = true
+        rootTrailingToView?.isActive = false
+        statusBarStyleOverride = nil
+        statusBarHiddenOverride = nil
+        setNeedsStatusBarAppearanceUpdate()
         syncGlobalKeyboardSafeArea()
     }
 
@@ -3963,14 +4291,32 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let result = current.view
         current.protocolId = node["id"] as? String
         current.style = style
+        let linkTarget = ["href", "to"].lazy.compactMap { props[$0] as? String }
+            .first(where: { !$0.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty })?
+            .trimmingCharacters(in: .whitespacesAndNewlines)
+        if ["Link", "TouchableOpacity", "TouchableHighlight", "Pressable"].contains(type),
+           props["disabled"] as? Bool != true, let linkTarget {
+            linkTargets[ObjectIdentifier(result)] = linkTarget
+        } else {
+            linkTargets.removeValue(forKey: ObjectIdentifier(result))
+        }
         result.accessibilityIdentifier = accessibilityIdentifier(node, props: props) ?? path
         if type != "View" && type != "SafeAreaView" && type != "KeyboardAvoidingView" && type != "ScrollView" && type != "SectionList" && type != "FlatList" && type != "Modal" {
             result.setContentHuggingPriority(.required, for: .vertical)
         }
         applyViewStyle(style, to: result, node: current)
+        if type == "SafeAreaView", let safeArea = result as? CraftNativeSafeAreaView {
+            safeArea.setSafeAreaEdges(props["edges"])
+        }
         updateLayoutHandler(events["onLayout"], for: result)
+        if type == "StatusBar" { applyStatusBar(props) }
 
         switch type {
+        case "StatusBar", "RefreshControl":
+            // StatusBar is a screen trait, and RefreshControl is consumed by
+            // its nearest ScrollView. Neither contributes a visible child.
+            result.isHidden = true
+            result.isUserInteractionEnabled = false
         case "Text":
             let label = result as! UILabel
             label.numberOfLines = max(0, (props["numberOfLines"] as? NSNumber)?.intValue ?? 0)
@@ -4108,11 +4454,21 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "DatePicker":
             let picker = result as! UIDatePicker
             let mode = Self.datePickerMode(props["mode"])
-            if picker.datePickerMode != mode { picker.datePickerMode = mode }
-            let display: UIDatePickerStyle = props["display"] as? String == "inline" ? .inline
+            // A countdown is wheels only: UIKit asserts (and the app aborts)
+            // on a countdown in the compact or inline style, so the style is
+            // settled before the mode becomes a countdown, and after it
+            // stops being one.
+            let display: UIDatePickerStyle = mode == .countDownTimer ? .wheels
+                : props["display"] as? String == "inline" ? .inline
                 : props["display"] as? String == "wheels" || props["display"] as? String == "spinner" ? .wheels
                 : .compact
-            if picker.preferredDatePickerStyle != display { picker.preferredDatePickerStyle = display }
+            if mode == .countDownTimer {
+                if picker.preferredDatePickerStyle != display { picker.preferredDatePickerStyle = display }
+                if picker.datePickerMode != mode { picker.datePickerMode = mode }
+            } else {
+                if picker.datePickerMode != mode { picker.datePickerMode = mode }
+                if picker.preferredDatePickerStyle != display { picker.preferredDatePickerStyle = display }
+            }
             // UIKit takes an interval that divides an hour, and ignores others.
             let interval = (props["minuteInterval"] as? NSNumber)?.intValue ?? 1
             picker.minuteInterval = (1...30).contains(interval) && 60 % interval == 0 ? interval : 1
@@ -4242,7 +4598,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             updateAuxiliaryHandler(events["onLoad"], in: &imageLoadHandlers, for: image)
             updateAuxiliaryHandler(events["onLoadEnd"], in: &imageLoadEndHandlers, for: image)
             updateAuxiliaryHandler(events["onError"], in: &imageErrorHandlers, for: image)
-            updateImage(image, source: props["source"])
+            updateImage(image, source: props["source"], defaultSource: props["defaultSource"])
         case "ImageBackground":
             let background = result as! CraftNativeImageBackgroundView
             let requestedResizeMode = style["resizeMode"] as? String ?? props["resizeMode"] as? String
@@ -4252,7 +4608,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             updateAuxiliaryHandler(events["onLoad"], in: &imageLoadHandlers, for: background)
             updateAuxiliaryHandler(events["onLoadEnd"], in: &imageLoadEndHandlers, for: background)
             updateAuxiliaryHandler(events["onError"], in: &imageErrorHandlers, for: background)
-            updateImage(background, source: props["source"])
+            updateImage(background, source: props["source"], defaultSource: props["defaultSource"])
             configureStack(background.contentStack, style: style)
             reconcileChildren(children, in: background.contentStack, parent: current, path: path, style: style)
         case "KeyboardAvoidingView":
@@ -4276,6 +4632,15 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 controls: (props["controls"] as? Bool) == true,
                 resizeMode: style["resizeMode"] as? String ?? props["resizeMode"] as? String
             )
+        case "Map":
+            let map = result as! CraftNativeMapView
+            map.configure(props: props, children: children) { [weak self, weak map] markerID in
+                guard let self, let map, let handler = map.markerHandlers[markerID], !handler.isEmpty else { return }
+                self.send(type: "EVENT", payload: [
+                    "handlerName": handler,
+                    "nativeEvent": ["id": markerID],
+                ])
+            }
         case "ScrollView", "SectionList":
             let scroll = result as! CraftNativeScrollView
             let flexDirection = style["flexDirection"] as? String
@@ -4301,15 +4666,26 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             updateAuxiliaryHandler(events["onScrollEndDrag"], in: &scrollEndHandlers, for: scroll)
             updateAuxiliaryHandler(events["onMomentumScrollBegin"], in: &scrollMomentumBeginHandlers, for: scroll)
             updateAuxiliaryHandler(events["onMomentumScrollEnd"], in: &scrollMomentumEndHandlers, for: scroll)
-            scroll.setRefreshHandler(nonEmptyHandler(events["onRefresh"]).map { [weak self] handler in
+            let refreshNode = children.compactMap { $0 as? [String: Any] }.first {
+                canonicalType($0["type"] as? String ?? "") == "RefreshControl"
+            }
+            let refreshProps = refreshNode?["props"] as? [String: Any] ?? [:]
+            let refreshEvents = refreshNode?["events"] as? [String: String] ?? [:]
+            let refreshHandlerName = nonEmptyHandler(refreshEvents["onRefresh"])
+                ?? nonEmptyHandler(events["onRefresh"])
+            scroll.setRefreshHandler(refreshHandlerName.map { [weak self] handler in
                 { self?.send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": [:]]) }
-            }, refreshing: props["refreshing"] as? Bool == true)
+            }, refreshing: (refreshNode == nil ? props["refreshing"] : refreshProps["refreshing"]) as? Bool == true)
+            scroll.setRefreshAppearance(refreshProps)
             var contentStyle = style
             if let override = props["contentContainerStyle"] as? [String: Any] {
                 contentStyle.merge(override) { _, next in next }
             }
             configureStack(scroll.contentStack, style: contentStyle)
-            reconcileChildren(children, in: scroll.contentStack, parent: current, path: path, style: contentStyle)
+            reconcileChildren(children.filter {
+                guard let child = $0 as? [String: Any] else { return true }
+                return canonicalType(child["type"] as? String ?? "") != "RefreshControl"
+            }, in: scroll.contentStack, parent: current, path: path, style: contentStyle)
         case "FlatList":
             let list = result as! CraftNativeFlatList
             reconcileFlatList(
@@ -4326,7 +4702,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             reconcileChildren(children, in: stack, parent: current, path: path, style: style)
         }
         updateLongPressHandler(props["disabled"] as? Bool == true ? nil : events["onLongPress"], for: result)
-        if type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" {
+        if type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "StatusBar" && type != "RefreshControl" && type != "Map" {
             let disabled = props["disabled"] as? Bool == true
             updatePressHandler(disabled ? nil : nonEmptyHandler(events["onPress"]) ?? nonEmptyHandler(events["onClick"]), for: result)
             updatePressFeedback(
@@ -4391,6 +4767,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             return slider
         case "ActivityIndicator":
             return UIActivityIndicatorView(style: .medium)
+        case "StatusBar", "RefreshControl":
+            return CraftNativeFlowView()
         case "Image":
             return UIImageView()
         case "ImageBackground":
@@ -4399,6 +4777,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             return CraftNativeKeyboardAvoidingView()
         case "Video":
             return CraftNativeVideoView(host: self)
+        case "Map":
+            return CraftNativeMapView()
         case "Icon":
             let icon = CraftNativeIconView()
             icon.contentMode = .scaleAspectFit
@@ -4409,8 +4789,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             return CraftNativeFlatList()
         case "Svg":
             return CraftNativeSvgView()
-        case "View", "SafeAreaView":
+        case "View":
             return CraftNativeFlowView()
+        case "SafeAreaView":
+            return CraftNativeSafeAreaView()
         case "TouchableOpacity", "TouchableHighlight", "Pressable":
             return CraftNativeFlowView()
         default:
@@ -4433,9 +4815,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "switch": return "Switch"
         case "slider": return "Slider"
         case "activityindicator": return "ActivityIndicator"
+        case "statusbar": return "StatusBar"
+        case "refreshcontrol": return "RefreshControl"
         case "image": return "Image"
         case "imagebackground": return "ImageBackground"
         case "video": return "Video"
+        case "map": return "Map"
         case "icon": return "Icon"
         case "scrollview": return "ScrollView"
         case "sectionlist": return "SectionList"
@@ -4640,6 +5025,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let id = ObjectIdentifier(node.view)
         if let modal = node.view as? CraftNativeModalView { modal.resetForTeardown() }
         handlers.removeValue(forKey: id)
+        linkTargets.removeValue(forKey: id)
         pressInHandlers.removeValue(forKey: id)
         pressOutHandlers.removeValue(forKey: id)
         layoutHandlers.removeValue(forKey: id)
@@ -4754,7 +5140,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let id = ObjectIdentifier(view)
         let handler = handler?.isEmpty == false ? handler : nil
         updateHandler(handler, for: view)
-        if handler != nil, tapRecognizers[id] == nil {
+        let actionable = handler != nil || linkTargets[id] != nil
+        if actionable, tapRecognizers[id] == nil {
             let recognizer = UITapGestureRecognizer(target: self, action: #selector(viewPressed(_:)))
             tapRecognizers[id] = recognizer
             view.addGestureRecognizer(recognizer)
@@ -4763,7 +5150,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
         // A container keeps receiving touches without a handler of its own,
         // or every control inside it (and the screen root) would be dead.
-        if !(view is UIScrollView) { view.isUserInteractionEnabled = handler != nil || longPressHandlers[id] != nil || view is CraftNativeFlowView }
+        if !(view is UIScrollView) { view.isUserInteractionEnabled = actionable || longPressHandlers[id] != nil || view is CraftNativeFlowView }
     }
 
     private func updatePressFeedback(_ pressIn: String?, _ pressOut: String?, for view: UIView) {
@@ -4772,7 +5159,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         if let pressOut, !pressOut.isEmpty { pressOutHandlers[id] = pressOut } else { pressOutHandlers.removeValue(forKey: id) }
         guard pressInHandlers[id] != nil || pressOutHandlers[id] != nil else {
             if let recognizer = pressFeedbackRecognizers.removeValue(forKey: id) { view.removeGestureRecognizer(recognizer) }
-            if !(view is UIScrollView) { view.isUserInteractionEnabled = handlers[id] != nil || longPressHandlers[id] != nil || view is CraftNativeFlowView }
+            if !(view is UIScrollView) { view.isUserInteractionEnabled = handlers[id] != nil || linkTargets[id] != nil || longPressHandlers[id] != nil || view is CraftNativeFlowView }
             return
         }
         if pressFeedbackRecognizers[id] == nil {
@@ -4801,7 +5188,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             if let recognizer = longPressRecognizers.removeValue(forKey: id) {
                 view.removeGestureRecognizer(recognizer)
             }
-            if !(view is UIScrollView) { view.isUserInteractionEnabled = handlers[id] != nil || view is CraftNativeFlowView }
+            if !(view is UIScrollView) { view.isUserInteractionEnabled = handlers[id] != nil || linkTargets[id] != nil || view is CraftNativeFlowView }
         }
     }
 
@@ -5270,7 +5657,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         return ["localhost", "127.0.0.1", "::1"].contains(bare) || bare.hasSuffix(".localhost")
     }
 
-    private func updateImage(_ view: UIImageView, source: Any?) {
+    private func updateImage(_ view: UIImageView, source: Any?, defaultSource: Any? = nil) {
         let uri = (source as? String) ?? (source as? [String: Any])?["uri"] as? String
         let id = ObjectIdentifier(view)
         guard let uri, !uri.isEmpty else {
@@ -5284,7 +5671,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         imageTasks.removeValue(forKey: id)?.cancel()
         imageSources[id] = uri
         imageErrors.removeValue(forKey: id)
-        view.image = nil
+        view.image = immediateImage(defaultSource).map { imageForDisplay($0, view: view) }
         view.accessibilityValue = nil
         emitImageEvent(view, handler: imageLoadStartHandlers[id])
 
@@ -5332,6 +5719,20 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         imageFailure(view, uri: uri, message: "Unsupported image source")
     }
 
+    /// `defaultSource` is intentionally local-only: data and bundled assets
+    /// can be shown before a network image arrives without starting another
+    /// request or bypassing the source's URL policy.
+    private func immediateImage(_ source: Any?) -> UIImage? {
+        let uri = (source as? String) ?? (source as? [String: Any])?["uri"] as? String
+        guard let uri, !uri.isEmpty else { return nil }
+        if uri.hasPrefix("data:image/"),
+           let comma = uri.firstIndex(of: ","),
+           let data = Data(base64Encoded: String(uri[uri.index(after: comma)...])) {
+            return UIImage(data: data)
+        }
+        return !uri.contains(":") ? UIImage(named: uri) : nil
+    }
+
     private func imageFailure(_ view: UIImageView, uri: String?, message: String) {
         imageErrors[ObjectIdentifier(view)] = message
         view.image = nil
@@ -5425,6 +5826,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     @objc private func buttonPressed(_ sender: UIButton) {
         let focused = firstResponder(in: rootStack) ?? lastFocusedInput
+        if let target = linkTargets[ObjectIdentifier(sender)] {
+            hybridEvents?.nativeScreen(self, open: target)
+            return
+        }
         guard let handler = handlers[ObjectIdentifier(sender)] else { return }
         send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": [:]])
         restoreFocus(focused)
@@ -5534,7 +5939,13 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let value = snappedSliderValue(sender.value, for: sender)
         if sender.value != value { sender.value = value }
         guard let handler = handlers[ObjectIdentifier(sender)] else { return }
-        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": value]])
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": Self.sliderEventValue(value)]])
+    }
+
+    /// A slider's value as the script reads it: the shortest decimal that is
+    /// the same Float, so a step of 0.1 gives 0.8 and not 0.800000011920929.
+    static func sliderEventValue(_ value: Float) -> Double {
+        Double(value.description) ?? Double(value)
     }
 
     /// `@change` on a DatePicker: the value as `<input type="date|time|
@@ -5631,7 +6042,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     @objc private func sliderFinished(_ sender: UISlider) {
         guard let handler = sliderCompleteHandlers[ObjectIdentifier(sender)] else { return }
-        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": snappedSliderValue(sender.value, for: sender)]])
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": Self.sliderEventValue(snappedSliderValue(sender.value, for: sender))]])
     }
 
     func numberOfComponents(in pickerView: UIPickerView) -> Int { 1 }
@@ -5681,8 +6092,13 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     }
 
     @objc private func viewPressed(_ sender: UITapGestureRecognizer) {
-        guard let view = sender.view, let handler = handlers[ObjectIdentifier(view)] else { return }
+        guard let view = sender.view else { return }
         let id = ObjectIdentifier(view)
+        if let target = linkTargets[id] {
+            hybridEvents?.nativeScreen(self, open: target)
+            return
+        }
+        guard let handler = handlers[id] else { return }
         if pressInHandlers[id] == nil, pressOutHandlers[id] == nil,
            let pressable = view as? CraftNativeFlowView, let activeOpacity = pressable.pressActiveOpacity {
             UIView.animate(withDuration: 0.1, animations: { pressable.alpha = pressable.pressBaseOpacity * activeOpacity }) { _ in