craft-native 0.0.156 → 0.0.160

package/dist/ios/templates/CraftNativeScreen.swift

@@ -182,11 +182,18 @@ private enum CraftNativeGridBridge {
     private typealias Function = @convention(c) (
         Float, Float, UInt32, Float, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer
     ) -> Int32
+    private typealias AutoRowsFunction = @convention(c) (
+        Float, Float, UInt32, Float, Float, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer
+    ) -> Int32
 
     private static let function: Function? = {
         guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid") else { return nil }
         return unsafeBitCast(symbol, to: Function.self)
     }()
+    private static let autoRowsFunction: AutoRowsFunction? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid_auto_rows") else { return nil }
+        return unsafeBitCast(symbol, to: AutoRowsFunction.self)
+    }()
 
     static func frames(
         availableWidth: CGFloat,
@@ -194,9 +201,12 @@ private enum CraftNativeGridBridge {
         columns: Int,
         columnGap: CGFloat,
         rowGap: CGFloat,
-        items: [(intrinsicWidth: CGFloat, intrinsicHeight: CGFloat, explicitWidth: CGFloat?, explicitHeight: CGFloat?, minWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, maxHeight: CGFloat?, marginLeft: CGFloat, marginRight: CGFloat, marginTop: CGFloat, marginBottom: CGFloat, stretch: Bool, alignment: UInt32)]
+        items: [(intrinsicWidth: CGFloat, intrinsicHeight: CGFloat, explicitWidth: CGFloat?, explicitHeight: CGFloat?, minWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, maxHeight: CGFloat?, marginLeft: CGFloat, marginRight: CGFloat, marginTop: CGFloat, marginBottom: CGFloat, stretch: Bool, alignment: UInt32)],
+        autoRowHeight: CGFloat? = nil
     ) -> [(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)]? {
-        guard let function, !items.isEmpty else { return nil }
+        guard !items.isEmpty else { return nil }
+        if autoRowHeight != nil, autoRowsFunction == nil { return nil }
+        if autoRowHeight == nil, function == nil { return nil }
         var input = items.map { item in
             Item(
                 intrinsicWidth: Float(item.intrinsicWidth), intrinsicHeight: Float(item.intrinsicHeight),
@@ -211,7 +221,11 @@ private enum CraftNativeGridBridge {
         var output = [Frame](repeating: Frame(x: 0, y: 0, width: 0, height: 0), count: input.count)
         let status = input.withUnsafeBufferPointer { inputBuffer in
             output.withUnsafeMutableBufferPointer { outputBuffer in
-                function(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
+                if let autoRowHeight, let autoRowsFunction {
+                    return autoRowsFunction(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), Float(autoRowHeight), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
+                }
+                guard let function else { return Int32(-1) }
+                return function(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
             }
         }
         guard status == 0, output.allSatisfy({ frame in
@@ -242,12 +256,20 @@ private final class CraftNativeVideoView: UIView {
         host.addChild(playerController)
         addSubview(playerController.view)
         playerController.didMove(toParent: host)
+        // Expose the host view as the native Video node. The player controller
+        // owns an accessibility subtree of its own, which otherwise masks the
+        // host's testID and makes the component look like a WebView-backed view
+        // to UI tests and assistive technology.
+        playerController.view.isAccessibilityElement = false
+        playerController.view.accessibilityElementsHidden = true
     }
 
     required init?(coder: NSCoder) {
         super.init(coder: coder)
         clipsToBounds = true
         addSubview(playerController.view)
+        playerController.view.isAccessibilityElement = false
+        playerController.view.accessibilityElementsHidden = true
     }
 
     override func layoutSubviews() {
@@ -381,7 +403,7 @@ struct CraftNativeScreen: UIViewControllerRepresentable {
 /// A length as a style gives it: points, or a percentage of the parent's
 /// content box. A percentage against a size that is not known yet (a column
 /// whose height comes from its content) resolves to nothing, as on the web.
-private enum CraftNativeLength {
+private enum CraftNativeLength: Equatable {
     case points(CGFloat)
     case percent(CGFloat)
 
@@ -435,7 +457,7 @@ private struct CraftNativeLayoutStyle {
     let marginLeft: CGFloat
     let display: String
     let gridColumns: Int
-    let gridAutoRows: CGFloat?
+    let gridAutoRows: CraftNativeLength?
 
     static let empty = CraftNativeLayoutStyle([:])
 
@@ -470,7 +492,7 @@ private struct CraftNativeLayoutStyle {
         marginLeft = number(raw["marginLeft"]) ?? horizontalMargin
         display = raw["display"] as? String ?? "flex"
         gridColumns = craftNativeGridColumnCount(raw["gridTemplateColumns"] ?? raw["gridColumns"])
-        gridAutoRows = number(raw["gridAutoRows"])
+        gridAutoRows = CraftNativeLength(raw["gridAutoRows"])
     }
 }
 
@@ -531,11 +553,15 @@ enum CraftNativeFlexLayout {
             // Text takes the width it needs up to the room there is, and
             // wraps or truncates inside it rather than widening its parent.
             let limit = width ?? maxWidth
-            let natural = label.sizeThatFits(CGSize(width: limit, height: unbounded))
-            let resolvedWidth = width ?? min(ceil(natural.width), limit)
-            let resolvedHeight = height ?? ceil(resolvedWidth < limit
+            // Ask for max-content before asking for the wrapped height. A
+            // constrained sizeThatFits call can return min-content (the
+            // longest word), which collapses shrink-to-fit bubbles and pills.
+            let maxContent = label.sizeThatFits(CGSize(width: unbounded, height: unbounded))
+            let resolvedWidth = width ?? min(ceil(maxContent.width), limit)
+            // Narrower than max-content (it met the limit): the wrapped height.
+            let resolvedHeight = height ?? ceil(resolvedWidth < ceil(maxContent.width)
                 ? label.sizeThatFits(CGSize(width: resolvedWidth, height: unbounded)).height
-                : natural.height)
+                : maxContent.height)
             return CGSize(width: resolvedWidth, height: resolvedHeight)
         case let image as UIImageView where image.image == nil:
             return CGSize(width: width ?? 0, height: height ?? 0)
@@ -583,7 +609,7 @@ enum CraftNativeFlexLayout {
 /// grid. It is a UIStackView in name only, so existing callers and tests keep
 /// `axis`, `alignment` and `arrangedSubviews`; the stack view's own
 /// constraints are never created, and every frame comes from `layout`.
-private final class CraftNativeFlowView: UIStackView {
+private class CraftNativeFlowView: UIStackView {
     var pressActiveOpacity: CGFloat?
     var pressBaseOpacity: CGFloat = 1
     var wrap = false { didSet { if wrap != oldValue { invalidateMeasurements() } } }
@@ -595,7 +621,7 @@ private final class CraftNativeFlowView: UIStackView {
     var columnGap: CGFloat? { didSet { if columnGap != oldValue { invalidateMeasurements() } } }
     var grid = false { didSet { if grid != oldValue { invalidateMeasurements() } } }
     var gridColumns = 1 { didSet { if gridColumns != oldValue { invalidateMeasurements() } } }
-    var gridAutoRows: CGFloat? { didSet { if gridAutoRows != oldValue { invalidateMeasurements() } } }
+    var gridAutoRows: CraftNativeLength? { didSet { if gridAutoRows != oldValue { invalidateMeasurements() } } }
     var reverse = false { didSet { if reverse != oldValue { invalidateMeasurements() } } }
     var padding = UIEdgeInsets.zero {
         didSet {
@@ -628,6 +654,36 @@ private final class CraftNativeFlowView: UIStackView {
 
     required init(coder: NSCoder) { super.init(coder: coder) }
 
+    /// A view made one accessibility element (a row with `accessibilityRole`)
+    /// hides its children from VoiceOver, so with no label of its own it reads
+    /// what they say, in order, as React Native's accessible View does. A
+    /// label given in props always wins.
+    override var accessibilityLabel: String? {
+        get {
+            if let own = super.accessibilityLabel, !own.isEmpty { return own }
+            guard isAccessibilityElement else { return nil }
+            // An avatar labelled with the name beside it is said once.
+            var spoken: [String] = []
+            for part in CraftNativeFlowView.spokenText(in: self) where !spoken.contains(part) { spoken.append(part) }
+            return spoken.isEmpty ? nil : spoken.joined(separator: ", ")
+        }
+        set { super.accessibilityLabel = newValue }
+    }
+
+    private static func spokenText(in view: UIView) -> [String] {
+        var parts: [String] = []
+        for child in view.subviews where !child.isHidden && child.alpha > 0.01 {
+            if child.isAccessibilityElement {
+                // A Text's label is its text (applyAccessibility leaves accessibilityLabel nil).
+                let said = child.accessibilityLabel ?? (child as? UILabel)?.text
+                if let label = said?.trimmingCharacters(in: .whitespacesAndNewlines), !label.isEmpty { parts.append(label) }
+            } else {
+                parts.append(contentsOf: spokenText(in: child))
+            }
+        }
+        return parts
+    }
+
     private var alignmentValue: UIStackView.Alignment {
         switch alignItems {
         case "flex-start": return .leading
@@ -853,7 +909,55 @@ private final class CraftNativeFlowView: UIStackView {
             return horizontal ? (size.width, size.height) : (size.height, size.width)
         }
 
-        var items: [Item] = children.map { view in
+        var items: [Item] = []
+
+        func fallbackWidths(for line: Range<Int>, available: CGFloat, gap: CGFloat) -> [CGFloat] {
+            let hypothetical = line.reduce(0) { $0 + items[$1].basis + items[$1].mainMargins } + CGFloat(max(0, line.count - 1)) * gap
+            let free = available - hypothetical
+            let growTotal = line.reduce(0) { $0 + items[$1].grow }
+            let shrinkTotal = line.reduce(0) { $0 + items[$1].shrink * items[$1].basis }
+            let growing = free > 0 && growTotal > 0
+            let shrinking = free < 0 && shrinkTotal > 0
+            var widths = line.map { items[$0].basis }
+            guard growing || shrinking else { return widths }
+
+            var frozen = Set<Int>()
+            for _ in 0...line.count {
+                var fixed = CGFloat(max(0, line.count - 1)) * gap
+                var activeBasis: CGFloat = 0
+                var factor: CGFloat = 0
+                for (offset, index) in line.enumerated() {
+                    let item = items[index]
+                    fixed += item.mainMargins
+                    if frozen.contains(offset) {
+                        fixed += widths[offset]
+                    } else {
+                        activeBasis += item.basis
+                        factor += growing ? item.grow : item.shrink * item.basis
+                    }
+                }
+                guard factor > 0 else { break }
+                let remaining = available - fixed - activeBasis
+                var froze = false
+                for (offset, index) in line.enumerated() where !frozen.contains(offset) {
+                    let item = items[index]
+                    let share = growing
+                        ? remaining * item.grow / factor
+                        : -remaining * item.shrink * item.basis / factor
+                    let raw = growing ? item.basis + share : item.basis - share
+                    let clamped = clamp(raw, item.minMain, item.maxMain)
+                    widths[offset] = clamped
+                    if abs(clamped - raw) > 0.0001 {
+                        frozen.insert(offset)
+                        froze = true
+                    }
+                }
+                if !froze { break }
+            }
+            return widths
+        }
+
+        items = children.map { view in
             let style = view.craftLayoutStyle
             let mainLeading = horizontal ? style.marginLeft : style.marginTop
             let mainTrailing = horizontal ? style.marginRight : style.marginBottom
@@ -971,22 +1075,8 @@ private final class CraftNativeFlowView: UIStackView {
             if let sharedWidths {
                 for (offset, index) in line.enumerated() { items[index].main = sharedWidths[offset].width }
             } else {
-                let free = lineMain - hypothetical
-                if free > 0 {
-                    let total = line.reduce(0) { $0 + items[$1].grow }
-                    for index in line {
-                        let share = total > 0 ? free * items[index].grow / total : 0
-                        items[index].main = clamp(items[index].basis + share, items[index].minMain, items[index].maxMain)
-                    }
-                } else if free < 0 {
-                    let total = line.reduce(0) { $0 + items[$1].shrink * items[$1].basis }
-                    for index in line {
-                        let share = total > 0 ? -free * items[index].shrink * items[index].basis / total : 0
-                        items[index].main = clamp(items[index].basis - share, items[index].minMain, items[index].maxMain)
-                    }
-                } else {
-                    for index in line { items[index].main = items[index].basis }
-                }
+                let fallback = fallbackWidths(for: line, available: lineMain, gap: mainGap)
+                for (offset, index) in line.enumerated() { items[index].main = fallback[offset] }
             }
 
             var lineCross: CGFloat = 0
@@ -1162,11 +1252,13 @@ private final class CraftNativeFlowView: UIStackView {
             )
             sizes.append(size)
             let row = index / columns
-            while rowHeights.count <= row { rowHeights.append(gridAutoRows ?? 0) }
+            while rowHeights.count <= row { rowHeights.append(gridAutoRows?.resolve(innerHeight) ?? 0) }
             rowHeights[row] = max(rowHeights[row], size.height + style.marginTop + style.marginBottom)
         }
         let width = innerWidth ?? (CGFloat(columns) * cellWidth + gaps)
         let height = rowHeights.reduce(0, +) + CGFloat(max(0, rowHeights.count - 1)) * verticalGap
+        // Older runtimes return nil for the optional symbol; the local layout
+        // below remains the compatibility path in that case.
         let sharedFrames = CraftNativeGridBridge.frames(
             availableWidth: innerWidth ?? width,
             availableHeight: innerHeight ?? height,
@@ -1186,7 +1278,8 @@ private final class CraftNativeFlowView: UIStackView {
                     style.marginLeft, style.marginRight, style.marginTop, style.marginBottom,
                     align == "stretch", alignment
                 )
-            }
+            },
+            autoRowHeight: gridAutoRows.map { $0.resolve(innerHeight) ?? 0 }
         )
         if place {
             if let sharedFrames {
@@ -1220,6 +1313,95 @@ private final class CraftNativeFlowView: UIStackView {
     }
 }
 
+/// 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.
+private final class CraftNativeKeyboardAvoidingView: CraftNativeFlowView {
+    private var authoredPadding = UIEdgeInsets.zero
+    private var keyboardInset: CGFloat = 0
+    private var keyboardVerticalOffset: CGFloat = 0
+    private var keyboardBehavior = "padding"
+    private var appliedHeightInset: CGFloat = 0
+    private var adjustingHeight = false
+
+    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
+        if keyboardBehavior != "height" { appliedHeightInset = 0 }
+        authoredPadding = padding
+        applyKeyboardAvoidance()
+    }
+
+    func setKeyboardInset(_ inset: CGFloat) {
+        guard abs(keyboardInset - inset) > 0.5 else { return }
+        keyboardInset = max(0, inset)
+        applyKeyboardAvoidance()
+    }
+
+    private var effectiveInset: CGFloat { max(0, keyboardInset - keyboardVerticalOffset) }
+
+    private func applyKeyboardAvoidance() {
+        let inset = effectiveInset
+        switch keyboardBehavior {
+        case "position":
+            transform = CGAffineTransform(translationX: 0, y: -inset)
+            padding = authoredPadding
+        case "height":
+            transform = .identity
+            padding = authoredPadding
+        default:
+            transform = .identity
+            padding = UIEdgeInsets(
+                top: authoredPadding.top,
+                left: authoredPadding.left,
+                bottom: authoredPadding.bottom + inset,
+                right: authoredPadding.right
+            )
+        }
+        invalidateMeasurements()
+    }
+
+    override func layoutSubviews() {
+        if keyboardBehavior == "height", !adjustingHeight {
+            let inset = effectiveInset
+            let target = max(0, bounds.height + appliedHeightInset - inset)
+            if abs(target - bounds.height) > 0.5 {
+                adjustingHeight = true
+                appliedHeightInset = inset
+                bounds.size.height = target
+                super.layoutSubviews()
+                adjustingHeight = false
+                return
+            }
+        }
+        super.layoutSubviews()
+    }
+}
+
+/// An image-backed flex container. The image stays behind ordinary native
+/// children so `ImageBackground` keeps the same layout and interaction
+/// semantics as a `View` while using the shared image loader.
+private final class CraftNativeImageBackgroundView: UIImageView {
+    let contentStack = CraftNativeFlowView()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        isUserInteractionEnabled = true
+        contentMode = .scaleAspectFill
+        clipsToBounds = true
+        contentStack.backgroundColor = .clear
+        addSubview(contentStack)
+    }
+
+    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        contentStack.frame = bounds
+    }
+}
+
 private final class CraftNativeModalView: UIView {
     let contentStack = CraftNativeFlowView()
     private let blocker = UIView()
@@ -1876,6 +2058,13 @@ private final class CraftNativeButton: UIButton {
     }
 }
 
+/// A native checkbox button. UIKit has no checkbox control, so use the system
+/// square/checkmark symbols while keeping the control's title and accessibility
+/// state native and keyboard/touch reachable.
+private final class CraftNativeCheckboxButton: UIButton {
+    var indeterminate = false
+}
+
 private final class CraftNativeLabel: UILabel {
     var insets = UIEdgeInsets.zero {
         didSet {
@@ -2052,6 +2241,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private var imageSources: [ObjectIdentifier: String] = [:]
     private var imageTasks: [ObjectIdentifier: URLSessionDataTask] = [:]
     private var imageErrors: [ObjectIdentifier: String] = [:]
+    private var checkboxIndeterminate: [ObjectIdentifier: Bool] = [:]
     private var tintedImages = Set<ObjectIdentifier>()
     private var imageLoadStartHandlers: [ObjectIdentifier: String] = [:]
     private var imageLoadHandlers: [ObjectIdentifier: String] = [:]
@@ -2186,7 +2376,14 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     override func viewDidDisappear(_ animated: Bool) {
         super.viewDidDisappear(animated)
-        if isMovingFromParent || navigationController?.viewControllers.contains(where: { $0 === self }) == false {
+        // Gone for good only when its stack no longer holds it. UIKit's
+        // `isMovingFromParent` is no witness: a tab's first screen covered
+        // by a push while its own first appearance was still settling (an
+        // app script opening the sign-in screen at launch) reports it true
+        // while still the root of its stack, and the screen's script was
+        // torn down under it, frozen on whatever it showed then.
+        let inStack = navigationController?.viewControllers.contains(where: { $0 === self }) ?? false
+        if !inStack {
             disposeRuntime()
         } else {
             screenVisibilityChanged(false)
@@ -2960,12 +3157,14 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
         let duration = (notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? NSNumber)?.doubleValue ?? 0.25
         let curve = (notification.userInfo?[UIResponder.keyboardAnimationCurveUserInfoKey] as? NSNumber)?.uintValue ?? 7
-        let changed = abs(inset - keyboardSafeAreaInset) > 0.5
+        let globalInset = containsKeyboardAvoidingView() ? 0 : inset
+        let safeAreaChanged = abs(additionalSafeAreaInsets.bottom - globalInset) > 0.5
         keyboardSafeAreaInset = inset
         keyboardScreenFrame = keyboardFrame
+        updateKeyboardAvoidingViews()
         UIView.animate(withDuration: duration, delay: 0, options: UIView.AnimationOptions(rawValue: UInt(curve << 16))) {
-            if changed {
-                self.additionalSafeAreaInsets.bottom = inset
+            if safeAreaChanged {
+                self.additionalSafeAreaInsets.bottom = globalInset
                 self.view.layoutIfNeeded()
             }
             self.insetScrollViewsForKeyboard()
@@ -2973,6 +3172,33 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    private func updateKeyboardAvoidingViews() {
+        func visit(_ node: RenderedNode?) {
+            guard let node else { return }
+            if let keyboard = node.view as? CraftNativeKeyboardAvoidingView {
+                keyboard.setKeyboardInset(keyboardSafeAreaInset)
+            }
+            node.children.forEach(visit)
+        }
+        visit(renderedRoot)
+    }
+
+    private func containsKeyboardAvoidingView() -> Bool {
+        func visit(_ node: RenderedNode?) -> Bool {
+            guard let node else { return false }
+            if node.view is CraftNativeKeyboardAvoidingView { return true }
+            return node.children.contains(where: visit)
+        }
+        return visit(renderedRoot)
+    }
+
+    private func syncGlobalKeyboardSafeArea() {
+        let globalInset = containsKeyboardAvoidingView() ? 0 : keyboardSafeAreaInset
+        guard abs(additionalSafeAreaInsets.bottom - globalInset) > 0.5 else { return }
+        additionalSafeAreaInsets.bottom = globalInset
+        view.setNeedsLayout()
+    }
+
     /// A scroll view the keyboard still covers part of (one that does not end
     /// at the screen's bottom edge, or a keyboard taller than the safe area
     /// took account of) insets its content by that much, so everything in it
@@ -3311,6 +3537,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         rootStack.setLayoutStyle(rootStyle, for: next.view)
         rootStack.invalidateMeasurements()
         renderedRoot = next
+        updateKeyboardAvoidingViews()
+        syncGlobalKeyboardSafeArea()
         trackContentScrollView()
         restoreFocus(focused)
     }
@@ -3318,6 +3546,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private func clearRenderedTree() {
         if let root = renderedRoot { detach(root, from: rootStack) }
         renderedRoot = nil
+        syncGlobalKeyboardSafeArea()
     }
 
     private func firstResponder(in view: UIView) -> UIView? {
@@ -3334,7 +3563,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     }
 
     private func reconcile(_ node: [String: Any], identity: String, path: String, previous: RenderedNode?) -> RenderedNode {
-        let type = node["type"] as? String ?? "View"
+        let type = canonicalType(node["type"] as? String ?? "View")
         let props = node["props"] as? [String: Any] ?? [:]
         let style = node["style"] as? [String: Any] ?? [:]
         let events = node["events"] as? [String: String] ?? [:]
@@ -3352,7 +3581,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         current.protocolId = node["id"] as? String
         current.style = style
         result.accessibilityIdentifier = accessibilityIdentifier(node, props: props) ?? path
-        if type != "View" && type != "SafeAreaView" && type != "ScrollView" && type != "FlatList" && type != "Modal" {
+        if type != "View" && type != "SafeAreaView" && type != "KeyboardAvoidingView" && type != "ScrollView" && type != "FlatList" && type != "Modal" {
             result.setContentHuggingPriority(.required, for: .vertical)
         }
         applyViewStyle(style, to: result, node: current)
@@ -3384,6 +3613,29 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             (button as? CraftNativeButton)?.padding = paddingInsets(style)
             button.isEnabled = props["disabled"] as? Bool != true
             updateHandler(nonEmptyHandler(events["onPress"]) ?? nonEmptyHandler(events["onClick"]), for: button)
+        case "Checkbox":
+            let checkbox = result as! CraftNativeCheckboxButton
+            let label = props["label"] as? String ?? children.compactMap { $0 as? String }.joined()
+            let transformedLabel = transformedText(label, style: style)
+            let checked = (props["checked"] as? Bool) ?? (props["value"] as? Bool) ?? false
+            let indeterminate = props["indeterminate"] as? Bool == true
+            checkbox.isSelected = checked
+            checkbox.indeterminate = indeterminate
+            checkboxIndeterminate[ObjectIdentifier(checkbox)] = indeterminate
+            checkbox.setTitle(transformedLabel, for: .normal)
+            checkbox.setAttributedTitle(NSAttributedString(
+                string: transformedLabel,
+                attributes: buttonTitleAttributes(style, color: color(props["color"]) ?? color(style["color"]) ?? .label, font: textFont(style, default: .systemFont(ofSize: 16)), forceUnderline: false)
+            ), for: .normal)
+            let uncheckedImage = UIImage(systemName: indeterminate ? "minus.square" : "square")
+            checkbox.setImage(uncheckedImage, for: .normal)
+            checkbox.setImage(
+                UIImage(systemName: indeterminate ? "minus.square" : "checkmark.square.fill"),
+                for: .selected
+            )
+            checkbox.tintColor = color(props["color"]) ?? color(style["color"]) ?? .systemBlue
+            checkbox.isEnabled = props["disabled"] as? Bool != true
+            updateHandler(nonEmptyHandler(events["onValueChange"]) ?? nonEmptyHandler(events["onChange"]), for: checkbox)
         case "TextInput":
             if let textView = result as? UITextView {
                 inputIdentities[ObjectIdentifier(textView)] = current.identity
@@ -3483,7 +3735,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             picker.minuteInterval = (1...30).contains(interval) && 60 % interval == 0 ? interval : 1
             picker.minimumDate = Self.pickerDate(props["minimumDate"])
             picker.maximumDate = Self.pickerDate(props["maximumDate"])
-            if let date = Self.pickerDate(props["value"]), abs(picker.date.timeIntervalSince(date)) >= 1 {
+            if mode == .countDownTimer {
+                if let duration = Self.countdownDuration(props["value"]), abs(picker.countDownDuration - duration) >= 1 {
+                    picker.countDownDuration = duration
+                }
+            } else if let date = Self.pickerDate(props["value"]), abs(picker.date.timeIntervalSince(date)) >= 1 {
                 picker.setDate(date, animated: false)
             }
             picker.tintColor = color(props["color"]) ?? color(style["color"])
@@ -3604,6 +3860,23 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             updateAuxiliaryHandler(events["onLoadEnd"], in: &imageLoadEndHandlers, for: image)
             updateAuxiliaryHandler(events["onError"], in: &imageErrorHandlers, for: image)
             updateImage(image, source: props["source"])
+        case "ImageBackground":
+            let background = result as! CraftNativeImageBackgroundView
+            let requestedResizeMode = style["resizeMode"] as? String ?? props["resizeMode"] as? String
+            background.contentMode = imageContentMode(requestedResizeMode)
+            background.clipsToBounds = background.contentMode == .scaleAspectFill
+            updateAuxiliaryHandler(events["onLoadStart"], in: &imageLoadStartHandlers, for: background)
+            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"])
+            configureStack(background.contentStack, style: style)
+            reconcileChildren(children, in: background.contentStack, parent: current, path: path, style: style)
+        case "KeyboardAvoidingView":
+            let keyboard = result as! CraftNativeKeyboardAvoidingView
+            configureStack(keyboard, style: style)
+            keyboard.configureKeyboard(props: props)
+            reconcileChildren(children, in: keyboard, parent: current, path: path, style: style)
         case "Video":
             let video = result as! CraftNativeVideoView
             let autoplay = (props["autoplay"] as? Bool) == true || (props["autoPlay"] as? Bool) == true
@@ -3670,7 +3943,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 != "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" {
             let disabled = props["disabled"] as? Bool == true
             updatePressHandler(disabled ? nil : nonEmptyHandler(events["onPress"]) ?? nonEmptyHandler(events["onClick"]), for: result)
             updatePressFeedback(
@@ -3694,6 +3967,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             let button = CraftNativeButton(type: .system)
             button.addTarget(self, action: #selector(buttonPressed(_:)), for: .touchUpInside)
             return button
+        case "Checkbox":
+            let checkbox = CraftNativeCheckboxButton(type: .system)
+            checkbox.semanticContentAttribute = .forceLeftToRight
+            checkbox.contentHorizontalAlignment = .leading
+            checkbox.addTarget(self, action: #selector(checkboxPressed(_:)), for: .touchUpInside)
+            return checkbox
         case "TextInput":
             if props["multiline"] as? Bool == true {
                 let textView = CraftNativeTextView()
@@ -3731,6 +4010,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             return UIActivityIndicatorView(style: .medium)
         case "Image":
             return UIImageView()
+        case "ImageBackground":
+            return CraftNativeImageBackgroundView(frame: .zero)
+        case "KeyboardAvoidingView":
+            return CraftNativeKeyboardAvoidingView()
         case "Video":
             return CraftNativeVideoView(host: self)
         case "Icon":
@@ -3752,12 +4035,47 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    private func canonicalType(_ raw: String) -> String {
+        switch raw.lowercased() {
+        case "view": return "View"
+        case "safeareaview": return "SafeAreaView"
+        case "keyboardavoidingview": return "KeyboardAvoidingView"
+        case "text": return "Text"
+        case "button": return "Button"
+        case "link": return "Link"
+        case "checkbox": return "Checkbox"
+        case "textinput", "input": return "TextInput"
+        case "picker", "select": return "Picker"
+        case "modal": return "Modal"
+        case "switch": return "Switch"
+        case "slider": return "Slider"
+        case "activityindicator": return "ActivityIndicator"
+        case "image": return "Image"
+        case "imagebackground": return "ImageBackground"
+        case "video": return "Video"
+        case "icon": return "Icon"
+        case "scrollview": return "ScrollView"
+        case "flatlist": return "FlatList"
+        case "svg": return "Svg"
+        case "touchableopacity": return "TouchableOpacity"
+        case "touchablehighlight": return "TouchableHighlight"
+        case "pressable": return "Pressable"
+        default: return raw
+        }
+    }
+
     private func explicitKey(_ node: [String: Any], props: [String: Any]) -> String? {
         // The current @stacksjs/stx native compiler emits key in props; accept the IR
         // field too so keyed children keep working when the compiler adopts it.
-        [node["key"], props["key"], props["testID"], node["id"]]
+        let direct = [node["key"], props["key"], props["testID"]]
             .compactMap { $0 as? String }
             .first { !$0.isEmpty }
+        if let direct { return direct }
+        for child in node["children"] as? [[String: Any]] ?? [] {
+            let childProps = child["props"] as? [String: Any] ?? [:]
+            if let nested = explicitKey(child, props: childProps) { return nested }
+        }
+        return (node["id"] as? String).flatMap { $0.isEmpty ? nil : $0 }
     }
 
     private func accessibilityIdentifier(_ node: [String: Any], props: [String: Any]) -> String? {
@@ -3976,6 +4294,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         imageLoadHandlers.removeValue(forKey: id)
         imageLoadEndHandlers.removeValue(forKey: id)
         imageErrorHandlers.removeValue(forKey: id)
+        checkboxIndeterminate.removeValue(forKey: id)
         if let video = node.view as? CraftNativeVideoView { video.stop() }
         for child in node.children { forgetHandlers(child, preservingInputDrafts: preservingInputDrafts) }
     }
@@ -4241,7 +4560,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         stack.columnGap = number(style["columnGap"]) ?? gap
         stack.grid = style["display"] as? String == "grid"
         stack.gridColumns = craftNativeGridColumnCount(style["gridTemplateColumns"] ?? style["gridColumns"])
-        stack.gridAutoRows = number(style["gridAutoRows"])
+        stack.gridAutoRows = CraftNativeLength(style["gridAutoRows"])
         stack.padding = paddingInsets(style)
         stack.invalidateMeasurements()
     }
@@ -4565,7 +4884,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     private func applyAccessibility(_ props: [String: Any], type: String, to view: UIView) {
         view.accessibilityLabel = (props["accessibilityLabel"] as? String)
-            ?? (type == "Image" ? props["alt"] as? String : nil)
+            ?? ((type == "Image" || type == "ImageBackground") ? props["alt"] as? String : nil)
         view.accessibilityHint = props["accessibilityHint"] as? String
         if let value = props["accessibilityValue"] {
             view.accessibilityValue = (value as? String) ?? (value as? NSNumber)?.stringValue
@@ -4573,10 +4892,10 @@ 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", "Image", "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", "Switch", "Slider"].contains(type))
         var traits: UIAccessibilityTraits = []
         switch role ?? type.lowercased() {
-        case "button": traits.insert(.button)
+        case "button", "checkbox": traits.insert(.button)
         case "image": traits.insert(.image)
         case "header": traits.insert(.header)
         case "link": traits.insert(.link)
@@ -4596,7 +4915,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             if state["checked"] as? Bool == true { traits.insert(.selected) }
         }
         if let control = view as? UIControl, !control.isEnabled { traits.insert(.notEnabled) }
-        if type == "Image", let message = imageErrors[ObjectIdentifier(view)] {
+        if type == "Checkbox", let checkbox = view as? CraftNativeCheckboxButton {
+            if checkbox.isSelected { traits.insert(.selected) }
+            view.accessibilityValue = checkbox.indeterminate ? "mixed" : checkbox.isSelected ? "checked" : "unchecked"
+        }
+        if (type == "Image" || type == "ImageBackground"), let message = imageErrors[ObjectIdentifier(view)] {
             let current = view.accessibilityValue
             if current?.contains(message) != true {
                 view.accessibilityValue = [current, message].compactMap { $0 }.joined(separator: ", ")
@@ -4631,6 +4954,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    @objc private func checkboxPressed(_ sender: CraftNativeCheckboxButton) {
+        sender.indeterminate = false
+        checkboxIndeterminate[ObjectIdentifier(sender)] = false
+        sender.isSelected.toggle()
+        if let handler = handlers[ObjectIdentifier(sender)] {
+            send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": sender.isSelected]])
+        }
+        applyAccessibility([:], type: "Checkbox", to: sender)
+    }
+
     /// Return on a `returnKeyType="next"` field the screen does not handle
     /// itself (no `@submit`) goes to the next field down the screen, keeping
     /// the keyboard up. Every other Return ends editing and fires `@submit`.
@@ -4730,7 +5063,24 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// milliseconds for code that wants those.
     @objc private func datePicked(_ sender: UIDatePicker) {
         guard let handler = handlers[ObjectIdentifier(sender)] else { return }
-        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": Self.datePickerEvent(sender.date, mode: sender.datePickerMode)])
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": Self.datePickerEvent(sender)])
+    }
+
+    static func datePickerEvent(_ picker: UIDatePicker) -> [String: Any] {
+        if picker.datePickerMode == .countDownTimer { return countdownEvent(picker.countDownDuration) }
+        return datePickerEvent(picker.date, mode: picker.datePickerMode)
+    }
+
+    static func countdownEvent(_ duration: TimeInterval) -> [String: Any] {
+        let totalSeconds = max(0, Int(duration.rounded()))
+        let hours = totalSeconds / 3600
+        let minutes = (totalSeconds % 3600) / 60
+        let seconds = totalSeconds % 60
+        return [
+            "value": String(format: "%02d:%02d:%02d", hours, minutes, seconds),
+            "iso": "PT\(totalSeconds)S",
+            "timestamp": Double(totalSeconds * 1000),
+        ]
     }
 
     static func datePickerEvent(_ date: Date, mode: UIDatePicker.Mode) -> [String: Any] {
@@ -4757,6 +5107,21 @@ 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)) }
+        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: ":").compactMap { Double($0) }
+        guard parts.count == 2 || parts.count == 3 else { return nil }
+        let hours = parts[0]
+        let minutes = parts[1]
+        let seconds = parts.count == 3 ? parts[2] : 0
+        guard hours >= 0, minutes >= 0, minutes < 60, seconds >= 0, seconds < 60 else { return nil }
+        return min(maximum, hours * 3600 + minutes * 60 + seconds)
+    }
+
     /// A DatePicker's value: `2026-10-12` (that day), `07:30` (today at that
     /// time), `2026-10-12T07:30` (local), a full ISO 8601 string, or
     /// milliseconds since 1970. Nil for anything else.