craft-native 0.0.207 → 0.0.210

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

@@ -389,6 +389,10 @@ internal object CraftNativePrelude {
         routePrelude: String,
     ): String = """
         $routePrelude
+        // JavaScriptSandbox 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;
         (function() {
           var forward = null;
           var queued = [];
@@ -567,7 +571,7 @@ internal object CraftNativePrelude {
  * The bar above a screen (back, title, the screen's buttons) and the tab bar
  * below it, in plain Android views. A screen sets its bar with
  * `craft.navigation.setOptions` (title, largeTitle, hidden, rightButtons,
- * tabBarHidden); the tabs come from the app's `tabs`.
+ * tabAccessory, tabBarHidden); the tabs come from the app's `tabs`.
  */
 internal class CraftNativeChrome(context: Context, private val tabs: List<CraftNativeTab>) : LinearLayout(context) {
     val content = FrameLayout(context)
@@ -578,6 +582,11 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
     private val largeTitleView = TextView(context)
     private val buttons = LinearLayout(context)
     private val tabBar = LinearLayout(context)
+    private val tabRow = LinearLayout(context)
+    private val accessory = FrameLayout(context)
+    private val accessoryIcon = ImageView(context)
+    private val accessoryBadge = TextView(context)
+    private var accessorySpec: JSONObject? = null
     private val tabViews = mutableListOf<Pair<TextView, TextView>>()
     private val tabIconText = mutableMapOf<String, String>()
     private val tabImageURLs = mutableMapOf<String, String>()
@@ -596,6 +605,7 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
     var onBack: (() -> Unit)? = null
     var onButton: ((String) -> Unit)? = null
     var onTab: ((Int) -> Unit)? = null
+    var onAccessory: ((String) -> Unit)? = null
     var onTabSwipeStart: ((Float, Float, Float) -> Boolean)? = null
     var onTabSwipeMove: ((Float) -> Unit)? = null
     var onTabSwipeEnd: ((Float, Boolean) -> Unit)? = null
@@ -660,8 +670,22 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
             tabBar.addView(cell, LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, 1f))
             tabViews.add(icon to label)
         }
-        addView(tabBar, LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp(64)))
-        tabBar.visibility = if (tabs.isEmpty()) View.GONE else View.VISIBLE
+        tabRow.orientation = HORIZONTAL
+        tabRow.gravity = Gravity.CENTER_VERTICAL
+        tabRow.setPadding(dp(12), dp(4), dp(12), dp(4))
+        tabRow.addView(tabBar, LayoutParams(0, dp(64), 1f))
+        accessory.addView(accessoryIcon, FrameLayout.LayoutParams(dp(26), dp(26), Gravity.CENTER))
+        accessoryBadge.textSize = 10f
+        accessoryBadge.gravity = Gravity.CENTER
+        accessoryBadge.setTextColor(Color.WHITE)
+        accessoryBadge.setPadding(dp(4), 0, dp(4), 0)
+        accessoryBadge.background = GradientDrawable().apply { setColor(Color.RED); cornerRadius = dp(9).toFloat() }
+        accessory.addView(accessoryBadge, FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, dp(18), Gravity.TOP or Gravity.END))
+        accessory.setOnClickListener { accessorySpec?.optString("path")?.let { onAccessory?.invoke(it) } }
+        accessory.visibility = View.GONE
+        tabRow.addView(accessory, LayoutParams(dp(64), dp(64)).apply { marginStart = dp(8) })
+        addView(tabRow, LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp(72)))
+        tabRow.visibility = if (tabs.isEmpty()) View.GONE else View.VISIBLE
         refreshColors()
     }
 
@@ -671,7 +695,7 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
                 val overHorizontalScroll = onTabSwipeShouldDefer?.invoke(event.x, event.y) == true
                 horizontalScrollDeferred = overHorizontalScroll
                 if (overHorizontalScroll) parent?.requestDisallowInterceptTouchEvent(true)
-                swipeTracking = tabs.size > 1 && tabSwipeEnabled && !overHorizontalScroll && tabBar.visibility == View.VISIBLE && event.y < tabBar.top
+                swipeTracking = tabs.size > 1 && tabSwipeEnabled && !overHorizontalScroll && tabRow.visibility == View.VISIBLE && event.y < tabRow.top
                 swipeIntercepted = false
                 swipeDownX = event.x
                 swipeDownY = event.y
@@ -742,7 +766,17 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
             buttons.addView(navButton(button))
         }
         val tabBarHidden = options.optBoolean("tabBarHidden", false) || depth > 0 && options.optBoolean("tabBarHiddenWhenPushed", false)
-        tabBar.visibility = if (tabs.isEmpty() || tabBarHidden) View.GONE else View.VISIBLE
+        tabRow.visibility = if (tabs.isEmpty() || tabBarHidden) View.GONE else View.VISIBLE
+        accessorySpec = options.optJSONObject("tabAccessory")?.takeIf {
+            val path = it.optString("path")
+            path.startsWith("/") && !path.startsWith("//") && it.has("title")
+        }
+        accessory.visibility = if (accessorySpec == null) View.GONE else View.VISIBLE
+        accessorySpec?.let {
+            accessory.contentDescription = it.optString("accessibilityLabel").ifBlank { it.optString("title") } + it.optString("badge").takeIf { badge -> badge.isNotBlank() && badge != "null" }?.let { badge -> ", $badge" }.orEmpty()
+            accessoryBadge.text = it.optString("badge").takeUnless { badge -> badge == "null" }.orEmpty().take(8)
+            accessoryBadge.visibility = if (accessoryBadge.text.isEmpty()) View.GONE else View.VISIBLE
+        }
         tabSwipeEnabled = options.optBoolean("tabSwipeEnabled", true)
         refreshColors()
     }
@@ -801,13 +835,10 @@ internal class CraftNativeChrome(context: Context, private val tabs: List<CraftN
         titleView.setTextColor(text)
         largeTitleView.setTextColor(text)
         backButton.imageTintList = ColorStateList.valueOf(accent)
-        tabBar.setBackgroundColor(if (dark) Color.parseColor("#121212") else Color.parseColor("#F9F9F9"))
-        val divider = GradientDrawable().apply { setColor(if (dark) Color.parseColor("#262626") else Color.parseColor("#D8D8DC")) }
-        tabBar.foreground = null
-        tabBar.background = android.graphics.drawable.LayerDrawable(arrayOf(
-            divider,
-            GradientDrawable().apply { setColor(if (dark) Color.parseColor("#121212") else Color.parseColor("#F9F9F9")) },
-        )).apply { setLayerInset(1, 0, maxOf(1, (density / 2).toInt()), 0, 0) }
+        val surface = if (dark) Color.parseColor("#1C1C1E") else Color.parseColor("#F9F9F9")
+        tabBar.background = GradientDrawable().apply { setColor(surface); cornerRadius = dp(32).toFloat() }
+        accessory.background = GradientDrawable().apply { setColor(surface); cornerRadius = dp(32).toFloat() }
+        accessorySpec?.let { accessoryIcon.setImageDrawable(CraftNativeIcons.drawable(context, null, it.optString("symbol"), text)) }
         tabViews.forEachIndexed { index, (icon, label) ->
             val color = if (index == selectedTab) accent else muted
             val number = tabIconText[tabs[index].id]

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

@@ -256,16 +256,9 @@ private data class CraftNativeLayoutStyle(
                 aspectRatio = decimal("aspectRatio")?.takeIf { it.isFinite() && it > 0.0 },
                 minWidth = length("minWidth"), maxWidth = length("maxWidth"),
                 minHeight = length("minHeight"), maxHeight = length("maxHeight"),
-                position = raw.opt("position")
-                    ?.takeUnless { it == JSONObject.NULL }
-                    ?.toString()
-                    ?.takeIf { it.isNotBlank() }
-                    ?: "relative",
+                position = craftNativeOptionalString(raw.opt("position")) ?: "relative",
                 top = number("top"), right = number("right"), bottom = number("bottom"), left = number("left"),
-                alignSelf = raw.opt("alignSelf")
-                    ?.takeUnless { it == JSONObject.NULL }
-                    ?.toString()
-                    ?.takeIf { it.isNotBlank() && it != "auto" },
+                alignSelf = craftNativeOptionalString(raw.opt("alignSelf"))?.takeUnless { it == "auto" },
                 flexGrow = decimal("flexGrow") ?: flex?.coerceAtLeast(0.0) ?: 0.0,
                 flexShrink = decimal("flexShrink") ?: flex?.let { if (it != 0.0) 1.0 else 0.0 },
                 flexBasis = length("flexBasis")
@@ -383,11 +376,8 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         fun merge(node: JSONObject): SvgPaint {
             val props = node.optJSONObject("props") ?: JSONObject()
             val style = node.optJSONObject("style") ?: JSONObject()
-            fun value(name: String): String? = when {
-                style.has(name) && !style.isNull(name) -> style.optString(name)
-                props.has(name) && !props.isNull(name) -> props.optString(name)
-                else -> null
-            }
+            fun value(name: String): String? = craftNativeOptionalString(style.opt(name))
+                ?: craftNativeOptionalString(props.opt(name))
             fun raw(name: String): Any? = when {
                 style.has(name) && !style.isNull(name) -> style.opt(name)
                 props.has(name) && !props.isNull(name) -> props.opt(name)
@@ -486,7 +476,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         for (index in 0 until children.length()) {
             val node = children.optJSONObject(index) ?: continue
             val style = node.optJSONObject("style") ?: JSONObject()
-            if (style.optString("display") == "none") continue
+            if (craftNativeOptionalString(style.opt("display")) == "none") continue
             val paint = inherited.merge(node)
             when (node.optString("type")) {
                 "G" -> drawNodes(canvas, node.optJSONArray("children") ?: JSONArray(), paint)
@@ -582,7 +572,7 @@ private class CraftNativeSvgView(context: Context) : View(context) {
         }
         var x = craftNativeNumber(props.opt("x"))?.toFloat()?.takeIf { it.isFinite() } ?: 0f
         val y = craftNativeNumber(props.opt("y"))?.toFloat()?.takeIf { it.isFinite() } ?: 0f
-        when (props.optString("textAnchor")) {
+        when (craftNativeOptionalString(props.opt("textAnchor"))) {
             "middle" -> x -= paint.measureText(text) / 2f
             "end" -> x -= paint.measureText(text)
         }
@@ -728,12 +718,15 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         val explicitRegion = region(pendingProps.optJSONObject("region"))
         val initialRegion = region(pendingProps.optJSONObject("initialRegion"))
         if (explicitRegion != null) {
-            moveCamera(explicitRegion)
+            // A controlled region is an exact camera request. The padding
+            // used for fitToBounds is framing chrome, not part of the region
+            // contract, and would otherwise zoom every Android screen out.
+            moveCamera(explicitRegion, padding = 0)
             initialCameraKey = null
         } else if (initialRegion != null) {
             val key = "region:${pendingProps.optJSONObject("initialRegion")}"
             if (initialCameraKey != key) {
-                moveCamera(initialRegion)
+                moveCamera(initialRegion, padding = 0)
                 initialCameraKey = key
             }
         } else if (craftNativeBoolean(pendingProps.opt("fitToBounds"))) {
@@ -755,9 +748,9 @@ private class CraftNativeMapView(context: Context) : FrameLayout(context), OnMap
         }
     }
 
-    private fun moveCamera(bounds: LatLngBounds) {
+    private fun moveCamera(bounds: LatLngBounds, padding: Int = 24) {
         post {
-            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 24))
+            if (width > 0 && height > 0) googleMap?.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, padding))
         }
     }
 
@@ -1027,14 +1020,15 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     }
 
     fun configure(style: JSONObject, density: Float) {
-        orientation = if (style.optString("flexDirection") in setOf("row", "row-reverse")) HORIZONTAL else VERTICAL
-        reverse = style.optString("flexDirection").endsWith("-reverse")
-        val flexWrap = style.optString("flexWrap")
-        wrap = flexWrap == "wrap" || flexWrap == "wrap-reverse" || style.optBoolean("flexWrap", false)
+        val flexDirection = craftNativeOptionalString(style.opt("flexDirection")).orEmpty()
+        orientation = if (flexDirection in setOf("row", "row-reverse")) HORIZONTAL else VERTICAL
+        reverse = flexDirection.endsWith("-reverse")
+        val flexWrap = craftNativeOptionalString(style.opt("flexWrap")).orEmpty()
+        wrap = flexWrap == "wrap" || flexWrap == "wrap-reverse" || craftNativeBoolean(style.opt("flexWrap"))
         wrapReverse = flexWrap == "wrap-reverse"
-        alignItems = style.optString("alignItems", "stretch")
-        alignContent = style.optString("alignContent", "flex-start")
-        justifyContent = style.optString("justifyContent", "flex-start")
+        alignItems = craftNativeOptionalString(style.opt("alignItems")) ?: "stretch"
+        alignContent = craftNativeOptionalString(style.opt("alignContent")) ?: "flex-start"
+        justifyContent = craftNativeOptionalString(style.opt("justifyContent")) ?: "flex-start"
         fun spacing(name: String, fallback: Float): Float {
             val value = craftNativeNumber(style.opt(name)) ?: Double.NaN
             val pixels = value * density
@@ -1044,7 +1038,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         val gap = spacing("gap", 0f)
         rowGap = spacing("rowGap", gap)
         columnGap = spacing("columnGap", gap)
-        grid = style.optString("display") == "grid"
+        grid = craftNativeOptionalString(style.opt("display")) == "grid"
         gridColumns = craftNativeGridColumnCount(
             if (style.has("gridTemplateColumns")) style.opt("gridTemplateColumns") else style.opt("gridColumns")
         )
@@ -2095,7 +2089,7 @@ private class CraftNativeKeyboardAvoidingView(context: Context) : FrameLayout(co
     }
 
     fun configure(props: JSONObject, style: JSONObject, density: Float) {
-        behavior = props.optString("behavior", "padding").takeIf { it in setOf("height", "position", "padding") } ?: "padding"
+        behavior = craftNativeOptionalString(props.opt("behavior"))?.takeIf { it in setOf("height", "position", "padding") } ?: "padding"
         val authoredOffset = craftNativeFiniteDouble(props, "keyboardVerticalOffset", 0.0)
         val pixelOffset = (authoredOffset * density.toDouble()).takeIf { it.isFinite() } ?: 0.0
         keyboardVerticalOffset = pixelOffset.roundToInt()
@@ -3958,6 +3952,7 @@ class MainActivity : AppCompatActivity() {
         val bars = CraftNativeChrome(this, routes.tabs)
         bars.layoutParams = FrameLayout.LayoutParams(-1, -1)
         bars.onBack = { onBackPressedDispatcherCompat() }
+        bars.onAccessory = { path -> navigateOpen(path) }
         bars.onButton = { id -> visibleScreen?.takeIf { it.active }?.let { send(it, "NAV_BUTTON", JSONObject().put("id", id)) } }
         bars.onTab = { index ->
             haptic()
@@ -4945,7 +4940,7 @@ class MainActivity : AppCompatActivity() {
             "Text" -> ((previous as? TextView)?.takeUnless { it is Button || it is EditText } ?: TextView(this)).apply {
                 includeFontPadding = false
                 maxLines = craftNativeInt(props.opt("numberOfLines"), 0).takeIf { it > 0 } ?: Int.MAX_VALUE
-                ellipsize = when (props.optString("ellipsizeMode")) {
+                ellipsize = when (craftNativeOptionalString(props.opt("ellipsizeMode"))) {
                     "head" -> TextUtils.TruncateAt.START
                     "middle" -> TextUtils.TruncateAt.MIDDLE
                     "tail" -> TextUtils.TruncateAt.END
@@ -5248,7 +5243,7 @@ class MainActivity : AppCompatActivity() {
                     // from the previous hidden state when it patches props.
                     craftNativeBoolean(props.opt("visible"))
                 } else {
-                    style.has("display") && style.optString("display") != "none"
+                    style.has("display") && craftNativeOptionalString(style.opt("display")) != "none"
                 }
                 val wasVisible = screen.modalVisibility[this]
                 screen.modalVisibility[this] = visible
@@ -5480,7 +5475,7 @@ class MainActivity : AppCompatActivity() {
                 drawing = node
             }
             "ScrollView", "SectionList" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
-                val horizontal = craftNativeBoolean(props.opt("horizontal")) || style.optString("flexDirection") in setOf("row", "row-reverse")
+                val horizontal = craftNativeBoolean(props.opt("horizontal")) || craftNativeOptionalString(style.opt("flexDirection")) in setOf("row", "row-reverse")
                 setHorizontal(horizontal)
                 setNativeNestedScrollingEnabled(true)
                 setScrollIndicators(
@@ -5488,7 +5483,7 @@ class MainActivity : AppCompatActivity() {
                     craftNativeBoolean(props.opt("showsHorizontalScrollIndicator"), true),
                 )
                 setScrollEnabled(craftNativeBoolean(props.opt("scrollEnabled"), true))
-                setKeyboardShouldPersistTaps(props.optString("keyboardShouldPersistTaps", "never"))
+                setKeyboardShouldPersistTaps(craftNativeOptionalString(props.opt("keyboardShouldPersistTaps")) ?: "never")
                 setBounces(craftNativeBoolean(props.opt("bounces"), true))
                 setAlwaysBounce(
                     craftNativeBoolean(props.opt("alwaysBounceVertical"), !horizontal),
@@ -5550,7 +5545,7 @@ class MainActivity : AppCompatActivity() {
                             send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                         }
                     },
-                    keyboardDismissMode = props.optString("keyboardDismissMode"),
+                    keyboardDismissMode = craftNativeOptionalString(props.opt("keyboardDismissMode")).orEmpty(),
                     dismissKeyboard = {
                         (getSystemService(INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager)
                             ?.hideSoftInputFromWindow(nativeScroll.windowToken, 0)
@@ -5587,9 +5582,9 @@ class MainActivity : AppCompatActivity() {
                     { send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject())) }
                 }, craftNativeBoolean(propRefresh.opt("refreshing"), craftNativeBoolean(props.opt("refreshing"))))
                 setRefreshAppearance(propRefresh, refreshTintFallback(screen))
-                nativeList.setKeyboardShouldPersistTaps(props.optString("keyboardShouldPersistTaps", "never"))
+                nativeList.setKeyboardShouldPersistTaps(craftNativeOptionalString(props.opt("keyboardShouldPersistTaps")) ?: "never")
                 nativeList.setContentContainerStyle(props.optJSONObject("contentContainerStyle"), resources.displayMetrics.density)
-                nativeList.setKeyboardDismissMode(props.optString("keyboardDismissMode")) {
+                nativeList.setKeyboardDismissMode(craftNativeOptionalString(props.opt("keyboardDismissMode")).orEmpty()) {
                     (getSystemService(INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager)
                         ?.hideSoftInputFromWindow(windowToken, 0)
                 }
@@ -5598,6 +5593,7 @@ class MainActivity : AppCompatActivity() {
             "View", "SafeAreaView" -> (previous as? CraftNativeFlexLayout ?: CraftNativeFlexLayout(this)).apply {
                 configureContainer(this, style)
                 if (type == "SafeAreaView") setSafeAreaEdges(props.optJSONArray("edges"))
+                else setWindowSafeInsets(0, 0, 0, 0)
                 reconcileChildren(screen, this, children, identity, next, style, previousControls)
             }
             "KeyboardAvoidingView" -> (previous as? CraftNativeKeyboardAvoidingView ?: CraftNativeKeyboardAvoidingView(this)).apply {
@@ -5744,7 +5740,7 @@ class MainActivity : AppCompatActivity() {
         if (type == "ActivityIndicator") {
             val animating = craftNativeBoolean(props.opt("animating"), true)
             val hidesWhenStopped = craftNativeBoolean(props.opt("hidesWhenStopped"), true)
-            control.visibility = if (style.optString("display") == "none" || (!animating && hidesWhenStopped)) {
+            control.visibility = if (craftNativeOptionalString(style.opt("display")) == "none" || (!animating && hidesWhenStopped)) {
                 View.GONE
             } else {
                 View.VISIBLE
@@ -5865,7 +5861,7 @@ class MainActivity : AppCompatActivity() {
                 layout.setChildStyle(childView, child.optJSONObject("style") ?: JSONObject(), resources.displayMetrics.density)
             }
         }
-        if (style.optString("flexDirection").endsWith("-reverse")) desired.reverse()
+        if (craftNativeOptionalString(style.opt("flexDirection"))?.endsWith("-reverse") == true) desired.reverse()
         val desiredSet = desired.toSet()
         for ((index, childView) in desired.withIndex()) {
             if (layout.getChildAt(index) !== childView) {
@@ -5992,7 +5988,7 @@ class MainActivity : AppCompatActivity() {
         }
         applyTransform(view, style.optJSONArray("transform"))
         if (view !is CraftNativeModalView) {
-            view.visibility = if (style.optString("display") == "none") View.GONE else View.VISIBLE
+            view.visibility = if (craftNativeOptionalString(style.opt("display")) == "none") View.GONE else View.VISIBLE
         }
         view.elevation = dp(craftNativeNonNegativeDouble(style, "elevation", 0.0)).toFloat()
         view.z = craftNativeFiniteFloat(style, "zIndex", 0f)
@@ -6001,13 +5997,13 @@ class MainActivity : AppCompatActivity() {
         // background paints over the decoded picture (only rounded corners
         // showed it). Keep the outline/borders, with a transparent fill.
         val backgroundColor = if (view is CraftNativeVideoView) Color.TRANSPARENT
-            else color(style.optString("backgroundColor"), Color.TRANSPARENT)
+            else color(craftNativeOptionalString(style.opt("backgroundColor")).orEmpty(), Color.TRANSPARENT)
         val border = craftNativeNonNegativeDouble(style, "borderWidth", 0.0)
         val radius = craftNativeNonNegativeDouble(style, "borderRadius", 0.0)
-        val gradientDirection = style.optString("gradientDirection").takeIf { it.isNotBlank() }
-        val gradientFrom = style.optString("gradientFrom").takeIf { it.isNotBlank() }
-        val gradientVia = style.optString("gradientVia").takeIf { it.isNotBlank() }
-        val gradientTo = style.optString("gradientTo").takeIf { it.isNotBlank() }
+        val gradientDirection = craftNativeOptionalString(style.opt("gradientDirection"))
+        val gradientFrom = craftNativeOptionalString(style.opt("gradientFrom"))
+        val gradientVia = craftNativeOptionalString(style.opt("gradientVia"))
+        val gradientTo = craftNativeOptionalString(style.opt("gradientTo"))
         val gradientColors = if (gradientDirection != null && gradientFrom != null && gradientTo != null) {
             listOfNotNull(
                 color(gradientFrom, Color.TRANSPARENT),
@@ -6025,7 +6021,7 @@ class MainActivity : AppCompatActivity() {
             listOf(radius, radius)
         }.toFloatArray()
         val sideColors = listOf("borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor")
-            .map { color(style.optString(it).ifBlank { style.optString("borderColor") }, Color.TRANSPARENT) }
+            .map { color(craftNativeOptionalString(style.opt(it)) ?: craftNativeOptionalString(style.opt("borderColor")).orEmpty(), Color.TRANSPARENT) }
             .toIntArray()
         val defaultBackground = if (defaultBackgrounds.containsKey(view)) {
             defaultBackgrounds[view]
@@ -6039,7 +6035,7 @@ class MainActivity : AppCompatActivity() {
                     cornerRadii,
                     sideWidths,
                     sideColors,
-                    style.optString("borderStyle").takeIf { it == "dashed" || it == "dotted" },
+                    craftNativeOptionalString(style.opt("borderStyle"))?.takeIf { it == "dashed" || it == "dotted" },
                     gradientDirection,
                     gradientColors,
                 )
@@ -6051,8 +6047,8 @@ class MainActivity : AppCompatActivity() {
                     } else setColor(backgroundColor)
                     if (hasCornerRadii) setCornerRadii(cornerRadii) else cornerRadius = dp(radius).toFloat()
                     if (border > 0) {
-                        val borderColor = color(style.optString("borderColor"), Color.TRANSPARENT)
-                        when (style.optString("borderStyle")) {
+                        val borderColor = color(craftNativeOptionalString(style.opt("borderColor")).orEmpty(), Color.TRANSPARENT)
+                        when (craftNativeOptionalString(style.opt("borderStyle"))) {
                             "dashed" -> setStroke(dp(border), borderColor, dp(border * 3).toFloat(), dp(border * 2).toFloat())
                             "dotted" -> setStroke(dp(border), borderColor, dp(border).toFloat(), dp(border * 1.5).toFloat())
                             else -> setStroke(dp(border), borderColor)
@@ -6065,13 +6061,14 @@ class MainActivity : AppCompatActivity() {
             // and the web.
             null
         } else defaultBackground
-        view.clipToOutline = style.optString("overflow") == "hidden"
-        if (view is ViewGroup) view.clipChildren = style.optString("overflow") == "hidden"
+        val overflow = craftNativeOptionalString(style.opt("overflow"))
+        view.clipToOutline = overflow == "hidden"
+        if (view is ViewGroup) view.clipChildren = overflow == "hidden"
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P &&
             (style.has("shadowColor") || style.has("shadowOpacity") || style.has("shadowRadius"))
         ) {
             val shadowOpacity = craftNativeFiniteFloat(style, "shadowOpacity", 1f).coerceIn(0f, 1f)
-            val shadow = color(style.optString("shadowColor"), Color.BLACK)
+            val shadow = color(craftNativeOptionalString(style.opt("shadowColor")).orEmpty(), Color.BLACK)
             val alphaShadow = Color.argb((Color.alpha(shadow) * shadowOpacity).roundToInt(), Color.red(shadow), Color.green(shadow), Color.blue(shadow))
             view.outlineAmbientShadowColor = alphaShadow
             view.outlineSpotShadowColor = alphaShadow
@@ -6169,7 +6166,7 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun configureText(view: TextView, value: String, style: JSONObject) {
-        view.text = when (style.optString("textTransform")) {
+        view.text = when (craftNativeOptionalString(style.opt("textTransform"))) {
             "uppercase" -> value.uppercase()
             "lowercase" -> value.lowercase()
             "capitalize" -> value.split(' ').joinToString(" ") { word -> word.replaceFirstChar(Char::uppercase) }
@@ -6279,21 +6276,22 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun configureTextStyle(view: TextView, style: JSONObject) {
-        view.setTextColor(color(style.optString("color"), defaultTextColor))
+        view.setTextColor(color(craftNativeOptionalString(style.opt("color")).orEmpty(), defaultTextColor))
         view.setTextSize(TypedValue.COMPLEX_UNIT_SP, craftNativeFiniteFloat(style, "fontSize", 16f))
-        val fontWeight = style.opt("fontWeight") as? String
+        val fontWeight = craftNativeFontWeight(style.opt("fontWeight"))
         val weight = when (fontWeight) {
             "bold" -> 700
             "100", "200", "300", "400", "500", "600", "700", "800", "900" -> style.optInt("fontWeight")
             else -> 400
         }
-        val italic = style.optString("fontStyle") == "italic"
-        val family = style.optString("fontFamily").takeIf { it.isNotBlank() }
+        val italic = craftNativeOptionalString(style.opt("fontStyle")) == "italic"
+        val family = craftNativeOptionalString(style.opt("fontFamily"))?.takeIf { it.isNotBlank() }
         view.typeface = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
             Typeface.create(Typeface.create(family, Typeface.NORMAL), weight, italic)
         } else Typeface.create(family, (if (weight >= 600) Typeface.BOLD else Typeface.NORMAL) or
             (if (italic) Typeface.ITALIC else Typeface.NORMAL))
-        view.textAlignment = when (style.optString("textAlign")) {
+        val textAlign = craftNativeOptionalString(style.opt("textAlign"))
+        view.textAlignment = when (textAlign) {
             "left" -> View.TEXT_ALIGNMENT_TEXT_START
             "right" -> View.TEXT_ALIGNMENT_TEXT_END
             "center" -> View.TEXT_ALIGNMENT_CENTER
@@ -6301,7 +6299,7 @@ class MainActivity : AppCompatActivity() {
             else -> View.TEXT_ALIGNMENT_INHERIT
         }
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
-            view.justificationMode = if (style.optString("textAlign") == "justify") {
+            view.justificationMode = if (textAlign == "justify") {
                 Layout.JUSTIFICATION_MODE_INTER_WORD
             } else {
                 Layout.JUSTIFICATION_MODE_NONE
@@ -6315,7 +6313,7 @@ class MainActivity : AppCompatActivity() {
             craftNativeFiniteDouble(style, "lineHeight", Double.NaN).takeIf { it.isFinite() }?.let { dp(it) - view.textSize } ?: 0f,
             1f
         )
-        val shadowColor = style.optString("textShadowColor").takeIf { it.isNotBlank() }
+        val shadowColor = craftNativeOptionalString(style.opt("textShadowColor"))?.takeIf { it.isNotBlank() }
         if (shadowColor == null) {
             view.paint.clearShadowLayer()
         } else {
@@ -6332,16 +6330,16 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun applyTextDecoration(view: TextView, style: JSONObject) {
-        val line = style.optString("textDecorationLine")
+        val line = craftNativeOptionalString(style.opt("textDecorationLine")).orEmpty()
         if (view is EditText) {
             // A field's own text, spanned in place: replacing it would move
             // the caret to the start and tell the screen the text changed.
             val editable = view.text ?: return
             editable.getSpans(0, editable.length, CraftTextDecorationSpan::class.java).forEach(editable::removeSpan)
             if (line.isBlank() || line == "none" || editable.isEmpty()) return
-            val fieldColor = style.optString("textDecorationColor").takeIf { it.isNotBlank() }?.let { color(it, Color.TRANSPARENT) }
+            val fieldColor = craftNativeOptionalString(style.opt("textDecorationColor"))?.takeIf { it.isNotBlank() }?.let { color(it, Color.TRANSPARENT) }
             editable.setSpan(
-                CraftTextDecorationSpan(line, style.optString("textDecorationStyle").ifBlank { "solid" }, fieldColor),
+                CraftTextDecorationSpan(line, craftNativeOptionalString(style.opt("textDecorationStyle")).orEmpty().ifBlank { "solid" }, fieldColor),
                 0,
                 editable.length,
                 Spannable.SPAN_INCLUSIVE_INCLUSIVE,
@@ -6353,14 +6351,14 @@ class MainActivity : AppCompatActivity() {
             if (view.text is Spannable) view.text = text
             return
         }
-        val decorationColor = style.optString("textDecorationColor")
+        val decorationColor = craftNativeOptionalString(style.opt("textDecorationColor")).orEmpty()
             .takeIf { it.isNotBlank() }
             ?.let { color(it, Color.TRANSPARENT) }
         val decorated = SpannableString(text)
         decorated.setSpan(
             CraftTextDecorationSpan(
                 line,
-                style.optString("textDecorationStyle").ifBlank { "solid" },
+                craftNativeOptionalString(style.opt("textDecorationStyle")).orEmpty().ifBlank { "solid" },
                 decorationColor,
             ),
             0,
@@ -6568,8 +6566,16 @@ class MainActivity : AppCompatActivity() {
                 info.roleDescription = role.takeIf { it !in setOf("view", "text", "textinput", "scrollview") }
                 info.hintText = host.tooltipText
                 info.isEnabled = host.isEnabled && !disabled
-                info.isSelected = craftNativeBoolean(state?.opt("selected"))
-                info.isChecked = craftNativeBoolean(state?.opt("checked"))
+                // Keep the native widget state when no accessibilityState was
+                // authored. Overwriting it with the strict false fallback
+                // made a checked Switch/CheckBox announce as unchecked unless
+                // the screen redundantly mirrored its value into metadata.
+                if (state?.has("selected") == true) {
+                    info.isSelected = craftNativeBoolean(state.opt("selected"))
+                }
+                if (state?.has("checked") == true) {
+                    info.isChecked = craftNativeBoolean(state.opt("checked"))
+                }
             }
         })
         ViewCompat.setImportantForAccessibility(

package/dist/cli.js

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

package/dist/components/index.d.ts

@@ -245,7 +245,7 @@ export interface TextStyleProps {
     /** Font style */
     fontStyle?: 'normal' | 'italic';
     /** Font weight */
-    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontWeight?: number | 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
     /** Letter spacing */
     letterSpacing?: number;
     /** Line height */
@@ -287,6 +287,8 @@ export interface ImageStyleProps {
  * Combined Image style type.
  */
 export type ImageStyle = ViewStyle & ImageStyleProps;
+/** A native style may be nested or conditionally omitted in any component's `style` prop. */
+export type StyleValue<T> = T | StyleValue<T>[] | null | false | undefined;
 /**
  * Base props for all components.
  */
@@ -320,7 +322,7 @@ export interface AccessibilityState {
  */
 export interface ViewProps extends BaseProps {
     /** Style object or array */
-    style?: ViewStyle | ViewStyle[];
+    style?: StyleValue<ViewStyle>;
     /** Press handler */
     onPress?: () => void;
     /** DOM-compatible press alias accepted by native hosts. */
@@ -356,19 +358,23 @@ export interface RefreshControlProps extends BaseProps {
  */
 export interface TextProps extends BaseProps {
     /** Style object or array */
-    style?: TextStyle | TextStyle[];
+    style?: StyleValue<TextStyle>;
     /** Number of lines before truncation */
     numberOfLines?: number;
     /** Ellipsize mode */
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     /** Press handler */
     onPress?: () => void;
+    /** DOM-compatible press alias accepted by native hosts. */
+    onClick?: () => void;
     /** Long press handler */
     onLongPress?: () => void;
 }
 /** Native button/link action props. */
 export interface ButtonProps extends BaseProps {
     title?: string;
+    /** Text and layout styling applied by the native button hosts. */
+    style?: StyleValue<TextStyle>;
     onPress?: () => void;
     onClick?: () => void;
     disabled?: boolean;
@@ -393,10 +399,17 @@ export interface TouchableHighlightProps extends ViewProps {
 /**
  * Image source type.
  */
-export type ImageSource = {
+export type ImageSource = string | {
     uri: string;
     headers?: Record<string, string>;
 };
+export interface ImageErrorEvent {
+    nativeEvent: {
+        error: {
+            message: string;
+        };
+    };
+}
 /**
  * Image component props.
  */
@@ -404,7 +417,7 @@ export interface ImageProps extends BaseProps {
     /** Image source */
     source: ImageSource;
     /** Style object or array */
-    style?: ImageStyle | ImageStyle[];
+    style?: StyleValue<ImageStyle>;
     /** Resize mode */
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
     /** Load start handler */
@@ -413,19 +426,21 @@ export interface ImageProps extends BaseProps {
     onLoad?: () => void;
     /** Load end handler */
     onLoadEnd?: () => void;
-    /** Error handler */
-    onError?: (error: Error) => void;
+    /** Error handler; native failures are exposed as nativeEvent.error.message. */
+    onError?: (event: ImageErrorEvent) => void;
     /** Default source while loading */
     defaultSource?: ImageSource;
     /** Alt text for accessibility */
     alt?: string;
 }
 export interface IconProps extends BaseProps {
+    style?: StyleValue<TextStyle>;
     name?: string;
     symbol?: string;
     color?: string;
 }
 export interface VideoProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     source?: string | {
         uri: string;
     };
@@ -472,6 +487,7 @@ export interface MapRegion {
     };
 }
 export interface MapProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     region?: MapRegion;
     /** Initial camera region; applied once, then controlled by subsequent props. */
     initialRegion?: MapRegion;
@@ -512,7 +528,7 @@ export interface ImageBackgroundProps extends ImageProps {
 }
 /** Shared paint and accessibility props for DOM-free native SVG nodes. */
 export interface SvgPaintProps extends BaseProps {
-    style?: ViewStyle | ViewStyle[];
+    style?: StyleValue<ViewStyle>;
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
@@ -629,7 +645,7 @@ export interface PressableProps extends ViewProps {
  */
 export interface TextInputProps extends BaseProps {
     /** Style object or array */
-    style?: TextStyle | TextStyle[];
+    style?: StyleValue<TextStyle>;
     /** Current value */
     value?: string;
     /** Default value */
@@ -680,6 +696,7 @@ export interface TextInputProps extends BaseProps {
 export type KeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'number-pad' | 'decimal-pad' | 'url' | 'web-search' | 'visible-password';
 export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'join' | 'route' | 'continue' | 'emergency-call' | 'default';
 export interface SwitchProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     /** Controlled boolean state; malformed native bridge values stay off. */
     value?: boolean;
     onValueChange?: (value: boolean) => void;
@@ -693,6 +710,7 @@ export interface SwitchProps extends BaseProps {
     ios_backgroundColor?: string;
 }
 export interface CheckboxProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     /** Controlled boolean state; malformed native bridge values stay off. */
     value?: boolean;
     checked?: boolean;
@@ -704,6 +722,7 @@ export interface CheckboxProps extends BaseProps {
     color?: string;
 }
 export interface SliderProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     value?: number;
     minimumValue?: number;
     maximumValue?: number;
@@ -722,6 +741,7 @@ export interface PickerOption {
     value: string | number;
 }
 export interface PickerProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     /** Typed options; child options remain supported when omitted. */
     items?: PickerOption[];
     selectedValue?: string | number;
@@ -735,7 +755,8 @@ export interface DatePickerChange {
     timestamp: number;
 }
 export interface DatePickerProps extends BaseProps {
-    mode?: 'date' | 'time' | 'datetime' | 'countdown';
+    style?: StyleValue<ViewStyle>;
+    mode?: 'date' | 'time' | 'datetime' | 'datetime-local' | 'countdown';
     value?: string | number;
     minimumDate?: string | number;
     maximumDate?: string | number;
@@ -745,6 +766,7 @@ export interface DatePickerProps extends BaseProps {
     disabled?: boolean;
 }
 export interface ActivityIndicatorProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     color?: string;
     animating?: boolean;
     hidesWhenStopped?: boolean;
@@ -782,6 +804,7 @@ export interface SectionListSection<T> {
 export interface SectionListProps<T> extends ScrollViewProps {
 }
 export interface ModalProps extends BaseProps {
+    style?: StyleValue<ViewStyle>;
     visible?: boolean;
     transparent?: boolean;
     animationType?: 'none' | 'fade' | 'slide';
@@ -893,9 +916,9 @@ export declare const StyleSheet: {
      */
     create<T extends Record<string, ViewStyle | TextStyle | ImageStyle>>(styles: T): T;
     /**
-     * Flatten an array of styles into a single object.
+     * Flatten nested style arrays and ignore falsy conditional entries.
      */
-    flatten<T>(style: T | T[] | undefined): T | undefined;
+    flatten<T>(style: StyleValue<T>): T | undefined;
     /**
      * Get the absolute fill style (full parent).
      */

package/dist/index.cjs

@@ -309,7 +309,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.207";
+var version = "0.0.210";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;
@@ -8625,10 +8625,19 @@ var StyleSheet = {
   flatten(style) {
     if (!style)
       return;
-    if (Array.isArray(style)) {
-      return Object.assign({}, ...style);
-    }
-    return style;
+    const flattened = {};
+    const merge = (value) => {
+      if (!value)
+        return;
+      if (Array.isArray(value)) {
+        value.forEach(merge);
+        return;
+      }
+      if (typeof value === "object")
+        Object.assign(flattened, value);
+    };
+    merge(style);
+    return flattened;
   },
   absoluteFill: {
     position: "absolute",

package/dist/index.js

@@ -57,7 +57,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.207";
+var version = "0.0.210";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;
@@ -8384,10 +8384,19 @@ var StyleSheet = {
   flatten(style) {
     if (!style)
       return;
-    if (Array.isArray(style)) {
-      return Object.assign({}, ...style);
-    }
-    return style;
+    const flattened = {};
+    const merge = (value) => {
+      if (!value)
+        return;
+      if (Array.isArray(value)) {
+        value.forEach(merge);
+        return;
+      }
+      if (typeof value === "object")
+        Object.assign(flattened, value);
+    };
+    merge(style);
+    return flattened;
   },
   absoluteFill: {
     position: "absolute",

package/dist/ios/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/dist/ios/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)

package/package.json

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