@craft-native/ios 0.0.136 → 0.0.139

package/README.md

@@ -322,9 +322,11 @@ console.log(file.name, file.data); // base64 encoded
 await window.craft.downloadFile('https://example.com/file.pdf', 'document.pdf');
 await window.craft.saveFile('data:text/plain;base64,SGVsbG8=', 'hello.txt', 'text/plain');
 
-// Social Auth (Apple Sign In)
-const user = await window.craft.signInWithApple();
-console.log(user.userId, user.email, user.fullName, user.identityToken);
+// Social Auth (Apple Sign In). Needs `enableSocialAuth`, which also adds the
+// Sign in with Apple entitlement. Pass the SHA-256 of a one-time nonce and
+// send `authorizationCode` (with the raw nonce) to your server to redeem.
+const user = await window.craft.signInWithApple({ nonce: sha256Hex(rawNonce) });
+console.log(user.userId, user.email, user.name, user.identityToken, user.authorizationCode);
 
 // Audio Recording
 await window.craft.startAudioRecording();
@@ -369,6 +371,12 @@ await health.requestAuthorization(['workouts', 'heartRate', 'sleep'], { write: f
 const workouts = await health.getWorkouts({ startDate: Date.now() - 30 * 86400000 })
 // One value per local day: sums, averages, the latest weight, hours asleep.
 const hrv = await health.getDailyStatistics('heartRateVariability', { startDate: Date.now() - 30 * 86400000 })
+// Every heart-rate reading in a range (bpm, start/end, source and device), oldest first.
+const readings = await health.getHeartRateSamples({ startDate: Date.now() - 86400000 })
+// The night as Apple Health recorded it: in bed, awake, and each asleep stage.
+const nights = await health.getSleepIntervals({ startDate: Date.now() - 86400000 })
+// An app built before these reads existed has neither; check first.
+if (health.supports('getHeartRateSamples')) { /* ... */ }
 
 // Screen Capture
 const screenshotBase64 = await window.craft.takeScreenshot();

package/dist/cli.js

@@ -294,6 +294,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craft-native/ios",
-  "version": "0.0.136",
+  "version": "0.0.139",
   "homepage": "https://github.com/craft-native/craft/tree/main/packages/ios#readme",
   "repository": {
     "type": "git",

package/templates/CraftApp.swift

@@ -2225,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")
                 }
@@ -2358,6 +2358,27 @@ struct CraftWebView: UIViewRepresentable {
                 } else {
                     rejectCallback(callbackId, error: "HealthKit is disabled", code: "CAPABILITY_DISABLED")
                 }
+            case "getHealthHeartRateSamples":
+                if config.enableHealthKit {
+                    getHealthHeartRateSamples(
+                        startDate: body["startDate"] as? Double,
+                        endDate: body["endDate"] as? Double,
+                        limit: body["limit"] as? Int,
+                        callbackId: callbackId
+                    )
+                } else {
+                    rejectCallback(callbackId, error: "HealthKit is disabled", code: "CAPABILITY_DISABLED")
+                }
+            case "getHealthSleepIntervals":
+                if config.enableHealthKit {
+                    getHealthSleepIntervals(
+                        startDate: body["startDate"] as? Double,
+                        endDate: body["endDate"] as? Double,
+                        callbackId: callbackId
+                    )
+                } else {
+                    rejectCallback(callbackId, error: "HealthKit is disabled", code: "CAPABILITY_DISABLED")
+                }
 
             // MARK: - Live Activities
             case "startLiveActivity":
@@ -3584,8 +3605,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'));
@@ -4849,6 +4875,14 @@ struct CraftWebView: UIViewRepresentable {
                     getDailyStatistics: function(type, options) {
                         options = options || {};
                         return craft._invoke('getHealthDailyStatistics', {type: type, startDate: options.startDate, endDate: options.endDate});
+                    },
+                    getHeartRateSamples: function(options) {
+                        options = options || {};
+                        return craft._invoke('getHealthHeartRateSamples', {startDate: options.startDate, endDate: options.endDate, limit: options.limit});
+                    },
+                    getSleepIntervals: function(options) {
+                        options = options || {};
+                        return craft._invoke('getHealthSleepIntervals', {startDate: options.startDate, endDate: options.endDate});
                     }
                 };
                 craft.liveActivity = {
@@ -6605,12 +6639,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
@@ -7254,6 +7289,117 @@ struct CraftWebView: UIViewRepresentable {
             healthStore.execute(query)
         }
 
+        /// Every heart-rate reading between two instants, oldest first: the
+        /// beats per minute, when it was taken, and the app and device that
+        /// wrote it. A watch's workout readings can arrive as one series
+        /// sample; those also carry their count, lowest and highest.
+        private func getHealthHeartRateSamples(startDate: Double?, endDate: Double?, limit: Int?, callbackId: String?) {
+            guard let healthStore = healthStore else {
+                rejectCallback(callbackId, error: "HealthKit not available")
+                return
+            }
+            guard let heartType = HKQuantityType.quantityType(forIdentifier: .heartRate) else {
+                rejectCallback(callbackId, error: "Heart rate is unavailable")
+                return
+            }
+
+            let end = endDate.map { Date(timeIntervalSince1970: $0 / 1000) } ?? Date()
+            let start = startDate.map { Date(timeIntervalSince1970: $0 / 1000) } ?? Calendar.current.date(byAdding: .day, value: -1, to: end)!
+            let predicate = HKQuery.predicateForSamples(withStart: start, end: end, options: [])
+            let oldestFirst = NSSortDescriptor(key: HKSampleSortIdentifierStartDate, ascending: true)
+            let cap = max(1, min(limit ?? 10_000, 50_000))
+
+            let query = HKSampleQuery(sampleType: heartType, predicate: predicate, limit: cap, sortDescriptors: [oldestFirst]) { [weak self] _, samples, error in
+                if let error = error, (error as? HKError)?.code != .errorNoData {
+                    self?.rejectCallback(callbackId, error: error.localizedDescription)
+                    return
+                }
+
+                let bpm = HKUnit.count().unitDivided(by: .minute())
+                let rows: [[String: Any]] = (samples as? [HKQuantitySample] ?? []).map { sample in
+                    var item: [String: Any] = [
+                        "bpm": sample.quantity.doubleValue(for: bpm),
+                        "startDate": sample.startDate.timeIntervalSince1970 * 1000,
+                        "endDate": sample.endDate.timeIntervalSince1970 * 1000,
+                        "sourceName": sample.sourceRevision.source.name,
+                    ]
+                    if let device = sample.device?.name { item["deviceName"] = device }
+                    if let model = sample.device?.model { item["deviceModel"] = model }
+                    if let series = sample as? HKDiscreteQuantitySample, series.count > 1 {
+                        item["count"] = series.count
+                        item["min"] = series.minimumQuantity.doubleValue(for: bpm)
+                        item["max"] = series.maximumQuantity.doubleValue(for: bpm)
+                    }
+                    if let raw = sample.metadata?[HKMetadataKeyHeartRateMotionContext] as? NSNumber {
+                        switch HKHeartRateMotionContext(rawValue: raw.intValue) {
+                        case .sedentary: item["motionContext"] = "sedentary"
+                        case .active: item["motionContext"] = "active"
+                        default: break
+                        }
+                    }
+                    return item
+                }
+                self?.resolveCallback(callbackId, result: rows)
+            }
+            healthStore.execute(query)
+        }
+
+        /// A stable name for each sleep analysis value: in bed, awake, or one
+        /// of the asleep stages (`asleep` when the source does not stage it).
+        private static func sleepStageName(_ value: Int) -> String {
+            switch HKCategoryValueSleepAnalysis(rawValue: value) {
+            case .inBed: return "inBed"
+            case .awake: return "awake"
+            case .asleepCore: return "core"
+            case .asleepDeep: return "deep"
+            case .asleepREM: return "rem"
+            default: return "asleep"
+            }
+        }
+
+        /// Sleep between two instants, oldest first, as the sources wrote it:
+        /// time in bed and every asleep or awake stretch, each with its stage
+        /// and whether it counts as asleep, so a page can mark the night.
+        private func getHealthSleepIntervals(startDate: Double?, endDate: Double?, callbackId: String?) {
+            guard let healthStore = healthStore else {
+                rejectCallback(callbackId, error: "HealthKit not available")
+                return
+            }
+            guard let sleepType = HKObjectType.categoryType(forIdentifier: .sleepAnalysis) else {
+                rejectCallback(callbackId, error: "Sleep data is unavailable")
+                return
+            }
+
+            let end = endDate.map { Date(timeIntervalSince1970: $0 / 1000) } ?? Date()
+            let start = startDate.map { Date(timeIntervalSince1970: $0 / 1000) } ?? Calendar.current.date(byAdding: .day, value: -1, to: end)!
+            // Any interval that overlaps the range, so a night that began
+            // before it still counts.
+            let predicate = HKQuery.predicateForSamples(withStart: start, end: end, options: [])
+            let oldestFirst = NSSortDescriptor(key: HKSampleSortIdentifierStartDate, ascending: true)
+
+            let query = HKSampleQuery(sampleType: sleepType, predicate: predicate, limit: HKObjectQueryNoLimit, sortDescriptors: [oldestFirst]) { [weak self] _, samples, error in
+                if let error = error, (error as? HKError)?.code != .errorNoData {
+                    self?.rejectCallback(callbackId, error: error.localizedDescription)
+                    return
+                }
+
+                let notAsleep: Set<Int> = [HKCategoryValueSleepAnalysis.inBed.rawValue, HKCategoryValueSleepAnalysis.awake.rawValue]
+                let rows: [[String: Any]] = (samples as? [HKCategorySample] ?? []).map { sample in
+                    var item: [String: Any] = [
+                        "startDate": sample.startDate.timeIntervalSince1970 * 1000,
+                        "endDate": sample.endDate.timeIntervalSince1970 * 1000,
+                        "stage": Self.sleepStageName(sample.value),
+                        "asleep": !notAsleep.contains(sample.value),
+                        "sourceName": sample.sourceRevision.source.name,
+                    ]
+                    if let device = sample.device?.name { item["deviceName"] = device }
+                    return item
+                }
+                self?.resolveCallback(callbackId, result: rows)
+            }
+            healthStore.execute(query)
+        }
+
         // MARK: - Live Activities
         private func startLiveActivity(body: [String: Any], callbackId: String?) {
             guard #available(iOS 16.2, *), ActivityAuthorizationInfo().areActivitiesEnabled else {
@@ -8233,6 +8379,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/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"])