craft-native 0.0.484 → 0.0.487

package/dist/android/templates/MainActivityNative.kt.template

@@ -150,8 +150,8 @@ private fun craftNativeBoolean(value: Any?, fallback: Boolean = false): Boolean
 private fun craftNativeInt(value: Any?, fallback: Int): Int = (value as? Number)?.toInt() ?: fallback
 
 private fun craftNativePickerValue(value: Any?): String? = when (value) {
-    is String -> value.takeIf { it.isNotEmpty() }
-    is Number -> value.toDouble().takeIf { it.isFinite() }?.toString()
+    is String -> value
+    is Number -> value.toDouble().takeIf { it.isFinite() }?.let { value.toString() }
     else -> null
 }
 
@@ -389,13 +389,172 @@ private object CraftNativeSkewTransforms {
 }
 
 /** A DOM-free SVG surface for the geometry emitted by the shared STX native protocol. */
+/** Local native chart selection: no JS events are needed while scrubbing. */
+private class CraftNativeChartInspection(private val view: View) {
+    private var fingerprint = ""
+    private var title = ""
+    private var points = emptyList<JSONObject>()
+    private var selected = -1
+    private var startX = 0f
+    private var startY = 0f
+    private var dragging = false
+    private var abandoned = false
+    private val slop = android.view.ViewConfiguration.get(view.context).scaledTouchSlop
+    private val hold = Runnable { if (!abandoned) selectAt(startX) }
+    val enabled: Boolean get() = points.isNotEmpty()
+    private val density get() = view.resources.displayMetrics.density
+    private fun dp(value: Float) = value * density
+    fun configure(raw: JSONObject?) {
+        val next = raw?.toString().orEmpty()
+        if (next == fingerprint) return
+        fingerprint = next
+        title = raw?.optString("title").orEmpty()
+        val list = raw?.optJSONArray("points") ?: JSONArray()
+        points = (0 until list.length()).mapNotNull { list.optJSONObject(it) }.filter {
+            val x = it.optDouble("x", Double.NaN)
+            x.isFinite() && x in 0.0..1.0 && it.opt("label") is String
+        }
+        selected = -1
+        view.isFocusable = enabled
+        view.invalidate()
+    }
+    private fun announcement(point: JSONObject): String {
+        val rows = point.optJSONArray("rows") ?: JSONArray()
+        return (listOf(point.optString("label")) + (0 until rows.length()).mapNotNull { rows.optJSONObject(it)?.let { row -> row.optString("label") + ": " + row.optString("value") } }).joinToString(". ")
+    }
+    private fun select(index: Int) {
+        if (!enabled) return
+        val next = index.coerceIn(0, points.lastIndex)
+        if (next == selected) return
+        selected = next
+        view.performHapticFeedback(android.view.HapticFeedbackConstants.CLOCK_TICK)
+        view.sendAccessibilityEvent(android.view.accessibility.AccessibilityEvent.TYPE_VIEW_SELECTED)
+        view.invalidate()
+    }
+    private fun selectAt(x: Float) {
+        if (view.width <= 0) return
+        val fraction = (x / view.width).coerceIn(0f, 1f)
+        points.indices.minByOrNull { kotlin.math.abs(points[it].optDouble("x") - fraction) }?.let { select(it) }
+    }
+    fun touch(event: MotionEvent): Boolean {
+        if (!enabled) return false
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                startX = event.x; startY = event.y; dragging = false; abandoned = false
+                view.postDelayed(hold, 250)
+            }
+            MotionEvent.ACTION_MOVE -> {
+                val dx = kotlin.math.abs(event.x - startX); val dy = kotlin.math.abs(event.y - startY)
+                if (!dragging && maxOf(dx, dy) > slop) {
+                    view.removeCallbacks(hold)
+                    if (dy > dx) { abandoned = true; return false }
+                    dragging = true
+                    view.parent?.requestDisallowInterceptTouchEvent(true)
+                }
+                if (dragging && !abandoned) selectAt(event.x)
+            }
+            MotionEvent.ACTION_UP -> {
+                view.removeCallbacks(hold)
+                if (!abandoned) { view.performClick(); selectAt(event.x) }
+                view.parent?.requestDisallowInterceptTouchEvent(false)
+            }
+            MotionEvent.ACTION_CANCEL -> {
+                view.removeCallbacks(hold); abandoned = true; selected = -1
+                view.parent?.requestDisallowInterceptTouchEvent(false); view.invalidate()
+            }
+        }
+        return !abandoned
+    }
+    fun detach() { view.removeCallbacks(hold); selected = -1 }
+    fun accessibility(info: android.view.accessibility.AccessibilityNodeInfo) {
+        if (!enabled) return
+        info.className = "android.widget.SeekBar"
+        info.isScrollable = true
+        info.contentDescription = listOf(title, announcement(points[if (selected >= 0) selected else points.lastIndex])).filter { it.isNotBlank() }.joinToString(". ")
+        info.addAction(android.view.accessibility.AccessibilityNodeInfo.AccessibilityAction.ACTION_SCROLL_FORWARD)
+        info.addAction(android.view.accessibility.AccessibilityNodeInfo.AccessibilityAction.ACTION_SCROLL_BACKWARD)
+        if (selected >= 0) info.addAction(android.view.accessibility.AccessibilityNodeInfo.AccessibilityAction.ACTION_DISMISS)
+    }
+    fun action(action: Int): Boolean {
+        if (!enabled) return false
+        when (action) {
+            android.view.accessibility.AccessibilityNodeInfo.ACTION_SCROLL_FORWARD -> select(if (selected < 0) 0 else selected + 1)
+            android.view.accessibility.AccessibilityNodeInfo.ACTION_SCROLL_BACKWARD -> select(if (selected < 0) points.lastIndex else selected - 1)
+            android.view.accessibility.AccessibilityNodeInfo.ACTION_DISMISS -> { selected = -1; view.invalidate() }
+            else -> return false
+        }
+        return true
+    }
+    fun draw(canvas: Canvas) {
+        val point = points.getOrNull(selected) ?: return
+        val dark = view.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
+        val ink = if (dark) Color.rgb(249, 250, 251) else Color.rgb(17, 24, 39)
+        val secondary = if (dark) Color.rgb(209, 213, 219) else Color.rgb(75, 85, 99)
+        val paint = Paint(Paint.ANTI_ALIAS_FLAG)
+        val x = (point.optDouble("x") * view.width).toFloat()
+        paint.color = secondary; paint.alpha = 160; paint.strokeWidth = dp(1f); paint.style = Paint.Style.STROKE
+        paint.pathEffect = DashPathEffect(floatArrayOf(dp(2f), dp(3f)), 0f)
+        canvas.drawLine(x, 0f, x, view.height.toFloat(), paint)
+        paint.pathEffect = null; paint.alpha = 255; paint.style = Paint.Style.FILL
+        val y = point.optDouble("y", Double.NaN)
+        if (y.isFinite() && y in 0.0..1.0) {
+            paint.color = runCatching { craftNativeColor(point.optString("color", "#3b82f6")) }.getOrDefault(Color.BLUE)
+            canvas.drawCircle(x, (y * view.height).toFloat(), dp(5f), paint)
+            paint.color = if (dark) Color.BLACK else Color.WHITE; paint.style = Paint.Style.STROKE; paint.strokeWidth = dp(2f)
+            canvas.drawCircle(x, (y * view.height).toFloat(), dp(5f), paint)
+        }
+        val rows = point.optJSONArray("rows") ?: JSONArray()
+        val textSize = minOf(dp(20f), 12f * view.resources.displayMetrics.scaledDensity)
+        val rowHeight = textSize * 1.25f + dp(7f)
+        val width = minOf(dp(264f), view.width - dp(16f))
+        if (width <= 0 || view.height < dp(24f)) return
+        val height = minOf(view.height - dp(16f), dp(24f) + rowHeight * (rows.length() + if (title.isBlank()) 1 else 2))
+        val left = (if (x > view.width / 2f) x - width - dp(12f) else x + dp(12f)).coerceIn(dp(8f), view.width - width - dp(8f))
+        val panel = RectF(left, dp(8f), left + width, dp(8f) + height)
+        paint.style = Paint.Style.FILL; paint.color = if (dark) Color.rgb(36, 36, 38) else Color.WHITE
+        canvas.drawRoundRect(panel, dp(12f), dp(12f), paint)
+        paint.style = Paint.Style.STROKE; paint.strokeWidth = dp(1f); paint.color = if (dark) Color.rgb(70, 70, 74) else Color.rgb(226, 232, 240)
+        canvas.drawRoundRect(panel, dp(12f), dp(12f), paint)
+        canvas.save(); canvas.clipRect(panel.left + dp(10f), panel.top + dp(8f), panel.right - dp(10f), panel.bottom - dp(8f))
+        paint.style = Paint.Style.FILL; paint.textSize = textSize
+        fun text(value: String, left: Float, top: Float, width: Float, bold: Boolean = false, right: Boolean = false, muted: Boolean = false) {
+            paint.color = if (muted) secondary else ink
+            paint.typeface = if (bold) Typeface.DEFAULT_BOLD else Typeface.DEFAULT
+            val shown = TextUtils.ellipsize(value, android.text.TextPaint(paint), maxOf(0f, width), TextUtils.TruncateAt.END).toString()
+            canvas.drawText(shown, if (right) left + width - paint.measureText(shown) else left, top - paint.fontMetrics.ascent, paint)
+        }
+        var top = panel.top + dp(12f)
+        if (title.isNotBlank()) { text(title, left + dp(12f), top, width - dp(24f), bold = true); top += rowHeight }
+        text(point.optString("label"), left + dp(12f), top, width - dp(24f), muted = true); top += rowHeight
+        for (i in 0 until rows.length()) {
+            val row = rows.optJSONObject(i) ?: continue
+            var labelLeft = left + dp(12f)
+            if (row.opt("color") is String) {
+                paint.color = runCatching { craftNativeColor(row.optString("color")) }.getOrDefault(ink)
+                canvas.drawRoundRect(RectF(labelLeft, top + dp(4f), labelLeft + dp(8f), top + dp(12f)), dp(1f), dp(1f), paint); labelLeft += dp(14f)
+            }
+            text(row.optString("label"), labelLeft, top, width * 0.47f - (labelLeft - left), muted = true)
+            text(row.optString("value"), left + width * 0.48f, top, width * 0.52f - dp(12f), bold = true, right = true)
+            top += rowHeight
+        }
+        canvas.restore()
+    }
+}
+
 private class CraftNativeSvgView(context: Context) : View(context) {
+    private val inspection = CraftNativeChartInspection(this)
+    override fun onTouchEvent(event: MotionEvent): Boolean = inspection.touch(event) || super.onTouchEvent(event)
+    override fun performClick(): Boolean = super.performClick()
+    override fun onInitializeAccessibilityNodeInfo(info: android.view.accessibility.AccessibilityNodeInfo) { super.onInitializeAccessibilityNodeInfo(info); inspection.accessibility(info) }
+    override fun performAccessibilityAction(action: Int, arguments: Bundle?): Boolean = inspection.action(action) || super.performAccessibilityAction(action, arguments)
+
     override fun dispatchTouchEvent(event: MotionEvent): Boolean =
         CraftNativePointers.dispatch(this, event) { super.dispatchTouchEvent(it) }
 
     var drawing: JSONObject = JSONObject()
         set(value) {
             field = value
+            inspection.configure(value.optJSONObject("props")?.optJSONObject("inspection"))
             animates = hasAnimation(value.optJSONArray("children"))
             invalidate()
             requestLayout()
@@ -419,6 +578,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
     }
 
     override fun onDetachedFromWindow() {
+        inspection.detach()
         super.onDetachedFromWindow()
         updateFrames()
     }
@@ -633,6 +793,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         canvas.concat(viewTransform)
         drawNodes(canvas, drawing.optJSONArray("children") ?: JSONArray(), SvgPaint().merge(drawing))
         canvas.restore()
+        inspection.draw(canvas)
     }
 
     private fun viewBox(): Quadruple<Float, Float, Float, Float>? {

package/dist/cli.js

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

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/ios/templates/CraftNativeScreen.swift

@@ -168,8 +168,8 @@ private func craftNativeFontWeight(_ value: Any?) -> String? {
 }
 
 private func craftNativePickerValue(_ value: Any?) -> String? {
-    if let value = value as? String, !value.isEmpty { return value }
-    if let value = craftNativeNumber(value), value.doubleValue.isFinite { return String(value.doubleValue) }
+    if let value = value as? String { return value }
+    if let value = craftNativeNumber(value), value.doubleValue.isFinite { return value.stringValue }
     return nil
 }
 
@@ -5192,7 +5192,164 @@ private final class CraftNativeScrollView: UIScrollView, UIGestureRecognizerDele
 /// 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.
+/// Native inspection of an SVG plot. Coordinates are fractions of the plot's
+/// bounds; labels and values are already localized by the application. No JS
+/// callback or bridge round trip is needed while a finger moves.
+final class CraftChartInspection: NSObject, UIGestureRecognizerDelegate {
+    struct Reading {
+        let key: String
+        let x: CGFloat
+        let y: CGFloat?
+        let color: UIColor
+        let label: String
+        let rows: [(String, String, UIColor?)]
+        var announcement: String { ([label] + rows.map { $0.0 + ": " + $0.1 }).joined(separator: ". ") }
+    }
+    private weak var view: UIView?
+    private var configuration: NSDictionary = [:]
+    private(set) var readings: [Reading] = []
+    private(set) var selectedIndex = -1
+    private var title = ""
+    private let feedback = UISelectionFeedbackGenerator()
+    private lazy var tap = UITapGestureRecognizer(target: self, action: #selector(tapped(_:)))
+    private lazy var pan = UIPanGestureRecognizer(target: self, action: #selector(panned(_:)))
+    private lazy var hold = UILongPressGestureRecognizer(target: self, action: #selector(held(_:)))
+
+    init(view: UIView) {
+        self.view = view
+        super.init()
+        pan.delegate = self
+        hold.minimumPressDuration = 0.25
+        [tap, pan, hold].forEach { view.addGestureRecognizer($0); $0.isEnabled = false }
+    }
+
+    func configure(_ raw: Any?) {
+        let next = raw as? [String: Any] ?? [:]
+        guard !configuration.isEqual(to: next) else { return }
+        configuration = next as NSDictionary
+        title = next["title"] as? String ?? ""
+        readings = (next["points"] as? [[String: Any]] ?? []).compactMap { point in
+            guard let x = craftNativeNumber(point["x"])?.doubleValue, x.isFinite, x >= 0, x <= 1,
+                  let label = point["label"] as? String else { return nil }
+            let rawY = craftNativeNumber(point["y"])?.doubleValue
+            let y = rawY.flatMap { $0.isFinite && $0 >= 0 && $0 <= 1 ? CGFloat($0) : nil }
+            let rows = (point["rows"] as? [[String: Any]] ?? []).compactMap { row -> (String, String, UIColor?)? in
+                guard let label = row["label"] as? String, let value = row["value"] as? String else { return nil }
+                return (label, value, (row["color"] as? String).flatMap { UIColor(css: $0) })
+            }
+            return Reading(key: point["key"] as? String ?? label, x: CGFloat(x), y: y,
+                           color: (point["color"] as? String).flatMap { UIColor(css: $0) } ?? .systemBlue, label: label, rows: rows)
+        }
+        selectedIndex = -1
+        view?.isUserInteractionEnabled = !readings.isEmpty
+        if readings.isEmpty { view?.accessibilityTraits.remove(.adjustable); view?.accessibilityValue = nil }
+        [tap, pan, hold].forEach { $0.isEnabled = !readings.isEmpty }
+        configureAccessibility()
+        view?.setNeedsDisplay()
+    }
+
+    func configureAccessibility() {
+        guard let view, !readings.isEmpty else { return }
+        view.isAccessibilityElement = true
+        view.accessibilityTraits.insert(.adjustable)
+        view.accessibilityValue = readings[selectedIndex >= 0 ? selectedIndex : readings.count - 1].announcement
+    }
+
+    func select(_ index: Int, haptic: Bool = true) {
+        guard !readings.isEmpty else { return }
+        let next = max(0, min(readings.count - 1, index))
+        guard next != selectedIndex else { return }
+        selectedIndex = next
+        if haptic { feedback.selectionChanged() }
+        configureAccessibility()
+        view?.setNeedsDisplay()
+    }
+
+    func adjust(_ direction: Int) {
+        select(selectedIndex < 0 ? (direction < 0 ? readings.count - 1 : 0) : selectedIndex + direction)
+    }
+
+    @discardableResult func dismiss() -> Bool {
+        guard selectedIndex >= 0 else { return false }
+        selectedIndex = -1
+        configureAccessibility()
+        view?.setNeedsDisplay()
+        return true
+    }
+
+    private func select(at point: CGPoint) {
+        guard let view, view.bounds.width > 0 else { return }
+        let fraction = max(0, min(1, point.x / view.bounds.width))
+        if let nearest = readings.indices.min(by: { abs(readings[$0].x - fraction) < abs(readings[$1].x - fraction) }) { select(nearest) }
+    }
+    @objc private func tapped(_ gesture: UITapGestureRecognizer) { select(at: gesture.location(in: view)) }
+    @objc private func panned(_ gesture: UIPanGestureRecognizer) {
+        if gesture.state == .began || gesture.state == .changed { select(at: gesture.location(in: view)) }
+        if gesture.state == .cancelled { dismiss() }
+    }
+    @objc private func held(_ gesture: UILongPressGestureRecognizer) {
+        if gesture.state == .began || gesture.state == .changed { select(at: gesture.location(in: view)) }
+        if gesture.state == .cancelled { dismiss() }
+    }
+    func gestureRecognizerShouldBegin(_ gesture: UIGestureRecognizer) -> Bool {
+        guard gesture === pan else { return true }
+        let velocity = pan.velocity(in: view)
+        return abs(velocity.x) > abs(velocity.y)
+    }
+    func gestureRecognizer(_ gesture: UIGestureRecognizer, shouldBeRequiredToFailBy other: UIGestureRecognizer) -> Bool {
+        gesture === pan && other.view is UIScrollView
+    }
+
+    func draw(in context: CGContext, bounds: CGRect) {
+        guard readings.indices.contains(selectedIndex), bounds.width > 24, bounds.height > 24 else { return }
+        let reading = readings[selectedIndex], x = bounds.width * reading.x
+        context.saveGState()
+        defer { context.restoreGState() }
+        context.setStrokeColor(UIColor.secondaryLabel.withAlphaComponent(0.65).cgColor)
+        context.setLineWidth(1)
+        context.setLineDash(phase: 0, lengths: [2, 3])
+        context.move(to: CGPoint(x: x, y: 0)); context.addLine(to: CGPoint(x: x, y: bounds.height)); context.strokePath()
+        context.setLineDash(phase: 0, lengths: [])
+        if let y = reading.y {
+            let dot = CGRect(x: x - 5, y: bounds.height * y - 5, width: 10, height: 10)
+            context.setFillColor(reading.color.cgColor); context.fillEllipse(in: dot)
+            context.setStrokeColor(UIColor.systemBackground.cgColor); context.setLineWidth(2); context.strokeEllipse(in: dot)
+        }
+        let font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: .systemFont(ofSize: 12), maximumPointSize: 20)
+        let bold = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: .systemFont(ofSize: 12, weight: .semibold), maximumPointSize: 20)
+        let rowHeight = ceil(font.lineHeight) + 7
+        let width = min(264, bounds.width - 16)
+        let height = min(bounds.height - 16, 24 + rowHeight * CGFloat(reading.rows.count + (title.isEmpty ? 1 : 2)))
+        let left = max(8, min(bounds.width - width - 8, x > bounds.midX ? x - width - 12 : x + 12))
+        let panel = CGRect(x: left, y: 8, width: width, height: height)
+        context.setShadow(offset: CGSize(width: 0, height: 4), blur: 12, color: UIColor.black.withAlphaComponent(0.16).cgColor)
+        UIColor.secondarySystemGroupedBackground.setFill(); UIBezierPath(roundedRect: panel, cornerRadius: 12).fill()
+        context.setShadow(offset: .zero, blur: 0, color: nil)
+        UIColor.separator.withAlphaComponent(0.5).setStroke(); let border = UIBezierPath(roundedRect: panel.insetBy(dx: 0.5, dy: 0.5), cornerRadius: 12); border.lineWidth = 1; border.stroke()
+        context.clip(to: panel.insetBy(dx: 10, dy: 8))
+        let paragraph = NSMutableParagraphStyle(); paragraph.lineBreakMode = .byTruncatingTail
+        func text(_ value: String, rect: CGRect, strong: Bool = false, right: Bool = false, secondary: Bool = false) {
+            paragraph.alignment = right ? .right : .left
+            (value as NSString).draw(in: rect, withAttributes: [.font: strong ? bold : font, .foregroundColor: secondary ? UIColor.label.withAlphaComponent(0.72) : UIColor.label, .paragraphStyle: paragraph])
+        }
+        var top = panel.minY + 12
+        if !title.isEmpty { text(title, rect: CGRect(x: left + 12, y: top, width: width - 24, height: rowHeight), strong: true); top += rowHeight }
+        text(reading.label, rect: CGRect(x: left + 12, y: top, width: width - 24, height: rowHeight), secondary: true); top += rowHeight
+        for row in reading.rows {
+            var labelLeft = left + 12
+            if let color = row.2 { color.setFill(); UIBezierPath(roundedRect: CGRect(x: labelLeft, y: top + 4, width: 8, height: 8), cornerRadius: 1).fill(); labelLeft += 14 }
+            text(row.0, rect: CGRect(x: labelLeft, y: top, width: width * 0.47 - (labelLeft - left), height: rowHeight), secondary: true)
+            text(row.1, rect: CGRect(x: left + width * 0.48, y: top, width: width * 0.52 - 12, height: rowHeight), strong: true, right: true)
+            top += rowHeight
+        }
+    }
+}
+
 final class CraftNativeSvgView: UIView {
+    lazy var inspection = CraftChartInspection(view: self)
+    override func accessibilityIncrement() { inspection.adjust(1) }
+    override func accessibilityDecrement() { inspection.adjust(-1) }
+    override func accessibilityPerformEscape() -> Bool { inspection.dismiss() }
     override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
         craftPointerHitTest(point, with: event) { super.hitTest(point, with: event) }
     }
@@ -5200,6 +5357,7 @@ final class CraftNativeSvgView: UIView {
     var drawing: [String: Any] = [:] {
         didSet {
             animates = Self.hasAnimation(drawing["children"] as? [Any] ?? [])
+            inspection.configure((drawing["props"] as? [String: Any])?["inspection"])
             setNeedsDisplay()
             updateFrames()
         }
@@ -5426,14 +5584,17 @@ final class CraftNativeSvgView: UIView {
 
     override func draw(_ rect: CGRect) {
         guard let context = UIGraphicsGetCurrentContext() else { return }
+        context.saveGState()
         viewTransform = .identity
         if let box = viewBox {
             let props = drawing["props"] as? [String: Any] ?? [:]
-            guard let transform = CraftNativeSvgView.transform(box: box, bounds: bounds.size, preserveAspectRatio: props["preserveAspectRatio"] as? String) else { return }
+            guard let transform = CraftNativeSvgView.transform(box: box, bounds: bounds.size, preserveAspectRatio: props["preserveAspectRatio"] as? String) else { context.restoreGState(); return }
             viewTransform = transform
             context.concatenate(transform)
         }
         draw(children: drawing["children"] as? [Any] ?? [], paint: Paint().merged(drawing), in: context)
+        context.restoreGState()
+        inspection.draw(in: context, bounds: bounds)
     }
 
     private func draw(children: [Any], paint: Paint, in context: CGContext) {
@@ -6434,11 +6595,108 @@ enum CraftNativeBundle {
     }
 }
 
-private final class CraftNativePickerView: UIPickerView {
+/// One shared single-choice control, compact like a form field. UIKit owns
+/// presentation, dismissal, checkmarks, keyboard navigation and VoiceOver.
+final class CraftNativePickerView: UIButton {
+    struct Option: Equatable {
+        let value: String
+        let label: String
+        let disabled: Bool
+    }
+    private var options: [Option] = []
+    private var selectedValue: String?
+    private var handlerIdentity: String?
+    private var dispatch: ((String, Int) -> Void)?
+    private var revision = 0
+    private(set) var selectedLabel = ""
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        showsMenuAsPrimaryAction = true
+        contentHorizontalAlignment = .fill
+        titleLabel?.adjustsFontForContentSizeCategory = true
+        layer.cornerRadius = 10
+    }
+    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+    func update(options: [Option], selected: String?, enabled: Bool, handler: String?,
+                font: UIFont, foreground: UIColor, dispatch: @escaping (String, Int) -> Void) {
+        let candidate = selected ?? self.selectedValue
+        let resolved = options.contains(where: { $0.value == candidate }) ? candidate : options.first(where: { !$0.disabled })?.value
+        if self.options != options || self.selectedValue != resolved || self.isEnabled != enabled || self.handlerIdentity != handler {
+            revision += 1
+            interactions.compactMap { $0 as? UIContextMenuInteraction }.forEach { $0.dismissMenu() }
+        }
+        self.options = options
+        self.selectedValue = resolved
+        self.handlerIdentity = handler
+        self.dispatch = dispatch
+        isEnabled = enabled && options.contains(where: { !$0.disabled })
+        selectedLabel = options.first(where: { $0.value == resolved })?.label ?? ""
+        var configuration = UIButton.Configuration.plain()
+        configuration.title = selectedLabel
+        configuration.image = UIImage(systemName: "chevron.down")
+        configuration.imagePlacement = .trailing
+        configuration.imagePadding = 12
+        configuration.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 12, bottom: 10, trailing: 12)
+        configuration.titleAlignment = .leading
+        configuration.baseForegroundColor = foreground
+        configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { attributes in
+            var result = attributes
+            result.font = font
+            return result
+        }
+        configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in .secondaryLabel }
+        self.configuration = configuration
+        refreshMenu()
+        invalidateIntrinsicContentSize()
+    }
+
+    private func refreshMenu() {
+        menu = UIMenu(children: options.enumerated().map { index, option in
+            let choose = selection(index)
+            return UIAction(title: option.label, attributes: option.disabled ? [.disabled] : [],
+                            state: option.value == selectedValue ? .on : .off) { _ in choose() }
+        })
+    }
+
+    /// An open menu must not apply an old option to a rebound or disabled field.
+    func selection(_ index: Int) -> () -> Void {
+        let expected = revision
+        return { [weak self] in
+            guard let self, self.revision == expected, self.isEnabled,
+                  self.options.indices.contains(index), !self.options[index].disabled else { return }
+            let value = self.options[index].value
+            guard value != self.selectedValue else { return }
+            self.selectedValue = value
+            self.selectedLabel = self.options[index].label
+            self.configuration?.title = self.selectedLabel
+            self.accessibilityValue = self.selectedLabel
+            self.revision += 1
+            self.refreshMenu()
+            self.invalidateIntrinsicContentSize()
+            self.dispatch?(value, index)
+        }
+    }
+
+    func detach() {
+        revision += 1
+        dispatch = nil
+        interactions.compactMap { $0 as? UIContextMenuInteraction }.forEach { $0.dismissMenu() }
+        menu = nil
+    }
+
+    override var intrinsicContentSize: CGSize {
+        let size = super.intrinsicContentSize
+        return CGSize(width: max(44, size.width), height: max(44, size.height))
+    }
+    override func sizeThatFits(_ size: CGSize) -> CGSize {
+        let fitted = super.sizeThatFits(size)
+        return CGSize(width: fitted.width, height: max(44, fitted.height))
+    }
     override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
         craftPointerHitTest(point, with: event) { super.hitTest(point, with: event) }
     }
-
 }
 
 private final class CraftNativeDatePickerView: UIDatePicker {
@@ -6489,7 +6747,7 @@ private final class CraftNativeScreenRootView: UIView {
     }
 }
 
-final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate, UITextFieldDelegate, UITextViewDelegate, UIPickerViewDataSource, UIPickerViewDelegate {
+final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate, UITextFieldDelegate, UITextViewDelegate {
     private final class RenderedNode {
         /// A recycled list row's root takes the identity of the row it shows next.
         var identity: String
@@ -6553,7 +6811,6 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// the user's tap. Remember that native value briefly so the echo does not
     /// interrupt the animation and leave the thumb painted at its old edge.
     private var switchUserValues: [ObjectIdentifier: Bool] = [:]
-    private var pickerOptions: [ObjectIdentifier: [(value: String, label: String)]] = [:]
     private var modalVisibility: [ObjectIdentifier: Bool] = [:]
     private var modalFocusRestore: [ObjectIdentifier: UIView] = [:]
     private var layoutHandlers: [ObjectIdentifier: String] = [:]
@@ -9433,31 +9690,33 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             control.configureAccessibility(items: items)
             updateHandler(nonEmptyHandler(events["onValueChange"]) ?? nonEmptyHandler(events["onChange"]), for: control)
         case "Picker":
-            let picker = result as! UIPickerView
-            let itemOptions = (props["items"] as? [[String: Any]])?.compactMap { item -> (value: String, label: String)? in
-                guard let label = item["label"] as? String, !label.isEmpty else { return nil }
-                return (value: craftNativePickerValue(item["value"]) ?? label, label: label)
-            } ?? []
-            let options = itemOptions.isEmpty
-                ? children.compactMap { child -> (value: String, label: String)? in
-                    guard let node = child as? [String: Any], node["type"] as? String == "Text" else { return nil }
-                    let optionProps = node["props"] as? [String: Any] ?? [:]
-                    let label = (node["children"] as? [Any] ?? []).compactMap { $0 as? String }.joined()
-                    guard !label.isEmpty else { return nil }
-                    return (value: craftNativePickerValue(optionProps["value"]) ?? label, label: label)
+            let picker = result as! CraftNativePickerView
+            let rawItems = props["items"] as? [[String: Any]]
+            let options: [CraftNativePickerView.Option] = rawItems.map { items in
+                items.compactMap { item in
+                    guard let label = item["label"] as? String, !label.isEmpty else { return nil }
+                    return CraftNativePickerView.Option(value: craftNativePickerValue(item["value"]) ?? label,
+                                                        label: label, disabled: item["disabled"] as? Bool == true)
                 }
-                : itemOptions
-            let pickerID = ObjectIdentifier(picker)
-            pickerOptions[pickerID] = options
-            picker.reloadAllComponents()
-            if let selected = craftNativePickerValue(props["selectedValue"]) ?? craftNativePickerValue(props["value"]),
-               let row = options.firstIndex(where: { $0.value == selected }) {
-                picker.selectRow(row, inComponent: 0, animated: false)
-            } else if !options.isEmpty {
-                picker.selectRow(0, inComponent: 0, animated: false)
-            }
-            picker.isUserInteractionEnabled = props["disabled"] as? Bool != true
-            updateHandler(nonEmptyHandler(events["onValueChange"]) ?? nonEmptyHandler(events["onChange"]), for: picker)
+            } ?? children.compactMap { child in
+                guard let node = child as? [String: Any], node["type"] as? String == "Text" else { return nil }
+                let optionProps = node["props"] as? [String: Any] ?? [:]
+                let label = (node["children"] as? [Any] ?? []).compactMap { $0 as? String }.joined()
+                guard !label.isEmpty else { return nil }
+                return CraftNativePickerView.Option(value: craftNativePickerValue(optionProps["value"]) ?? label,
+                                                    label: label, disabled: optionProps["disabled"] as? Bool == true)
+            }
+            let handler = nonEmptyHandler(events["onValueChange"]) ?? nonEmptyHandler(events["onChange"])
+            updateHandler(handler, for: picker)
+            picker.update(options: options,
+                          selected: craftNativePickerValue(props["selectedValue"]) ?? craftNativePickerValue(props["value"]),
+                          enabled: props["disabled"] as? Bool != true,
+                          handler: handler, font: textFont(style, default: .preferredFont(forTextStyle: .body)),
+                          foreground: color(style["color"]) ?? .label) { [weak self, weak picker] value, index in
+                guard let self, let picker, let handler = self.handlers[ObjectIdentifier(picker)] else { return }
+                self.send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": value, "index": index]])
+            }
+            if style["backgroundColor"] == nil { picker.backgroundColor = .tertiarySystemFill }
         case "DatePicker":
             let picker = result as! UIDatePicker
             let mode = Self.datePickerMode(props["mode"])
@@ -9832,6 +10091,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
         result.craftPointerEvents = CraftNativePointerEvents.resolve(props: props, style: style)
         applyAccessibility(props, type: type, to: result)
+        (result as? CraftNativeSvgView)?.inspection.configureAccessibility()
+        if let picker = result as? CraftNativePickerView, props["accessibilityValue"] == nil {
+            picker.accessibilityValue = picker.selectedLabel
+        }
         // After applyAccessibility: it settles whether the view is an element
         // at all, and an action on a non-element is unreachable.
         updateAccessibilityActions(props["accessibilityActions"], handler: menuDisabled ? nil : events["onAccessibilityAction"], for: result)
@@ -9891,10 +10154,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             control.addTarget(self, action: #selector(segmentChanged(_:)), for: .valueChanged)
             return control
         case "Picker":
-            let picker = CraftNativePickerView()
-            picker.dataSource = self
-            picker.delegate = self
-            return picker
+            return CraftNativePickerView(frame: .zero)
         case "DatePicker":
             let picker = CraftNativeDatePickerView()
             picker.preferredDatePickerStyle = .compact
@@ -10282,10 +10542,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         // its subtree is gone.
         if !preservingInputDrafts {
             if let textView = node.view as? UITextView { textView.delegate = nil }
-            if let picker = node.view as? UIPickerView {
-                picker.delegate = nil
-                picker.dataSource = nil
-            }
+            (node.view as? CraftNativePickerView)?.detach()
             if let scroll = node.view as? UIScrollView { scroll.delegate = nil }
             (node.view as? UIControl)?.removeTarget(self, action: nil, for: .allEvents)
         }
@@ -10340,7 +10597,6 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         scrollMomentumEndHandlers.removeValue(forKey: id)
         sliderCompleteHandlers.removeValue(forKey: id)
         sliderSteps.removeValue(forKey: id)
-        pickerOptions.removeValue(forKey: id)
         modalVisibility.removeValue(forKey: id)
         if let recognizer = tapRecognizers.removeValue(forKey: id) {
             node.view.removeGestureRecognizer(recognizer)
@@ -10474,12 +10730,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// Views that take their own touches whatever handlers the screen gives
     /// them: native controls, a scroll view, a modal, and a video's controls (with
     /// interaction off, its play, scrubber and full screen never answered).
-    /// A map and a wheel picker too: neither is a UIControl, so a map with no
-    /// long-press handler - every map - was made non-interactive, and could
-    /// not be panned, zoomed, or have a pin tapped; a picker could not be spun.
+    /// Maps too: a map without a long-press handler must still pan, zoom,
+    /// and take taps on its pins.
     private func ownsTouches(_ view: UIView) -> Bool {
         view is UIControl || view is UIScrollView || view is CraftNativeModalView || view is CraftNativeVideoView
-            || view is MKMapView || view is UIPickerView
+            || view is MKMapView || ((view as? CraftNativeSvgView)?.inspection.readings.isEmpty == false)
     }
 
     private func updatePressHandler(_ handler: String?, for view: UIView) {
@@ -11468,9 +11723,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         // A video with its system controls is a group too: VoiceOver reaches
         // play, the scrubber, skipping and full screen inside it.
         let controlledVideo = type == "Video" && (props["controls"] as? Bool) == true
-        // UIPickerView exposes adjustable component wheels. Making the
-        // picker itself a leaf hides those wheels and their selected values.
-        let container = ["ScrollView", "FlatList", "SectionList", "Picker", "SegmentedControl", "Modal", "Drawer"].contains(type)
+        // Compact single-choice pickers are accessible menu buttons. Controls
+        // containing several independent elements remain semantic groups.
+        let container = ["ScrollView", "FlatList", "SectionList", "SegmentedControl", "Modal", "Drawer"].contains(type)
             || ["tablist", "radiogroup", "list", "menu", "menubar", "toolbar"].contains(role ?? "")
             || controlledVideo
         view.isAccessibilityElement = !container && role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Link", "Checkbox", "Image", "ImageBackground", "Video", "TextInput", "Picker", "DatePicker", "Switch", "Slider"].contains(type))
@@ -11482,6 +11737,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         var traits: UIAccessibilityTraits = []
         switch type {
         case "Slider", "DatePicker": traits.insert(.adjustable)
+        case "Picker": traits.insert(.button)
         default: break
         }
         switch role ?? type.lowercased() {
@@ -11894,27 +12150,6 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": Self.sliderEventValue(snappedSliderValue(sender.value, for: sender), step: sliderSteps[ObjectIdentifier(sender)])]])
     }
 
-    func numberOfComponents(in pickerView: UIPickerView) -> Int { 1 }
-
-    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
-        pickerOptions[ObjectIdentifier(pickerView)]?.count ?? 0
-    }
-
-    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
-        guard let options = pickerOptions[ObjectIdentifier(pickerView)], options.indices.contains(row) else { return nil }
-        return options[row].label
-    }
-
-    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
-        guard let options = pickerOptions[ObjectIdentifier(pickerView)], options.indices.contains(row),
-              let handler = handlers[ObjectIdentifier(pickerView)] else { return }
-        let option = options[row]
-        send(type: "EVENT", payload: [
-            "handlerName": handler,
-            "nativeEvent": ["value": option.value, "index": row],
-        ])
-    }
-
     @objc private func textFocused(_ sender: UITextField) {
         lastFocusedInput = sender
         // Moving between fields does not move the keyboard, so nothing else

package/package.json

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