craft-native 0.0.500 → 0.0.502

package/dist/android/src/index.d.ts

@@ -47,6 +47,12 @@ export interface CraftAndroidConfig {
     renderer?: 'web' | 'native';
     /** "system" follows the device; light/dark pin the generated host. */
     appearance?: 'light' | 'dark' | 'system';
+    /**
+     * The native chrome's accent as #RRGGBB: Back, the bar's buttons and the
+     * selected tab. Omitted keeps the system blue, as before. iOS has had the
+     * same key; without it an app themed on iOS drew its Android chrome blue.
+     */
+    tintColor?: string;
     /** Static native tab-bar styling applied before the page's own tabBar.set call. */
     tabBar?: CraftTabBarConfig;
     /** Runs from the generated project root before Gradle compiles the app. */

package/dist/android/src/index.js

@@ -1140,6 +1140,8 @@ function validateAndroidConfig(config) {
   if (config.appearance !== undefined && !["light", "dark", "system"].includes(config.appearance)) {
     throw new Error(`Unknown Android appearance: ${config.appearance}. Expected light, dark, or system.`);
   }
+  if (config.tintColor !== undefined && !/^#[0-9a-f]{6}$/i.test(config.tintColor))
+    throw new Error("Android tintColor must be a #RRGGBB color");
   const selection = config.tabBar?.selection;
   if (selection?.cornerRadius !== undefined && (!Number.isFinite(selection.cornerRadius) || selection.cornerRadius < 0))
     throw new Error("Android tabBar.selection.cornerRadius must be a finite non-negative number");

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

@@ -17,6 +17,9 @@ import kotlin.math.max
 
 internal typealias CraftNativeRenderItem = (node: JSONObject, identity: String, previous: View?) -> View
 
+/** The most columns a grid is given: more than any screen has pixels across to show. */
+internal const val CRAFT_NATIVE_FLAT_LIST_MAX_COLUMNS = 1024
+
 /** A stable-key RecyclerView host for stx native FlatList nodes. */
 internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
     override fun dispatchTouchEvent(event: MotionEvent): Boolean =
@@ -403,7 +406,11 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
         this.endReached = endReached
         threshold = endReachedThreshold.takeIf { it.isFinite() }?.coerceAtLeast(0.0) ?: 0.1
 
-        val nextColumns = columns.coerceAtLeast(1)
+        // A grid keeps an array one longer than its column count, so a
+        // count from data (`numColumns={Number.MAX_VALUE}` arrives as the
+        // largest Int) asked it for a negative length and ended the process
+        // in layout. No screen is as many pixels wide as this many columns.
+        val nextColumns = columns.coerceIn(1, CRAFT_NATIVE_FLAT_LIST_MAX_COLUMNS)
         val layoutChanged = this.horizontal != horizontal || this.columns != nextColumns
         val retainedState = if (layoutChanged) null else layoutManager?.onSaveInstanceState()
         this.horizontal = horizontal

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

@@ -187,6 +187,10 @@ internal class CraftNativeRoutes(config: JSONObject) {
         }
         ?: CraftNativeTabBarAppearance()
 
+    /** The chrome's accent, where the app set one (`tintColor`); the system blue otherwise. */
+    val tintColor: Int? = config.optString("tintColor").takeUnless { config.isNull("tintColor") || it.isBlank() }
+        ?.let { runCatching { Color.parseColor(it) }.getOrNull() }
+
     /** CSS stacks for the chrome's labels and titles, as the app configured them. */
     val fontFamily: String? = config.optString("fontFamily").takeUnless { config.isNull("fontFamily") || it.isBlank() }
     val headingFontFamily: String? = config.optString("headingFontFamily").takeUnless { config.isNull("headingFontFamily") || it.isBlank() }
@@ -993,7 +997,7 @@ internal object CraftNativePrelude {
  * screen sets its own chrome with
  *
  * `craft.navigation.setOptions({ title, largeTitle, titleColor, hidden,
- *   backgroundColor, leftButtons, rightButtons, tabItem, tabAccessory,
+ *   backgroundColor, backButton, leftButtons, rightButtons, tabItem, tabAccessory,
  *   tabBarHidden, tabBarHiddenWhenPushed, tabSwipeEnabled })`
  *
  * which `apply` below reads. That list is checked against `apply` itself
@@ -1013,6 +1017,7 @@ internal class CraftNativeChrome(
     private val tabs: List<CraftNativeTab>,
     private val tabBarAppearance: CraftNativeTabBarAppearance = CraftNativeTabBarAppearance(),
     private val fonts: CraftNativeChromeFonts = CraftNativeChromeFonts(),
+    private val tintColor: Int? = null,
 ) : LinearLayout(context) {
     val content = FrameLayout(context)
     private val body = FrameLayout(context)
@@ -1249,6 +1254,8 @@ internal class CraftNativeChrome(
         val title = options.optString("title").takeIf { options.has("title") } ?: fallbackTitle.orEmpty()
         bar.visibility = if (hidden) View.GONE else View.VISIBLE
         backButton.visibility = if (depth > 0) View.VISIBLE else View.GONE
+        backButtonSpec = options.optJSONObject("backButton")
+        applyBackButton()
         bar.setPadding(if (depth > 0) dp(4) else dp(4), 0, dp(8), 0)
         titleView.text = if (large) "" else title
         largeTitleView.text = title
@@ -1368,14 +1375,22 @@ internal class CraftNativeChrome(
             view.getLocationInWindow(at)
             return (at[1] - origin[1] + view.height - top).coerceIn(0, reach)
         }
-        fun visit(view: View) {
+        // `inside` a scroll view that scrolls down the screen, a list or a
+        // second scroll view is brought clear by that one, and gets none of
+        // its own: where it sits in a page not yet scrolled to it says
+        // nothing about the screen, and a short list below the fold was
+        // given the whole reach and scrolled inside its box into blank space.
+        fun visit(view: View, inside: Boolean) {
             when (view) {
-                is CraftNativeFlatList -> view.setFloatingCover(cover(view))
-                is CraftNativeScrollView -> { view.setFloatingCover(cover(view)); visit(view.content) }
-                is ViewGroup -> for (index in 0 until view.childCount) visit(view.getChildAt(index))
+                is CraftNativeFlatList -> view.setFloatingCover(if (inside) 0 else cover(view))
+                is CraftNativeScrollView -> {
+                    view.setFloatingCover(if (inside) 0 else cover(view))
+                    visit(view.content, inside || view.scrollsVertically)
+                }
+                is ViewGroup -> for (index in 0 until view.childCount) visit(view.getChildAt(index), inside)
             }
         }
-        visit(content)
+        visit(content, false)
     }
 
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
@@ -1497,6 +1512,42 @@ internal class CraftNativeChrome(
         )
     }
 
+    private var backButtonSpec: JSONObject? = null
+    private var renderedBackButton = ""
+
+    /**
+     * `backButton`: what this screen's Back is drawn with, when it is not the
+     * arrow (`{ symbol: "xmark", accessibilityLabel: "Close" }` for a screen
+     * that closes rather than goes back). `leftButtons` sit beside Back, so a
+     * screen could not put its own symbol in Back's place (#527). It is still
+     * the bar's back button: the same tap, shown at the same depths.
+     *
+     * The symbol is the app's own icon when it has one, and AppCompat's close
+     * mark for an `xmark` it has none for. Any other symbol the app has no
+     * icon for leaves the arrow, and its "Back".
+     */
+    private fun applyBackButton() {
+        val symbol = backButtonSpec?.optString("symbol").orEmpty()
+        val label = backButtonSpec?.optString("accessibilityLabel").orEmpty()
+        val tint = backButton.imageTintList?.defaultColor ?: Color.BLACK
+        // The activity passes cumulative options for every live patch: the
+        // same symbol in the same colour keeps the picture it has.
+        val rendered = "$symbol\u0000$label\u0000$tint"
+        if (rendered == renderedBackButton) return
+        renderedBackButton = rendered
+        val icon = if (symbol.isBlank()) null else CraftNativeIcons.drawable(context, null, symbol, tint)
+            ?: if (symbol.startsWith("xmark")) {
+                androidx.appcompat.content.res.AppCompatResources.getDrawable(context, androidx.appcompat.R.drawable.abc_ic_clear_material)
+            } else null
+        if (icon == null) {
+            backButton.setImageResource(androidx.appcompat.R.drawable.abc_ic_ab_back_material)
+            backButton.contentDescription = "Back"
+        } else {
+            backButton.setImageDrawable(icon)
+            backButton.contentDescription = label.ifBlank { if (symbol.startsWith("xmark")) "Close" else "Back" }
+        }
+    }
+
     /** Light or dark changed: the bars follow the screen's background. */
     fun refreshColors() {
         val background = screenBackgroundColor ?: ContextCompat.getColor(context, R.color.background)
@@ -1510,6 +1561,8 @@ internal class CraftNativeChrome(
         titleView.setTextColor(navigationTitleColor ?: text)
         largeTitleView.setTextColor(navigationTitleColor ?: text)
         backButton.imageTintList = ColorStateList.valueOf(accent)
+        // A screen's own back symbol is drawn in the accent, not tinted by it.
+        applyBackButton()
         val surface = if (dark) Color.parseColor("#1C1C1E") else Color.parseColor("#F9F9F9")
         val grouped = accessoryGroup.parent === body
         accessoryGroup.background = if (grouped) GradientDrawable().apply { setColor(surface); cornerRadius = dp(26).toFloat() } else null
@@ -1633,7 +1686,8 @@ internal class CraftNativeChrome(
         }
     }
 
-    private fun accentColor(dark: Boolean): Int = if (dark) Color.parseColor("#0A84FF") else Color.parseColor("#007AFF")
+    /** Back, the bar's buttons and the selected tab: the app's own tint in both appearances, else the system blue. */
+    private fun accentColor(dark: Boolean): Int = tintColor ?: if (dark) Color.parseColor("#0A84FF") else Color.parseColor("#007AFF")
 
     private fun tabCellBackground(index: Int, dark: Boolean): android.graphics.drawable.Drawable? {
         if (accessorySelected || index != selectedTab || (tabBarAppearance.selectionColor == null && tabBarAppearance.selectionCornerRadius == null)) return rippleBackground()

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

@@ -229,6 +229,21 @@ internal fun craftNativeFiniteFloat(style: JSONObject?, name: String, fallback:
     return if (value.isFinite() && narrowed.isFinite()) narrowed else fallback
 }
 
+/**
+ * The most a number may be on a view, either side of zero: 2^25, as on UIKit.
+ * It is far past any screen, and a view refuses anything past the largest
+ * Float: `setScaleX` and its like throw on infinity and on what is not a
+ * number, and a style is whatever the script said.
+ */
+internal const val CRAFT_NATIVE_LAYOUT_LIMIT = 33_554_432f
+
+/** A number for a view: inside that limit, and 0 when it is not a number. */
+internal fun craftNativeLayoutNumber(value: Float): Float =
+    if (value.isNaN()) 0f else value.coerceIn(-CRAFT_NATIVE_LAYOUT_LIMIT, CRAFT_NATIVE_LAYOUT_LIMIT)
+
+internal fun craftNativeLayoutNumber(value: Double): Float =
+    if (value.isNaN()) 0f else value.coerceIn(-CRAFT_NATIVE_LAYOUT_LIMIT.toDouble(), CRAFT_NATIVE_LAYOUT_LIMIT.toDouble()).toFloat()
+
 internal fun craftNativeFiniteDouble(style: JSONObject?, name: String, fallback: Double): Double {
     val value = craftNativeNumber(style?.opt(name)) ?: Double.NaN
     return value.takeIf { it.isFinite() } ?: fallback
@@ -355,29 +370,32 @@ internal fun craftNativeComponentLayoutStyle(node: JSONObject): JSONObject {
     return merged
 }
 
-private fun craftNativeGridColumnCount(value: Any?): Int {
-    if (value is Number) return max(1, value.toInt())
-    val text = value as? String ?: return 1
-    val trimmed = text.trim()
-    if (trimmed.startsWith("repeat(")) {
-        val count = trimmed.removePrefix("repeat(").takeWhile { it.isDigit() }.toIntOrNull()
-        if (count != null) return max(1, count)
-    }
-    return max(1, trimmed.split(Regex("\\s+")).count { it.isNotBlank() })
-}
+/**
+ * The most tracks a grid is given, either way. A count is whatever the script
+ * said (`gridTemplateRows: Number.MAX_VALUE`, `repeat(2147483647, 1fr)`), and
+ * the layout makes a list of rows and an array of columns that long: the
+ * process ran out of memory in measure. No screen has room to show more
+ * tracks than this.
+ */
+internal const val CRAFT_NATIVE_GRID_TRACK_LIMIT = 1024
 
-private fun craftNativeGridRowCount(value: Any?): Int? {
-    if (value is Number) return max(1, value.toInt())
-    val text = value as? String ?: return null
-    val trimmed = text.trim()
-    if (trimmed.isEmpty()) return null
+internal fun craftNativeGridTrackCount(value: Any?): Int? {
+    if (value is Number) return value.toInt().coerceIn(1, CRAFT_NATIVE_GRID_TRACK_LIMIT)
+    val trimmed = (value as? String)?.trim()?.takeIf { it.isNotEmpty() } ?: return null
     if (trimmed.startsWith("repeat(")) {
-        val count = trimmed.removePrefix("repeat(").takeWhile { it.isDigit() }.toIntOrNull()
-        if (count != null) return max(1, count)
+        // Digits past what an Int holds are still a count, and still too many.
+        val digits = trimmed.removePrefix("repeat(").takeWhile { it.isDigit() }
+        if (digits.isNotEmpty()) {
+            return (digits.toIntOrNull() ?: CRAFT_NATIVE_GRID_TRACK_LIMIT).coerceIn(1, CRAFT_NATIVE_GRID_TRACK_LIMIT)
+        }
     }
-    return max(1, trimmed.split(Regex("\\s+")).count { it.isNotBlank() })
+    return trimmed.split(Regex("\\s+")).count { it.isNotBlank() }.coerceIn(1, CRAFT_NATIVE_GRID_TRACK_LIMIT)
 }
 
+private fun craftNativeGridColumnCount(value: Any?): Int = craftNativeGridTrackCount(value) ?: 1
+
+private fun craftNativeGridRowCount(value: Any?): Int? = craftNativeGridTrackCount(value)
+
 /**
  * A CSS colour as Android's ARGB. STX writes `#RRGGBBAA` (and `#RGBA`) for a
  * colour with alpha, where Android's parser reads `#AARRGGBB`: a translucent
@@ -412,6 +430,54 @@ internal fun craftNativeColor(raw: String): Int {
 }
 
 /** Android View has no skew setters before API 29; draw the shared skew around the view's center. */
+/**
+ * Times a hold on a view whose touch listener answers every event itself.
+ *
+ * The platform times a long click in `View.onTouchEvent`, and a listener
+ * that consumes the touch keeps that from running. A pressable with
+ * `onPress` has such a listener (it sends the press, and the press-in and
+ * press-out around it), so its `onLongPress`, and the menu a `contextMenu`
+ * opens on a hold, were never reached by a finger: holding a row sent its
+ * press when the finger lifted (#529).
+ *
+ * The same rules as the platform's: the hold is up after its long-press
+ * timeout, a finger that moves past the touch slop is not holding, and a
+ * hold that something handled is not also a press.
+ */
+private object CraftNativePressHolds {
+    private class Hold(val fire: Runnable, val x: Float, val y: Float)
+    private val pending = WeakHashMap<View, Hold>()
+    private val handled = WeakHashMap<View, Boolean>()
+
+    fun began(view: View, event: MotionEvent) {
+        cancel(view)
+        handled.remove(view)
+        if (!view.isLongClickable) return
+        val fire = Runnable {
+            pending.remove(view)
+            if (view.isAttachedToWindow && view.isLongClickable && view.performLongClick()) handled[view] = true
+        }
+        pending[view] = Hold(fire, event.x, event.y)
+        view.postDelayed(fire, android.view.ViewConfiguration.getLongPressTimeout().toLong())
+    }
+
+    fun moved(view: View, event: MotionEvent) {
+        val hold = pending[view] ?: return
+        val slop = android.view.ViewConfiguration.get(view.context).scaledTouchSlop
+        if (abs(event.x - hold.x) > slop || abs(event.y - hold.y) > slop) cancel(view)
+    }
+
+    /** The touch is over. Whether its hold was handled, so that lifting is not a press. */
+    fun ended(view: View): Boolean {
+        cancel(view)
+        return handled.remove(view) == true
+    }
+
+    private fun cancel(view: View) {
+        pending.remove(view)?.let { view.removeCallbacks(it.fire) }
+    }
+}
+
 private object CraftNativeSkewTransforms {
     private val values = WeakHashMap<View, Pair<Float, Float>>()
 
@@ -1344,7 +1410,19 @@ internal class CraftNativePointerImageView(context: Context) : ImageView(context
             ?: style.opt(name)?.takeUnless { it == JSONObject.NULL }
         val fit = value("objectFit")
         val position = value("objectPosition")
-        objectFit = if (fit != null || position != null) (fit as? String)
+        // A position does not choose a fit, as in CSS. STX compiles
+        // `object-cover` to `resizeMode: "cover"` and sets no objectFit, so a
+        // cover image given a position was drawn as "fill": stretched to its
+        // box instead of cropped (#532).
+        val requested = if (fit != null) fit as? String else when (
+            craftNativeOptionalString(style.opt("resizeMode")) ?: craftNativeOptionalString(props.opt("resizeMode"))
+        ) {
+            "cover" -> "cover"
+            "contain" -> "contain"
+            "center" -> "none"
+            else -> "fill"
+        }
+        objectFit = if (fit != null || position != null) requested
             ?.takeIf { it in setOf("fill", "contain", "cover", "none", "scale-down") } ?: "fill" else null
         val point = parsePosition(position)
         objectX = point.first; objectY = point.second
@@ -3080,6 +3158,9 @@ internal class CraftNativeScrollView(context: Context) : SwipeRefreshLayout(cont
         vertical.setPadding(vertical.paddingLeft, vertical.paddingTop, vertical.paddingRight, next)
     }
 
+    /** Whether this scrolls down the screen: what is inside it is brought clear of the actions by it. */
+    val scrollsVertically: Boolean get() = horizontalMode != true
+
     private var bounces = true
     private var alwaysBounceVertical = true
     private var alwaysBounceHorizontal = true
@@ -5345,7 +5426,8 @@ class MainActivity : AppCompatActivity() {
     private fun installChrome() {
         val bodyFont = craftNativeChromeTypeface(routes.fontFamily, bundledFonts)
         val bars = CraftNativeChrome(this, routes.tabs, routes.tabBarAppearance,
-            CraftNativeChromeFonts(bodyFont, craftNativeChromeTypeface(routes.headingFontFamily, bundledFonts) ?: bodyFont))
+            CraftNativeChromeFonts(bodyFont, craftNativeChromeTypeface(routes.headingFontFamily, bundledFonts) ?: bodyFont),
+            routes.tintColor)
         bars.layoutParams = FrameLayout.LayoutParams(-1, -1)
         bars.onBack = { onBackPressedDispatcherCompat() }
         bars.onAccessory = { path -> navigateOpen(path) }
@@ -7093,9 +7175,17 @@ class MainActivity : AppCompatActivity() {
                 }
             }
             "Slider" -> (previous as? SeekBar ?: CraftNativePointerSeekBar(this)).apply {
-                val minimum = craftNativeFiniteNumber(props, "minimumValue", 0.0)
-                val maximumCandidate = craftNativeFiniteNumber(props, "maximumValue", 1.0)
-                val maximum = if (maximumCandidate > minimum) maximumCandidate else minimum + Double.MIN_VALUE
+                // Held to a quarter of the largest Double, so the range, and
+                // a value's distance along it, are numbers: at the largest
+                // their difference is infinite, and infinity over infinity
+                // is not a number, which `roundToInt` throws on and JSON
+                // will not carry back to the screen.
+                val bound = Double.MAX_VALUE / 4
+                val minimum = craftNativeFiniteNumber(props, "minimumValue", 0.0).coerceIn(-bound, bound)
+                val maximumCandidate = craftNativeFiniteNumber(props, "maximumValue", 1.0).coerceIn(-bound, bound)
+                // The next number up, whatever the size of the first: adding
+                // the smallest Double to anything but zero adds nothing.
+                val maximum = if (maximumCandidate > minimum) maximumCandidate else Math.nextUp(minimum)
                 setOnSeekBarChangeListener(null)
                 val step = craftNativeFiniteNumber(props, "step", 0.0).takeIf { it > 0 }
                 // A stepped slider needs one native position per authored
@@ -7111,7 +7201,7 @@ class MainActivity : AppCompatActivity() {
                         .toInt()
                 } ?: 1000
                 max = progressMax
-                val requested = craftNativeFiniteNumber(props, "value", minimum)
+                val requested = craftNativeFiniteNumber(props, "value", minimum).coerceIn(minimum, maximum)
                 val value = (if (step != null) minimum + ((requested - minimum) / step).roundToInt() * step else requested)
                     .coerceIn(minimum, maximum)
                 progress = if (step != null) {
@@ -7159,7 +7249,7 @@ class MainActivity : AppCompatActivity() {
                 val scale = when (requestedSize) {
                     "large" -> 1.35f
                     "small" -> 0.75f
-                    is Number -> (requestedSize.toDouble() / 24.0).takeIf { it.isFinite() }?.toFloat()?.coerceAtLeast(0.5f) ?: 1f
+                    is Number -> (requestedSize.toDouble() / 24.0).takeIf { it.isFinite() }?.let { craftNativeLayoutNumber(it).coerceAtLeast(0.5f) } ?: 1f
                     else -> 1f
                 }
                 indicatorScale = scale
@@ -7441,9 +7531,17 @@ class MainActivity : AppCompatActivity() {
                                 screen.pressUnderlayShowHandlers[view]?.let { current ->
                                     send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                                 }
+                                // This listener answers every event, so the
+                                // platform never times the hold: do it here.
+                                CraftNativePressHolds.began(view, event)
+                                true
+                            }
+                            android.view.MotionEvent.ACTION_MOVE -> {
+                                CraftNativePressHolds.moved(view, event)
                                 true
                             }
                             android.view.MotionEvent.ACTION_UP, android.view.MotionEvent.ACTION_CANCEL -> {
+                                val held = CraftNativePressHolds.ended(view)
                                 view.alpha = screen.pressBaseOpacities[view] ?: 1f
                                 if (screen.pressBaseBackgrounds.containsKey(view)) view.background = screen.pressBaseBackgrounds[view]
                                 screen.pressOutHandlers[view]?.let { current ->
@@ -7452,7 +7550,9 @@ class MainActivity : AppCompatActivity() {
                                 screen.pressUnderlayHideHandlers[view]?.let { current ->
                                     send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject()))
                                 }
-                                if (event.actionMasked == android.view.MotionEvent.ACTION_UP) {
+                                // A hold that sent its long press, or opened
+                                // its menu, is not a press as well.
+                                if (event.actionMasked == android.view.MotionEvent.ACTION_UP && !held) {
                                     dispatchNativePress(screen, view)
                                 }
                                 true
@@ -7964,37 +8064,46 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun applyTransform(view: View, transforms: JSONArray?) {
-        view.translationX = 0f
-        view.translationY = 0f
         // Reconciliation reapplies transforms; start from the control's
         // intrinsic scale rather than erasing its authored indicator size.
         val intrinsicScale = (view as? CraftNativeActivityIndicator)?.indicatorScale ?: 1f
-        view.scaleX = intrinsicScale
-        view.scaleY = intrinsicScale
-        view.rotation = 0f
-        view.rotationX = 0f
-        view.rotationY = 0f
-        CraftNativeSkewTransforms.clear(view)
-        if (transforms == null) return
+        var translationX = 0f
+        var translationY = 0f
+        var scaleX = intrinsicScale
+        var scaleY = intrinsicScale
+        var rotation = 0f
+        var rotationX = 0f
+        var rotationY = 0f
         var skewX = 0f
         var skewY = 0f
-        for (index in 0 until transforms.length()) {
-            val transform = transforms.optJSONObject(index) ?: continue
+        for (index in 0 until (transforms?.length() ?: 0)) {
+            val transform = transforms?.optJSONObject(index) ?: continue
             val key = transform.keys().asSequence().firstOrNull() ?: continue
             when (key) {
-                "translateX" -> view.translationX += dp(craftNativeFiniteDouble(transform, key, 0.0)).toFloat()
-                "translateY" -> view.translationY += dp(craftNativeFiniteDouble(transform, key, 0.0)).toFloat()
-                "scale" -> craftNativeFiniteDouble(transform, key, 1.0).toFloat().let { view.scaleX *= it; view.scaleY *= it }
-                "scaleX" -> view.scaleX *= craftNativeFiniteDouble(transform, key, 1.0).toFloat()
-                "scaleY" -> view.scaleY *= craftNativeFiniteDouble(transform, key, 1.0).toFloat()
-                "rotate", "rotateZ" -> view.rotation += angleDegrees(transform.opt(key))
-                "rotateX" -> view.rotationX += angleDegrees(transform.opt(key))
-                "rotateY" -> view.rotationY += angleDegrees(transform.opt(key))
+                "translateX" -> translationX += dp(craftNativeFiniteDouble(transform, key, 0.0)).toFloat()
+                "translateY" -> translationY += dp(craftNativeFiniteDouble(transform, key, 0.0)).toFloat()
+                "scale" -> craftNativeFiniteDouble(transform, key, 1.0).toFloat().let { scaleX *= it; scaleY *= it }
+                "scaleX" -> scaleX *= craftNativeFiniteDouble(transform, key, 1.0).toFloat()
+                "scaleY" -> scaleY *= craftNativeFiniteDouble(transform, key, 1.0).toFloat()
+                "rotate", "rotateZ" -> rotation += angleDegrees(transform.opt(key))
+                "rotateX" -> rotationX += angleDegrees(transform.opt(key))
+                "rotateY" -> rotationY += angleDegrees(transform.opt(key))
                 "skewX" -> skewX += skewFactor(transform.opt(key))
                 "skewY" -> skewY += skewFactor(transform.opt(key))
             }
         }
-        CraftNativeSkewTransforms.set(view, skewX, skewY)
+        // Summed and multiplied first, and bounded once: a view throws on a
+        // scale or an offset that is infinite or not a number, and two finite
+        // factors can make either.
+        view.translationX = craftNativeLayoutNumber(translationX)
+        view.translationY = craftNativeLayoutNumber(translationY)
+        view.scaleX = craftNativeLayoutNumber(scaleX)
+        view.scaleY = craftNativeLayoutNumber(scaleY)
+        view.rotation = craftNativeLayoutNumber(rotation)
+        view.rotationX = craftNativeLayoutNumber(rotationX)
+        view.rotationY = craftNativeLayoutNumber(rotationY)
+        CraftNativeSkewTransforms.clear(view)
+        if (transforms != null) CraftNativeSkewTransforms.set(view, craftNativeLayoutNumber(skewX), craftNativeLayoutNumber(skewY))
     }
 
     private fun skewFactor(value: Any?): Float =

package/dist/cli.js

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

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/ios/templates/CraftNativeScreen.swift

@@ -214,31 +214,34 @@ private func craftNativePickerValue(_ value: Any?) -> String? {
     return nil
 }
 
-private func craftNativeGridColumnCount(_ value: Any?) -> Int {
-    if let number = craftNativeNumber(value) { return max(1, number.intValue) }
-    guard let text = value as? String else { return 1 }
-    let trimmed = text.trimmingCharacters(in: .whitespacesAndNewlines)
-    if trimmed.hasPrefix("repeat(") {
-        let digits = trimmed.dropFirst("repeat(".count).prefix { $0.isNumber }
-        if let count = Int(digits) { return max(1, count) }
+/// The most tracks a grid is given, either way. A count is whatever the
+/// script said (`gridTemplateRows: Number.MAX_VALUE`,
+/// `repeat(4294967296, 1fr)`), and the layout makes an array of rows that
+/// long and hands the shared engine both counts as a `UInt32`: the first ran
+/// the process out of memory and the second trapped. No screen has room to
+/// show more tracks than this.
+let craftNativeGridTrackLimit = 1024
+
+func craftNativeGridTrackCount(_ value: Any?) -> Int? {
+    if let number = craftNativeNumber(value) {
+        return min(craftNativeGridTrackLimit, max(1, craftNativeInt(number.doubleValue)))
     }
-    let tracks = trimmed.split(whereSeparator: { $0 == " " || $0 == "\t" || $0 == "\n" })
-    return max(1, tracks.count)
-}
-
-private func craftNativeGridRowCount(_ value: Any?) -> Int? {
-    if let number = craftNativeNumber(value) { return max(1, number.intValue) }
     guard let text = value as? String else { return nil }
     let trimmed = text.trimmingCharacters(in: .whitespacesAndNewlines)
     guard !trimmed.isEmpty else { return nil }
     if trimmed.hasPrefix("repeat(") {
-        let digits = trimmed.dropFirst("repeat(".count).prefix { $0.isNumber }
-        if let count = Int(digits) { return max(1, count) }
+        let digits = trimmed.dropFirst("repeat(".count).prefix { ("0"..."9").contains($0) }
+        // Digits past what an Int holds are still a count, and still too many.
+        if !digits.isEmpty { return min(craftNativeGridTrackLimit, max(1, Int(digits) ?? craftNativeGridTrackLimit)) }
     }
     let tracks = trimmed.split(whereSeparator: { $0 == " " || $0 == "\t" || $0 == "\n" })
-    return tracks.isEmpty ? nil : max(1, tracks.count)
+    return tracks.isEmpty ? nil : min(craftNativeGridTrackLimit, tracks.count)
 }
 
+private func craftNativeGridColumnCount(_ value: Any?) -> Int { craftNativeGridTrackCount(value) ?? 1 }
+
+private func craftNativeGridRowCount(_ value: Any?) -> Int? { craftNativeGridTrackCount(value) }
+
 /// Optional bridge to the shared Zig flex rule. Native hosts retain their
 /// local implementation when no Craft runtime is linked (the normal SDK
 /// fallback), while runtime-backed apps get one cross-platform calculation.
@@ -4376,7 +4379,11 @@ class CraftNativePositionedImageView: UIView {
         }
         let rawFit = value("objectFit"), rawPosition = value("objectPosition")
         if rawFit != nil || rawPosition != nil {
-            let requested = rawFit as? String ?? "fill"
+            // A position does not choose a fit, as in CSS. STX compiles
+            // `object-cover` to `resizeMode: "cover"` and sets no objectFit,
+            // so a cover image given a position was drawn as "fill":
+            // stretched to its box instead of cropped (#532).
+            let requested = rawFit as? String ?? Self.objectFit(resizeMode: style["resizeMode"] as? String ?? props["resizeMode"] as? String)
             fit = ["fill", "contain", "cover", "none", "scale-down"].contains(requested) ? requested : "fill"
             position = Self.objectPosition(rawPosition)
         } else { fit = nil }
@@ -4404,6 +4411,17 @@ class CraftNativePositionedImageView: UIView {
     var usesObjectGeometry: Bool { fit != nil }
     var objectCovers: Bool { fit == "cover" }
 
+    /// The fit a `resizeMode` already asks for, for an image that has a
+    /// position and no `objectFit`; "fill" when it has neither.
+    static func objectFit(resizeMode: String?) -> String {
+        switch resizeMode {
+        case "cover": return "cover"
+        case "contain": return "contain"
+        case "center": return "none"
+        default: return "fill"
+        }
+    }
+
     private static func objectPosition(_ raw: Any?) -> CGPoint {
         guard let text = raw as? String else { return CGPoint(x: 0.5, y: 0.5) }
         var parts = text.lowercased().split(whereSeparator: { $0.isWhitespace }).map(String.init)
@@ -7184,6 +7202,9 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             // a screen that hid its own.
             navigationController?.setNavigationBarHidden(false, animated: animated)
         }
+        // Options can arrive before the screen is in a stack: whether it has
+        // a screen to go back to is known now.
+        if backButtonSpec != nil { applyLeadingBarItems() }
         applyNavigationBarAppearance()
         // Each screen says whether it wants the tab bar, so one that hid it
         // never leaves it hidden for the next. Only the screen on screen:
@@ -7858,7 +7879,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// - `craft.secureStorage.getSync(key)`: the Keychain item the web page's
     ///   `craft.secureStorage.set` wrote.
     /// - `craft.navigation.setOptions({ title, titleColor, largeTitle, hidden,
-    ///   backTitle, tabBarHidden, tabBarHiddenWhenPushed, tabItem, swipeBack,
+    ///   backTitle, backButton, tabBarHidden, tabBarHiddenWhenPushed, tabItem, swipeBack,
     ///   contentSwipeBack,
     ///   tabSwipeEnabled, backgroundColor, navigationBarSolid, leftButtons,
     ///   rightButtons, tabAccessory })`; a button's tap is the event
@@ -8474,10 +8495,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 navigationController?.setNavigationBarHidden(hidden, animated: animatesNavigationBarChanges)
             }
         }
+        if options.keys.contains("backButton") {
+            backButtonSpec = options["backButton"] as? [String: Any]
+            backButtonItem = nil
+        }
         if options.keys.contains("leftButtons") {
             let buttons = (options["leftButtons"] as? [[String: Any]]) ?? []
-            navigationItem.leftItemsSupplementBackButton = true
-            navigationItem.leftBarButtonItems = buttons.compactMap(navigationButton)
+            leftButtonItems = buttons.compactMap(navigationButton)
+        }
+        if options.keys.contains("backButton") || options.keys.contains("leftButtons") {
+            applyLeadingBarItems()
         }
         if options.keys.contains("rightButtons") {
             let buttons = (options["rightButtons"] as? [[String: Any]]) ?? []
@@ -8575,6 +8602,44 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         return actions.isEmpty ? nil : UIMenu(children: actions)
     }
 
+    /// `backButton`: what this screen's Back is drawn with, when it is not
+    /// the chevron (`{ symbol: "xmark", accessibilityLabel: "Close" }` for a
+    /// screen that closes rather than goes back). `leftButtons` are added
+    /// beside Back, so a screen could not put its own symbol in Back's place
+    /// (#527). Nil is the system's chevron.
+    private var backButtonSpec: [String: Any]?
+    private var backButtonItem: UIBarButtonItem?
+    private var leftButtonItems: [UIBarButtonItem] = []
+
+    /// The screen's own Back, when it asked for one and has a screen to go
+    /// back to, then its left buttons. The chevron is hidden only while the
+    /// item that replaces it is in the bar: a symbol UIKit does not have
+    /// leaves the chevron. The back-swipe is the shell's to allow, and is
+    /// not affected.
+    private func applyLeadingBarItems() {
+        // Known to be the first screen of its stack: nothing to go back to.
+        let isRoot = navigationController?.viewControllers.first === self
+        if !isRoot, backButtonItem == nil, let spec = backButtonSpec,
+           let symbol = spec["symbol"] as? String, let image = UIImage(systemName: symbol) {
+            let item = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(backButtonTapped))
+            item.accessibilityIdentifier = "nav-back"
+            item.accessibilityLabel = (spec["accessibilityLabel"] as? String).flatMap { $0.isEmpty ? nil : $0 }
+                ?? (symbol.hasPrefix("xmark") ? "Close" : "Back")
+            backButtonItem = item
+        }
+        let back = isRoot ? nil : backButtonItem
+        navigationItem.hidesBackButton = back != nil
+        navigationItem.leftItemsSupplementBackButton = true
+        navigationItem.leftBarButtonItems = (back.map { [$0] } ?? []) + leftButtonItems
+    }
+
+    /// What `craft.navigation.back()` does.
+    @objc private func backButtonTapped() {
+        if !isAppScript, navigationController?.topViewController === self {
+            navigationController?.popViewController(animated: true)
+        }
+    }
+
     private func navigationButton(_ spec: [String: Any]) -> UIBarButtonItem? {
         guard let id = spec["id"] as? String, !id.isEmpty else { return nil }
         let action = UIAction { [weak self] _ in
@@ -9060,27 +9125,44 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// view is does not come into it: a page of a pager that is off to one
     /// side now is under the actions once it is swiped to. The safe area and
     /// the viewport are left alone: content still scrolls behind the
-    /// actions. Internal for XCTest.
+    /// actions.
+    ///
+    /// Two things are not behind the actions, and get none. A scroll view
+    /// that is not inside the shell the actions float in: a sheet is
+    /// presented in front of them, and its scroll view was given the room of
+    /// a capsule it covers, so every sheet could be dragged up into blank
+    /// space. And a scroll view or list inside another that scrolls the same
+    /// way: it is brought clear by the outer one, and where it sits in a page
+    /// not yet scrolled to it says nothing about the glass; a short list
+    /// below the fold was given the height of the page above it. Internal
+    /// for XCTest.
     func insetScrollViewsForFloatingActions() {
         let chrome = CraftChrome.shared
-        let actions = chrome.floatingActions.flatMap { frame in
-            chrome.floatingActionsHost.flatMap { view.isDescendant(of: $0) ? frame : nil }
-        }
+        let host = chrome.floatingActionsHost.flatMap { view.isDescendant(of: $0) ? $0 : nil }
+        let actions = host == nil ? nil : chrome.floatingActions
         func cover(_ scroll: UIScrollView) -> CGFloat {
-            guard let actions, let window = scroll.window else { return 0 }
+            guard let actions, let host, let window = scroll.window, scroll.isDescendant(of: host) else { return 0 }
             let frame = scroll.convert(scroll.bounds, to: window)
+            // Nothing past the end of the shell is on the glass.
+            let end = min(frame.maxY, host.convert(host.bounds, to: window).maxY)
             // An edge-to-edge scroller already clears the tab bar through
             // UIKit's safe area. Add only what the actions reach above it.
             let automaticBottom = max(0, scroll.adjustedContentInset.bottom - scroll.contentInset.bottom)
-            return max(0, frame.maxY - actions.minY - automaticBottom)
+            return max(0, end - actions.minY - automaticBottom)
         }
-        func visit(_ node: RenderedNode?) {
+        func visit(_ node: RenderedNode?, inside: Bool) {
             guard let node else { return }
-            if let scroll = node.view as? CraftNativeScrollView, scroll.isVertical { scroll.floatingCover = cover(scroll) }
-            else if let list = node.view as? CraftNativeFlatList { list.floatingCover = cover(list) }
-            node.children.forEach(visit)
+            var inside = inside
+            if let scroll = node.view as? CraftNativeScrollView, scroll.isVertical {
+                scroll.floatingCover = inside ? 0 : cover(scroll)
+                inside = true
+            } else if let list = node.view as? CraftNativeFlatList {
+                list.floatingCover = inside ? 0 : cover(list)
+                if (list.collectionViewLayout as? UICollectionViewFlowLayout)?.scrollDirection != .horizontal { inside = true }
+            }
+            node.children.forEach { visit($0, inside: inside) }
         }
-        visit(renderedRoot)
+        visit(renderedRoot, inside: false)
         floatingClearanceApplied = actions != nil
     }
 

package/package.json

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