craft-native 0.0.135 → 0.0.138

package/dist/cli.js

@@ -3303,7 +3303,7 @@ function pinCraftNativeDependency(packagePath, craftVersion) {
 `);
 }
 // package.json
-var version = "0.0.135";
+var version = "0.0.138";
 
 // bin/cli.ts
 var spawnedFrom = process6.env[CRAFT_CLI_SPAWN_MARKER];

package/dist/index.cjs

@@ -310,7 +310,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.135";
+var version = "0.0.138";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/index.js

@@ -58,7 +58,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.135";
+var version = "0.0.138";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/ios/src/index.js

@@ -349,6 +349,12 @@ ${plistArray(config.appGroups)}
     entries.push(`    <key>aps-environment</key>
     <string>$(CRAFT_APNS_ENVIRONMENT)</string>`);
   }
+  if (config.enableSocialAuth) {
+    entries.push(`    <key>com.apple.developer.applesignin</key>
+    <array>
+        <string>Default</string>
+    </array>`);
+  }
   if (config.enableSecureStorage) {
     entries.push(`    <key>keychain-access-groups</key>
     <array>

package/dist/ios/templates/CraftApp.swift

@@ -535,8 +535,25 @@ final class CraftChrome: ObservableObject {
     private var occupied: CGFloat = 0
     private var pendingHide: DispatchWorkItem?
     private var splashDeadline: DispatchWorkItem?
+    /// The keyboard is up and covers the tab bar, so the page need not leave
+    /// room for it: the web view ends at the keyboard (CraftHybrid's webHost).
+    private var keyboardUp = false
 
-    private init() {}
+    private init() {
+        let center = NotificationCenter.default
+        center.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { [weak self] _ in
+            self?.keyboardChanged(up: true)
+        }
+        center.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { [weak self] _ in
+            self?.keyboardChanged(up: false)
+        }
+    }
+
+    private func keyboardChanged(up: Bool) {
+        guard up != keyboardUp else { return }
+        keyboardUp = up
+        publishLayout()
+    }
 
     /// The tab bar from `tabs` in craft.config.json, there before the page
     /// loads; the page's own `tabBar` message replaces it later. `splash`
@@ -685,7 +702,7 @@ final class CraftChrome: ObservableObject {
     /// The bar's height as `--craft-tab-bar-height`, so the page leaves room
     /// for it, and as an event for anything that measures.
     func publishLayout() {
-        let height = tabBarVisible ? Int(occupied) : 0
+        let height = tabBarVisible && !keyboardUp ? Int(occupied) : 0
         CraftHybrid.shared.tabBarCovers(CGFloat(height))
         let script = "document.documentElement.style.setProperty('--craft-tab-bar-height','\(height)px');window.dispatchEvent(new CustomEvent('craftTabBarLayout',{detail:{height:\(height)}}));"
         DispatchQueue.main.async { [weak self] in self?.webView?.evaluateJavaScript(script, completionHandler: nil) }
@@ -2208,7 +2225,7 @@ struct CraftWebView: UIViewRepresentable {
             // MARK: - Social Auth
             case "signInWithApple":
                 if config.enableSocialAuth {
-                    signInWithApple(callbackId: callbackId)
+                    signInWithApple(nonce: body["nonce"] as? String, callbackId: callbackId)
                 } else {
                     rejectCallback(callbackId, error: "Social sign-in is disabled", code: "CAPABILITY_DISABLED")
                 }
@@ -3567,8 +3584,13 @@ struct CraftWebView: UIViewRepresentable {
                 restorePurchases: function() {
                     return this._invoke('restorePurchases');
                 },
-                signInWithApple: function() {
-                    return this._invoke('signInWithApple');
+                // `nonce` is the SHA-256 of a one-time value the page keeps;
+                // Apple writes it into the identity token, so the server can
+                // tie the sign-in to that page. The answer carries Apple's
+                // one-use authorizationCode for the server to redeem.
+                signInWithApple: function(options) {
+                    var nonce = options && typeof options.nonce === 'string' ? options.nonce : undefined;
+                    return this._invoke('signInWithApple', nonce ? {nonce: nonce} : {});
                 },
                 signInWithGoogle: function() {
                     return Promise.reject(new Error('Google Sign-In is unavailable on iOS'));
@@ -6588,12 +6610,13 @@ struct CraftWebView: UIViewRepresentable {
         }
 
         // MARK: - Social Auth (Apple Sign In)
-        private func signInWithApple(callbackId: String?) {
+        private func signInWithApple(nonce: String?, callbackId: String?) {
             DispatchQueue.main.async {
                 self.pendingCallbackId = callbackId
                 let provider = ASAuthorizationAppleIDProvider()
                 let request = provider.createRequest()
                 request.requestedScopes = [.fullName, .email]
+                if let nonce, !nonce.isEmpty { request.nonce = nonce }
 
                 let controller = ASAuthorizationController(authorizationRequests: [request])
                 controller.delegate = self
@@ -8216,6 +8239,12 @@ extension CraftWebView.Coordinator: ASAuthorizationControllerDelegate, ASAuthori
                let tokenString = String(data: identityToken, encoding: .utf8) {
                 result["identityToken"] = tokenString
             }
+            // One use, five minutes: the server redeems it at Apple's token
+            // endpoint and so reads the identity straight from Apple.
+            if let authorizationCode = appleIDCredential.authorizationCode,
+               let codeString = String(data: authorizationCode, encoding: .utf8) {
+                result["authorizationCode"] = codeString
+            }
 
             resolveCallback(pendingCallbackId, result: result)
         }

package/dist/ios/templates/CraftHybrid.swift

@@ -539,6 +539,14 @@ final class CraftHybrid: NSObject {
             }, function () { arriving = null; finish(); });
           });
         },
+        // Put the page at `path` in place of where it is, without a step in
+        // its history: the shell is back at a native screen and the page
+        // behind it had no history left to go back through (it reloaded).
+        reset: function (path) {
+          if (!(navigate && current && current.__craftHybrid)) { location.replace(path); return Promise.resolve(false); }
+          hostNav = path;
+          return Promise.resolve(navigate(path, { instant: true, replace: true }));
+        },
         setBase: function (value) { base = typeof value === 'number' ? value : null; },
         // Back to `target` in the page's stack, after the shell popped the
         // entries above it.
@@ -667,6 +675,11 @@ final class CraftHybrid: NSObject {
         webView?.evaluateJavaScript("window.__craftHybrid && window.__craftHybrid.setBase(\(value))", completionHandler: nil)
     }
 
+    func pageReset(to path: String) {
+        guard let data = try? JSONSerialization.data(withJSONObject: [path]), let json = String(data: data, encoding: .utf8) else { return }
+        webView?.evaluateJavaScript("window.__craftHybrid && window.__craftHybrid.reset && window.__craftHybrid.reset(\(json)[0])", completionHandler: nil)
+    }
+
     func pageBack(to depth: Int) {
         webView?.evaluateJavaScript("window.__craftHybrid && window.__craftHybrid.backTo(\(max(0, depth)))", completionHandler: nil)
     }
@@ -752,7 +765,10 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
 
     init(config: CraftConfig) {
         self.config = config
-        webHost = UIHostingController(rootView: AnyView(CraftWebView(config: config).ignoresSafeArea()))
+        // Edge to edge, but not under the keyboard: the web view ends at its
+        // top. Under it, WebKit scrolled the page's layout viewport to show a
+        // focused field and carried every sticky header off the screen.
+        webHost = UIHostingController(rootView: AnyView(CraftWebView(config: config).ignoresSafeArea(.container)))
         super.init(nibName: nil, bundle: nil)
         hybrid.controller = self
     }
@@ -784,7 +800,7 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
         guard !webAttached else { return }
         webAttached = true
         webHost.view.backgroundColor = config.resolvedBackgroundColor
-        if #available(iOS 16.4, *) { webHost.safeAreaRegions = [] }
+        if #available(iOS 16.4, *) { webHost.safeAreaRegions = [.keyboard] }
         if let slot = visibleStack?.topViewController as? CraftHybridWebSlot, slot.isViewLoaded {
             moveWeb(to: slot, in: slot.view)
         } else {
@@ -1109,6 +1125,16 @@ final class CraftHybridController: UIViewController, UINavigationControllerDeleg
         if let depth = removed.compactMap({ ($0 as? CraftHybridWebSlot)?.depth }).min() {
             hybrid.pageBack(to: depth - 1)
         }
+        // Back at a tab's native root while the page, with no history left
+        // to go back through (it reloaded on the screen just popped), still
+        // shows that screen: it moves to the root's path. Left there, the
+        // next screen opened from the root was pushed on top of it and named
+        // it in its Back button ("Me" instead of "Today").
+        if !removed.isEmpty, !(viewController is CraftHybridWebSlot), navigationController.viewControllers.first === viewController,
+           let rootPath = nativePaths[ObjectIdentifier(viewController)], !rootPath.contains(":"), hybrid.pageDepth == 0,
+           let pagePath = hybrid.pagePath, CraftHybridRoutes.normalize(pagePath) != CraftHybridRoutes.normalize(rootPath) {
+            hybrid.pageReset(to: rootPath)
+        }
         guard navigationController === visibleStack else { return }
         if let slot = viewController as? CraftHybridWebSlot { adoptWeb(into: slot) } else { parkWeb() }
     }

package/dist/ios/templates/CraftNativeScreen.swift

@@ -1127,6 +1127,249 @@ private final class CraftNativeScrollView: UIScrollView, UIGestureRecognizerDele
 
 /// Text with padding of its own: the padding is inside the label, around
 /// the text, and counts in its measured size.
+/// A vector drawing (stx `svg.ts`): an `Svg` node and the shapes below it,
+/// replayed from each shape's `geometry` commands - 0 move, 1 line, 2 cubic,
+/// 3 quadratic, 4 close, in viewBox units - and scaled to the view. Paint is
+/// inherited down the tree as SVG does; `dark:` classes arrive already
+/// resolved for the appearance, so a redraw is all a theme change needs.
+private final class CraftNativeSvgView: UIView {
+    var drawing: [String: Any] = [:] {
+        didSet { setNeedsDisplay() }
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        isOpaque = false
+        backgroundColor = .clear
+        contentMode = .redraw
+    }
+
+    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+    var viewBox: CGRect? {
+        let props = drawing["props"] as? [String: Any] ?? [:]
+        guard let box = props["viewBox"] as? [Any], box.count == 4 else { return nil }
+        let n = box.compactMap { ($0 as? NSNumber).map { CGFloat(truncating: $0) } }
+        guard n.count == 4, n[2] > 0, n[3] > 0 else { return nil }
+        return CGRect(x: n[0], y: n[1], width: n[2], height: n[3])
+    }
+
+    override var intrinsicContentSize: CGSize { CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric) }
+
+    /// Height from the viewBox's proportions, when no style gave one.
+    override func sizeThatFits(_ size: CGSize) -> CGSize {
+        guard let box = viewBox, size.width > 0, size.width < CraftNativeFlexLayout.unbounded else { return CGSize(width: 0, height: 0) }
+        return CGSize(width: size.width, height: size.width * box.height / box.width)
+    }
+
+    private struct Paint {
+        var fill: String? = "#000000"
+        var stroke: String?
+        var strokeWidth: CGFloat = 1
+        var color: String? = "#000000"
+        var opacity: CGFloat = 1
+        var linecap: String?
+        var linejoin: String?
+        var dashes: [CGFloat]?
+
+        func merged(_ node: [String: Any]) -> Paint {
+            var next = self
+            let props = node["props"] as? [String: Any] ?? [:]
+            let style = node["style"] as? [String: Any] ?? [:]
+            if let color = style["color"] as? String { next.color = color }
+            if let fill = style["fill"] as? String ?? props["fill"] as? String { next.fill = fill }
+            if let stroke = style["stroke"] as? String ?? props["stroke"] as? String { next.stroke = stroke }
+            if let width = (style["strokeWidth"] as? NSNumber ?? props["strokeWidth"] as? NSNumber) { next.strokeWidth = CGFloat(truncating: width) }
+            if let opacity = props["opacity"] as? NSNumber ?? style["opacity"] as? NSNumber { next.opacity *= CGFloat(truncating: opacity) }
+            if let cap = props["strokeLinecap"] as? String { next.linecap = cap }
+            if let join = props["strokeLinejoin"] as? String { next.linejoin = join }
+            if let dashes = props["strokeDasharray"] as? [Any] { next.dashes = dashes.compactMap { ($0 as? NSNumber).map { CGFloat(truncating: $0) } } }
+            return next
+        }
+
+        func resolve(_ value: String?) -> UIColor? {
+            guard let value, value != "none", value != "transparent" else { return nil }
+            let text = value == "currentColor" ? (color ?? "#000000") : value
+            return UIColor(css: text) ?? UIColor(hex: text)
+        }
+    }
+
+    override func draw(_ rect: CGRect) {
+        guard let context = UIGraphicsGetCurrentContext() else { return }
+        if let box = viewBox {
+            let scale = min(bounds.width / box.width, bounds.height / box.height)
+            guard scale.isFinite, scale > 0 else { return }
+            context.translateBy(x: (bounds.width - box.width * scale) / 2, y: (bounds.height - box.height * scale) / 2)
+            context.scaleBy(x: scale, y: scale)
+            context.translateBy(x: -box.minX, y: -box.minY)
+        }
+        draw(children: drawing["children"] as? [Any] ?? [], paint: Paint().merged(drawing), in: context)
+    }
+
+    private func draw(children: [Any], paint: Paint, in context: CGContext) {
+        for case let shape as [String: Any] in children {
+            let style = shape["style"] as? [String: Any] ?? [:]
+            if style["display"] as? String == "none" { continue }
+            let own = paint.merged(shape)
+            switch shape["type"] as? String {
+            case "G":
+                draw(children: shape["children"] as? [Any] ?? [], paint: own, in: context)
+            case "SvgText":
+                drawText(shape, paint: own)
+            default:
+                guard let path = CraftNativeSvgView.path((shape["props"] as? [String: Any])?["geometry"]) else { continue }
+                context.saveGState()
+                context.setAlpha(own.opacity)
+                if let fill = own.resolve(own.fill) {
+                    fill.setFill()
+                    path.fill()
+                }
+                if let stroke = own.resolve(own.stroke), own.strokeWidth > 0 {
+                    stroke.setStroke()
+                    path.lineWidth = own.strokeWidth
+                    path.lineCapStyle = own.linecap == "round" ? .round : own.linecap == "square" ? .square : .butt
+                    path.lineJoinStyle = own.linejoin == "round" ? .round : own.linejoin == "bevel" ? .bevel : .miter
+                    if let dashes = own.dashes, !dashes.isEmpty { path.setLineDash(dashes, count: dashes.count, phase: 0) }
+                    path.stroke()
+                }
+                context.restoreGState()
+            }
+        }
+    }
+
+    private func drawText(_ node: [String: Any], paint: Paint) {
+        let text = (node["children"] as? [Any] ?? []).compactMap { $0 as? String }.joined()
+        guard !text.isEmpty else { return }
+        let props = node["props"] as? [String: Any] ?? [:]
+        let style = node["style"] as? [String: Any] ?? [:]
+        let size = CGFloat(truncating: props["fontSize"] as? NSNumber ?? style["fontSize"] as? NSNumber ?? 12)
+        let weight: UIFont.Weight = (props["fontWeight"] as? String ?? style["fontWeight"] as? String).map { ["500": .medium, "600": .semibold, "700": .bold, "bold": .bold][$0] ?? .regular } ?? .regular
+        let string = NSAttributedString(string: text, attributes: [
+            .font: UIFont.systemFont(ofSize: size, weight: weight),
+            .foregroundColor: paint.resolve(paint.fill) ?? UIColor.label,
+        ])
+        var x = CGFloat(truncating: props["x"] as? NSNumber ?? 0)
+        let y = CGFloat(truncating: props["y"] as? NSNumber ?? 0)
+        switch props["textAnchor"] as? String {
+        case "middle": x -= string.size().width / 2
+        case "end": x -= string.size().width
+        default: break
+        }
+        // y is the baseline, as in SVG.
+        string.draw(at: CGPoint(x: x, y: y - UIFont.systemFont(ofSize: size).ascender))
+    }
+
+    static func path(_ value: Any?) -> UIBezierPath? {
+        guard let list = value as? [Any] else { return nil }
+        let n = list.compactMap { ($0 as? NSNumber).map { CGFloat(truncating: $0) } }
+        guard !n.isEmpty, n.count == list.count else { return nil }
+        let path = UIBezierPath()
+        var i = 0
+        func point(_ at: Int) -> CGPoint { CGPoint(x: n[at], y: n[at + 1]) }
+        while i < n.count {
+            switch Int(n[i]) {
+            case 0 where i + 2 < n.count: path.move(to: point(i + 1)); i += 3
+            case 1 where i + 2 < n.count: path.addLine(to: point(i + 1)); i += 3
+            case 2 where i + 6 < n.count: path.addCurve(to: point(i + 5), controlPoint1: point(i + 1), controlPoint2: point(i + 3)); i += 7
+            case 3 where i + 4 < n.count: path.addQuadCurve(to: point(i + 3), controlPoint: point(i + 1)); i += 5
+            case 4: path.close(); i += 1
+            default: return path
+            }
+        }
+        return path
+    }
+}
+
+/// A view's linear gradient (stx `bg-gradient-to-br from-* via-* to-*`), kept
+/// as its first sublayer - under its subviews - and following its bounds and
+/// corners as they change.
+private final class CraftNativeGradientLayer: CAGradientLayer {
+    private var observations: [NSKeyValueObservation] = []
+
+    static func apply(to view: UIView, direction: String?, colors: [UIColor?]) {
+        let existing = view.layer.sublayers?.first as? CraftNativeGradientLayer
+        guard let direction, let from = colors[0], let to = colors[2] else {
+            existing?.removeFromSuperlayer()
+            return
+        }
+        let layer = existing ?? CraftNativeGradientLayer()
+        layer.colors = [from, colors[1], to].compactMap { $0?.cgColor }
+        let points: (CGPoint, CGPoint)
+        switch direction {
+        case "to-t": points = (CGPoint(x: 0.5, y: 1), CGPoint(x: 0.5, y: 0))
+        case "to-tr": points = (CGPoint(x: 0, y: 1), CGPoint(x: 1, y: 0))
+        case "to-r": points = (CGPoint(x: 0, y: 0.5), CGPoint(x: 1, y: 0.5))
+        case "to-br": points = (CGPoint(x: 0, y: 0), CGPoint(x: 1, y: 1))
+        case "to-bl": points = (CGPoint(x: 1, y: 0), CGPoint(x: 0, y: 1))
+        case "to-l": points = (CGPoint(x: 1, y: 0.5), CGPoint(x: 0, y: 0.5))
+        case "to-tl": points = (CGPoint(x: 1, y: 1), CGPoint(x: 0, y: 0))
+        default: points = (CGPoint(x: 0.5, y: 0), CGPoint(x: 0.5, y: 1))
+        }
+        layer.startPoint = points.0
+        layer.endPoint = points.1
+        layer.follow(view)
+        guard existing == nil else { return }
+        view.layer.insertSublayer(layer, at: 0)
+        layer.observations = [
+            view.observe(\.bounds) { [weak layer] view, _ in layer?.follow(view) },
+            view.layer.observe(\.cornerRadius) { [weak layer, weak view] _, _ in if let view { layer?.follow(view) } },
+        ]
+    }
+
+    private func follow(_ view: UIView) {
+        CATransaction.begin()
+        CATransaction.setDisableActions(true)
+        frame = view.bounds
+        cornerRadius = view.layer.cornerRadius
+        maskedCorners = view.layer.maskedCorners
+        masksToBounds = cornerRadius > 0
+        CATransaction.commit()
+    }
+}
+
+/// A button that keeps the padding its style asks for (`px-4 py-2`). A bare
+/// UIButton sizes to its title and ignores it, so a styled button drew as a
+/// pill with its label touching the edges. The padding is added to its size
+/// and the label laid out inside it, at the alignment the style asked for.
+private final class CraftNativeButton: UIButton {
+    var padding: UIEdgeInsets = .zero {
+        didSet {
+            guard padding != oldValue else { return }
+            invalidateIntrinsicContentSize()
+            setNeedsLayout()
+        }
+    }
+
+    override var intrinsicContentSize: CGSize {
+        let size = super.intrinsicContentSize
+        return CGSize(width: size.width + padding.left + padding.right, height: size.height + padding.top + padding.bottom)
+    }
+
+    override func sizeThatFits(_ size: CGSize) -> CGSize {
+        let inner = super.sizeThatFits(CGSize(
+            width: max(0, size.width - padding.left - padding.right),
+            height: max(0, size.height - padding.top - padding.bottom)
+        ))
+        return CGSize(width: inner.width + padding.left + padding.right, height: inner.height + padding.top + padding.bottom)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        guard padding != .zero, let label = titleLabel else { return }
+        let area = bounds.inset(by: padding)
+        let fitted = label.sizeThatFits(area.size)
+        let width = min(ceil(fitted.width), area.width)
+        let height = min(ceil(fitted.height), area.height)
+        let x: CGFloat
+        switch contentHorizontalAlignment {
+        case .left, .leading: x = area.minX
+        case .right, .trailing: x = area.maxX - width
+        default: x = area.midX - width / 2
+        }
+        label.frame = CGRect(x: x, y: area.midY - height / 2, width: width, height: height)
+    }
+}
+
 private final class CraftNativeLabel: UILabel {
     var insets = UIEdgeInsets.zero {
         didSet {
@@ -1283,6 +1526,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private weak var lastFocusedInput: UIView?
     private var flatListRows: [ObjectIdentifier: [String: RenderedNode]] = [:]
     private var flatListOwners: [String: String] = [:]
+    /// A drawing's shapes are not views: a change to one redraws its `Svg`.
+    private var svgOwners: [String: String] = [:]
     private let mutationDocument = CraftNativeMutationDocument()
     private let capabilityScope = UUID().uuidString
     private var pendingCapabilityRequests = Set<String>()
@@ -1778,13 +2023,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         button.addAction(action, for: .touchUpInside)
         button.translatesAutoresizingMaskIntoConstraints = false
         NSLayoutConstraint.activate([button.widthAnchor.constraint(equalToConstant: 44), button.heightAnchor.constraint(equalToConstant: 44)])
+        // The system's own fills and blue, as Apple's apps draw a bar's round
+        // buttons: they follow light, dark and Increase Contrast by themselves.
         let accent = spec["variant"] as? String == "accent"
-        button.backgroundColor = UIColor { traits in
-            if traits.userInterfaceStyle == .dark { return UIColor(red: 0.15, green: 0.39, blue: 0.92, alpha: accent ? 0.24 : 0.12) }
-            return UIColor(red: 0.15, green: 0.39, blue: 0.92, alpha: 0.08)
-        }
+        button.backgroundColor = accent ? UIColor.systemBlue.withAlphaComponent(0.15) : .tertiarySystemFill
         button.layer.cornerRadius = 22
-        button.tintColor = UIColor { $0.userInterfaceStyle == .dark ? UIColor(red: 0.58, green: 0.77, blue: 0.99, alpha: 1) : UIColor(red: 0.11, green: 0.30, blue: 0.85, alpha: 1) }
+        button.tintColor = .systemBlue
         button.setTitleColor(button.tintColor, for: .normal)
         button.titleLabel?.font = .systemFont(ofSize: 13, weight: .semibold)
         if let title = spec["title"] as? String, !title.isEmpty { button.setTitle(title, for: .normal) }
@@ -2118,7 +2362,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let focused = firstResponder(in: rootStack) ?? lastFocusedInput
         var applied = Set<String>()
         for id in ids {
-            let target = flatListOwners[id] ?? id
+            let target = flatListOwners[id] ?? svgOwners[id] ?? id
             guard applied.insert(target).inserted else { continue }
             guard let document = mutationDocument.node(target), let previous = renderedNode(target) else { return false }
             let next = reconcile(document, identity: previous.identity, path: target, previous: previous)
@@ -2228,6 +2472,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 attributes: buttonTitleAttributes(style, color: titleColor, font: font, forceUnderline: type == "Link")
             ), for: .normal)
             button.contentHorizontalAlignment = buttonAlignment(style["textAlign"])
+            (button as? CraftNativeButton)?.padding = paddingInsets(style)
             button.isEnabled = props["disabled"] as? Bool != true
             updateHandler(nonEmptyHandler(events["onPress"]) ?? nonEmptyHandler(events["onClick"]), for: button)
         case "TextInput":
@@ -2388,6 +2633,15 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             } else {
                 indicator.startAnimating()
             }
+        case "Svg":
+            let drawing = result as! CraftNativeSvgView
+            let owner = current.protocolId ?? path
+            svgOwners = svgOwners.filter { $0.value != owner }
+            for child in children { registerSvgOwnership(child, owner: owner) }
+            let previousBox = drawing.viewBox
+            drawing.drawing = node
+            if drawing.viewBox != previousBox { CraftNativeFlexLayout.invalidateAncestors(of: drawing) }
+            current.children = []
         case "Icon":
             configureIcon(result as! UIImageView, props: props, style: style)
         case "Image":
@@ -2480,7 +2734,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             label.numberOfLines = 0
             return label
         case "Button", "Link":
-            let button = UIButton(type: .system)
+            let button = CraftNativeButton(type: .system)
             button.addTarget(self, action: #selector(buttonPressed(_:)), for: .touchUpInside)
             return button
         case "TextInput":
@@ -2524,6 +2778,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             return CraftNativeScrollView()
         case "FlatList":
             return CraftNativeFlatList()
+        case "Svg":
+            return CraftNativeSvgView()
         case "View", "SafeAreaView":
             return CraftNativeFlowView()
         case "TouchableOpacity", "TouchableHighlight", "Pressable":
@@ -2689,6 +2945,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    private func registerSvgOwnership(_ node: Any, owner: String) {
+        guard let node = node as? [String: Any] else { return }
+        if let id = node["id"] as? String, !id.isEmpty { svgOwners[id] = owner }
+        for child in node["children"] as? [Any] ?? [] { registerSvgOwnership(child, owner: owner) }
+    }
+
     private func detach(_ node: RenderedNode, from stack: CraftNativeFlowView) {
         forgetHandlers(node)
         if node.type == "Modal" {
@@ -2709,6 +2971,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             flatListRows.removeValue(forKey: listKey)
             if let owner = node.protocolId { flatListOwners = flatListOwners.filter { $0.value != owner } }
         }
+        if node.view is CraftNativeSvgView, let owner = node.protocolId { svgOwners = svgOwners.filter { $0.value != owner } }
         let id = ObjectIdentifier(node.view)
         if let modal = node.view as? CraftNativeModalView { modal.resetForTeardown() }
         handlers.removeValue(forKey: id)
@@ -3019,6 +3282,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         updateDimension(width, constraint: &node.widthConstraint, anchor: view.widthAnchor)
         updateDimension(height, constraint: &node.heightConstraint, anchor: view.heightAnchor)
         view.backgroundColor = color(style["backgroundColor"]) ?? .clear
+        CraftNativeGradientLayer.apply(
+            to: view,
+            direction: style["gradientDirection"] as? String,
+            colors: [color(style["gradientFrom"]), color(style["gradientVia"]), color(style["gradientTo"])]
+        )
         view.alpha = number(style["opacity"]) ?? 1
         view.isHidden = style["display"] as? String == "none"
         view.craftRequestedCornerRadius = number(style["borderRadius"])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "craft-native",
-  "version": "0.0.135",
+  "version": "0.0.138",
   "type": "module",
   "description": "Build desktop apps with web languages - TypeScript SDK for Craft",
   "author": "Chris Breuer <chris@stacksjs.org>",