craft-native 0.0.164 → 0.0.167

package/dist/ios/templates/CraftNativeScreen.swift

@@ -550,6 +550,27 @@ private final class CraftNativeLayoutStyleBox {
 
 private var craftNativeLayoutStyleKey: UInt8 = 0
 private var craftNativeCornerRadiusKey: UInt8 = 0
+private var craftNativeCornerRadiiKey: UInt8 = 0
+private var craftNativeBorderLayerKey: UInt8 = 0
+private var craftNativeSideBorderLayersKey: UInt8 = 0
+
+private func craftRoundedPath(_ rect: CGRect, _ rawRadii: [CGFloat]) -> CGPath {
+    let limit = min(rect.width, rect.height) / 2
+    let radii = (0..<4).map { min(max(0, rawRadii.count > $0 ? rawRadii[$0] : 0), limit) }
+    let path = CGMutablePath()
+    let minX = rect.minX, maxX = rect.maxX, minY = rect.minY, maxY = rect.maxY
+    path.move(to: CGPoint(x: minX + radii[0], y: minY))
+    path.addLine(to: CGPoint(x: maxX - radii[1], y: minY))
+    path.addArc(center: CGPoint(x: maxX - radii[1], y: minY + radii[1]), radius: radii[1], startAngle: -.pi / 2, endAngle: 0, clockwise: false)
+    path.addLine(to: CGPoint(x: maxX, y: maxY - radii[2]))
+    path.addArc(center: CGPoint(x: maxX - radii[2], y: maxY - radii[2]), radius: radii[2], startAngle: 0, endAngle: .pi / 2, clockwise: false)
+    path.addLine(to: CGPoint(x: minX + radii[3], y: maxY))
+    path.addArc(center: CGPoint(x: minX + radii[3], y: maxY - radii[3]), radius: radii[3], startAngle: .pi / 2, endAngle: .pi, clockwise: false)
+    path.addLine(to: CGPoint(x: minX, y: minY + radii[0]))
+    path.addArc(center: CGPoint(x: minX + radii[0], y: minY + radii[0]), radius: radii[0], startAngle: .pi, endAngle: .pi * 1.5, clockwise: false)
+    path.closeSubpath()
+    return path
+}
 
 extension UIView {
     /// The layout style this view's parent reads. It lives on the view, so an
@@ -571,11 +592,98 @@ extension UIView {
         }
     }
 
+    var craftRequestedCornerRadii: [CGFloat]? {
+        get { (objc_getAssociatedObject(self, &craftNativeCornerRadiiKey) as? [NSNumber])?.map { CGFloat(truncating: $0) } }
+        set {
+            objc_setAssociatedObject(self, &craftNativeCornerRadiiKey, newValue?.map { NSNumber(value: Double($0)) }, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+            craftApplyCornerRadius()
+        }
+    }
+
     func craftApplyCornerRadius() {
         let requested = craftRequestedCornerRadius ?? 0
         let limit = min(bounds.width, bounds.height) / 2
         let radius = limit > 0 ? min(requested, limit) : min(requested, 9_998)
-        if layer.cornerRadius != radius { layer.cornerRadius = radius }
+        if let radii = craftRequestedCornerRadii {
+            let mask = (layer.mask as? CAShapeLayer) ?? CAShapeLayer()
+            mask.frame = bounds
+            mask.path = craftRoundedPath(bounds, radii)
+            layer.mask = mask
+            layer.cornerRadius = 0
+        } else {
+            layer.mask = nil
+            if layer.cornerRadius != radius { layer.cornerRadius = radius }
+        }
+        if let border = objc_getAssociatedObject(self, &craftNativeBorderLayerKey) as? CAShapeLayer {
+            border.frame = bounds
+            let inset = border.lineWidth / 2
+            border.path = UIBezierPath(
+                roundedRect: bounds.insetBy(dx: inset, dy: inset),
+                cornerRadius: max(0, radius - inset)
+            ).cgPath
+        }
+        if let sides = objc_getAssociatedObject(self, &craftNativeSideBorderLayersKey) as? [CALayer], sides.count == 4 {
+            let top = sides[0].frame.height
+            let right = sides[1].frame.width
+            let bottom = sides[2].frame.height
+            let left = sides[3].frame.width
+            sides[0].frame = CGRect(x: 0, y: 0, width: bounds.width, height: top)
+            sides[1].frame = CGRect(x: max(0, bounds.width - right), y: 0, width: right, height: bounds.height)
+            sides[2].frame = CGRect(x: 0, y: max(0, bounds.height - bottom), width: bounds.width, height: bottom)
+            sides[3].frame = CGRect(x: 0, y: 0, width: left, height: bounds.height)
+        }
+    }
+
+    fileprivate func craftApplyBorderStyle(_ style: String?, width: CGFloat, color: UIColor) {
+        guard width > 0, style == "dashed" || style == "dotted" else {
+            (objc_getAssociatedObject(self, &craftNativeBorderLayerKey) as? CAShapeLayer)?.removeFromSuperlayer()
+            objc_setAssociatedObject(self, &craftNativeBorderLayerKey, nil, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+            layer.borderWidth = width
+            layer.borderColor = color.cgColor
+            return
+        }
+        layer.borderWidth = 0
+        let border = (objc_getAssociatedObject(self, &craftNativeBorderLayerKey) as? CAShapeLayer) ?? CAShapeLayer()
+        border.strokeColor = color.cgColor
+        border.fillColor = nil
+        border.lineWidth = width
+        border.lineDashPattern = style == "dotted"
+            ? [NSNumber(value: Double(width)), NSNumber(value: Double(width * 1.5))]
+            : [NSNumber(value: Double(width * 3)), NSNumber(value: Double(width * 2))]
+        border.contentsScale = window?.screen.scale ?? traitCollection.displayScale
+        if border.superlayer !== layer { layer.addSublayer(border) }
+        objc_setAssociatedObject(self, &craftNativeBorderLayerKey, border, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+        craftApplyCornerRadius()
+    }
+
+    fileprivate func craftApplySideBorders(_ hasSideBorders: Bool, style: String?, widths: [CGFloat], colors: [UIColor]) {
+        guard hasSideBorders else {
+            (objc_getAssociatedObject(self, &craftNativeSideBorderLayersKey) as? [CALayer])?.forEach { $0.removeFromSuperlayer() }
+            objc_setAssociatedObject(self, &craftNativeSideBorderLayersKey, nil, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+            craftApplyBorderStyle(style, width: widths.first ?? 0, color: colors.first ?? .clear)
+            return
+        }
+        (objc_getAssociatedObject(self, &craftNativeBorderLayerKey) as? CAShapeLayer)?.removeFromSuperlayer()
+        objc_setAssociatedObject(self, &craftNativeBorderLayerKey, nil, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
+        layer.borderWidth = 0
+        let top = max(0, widths.count > 0 ? widths[0] : 0)
+        let right = max(0, widths.count > 1 ? widths[1] : 0)
+        let bottom = max(0, widths.count > 2 ? widths[2] : 0)
+        let left = max(0, widths.count > 3 ? widths[3] : 0)
+        let frames = [
+            CGRect(x: 0, y: 0, width: bounds.width, height: top),
+            CGRect(x: max(0, bounds.width - right), y: 0, width: right, height: bounds.height),
+            CGRect(x: 0, y: max(0, bounds.height - bottom), width: bounds.width, height: bottom),
+            CGRect(x: 0, y: 0, width: left, height: bounds.height),
+        ]
+        let layers = frames.enumerated().map { index, frame in
+            let side = CALayer()
+            side.frame = frame
+            side.backgroundColor = (colors.count > index ? colors[index] : .clear).cgColor
+            layer.addSublayer(side)
+            return side
+        }
+        objc_setAssociatedObject(self, &craftNativeSideBorderLayersKey, layers, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
     }
 }
 
@@ -670,6 +778,7 @@ private class CraftNativeFlowView: UIStackView {
     var gridColumns = 1 { didSet { if gridColumns != oldValue { invalidateMeasurements() } } }
     var gridAutoRows: CraftNativeLength? { didSet { if gridAutoRows != oldValue { invalidateMeasurements() } } }
     var reverse = false { didSet { if reverse != oldValue { invalidateMeasurements() } } }
+    var wrapReverse = false { didSet { if wrapReverse != oldValue { invalidateMeasurements() } } }
     var padding = UIEdgeInsets.zero {
         didSet {
             layoutMargins = padding
@@ -869,6 +978,29 @@ private class CraftNativeFlowView: UIStackView {
         return max(0, result)
     }
 
+    /// The first baseline is the cross-axis anchor for a horizontal baseline
+    /// flex line. Views without a baseline participate at their bottom edge,
+    /// matching the CSS fallback for replaced and non-text elements.
+    private static func firstBaseline(_ view: UIView, cross: CGFloat) -> CGFloat {
+        let baseline: CGFloat?
+        if let label = view as? CraftNativeLabel {
+            // CraftNativeLabel draws inside its inset rect, so include the
+            // authored top padding before the font's own baseline (UIKit's
+            // labels expose no measured first-baseline offset).
+            baseline = label.insets.top + label.font.ascender
+        } else if let label = view as? UILabel {
+            baseline = label.font.ascender
+        } else if let field = view as? UITextField {
+            baseline = field.font?.ascender
+        } else if let textView = view as? UITextView {
+            baseline = textView.font?.ascender
+        } else {
+            baseline = nil
+        }
+        guard let baseline, baseline.isFinite else { return cross }
+        return min(max(0, baseline), cross)
+    }
+
     /// Children that take part in the flow: shown, not a modal overlay.
     private var visibleChildren: [UIView] {
         flowChildren.filter { $0.superview === self && !$0.isHidden && !($0 is CraftNativeModalView) }
@@ -1255,31 +1387,53 @@ private class CraftNativeFlowView: UIStackView {
                 }
                 let lineCross = lineCrosses[lineIndex]
                 let lineOffset = sharedCrossOffsets?[lineIndex] ?? crossOffset
+                let crossReversed = wrapReverse && wrap
+                let physicalLineOffset = crossReversed ? contentCross - lineOffset - lineCross : lineOffset
                 let sharedLine = sharedLines[lineIndex]
                     let useSharedPositions = !reverse && sharedLine != nil
+                let baseline = horizontal
+                    ? line.compactMap { index -> CGFloat? in
+                        let item = items[index]
+                        guard item.align == "baseline" else { return nil }
+                        return item.crossLeading + Self.firstBaseline(item.view, cross: item.cross)
+                    }.max()
+                    : nil
                 var mainOffset = leading
                 for (offset, index) in line.enumerated() {
                     let item = items[index]
-                    let alignment = item.align == "center" ? UInt32(1) : item.align == "flex-end" ? UInt32(2) : UInt32(0)
-                    let crossPosition = CraftNativeCrossAxisBridge.position(
-                        available: lineCross,
-                        size: item.cross,
-                        leading: item.crossLeading,
-                        trailing: item.crossTrailing,
-                        alignment: alignment
-                    ) ?? {
-                        switch alignment {
-                        case 1: return item.crossLeading + (lineCross - item.crossMargins - item.cross) / 2
-                        case 2: return lineCross - item.crossTrailing - item.cross
-                        default: return item.crossLeading
-                        }
-                    }()
+                    let crossPosition: CGFloat
+                    if item.align == "baseline", let baseline {
+                        let childBaseline = Self.firstBaseline(item.view, cross: item.cross)
+                        crossPosition = CraftNativeCrossAxisBridge.position(
+                            available: baseline,
+                            size: childBaseline,
+                            leading: item.crossLeading,
+                            trailing: item.crossTrailing,
+                            alignment: 3
+                        ) ?? max(item.crossLeading, baseline - childBaseline)
+                    } else {
+                        let alignment = item.align == "center" ? UInt32(1) : item.align == "flex-end" ? UInt32(2) : UInt32(0)
+                        crossPosition = CraftNativeCrossAxisBridge.position(
+                            available: lineCross,
+                            size: item.cross,
+                            leading: item.crossLeading,
+                            trailing: item.crossTrailing,
+                            alignment: alignment
+                        ) ?? {
+                            switch alignment {
+                            case 1: return item.crossLeading + (lineCross - item.crossMargins - item.cross) / 2
+                            case 2: return lineCross - item.crossTrailing - item.cross
+                            default: return item.crossLeading
+                            }
+                        }()
+                    }
+                    let physicalCrossPosition = crossReversed ? lineCross - crossPosition - item.cross : crossPosition
                     let mainPosition = useSharedPositions
                         ? (sharedLine?[offset].position ?? (mainOffset + item.mainLeading))
                         : mainOffset + item.mainLeading
                     let frame = horizontal
-                        ? CGRect(x: padding.left + mainPosition, y: padding.top + lineOffset + crossPosition, width: item.main, height: item.cross)
-                        : CGRect(x: padding.left + lineOffset + crossPosition, y: padding.top + mainPosition, width: item.cross, height: item.main)
+                        ? CGRect(x: padding.left + mainPosition, y: padding.top + physicalLineOffset + physicalCrossPosition, width: item.main, height: item.cross)
+                        : CGRect(x: padding.left + physicalLineOffset + physicalCrossPosition, y: padding.top + mainPosition, width: item.cross, height: item.main)
                     frames.append((item.view, frame))
                     if !useSharedPositions { mainOffset += item.mainMargins + item.main + mainGap + between }
                 }
@@ -2448,9 +2602,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
         super.traitCollectionDidChange(previousTraitCollection)
-        guard previousTraitCollection?.userInterfaceStyle != traitCollection.userInterfaceStyle else { return }
+        let colorChanged = previousTraitCollection?.userInterfaceStyle != traitCollection.userInterfaceStyle
+        let textSizeChanged = previousTraitCollection?.preferredContentSizeCategory != traitCollection.preferredContentSizeCategory
+        guard colorChanged || textSizeChanged else { return }
         refreshTraitDefaults()
-        send(type: "APPEARANCE", payload: ["colorScheme": colorScheme])
+        sendAppearance()
     }
 
     override func viewWillAppear(_ animated: Bool) {
@@ -2538,7 +2694,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     }
 
     private func refreshTraitDefaults() {
-        view.backgroundColor = config.resolvedBackgroundColor
+        view.backgroundColor = screenBackgroundColor ?? config.resolvedBackgroundColor
         if let document = mutationDocument.node("root") {
             renderCommitted(document)
         } else {
@@ -2621,6 +2777,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 capabilities: \(capabilityJSON),
                 initialAppState: "\(CraftNativeActions.currentAppState())",
                 colorScheme: "\(colorScheme)",
+                appearance: \(appearanceJSON()),
                 appURL: \(appURL),
                 appVersion: \(appVersion),
                 appBuild: \(appBuild),
@@ -2701,6 +2858,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         return config.appearance == "dark" ? "dark" : "light"
     }
 
+    private func sendAppearance() {
+        let style: UIUserInterfaceStyle = colorScheme == "dark" ? .dark : .light
+        send(type: "APPEARANCE", payload: CraftPageAppearance.snapshot(style: style))
+    }
+
+    private func appearanceJSON() -> String {
+        let style: UIUserInterfaceStyle = colorScheme == "dark" ? .dark : .light
+        guard let data = try? JSONSerialization.data(withJSONObject: CraftPageAppearance.snapshot(style: style)),
+              let json = String(data: data, encoding: .utf8) else { return "{}" }
+        return json
+    }
+
     /// The screen's name as its script knows it: the route the host opened,
     /// else the one a route bundle selected for itself.
     private func screenName(in context: JSContext? = nil) -> String {
@@ -2726,8 +2895,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// - `craft.secureStorage.getSync(key)`: the Keychain item the web page's
     ///   `craft.secureStorage.set` wrote.
     /// - `craft.navigation.setOptions({ title, largeTitle, hidden, backTitle,
-    ///   tabBarHidden, contentSwipeBack, tabSwipeEnabled, rightButtons })`; a right button's
-    ///   tap is the event `navButton`.
+    ///   tabBarHidden, contentSwipeBack, tabSwipeEnabled, backgroundColor, rightButtons })`;
+    ///   a right button's tap is the event `navButton`.
     ///
     /// A runtime that assigns `craft.storage` (or the others) afterwards keeps
     /// these: each namespace is a property whose setter adds them back to the
@@ -2979,6 +3148,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// own horizontal pager or chart gesture.
     private(set) var tabSwipeEnabled = true
     private var prefersLargeTitle: Bool?
+    /// The screen's own colour (`backgroundColor`), under the status bar and
+    /// the home indicator too, where its content never reaches: a black
+    /// full-screen timer is black edge to edge. nil is the app's.
+    private var screenBackgroundColor: UIColor?
 
     /// Whether this screen asked for a bar of its own through `setOptions`: a
     /// title, a large title or buttons, and not `hidden`. A tab's root screen
@@ -3019,6 +3192,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         if let tabSwipeEnabled = options["tabSwipeEnabled"] as? Bool {
             self.tabSwipeEnabled = tabSwipeEnabled
         }
+        if options.keys.contains("backgroundColor") {
+            screenBackgroundColor = color(options["backgroundColor"])
+            view.backgroundColor = screenBackgroundColor ?? config.resolvedBackgroundColor
+        }
         if let hidden = options["hidden"] as? Bool {
             navigationBarHidden = hidden
             if navigationController?.topViewController === self {
@@ -3203,6 +3380,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         observe(UIApplication.didBecomeActiveNotification, state: "active")
         observe(UIApplication.willResignActiveNotification, state: "inactive")
         observe(UIApplication.didEnterBackgroundNotification, state: "background")
+        for name in [UIContentSizeCategory.didChangeNotification, UIAccessibility.reduceMotionStatusDidChangeNotification, UIAccessibility.reduceTransparencyStatusDidChangeNotification, .craftColorSchemeChanged] {
+            lifecycleObservers.append(NotificationCenter.default.addObserver(
+                forName: name,
+                object: nil,
+                queue: .main
+            ) { [weak self] _ in
+                self?.refreshTraitDefaults()
+                self?.sendAppearance()
+            })
+        }
         // The app script has no screen for the keyboard to cover.
         if !isAppScript {
             lifecycleObservers.append(NotificationCenter.default.addObserver(
@@ -4674,7 +4861,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let direction = style["flexDirection"] as? String
         stack.axis = direction == "row" || direction == "row-reverse" ? .horizontal : .vertical
         stack.reverse = direction?.hasSuffix("-reverse") == true
-        stack.wrap = style["flexWrap"] as? String == "wrap" || style["flexWrap"] as? Bool == true
+        let flexWrap = style["flexWrap"] as? String
+        stack.wrap = flexWrap == "wrap" || flexWrap == "wrap-reverse" || style["flexWrap"] as? Bool == true
+        stack.wrapReverse = flexWrap == "wrap-reverse"
         stack.alignItems = style["alignItems"] as? String ?? "stretch"
         stack.alignContent = style["alignContent"] as? String ?? "flex-start"
         stack.justifyContent = style["justifyContent"] as? String ?? "flex-start"
@@ -4710,17 +4899,45 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         )
         view.alpha = number(style["opacity"]) ?? 1
         view.isHidden = style["display"] as? String == "none"
-        view.craftRequestedCornerRadius = number(style["borderRadius"])
-        view.layer.borderWidth = number(style["borderWidth"]) ?? 0
-        view.layer.borderColor = (color(style["borderColor"]) ?? .clear).cgColor
+        let borderRadius = number(style["borderRadius"]) ?? 0
+        let cornerRadiusKeys = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"]
+        let hasCornerRadii = cornerRadiusKeys.contains { style[$0] != nil }
+        view.craftRequestedCornerRadius = borderRadius
+        view.craftRequestedCornerRadii = hasCornerRadii
+            ? cornerRadiusKeys.map { number(style[$0]) ?? borderRadius }
+            : nil
+        let borderWidth = number(style["borderWidth"]) ?? 0
+        let borderColor = color(style["borderColor"]) ?? .clear
+        let sideWidthKeys = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"]
+        let sideColorKeys = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"]
+        view.craftApplySideBorders(
+            (sideWidthKeys + sideColorKeys).contains { style[$0] != nil },
+            style: style["borderStyle"] as? String,
+            widths: sideWidthKeys.map { number(style[$0]) ?? borderWidth },
+            colors: sideColorKeys.map { color(style[$0]) ?? borderColor }
+        )
+        view.layer.zPosition = number(style["zIndex"]) ?? 0
+        applyTransform(style["transform"], to: view)
         let elevation = max(0, number(style["elevation"]) ?? 0)
-        view.layer.shadowColor = UIColor.black.cgColor
-        view.layer.shadowOpacity = elevation > 0 ? Float(min(0.28, 0.12 + elevation * 0.02)) : 0
-        view.layer.shadowRadius = elevation * 0.5
-        view.layer.shadowOffset = CGSize(width: 0, height: elevation * 0.25)
+        let shadowColor = color(style["shadowColor"]) ?? .black
+        let shadowOpacity = min(1, max(0, number(style["shadowOpacity"]) ?? (elevation > 0 ? min(0.28, 0.12 + elevation * 0.02) : 0)))
+        let shadowRadius = max(0, number(style["shadowRadius"]) ?? elevation * 0.5)
+        let shadowOffset = style["shadowOffset"] as? [String: Any]
+        view.layer.shadowColor = shadowColor.cgColor
+        view.layer.shadowOpacity = Float(shadowOpacity)
+        view.layer.shadowRadius = shadowRadius
+        view.layer.shadowOffset = CGSize(
+            width: number(shadowOffset?["width"]) ?? 0,
+            height: number(shadowOffset?["height"]) ?? (elevation * 0.25)
+        )
         // A label paints its background inside its own bounds, so a rounded
-        // chip of text clips to its corners.
-        view.clipsToBounds = style["overflow"] as? String == "hidden"
+        // chip of text clips to its corners. A scroll view clips its content
+        // unless told `overflow: visible`, as UIKit's and React Native's do:
+        // unclipped, a screen's content scrolled up over its bar's back
+        // button and down into the home indicator.
+        let overflow = style["overflow"] as? String
+        view.clipsToBounds = overflow == "hidden"
+            || (view is UIScrollView && overflow != "visible")
             || (view is UILabel && (view.craftRequestedCornerRadius ?? 0) > 0)
         view.layer.masksToBounds = view.clipsToBounds
         view.craftLayoutStyle = CraftNativeLayoutStyle(style)
@@ -4740,6 +4957,49 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         )
     }
 
+    private func applyTransform(_ raw: Any?, to view: UIView) {
+        view.transform = .identity
+        view.layer.transform = CATransform3DIdentity
+        guard let transforms = raw as? [[String: Any]] else { return }
+        var affine = CGAffineTransform.identity
+        var threeDimensional = CATransform3DIdentity
+        var hasThreeDimensionalRotation = false
+        for transform in transforms {
+            if let value = number(transform["translateX"]) { affine = affine.translatedBy(x: value, y: 0) }
+            if let value = number(transform["translateY"]) { affine = affine.translatedBy(x: 0, y: value) }
+            if let value = number(transform["scale"]) { affine = affine.scaledBy(x: value, y: value) }
+            if let value = number(transform["scaleX"]) { affine = affine.scaledBy(x: value, y: 1) }
+            if let value = number(transform["scaleY"]) { affine = affine.scaledBy(x: 1, y: value) }
+            if let value = transformAngle(transform["rotate"] ?? transform["rotateZ"]) { affine = affine.rotated(by: value) }
+            if let value = transformAngle(transform["skewX"]) { affine = affine.concatenating(CGAffineTransform(a: 1, b: 0, c: tan(value), d: 1, tx: 0, ty: 0)) }
+            if let value = transformAngle(transform["skewY"]) { affine = affine.concatenating(CGAffineTransform(a: 1, b: tan(value), c: 0, d: 1, tx: 0, ty: 0)) }
+            if let value = transformAngle(transform["rotateX"]) {
+                threeDimensional = CATransform3DRotate(threeDimensional, value, 1, 0, 0)
+                hasThreeDimensionalRotation = true
+            }
+            if let value = transformAngle(transform["rotateY"]) {
+                threeDimensional = CATransform3DRotate(threeDimensional, value, 0, 1, 0)
+                hasThreeDimensionalRotation = true
+            }
+        }
+        if hasThreeDimensionalRotation {
+            view.layer.transform = CATransform3DConcat(CATransform3DMakeAffineTransform(affine), threeDimensional)
+        } else {
+            view.transform = affine
+        }
+    }
+
+    private func transformAngle(_ raw: Any?) -> CGFloat? {
+        if let value = number(raw) { return value }
+        guard let text = raw as? String else { return nil }
+        if text.hasSuffix("rad") { return CGFloat(Double(text.dropLast(3)) ?? 0) }
+        if text.hasSuffix("deg") { return CGFloat((Double(text.dropLast(3)) ?? 0) * .pi / 180) }
+        // Keep the conversion explicit: newer Swift toolchains see both the
+        // CGFloat(Double) and CGFloat(Float) initializers through map and
+        // reject the overloaded constructor reference.
+        return Double(text).map { CGFloat($0) }
+    }
+
     private func configureText(_ label: UILabel, text: String, style: [String: Any]) {
         let transformed = transformedText(text, style: style)
         label.textColor = color(style["color"]) ?? .label
@@ -4747,14 +5007,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         label.textAlignment = textAlignment(style["textAlign"])
         var attributes: [NSAttributedString.Key: Any] = [:]
         if let spacing = number(style["letterSpacing"]) { attributes[.kern] = spacing }
-        switch style["textDecorationLine"] as? String {
-        case "underline": attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
-        case "line-through": attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
-        case "underline line-through":
-            attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
-            attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
-        default: break
-        }
+        addTextDecorationAttributes(style, to: &attributes)
+        if let shadow = textShadow(style) { attributes[.shadow] = shadow }
         if let lineHeight = number(style["lineHeight"]) {
             let paragraph = NSMutableParagraphStyle()
             paragraph.minimumLineHeight = lineHeight
@@ -4799,14 +5053,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             paragraph.maximumLineHeight = lineHeight
             attributes[.paragraphStyle] = paragraph
         }
-        switch style["textDecorationLine"] as? String {
-        case "underline": attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
-        case "line-through": attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
-        case "underline line-through":
-            attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
-            attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
-        default: break
-        }
+        addTextDecorationAttributes(style, to: &attributes)
+        if let shadow = textShadow(style) { attributes[.shadow] = shadow }
         if forceUnderline { attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue }
         return attributes
     }
@@ -4828,17 +5076,46 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             paragraph.alignment = alignment
             attributes[.paragraphStyle] = paragraph
         }
-        switch style["textDecorationLine"] as? String {
-        case "underline": attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
-        case "line-through": attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
-        case "underline line-through":
-            attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
-            attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
-        default: break
-        }
+        addTextDecorationAttributes(style, to: &attributes)
+        if let shadow = textShadow(style) { attributes[.shadow] = shadow }
         return attributes
     }
 
+    private func textShadow(_ style: [String: Any]) -> NSShadow? {
+        guard let shadowColor = color(style["textShadowColor"]) else { return nil }
+        let offset = style["textShadowOffset"] as? [String: Any]
+        let shadow = NSShadow()
+        shadow.shadowColor = shadowColor
+        shadow.shadowOffset = CGSize(
+            width: number(offset?["width"]) ?? 0,
+            height: number(offset?["height"]) ?? 0
+        )
+        shadow.shadowBlurRadius = max(0, number(style["textShadowRadius"]) ?? 0)
+        return shadow
+    }
+
+    private func addTextDecorationAttributes(_ style: [String: Any], to attributes: inout [NSAttributedString.Key: Any]) {
+        let line = style["textDecorationLine"] as? String
+        let decorationStyle: NSUnderlineStyle = {
+            switch style["textDecorationStyle"] as? String {
+            case "double": return .double
+            case "dotted": return [.single, .patternDot]
+            case "dashed": return [.single, .patternDash]
+            default: return .single
+            }
+        }()
+        let rawStyle = decorationStyle.rawValue
+        let decorationColor = color(style["textDecorationColor"])
+        if line == "underline" || line == "underline line-through" {
+            attributes[.underlineStyle] = rawStyle
+            if let decorationColor { attributes[.underlineColor] = decorationColor }
+        }
+        if line == "line-through" || line == "underline line-through" {
+            attributes[.strikethroughStyle] = rawStyle
+            if let decorationColor { attributes[.strikethroughColor] = decorationColor }
+        }
+    }
+
     private func transformedText(_ text: String, style: [String: Any]) -> String {
         switch style["textTransform"] as? String {
         case "uppercase": return text.uppercased()
@@ -5237,11 +5514,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         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
+        let parts = text.split(separator: ":")
+        guard parts.count == 2 || parts.count == 3,
+              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 }
         return min(maximum, hours * 3600 + minutes * 60 + seconds)
     }