craft-native 0.0.296 → 0.0.299

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

@@ -2736,6 +2736,51 @@ private class CraftNativeIconView(context: Context) : TextView(context) {
     }
 }
 
+/** A platform EditText with the native end clear affordance and TalkBack action. */
+private class CraftNativeTextField(context: Context) : EditText(context) {
+    companion object { val CLEAR_ACTION_ID = View.generateViewId() }
+    var clearButtonMode = "never"
+    var onClearRequest: (() -> Unit)? = null
+    private var clearPressed = false
+    private fun showsClear() = isEnabled && keyListener != null && text?.isNotEmpty() == true && when (clearButtonMode) {
+        "always" -> true
+        "while-editing" -> isFocused
+        "unless-editing" -> !isFocused
+        else -> false
+    }
+    fun refreshClearButton() {
+        val icon = if (showsClear()) context.getDrawable(android.R.drawable.ic_menu_close_clear_cancel)?.mutate() else null
+        icon?.setTint(currentHintTextColor)
+        setCompoundDrawablesRelativeWithIntrinsicBounds(null, null, icon, null)
+    }
+    override fun onTextChanged(text: CharSequence?, start: Int, lengthBefore: Int, lengthAfter: Int) {
+        super.onTextChanged(text, start, lengthBefore, lengthAfter)
+        refreshClearButton()
+    }
+    override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: android.graphics.Rect?) {
+        super.onFocusChanged(focused, direction, previouslyFocusedRect)
+        refreshClearButton()
+    }
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        val inClear = showsClear() && if (layoutDirection == View.LAYOUT_DIRECTION_RTL) event.x <= compoundPaddingLeft else event.x >= width - compoundPaddingRight
+        if (event.actionMasked == MotionEvent.ACTION_DOWN && inClear) { clearPressed = true; return true }
+        if (clearPressed) {
+            if (event.actionMasked == MotionEvent.ACTION_UP) { clearPressed = false; if (inClear) onClearRequest?.invoke(); return true }
+            if (event.actionMasked == MotionEvent.ACTION_CANCEL) clearPressed = false
+            return true
+        }
+        return super.onTouchEvent(event)
+    }
+    override fun onInitializeAccessibilityNodeInfo(info: android.view.accessibility.AccessibilityNodeInfo) {
+        super.onInitializeAccessibilityNodeInfo(info)
+        if (showsClear()) info.addAction(android.view.accessibility.AccessibilityNodeInfo.AccessibilityAction(CLEAR_ACTION_ID, "Clear text"))
+    }
+    override fun performAccessibilityAction(action: Int, arguments: Bundle?): Boolean {
+        if (action == CLEAR_ACTION_ID && showsClear()) { onClearRequest?.invoke(); return true }
+        return super.performAccessibilityAction(action, arguments)
+    }
+}
+
 private class CraftNativeModalView(context: Context) : FrameLayout(context) {
     val content = CraftNativeFlexLayout(context)
     private val blocker = View(context)
@@ -2745,6 +2790,16 @@ private class CraftNativeModalView(context: Context) : FrameLayout(context) {
     var onRequestClose: ((String) -> Unit)? = null
     var viewportStyle = JSONObject()
     var declarationPath = ""
+    var sheetFraction: Float? = null
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val fraction = sheetFraction
+        val params = content.layoutParams as LayoutParams
+        params.height = if (fraction == null) LayoutParams.MATCH_PARENT else (View.MeasureSpec.getSize(heightMeasureSpec) * fraction).toInt()
+        params.gravity = Gravity.BOTTOM
+        content.layoutParams = params
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    }
 
     var transparent: Boolean = false
         set(value) {
@@ -3095,18 +3150,28 @@ internal class CraftNativeInputEcho {
     private var rendered: String? = null
     private var initialized = false
 
-    fun record(value: String) {
+    private var eventCount = 0
+
+    fun record(value: String): Int {
         pending.addLast(value)
         while (pending.size > 64) pending.removeFirst()
+        return ++eventCount
     }
 
-    fun accept(value: String?, nativeValue: String): Boolean {
+    fun accept(value: String?, nativeValue: String, acknowledged: Int? = null): Boolean {
         if (value == null) {
             initialized = false
             rendered = null
             pending.clear()
             return false
         }
+        if (acknowledged != null && acknowledged >= 0) {
+            if (acknowledged < eventCount) return false
+            pending.clear()
+            initialized = true
+            rendered = value
+            return nativeValue != value
+        }
         // A retained field can render the same prop more than once, after
         // its echo was consumed. That repeated prop must not overwrite a
         // keystroke that has not made the native/JS round trip yet.
@@ -4866,6 +4931,7 @@ class MainActivity : AppCompatActivity() {
         put("viewScroll")
         put("viewReparent")
         put("viewNonModalPresentation")
+        put("nativePlatformControls")
     }
 
     private fun appVersion(): Pair<String, String> = runCatching {
@@ -5360,7 +5426,7 @@ class MainActivity : AppCompatActivity() {
             previousId == null || previousId == protocolId || !screen.mutations.containsNode(previousId)
         }
         val previous = protocolId?.let { previousControls["id:$it"] } ?: keyedPrevious
-        val reusableInput = previous as? EditText
+        val reusableInput = previous as? CraftNativeTextField
         val control = when (type) {
             "Text" -> ((previous as? TextView)?.takeUnless { it is Button || it is EditText } ?: TextView(this)).apply {
                 includeFontPadding = false
@@ -5465,7 +5531,7 @@ class MainActivity : AppCompatActivity() {
                     }
                 }
             }
-            "TextInput" -> (reusableInput ?: EditText(this)).apply {
+            "TextInput" -> (reusableInput ?: CraftNativeTextField(this)).apply {
                 // Setting filters, the input type or single-line mode makes
                 // TextView set its text again, which puts the caret back at
                 // the start: typing then came out backwards. Each is set only
@@ -5531,9 +5597,21 @@ class MainActivity : AppCompatActivity() {
                 // them after keyed reconciliation.
                 val autofillHint = autofillHintFor(props)
                 if (autofillHint == null) setAutofillHints(*emptyArray()) else setAutofillHints(autofillHint)
+                clearButtonMode = craftNativeOptionalString(props.opt("clearButtonMode")) ?: "never"
+                onClearRequest = {
+                    if (isEnabled && keyListener != null) {
+                        screen.suppressedTextChanges.add(this)
+                        setText("")
+                        val eventCount = screen.inputEchoes.getOrPut(this) { CraftNativeInputEcho() }.record("")
+                        screen.handlers[this]?.let { current ->
+                            send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("text", "").put("clear", true).put("eventCount", eventCount)))
+                        }
+                    }
+                }
+                refreshClearButton()
                 val controlledValue = props.opt("value") as? String
                 val echoes = screen.inputEchoes.getOrPut(this) { CraftNativeInputEcho() }
-                if (echoes.accept(controlledValue, text.toString()) && controlledValue != null) {
+                if (echoes.accept(controlledValue, text.toString(), craftNativeInt(props.opt("mostRecentEventCount"), -1).takeIf { it >= 0 }) && controlledValue != null) {
                     screen.suppressedTextChanges.add(this)
                     setTextPreservingSelection(this, controlledValue)
                 }
@@ -5596,10 +5674,10 @@ class MainActivity : AppCompatActivity() {
                             (screen.inputIdentities[this@apply] ?: identity).let { screen.drafts[it] = updated }
                             if (screen.suppressedTextChanges.remove(this@apply)) return
                             val current = screen.handlers[this@apply] ?: return
-                            screen.inputEchoes.getOrPut(this@apply) { CraftNativeInputEcho() }.record(updated)
+                            val eventCount = screen.inputEchoes.getOrPut(this@apply) { CraftNativeInputEcho() }.record(updated)
                             send(screen, "EVENT", JSONObject()
                                 .put("handlerName", current)
-                                .put("nativeEvent", JSONObject().put("text", updated)))
+                                .put("nativeEvent", JSONObject().put("text", updated).put("eventCount", eventCount)))
                         }
                         override fun afterTextChanged(s: Editable?) {}
                     }
@@ -5607,6 +5685,57 @@ class MainActivity : AppCompatActivity() {
                     addTextChangedListener(watcher)
                 }
             }
+            "SegmentedControl" -> (previous as? android.widget.RadioGroup ?: android.widget.RadioGroup(this)).apply {
+                orientation = android.widget.LinearLayout.HORIZONTAL
+                // Reconciliation is silent. Only the platform's user selection
+                // listener below emits a value, with the stable option value.
+                setOnCheckedChangeListener(null)
+                val items = props.optJSONArray("items") ?: JSONArray()
+                val valuesChanged = childCount != items.length() || (0 until items.length()).any { index ->
+                    getChildAt(index)?.tag != craftNativePickerValue(items.optJSONObject(index)?.opt("value")).orEmpty()
+                }
+                if (valuesChanged) removeAllViews()
+                val requested = props.opt("value") as? String ?: craftNativePickerValue(props.opt("value")) ?: props.opt("selectedValue") as? String ?: craftNativePickerValue(props.opt("selectedValue"))
+                val disabled = craftNativeBoolean(props.opt("disabled"))
+                val foreground = color(craftNativeOptionalString(style.opt("color")).orEmpty(), Color.BLACK)
+                val values = mutableMapOf<Int, Pair<String, Int>>()
+                for (index in 0 until items.length()) {
+                    val item = items.optJSONObject(index) ?: continue
+                    val value = craftNativePickerValue(item.opt("value")) ?: ""
+                    val segment = (getChildAt(index) as? android.widget.RadioButton ?: android.widget.RadioButton(this@MainActivity)).apply {
+                        if (id == View.NO_ID) id = View.generateViewId()
+                        tag = value
+                        text = craftNativeOptionalString(item.opt("label")) ?: value
+                        contentDescription = craftNativeOptionalString(item.opt("spoken")) ?: text
+                        isEnabled = !disabled && !craftNativeBoolean(item.opt("disabled"))
+                        buttonDrawable = null
+                        gravity = Gravity.CENTER
+                        setTextColor(foreground)
+                        textSize = 13f
+                        minHeight = (32 * resources.displayMetrics.density).toInt()
+                        setPadding((8 * resources.displayMetrics.density).toInt(), 0, (8 * resources.displayMetrics.density).toInt(), 0)
+                        val selected = GradientDrawable().apply {
+                            setColor(color(craftNativeOptionalString(props.opt("tintColor")).orEmpty(), 0x33767680))
+                            cornerRadius = 7 * resources.displayMetrics.density
+                        }
+                        background = android.graphics.drawable.StateListDrawable().apply {
+                            addState(intArrayOf(android.R.attr.state_checked), selected)
+                            addState(intArrayOf(), ColorDrawable(Color.TRANSPARENT))
+                        }
+                        isChecked = value == requested
+                    }
+                    values[segment.id] = value to index
+                    if (segment.parent == null) addView(segment, android.widget.RadioGroup.LayoutParams(0, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
+                }
+                isEnabled = !disabled
+                val handler = craftNativeEventName(events, "onValueChange", "onChange")
+                if (handler.isNotBlank()) screen.handlers[this] = handler else screen.handlers.remove(this)
+                setOnCheckedChangeListener { _, checkedId ->
+                    val current = screen.handlers[this] ?: return@setOnCheckedChangeListener
+                    val (value, index) = values[checkedId] ?: return@setOnCheckedChangeListener
+                    send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("value", value).put("index", index)))
+                }
+            }
             "Picker" -> (previous as? Spinner ?: Spinner(this)).apply {
                 val itemOptions = props.optJSONArray("items")?.let { items ->
                     (0 until items.length()).mapNotNull { index ->
@@ -5676,6 +5805,14 @@ class MainActivity : AppCompatActivity() {
                 // the screen root. Keep the authored layout style with that
                 // promoted child so non-modal absolute coordinates remain in
                 // the screen viewport rather than the old clipped parent.
+                val sheetStyle = craftNativeOptionalString(props.opt("presentationStyle"))
+                val detents = props.optJSONArray("sheetDetents")
+                val firstDetent = detents?.optString(0)?.takeIf { it == "medium" || it == "large" } ?: "medium"
+                val selectedDetent = craftNativeOptionalString(props.opt("selectedDetent")) ?: firstDetent
+                val fraction = if (blocksBackground && sheetStyle in setOf("pageSheet", "formSheet")) {
+                    if (selectedDetent == "large") 0.92f else 0.5f
+                } else null
+                if (sheetFraction != fraction) { sheetFraction = fraction; requestLayout() }
                 viewportStyle = style
                 declarationPath = path
                 screen.view.setChildStyle(this, style, resources.displayMetrics.density)
@@ -5767,7 +5904,10 @@ class MainActivity : AppCompatActivity() {
                             intArrayOf(trueColor ?: resolvedFalse, resolvedFalse),
                         )
                     }
-                } ?: run { trackTintList = null }
+                } ?: run {
+                    val tint = craftNativeOptionalString(style.opt("color"))?.let { runCatching { craftNativeColor(it) }.getOrNull() }
+                    trackTintList = tint?.let { ColorStateList(arrayOf(intArrayOf(android.R.attr.state_checked), intArrayOf()), intArrayOf(it, Color.GRAY)) }
+                }
                 craftNativeOptionalString(props.opt("thumbColor"))
                     ?.let { runCatching { craftNativeColor(it) }.getOrNull() }
                     ?.let { thumbTintList = ColorStateList.valueOf(it) }
@@ -5853,7 +5993,7 @@ class MainActivity : AppCompatActivity() {
                 val animating = craftNativeBoolean(props.opt("animating"), true)
                 isIndeterminate = animating
                 visibility = if (!animating && craftNativeBoolean(props.opt("hidesWhenStopped"), true)) View.GONE else View.VISIBLE
-                indeterminateTintList = craftNativeOptionalString(props.opt("color"))
+                indeterminateTintList = (craftNativeOptionalString(props.opt("color")) ?: craftNativeOptionalString(style.opt("color")))
                     ?.let { runCatching { craftNativeColor(it) }.getOrNull() }
                     ?.let { ColorStateList.valueOf(it) }
             }
@@ -6085,7 +6225,7 @@ class MainActivity : AppCompatActivity() {
         val underlayHideHandler = if (type == "TouchableHighlight") craftNativeEventName(events, "onHideUnderlay").takeIf { it.isNotBlank() } else null
         if (underlayShowHandler != null) screen.pressUnderlayShowHandlers[control] = underlayShowHandler else screen.pressUnderlayShowHandlers.remove(control)
         if (underlayHideHandler != null) screen.pressUnderlayHideHandlers[control] = underlayHideHandler else screen.pressUnderlayHideHandlers.remove(control)
-        if (type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "KeyboardAvoidingView" && type != "StatusBar" && type != "RefreshControl" && type != "Map") {
+        if (type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "SegmentedControl" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "KeyboardAvoidingView" && type != "StatusBar" && type != "RefreshControl" && type != "Map") {
             val handler = craftNativeEventName(events, "onPress", "onClick")
             val disabled = craftNativeBoolean(props.opt("disabled"))
             val target = listOf(props.opt("href"), props.opt("to"))
@@ -6250,6 +6390,7 @@ class MainActivity : AppCompatActivity() {
         "link" -> "Link"
         "checkbox" -> "Checkbox"
         "textinput", "input" -> "TextInput"
+        "segmentedcontrol", "segmented-control" -> "SegmentedControl"
         "picker", "select" -> "Picker"
         "datepicker", "date-picker", "date" -> "DatePicker"
         "modal" -> "Modal"
@@ -7079,7 +7220,7 @@ class MainActivity : AppCompatActivity() {
         }
         val state = props.optJSONObject("accessibilityState")
         val disabled = craftNativeBoolean(props.opt("disabled")) || craftNativeBoolean(state?.opt("disabled"))
-        if (type !in setOf("Button", "Link", "Checkbox", "TextInput", "Picker", "DatePicker", "Modal", "Switch", "Slider", "ActivityIndicator")) {
+        if (type !in setOf("Button", "Link", "Checkbox", "TextInput", "Picker", "SegmentedControl", "DatePicker", "Modal", "Switch", "Slider", "ActivityIndicator")) {
             view.isEnabled = !disabled
         } else if (disabled) {
             view.isEnabled = false

package/dist/cli.js

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

package/dist/components/index.d.ts

@@ -721,6 +721,9 @@ export interface PressableProps extends ViewProps {
  * TextInput component props.
  */
 export interface TextInputProps extends BaseProps {
+    /** Runtime acknowledgement of the latest native edit; stale controlled echoes are ignored. */
+    mostRecentEventCount?: number;
+    clearButtonMode?: 'never' | 'while-editing' | 'unless-editing' | 'always';
     /** Style object or array */
     style?: StyleValue<TextStyle>;
     /** Current value */
@@ -831,6 +834,20 @@ export interface PickerProps extends BaseProps {
     onChange?: (value: string | number, index: number) => void;
     disabled?: boolean;
 }
+/** Platform-owned segmented selection (UISegmentedControl / Android RadioGroup). */
+export interface SegmentedControlProps extends BaseProps {
+    items: Array<PickerOption & {
+        disabled?: boolean;
+        spoken?: string;
+    }>;
+    value?: string | number;
+    disabled?: boolean;
+    tintColor?: string;
+    onValueChange?: (event: {
+        value: string;
+        index: number;
+    }) => void;
+}
 export interface DatePickerChange {
     value: string;
     iso: string;
@@ -890,6 +907,10 @@ export interface ModalProps extends BaseProps {
     nonModal?: boolean;
     /** When non-modal, consume an outside tap and call onRequestClose. */
     dismissOnOutsideTap?: boolean;
+    presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
+    sheetDetents?: Array<'medium' | 'large'>;
+    selectedDetent?: 'medium' | 'large';
+    grabberVisible?: boolean;
     animationType?: 'none' | 'fade' | 'slide';
     onShow?: () => void;
     onDismiss?: () => void;

package/dist/index.cjs

@@ -374,7 +374,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.296";
+var version = "0.0.299";
 
 // 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.296";
+var version = "0.0.299";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/ios/templates/CraftNativeActions.swift

@@ -42,7 +42,7 @@ enum CraftNativeActions {
     static func capabilities(config: CraftConfig) -> [String] {
         // `speech`, `audio` (background sound) and `eventStream` (a fetch read
         // as it arrives) need nothing the app has to declare.
-        var values = ["device", "clipboard", "haptics", "storage", "lifecycle", "fetch", "dialog", "speech", "audio", "eventStream", "linking", "badge", "animation", "viewFocus", "viewMeasure", "viewReparent", "viewNonModalPresentation"]
+        var values = ["device", "clipboard", "haptics", "storage", "lifecycle", "fetch", "dialog", "speech", "audio", "eventStream", "linking", "badge", "animation", "viewFocus", "viewMeasure", "viewReparent", "viewNonModalPresentation", "nativePlatformControls"]
         values.append("storageCompareAndSet")
         values.append("storageSetIfAbsent")
         values.append("viewScroll")

package/dist/ios/templates/CraftNativeScreen.swift

@@ -2578,6 +2578,7 @@ extension UIView {
         var responder: UIResponder? = next
         while let current = responder {
             if let screen = current as? CraftNativeScreenController { return screen }
+            if let sheet = current as? CraftNativeSheetController { return sheet.screen }
             responder = current.next
         }
         return nil
@@ -3976,13 +3977,141 @@ private final class CraftNativeImageBackgroundView: UIImageView {
     }
 }
 
-private final class CraftNativeModalView: UIView, UIGestureRecognizerDelegate {
+private final class CraftNativeSegmentElement: UIAccessibilityElement {
+    weak var control: CraftNativeSegmentedControl?
+    let index: Int
+    init(control: CraftNativeSegmentedControl, index: Int) {
+        self.control = control
+        self.index = index
+        super.init(accessibilityContainer: control)
+    }
+    override func accessibilityActivate() -> Bool {
+        guard let control, control.isEnabled, control.values.indices.contains(index), control.isEnabledForSegment(at: index) else { return false }
+        if control.selectedSegmentIndex != index {
+            control.selectedSegmentIndex = index
+            control.sendActions(for: .valueChanged)
+        }
+        return true
+    }
+}
+
+private final class CraftNativeSegmentedControl: UISegmentedControl {
+    var values: [String] = []
+    private var segments: [CraftNativeSegmentElement] = []
+    override var accessibilityElements: [Any]? {
+        get { segments }
+        set { /* The native segments, not the labelled group, own activation. */ }
+    }
+    func configureAccessibility(items: [[String: Any]]) {
+        if segments.count != items.count { segments = items.indices.map { CraftNativeSegmentElement(control: self, index: $0) } }
+        for (index, item) in items.enumerated() {
+            segments[index].accessibilityLabel = item["spoken"] as? String ?? item["label"] as? String ?? values[index]
+        }
+        refreshAccessibilityState()
+        setNeedsLayout()
+    }
+    func refreshAccessibilityState() {
+        for (index, segment) in segments.enumerated() {
+            segment.accessibilityTraits = [.button]
+            if selectedSegmentIndex == index { segment.accessibilityTraits.insert(.selected) }
+            if !isEnabled || !isEnabledForSegment(at: index) { segment.accessibilityTraits.insert(.notEnabled) }
+        }
+    }
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        guard !segments.isEmpty else { return }
+        let width = bounds.width / CGFloat(segments.count)
+        for (index, segment) in segments.enumerated() {
+            let visualIndex = effectiveUserInterfaceLayoutDirection == .rightToLeft ? segments.count - index - 1 : index
+            segment.accessibilityFrameInContainerSpace = CGRect(x: CGFloat(visualIndex) * width, y: 0, width: width, height: bounds.height)
+        }
+    }
+}
+
+private final class CraftNativeSheetController: UIViewController {
+    weak var screen: CraftNativeScreenController?
+    weak var content: CraftNativeFlowView?
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        content?.frame = view.bounds.inset(by: view.safeAreaInsets)
+    }
+}
+
+private final class CraftNativeModalView: UIView, UIGestureRecognizerDelegate, UISheetPresentationControllerDelegate {
     let contentStack = CraftNativeFlowView()
     private let blocker = UIView()
     private let backdropTap = UITapGestureRecognizer()
     private var renderedVisible = false
     private var animationGeneration = 0
     var onRequestClose: ((String) -> Void)?
+    weak var sheetPresenter: CraftNativeScreenController?
+    var presentationStyle = "overFullScreen"
+    var sheetDetents: [String] = ["medium", "large"]
+    var selectedDetent: String?
+    var grabberVisible = true
+    private var sheetController: CraftNativeSheetController?
+    var isPresentedAsSheet: Bool { sheetController != nil }
+
+    private func configureSheet(_ controller: CraftNativeSheetController) {
+        controller.isModalInPresentation = onRequestClose == nil
+        guard let sheet = controller.sheetPresentationController else { return }
+        let choices = sheetDetents.filter { $0 == "medium" || $0 == "large" }
+        let values = choices.isEmpty ? ["large"] : Array(Set(choices)).sorted { $0 == "medium" && $1 == "large" }
+        sheet.detents = values.map { $0 == "medium" ? .medium() : .large() }
+        sheet.prefersGrabberVisible = grabberVisible
+        if let selectedDetent, values.contains(selectedDetent) {
+            sheet.selectedDetentIdentifier = selectedDetent == "medium" ? .medium : .large
+        }
+        sheet.delegate = self
+    }
+
+    private func restoreSheetContent(_ controller: CraftNativeSheetController) {
+        guard sheetController === controller else { return }
+        contentStack.removeFromSuperview()
+        addSubview(contentStack)
+        sheetController = nil
+        setNeedsLayout()
+    }
+
+    private func setSheetVisible(_ visible: Bool, animated: Bool) {
+        renderedVisible = visible
+        isHidden = true // UIKit owns the scrim, safe area, grabber and pan.
+        guard visible else {
+            guard let controller = sheetController else { return }
+            controller.view.endEditing(true)
+            controller.dismiss(animated: animated) { [weak self, weak controller] in
+                guard let self, let controller else { return }
+                self.restoreSheetContent(controller)
+                if self.renderedVisible { self.setSheetVisible(true, animated: animated) }
+            }
+            return
+        }
+        if let controller = sheetController { configureSheet(controller); return }
+        // A newly rendered modal is attached to its screen after this pass.
+        DispatchQueue.main.async { [weak self] in
+            guard let self, self.renderedVisible, self.sheetController == nil,
+                  let presenter = self.sheetPresenter, presenter.view.window != nil else { return }
+            let controller = CraftNativeSheetController()
+            controller.screen = presenter
+            controller.modalPresentationStyle = self.presentationStyle == "formSheet" ? .formSheet : .pageSheet
+            controller.view.backgroundColor = .systemBackground
+            self.contentStack.removeFromSuperview()
+            controller.view.addSubview(self.contentStack)
+            controller.content = self.contentStack
+            self.sheetController = controller
+            self.configureSheet(controller)
+            var top: UIViewController = presenter
+            while let presented = top.presentedViewController { top = presented }
+            top.present(controller, animated: animated)
+        }
+    }
+
+    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
+        guard let controller = presentationController.presentedViewController as? CraftNativeSheetController else { return }
+        restoreSheetContent(controller)
+        renderedVisible = false
+        onRequestClose?("swipe")
+    }
 
     var transparent = false {
         didSet { blocker.backgroundColor = transparent ? .clear : UIColor.black.withAlphaComponent(0.32) }
@@ -4020,6 +4149,10 @@ private final class CraftNativeModalView: UIView, UIGestureRecognizerDelegate {
     /// press bookkeeping once turned that off for a view with no handler of
     /// its own, and a shown modal let every tap through to the screen behind.
     func setVisible(_ visible: Bool, opacity: CGFloat, animationType: String?) {
+        if blocksBackground && (presentationStyle == "pageSheet" || presentationStyle == "formSheet") {
+            setSheetVisible(visible, animated: animationType != "none")
+            return
+        }
         if visible { isUserInteractionEnabled = true }
         if renderedVisible == visible && isHidden == !visible {
             if visible, alpha != opacity { alpha = opacity }
@@ -4072,6 +4205,12 @@ private final class CraftNativeModalView: UIView, UIGestureRecognizerDelegate {
     }
 
     func resetForTeardown() {
+        renderedVisible = false
+        sheetPresenter = nil
+        if let controller = sheetController {
+            controller.dismiss(animated: false)
+            restoreSheetContent(controller)
+        }
         craftScreenController?.forgetFocusedInput(in: self)
         endEditing(true)
         animationGeneration += 1
@@ -4133,6 +4272,7 @@ private final class CraftNativeModalView: UIView, UIGestureRecognizerDelegate {
     override func layoutSubviews() {
         super.layoutSubviews()
         blocker.frame = bounds
+        guard sheetController == nil else { return }
         // The scrim covers the whole screen; what the modal holds stays
         // clear of the bars and the home indicator it is drawn over.
         contentStack.frame = bounds.inset(by: UIEdgeInsets(top: contentInsets.top, left: 0, bottom: contentInsets.bottom, right: 0))
@@ -5895,7 +6035,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     @discardableResult
     func handleBackForModal() -> Bool {
         let modal = view.subviews.reversed().compactMap { $0 as? CraftNativeModalView }.first {
-            !$0.isHidden && $0.alpha > 0.01 && ($0.blocksBackground || $0.dismissOnOutsideTap)
+            ($0.isPresentedAsSheet || (!$0.isHidden && $0.alpha > 0.01)) && ($0.blocksBackground || $0.dismissOnOutsideTap)
         }
         guard let modal else { return false }
         let hasHandler = modal.onRequestClose != nil
@@ -7957,6 +8097,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 textMaxLengths.removeValue(forKey: fieldId)
             }
             field.delegate = self
+            switch props["clearButtonMode"] as? String {
+            case "while-editing": field.clearButtonMode = .whileEditing
+            case "unless-editing": field.clearButtonMode = .unlessEditing
+            case "always": field.clearButtonMode = .always
+            default: field.clearButtonMode = .never
+            }
             (field as? CraftNativeTextField)?.padding = paddingInsets(style)
             field.textColor = color(style["color"]) ?? .label
             field.font = textFont(style, default: .systemFont(ofSize: 16))
@@ -7977,7 +8123,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             if field.isEnabled != desiredEnabled { field.isEnabled = desiredEnabled }
             applyAutofill(to: field, props: props)
             if let value = props["value"] as? String {
-                updateField(field, value: value)
+                updateField(field, value: value, acknowledged: (props["mostRecentEventCount"] as? NSNumber)?.intValue)
             } else if previous?.view !== field {
                 updateField(field, value: inputDrafts[current.identity] ?? props["defaultValue"] as? String)
             }
@@ -7989,6 +8135,27 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             if props["autoFocus"] as? Bool == true, !field.isFirstResponder {
                 DispatchQueue.main.async { _ = field.becomeFirstResponder() }
             }
+        case "SegmentedControl":
+            let control = result as! CraftNativeSegmentedControl
+            let items = props["items"] as? [[String: Any]] ?? []
+            let labels = items.map { $0["label"] as? String ?? craftNativePickerValue($0["value"]) ?? "" }
+            // UIKit owns the segments; only rebuild when the choices change.
+            // Setting a controlled value never dispatches valueChanged.
+            if control.numberOfSegments != labels.count || labels.enumerated().contains(where: { control.titleForSegment(at: $0.offset) != $0.element }) {
+                control.removeAllSegments()
+                for (index, label) in labels.enumerated() { control.insertSegment(withTitle: label, at: index, animated: false) }
+            }
+            control.values = items.map { $0["value"] as? String ?? craftNativePickerValue($0["value"]) ?? "" }
+            for (index, item) in items.enumerated() { control.setEnabled(item["disabled"] as? Bool != true, forSegmentAt: index) }
+            let selected = props["value"] as? String ?? craftNativePickerValue(props["value"]) ?? props["selectedValue"] as? String ?? craftNativePickerValue(props["selectedValue"])
+            control.selectedSegmentIndex = control.values.firstIndex(where: { $0 == selected }) ?? UISegmentedControl.noSegment
+            control.isEnabled = props["disabled"] as? Bool != true
+            control.selectedSegmentTintColor = color(props["tintColor"])
+            let titleAttributes: [NSAttributedString.Key: Any]? = color(style["color"]).map { [.foregroundColor: $0] }
+            control.setTitleTextAttributes(titleAttributes, for: .normal)
+            control.setTitleTextAttributes(titleAttributes, for: .selected)
+            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
@@ -8051,6 +8218,14 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "Modal":
             let modal = result as! CraftNativeModalView
             let focusBeforeContent = firstResponder(in: rootStack) ?? lastFocusedInput
+            modal.sheetPresenter = self
+            modal.presentationStyle = props["presentationStyle"] as? String ?? "overFullScreen"
+            modal.sheetDetents = props["sheetDetents"] as? [String] ?? ["medium", "large"]
+            modal.selectedDetent = props["selectedDetent"] as? String
+            modal.grabberVisible = props["grabberVisible"] as? Bool != false
+            modal.onRequestClose = nonEmptyHandler(events["onRequestClose"]).map { handler in
+                { [weak self] reason in self?.send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["reason": reason]]) }
+            }
             modal.transparent = props["transparent"] as? Bool == true
             modal.blocksBackground = props["nonModal"] as? Bool != true
             modal.dismissOnOutsideTap = props["dismissOnOutsideTap"] as? Bool == true
@@ -8124,7 +8299,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 toggle.onTintColor = color(track["true"])
                 toggle.tintColor = color(track["false"])
             } else {
-                toggle.onTintColor = nil
+                toggle.onTintColor = color(style["color"])
                 toggle.tintColor = nil
             }
             toggle.thumbTintColor = color(props["thumbColor"])
@@ -8162,7 +8337,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             }
             indicator.indicatorScale = scale
             applyTransform(style["transform"], to: indicator)
-            indicator.color = color(props["color"]) ?? .tintColor
+            indicator.color = color(props["color"]) ?? color(style["color"]) ?? .tintColor
             indicator.hidesWhenStopped = props["hidesWhenStopped"] as? Bool ?? true
             if props["animating"] as? Bool == false {
                 indicator.stopAnimating()
@@ -8335,7 +8510,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             reconcileChildren(children, in: stack, parent: current, path: path, style: style)
         }
         updateLongPressHandler(props["disabled"] as? Bool == true ? nil : events["onLongPress"], for: result)
-        if type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "StatusBar" && type != "RefreshControl" && type != "Map" {
+        if type != "Button" && type != "Link" && type != "Checkbox" && type != "TextInput" && type != "Picker" && type != "SegmentedControl" && type != "DatePicker" && type != "Modal" && type != "Switch" && type != "Slider" && type != "ActivityIndicator" && type != "StatusBar" && type != "RefreshControl" && type != "Map" {
             let disabled = props["disabled"] as? Bool == true
             updatePressHandler(disabled ? nil : nonEmptyHandler(events["onPress"]) ?? nonEmptyHandler(events["onClick"]), for: result)
             updatePressFeedback(
@@ -8391,6 +8566,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             field.addTarget(self, action: #selector(textBlurred(_:)), for: .editingDidEnd)
             field.addTarget(self, action: #selector(textSubmitted(_:)), for: .editingDidEndOnExit)
             return field
+        case "SegmentedControl":
+            let control = CraftNativeSegmentedControl()
+            control.addTarget(self, action: #selector(segmentChanged(_:)), for: .valueChanged)
+            return control
         case "Picker":
             let picker = UIPickerView()
             picker.dataSource = self
@@ -8457,6 +8636,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "link": return "Link"
         case "checkbox": return "Checkbox"
         case "textinput", "input": return "TextInput"
+        case "segmentedcontrol", "segmented-control": return "SegmentedControl"
         case "picker", "select": return "Picker"
         case "datepicker", "date-picker", "date": return "DatePicker"
         case "modal": return "Modal"
@@ -8806,6 +8986,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         submitHandlers.removeValue(forKey: id)
         inputIdentities.removeValue(forKey: id)
         unechoedText.removeValue(forKey: id)
+        inputEventCounts.removeValue(forKey: id)
         if node.type == "TextInput" && !preservingInputDrafts { inputDrafts.removeValue(forKey: node.identity) }
         longPressHandlers.removeValue(forKey: id)
         textMaxLengths.removeValue(forKey: id)
@@ -9023,19 +9204,21 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
-    /// Text a field sent its script that the script has not echoed back yet,
-    /// while the script runs on its own thread: a value that matches an older
-    /// one is the script catching up, not a new value, and applying it would
-    /// undo what was typed since.
+    /// Legacy runtimes echo values without a revision. Keep their bounded
+    /// history on either script thread; bridge delivery may still be delayed.
     private var unechoedText: [ObjectIdentifier: [String]] = [:]
+    private var inputEventCounts: [ObjectIdentifier: Int] = [:]
 
-    private func noteSentText(_ text: String, for view: UIView) {
-        guard CraftNativeScriptThread.isBackground else { return }
+    @discardableResult
+    private func noteSentText(_ text: String, for view: UIView) -> Int {
         let id = ObjectIdentifier(view)
+        let count = (inputEventCounts[id] ?? 0) + 1
+        inputEventCounts[id] = count
         var sent = unechoedText[id] ?? []
         sent.append(text)
         if sent.count > 32 { sent.removeFirst(sent.count - 32) }
         unechoedText[id] = sent
+        return count
     }
 
     /// Whether `value` is a stale echo of text the view has moved past: it
@@ -9053,9 +9236,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         return later > 0
     }
 
-    private func updateField(_ field: UITextField, value: String?) {
+    private func acceptsText(_ value: String, for view: UIView, acknowledged: Int?) -> Bool {
+        if let acknowledged, acknowledged >= 0 {
+            guard acknowledged >= (inputEventCounts[ObjectIdentifier(view)] ?? 0) else { return false }
+            unechoedText.removeValue(forKey: ObjectIdentifier(view))
+            return true // A current explicit reset may equal an older edit.
+        }
+        return !isStaleEcho(value, for: view)
+    }
+
+    private func updateField(_ field: UITextField, value: String?, acknowledged: Int? = nil) {
         guard let value = value, field.markedTextRange == nil else { return }
-        if isStaleEcho(value, for: field) || field.text == value { return }
+        if !acceptsText(value, for: field, acknowledged: acknowledged) || field.text == value { return }
         let selection = field.selectedTextRange
         let start = selection.map { field.offset(from: field.beginningOfDocument, to: $0.start) }
         let end = selection.map { field.offset(from: field.beginningOfDocument, to: $0.end) }
@@ -9067,9 +9259,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
-    private func updateTextView(_ textView: UITextView, value: String?) {
+    private func updateTextView(_ textView: UITextView, value: String?, acknowledged: Int? = nil) {
         guard let value = value, textView.markedTextRange == nil else { return }
-        if isStaleEcho(value, for: textView) || textView.text == value { return }
+        if !acceptsText(value, for: textView, acknowledged: acknowledged) || textView.text == value { return }
         let selection = textView.selectedTextRange
         let start = selection.map { textView.offset(from: textView.beginningOfDocument, to: $0.start) }
         let end = selection.map { textView.offset(from: textView.beginningOfDocument, to: $0.end) }
@@ -9132,7 +9324,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             craftTextView.placeholderColor = color(props["placeholderTextColor"])
             craftTextView.placeholderFont = textView.font
         }
-        updateTextView(textView, value: (props["value"] as? String) ?? defaultValue)
+        updateTextView(textView, value: (props["value"] as? String) ?? defaultValue, acknowledged: (props["mostRecentEventCount"] as? NSNumber)?.intValue)
         if textView.markedTextRange == nil {
             let attributes = inputTextAttributes(style, font: textView.font ?? .systemFont(ofSize: 16), alignment: textView.textAlignment)
             let styled = NSAttributedString(string: textView.text ?? "", attributes: attributes)
@@ -9836,7 +10028,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         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"].contains(type)
+        let container = ["ScrollView", "FlatList", "SectionList", "Picker", "SegmentedControl"].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))
@@ -9939,6 +10131,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// Return on a `returnKeyType="next"` field the screen does not handle
     /// itself (no `@submit`) goes to the next field down the screen, keeping
     /// the keyboard up. Every other Return ends editing and fires `@submit`.
+    func textFieldShouldClear(_ textField: UITextField) -> Bool {
+        guard textField.isEnabled else { return false }
+        textField.text = ""
+        let id = ObjectIdentifier(textField)
+        inputIdentities[id].map { inputDrafts[$0] = "" }
+        let eventCount = noteSentText("", for: textField)
+        if let handler = handlers[id] {
+            send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": "", "clear": true, "eventCount": eventCount]])
+        }
+        return false // The model receives exactly one edit, including lazy models.
+    }
+
     func textFieldShouldReturn(_ textField: UITextField) -> Bool {
         guard textField.returnKeyType == .next, submitHandlers[ObjectIdentifier(textField)] == nil,
               let next = inputAfter(textField) else { return true }
@@ -9985,8 +10189,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         (textView as? CraftNativeTextView)?.refreshPlaceholder()
         keepCaretVisible(in: textView)
         guard let handler = handlers[id] else { return }
-        noteSentText(textView.text ?? "", for: textView)
-        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": textView.text ?? ""]])
+        let eventCount = noteSentText(textView.text ?? "", for: textView)
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": textView.text ?? "", "eventCount": eventCount]])
     }
 
     func textViewDidChangeSelection(_ textView: UITextView) {
@@ -10042,14 +10246,22 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         inputIdentities[id].map { inputDrafts[$0] = sender.text ?? "" }
         let focused = sender.isFirstResponder ? sender : firstResponder(in: rootStack)
         guard let handler = handlers[id] else { return }
-        noteSentText(sender.text ?? "", for: sender)
-        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": sender.text ?? ""]])
+        let eventCount = noteSentText(sender.text ?? "", for: sender)
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["text": sender.text ?? "", "eventCount": eventCount]])
         restoreFocus(focused)
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self, weak focused] in
             self?.restoreFocus(focused)
         }
     }
 
+    @objc private func segmentChanged(_ sender: CraftNativeSegmentedControl) {
+        let index = sender.selectedSegmentIndex
+        guard sender.isEnabled, sender.values.indices.contains(index), sender.isEnabledForSegment(at: index),
+              let handler = handlers[ObjectIdentifier(sender)] else { return }
+        sender.refreshAccessibilityState()
+        send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": ["value": sender.values[index], "index": index]])
+    }
+
     @objc private func switchChanged(_ sender: UISwitch) {
         let id = ObjectIdentifier(sender)
         switchUserValues[id] = sender.isOn

package/package.json

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