@craft-native/ios 0.0.293 → 0.0.299

package/README.md

@@ -157,7 +157,7 @@ and linear gradients are applied by UIKit with the same style keys as Android;
 `elevation` remains Android-specific. Gradient layers follow the native view's
 bounds and corners through layout changes.
 
-The opt-in `native` renderer hosts compiled `.stx` screens in JavaScriptCore and renders their `View`, `SafeAreaView`, `KeyboardAvoidingView`, `StatusBar`, `RefreshControl`, `Text`, `Button`, `Link`, `Checkbox`, `TextInput`, `Picker`, `DatePicker`, `Switch`, `Slider`, `ActivityIndicator`, `Icon`, `Image`, `ImageBackground`, `Video`, `Map`, `Svg`, `G`, `SvgText`, `ScrollView`, `SectionList`, and recycling `FlatList` nodes as UIKit controls. `StatusBar` and `RefreshControl` are screen/scroll utility nodes rather than visible children. `Map` uses MapKit for trail polylines and marker taps; its overlays carry flat latitude/longitude `geometry` arrays, `strokeWidth` is expressed in logical points, and the camera supports controlled `region`, one-time `initialRegion`, and `fitToBounds`. `Svg` is a DOM-free drawing surface; grouped `G` and `SvgText` nodes are painted inside it. `Icon` uses SF Symbols with the shared symbol/name contract and accessibility metadata. `SectionList` uses the same native scroll host for ordinary `.stx` slot children; grouped section data should use `FlatList` until the section-data protocol is available. `FlatList` uses `UICollectionView` with stable keyed rows, incremental diffs, grids, horizontal and inverted layouts, list chrome, and end-reached pagination. Native views support `onLayout` callbacks with point-based frame measurements that refresh after safe-area or orientation changes. Flex items support `flex`, `flexGrow`, `flexShrink`, and numeric `flexBasis` for main-axis space distribution. Native screens also expose the versioned capability bridge: JSON storage and SQLite survive relaunch, lifecycle and deep-link events are scoped to the top route, and local notifications use `UNUserNotificationCenter`. Enable each capability in `craft.config.json`; disabled calls preserve Craft's `CAPABILITY_DISABLED` rejection code and every request has deterministic timeout/cancellation behavior. The default remains `web`; existing iOS apps are unchanged. `Checkbox` supports controlled `checked`/`value`, indeterminate state, and boolean `onValueChange`; `Picker` renders `<select>`/`<option>` values with `onValueChange` or `onChange`; `DatePicker` emits local date/time values plus ISO and millisecond `timestamp` fields; `Switch` supports state-aware `trackColor`, `thumbColor`, and iOS `ios_backgroundColor`; `Slider` supports track/thumb tint props and `step` snapping; `Image` reports load lifecycle events and structured failures; `Video` uses an `AVPlayerViewController` attached to the native screen for URI playback, native controls, and route-safe teardown. `craft.navigation.setOptions` also accepts a `tabAccessory` destination beside the tab pill; it uses an app-local `path`, `title`, `symbol`, optional `badge`, and `accessibilityLabel`, and `null` clears it. The portable component, capability, list, style, image-source, event, accessibility, and reconciliation behavior is specified in the [Native STX guide](../../docs/guides/native-stx.md).
+The opt-in `native` renderer hosts compiled `.stx` screens in JavaScriptCore and renders their `View`, `SafeAreaView`, `KeyboardAvoidingView`, `StatusBar`, `RefreshControl`, `Text`, `Button`, `Link`, `Checkbox`, `TextInput`, `Picker`, `SegmentedControl`, `DatePicker`, `Switch`, `Slider`, `ActivityIndicator`, `Icon`, `Image`, `ImageBackground`, `Video`, `Map`, `Svg`, `G`, `SvgText`, `ScrollView`, `SectionList`, and recycling `FlatList` nodes as UIKit controls. `StatusBar` and `RefreshControl` are screen/scroll utility nodes rather than visible children. `Map` uses MapKit for trail polylines and marker taps; its overlays carry flat latitude/longitude `geometry` arrays, `strokeWidth` is expressed in logical points, and the camera supports controlled `region`, one-time `initialRegion`, and `fitToBounds`. `Svg` is a DOM-free drawing surface; grouped `G` and `SvgText` nodes are painted inside it. `Icon` uses SF Symbols with the shared symbol/name contract and accessibility metadata. `SectionList` uses the same native scroll host for ordinary `.stx` slot children; grouped section data should use `FlatList` until the section-data protocol is available. `FlatList` uses `UICollectionView` with stable keyed rows, incremental diffs, grids, horizontal and inverted layouts, list chrome, and end-reached pagination. Native views support `onLayout` callbacks with point-based frame measurements that refresh after safe-area or orientation changes. Flex items support `flex`, `flexGrow`, `flexShrink`, and numeric `flexBasis` for main-axis space distribution. Native screens also expose the versioned capability bridge: JSON storage and SQLite survive relaunch, lifecycle and deep-link events are scoped to the top route, and local notifications use `UNUserNotificationCenter`. Enable each capability in `craft.config.json`; disabled calls preserve Craft's `CAPABILITY_DISABLED` rejection code and every request has deterministic timeout/cancellation behavior. The default remains `web`; existing iOS apps are unchanged. `Checkbox` supports controlled `checked`/`value`, indeterminate state, and boolean `onValueChange`; `Picker` renders `<select>`/`<option>` values with `onValueChange` or `onChange`; `DatePicker` emits local date/time values plus ISO and millisecond `timestamp` fields; `Switch` supports state-aware `trackColor`, `thumbColor`, and iOS `ios_backgroundColor`; `Slider` supports track/thumb tint props and `step` snapping; `Image` reports load lifecycle events and structured failures; `Video` uses an `AVPlayerViewController` attached to the native screen for URI playback, native controls, and route-safe teardown. `craft.navigation.setOptions` also accepts a `tabAccessory` destination beside the tab pill; it uses an app-local `path`, `title`, `symbol`, optional `badge`, and `accessibilityLabel`, and `null` clears it. The portable component, capability, list, style, image-source, event, accessibility, and reconciliation behavior is specified in the [Native STX guide](../../docs/guides/native-stx.md).
 
 `FlatList` rows are authored as keyed `:for` child rows in native STX; the
 maintained protocol does not serialize `data`/`renderItem` callbacks.
@@ -391,6 +391,29 @@ Appearance and navigation:
 - `swipeNavigation`: an edge swipe goes back and forward through the page's
   history, pushState entries included.
 
+Native tab-bar selection styling is opt-in and lives in the generated config,
+so the generated Swift never needs to be patched:
+
+```json
+{
+  "tabBar": {
+    "selection": { "cornerRadius": 8, "color": "#123456" }
+  },
+  "postGenerate": {
+    "command": "bun",
+    "args": ["run", "scripts/customize-native.ts"]
+  }
+}
+```
+
+`cornerRadius` is measured in points and `color` is `#RRGGBB`; omit either to
+keep its host default. `postGenerate` runs after `craft ios build` has written
+the Xcode project, with the generated project as its working directory. Craft
+does not invoke a shell: `command` and `args` are passed directly. The hook
+receives `CRAFT_PROJECT_ROOT`, `CRAFT_PLATFORM=ios`, and
+`CRAFT_GENERATE_PHASE=build`. A missing executable, non-zero exit, or invalid
+configuration fails the build with the hook's stderr in the diagnostic.
+
 Debug builds let Safari's Develop menu inspect the webview, and relay the
 page's console, uncaught errors, rejected promises and failed script loads to
 the device log as `[craft page] …`, so a page that only breaks inside the app
@@ -1282,3 +1305,22 @@ nativeFonts: {
 
 The iOS project registers the files through `UIAppFonts`. Android loads bundled
 typefaces from assets. Both work offline; a missing file fails the build.
+
+### Platform selection, clear fields and sheets
+
+`SegmentedControl` takes `items: [{value, label, disabled?}]` and a controlled
+`value`, and emits `onValueChange` with `{value, index}`. iOS uses UIKit's
+`UISegmentedControl`; Android uses a horizontal native `RadioGroup` with
+selected segments. Reconciliation does not emit a user selection.
+
+`TextInput.clearButtonMode` is `never`, `while-editing`, `unless-editing` or
+`always`. The native clear affordance emits a single text edit carrying
+`{text: '', clear: true}`; Android also exposes a TalkBack clear action.
+
+`Modal` accepts `presentationStyle: 'pageSheet' | 'formSheet'` with
+`sheetDetents: ['medium', 'large']`, `selectedDetent` and `grabberVisible`.
+iOS presents a real `UISheetPresentationController`, including system pan
+and detents; Android sizes its native bottom panel to the selected detent
+without an extra dependency. Omitting presentationStyle keeps the existing
+full-screen overlay. A native sheet's close request still belongs to its
+owner, which sets visible to false.

package/dist/cli.js

@@ -325,6 +325,30 @@ function installNativeBundle(source, output) {
 function hasInstalledNativeBundle(output) {
   return existsSync(join3(output, "dist", "native-screen.js")) || existsSync(join3(output, "dist", "native-screens"));
 }
+function runPostGenerateHook(hook, output, phase = "build") {
+  if (!hook)
+    return;
+  if (typeof hook.command !== "string" || !hook.command.trim())
+    throw new Error("iOS postGenerate.command must be a non-empty executable");
+  if (hook.args !== undefined && (!Array.isArray(hook.args) || hook.args.some((argument) => typeof argument !== "string")))
+    throw new Error("iOS postGenerate.args must be an array of strings");
+  const command = [hook.command, ...hook.args ?? []];
+  let result;
+  try {
+    result = Bun.spawnSync(command, {
+      cwd: output,
+      env: { ...process.env, CRAFT_PROJECT_ROOT: output, CRAFT_PLATFORM: "ios", CRAFT_GENERATE_PHASE: phase },
+      stdout: "inherit",
+      stderr: "pipe"
+    });
+  } catch (error) {
+    throw new Error(`iOS postGenerate hook could not start in ${output}: ${hook.command}`, { cause: error });
+  }
+  if (result.exitCode !== 0) {
+    const stderr = result.stderr?.toString().trim();
+    throw new Error(`iOS postGenerate hook failed in ${output} with exit code ${result.exitCode}${stderr ? `: ${stderr}` : ""}`);
+  }
+}
 var DEFAULT_CONFIG = {
   renderer: "web",
   version: "1.0.0",
@@ -1030,6 +1054,11 @@ async function init(options) {
   if (config.renderer !== "web" && config.renderer !== "native") {
     throw new Error(`Unknown iOS renderer: ${config.renderer}. Expected web or native.`);
   }
+  const selection = config.tabBar?.selection;
+  if (selection?.cornerRadius !== undefined && (!Number.isFinite(selection.cornerRadius) || selection.cornerRadius < 0))
+    throw new Error("iOS tabBar.selection.cornerRadius must be a finite non-negative number");
+  if (selection?.color !== undefined && !/^#[0-9a-f]{6}$/i.test(selection.color))
+    throw new Error("iOS tabBar.selection.color must be a #RRGGBB color");
   if (config.enableBackgroundLocation)
     config.enableGeolocation = true;
   const problems = hybridConfigProblems(config);
@@ -1225,6 +1254,7 @@ async function build(options) {
       cause: error
     });
   }
+  runPostGenerateHook(config.postGenerate, output);
   console.log("");
 }
 async function open(options) {

package/dist/index.d.ts

@@ -9,6 +9,19 @@ export declare function syncNativeFonts(fonts: CraftConfig['nativeFonts'], outpu
 /** This package's version, which the app names in its user agent (`Craft/<version>`). */
 export declare function resolveCraftVersion(startDir?: string): string;
 export type CraftAppearance = 'light' | 'dark' | 'system';
+/** A declared command Craft runs after the native project has been generated. */
+export interface CraftPostGenerateHook {
+    command: string;
+    args?: string[];
+}
+export interface CraftTabBarConfig {
+    selection?: {
+        /** The selected tab indicator's corner radius in points; omitted keeps a capsule. */
+        cornerRadius?: number;
+        /** The selected tab indicator fill as #RRGGBB. */
+        color?: string;
+    };
+}
 export interface CraftConfig {
     appShortcuts?: CraftAppShortcut[];
     /** Bundled font files keyed by their PostScript font name, used as native fontFamily. */
@@ -29,6 +42,10 @@ export interface CraftConfig {
      * and `dark` pin one. Unset keeps the older `darkMode` switch.
      */
     appearance?: CraftAppearance;
+    /** Static native tab-bar styling applied before the page's own tabBar.set call. */
+    tabBar?: CraftTabBarConfig;
+    /** Runs from the generated project root after `craft ios build` writes it. */
+    postGenerate?: CraftPostGenerateHook;
     backgroundColor?: string;
     /** The launch and webview background while the phone is in Dark Mode. */
     backgroundColorDark?: string;
@@ -409,6 +426,13 @@ export interface BuildOptions {
      */
     runtimeDir?: string | null;
 }
+/**
+ * Run the app's declared generator hook without invoking a shell.
+ *
+ * A hook gets the generated project as its cwd and explicit metadata so a
+ * patch can target the right platform and phase without guessing from paths.
+ */
+export declare function runPostGenerateHook(hook: CraftPostGenerateHook | undefined, output: string, phase?: 'build'): void;
 export interface OpenOptions {
     output: string;
 }

package/dist/index.js

@@ -512,6 +512,30 @@ function installNativeBundle(source, output) {
 function hasInstalledNativeBundle(output) {
   return existsSync(join3(output, "dist", "native-screen.js")) || existsSync(join3(output, "dist", "native-screens"));
 }
+function runPostGenerateHook(hook, output, phase = "build") {
+  if (!hook)
+    return;
+  if (typeof hook.command !== "string" || !hook.command.trim())
+    throw new Error("iOS postGenerate.command must be a non-empty executable");
+  if (hook.args !== undefined && (!Array.isArray(hook.args) || hook.args.some((argument) => typeof argument !== "string")))
+    throw new Error("iOS postGenerate.args must be an array of strings");
+  const command = [hook.command, ...hook.args ?? []];
+  let result;
+  try {
+    result = Bun.spawnSync(command, {
+      cwd: output,
+      env: { ...process.env, CRAFT_PROJECT_ROOT: output, CRAFT_PLATFORM: "ios", CRAFT_GENERATE_PHASE: phase },
+      stdout: "inherit",
+      stderr: "pipe"
+    });
+  } catch (error) {
+    throw new Error(`iOS postGenerate hook could not start in ${output}: ${hook.command}`, { cause: error });
+  }
+  if (result.exitCode !== 0) {
+    const stderr = result.stderr?.toString().trim();
+    throw new Error(`iOS postGenerate hook failed in ${output} with exit code ${result.exitCode}${stderr ? `: ${stderr}` : ""}`);
+  }
+}
 var DEFAULT_CONFIG = {
   renderer: "web",
   version: "1.0.0",
@@ -1230,6 +1254,11 @@ async function init(options) {
   if (config.renderer !== "web" && config.renderer !== "native") {
     throw new Error(`Unknown iOS renderer: ${config.renderer}. Expected web or native.`);
   }
+  const selection = config.tabBar?.selection;
+  if (selection?.cornerRadius !== undefined && (!Number.isFinite(selection.cornerRadius) || selection.cornerRadius < 0))
+    throw new Error("iOS tabBar.selection.cornerRadius must be a finite non-negative number");
+  if (selection?.color !== undefined && !/^#[0-9a-f]{6}$/i.test(selection.color))
+    throw new Error("iOS tabBar.selection.color must be a #RRGGBB color");
   if (config.enableBackgroundLocation)
     config.enableGeolocation = true;
   const problems = hybridConfigProblems(config);
@@ -1425,6 +1454,7 @@ async function build(options) {
       cause: error
     });
   }
+  runPostGenerateHook(config.postGenerate, output);
   console.log("");
 }
 async function open(options) {
@@ -1590,6 +1620,7 @@ export {
   resolveRuntimeDir,
   restoreShell,
   run,
+  runPostGenerateHook,
   serializeSimulatorSteps,
   showSimulator,
   syncNativeFonts,

package/package.json

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

package/templates/CraftApp.swift

@@ -102,6 +102,96 @@ enum CraftPageAppearance {
     }
 }
 
+/// The app-wide UIKit appearance override. SwiftUI's `preferredColorScheme`
+/// only controls the SwiftUI environment; native screen controllers need the
+/// UIKit override as well so their trait collection, controls and navigation
+/// chrome resolve the same way. A runtime choice is kept here so screens
+/// created after the choice inherit it instead of reverting to the bundle
+/// config.
+enum CraftInterfaceStyleController {
+    /// The app's bundled choice is the default for newly-created screens.
+    /// A runtime choice is separate: it is the only value that should
+    /// override a screen's own generated config.
+    private static var configured: UIUserInterfaceStyle = .unspecified
+    private static var runtimeSelection: UIUserInterfaceStyle?
+
+    static func configuredStyle(for config: CraftConfig) -> UIUserInterfaceStyle {
+        switch config.appearance {
+        case "system": return .unspecified
+        case "light": return .light
+        case "dark": return .dark
+        default: return config.darkMode ? .dark : .light
+        }
+    }
+
+    static func configure(_ config: CraftConfig) {
+        configured = configuredStyle(for: config)
+        runtimeSelection = nil
+        applyToWindows()
+    }
+
+    static func style(for config: CraftConfig) -> UIUserInterfaceStyle {
+        runtimeSelection ?? configuredStyle(for: config)
+    }
+
+    static func colorScheme(for config: CraftConfig) -> ColorScheme? {
+        switch style(for: config) {
+        case .light: return .light
+        case .dark: return .dark
+        default: return nil
+        }
+    }
+
+    /// Returns false rather than silently accepting a typo from JavaScript.
+    @discardableResult
+    static func set(_ value: String) -> Bool {
+        let style: UIUserInterfaceStyle
+        switch value {
+        case "system": style = .unspecified
+        case "light": style = .light
+        case "dark": style = .dark
+        default: return false
+        }
+        runtimeSelection = style
+        applyToWindows()
+        NotificationCenter.default.post(name: .craftColorSchemeChanged, object: nil)
+        return true
+    }
+
+    static func currentName() -> String {
+        let requested = runtimeSelection ?? UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.windows.first(where: { $0.isKeyWindow })?.traitCollection.userInterfaceStyle }
+            .first ?? .unspecified
+        let style = requested == .unspecified
+            ? (UIApplication.shared.connectedScenes
+                .compactMap { ($0 as? UIWindowScene)?.windows.first(where: { $0.isKeyWindow })?.traitCollection.userInterfaceStyle }
+                .first { $0 != .unspecified } ?? UITraitCollection.current.userInterfaceStyle)
+            : requested
+        return style == .dark ? "dark" : "light"
+    }
+
+    static func apply(to controller: UIViewController, config: CraftConfig) {
+        controller.overrideUserInterfaceStyle = style(for: config)
+    }
+
+    private static func applyToWindows() {
+        let style = runtimeSelection ?? configured
+        for scene in UIApplication.shared.connectedScenes.compactMap({ $0 as? UIWindowScene }) {
+            for window in scene.windows {
+                window.overrideUserInterfaceStyle = style
+                apply(style, to: window.rootViewController)
+            }
+        }
+    }
+
+    private static func apply(_ style: UIUserInterfaceStyle, to controller: UIViewController?) {
+        guard let controller else { return }
+        controller.overrideUserInterfaceStyle = style
+        controller.children.forEach { apply(style, to: $0) }
+        if let presented = controller.presentedViewController { apply(style, to: presented) }
+    }
+}
+
 /// Tells the shell when SwiftUI's colour scheme changes: the one appearance
 /// setting with no notification of its own.
 struct CraftColorSchemeObserver: View {
@@ -195,6 +285,7 @@ struct CraftRecoveryBudget {
 final class CraftAppDelegate: NSObject, UIApplicationDelegate, UNUserNotificationCenterDelegate {
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
         let config = CraftConfig.bundled()
+        CraftInterfaceStyleController.configure(config)
         // First, so a crash anywhere in the rest of launch is reported too.
         CraftCrashReporter.shared.start(config)
         UNUserNotificationCenter.current().delegate = self
@@ -606,7 +697,7 @@ struct CraftApp: App {
                     .ignoresSafeArea(.keyboard, edges: .bottom)
                 }
             }
-                .preferredColorScheme(appState.config.colorScheme)
+                .preferredColorScheme(appState.appearanceScheme)
                 .environmentObject(appState)
                 .onOpenURL { url in
                     // Handle deep links and universal links
@@ -689,6 +780,10 @@ final class CraftChrome: ObservableObject {
     /// The selected tab highlight's corner radius. Nil preserves the default
     /// capsule, while a finite non-negative value opts into a rounded rect.
     private(set) var tabSelectionCornerRadius: CGFloat?
+    /// The configured static shape, retained when the page updates only its
+    /// tabs or selected item at runtime.
+    private var configuredTabSelectionCornerRadius: CGFloat?
+    private(set) var tabSelectionColor: UIColor?
 
     weak var webView: WKWebView?
     /// What the tab bar covers at the bottom of the screen, in points.
@@ -723,9 +818,13 @@ final class CraftChrome: ObservableObject {
     /// The tab bar from `tabs` in craft.config.json, there before the page
     /// loads; the page's own `tabBar` message replaces it later. `splash`
     /// false when the first screen is native and draws itself.
-    func configure(tabs configured: [CraftConfig.Tab], selected: String?, splash: Bool) {
+    func configure(tabs configured: [CraftConfig.Tab], selected: String?, splash: Bool, appearance: CraftConfig.TabBar? = nil) {
         splashVisible = splash
         tabSwipeEnabled = true
+        configuredTabSelectionCornerRadius = appearance?.selection?.cornerRadius
+            .flatMap { $0.isFinite && $0 >= 0 ? CGFloat($0) : nil }
+        tabSelectionCornerRadius = configuredTabSelectionCornerRadius
+        tabSelectionColor = appearance?.selection?.color.flatMap { UIColor(hex: $0) }
         guard !configured.isEmpty else { return }
         tabs = configured.map { Tab(id: $0.id, title: $0.title, symbol: $0.symbol ?? "circle", badge: nil, selectedSymbol: Tab.normalizedSelectedSymbol($0.selectedSymbol), selectedIconTint: $0.selectedIconTint, selectedIconPulse: $0.selectedIconPulse) }
         self.selected = selected ?? configured.first?.id
@@ -856,6 +955,7 @@ final class CraftChrome: ObservableObject {
                 tint = light.map { light in dark.map { dark in UIColor { $0.userInterfaceStyle == .dark ? dark : light } } ?? light }
             }
             if let swipeEnabled = body["swipeEnabled"] as? Bool { tabSwipeEnabled = swipeEnabled }
+            if !body.keys.contains("selection") { tabSelectionCornerRadius = configuredTabSelectionCornerRadius }
             withAnimation(Self.motion(.easeOut(duration: 0.2))) { tabBarVisible = !tabs.isEmpty && !hiddenByScreen }
             publishLayout()
         case "selectTab":
@@ -1312,6 +1412,7 @@ private struct CraftTabSelectionShape: Shape {
 }
 
 private struct CraftTabSelectionIndicator: View {
+    @ObservedObject private var chrome = CraftChrome.shared
     @ObservedObject private var progress = CraftChrome.shared.tabSwipeProgress
     let selected: Int?
     let count: Int
@@ -1323,7 +1424,7 @@ private struct CraftTabSelectionIndicator: View {
                 let width = geometry.size.width / CGFloat(max(1, count))
                 CraftTabSelectionShape(cornerRadius: cornerRadius)
                     .frame(width: width, height: geometry.size.height)
-                    .foregroundStyle(Color.primary.opacity(0.09))
+                    .foregroundStyle(chrome.tabSelectionColor.map { Color($0) } ?? Color.primary.opacity(0.09))
                     .offset(x: position * width)
             }
         }
@@ -1557,6 +1658,8 @@ class DeepLinkManager {
 // MARK: - App State
 class AppState: ObservableObject {
     @Published var config: CraftConfig
+    @Published private(set) var appearanceScheme: ColorScheme?
+    private var appearanceObserver: NSObjectProtocol?
 
     init() {
         if let configURL = Bundle.main.url(forResource: "craft.config", withExtension: "json"),
@@ -1565,11 +1668,26 @@ class AppState: ObservableObject {
         } else {
             self.config = CraftConfig()
         }
+        self.appearanceScheme = CraftInterfaceStyleController.colorScheme(for: config)
+        appearanceObserver = NotificationCenter.default.addObserver(
+            forName: .craftColorSchemeChanged,
+            object: nil,
+            queue: .main,
+        ) { [weak self] _ in
+            guard let self else { return }
+            self.appearanceScheme = CraftInterfaceStyleController.colorScheme(for: self.config)
+        }
         // Before the first frame: the hybrid start screen, and the tab bar
         // from the config, are decided here, if the app delegate has not
         // already (it does at launch; the first call decides).
         CraftHybrid.shared.configure(config)
     }
+
+    deinit {
+        if let appearanceObserver {
+            NotificationCenter.default.removeObserver(appearanceObserver)
+        }
+    }
 }
 
 extension CraftConfig {
@@ -1706,6 +1824,9 @@ struct CraftConfig: Codable {
     var nativeScreens: [String: String]? = nil
     /// The tab bar to show before the page describes its own.
     var tabs: [Tab]? = nil
+    /// Static styling for the selected tab indicator; the page may still
+    /// override its shape through `tabBar.set({ selection })`.
+    var tabBar: TabBar? = nil
     /// Hybrid: web-storage keys the page's own code writes, mirrored into the
     /// Keychain under another name for native screens (`{"auth_token": "auth.token"}`).
     var shareStorage: [String: String]? = nil
@@ -1733,6 +1854,15 @@ struct CraftConfig: Codable {
         var selectedIconPulse: Bool? = nil
     }
 
+    struct TabBar: Codable {
+        var selection: TabSelection? = nil
+    }
+
+    struct TabSelection: Codable {
+        var cornerRadius: Double? = nil
+        var color: String? = nil
+    }
+
     struct BackgroundRefresh: Codable {
         var enabled: Bool = false
         /// The BGTaskScheduler identifier; `<bundleId>.refresh` if unset.
@@ -2535,6 +2665,18 @@ struct CraftWebView: UIViewRepresentable {
                 resolveCallback(callbackId, result: CraftSymbols.image(named: body["name"] as? String ?? "", options: body) ?? NSNull())
             case "statusBarSetStyle":
                 resolveCallback(callbackId, result: CraftStatusBar.setStyle(body["style"] as? String ?? "default"))
+            case "setAppearance":
+                guard let appearance = body["appearance"] as? String else {
+                    rejectCallback(callbackId, error: "setAppearance needs light, dark or system", code: "INVALID_ARGUMENT")
+                    return
+                }
+                guard CraftInterfaceStyleController.set(appearance) else {
+                    rejectCallback(callbackId, error: "setAppearance needs light, dark or system", code: "INVALID_ARGUMENT")
+                    return
+                }
+                resolveCallback(callbackId, result: true)
+            case "getAppearance":
+                resolveCallback(callbackId, result: CraftInterfaceStyleController.currentName())
             case "chromeSetUnderPageColor":
                 // What shows past the page's edges when it rubber-bands.
                 if #available(iOS 15.0, *), let webView, let css = body["color"] as? String, let color = UIColor(css: css) {
@@ -5596,6 +5738,14 @@ struct CraftWebView: UIViewRepresentable {
                     getInfo: function() { return craft.getDeviceInfo(); },
                     getCapabilities: function() { return Promise.resolve(Object.assign({}, craft.capabilities)); }
                 };
+                craft.app = Object.assign(craft.app || {}, {
+                    setAppearance: function(appearance) {
+                        return craft._invoke('setAppearance', {appearance: appearance});
+                    },
+                    getAppearance: function() {
+                        return craft._invoke('getAppearance', {});
+                    }
+                });
                 // Feedback, as on Android and the web, where there is no
                 // motor to fire: an app that left enableHaptics off gets
                 // nothing played and a settled promise, so `await

package/templates/CraftHybrid.swift

@@ -380,7 +380,7 @@ final class CraftHybrid: NSObject {
         }
         startsNative = isEnabled && routes.match(startPath) != nil
         // The splash waits for a page; an all-native app's first screen draws itself.
-        CraftChrome.shared.configure(tabs: config.tabs ?? [], selected: tabIds(from: config.tabs ?? []).isEmpty ? nil : CraftHybridRoutes.tab(owning: startPath, among: tabIds(from: config.tabs ?? [])), splash: hasWeb && !startsNative)
+        CraftChrome.shared.configure(tabs: config.tabs ?? [], selected: tabIds(from: config.tabs ?? []).isEmpty ? nil : CraftHybridRoutes.tab(owning: startPath, among: tabIds(from: config.tabs ?? [])), splash: hasWeb && !startsNative, appearance: config.tabBar)
 
         let script = config.nativeApp.flatMap { $0.isEmpty ? nil : $0 }
         appScriptRoute = script != nil && Self.hasBundle && (isEnabled || !hasWeb) ? script : nil

package/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/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
@@ -2983,7 +2984,10 @@ private class CraftNativeFlowView: UIStackView {
             // The screen reports onLayout from its own layout pass, which a
             // change deep in a scroll view's content never runs: a view that
             // went from 240 to 180 wide kept saying 240.
-            if moved { craftScreenController?.scheduleLayoutEvents() }
+            if moved {
+                craftScreenController?.scheduleLayoutEvents()
+                craftScreenController?.scheduleKeyboardInsets()
+            }
         }
         for (child, frame) in result.frames {
             var viewportFrame = frame
@@ -3973,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) }
@@ -4017,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 }
@@ -4069,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
@@ -4130,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))
@@ -5112,6 +5255,11 @@ private final class CraftNativeTextView: UITextView {
             isScrollEnabled = overflows
             if overflows, isFirstResponder { scrollRangeToVisible(selectedRange) }
         }
+        // Showing all its text, it has nothing to scroll. An offset left from
+        // UIKit keeping the caret in view while the view was a layout short
+        // of its text moved every line down inside it, and the caret of a
+        // growing comment sat below the part of the screen it was kept in.
+        if !isScrollEnabled, contentOffset != .zero { contentOffset = .zero }
         let inset = textContainerInset
         let padding = textContainer.lineFragmentPadding
         placeholderLabel.frame = CGRect(
@@ -5492,6 +5640,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private var keyboardSafeAreaInset: CGFloat = 0
     /// Where the keyboard is on the screen while it is up, in screen coordinates.
     private var keyboardScreenFrame: CGRect?
+    private var keyboardInsetsScheduled = false
     /// The hybrid shell (CraftHybrid.swift), when this screen is one of a web
     /// app's native screens: told of the first frame, of a first frame that
     /// could not be drawn, and of `craft.navigation.open(path)`.
@@ -5536,6 +5685,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
 
     override func viewDidLoad() {
         super.viewDidLoad()
+        CraftInterfaceStyleController.apply(to: self, config: config)
         navigationItem.title = routeName ?? config.appName
         view.backgroundColor = config.resolvedBackgroundColor
         rootStack.axis = .vertical
@@ -5802,6 +5952,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         positionModals()
         emitLayoutEvents()
         sendViewportIfChanged()
+        scheduleKeyboardInsets()
     }
 
     /// The width the bundle last heard, so a layout pass at the same size says nothing.
@@ -5884,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
@@ -6240,6 +6391,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let secureGet: @convention(block) (String) -> String? = { key in
             config.enableSecureStorage ? CraftNativeActions.webSecureValue(forKey: key) : nil
         }
+        let setAppearance: @convention(block) (String) -> Bool = { value in
+            if Thread.isMainThread { return CraftInterfaceStyleController.set(value) }
+            var accepted = false
+            DispatchQueue.main.sync { accepted = CraftInterfaceStyleController.set(value) }
+            return accepted
+        }
+        let getAppearance: @convention(block) () -> String = {
+            if Thread.isMainThread { return CraftInterfaceStyleController.currentName() }
+            var value = "light"
+            DispatchQueue.main.sync { value = CraftInterfaceStyleController.currentName() }
+            return value
+        }
         let setOptions: @convention(block) (String) -> Void = { [weak self] json in
             guard let data = json.data(using: .utf8),
                   let options = try? JSONSerialization.jsonObject(with: data) as? [String: Any] else { return }
@@ -6252,6 +6415,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         jsContext.setObject(snapshotSet, forKeyedSubscript: "craftNativeSnapshotSet" as NSString)
         jsContext.setObject(snapshotClear, forKeyedSubscript: "craftNativeSnapshotClear" as NSString)
         jsContext.setObject(secureGet, forKeyedSubscript: "craftNativeSecureGet" as NSString)
+        jsContext.setObject(setAppearance, forKeyedSubscript: "craftNativeSetAppearance" as NSString)
+        jsContext.setObject(getAppearance, forKeyedSubscript: "craftNativeGetAppearance" as NSString)
         jsContext.setObject(setOptions, forKeyedSubscript: "craftNativeSetOptions" as NSString)
         // Older native bundles call the page-shaped `craft.dialog` API
         // directly. Keep that API backed by the same capability protocol as
@@ -6494,6 +6659,19 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                         return value === undefined ? null : value;
                     }
                 });
+                keep('app', {
+                    setAppearance: function(value) {
+                        value = String(value);
+                        if (value !== 'light' && value !== 'dark' && value !== 'system') {
+                            return Promise.reject(new TypeError('craft.app.setAppearance needs light, dark or system'));
+                        }
+                        if (!craftNativeSetAppearance(value)) {
+                            return Promise.reject(new Error('craft.app.setAppearance was rejected'));
+                        }
+                        return Promise.resolve();
+                    },
+                    getAppearance: function() { return Promise.resolve(craftNativeGetAppearance()); }
+                });
                 // The signed-in account (CraftSession): the token under
                 // `sessionTokenKey`, and each change of it, which the host
                 // reports through `__craftSessionChanged` after the Keychain
@@ -7148,6 +7326,22 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
     }
 
+    /// A layout moved a view while the keyboard is up: once that pass is
+    /// over, each scroll view's keyboard inset is measured again where the
+    /// scroll view now ends. Measured only when the keyboard moved, a form
+    /// that grew down under the keyboard (a footer below it shrank, a
+    /// banner above it went away) kept the inset of where it used to end,
+    /// and its last lines stayed under the keyboard.
+    fileprivate func scheduleKeyboardInsets() {
+        guard keyboardScreenFrame != nil, !keyboardInsetsScheduled else { return }
+        keyboardInsetsScheduled = true
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            self.keyboardInsetsScheduled = false
+            if self.keyboardScreenFrame != nil { self.insetScrollViewsForKeyboard() }
+        }
+    }
+
     /// The focused field, scrolled into the part of its scroll view the
     /// keyboard leaves, with a little room around it.
     func scrollFocusedInputIntoView(animated: Bool) {
@@ -7159,6 +7353,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// Internal for XCTest.
     func scrollIntoView(_ input: UIView, animated: Bool) {
         guard let scroll = enclosingVerticalScroll(of: input) else { return }
+        // Measured against the keyboard where the scroll view is now.
+        if keyboardScreenFrame != nil { insetScrollViewsForKeyboard() }
         var rect = input.convert(input.bounds, to: scroll).insetBy(dx: 0, dy: -16)
         // A field taller than the part the keyboard leaves (a long comment
         // with no max height) shows its caret rather than its top: scrolled
@@ -7901,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))
@@ -7921,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)
             }
@@ -7933,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
@@ -7995,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
@@ -8068,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"])
@@ -8106,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()
@@ -8279,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(
@@ -8335,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
@@ -8401,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"
@@ -8750,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)
@@ -8967,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
@@ -8997,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) }
@@ -9011,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) }
@@ -9076,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)
@@ -9780,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))
@@ -9883,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 }
@@ -9929,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) {
@@ -9951,6 +10211,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             textView.invalidateIntrinsicContentSize()
             CraftNativeFlexLayout.invalidateAncestors(of: textView)
             self.view.layoutIfNeeded()
+            // That layout can move the scroll view: its keyboard inset is
+            // measured where it now ends before the caret is.
+            if self.keyboardScreenFrame != nil { self.insetScrollViewsForKeyboard() }
             guard let scroll = self.enclosingVerticalScroll(of: textView),
                   let rect = self.caretRect(of: textView, in: scroll) else { return }
             let visible = scroll.bounds.inset(by: scroll.adjustedContentInset)
@@ -9983,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/templates/CraftWatchApp.swift.template

@@ -117,6 +117,10 @@ final class CraftWatchSession: NSObject, ObservableObject {
     }
 
     private func apply(_ payload: [String: Any]) {
+        if let incomingVersion = payload["stateVersion"] as? Int {
+            guard incomingVersion >= stateVersion else { return }
+            stateVersion = incomingVersion
+        }
         if let plan = payload["plan"] as? [String: Any], payload["type"] as? String == "planned-session" {
             plannedSession = plan
             status = "Plan ready"