@craft-native/ios 0.0.207 → 0.0.210

package/README.md

@@ -137,7 +137,13 @@ 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`, `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. `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 timestamps; `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. 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`, `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).
+
+JavaScriptCore has no DOM `window`; Craft aliases `globalThis.window` to
+`globalThis` before installing the native bridge so browser-safe SDK calls such
+as `window.craft.dialog.actionSheet()` reach the native capability host. This
+does not add `document` or DOM rendering; routes that do not opt into `native`
+continue using the WebView renderer.
 
 ```bash
 craft ios init NativeDemo --renderer native --output ./ios-native

package/package.json

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

package/templates/CraftApp.swift

@@ -621,6 +621,7 @@ final class CraftChrome: ObservableObject {
     }
 
     @Published var tabs: [Tab] = []
+    @Published var tabAccessory: Tab?
     @Published var selected: String?
     @Published var tabBarVisible = false
     @Published var splashVisible = true
@@ -688,6 +689,16 @@ final class CraftChrome: ObservableObject {
             tabs[index].badge = (item["badge"] as? String).flatMap { $0.isEmpty ? nil : String($0.prefix(8)) }
         }
     }
+    /// A destination beside the tab pill, outside the tab stacks and swipe order.
+    func updateTabAccessory(_ item: [String: Any]?) {
+        guard let item, let path = item["path"] as? String,
+              path.hasPrefix("/"), !path.hasPrefix("//"),
+              let title = item["title"] as? String else { tabAccessory = nil; return }
+        tabAccessory = Tab(id: path, title: title, symbol: item["symbol"] as? String ?? "message",
+            badge: (item["badge"] as? String).flatMap { $0.isEmpty ? nil : String($0.prefix(8)) },
+            accessibilityLabel: item["accessibilityLabel"] as? String)
+    }
+
     func setHiddenByScreen(_ hidden: Bool) {
         guard hiddenByScreen != hidden else { return }
         hiddenByScreen = hidden
@@ -913,7 +924,33 @@ struct CraftTabBarView: View {
 
     var body: some View {
         if chrome.tabBarVisible && !chrome.tabs.isEmpty {
-            bar
+            HStack(spacing: 8) {
+                bar
+                if let accessory = chrome.tabAccessory {
+                    Button { CraftHybrid.shared.open(accessory.id) } label: {
+                        surface {
+                            Image(systemName: accessory.symbol)
+                                .font(.system(size: iconSize))
+                                .foregroundStyle(Color.primary)
+                                .frame(width: 62, height: 62)
+                        }
+                            .overlay(alignment: .topTrailing) {
+                                if let badge = accessory.badge {
+                                    Text(badge)
+                                        .font(.system(size: badgeSize, weight: .bold))
+                                        .foregroundStyle(.white)
+                                        .padding(.horizontal, 4)
+                                        .frame(minWidth: 18, minHeight: 18)
+                                        .background(Capsule().fill(Color.red))
+                                }
+                            }
+                    }
+                    .buttonStyle(.plain)
+                    .accessibilityLabel(accessory.accessibilityLabel ?? accessory.title)
+                    .accessibilityValue(accessory.badge ?? "")
+                    .accessibilityIdentifier("craft-tab-accessory")
+                }
+            }
                 .padding(.horizontal, 16)
                 .padding(.bottom, 4)
                 .background(GeometryReader { proxy in
@@ -932,24 +969,27 @@ struct CraftTabBarView: View {
         chrome.layoutChanged(max(0, screen - proxy.frame(in: .global).minY))
     }
 
-    @ViewBuilder private var bar: some View {
+    private var bar: some View {
+        surface { items.padding(4) }
+    }
+
+    /// Both the tab capsule and its circular accessory use the same material,
+    /// outline and shadow. A square capsule forms the accessory's circle.
+    @ViewBuilder private func surface<Content: View>(@ViewBuilder content: () -> Content) -> some View {
 #if compiler(>=6.2)
         if #available(iOS 26.0, *) {
             GlassEffectContainer {
-                items
-                    .padding(4)
+                content()
                     .glassEffect(.regular.interactive(), in: .capsule)
             }
         } else {
-            items
-                .padding(4)
+            content()
                 .background(.ultraThinMaterial, in: Capsule())
                 .overlay(Capsule().strokeBorder(Color.white.opacity(0.35), lineWidth: 0.5))
                 .shadow(color: .black.opacity(0.12), radius: 18, y: 6)
         }
 #else
-        items
-            .padding(4)
+        content()
             .background(.ultraThinMaterial, in: Capsule())
             .overlay(Capsule().strokeBorder(Color.white.opacity(0.35), lineWidth: 0.5))
             .shadow(color: .black.opacity(0.12), radius: 18, y: 6)

package/templates/CraftNativeScreen.swift

@@ -3959,11 +3959,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         // Each screen says whether it wants the tab bar, so one that hid it
         // never leaves it hidden for the next.
         CraftChrome.shared.setHiddenByScreen(tabBarHidden)
+        CraftChrome.shared.updateTabAccessory(tabAccessory)
         refreshTraitDefaults()
     }
 
     override func viewWillDisappear(_ animated: Bool) {
         super.viewWillDisappear(animated)
+        // The accessory belongs to the visible native screen. Clear the
+        // shared shell state before a hybrid/web route appears, otherwise a
+        // destination from the outgoing screen remains tappable on top of it.
+        CraftChrome.shared.updateTabAccessory(nil)
         // Popped (or its stack dismissed) while the bar was away: it comes
         // back for whatever shows next, a web page included.
         if tabBarHidden, isMovingFromParent || isBeingDismissed || navigationController?.isBeingDismissed == true {
@@ -4146,6 +4151,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         let appVersion = Self.jsonString(info?["CFBundleShortVersionString"] as? String ?? "")
         let appBuild = Self.jsonString(info?["CFBundleVersion"] as? String ?? "")
         jsContext.evaluateScript("""
+            // JavaScriptCore has no DOM window, but browser-safe SDK bridges
+            // address the host through `window.craft`. Keep native screens
+            // compatible without pretending a document exists.
+            if (typeof globalThis.window === "undefined") { globalThis.window = globalThis; }
             globalThis.__stxNativeCallback = null;
             globalThis.__stxNativeBridge = {
                 platform: "ios",
@@ -4274,7 +4283,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     ///   `craft.secureStorage.set` wrote.
     /// - `craft.navigation.setOptions({ title, largeTitle, hidden, backTitle,
     ///   tabBarHidden, swipeBack, contentSwipeBack, tabSwipeEnabled,
-    ///   backgroundColor, navigationBarSolid, rightButtons })`;
+    ///   backgroundColor, navigationBarSolid, rightButtons, tabAccessory })`;
     ///   a right button's tap is the event `navButton`.
     ///
     /// A runtime that assigns `craft.storage` (or the others) afterwards keeps
@@ -4529,6 +4538,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private var statusBarHiddenOverride: Bool?
     /// The app's tab bar away while this screen shows (`tabBarHidden`).
     private var tabBarHidden = false
+    private var tabAccessory: [String: Any]?
     /// Whether a back-swipe may leave this screen at all, the edge's
     /// included (`swipeBack: false`): a screen that steps through its own
     /// pages with a Back of its own (a first-run tour's questions) would
@@ -4575,6 +4585,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         }
         // The app script has no screen, so no bar and no tab bar to change.
         guard !isAppScript else { return }
+        if options.keys.contains("tabAccessory") {
+            tabAccessory = options["tabAccessory"] as? [String: Any]
+            if navigationController?.topViewController === self, view.window != nil {
+                CraftChrome.shared.updateTabAccessory(tabAccessory)
+            }
+        }
         if options.keys.contains("title") {
             navigationItem.title = options["title"] as? String
             titleFromOptions = true
@@ -5719,7 +5735,6 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 ? nil : number(props["activeOpacity"]) ?? 0.5
             pressable.pressBaseOpacity = number(style["opacity"]) ?? 1
             pressable.pressUnderlayColor = type == "TouchableHighlight" && !disabled ? color(props["underlayColor"]) : nil
-            pressable.pressBaseBackgroundColor = pressable.backgroundColor
         case "Switch":
             let toggle = result as! UISwitch
             toggle.isOn = props["value"] as? Bool ?? props["checked"] as? Bool ?? false
@@ -6677,6 +6692,10 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         updateDimension(width, constraint: &node.widthConstraint, anchor: view.widthAnchor)
         updateDimension(height, constraint: &node.heightConstraint, anchor: view.heightAnchor)
         view.backgroundColor = color(style["backgroundColor"]) ?? .clear
+        // Every flow container can receive press feedback, including ordinary
+        // Views. Capture its current authored fill before feedback cleanup or
+        // release restores it; otherwise avatars and button wrappers go clear.
+        (view as? CraftNativeFlowView)?.pressBaseBackgroundColor = view.backgroundColor
         // A field the style dresses itself (`border-0`, a border or a
         // background, as a search field inside its own pill is) draws no
         // system box of its own; a bare one keeps the rounded rectangle.
@@ -6928,7 +6947,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private func textFont(_ style: [String: Any], default fallback: UIFont) -> UIFont {
         let size = number(style["fontSize"]) ?? fallback.pointSize
         let weight: UIFont.Weight
-        switch style["fontWeight"] as? String {
+        switch craftNativeFontWeight(style["fontWeight"]) {
         case "100": weight = .ultraLight
         case "200": weight = .thin
         case "300": weight = .light
@@ -6939,11 +6958,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "900": weight = .black
         default: weight = .regular
         }
-        var font = (style["fontFamily"] as? String).flatMap { UIFont(name: $0, size: size) }
-            ?? .systemFont(ofSize: size, weight: weight)
+        // Android's TextView uses SP, so its native text scales with the
+        // user's content-size setting. Apply the same Dynamic Type multiplier
+        // here before assigning the font to labels, buttons, and inputs.
+        let scaledSize = UIFontMetrics(forTextStyle: .body).scaledValue(
+            for: size,
+            compatibleWith: traitCollection
+        )
+        var font = (style["fontFamily"] as? String).flatMap { UIFont(name: $0, size: scaledSize) }
+            ?? .systemFont(ofSize: scaledSize, weight: weight)
         if style["fontStyle"] as? String == "italic",
            let descriptor = font.fontDescriptor.withSymbolicTraits(.traitItalic) {
-            font = UIFont(descriptor: descriptor, size: size)
+            font = UIFont(descriptor: descriptor, size: scaledSize)
         }
         return font
     }
@@ -7143,7 +7169,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             || 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))
         view.accessibilityContainerType = container && (view.accessibilityLabel != nil || controlledVideo) ? .semanticGroup : .none
+        // Keep the interaction trait native controls expose. Rebuilding this
+        // set from the STX role alone otherwise turns a Slider, Picker,
+        // DatePicker, or Switch into a static VoiceOver item whenever the
+        // screen omits redundant accessibility metadata.
         var traits: UIAccessibilityTraits = []
+        switch type {
+        case "Slider", "Picker", "DatePicker": traits.insert(.adjustable)
+        case "Switch": traits.insert(.button)
+        default: break
+        }
         switch role ?? type.lowercased() {
         case "tablist": traits.insert(.tabBar)
         case "button", "checkbox": traits.insert(.button)