craft-native 0.0.174 → 0.0.176

package/dist/ios/templates/CraftNativeScreen.swift

@@ -12,6 +12,15 @@ import UIKit
 
 private let craftNativeCapabilityTimeoutMilliseconds = 30_000
 
+/// A finite number from a prop, for the views outside the screen controller,
+/// which has its own: the keyboard-avoiding view and SVG text read theirs
+/// with it, and without it the template did not compile.
+private func number(_ value: Any?) -> CGFloat? {
+    guard let number = value as? NSNumber else { return nil }
+    let value = CGFloat(truncating: number)
+    return value.isFinite ? value : nil
+}
+
 private func craftNativeGridColumnCount(_ value: Any?) -> Int {
     if let number = value as? NSNumber { return max(1, number.intValue) }
     guard let text = value as? String else { return 1 }
@@ -81,6 +90,178 @@ private func craftNativeJustifyCode(_ value: String) -> UInt32 {
     }
 }
 
+/// Optional bridge to the host-neutral tree layout ABI. The host still owns
+/// intrinsic measurement and keeps its local implementation for unsupported
+/// trees or runtimes built before this symbol was exported.
+private enum CraftNativeTreeLayoutBridge {
+    private struct StyleInput {
+        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
+    }
+
+    private struct NodeInput {
+        var style: StyleInput
+        var firstChild: UInt32
+        var childCount: UInt32
+    }
+
+    private struct Frame {
+        var x: Float
+        var y: Float
+        var width: Float
+        var height: Float
+    }
+
+    private typealias Function = @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 func finite(_ value: CGFloat?) -> Float {
+        guard let value, value.isFinite else { return .nan }
+        return Float(value)
+    }
+
+    private static func length(_ value: CraftNativeLength?, base: CGFloat?) -> Float {
+        guard let value else { return .nan }
+        return finite(value.resolve(base))
+    }
+
+    private static func alignment(_ value: String?) -> UInt32 {
+        switch value {
+        case "center": return 1
+        case "flex-end": return 2
+        case "stretch": return 3
+        case "baseline": return 4
+        default: return 0
+        }
+    }
+
+    private static func alignSelf(_ value: String?) -> UInt32 {
+        switch value {
+        case "flex-start": return 1
+        case "center": return 2
+        case "flex-end": return 3
+        case "stretch": return 4
+        case "baseline": return 5
+        default: return 0
+        }
+    }
+
+    private static func justify(_ value: String) -> UInt32 {
+        craftNativeJustifyCode(value)
+    }
+
+    static func frames(
+        width: CGFloat,
+        height: CGFloat,
+        direction: NSLayoutConstraint.Axis,
+        gap: CGFloat,
+        rowGap: CGFloat?,
+        columnGap: CGFloat?,
+        wrap: Bool,
+        justifyContent: String,
+        alignItems: String,
+        padding: UIEdgeInsets,
+        children: [(UIView, CraftNativeLayoutStyle, CGSize, CGFloat)]
+    ) -> [(UIView, CGRect)]? {
+        guard let function, width.isFinite, height.isFinite, width >= 0, height >= 0, !children.isEmpty else { return nil }
+        let mainGap = direction == .horizontal ? (columnGap ?? gap) : (rowGap ?? gap)
+        let crossGap = direction == .horizontal ? (rowGap ?? gap) : (columnGap ?? gap)
+        var root = StyleInput(
+            direction: direction == .horizontal ? 0 : 1,
+            width: Float(width), height: Float(height), gap: Float(max(0, mainGap)),
+            justifyContent: justify(justifyContent), alignItems: alignment(alignItems), flexWrap: wrap ? 1 : 0,
+            paddingTop: Float(max(0, padding.top)), paddingRight: Float(max(0, padding.right)),
+            paddingBottom: Float(max(0, padding.bottom)), paddingLeft: Float(max(0, padding.left))
+        )
+        root.rowGap = Float(max(0, rowGap ?? 0))
+        root.columnGap = Float(max(0, columnGap ?? 0))
+        let contentWidth = max(0, width - padding.left - padding.right)
+        let contentHeight = max(0, height - padding.top - padding.bottom)
+        let mainSize = direction == .horizontal ? contentWidth : contentHeight
+        var nodes = [NodeInput(style: root, firstChild: 1, childCount: UInt32(children.count))]
+        for (view, style, intrinsic, baseline) in children {
+            let shrink: CGFloat
+            if let authored = style.flexShrink {
+                shrink = authored
+            } else if view is UIScrollView {
+                shrink = 1
+            } else if view is UILabel, direction == .horizontal {
+                shrink = 1
+            } else {
+                shrink = 0
+            }
+            var input = StyleInput(
+                width: length(style.width, base: contentWidth), height: length(style.height, base: contentHeight),
+                intrinsicWidth: Float(max(0, intrinsic.width)), intrinsicHeight: Float(max(0, intrinsic.height)),
+                baseline: Float(max(0, baseline)), aspectRatio: finite(style.aspectRatio),
+                flexBasis: length(style.flexBasis, base: mainSize), flexGrow: Float(max(0, style.flexGrow)), flexShrink: Float(max(0, shrink)),
+                minWidth: length(style.minWidth, base: contentWidth), maxWidth: length(style.maxWidth, base: contentWidth),
+                minHeight: length(style.minHeight, base: contentHeight), maxHeight: length(style.maxHeight, base: contentHeight),
+                alignSelf: alignSelf(style.alignSelf),
+                marginTop: Float(max(0, style.marginTop)), marginRight: Float(max(0, style.marginRight)),
+                marginBottom: Float(max(0, style.marginBottom)), marginLeft: Float(max(0, style.marginLeft))
+            )
+            input.direction = 0
+            nodes.append(NodeInput(style: input, firstChild: 0, childCount: 0))
+        }
+        var output = [Frame](repeating: Frame(x: 0, y: 0, width: 0, height: 0), count: nodes.count)
+        let frameCount = output.count
+        let status = nodes.withUnsafeBufferPointer { nodeBuffer in
+            output.withUnsafeMutableBufferPointer { frameBuffer in
+                function(
+                    Float(width), Float(height), UnsafeRawPointer(nodeBuffer.baseAddress!), nodes.count,
+                    UnsafeMutableRawPointer(frameBuffer.baseAddress!), frameCount
+                )
+            }
+        }
+        guard status == 0 else { return nil }
+        let childFrames = output.dropFirst()
+        guard childFrames.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 zip(children, childFrames).map { child, frame in
+            (child.0, CGRect(x: CGFloat(frame.x), y: CGFloat(frame.y), width: CGFloat(frame.width), height: CGFloat(frame.height)))
+        }
+    }
+}
+
 private enum CraftNativeFlexLineBridge {
     private struct Item {
         var basis: Float
@@ -430,7 +611,9 @@ private final class CraftNativeVideoView: UIView {
 private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
     private var annotationsByID: [String: MKPointAnnotation] = [:]
     private var overlaysByID: [String: MKPolyline] = [:]
+    private var overlayCoordinatesByID: [String: [CLLocationCoordinate2D]] = [:]
     private var overlayColors: [ObjectIdentifier: UIColor] = [:]
+    private var overlayWidths: [ObjectIdentifier: CGFloat] = [:]
     private(set) var markerHandlers: [String: String] = [:]
     var onMarkerTap: ((String) -> Void)?
 
@@ -453,6 +636,10 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
         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] = [:]
@@ -474,7 +661,10 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
                 }
             } 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 authoredWidth = (childProps["strokeWidth"] as? NSNumber)?.doubleValue ?? 3
+                let width = CGFloat(authoredWidth)
+                guard authoredWidth.isFinite, width.isFinite, width > 0 else { continue }
+                nextPolylines[id] = (points, Self.color(childProps["strokeColor"] as? String), width)
             }
         }
 
@@ -494,13 +684,33 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
         }
         markerHandlers = nextHandlers
 
-        removeOverlays(Array(overlaysByID.values))
-        overlaysByID.removeAll(keepingCapacity: true)
-        overlayColors.removeAll(keepingCapacity: true)
+        let staleOverlays = overlaysByID.keys.filter { nextPolylines[$0] == nil }
+        for id in staleOverlays {
+            if let overlay = overlaysByID.removeValue(forKey: id) {
+                removeOverlay(overlay)
+                overlayColors.removeValue(forKey: ObjectIdentifier(overlay))
+                overlayWidths.removeValue(forKey: ObjectIdentifier(overlay))
+            }
+            overlayCoordinatesByID.removeValue(forKey: id)
+        }
         for (id, value) in nextPolylines {
+            if let overlay = overlaysByID[id],
+               let coordinates = overlayCoordinatesByID[id],
+               Self.coordinatesEqual(coordinates, value.coordinates),
+               overlayColors[ObjectIdentifier(overlay)]?.isEqual(value.color) == true,
+               overlayWidths[ObjectIdentifier(overlay)] == value.width {
+                continue
+            }
+            if let previous = overlaysByID.removeValue(forKey: id) {
+                removeOverlay(previous)
+                overlayColors.removeValue(forKey: ObjectIdentifier(previous))
+                overlayWidths.removeValue(forKey: ObjectIdentifier(previous))
+            }
             let overlay = MKPolyline(coordinates: value.coordinates, count: value.coordinates.count)
             overlaysByID[id] = overlay
+            overlayCoordinatesByID[id] = value.coordinates
             overlayColors[ObjectIdentifier(overlay)] = value.color
+            overlayWidths[ObjectIdentifier(overlay)] = value.width
             addOverlay(overlay)
         }
 
@@ -542,7 +752,7 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
     func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
         let renderer = MKPolylineRenderer(overlay: overlay)
         renderer.strokeColor = overlayColors[ObjectIdentifier(overlay)] ?? .systemBlue
-        renderer.lineWidth = 3
+        renderer.lineWidth = overlayWidths[ObjectIdentifier(overlay)] ?? 3
         return renderer
     }
 
@@ -550,8 +760,19 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
         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])
+        return stride(from: 0, to: numbers.count - 1, by: 2).compactMap {
+            let latitude = numbers[$0]
+            let longitude = numbers[$0 + 1]
+            guard latitude.isFinite, longitude.isFinite,
+                  (-90...90).contains(latitude), (-180...180).contains(longitude) else { return nil }
+            return CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
+        }
+    }
+
+    private static func coordinatesEqual(_ lhs: [CLLocationCoordinate2D], _ rhs: [CLLocationCoordinate2D]) -> Bool {
+        guard lhs.count == rhs.count else { return false }
+        return zip(lhs, rhs).allSatisfy { left, right in
+            left.latitude == right.latitude && left.longitude == right.longitude
         }
     }
 
@@ -562,7 +783,11 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
               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 }
+              let longitudeDelta = (span["longitudeDelta"] as? NSNumber)?.doubleValue ?? (span["longitude_delta"] as? NSNumber)?.doubleValue,
+              latitude.isFinite, longitude.isFinite, latitudeDelta.isFinite, longitudeDelta.isFinite,
+              (-90...90).contains(latitude), (-180...180).contains(longitude),
+              latitudeDelta > 0, latitudeDelta <= 180, longitudeDelta > 0, longitudeDelta <= 360,
+              latitude - latitudeDelta / 2 >= -90, latitude + latitudeDelta / 2 <= 90 else { return nil }
         return MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: latitude, longitude: longitude), span: MKCoordinateSpan(latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta))
     }
 
@@ -585,6 +810,16 @@ private final class CraftNativeMapView: MKMapView, MKMapViewDelegate {
         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
@@ -614,15 +849,17 @@ private enum CraftNativeLength: Equatable {
 
     init?(_ value: Any?) {
         if let number = value as? NSNumber {
-            self = .points(CGFloat(truncating: number))
+            let points = CGFloat(truncating: number)
+            guard points.isFinite else { return nil }
+            self = .points(points)
             return
         }
         guard let text = (value as? String)?.trimmingCharacters(in: .whitespaces), !text.isEmpty else { return nil }
-        if text.hasSuffix("%"), let fraction = Double(text.dropLast()) {
+        if text.hasSuffix("%"), let fraction = Double(text.dropLast()), fraction.isFinite {
             self = .percent(CGFloat(fraction) / 100)
-        } else if text.hasSuffix("px"), let points = Double(text.dropLast(2)) {
+        } else if text.hasSuffix("px"), let points = Double(text.dropLast(2)), points.isFinite {
             self = .points(CGFloat(points))
-        } else if let points = Double(text) {
+        } else if let points = Double(text), points.isFinite {
             self = .points(CGFloat(points))
         } else {
             return nil
@@ -631,7 +868,7 @@ private enum CraftNativeLength: Equatable {
 
     func resolve(_ base: CGFloat?) -> CGFloat? {
         switch self {
-        case .points(let value): return value
+        case .points(let value): return max(0, value)
         case .percent(let fraction): return base.map { max(0, $0 * fraction) }
         }
     }
@@ -668,7 +905,11 @@ private struct CraftNativeLayoutStyle {
     static let empty = CraftNativeLayoutStyle([:])
 
     init(_ raw: [String: Any]) {
-        func number(_ value: Any?) -> CGFloat? { (value as? NSNumber).map { CGFloat(truncating: $0) } }
+        func number(_ value: Any?) -> CGFloat? {
+            guard let number = value as? NSNumber else { return nil }
+            let value = CGFloat(truncating: number)
+            return value.isFinite ? value : nil
+        }
         width = CraftNativeLength(raw["width"])
         height = CraftNativeLength(raw["height"])
         let ratio = number(raw["aspectRatio"])
@@ -970,6 +1211,13 @@ private class CraftNativeFlowView: UIStackView {
 
     private var flowChildren: [UIView] = []
     private var measurements: [MeasureKey: CGSize] = [:]
+    /// The screen's rendered root gets a definite viewport from the host. A
+    /// root with `flex: 1` must keep that height even when its first child is
+    /// a ScrollView whose content is taller than the screen; otherwise an
+    /// absolute sibling is positioned against the scroll content and moves
+    /// with it.
+    private weak var viewportChild: UIView?
+    private var viewportChildFillsHeight = false
 
     private struct MeasureKey: Hashable {
         let width: CGFloat?
@@ -1071,6 +1319,12 @@ private class CraftNativeFlowView: UIStackView {
         invalidateMeasurements()
     }
 
+    func setViewportChild(_ view: UIView?, fillsHeight: Bool) {
+        viewportChild = view
+        viewportChildFillsHeight = fillsHeight
+        invalidateMeasurements()
+    }
+
     func removeLayoutStyle(for view: UIView) {
         view.craftLayoutStyle = .empty
     }
@@ -1105,7 +1359,12 @@ private class CraftNativeFlowView: UIStackView {
         let scale = window?.screen.scale ?? traitCollection.displayScale
         let result = layout(width: bounds.width, height: bounds.height, maxWidth: bounds.width, maxHeight: bounds.height, place: true)
         for (child, frame) in result.frames {
-            var snapped = CraftNativeFlexLayout.snapped(frame, scale: scale)
+            var viewportFrame = frame
+            if child === viewportChild, viewportChildFillsHeight {
+                viewportFrame.origin.y = 0
+                viewportFrame.size.height = bounds.height
+            }
+            var snapped = CraftNativeFlexLayout.snapped(viewportFrame, scale: scale)
             // Snapping each edge can take a pixel off a label (15.83…33.83
             // becomes 16…33.67), and a label a pixel narrower than its text
             // truncates it ("13" drew as "…"). Text keeps its whole size.
@@ -1188,6 +1447,29 @@ private class CraftNativeFlowView: UIStackView {
     /// outer size when its parent fixes it, nil when it sizes to its content
     /// within `maxWidth`/`maxHeight`. Returns its outer size and, when
     /// placing, every child's frame in its own coordinates.
+    private func sharedDirectFrames(_ children: [UIView], width: CGFloat?, height: CGFloat?) -> [(UIView, CGRect)]? {
+        guard let width, let height, !grid, !reverse, !wrapReverse,
+              width.isFinite, height.isFinite, width >= 0, height >= 0,
+              children.allSatisfy({ child in
+                  let style = child.craftLayoutStyle
+                  return style.position != "absolute" && style.display != "none"
+              }) else { return nil }
+
+        let intrinsic = children.map { child in
+            CraftNativeFlexLayout.measure(child, width: nil, height: nil, maxWidth: width, maxHeight: height)
+        }
+        let baselines = children.enumerated().map { index, child in
+            CraftNativeFlowView.firstBaseline(child, cross: intrinsic[index].height)
+        }
+        let payload = zip(children, zip(intrinsic, baselines)).map { child, measured in
+            (child, child.craftLayoutStyle, measured.0, measured.1)
+        }
+        return CraftNativeTreeLayoutBridge.frames(
+            width: width, height: height, direction: axis, gap: gap, rowGap: rowGap, columnGap: columnGap, wrap: wrap,
+            justifyContent: justifyContent, alignItems: alignItems, padding: effectivePadding, children: payload
+        )
+    }
+
     private func layout(
         width: CGFloat?,
         height: CGFloat?,
@@ -1222,6 +1504,9 @@ private class CraftNativeFlowView: UIStackView {
                 frames: &frames
             )
         }
+        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)
 
         if place {
@@ -1269,6 +1554,7 @@ private class CraftNativeFlowView: UIStackView {
         place: Bool,
         frames: inout [(UIView, CGRect)]
     ) -> CGSize {
+        let contentPadding = effectivePadding
         let definiteMain = horizontal ? innerWidth : innerHeight
         let definiteCross = horizontal ? innerHeight : innerWidth
         let roomMain = horizontal ? roomWidth : roomHeight
@@ -1630,6 +1916,7 @@ private class CraftNativeFlowView: UIStackView {
         place: Bool,
         frames: inout [(UIView, CGRect)]
     ) -> CGSize {
+        let contentPadding = effectivePadding
         let columns = max(1, gridColumns)
         let horizontalGap = columnGap ?? gap
         let verticalGap = rowGap ?? gap
@@ -1653,7 +1940,7 @@ private class CraftNativeFlowView: UIStackView {
             let available = max(0, cellWidth - style.marginLeft - style.marginRight)
             let align = style.alignSelf ?? alignItems
             var fixedWidth = style.width?.resolve(cellWidth)
-            var fixedHeight = style.height?.resolve(nil)
+            var fixedHeight = style.height?.resolve(innerHeight)
             // 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.
@@ -1687,7 +1974,7 @@ private class CraftNativeFlowView: UIStackView {
                 let size = sizes[index]
                 let alignment: UInt32 = align == "center" ? 1 : align == "flex-end" ? 2 : 0
                 var explicitWidth = style.width?.resolve(cellWidth)
-                var explicitHeight = style.height?.resolve(nil)
+                var explicitHeight = style.height?.resolve(innerHeight)
                 if explicitWidth == nil && align == "stretch" && (explicitHeight == nil || style.aspectRatio == nil) {
                     explicitWidth = max(0, cellWidth - style.marginLeft - style.marginRight)
                 }
@@ -1696,7 +1983,7 @@ private class CraftNativeFlowView: UIStackView {
                     size.width, size.height,
                     explicitWidth, explicitHeight,
                     style.minWidth?.resolve(cellWidth), style.maxWidth?.resolve(cellWidth),
-                    style.minHeight?.resolve(nil), style.maxHeight?.resolve(nil),
+                    style.minHeight?.resolve(innerHeight), style.maxHeight?.resolve(innerHeight),
                     style.marginLeft, style.marginRight, style.marginTop, style.marginBottom,
                     align == "stretch", alignment
                 )
@@ -1805,7 +2092,7 @@ private final class CraftNativeKeyboardAvoidingView: CraftNativeFlowView {
     func configureKeyboard(props: [String: Any]) {
         let requestedBehavior = (props["behavior"] as? String) ?? "padding"
         keyboardBehavior = ["height", "position", "padding"].contains(requestedBehavior) ? requestedBehavior : "padding"
-        keyboardVerticalOffset = (props["keyboardVerticalOffset"] as? NSNumber).map { CGFloat(truncating: $0) } ?? 0
+        keyboardVerticalOffset = number(props["keyboardVerticalOffset"]) ?? 0
         if keyboardBehavior != "height" { appliedHeightInset = 0 }
         authoredPadding = padding
         applyKeyboardAvoidance()
@@ -2306,7 +2593,7 @@ private final class CraftNativeSvgView: UIView {
         let props = drawing["props"] as? [String: Any] ?? [:]
         guard let box = props["viewBox"] as? [Any], box.count == 4 else { return nil }
         let n = box.compactMap { ($0 as? NSNumber).map { CGFloat(truncating: $0) } }
-        guard n.count == 4, n[2] > 0, n[3] > 0 else { return nil }
+        guard n.count == 4, n.allSatisfy(\.isFinite), n[2] > 0, n[3] > 0 else { return nil }
         return CGRect(x: n[0], y: n[1], width: n[2], height: n[3])
     }
 
@@ -2327,21 +2614,29 @@ private final class CraftNativeSvgView: UIView {
         var linecap: String?
         var linejoin: String?
         var dashes: [CGFloat]?
+        var vectorEffect: String?
 
         func merged(_ node: [String: Any]) -> Paint {
             var next = self
             let props = node["props"] as? [String: Any] ?? [:]
             let style = node["style"] as? [String: Any] ?? [:]
+            func value(_ key: String) -> Any? { style[key] ?? props[key] }
+            func finite(_ raw: Any?) -> CGFloat? {
+                guard let number = raw as? NSNumber else { return nil }
+                let value = CGFloat(truncating: number)
+                return value.isFinite ? value : nil
+            }
             if let color = style["color"] as? String { next.color = color }
             if let fill = style["fill"] as? String ?? props["fill"] as? String { next.fill = fill }
             if let stroke = style["stroke"] as? String ?? props["stroke"] as? String { next.stroke = stroke }
-            if let width = (style["strokeWidth"] as? NSNumber ?? props["strokeWidth"] as? NSNumber) { next.strokeWidth = CGFloat(truncating: width) }
+            if let width = finite(style["strokeWidth"] ?? props["strokeWidth"]) { next.strokeWidth = width }
             // Computed style wins over the component prop, matching Android
             // and the browser's cascade when both provide opacity.
-            if let opacity = style["opacity"] as? NSNumber ?? props["opacity"] as? NSNumber { next.opacity *= CGFloat(truncating: opacity) }
-            if let cap = props["strokeLinecap"] as? String { next.linecap = cap }
-            if let join = props["strokeLinejoin"] as? String { next.linejoin = join }
-            if let dashes = props["strokeDasharray"] as? [Any] { next.dashes = dashes.compactMap { ($0 as? NSNumber).map { CGFloat(truncating: $0) } } }
+            if let opacity = finite(style["opacity"] ?? props["opacity"]) { next.opacity *= opacity }
+            if let cap = value("strokeLinecap") as? String { next.linecap = cap }
+            if let join = value("strokeLinejoin") as? String { next.linejoin = join }
+            if let dashes = value("strokeDasharray") as? [Any] { next.dashes = dashes.compactMap(finite).filter { $0 >= 0 } }
+            if let vectorEffect = value("vectorEffect") as? String { next.vectorEffect = vectorEffect }
             return next
         }
 
@@ -2408,7 +2703,7 @@ private final class CraftNativeSvgView: UIView {
                     // `vector-effect="non-scaling-stroke"`: the stroke is in the
                     // view's points, so a stretched chart's line keeps its width
                     // and a round cap stays a round dot.
-                    let nonScaling = (shape["props"] as? [String: Any])?["vectorEffect"] as? String == "non-scaling-stroke"
+                    let nonScaling = own.vectorEffect == "non-scaling-stroke"
                     let line: UIBezierPath
                     if nonScaling, let copy = path.copy() as? UIBezierPath {
                         copy.apply(viewTransform)
@@ -2435,14 +2730,14 @@ private final class CraftNativeSvgView: UIView {
         guard !text.isEmpty else { return }
         let props = node["props"] as? [String: Any] ?? [:]
         let style = node["style"] as? [String: Any] ?? [:]
-        let size = CGFloat(truncating: props["fontSize"] as? NSNumber ?? style["fontSize"] as? NSNumber ?? 12)
+        let size = number(props["fontSize"]) ?? number(style["fontSize"]) ?? 12
         let weight: UIFont.Weight = (props["fontWeight"] as? String ?? style["fontWeight"] as? String).map { ["500": .medium, "600": .semibold, "700": .bold, "bold": .bold][$0] ?? .regular } ?? .regular
         let string = NSAttributedString(string: text, attributes: [
             .font: UIFont.systemFont(ofSize: size, weight: weight),
             .foregroundColor: paint.resolve(paint.fill) ?? UIColor.label,
         ])
-        var x = CGFloat(truncating: props["x"] as? NSNumber ?? 0)
-        let y = CGFloat(truncating: props["y"] as? NSNumber ?? 0)
+        var x = number(props["x"]) ?? 0
+        let y = number(props["y"]) ?? 0
         switch props["textAnchor"] as? String {
         case "middle": x -= string.size().width / 2
         case "end": x -= string.size().width
@@ -2455,7 +2750,7 @@ private final class CraftNativeSvgView: UIView {
     static func path(_ value: Any?) -> UIBezierPath? {
         guard let list = value as? [Any] else { return nil }
         let n = list.compactMap { ($0 as? NSNumber).map { CGFloat(truncating: $0) } }
-        guard !n.isEmpty, n.count == list.count else { return nil }
+        guard !n.isEmpty, n.count == list.count, n.allSatisfy(\.isFinite) else { return nil }
         let path = UIBezierPath()
         var i = 0
         func point(_ at: Int) -> CGPoint { CGPoint(x: n[at], y: n[at + 1]) }
@@ -2892,6 +3187,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     override func viewDidAppear(_ animated: Bool) {
         super.viewDidAppear(animated)
         screenVisibilityChanged(true)
+        // A navigation breadcrumb for the crash reporter: the trail a crash
+        // report carries is the screens that led to it.
+        if !isAppScript, let routeName, !routeName.isEmpty {
+            CraftCrashReporter.shared.screenAppeared(routeName)
+        }
     }
 
     override func viewDidDisappear(_ animated: Bool) {
@@ -2987,7 +3287,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 ?? Self.safeJavaScriptString(exception)
                 ?? "unknown"
             let stack = Self.safeJavaScriptString(exception?.objectForKeyedSubscript("stack")) ?? ""
-            CraftNativeConsole.write("error", category: self?.screenName(in: context) ?? "screen", message: stack.isEmpty || stack == "undefined" ? "Uncaught \(message)" : "Uncaught \(message)\n\(stack)")
+            let screen = self?.screenName(in: context) ?? "screen"
+            CraftNativeConsole.write("error", category: screen, message: stack.isEmpty || stack == "undefined" ? "Uncaught \(message)" : "Uncaught \(message)\n\(stack)")
+            // To the app's crash reporter too (bughq, when configured): an
+            // uncaught error in a shipped screen is otherwise only in a log
+            // nobody reads on someone else's phone.
+            CraftCrashReporter.shared.captureJavaScript(
+                name: Self.safeJavaScriptString(exception?.objectForKeyedSubscript("name")),
+                message: message,
+                stack: stack,
+                route: screen,
+                isAppScript: self?.isAppScript ?? false
+            )
             self?.hybridFailed(message)
         }
         let postMessage: @convention(block) (String) -> Void = { [weak self] json in
@@ -4215,6 +4526,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         var rootStyle = next.style
         if rootStyle["flex"] == nil, rootStyle["height"] == nil { rootStyle["flex"] = 1 }
         rootStack.setLayoutStyle(rootStyle, for: next.view)
+        rootStack.setViewportChild(next.view, fillsHeight: rootStyle["height"] == nil)
         rootStack.invalidateMeasurements()
         renderedRoot = next
         rootIsSafeAreaView = next.type == "SafeAreaView"
@@ -4229,6 +4541,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         if let root = renderedRoot { detach(root, from: rootStack) }
         renderedRoot = nil
         rootIsSafeAreaView = false
+        rootStack.setViewportChild(nil, fillsHeight: false)
         rootTopToSafeArea?.isActive = true
         rootTopToView?.isActive = false
         rootBottomToSafeArea?.isActive = true
@@ -4520,10 +4833,13 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             updateHandler(nonEmptyHandler(events["onValueChange"]) ?? nonEmptyHandler(events["onChange"]), for: toggle)
         case "Slider":
             let slider = result as! UISlider
-            slider.minimumValue = (props["minimumValue"] as? NSNumber)?.floatValue ?? 0
-            slider.maximumValue = max(slider.minimumValue + .leastNonzeroMagnitude, (props["maximumValue"] as? NSNumber)?.floatValue ?? 1)
-            let value = (props["value"] as? NSNumber)?.floatValue ?? slider.minimumValue
-            if let step = (props["step"] as? NSNumber)?.floatValue, step > 0 { sliderSteps[ObjectIdentifier(slider)] = step }
+            let minimum = (props["minimumValue"] as? NSNumber)?.floatValue ?? 0
+            slider.minimumValue = minimum.isFinite ? minimum : 0
+            let maximum = (props["maximumValue"] as? NSNumber)?.floatValue ?? 1
+            slider.maximumValue = max(slider.minimumValue + .leastNonzeroMagnitude, maximum.isFinite ? maximum : 1)
+            let authoredValue = (props["value"] as? NSNumber)?.floatValue ?? slider.minimumValue
+            let value = authoredValue.isFinite ? authoredValue : slider.minimumValue
+            if let step = (props["step"] as? NSNumber)?.floatValue, step.isFinite, step > 0 { sliderSteps[ObjectIdentifier(slider)] = step }
             else { sliderSteps.removeValue(forKey: ObjectIdentifier(slider)) }
             slider.value = snappedSliderValue(value, for: slider)
             slider.minimumTrackTintColor = color(props["minimumTrackTintColor"])
@@ -4538,7 +4854,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             indicator.style = (requestedSize as? String) == "large" ? .large : .medium
             let scale: CGFloat
             if let numericSize = requestedSize as? NSNumber {
-                scale = max(0.5, CGFloat(numericSize.doubleValue / 20.0))
+                let value = CGFloat(numericSize.doubleValue / 20.0)
+                scale = value.isFinite ? max(0.5, value) : 1
             } else if (requestedSize as? String) == "small" {
                 scale = 0.75
             } else {
@@ -4794,6 +5111,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "checkbox": return "Checkbox"
         case "textinput", "input": return "TextInput"
         case "picker", "select": return "Picker"
+        case "datepicker", "date-picker", "date": return "DatePicker"
         case "modal": return "Modal"
         case "switch": return "Switch"
         case "slider": return "Slider"
@@ -4933,14 +5251,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             { [weak self] scrollView in self?.send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": self?.scrollEvent(scrollView) ?? [:]]) }
         }
 
+        let threshold = max(
+            0,
+            Double(number(props["onEndReachedThreshold"]) ?? number(props["threshold"]) ?? 0.1)
+        )
         list.apply(
             nodes: children,
             horizontal: props["horizontal"] as? Bool == true,
             columns: (props["numColumns"] as? NSNumber)?.intValue ?? 1,
             inverted: props["inverted"] as? Bool == true,
-            endReachedThreshold: (props["onEndReachedThreshold"] as? NSNumber)?.doubleValue
-                ?? (props["threshold"] as? NSNumber)?.doubleValue
-                ?? 0.1,
+            endReachedThreshold: threshold,
             renderItem: { [weak self] node, identity, _ in
                 guard let self = self else { return UIView() }
                 let previous = self.flatListRows[listKey]?[identity]
@@ -5083,7 +5403,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     private func emitLayoutEvents(for node: RenderedNode) {
         let id = ObjectIdentifier(node.view)
-        if let handler = layoutHandlers[id], node.view.window != nil {
+        if let handler = layoutHandlers[id], isEffectivelyVisible(node.view) {
             let frame = node.view.frame
             if lastLayoutFrames[id] != frame {
                 lastLayoutFrames[id] = frame
@@ -5104,6 +5424,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    private func isEffectivelyVisible(_ view: UIView) -> Bool {
+        guard view.window != nil, !view.isHidden else { return false }
+        var ancestor = view.superview
+        while let current = ancestor {
+            if current.isHidden { return false }
+            ancestor = current.superview
+        }
+        return true
+    }
+
     private func updateAuxiliaryHandler(
         _ handler: String?,
         in handlers: inout [ObjectIdentifier: String],
@@ -5310,10 +5640,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         stack.alignItems = style["alignItems"] as? String ?? "stretch"
         stack.alignContent = style["alignContent"] as? String ?? "flex-start"
         stack.justifyContent = style["justifyContent"] as? String ?? "flex-start"
-        let gap = number(style["gap"]) ?? 0
+        let gap = max(0, number(style["gap"]) ?? 0)
         stack.gap = gap
-        stack.rowGap = number(style["rowGap"]) ?? gap
-        stack.columnGap = number(style["columnGap"]) ?? gap
+        stack.rowGap = max(0, number(style["rowGap"]) ?? gap)
+        stack.columnGap = max(0, number(style["columnGap"]) ?? gap)
         stack.grid = style["display"] as? String == "grid"
         stack.gridColumns = craftNativeGridColumnCount(style["gridTemplateColumns"] ?? style["gridColumns"])
         stack.gridAutoRows = CraftNativeLength(style["gridAutoRows"])
@@ -5388,14 +5718,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     }
 
     private func paddingInsets(_ style: [String: Any]) -> UIEdgeInsets {
-        let padding = number(style["padding"]) ?? 0
-        let horizontal = number(style["paddingHorizontal"]) ?? padding
-        let vertical = number(style["paddingVertical"]) ?? padding
+        func nonNegative(_ value: Any?) -> CGFloat? {
+            guard let value = number(value), value >= 0 else { return nil }
+            return value
+        }
+        let padding = nonNegative(style["padding"]) ?? 0
+        let horizontal = nonNegative(style["paddingHorizontal"]) ?? padding
+        let vertical = nonNegative(style["paddingVertical"]) ?? padding
         return UIEdgeInsets(
-            top: number(style["paddingTop"]) ?? vertical,
-            left: number(style["paddingLeft"]) ?? horizontal,
-            bottom: number(style["paddingBottom"]) ?? vertical,
-            right: number(style["paddingRight"]) ?? horizontal
+            top: nonNegative(style["paddingTop"]) ?? vertical,
+            left: nonNegative(style["paddingLeft"]) ?? horizontal,
+            bottom: nonNegative(style["paddingBottom"]) ?? vertical,
+            right: nonNegative(style["paddingRight"]) ?? horizontal
         )
     }
 
@@ -5655,6 +5989,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         imageSources[id] = uri
         imageErrors.removeValue(forKey: id)
         view.image = immediateImage(defaultSource).map { imageForDisplay($0, view: view) }
+        imageDidChange(view)
         view.accessibilityValue = nil
         emitImageEvent(view, handler: imageLoadStartHandlers[id])
 
@@ -5666,6 +6001,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 return
             }
             view.image = imageForDisplay(image, view: view)
+            imageDidChange(view)
             emitImageEvent(view, handler: imageLoadHandlers[id])
             emitImageEvent(view, handler: imageLoadEndHandlers[id])
             return
@@ -5681,6 +6017,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                         return
                     }
                     view.image = self.imageForDisplay(image, view: view)
+                    self.imageDidChange(view)
                     self.emitImageEvent(view, handler: self.imageLoadHandlers[ObjectIdentifier(view)])
                     self.emitImageEvent(view, handler: self.imageLoadEndHandlers[ObjectIdentifier(view)])
                 }
@@ -5695,6 +6032,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 return
             }
             view.image = imageForDisplay(image, view: view)
+            imageDidChange(view)
             emitImageEvent(view, handler: imageLoadHandlers[id])
             emitImageEvent(view, handler: imageLoadEndHandlers[id])
             return
@@ -5719,6 +6057,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private func imageFailure(_ view: UIImageView, uri: String?, message: String) {
         imageErrors[ObjectIdentifier(view)] = message
         view.image = nil
+        imageDidChange(view)
         view.accessibilityValue = message
         let id = ObjectIdentifier(view)
         emitImageEvent(view, handler: imageErrorHandlers[id], nativeEvent: ["error": ["message": message]])
@@ -5726,6 +6065,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         NSLog("[craft native] %@: %@", message, uri ?? "<missing>")
     }
 
+    private func imageDidChange(_ view: UIImageView) {
+        view.invalidateIntrinsicContentSize()
+        CraftNativeFlexLayout.invalidateAncestors(of: view)
+    }
+
     private func imageForDisplay(_ image: UIImage, view: UIImageView) -> UIImage {
         image.withRenderingMode(tintedImages.contains(ObjectIdentifier(view)) ? .alwaysTemplate : .alwaysOriginal)
     }
@@ -5749,7 +6093,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             view.accessibilityValue = nil
         }
         let role = props["accessibilityRole"] as? String
-        view.isAccessibilityElement = role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Link", "Checkbox", "Image", "ImageBackground", "Video", "TextInput", "Picker", "Switch", "Slider"].contains(type))
+        view.isAccessibilityElement = role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Link", "Checkbox", "Image", "ImageBackground", "Video", "TextInput", "Picker", "DatePicker", "Switch", "Slider"].contains(type))
         var traits: UIAccessibilityTraits = []
         switch role ?? type.lowercased() {
         case "button", "checkbox": traits.insert(.button)
@@ -5983,7 +6327,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// Countdown values use seconds when numeric, or `HH:mm[:ss]` text.
     static func countdownDuration(_ value: Any?) -> TimeInterval? {
         let maximum: TimeInterval = 23 * 3600 + 59 * 60 + 59
-        if let number = value as? NSNumber, !(value is Bool) { return min(maximum, max(0, number.doubleValue)) }
+        if let number = value as? NSNumber, !(value is Bool) {
+            let seconds = number.doubleValue
+            guard seconds.isFinite else { return nil }
+            return min(maximum, max(0, seconds))
+        }
         guard let text = (value as? String)?.trimmingCharacters(in: .whitespaces), !text.isEmpty else { return nil }
         if let seconds = Double(text), seconds.isFinite { return min(maximum, max(0, seconds)) }
         let parts = text.split(separator: ":")
@@ -5991,7 +6339,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
               let hours = Double(parts[0]),
               let minutes = Double(parts[1]) else { return nil }
         let seconds = parts.count == 3 ? (Double(parts[2]) ?? -1) : 0
-        guard hours >= 0, minutes >= 0, minutes < 60, seconds >= 0, seconds < 60 else { return nil }
+        guard hours.isFinite, minutes.isFinite, seconds.isFinite,
+              hours >= 0, minutes >= 0, minutes < 60, seconds >= 0, seconds < 60 else { return nil }
         return min(maximum, hours * 3600 + minutes * 60 + seconds)
     }
 
@@ -5999,7 +6348,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// time), `2026-10-12T07:30` (local), a full ISO 8601 string, or
     /// milliseconds since 1970. Nil for anything else.
     static func pickerDate(_ value: Any?) -> Date? {
-        if let number = value as? NSNumber, !(value is Bool) { return Date(timeIntervalSince1970: number.doubleValue / 1000) }
+        if let number = value as? NSNumber, !(value is Bool) {
+            let milliseconds = number.doubleValue
+            guard milliseconds.isFinite else { return nil }
+            return Date(timeIntervalSince1970: milliseconds / 1000)
+        }
         guard let text = (value as? String)?.trimmingCharacters(in: .whitespaces), !text.isEmpty else { return nil }
         let local = DateFormatter()
         local.locale = Locale(identifier: "en_US_POSIX")
@@ -6157,7 +6510,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     }
 
     private func number(_ value: Any?) -> CGFloat? {
-        (value as? NSNumber).map { CGFloat(truncating: $0) }
+        guard let number = value as? NSNumber else { return nil }
+        let value = CGFloat(truncating: number)
+        return value.isFinite ? value : nil
     }
 
     private func keyboardType(_ value: Any?) -> UIKeyboardType {