craft-native 0.0.120 → 0.0.121

package/dist/ios/templates/CraftNativeScreen.swift

@@ -18,16 +18,225 @@ struct CraftNativeScreen: UIViewControllerRepresentable {
     func updateUIViewController(_ controller: UINavigationController, context: Context) {}
 }
 
+private struct CraftNativeLayoutStyle {
+    let width: CGFloat?
+    let height: CGFloat?
+    let minWidth: CGFloat?
+    let maxWidth: CGFloat?
+    let minHeight: CGFloat?
+    let maxHeight: CGFloat?
+    let position: String
+    let top: CGFloat?
+    let right: CGFloat?
+    let bottom: CGFloat?
+    let left: CGFloat?
+    let alignSelf: String?
+
+    init(_ raw: [String: Any]) {
+        func number(_ value: Any?) -> CGFloat? { (value as? NSNumber).map { CGFloat(truncating: $0) } }
+        width = number(raw["width"])
+        height = number(raw["height"])
+        minWidth = number(raw["minWidth"])
+        maxWidth = number(raw["maxWidth"])
+        minHeight = number(raw["minHeight"])
+        maxHeight = number(raw["maxHeight"])
+        position = raw["position"] as? String ?? "relative"
+        top = number(raw["top"])
+        right = number(raw["right"])
+        bottom = number(raw["bottom"])
+        left = number(raw["left"])
+        alignSelf = raw["alignSelf"] as? String
+    }
+}
+
+private final class CraftNativeFlowView: UIStackView {
+    var wrap = false { didSet { invalidateIntrinsicContentSize(); setNeedsLayout() } }
+    var alignItems = "stretch" { didSet { alignment = alignmentValue; setNeedsLayout() } }
+    var justifyContent = "flex-start" { didSet { distribution = distributionValue; setNeedsLayout() } }
+    var gap: CGFloat = 0 { didSet { spacing = gap; invalidateIntrinsicContentSize(); setNeedsLayout() } }
+    var rowGap: CGFloat? { didSet { invalidateIntrinsicContentSize(); setNeedsLayout() } }
+    var columnGap: CGFloat? { didSet { invalidateIntrinsicContentSize(); setNeedsLayout() } }
+    var padding = UIEdgeInsets.zero {
+        didSet {
+            layoutMargins = padding
+            isLayoutMarginsRelativeArrangement = true
+            invalidateIntrinsicContentSize()
+            setNeedsLayout()
+        }
+    }
+    private var childStyles: [ObjectIdentifier: CraftNativeLayoutStyle] = [:]
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        alignment = .fill
+        distribution = .fill
+        isLayoutMarginsRelativeArrangement = true
+    }
+
+    required init(coder: NSCoder) { super.init(coder: coder) }
+
+    private var alignmentValue: UIStackView.Alignment {
+        switch alignItems {
+        case "flex-start": return .leading
+        case "center": return .center
+        case "flex-end": return .trailing
+        case "baseline": return .firstBaseline
+        default: return .fill
+        }
+    }
+
+    private var distributionValue: UIStackView.Distribution {
+        switch justifyContent {
+        case "center": return .equalCentering
+        case "space-between", "space-around", "space-evenly": return .equalSpacing
+        default: return .fill
+        }
+    }
+
+    func setLayoutStyle(_ raw: [String: Any], for view: UIView) {
+        childStyles[ObjectIdentifier(view)] = CraftNativeLayoutStyle(raw)
+        invalidateIntrinsicContentSize()
+        setNeedsLayout()
+    }
+
+    func removeLayoutStyle(for view: UIView) { childStyles.removeValue(forKey: ObjectIdentifier(view)) }
+
+    override func didAddSubview(_ subview: UIView) {
+        super.didAddSubview(subview)
+        setNeedsLayout()
+    }
+
+    override func willRemoveSubview(_ subview: UIView) {
+        childStyles.removeValue(forKey: ObjectIdentifier(subview))
+        super.willRemoveSubview(subview)
+    }
+
+    override var intrinsicContentSize: CGSize {
+        let children = subviews.filter { !$0.isHidden && !($0 is CraftNativeFlexSpacer) }
+        guard !children.isEmpty else { return CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric) }
+        let sizes = children.map { measuredSize(for: $0, available: CGSize(width: 10_000, height: 10_000)) }
+        let main = sizes.map { axis == .horizontal ? $0.width : $0.height }.reduce(0, +)
+        let cross = sizes.map { axis == .horizontal ? $0.height : $0.width }.max() ?? 0
+        let mainGap = max(0, CGFloat(max(0, children.count - 1))) * mainGapValue
+        if axis == .horizontal {
+            return CGSize(width: padding.left + padding.right + main + mainGap, height: padding.top + padding.bottom + cross)
+        }
+        return CGSize(width: padding.left + padding.right + cross, height: padding.top + padding.bottom + main + mainGap)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        let content = bounds.inset(by: padding)
+        let availableMain = axis == .horizontal ? content.width : content.height
+        var lines: [([UIView], [CGSize], CGFloat, CGFloat)] = []
+        var items: [UIView] = []
+        var sizes: [CGSize] = []
+        var main: CGFloat = 0
+        var cross: CGFloat = 0
+
+        func flush() {
+            guard !items.isEmpty else { return }
+            lines.append((items, sizes, main, cross))
+            items = []; sizes = []; main = 0; cross = 0
+        }
+
+        for child in subviews where !child.isHidden && !(child is CraftNativeFlexSpacer) {
+            let style = childStyles[ObjectIdentifier(child)] ?? CraftNativeLayoutStyle([:])
+            if style.position == "absolute" { continue }
+            let size = measuredSize(for: child, available: content.size, style: style)
+            let childMain = axis == .horizontal ? size.width : size.height
+            let childCross = axis == .horizontal ? size.height : size.width
+            let next = items.isEmpty ? childMain : main + mainGapValue + childMain
+            if wrap && !items.isEmpty && next > availableMain { flush() }
+            items.append(child); sizes.append(size)
+            main = items.count == 1 ? childMain : main + mainGapValue + childMain
+            cross = max(cross, childCross)
+        }
+        flush()
+
+        var crossOffset: CGFloat = 0
+        for (lineItems, lineSizes, lineMain, lineCross) in lines {
+            let free = max(0, availableMain - lineMain)
+            let (leading, between) = distribution(free: free, count: lineItems.count)
+            var mainOffset = leading
+            for (index, child) in lineItems.enumerated() {
+                let style = childStyles[ObjectIdentifier(child)] ?? CraftNativeLayoutStyle([:])
+                let size = lineSizes[index]
+                let childCross = axis == .horizontal ? size.height : size.width
+                let alignment = style.alignSelf ?? alignItems
+                let crossSize: CGFloat = alignment == "stretch" && styleCrossDimension(style) == nil ? lineCross : childCross
+                let crossPosition: CGFloat
+                switch alignment {
+                case "center": crossPosition = (lineCross - crossSize) / 2
+                case "flex-end": crossPosition = lineCross - crossSize
+                default: crossPosition = 0
+                }
+                let frame: CGRect
+                if axis == .horizontal {
+                    frame = CGRect(x: content.minX + mainOffset, y: content.minY + crossOffset + crossPosition, width: size.width, height: crossSize)
+                } else {
+                    frame = CGRect(x: content.minX + crossOffset + crossPosition, y: content.minY + mainOffset, width: crossSize, height: size.height)
+                }
+                child.frame = frame.integral
+                mainOffset += (axis == .horizontal ? size.width : size.height) + mainGapValue + between
+            }
+            crossOffset += lineCross + crossGapValue
+        }
+
+        for child in subviews where !child.isHidden && !(child is CraftNativeFlexSpacer) {
+            let style = childStyles[ObjectIdentifier(child)] ?? CraftNativeLayoutStyle([:])
+            guard style.position == "absolute" else { continue }
+            let size = measuredSize(for: child, available: content.size, style: style)
+            let width = style.left != nil && style.right != nil ? max(0, content.width - (style.left ?? 0) - (style.right ?? 0)) : size.width
+            let height = style.top != nil && style.bottom != nil ? max(0, content.height - (style.top ?? 0) - (style.bottom ?? 0)) : size.height
+            let x = style.left ?? (style.right.map { content.width - $0 - width } ?? 0)
+            let y = style.top ?? (style.bottom.map { content.height - $0 - height } ?? 0)
+            child.frame = CGRect(x: content.minX + x, y: content.minY + y, width: width, height: height).integral
+        }
+    }
+
+    private var mainGapValue: CGFloat { axis == .horizontal ? (columnGap ?? gap) : (rowGap ?? gap) }
+    private var crossGapValue: CGFloat { axis == .horizontal ? (rowGap ?? 0) : (columnGap ?? 0) }
+
+    private func styleCrossDimension(_ style: CraftNativeLayoutStyle) -> CGFloat? {
+        axis == .horizontal ? style.height : style.width
+    }
+
+    private func measuredSize(for view: UIView, available: CGSize, style: CraftNativeLayoutStyle? = nil) -> CGSize {
+        let style = style ?? childStyles[ObjectIdentifier(view)] ?? CraftNativeLayoutStyle([:])
+        let intrinsic = view.intrinsicContentSize
+        let fitted = view.sizeThatFits(available)
+        let width = style.width ?? (intrinsic.width > 0 && intrinsic.width != UIView.noIntrinsicMetric ? intrinsic.width : max(0, fitted.width))
+        let height = style.height ?? (intrinsic.height > 0 && intrinsic.height != UIView.noIntrinsicMetric ? intrinsic.height : max(0, fitted.height))
+        return CGSize(width: clamp(width, min: style.minWidth, max: style.maxWidth), height: clamp(height, min: style.minHeight, max: style.maxHeight))
+    }
+
+    private func clamp(_ value: CGFloat, min lower: CGFloat?, max upper: CGFloat?) -> CGFloat {
+        var result = value
+        if let lower { result = max(result, lower) }
+        if let upper { result = min(result, upper) }
+        return result
+    }
+
+    private func distribution(free: CGFloat, count: Int) -> (CGFloat, CGFloat) {
+        guard count > 0 else { return (0, 0) }
+        switch justifyContent {
+        case "center": return (free / 2, 0)
+        case "flex-end": return (free, 0)
+        case "space-between": return (0, count > 1 ? free / CGFloat(count - 1) : 0)
+        case "space-around": return (free / CGFloat(count * 2), free / CGFloat(count))
+        case "space-evenly": return (free / CGFloat(count + 1), free / CGFloat(count + 1))
+        default: return (0, 0)
+        }
+    }
+}
+
 private final class CraftNativeScrollView: UIScrollView {
-    let contentStack = UIStackView()
+    let contentStack = CraftNativeFlowView()
     private var crossAxisConstraint: NSLayoutConstraint?
 
     override init(frame: CGRect) {
         super.init(frame: frame)
-        contentStack.axis = .vertical
-        contentStack.alignment = .fill
-        contentStack.distribution = .fill
-        contentStack.isLayoutMarginsRelativeArrangement = true
         contentStack.translatesAutoresizingMaskIntoConstraints = false
         addSubview(contentStack)
         NSLayoutConstraint.activate([
@@ -55,12 +264,13 @@ private final class CraftNativeScrollView: UIScrollView {
 
 private final class CraftNativeFlexSpacer: UIView {}
 
-final class CraftNativeScreenController: UIViewController {
+final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate {
     private final class RenderedNode {
         let identity: String
         let type: String
         let view: UIView
         var protocolId: String?
+        var style: [String: Any] = [:]
         var children: [RenderedNode] = []
         var widthConstraint: NSLayoutConstraint?
         var heightConstraint: NSLayoutConstraint?
@@ -76,12 +286,19 @@ final class CraftNativeScreenController: UIViewController {
     private let routeName: String?
     private let routeParams: [String: Any]
     private let jsContext = JSContext()!
-    private let rootStack = UIStackView()
+    private let rootStack = CraftNativeFlowView()
     private var handlers: [ObjectIdentifier: String] = [:]
+    private var focusHandlers: [ObjectIdentifier: String] = [:]
+    private var blurHandlers: [ObjectIdentifier: String] = [:]
+    private var submitHandlers: [ObjectIdentifier: String] = [:]
+    private var scrollHandlers: [ObjectIdentifier: String] = [:]
+    private var scrollBeginHandlers: [ObjectIdentifier: String] = [:]
+    private var scrollEndHandlers: [ObjectIdentifier: String] = [:]
     private var tapRecognizers: [ObjectIdentifier: UITapGestureRecognizer] = [:]
     private var imageSources: [ObjectIdentifier: String] = [:]
     private var imageTasks: [ObjectIdentifier: URLSessionDataTask] = [:]
     private var renderedRoot: RenderedNode?
+    private weak var lastFocusedInput: UITextField?
     private var flatListRows: [ObjectIdentifier: [String: RenderedNode]] = [:]
     private var flatListOwners: [String: String] = [:]
     private let mutationDocument = CraftNativeMutationDocument()
@@ -115,8 +332,7 @@ final class CraftNativeScreenController: UIViewController {
         navigationItem.title = routeName ?? config.appName
         view.backgroundColor = config.resolvedBackgroundColor
         rootStack.axis = .vertical
-        rootStack.alignment = .fill
-        rootStack.distribution = .fill
+        rootStack.alignItems = "stretch"
         rootStack.translatesAutoresizingMaskIntoConstraints = false
         view.addSubview(rootStack)
         NSLayoutConstraint.activate([
@@ -208,6 +424,7 @@ final class CraftNativeScreenController: UIViewController {
         label.textAlignment = .center
         label.text = message
         rootStack.addArrangedSubview(label)
+        rootStack.setLayoutStyle(["alignSelf": "stretch"], for: label)
         NSLog("[craft native] %@", message)
     }
 
@@ -334,6 +551,7 @@ final class CraftNativeScreenController: UIViewController {
     }
 
     private func applyTargetedUpdates(_ ids: [String]) -> Bool {
+        let focused = firstResponder(in: rootStack) ?? lastFocusedInput
         var applied = Set<String>()
         for id in ids {
             let target = flatListOwners[id] ?? id
@@ -341,6 +559,7 @@ final class CraftNativeScreenController: UIViewController {
             guard let document = mutationDocument.node(target), let previous = renderedNode(target) else { return false }
             _ = reconcile(document, identity: previous.identity, path: target, previous: previous)
         }
+        restoreFocus(focused)
         return true
     }
 
@@ -354,13 +573,16 @@ final class CraftNativeScreenController: UIViewController {
     }
 
     private func renderCommitted(_ document: [String: Any]) {
+        let focused = firstResponder(in: rootStack) ?? lastFocusedInput
         let previous = renderedRoot
         let next = reconcile(document, identity: "root", path: "root", previous: previous)
         if previous?.view !== next.view {
             if let old = previous { detach(old, from: rootStack) }
             rootStack.addArrangedSubview(next.view)
         }
+        rootStack.setLayoutStyle(next.style, for: next.view)
         renderedRoot = next
+        restoreFocus(focused)
     }
 
     private func clearRenderedTree() {
@@ -368,6 +590,19 @@ final class CraftNativeScreenController: UIViewController {
         renderedRoot = nil
     }
 
+    private func firstResponder(in view: UIView) -> UIView? {
+        if view.isFirstResponder { return view }
+        for child in view.subviews {
+            if let responder = firstResponder(in: child) { return responder }
+        }
+        return nil
+    }
+
+    private func restoreFocus(_ focused: UIView?) {
+        guard let focused, focused.window != nil, !focused.isFirstResponder else { return }
+        _ = focused.becomeFirstResponder()
+    }
+
     private func reconcile(_ node: [String: Any], identity: String, path: String, previous: RenderedNode?) -> RenderedNode {
         let type = node["type"] as? String ?? "View"
         let props = node["props"] as? [String: Any] ?? [:]
@@ -383,6 +618,7 @@ final class CraftNativeScreenController: UIViewController {
 
         let result = current.view
         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" {
             result.setContentHuggingPriority(.required, for: .vertical)
@@ -408,8 +644,26 @@ final class CraftNativeScreenController: UIViewController {
             field.textColor = color(style["color"]) ?? .label
             field.font = textFont(style, default: field.font ?? .systemFont(ofSize: UIFont.systemFontSize))
             field.textAlignment = textAlignment(style["textAlign"])
+            let desiredKeyboardType = keyboardType(props["keyboardType"])
+            if field.keyboardType != desiredKeyboardType { field.keyboardType = desiredKeyboardType }
+            let desiredReturnKeyType = returnKeyType(props["returnKeyType"])
+            if field.returnKeyType != desiredReturnKeyType { field.returnKeyType = desiredReturnKeyType }
+            let desiredAutocorrection: UITextAutocorrectionType = props["autoCorrect"] as? Bool == false ? .no : .default
+            if field.autocorrectionType != desiredAutocorrection { field.autocorrectionType = desiredAutocorrection }
+            let desiredCapitalization = capitalizationType(props["autoCapitalize"])
+            if field.autocapitalizationType != desiredCapitalization { field.autocapitalizationType = desiredCapitalization }
+            let desiredSecureEntry = props["secureTextEntry"] as? Bool == true
+            if field.isSecureTextEntry != desiredSecureEntry { field.isSecureTextEntry = desiredSecureEntry }
+            let desiredEnabled = props["editable"] as? Bool != false
+            if field.isEnabled != desiredEnabled { field.isEnabled = desiredEnabled }
             updateField(field, value: props["value"] as? String)
             updateHandler(events["onChange"] ?? events["onChangeText"], for: field)
+            updateAuxiliaryHandler(events["onFocus"], in: &focusHandlers, for: field)
+            updateAuxiliaryHandler(events["onBlur"] ?? events["onEndEditing"], in: &blurHandlers, for: field)
+            updateAuxiliaryHandler(events["onSubmitEditing"], in: &submitHandlers, for: field)
+            if props["autoFocus"] as? Bool == true, !field.isFirstResponder {
+                DispatchQueue.main.async { _ = field.becomeFirstResponder() }
+            }
         case "Image":
             let image = result as! UIImageView
             image.contentMode = imageContentMode(style["resizeMode"] ?? props["resizeMode"])
@@ -420,6 +674,15 @@ final class CraftNativeScreenController: UIViewController {
             let direction = (props["horizontal"] as? Bool) == true || style["flexDirection"] as? String == "row"
                 ? NSLayoutConstraint.Axis.horizontal : .vertical
             scroll.setAxis(direction)
+            scroll.delegate = self
+            scroll.isScrollEnabled = props["scrollEnabled"] as? Bool != false
+            scroll.showsVerticalScrollIndicator = props["showsVerticalScrollIndicator"] as? Bool != false
+            scroll.showsHorizontalScrollIndicator = props["showsHorizontalScrollIndicator"] as? Bool != false
+            scroll.alwaysBounceVertical = props["alwaysBounceVertical"] as? Bool ?? (direction == .vertical)
+            scroll.alwaysBounceHorizontal = props["alwaysBounceHorizontal"] as? Bool ?? (direction == .horizontal)
+            updateAuxiliaryHandler(events["onScroll"], in: &scrollHandlers, for: scroll)
+            updateAuxiliaryHandler(events["onScrollBeginDrag"], in: &scrollBeginHandlers, for: scroll)
+            updateAuxiliaryHandler(events["onScrollEndDrag"], in: &scrollEndHandlers, for: scroll)
             configureStack(scroll.contentStack, style: style)
             reconcileChildren(children, in: scroll.contentStack, parent: current, path: path, style: style)
         case "FlatList":
@@ -433,7 +696,7 @@ final class CraftNativeScreenController: UIViewController {
                 events: events
             )
         default:
-            let stack = result as! UIStackView
+            let stack = result as! CraftNativeFlowView
             configureStack(stack, style: style)
             reconcileChildren(children, in: stack, parent: current, path: path, style: style)
         }
@@ -458,6 +721,9 @@ final class CraftNativeScreenController: UIViewController {
             let field = UITextField()
             field.borderStyle = .roundedRect
             field.addTarget(self, action: #selector(textChanged(_:)), for: .editingChanged)
+            field.addTarget(self, action: #selector(textFocused(_:)), for: .editingDidBegin)
+            field.addTarget(self, action: #selector(textBlurred(_:)), for: .editingDidEnd)
+            field.addTarget(self, action: #selector(textSubmitted(_:)), for: .editingDidEndOnExit)
             return field
         case "Image":
             return UIImageView()
@@ -466,11 +732,7 @@ final class CraftNativeScreenController: UIViewController {
         case "FlatList":
             return CraftNativeFlatList()
         default:
-            let stack = UIStackView()
-            stack.alignment = .fill
-            stack.distribution = .fill
-            stack.isLayoutMarginsRelativeArrangement = true
-            return stack
+            return CraftNativeFlowView()
         }
     }
 
@@ -490,7 +752,7 @@ final class CraftNativeScreenController: UIViewController {
 
     private func reconcileChildren(
         _ children: [Any],
-        in stack: UIStackView,
+        in stack: CraftNativeFlowView,
         parent: RenderedNode,
         path: String,
         style: [String: Any]
@@ -519,11 +781,13 @@ final class CraftNativeScreenController: UIViewController {
             detach(child, from: stack)
         }
         for (index, child) in next.enumerated() {
-            if index < stack.arrangedSubviews.count, stack.arrangedSubviews[index] === child.view { continue }
-            if stack.arrangedSubviews.contains(where: { $0 === child.view }) {
-                stack.removeArrangedSubview(child.view)
+            if index < stack.arrangedSubviews.count, stack.arrangedSubviews[index] === child.view {
+                stack.setLayoutStyle(child.style, for: child.view)
+                continue
             }
-            stack.insertArrangedSubview(child.view, at: index)
+            if child.view.superview === stack { stack.removeArrangedSubview(child.view) }
+            stack.insertArrangedSubview(child.view, at: min(index, stack.arrangedSubviews.count))
+            stack.setLayoutStyle(child.style, for: child.view)
         }
         parent.children = next
         addJustificationSpacers(to: stack, value: style["justifyContent"] as? String)
@@ -584,8 +848,9 @@ final class CraftNativeScreenController: UIViewController {
         }
     }
 
-    private func detach(_ node: RenderedNode, from stack: UIStackView) {
+    private func detach(_ node: RenderedNode, from stack: CraftNativeFlowView) {
         forgetHandlers(node)
+        stack.removeLayoutStyle(for: node.view)
         stack.removeArrangedSubview(node.view)
         node.view.removeFromSuperview()
     }
@@ -599,6 +864,12 @@ final class CraftNativeScreenController: UIViewController {
         }
         let id = ObjectIdentifier(node.view)
         handlers.removeValue(forKey: id)
+        focusHandlers.removeValue(forKey: id)
+        blurHandlers.removeValue(forKey: id)
+        submitHandlers.removeValue(forKey: id)
+        scrollHandlers.removeValue(forKey: id)
+        scrollBeginHandlers.removeValue(forKey: id)
+        scrollEndHandlers.removeValue(forKey: id)
         if let recognizer = tapRecognizers.removeValue(forKey: id) {
             node.view.removeGestureRecognizer(recognizer)
         }
@@ -613,6 +884,16 @@ final class CraftNativeScreenController: UIViewController {
         else { handlers.removeValue(forKey: id) }
     }
 
+    private func updateAuxiliaryHandler(
+        _ handler: String?,
+        in handlers: inout [ObjectIdentifier: String],
+        for view: UIView
+    ) {
+        let id = ObjectIdentifier(view)
+        if let handler, !handler.isEmpty { handlers[id] = handler }
+        else { handlers.removeValue(forKey: id) }
+    }
+
     private func updatePressHandler(_ handler: String?, for view: UIView) {
         let id = ObjectIdentifier(view)
         updateHandler(handler, for: view)
@@ -639,26 +920,19 @@ final class CraftNativeScreenController: UIViewController {
         }
     }
 
-    private func configureStack(_ stack: UIStackView, style: [String: Any]) {
+    private func configureStack(_ stack: CraftNativeFlowView, style: [String: Any]) {
         let direction = style["flexDirection"] as? String
         stack.axis = direction == "row" || direction == "row-reverse" ? .horizontal : .vertical
-        stack.spacing = number(stack.axis == .horizontal ? style["columnGap"] : style["rowGap"])
-            ?? number(style["gap"]) ?? 0
-        switch style["alignItems"] as? String {
-        case "flex-start": stack.alignment = .leading
-        case "center": stack.alignment = .center
-        case "flex-end": stack.alignment = .trailing
-        case "baseline": stack.alignment = .firstBaseline
-        default: stack.alignment = .fill
-        }
-        switch style["justifyContent"] as? String {
-        case "space-between", "space-around", "space-evenly": stack.distribution = .equalSpacing
-        default: stack.distribution = .fill
-        }
+        stack.wrap = style["flexWrap"] as? String == "wrap" || style["flexWrap"] as? Bool == true
+        stack.alignItems = style["alignItems"] as? String ?? "stretch"
+        stack.justifyContent = style["justifyContent"] as? String ?? "flex-start"
+        stack.gap = number(style["gap"]) ?? 0
+        stack.rowGap = number(style["rowGap"])
+        stack.columnGap = number(style["columnGap"])
         let padding = number(style["padding"]) ?? 0
         let horizontal = number(style["paddingHorizontal"]) ?? padding
         let vertical = number(style["paddingVertical"]) ?? padding
-        stack.layoutMargins = UIEdgeInsets(
+        stack.padding = UIEdgeInsets(
             top: number(style["paddingTop"]) ?? vertical,
             left: number(style["paddingLeft"]) ?? horizontal,
             bottom: number(style["paddingBottom"]) ?? vertical,
@@ -666,15 +940,13 @@ final class CraftNativeScreenController: UIViewController {
         )
     }
 
-    private func addJustificationSpacers(to stack: UIStackView, value: String?) {
-        guard !stack.arrangedSubviews.isEmpty else { return }
-        let leading = value == "center" || value == "flex-end"
-        let trailing = value == nil || value == "flex-start" || value == "center"
-        if leading { stack.insertArrangedSubview(CraftNativeFlexSpacer(), at: 0) }
-        if trailing { stack.addArrangedSubview(CraftNativeFlexSpacer()) }
-    }
+    private func addJustificationSpacers(to stack: CraftNativeFlowView, value: String?) { }
 
     private func applyViewStyle(_ style: [String: Any], to view: UIView, node: RenderedNode) {
+        let width = style["minWidth"] == nil && style["maxWidth"] == nil ? number(style["width"]) : nil
+        let height = style["minHeight"] == nil && style["maxHeight"] == nil ? number(style["height"]) : nil
+        updateDimension(width, constraint: &node.widthConstraint, anchor: view.widthAnchor)
+        updateDimension(height, constraint: &node.heightConstraint, anchor: view.heightAnchor)
         view.backgroundColor = color(style["backgroundColor"]) ?? .clear
         view.alpha = number(style["opacity"]) ?? 1
         view.isHidden = style["display"] as? String == "none"
@@ -682,8 +954,6 @@ final class CraftNativeScreenController: UIViewController {
         view.layer.borderWidth = number(style["borderWidth"]) ?? 0
         view.layer.borderColor = (color(style["borderColor"]) ?? .clear).cgColor
         view.clipsToBounds = style["overflow"] as? String == "hidden"
-        updateDimension(number(style["width"]), constraint: &node.widthConstraint, anchor: view.widthAnchor)
-        updateDimension(number(style["height"]), constraint: &node.heightConstraint, anchor: view.heightAnchor)
     }
 
     private func configureText(_ label: UILabel, text: String, style: [String: Any]) {
@@ -822,16 +1092,27 @@ final class CraftNativeScreenController: UIViewController {
     private func applyAccessibility(_ props: [String: Any], type: String, to view: UIView) {
         view.accessibilityLabel = props["accessibilityLabel"] as? String
         view.accessibilityHint = props["accessibilityHint"] as? String
+        if let value = props["accessibilityValue"] {
+            view.accessibilityValue = (value as? String) ?? (value as? NSNumber)?.stringValue
+        }
         let role = props["accessibilityRole"] as? String
-        view.isAccessibilityElement = view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Image", "TextInput"].contains(type)
+        view.isAccessibilityElement = role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Image", "TextInput"].contains(type))
+        var traits: UIAccessibilityTraits = []
         switch role ?? type.lowercased() {
-        case "button": view.accessibilityTraits = .button
-        case "image": view.accessibilityTraits = .image
-        case "header": view.accessibilityTraits = .header
-        case "link": view.accessibilityTraits = .link
-        case "search": view.accessibilityTraits = .searchField
-        default: view.accessibilityTraits = []
+        case "button": traits.insert(.button)
+        case "image": traits.insert(.image)
+        case "header": traits.insert(.header)
+        case "link": traits.insert(.link)
+        case "search": traits.insert(.searchField)
+        default: break
+        }
+        if let state = props["accessibilityState"] as? [String: Any] {
+            if state["disabled"] as? Bool == true { traits.insert(.notEnabled) }
+            if state["selected"] as? Bool == true { traits.insert(.selected) }
+            if state["checked"] as? Bool == true { traits.insert(.selected) }
         }
+        if let control = view as? UIControl, !control.isEnabled { traits.insert(.notEnabled) }
+        view.accessibilityTraits = traits
     }
 
     private func updateDimension(_ value: CGFloat?, constraint: inout NSLayoutConstraint?, anchor: NSLayoutDimension) {
@@ -848,13 +1129,40 @@ final class CraftNativeScreenController: UIViewController {
     }
 
     @objc private func buttonPressed(_ sender: UIButton) {
+        let focused = firstResponder(in: rootStack) ?? lastFocusedInput
         guard let handler = handlers[ObjectIdentifier(sender)] else { return }
         send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": [:]])
+        restoreFocus(focused)
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self, weak focused] in
+            self?.restoreFocus(focused)
+        }
     }
 
     @objc private func textChanged(_ sender: UITextField) {
+        lastFocusedInput = sender
+        let focused = sender.isFirstResponder ? sender : firstResponder(in: rootStack)
         guard let handler = handlers[ObjectIdentifier(sender)] else { return }
         send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": sender.text ?? ""]])
+        restoreFocus(focused)
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self, weak focused] in
+            self?.restoreFocus(focused)
+        }
+    }
+
+    @objc private func textFocused(_ sender: UITextField) {
+        lastFocusedInput = sender
+        guard let handler = focusHandlers[ObjectIdentifier(sender)] else { return }
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": [:]])
+    }
+
+    @objc private func textBlurred(_ sender: UITextField) {
+        guard let handler = blurHandlers[ObjectIdentifier(sender)] else { return }
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": sender.text ?? ""]])
+    }
+
+    @objc private func textSubmitted(_ sender: UITextField) {
+        guard let handler = submitHandlers[ObjectIdentifier(sender)] else { return }
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": sender.text ?? ""]])
     }
 
     @objc private func viewPressed(_ sender: UITapGestureRecognizer) {
@@ -862,6 +1170,29 @@ final class CraftNativeScreenController: UIViewController {
         send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": [:]])
     }
 
+    func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        guard let handler = scrollHandlers[ObjectIdentifier(scrollView)] else { return }
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": scrollEvent(scrollView)])
+    }
+
+    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
+        guard let handler = scrollBeginHandlers[ObjectIdentifier(scrollView)] else { return }
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": scrollEvent(scrollView)])
+    }
+
+    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
+        guard let handler = scrollEndHandlers[ObjectIdentifier(scrollView)] else { return }
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": scrollEvent(scrollView)])
+    }
+
+    private func scrollEvent(_ scrollView: UIScrollView) -> [String: Any] {
+        [
+            "contentOffset": ["x": scrollView.contentOffset.x, "y": scrollView.contentOffset.y],
+            "contentSize": ["width": scrollView.contentSize.width, "height": scrollView.contentSize.height],
+            "layoutMeasurement": ["width": scrollView.bounds.width, "height": scrollView.bounds.height],
+        ]
+    }
+
     private func send(type: String, payload: [String: Any], correlationId: String? = nil) {
         var message: [String: Any] = ["type": type, "payload": payload]
         if let correlationId = correlationId { message["correlationId"] = correlationId }
@@ -874,6 +1205,37 @@ final class CraftNativeScreenController: UIViewController {
         (value as? NSNumber).map { CGFloat(truncating: $0) }
     }
 
+    private func keyboardType(_ value: Any?) -> UIKeyboardType {
+        switch value as? String {
+        case "email-address": return .emailAddress
+        case "numeric": return .numberPad
+        case "phone-pad": return .phonePad
+        case "decimal-pad": return .decimalPad
+        case "url": return .URL
+        default: return .default
+        }
+    }
+
+    private func returnKeyType(_ value: Any?) -> UIReturnKeyType {
+        switch value as? String {
+        case "done": return .done
+        case "go": return .go
+        case "next": return .next
+        case "search": return .search
+        case "send": return .send
+        default: return .default
+        }
+    }
+
+    private func capitalizationType(_ value: Any?) -> UITextAutocapitalizationType {
+        switch value as? String {
+        case "none": return .none
+        case "words": return .words
+        case "characters": return .allCharacters
+        default: return .sentences
+        }
+    }
+
     private func color(_ value: Any?) -> UIColor? {
         guard let hex = value as? String else { return nil }
         return UIColor(hex: hex)