craft-native 0.0.164 → 0.0.166

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

@@ -1,10 +1,12 @@
 package {{PACKAGE_NAME}}
 
+import android.animation.ValueAnimator
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
 import android.content.res.ColorStateList
 import android.content.res.Configuration
+import android.database.ContentObserver
 import android.content.Intent
 import android.media.AudioAttributes
 import android.media.AudioFormat
@@ -14,9 +16,13 @@ import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.DashPathEffect
 import android.graphics.Matrix
+import android.graphics.Outline
 import android.graphics.Paint
 import android.graphics.Path
+import android.graphics.RectF
 import android.graphics.Typeface
+import android.graphics.ColorFilter
+import android.graphics.PixelFormat
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.GradientDrawable
 import android.net.Uri
@@ -26,10 +32,14 @@ import android.os.Handler
 import android.os.Looper
 import android.os.VibrationEffect
 import android.os.Vibrator
+import android.provider.Settings
 import android.text.Editable
 import android.text.InputFilter
 import android.text.TextUtils
 import android.text.TextWatcher
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.style.ReplacementSpan
 import android.util.Log
 import android.util.Base64
 import android.util.TypedValue
@@ -41,6 +51,7 @@ import android.text.InputType
 import android.text.Layout
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewOutlineProvider
 import android.view.ViewTreeObserver
 import android.widget.AdapterView
 import android.widget.ArrayAdapter
@@ -85,6 +96,7 @@ import java.util.Locale
 import java.util.concurrent.Executors
 import java.util.concurrent.Future
 import java.util.UUID
+import java.util.WeakHashMap
 import kotlin.math.max
 import kotlin.math.min
 import kotlin.math.PI
@@ -178,6 +190,32 @@ private fun craftNativeGridColumnCount(value: Any?): Int {
     return max(1, trimmed.split(Regex("\\s+")).count { it.isNotBlank() })
 }
 
+/** Android View has no skew setters before API 29; draw the shared skew around the view's center. */
+private object CraftNativeSkewTransforms {
+    private val values = WeakHashMap<View, Pair<Float, Float>>()
+
+    fun set(view: View, x: Float, y: Float) {
+        if (x == 0f && y == 0f) values.remove(view) else values[view] = x to y
+        view.invalidate()
+    }
+
+    fun clear(view: View) {
+        values.remove(view)
+        view.invalidate()
+    }
+
+    fun matrix(view: View): Matrix? {
+        val (x, y) = values[view] ?: return null
+        val pivotX = view.width / 2f
+        val pivotY = view.height / 2f
+        return Matrix().apply {
+            setTranslate(-pivotX, -pivotY)
+            postSkew(x, y)
+            postTranslate(pivotX, pivotY)
+        }
+    }
+}
+
 /** A DOM-free SVG surface for the geometry emitted by the shared STX native protocol. */
 private class CraftNativeSvgView(context: Context) : View(context) {
     var drawing: JSONObject = JSONObject()
@@ -403,11 +441,23 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     private var gridColumns = 1
     private var gridAutoRows: CraftNativeLength? = null
     private var reverse = false
+    private var wrapReverse = false
+
+    override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
+        val skew = CraftNativeSkewTransforms.matrix(child) ?: return super.drawChild(canvas, child, drawingTime)
+        val save = canvas.save()
+        canvas.concat(skew)
+        val drawn = super.drawChild(canvas, child, drawingTime)
+        canvas.restoreToCount(save)
+        return drawn
+    }
 
     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")
-        wrap = style.optString("flexWrap") == "wrap" || style.optBoolean("flexWrap", false)
+        val flexWrap = style.optString("flexWrap")
+        wrap = flexWrap == "wrap" || flexWrap == "wrap-reverse" || style.optBoolean("flexWrap", false)
+        wrapReverse = flexWrap == "wrap-reverse"
         alignItems = style.optString("alignItems", "stretch")
         alignContent = style.optString("alignContent", "flex-start")
         justifyContent = style.optString("justifyContent", "flex-start")
@@ -895,9 +945,12 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             crossFree / lines.size.toFloat()
         else 0f
         var crossOffset = (if (orientation == HORIZONTAL) paddingTop else paddingLeft).toFloat() + crossLeading
+            val crossOrigin = (if (orientation == HORIZONTAL) paddingTop else paddingLeft).toFloat()
+            val crossExtent = availableCross.toFloat()
         for ((lineIndex, line) in lines.withIndex()) {
             val lineCross = line.cross.toFloat() + stretchExtra
-            val lineOffset = sharedCross?.first?.get(lineIndex)?.let { (if (orientation == HORIZONTAL) paddingTop else paddingLeft).toFloat() + it } ?: crossOffset
+                val lineOffset = sharedCross?.first?.get(lineIndex)?.let { crossOrigin + it } ?: crossOffset
+                val physicalLineOffset = if (wrapReverse && wrap) crossOrigin + crossExtent - (lineOffset - crossOrigin) - lineCross else lineOffset
             val fallbackWidths = fallbackFlexWidths(line, availableMain, gap)
             val sharedPrimary = CraftNative.flexRow(
                 availableMain.toFloat(),
@@ -940,6 +993,12 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             val free = max(0f, availableMain.toFloat() - distributedMain.toFloat())
             val (leading, between) = distribution(free, line.entries.size)
             var mainOffset = (if (orientation == HORIZONTAL) paddingLeft else paddingTop).toFloat() + leading
+            val baseline = if (orientation == HORIZONTAL) {
+                line.entries.filter { (it.style.alignSelf ?: alignItems) == "baseline" }.maxOfOrNull { entry ->
+                    val lp = entry.view.layoutParams as? MarginLayoutParams
+                    (lp?.topMargin ?: 0) + baselineOffset(entry.view, entry.height)
+                }
+            } else null
             for ((index, entry) in line.entries.withIndex()) {
                 val lp = entry.view.layoutParams as? MarginLayoutParams
                 val marginStart = if (orientation == HORIZONTAL) lp?.leftMargin ?: 0 else lp?.topMargin ?: 0
@@ -950,18 +1009,26 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 val align = entry.style.alignSelf ?: alignItems
                 val crossLeading = (if (orientation == HORIZONTAL) lp?.topMargin ?: 0 else lp?.leftMargin ?: 0).toFloat()
                 val crossTrailing = (if (orientation == HORIZONTAL) lp?.bottomMargin ?: 0 else lp?.rightMargin ?: 0).toFloat()
-                val alignment = when (align) {
-                    "center" -> 1
-                    "flex-end" -> 2
-                    else -> 0
-                }
-                val crossPosition = CraftNative.crossAxisPosition(
-                    lineCross, crossSize.toFloat(), crossLeading, crossTrailing, alignment
-                ) ?: when (alignment) {
-                    1 -> crossLeading + (lineCross - crossLeading - crossTrailing - crossSize) / 2f
-                    2 -> lineCross - crossTrailing - crossSize
-                    else -> crossLeading
+                val crossPosition = if (align == "baseline" && baseline != null) {
+                    val childBaseline = baselineOffset(entry.view, crossSize).toFloat()
+                    CraftNative.crossAxisPosition(
+                        baseline.toFloat(), childBaseline, crossLeading, crossTrailing, 3
+                    ) ?: max(crossLeading, baseline.toFloat() - childBaseline)
+                } else {
+                    val alignment = when (align) {
+                        "center" -> 1
+                        "flex-end" -> 2
+                        else -> 0
+                    }
+                    CraftNative.crossAxisPosition(
+                        lineCross, crossSize.toFloat(), crossLeading, crossTrailing, alignment
+                    ) ?: when (alignment) {
+                        1 -> crossLeading + (lineCross - crossLeading - crossTrailing - crossSize) / 2f
+                        2 -> lineCross - crossTrailing - crossSize
+                        else -> crossLeading
+                    }
                 }
+                val physicalCrossPosition = if (wrapReverse && wrap) lineCross - crossPosition - crossSize else crossPosition
                 // Shared positions cover every non-reverse justification; the
                 // local main-axis rule remains the fallback for old runtimes
                 // that return widths only.
@@ -970,8 +1037,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 val sharedPosition = if (!reverse) sharedPositions?.get(line.entries.size + index) else null
                 val positionedMain = sharedPosition?.let { (if (orientation == HORIZONTAL) paddingLeft else paddingTop).toFloat() + it }
                     ?: mainOffset + marginStart
-                val x = if (orientation == HORIZONTAL) positionedMain.roundToInt() else (lineOffset + crossPosition).roundToInt()
-                val y = if (orientation == HORIZONTAL) (lineOffset + crossPosition).roundToInt() else positionedMain.roundToInt()
+                val x = if (orientation == HORIZONTAL) positionedMain.roundToInt() else (physicalLineOffset + physicalCrossPosition).roundToInt()
+                val y = if (orientation == HORIZONTAL) (physicalLineOffset + physicalCrossPosition).roundToInt() else positionedMain.roundToInt()
                 val distributedPrimary = sharedPrimary?.get(index)?.roundToInt() ?: fallbackWidths[index]
                 val w = if (orientation == HORIZONTAL) distributedPrimary else crossSize
                 val h = if (orientation == HORIZONTAL) crossSize else distributedPrimary
@@ -1002,6 +1069,9 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             else -> 0f to 0f
         }
     }
+
+    /** First text baseline in pixels; non-text views align by their bottom. */
+    private fun baselineOffset(view: View, cross: Int): Int = view.baseline.takeIf { it >= 0 }?.coerceIn(0, cross) ?: cross
 }
 
 /** An image-backed flex container with ordinary native children over the image. */
@@ -1024,6 +1094,12 @@ private class CraftNativeKeyboardAvoidingView(context: Context) : FrameLayout(co
     private var behavior = "padding"
     private var keyboardVerticalOffset = 0
     private var keyboardInset = 0
+    private var animationScaleObserverRegistered = false
+    private val animationScaleObserver = object : ContentObserver(Handler(Looper.getMainLooper())) {
+        override fun onChange(selfChange: Boolean, uri: Uri?) {
+            publishAppearance()
+        }
+    }
     private var basePadding = intArrayOf(0, 0, 0, 0)
 
     init {
@@ -1432,6 +1508,7 @@ private class CraftNativeDatePickerView(context: Context) : FrameLayout(context)
     private var datePicker: DatePicker? = null
     private var timePicker: TimePicker? = null
     private var minuteInterval = 1
+    private var countdownSecond = 0
     private var suppressChanges = true
     var onValueChanged: (() -> Unit)? = null
 
@@ -1483,6 +1560,7 @@ private class CraftNativeDatePickerView(context: Context) : FrameLayout(context)
         pickerDate(props.opt("minimumDate"))?.let { datePicker?.minDate = it.timeInMillis }
         pickerDate(props.opt("maximumDate"))?.let { datePicker?.maxDate = it.timeInMillis }
         if (requestedMode == PickerMode.COUNTDOWN) {
+            countdownSecond = 0
             countdownSeconds(props.opt("value"))?.let { applyCountdown(it) }
         } else {
             pickerDate(props.opt("value"))?.let { applyDate(it) }
@@ -1533,11 +1611,12 @@ private class CraftNativeDatePickerView(context: Context) : FrameLayout(context)
     }
 
     private fun applyCountdown(seconds: Int) {
+        countdownSecond = seconds % 60
         timePicker?.hour = (seconds / 3600).coerceIn(0, 23)
         timePicker?.minute = (seconds % 3600 / 60).coerceIn(0, 59)
     }
 
-    private fun currentCountdownSeconds(): Int = timePicker?.let { it.hour * 3600 + it.minute * 60 } ?: 0
+    private fun currentCountdownSeconds(): Int = timePicker?.let { it.hour * 3600 + it.minute * 60 + countdownSecond } ?: 0
 
     private fun formatCountdown(seconds: Int): String = "%02d:%02d:%02d".format(
         Locale.US,
@@ -1583,11 +1662,11 @@ private class CraftNativeDatePickerView(context: Context) : FrameLayout(context)
         val text = value?.toString()?.trim().orEmpty()
         if (text.isBlank() || text == JSONObject.NULL.toString()) return null
         text.toDoubleOrNull()?.takeIf { it.isFinite() }?.let { return it.coerceIn(0.0, maxCountdownSeconds.toDouble()).roundToInt() }
-        val parts = text.split(':').mapNotNull { it.toDoubleOrNull() }
+        val parts = text.split(':')
         if (parts.size != 2 && parts.size != 3) return null
-        val hours = parts[0]
-        val minutes = parts[1]
-        val seconds = if (parts.size == 3) parts[2] else 0.0
+        val hours = parts[0].toDoubleOrNull() ?: return null
+        val minutes = parts[1].toDoubleOrNull() ?: return null
+        val seconds = if (parts.size == 3) parts[2].toDoubleOrNull() ?: return null else 0.0
         if (hours < 0 || minutes !in 0.0..<60.0 || seconds !in 0.0..<60.0) return null
         return (hours * 3600 + minutes * 60 + seconds).coerceIn(0.0, maxCountdownSeconds.toDouble()).roundToInt()
     }
@@ -1803,6 +1882,101 @@ private class CraftNativeAudio {
     }
 }
 
+private class CraftTextDecorationSpan(
+    private val line: String,
+    private val style: String,
+    private val decorationColor: Int?,
+) : ReplacementSpan() {
+    override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
+        return ceil(paint.measureText(text, start, end).toDouble()).toInt()
+    }
+
+    override fun draw(
+        canvas: Canvas,
+        text: CharSequence,
+        start: Int,
+        end: Int,
+        x: Float,
+        top: Int,
+        y: Int,
+        bottom: Int,
+        paint: Paint,
+    ) {
+        val originalColor = paint.color
+        val originalStyle = paint.style
+        val originalStrokeWidth = paint.strokeWidth
+        val originalPathEffect = paint.pathEffect
+        val originalStrokeCap = paint.strokeCap
+        paint.style = Paint.Style.FILL
+        paint.pathEffect = null
+        canvas.drawText(text, start, end, x, y.toFloat(), paint)
+
+        val width = paint.measureText(text, start, end)
+        val thickness = max(1f, paint.textSize / 16f)
+        val underlineY = y + max(1f, paint.descent() * 0.15f)
+        val strikeY = y - paint.textSize * 0.3f
+        val decoration = decorationColor ?: originalColor
+        paint.color = decoration
+        paint.style = Paint.Style.STROKE
+        paint.strokeWidth = thickness
+        paint.strokeCap = if (style == "dotted") Paint.Cap.ROUND else Paint.Cap.BUTT
+        paint.pathEffect = when (style) {
+            "dashed" -> DashPathEffect(floatArrayOf(paint.textSize * 0.35f, paint.textSize * 0.25f), 0f)
+            "dotted" -> DashPathEffect(floatArrayOf(thickness, paint.textSize * 0.22f), 0f)
+            else -> null
+        }
+
+        fun drawLine(position: Float) {
+            canvas.drawLine(x, position, x + width, position, paint)
+        }
+        if (line == "underline" || line == "underline line-through") {
+            drawLine(underlineY)
+            if (style == "double") drawLine(underlineY + thickness * 2.5f)
+        }
+        if (line == "line-through" || line == "underline line-through") {
+            drawLine(strikeY)
+            if (style == "double") drawLine(strikeY + thickness * 2.5f)
+        }
+
+        paint.color = originalColor
+        paint.style = originalStyle
+        paint.strokeWidth = originalStrokeWidth
+        paint.pathEffect = originalPathEffect
+        paint.strokeCap = originalStrokeCap
+    }
+}
+
+private class CraftNativeSideBorderDrawable(
+    private val fillColor: Int,
+    private val radii: FloatArray,
+    private val widths: IntArray,
+    private val colors: IntArray,
+) : Drawable() {
+    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
+
+    override fun draw(canvas: Canvas) {
+        val bounds = RectF(this.bounds)
+        paint.style = Paint.Style.FILL
+        paint.color = fillColor
+        if (Color.alpha(fillColor) > 0) {
+            val path = Path().apply { addRoundRect(bounds, radii, Path.Direction.CW) }
+            canvas.drawPath(path, paint)
+        }
+        val top = widths.getOrElse(0) { 0 }
+        val right = widths.getOrElse(1) { 0 }
+        val bottom = widths.getOrElse(2) { 0 }
+        val left = widths.getOrElse(3) { 0 }
+        if (top > 0) { paint.color = colors.getOrElse(0) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.top, bounds.right, bounds.top + top, paint) }
+        if (right > 0) { paint.color = colors.getOrElse(1) { Color.TRANSPARENT }; canvas.drawRect(bounds.right - right, bounds.top, bounds.right, bounds.bottom, paint) }
+        if (bottom > 0) { paint.color = colors.getOrElse(2) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.bottom - bottom, bounds.right, bounds.bottom, paint) }
+        if (left > 0) { paint.color = colors.getOrElse(3) { Color.TRANSPARENT }; canvas.drawRect(bounds.left, bounds.top, bounds.left + left, bounds.bottom, paint) }
+    }
+
+    override fun setAlpha(alpha: Int) { paint.alpha = alpha; invalidateSelf() }
+    override fun setColorFilter(colorFilter: ColorFilter?) { paint.colorFilter = colorFilter; invalidateSelf() }
+    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
+}
+
 /** WebView-free host for a route bundle compiled by `stx native compile`. */
 class MainActivity : AppCompatActivity() {
     private class Screen(
@@ -2124,6 +2298,7 @@ class MainActivity : AppCompatActivity() {
                 capabilities: ${capabilities.names()},
                 initialAppState: ${JSONObject.quote(nativeAppState)},
                 colorScheme: ${JSONObject.quote(colorScheme())},
+                appearance: ${appearance()},
                 postMessage: function(value) { port.postMessage(value); },
                 onMessage: function(callback) { port.onmessage = function(event) { callback(event.data); }; }
               };
@@ -2139,6 +2314,7 @@ class MainActivity : AppCompatActivity() {
               capabilities: ${capabilities.names()},
               initialAppState: ${JSONObject.quote(nativeAppState)},
               colorScheme: ${JSONObject.quote(colorScheme())},
+              appearance: ${appearance()},
               postMessage: function(value) { console.log(${JSONObject.quote(prefix)} + value); },
               onMessage: function(callback) { globalThis.__stxNativeCallback = callback; }
             };
@@ -2190,15 +2366,17 @@ class MainActivity : AppCompatActivity() {
 
     override fun onConfigurationChanged(newConfig: Configuration) {
         super.onConfigurationChanged(newConfig)
+        publishAppearance()
+    }
+
+    private fun publishAppearance() {
         if (!::root.isInitialized) return
         refreshThemeDefaults()
         ViewCompat.requestApplyInsets(root)
         refreshInputDefaultsForTraitChange()
         screens.lastOrNull()?.let { screen ->
             refreshScreenTheme(screen)
-            if (screen.active) {
-                send(screen, "APPEARANCE", JSONObject().put("colorScheme", colorScheme()))
-            }
+            if (screen.active) send(screen, "APPEARANCE", appearance())
         }
     }
 
@@ -2223,6 +2401,25 @@ class MainActivity : AppCompatActivity() {
         resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
     ) "dark" else "light"
 
+    private fun appearance(): JSONObject {
+        val scale = resources.configuration.fontScale.toDouble().coerceAtLeast(0.1)
+        val contentSize = when {
+            scale >= 1.5 -> "accessibilityExtraExtraExtraLarge"
+            scale >= 1.35 -> "accessibilityExtraExtraLarge"
+            scale >= 1.2 -> "accessibilityExtraLarge"
+            scale >= 1.1 -> "extraLarge"
+            scale <= 0.85 -> "extraSmall"
+            scale <= 0.92 -> "small"
+            else -> "large"
+        }
+        return JSONObject()
+            .put("contentSizeCategory", contentSize)
+            .put("fontScale", (scale * 1000).roundToInt() / 1000.0)
+            .put("reduceMotion", !ValueAnimator.areAnimatorsEnabled())
+            .put("reduceTransparency", false)
+            .put("colorScheme", colorScheme())
+    }
+
     private fun refreshInputDefaultsForTraitChange() {
         if (inputHintDefaults.isEmpty() && inputHighlightDefaults.isEmpty()) return
         val probe = EditText(this)
@@ -2540,7 +2737,12 @@ class MainActivity : AppCompatActivity() {
                         (style.optDouble("paddingBottom", vertical) * density).toInt(),
                     )
                 }
-                autofillHintFor(props)?.let { setAutofillHints(it) }
+                // Reused EditTexts must forget the previous field's hint as
+                // well as accept a new one. Otherwise a password manager can
+                // offer credentials in a field whose props no longer ask for
+                // them after keyed reconciliation.
+                val autofillHint = autofillHintFor(props)
+                if (autofillHint == null) setAutofillHints(*emptyArray()) else setAutofillHints(autofillHint)
                 val controlledValue = props.opt("value")?.takeUnless { it == JSONObject.NULL }?.toString()
                 if (controlledValue != null && text.toString() != controlledValue) {
                     screen.suppressedTextChanges.add(this)
@@ -2548,6 +2750,7 @@ class MainActivity : AppCompatActivity() {
                 }
                 else if (this !== previous && screen.drafts.containsKey(identity)) setText(screen.drafts[identity])
                 else if (this !== previous && props.has("defaultValue") && !props.isNull("defaultValue")) setText(props.optString("defaultValue"))
+                applyTextDecoration(this, style)
                 screen.inputIdentities[this] = identity
                 val handler = events.optString("onChange").ifBlank { events.optString("onChangeText") }
                 if (handler.isNotBlank()) screen.handlers[this] = handler else screen.handlers.remove(this)
@@ -2741,7 +2944,12 @@ class MainActivity : AppCompatActivity() {
                 // ranges unable to represent most valid values. Continuous
                 // sliders retain the bounded scale to avoid an enormous max.
                 val progressMax = step?.let {
-                    ceil((maximum - minimum) / it).toInt().coerceIn(1, 1_000_000)
+                    // SeekBar stores progress as an Int. Do not impose a
+                    // smaller arbitrary ceiling: large authored ranges must
+                    // still be able to reach their final stepped value.
+                    ceil((maximum - minimum) / it).toLong()
+                        .coerceIn(1L, Int.MAX_VALUE.toLong())
+                        .toInt()
                 } ?: 1000
                 max = progressMax
                 val requested = props.optDouble("value", minimum)
@@ -3270,27 +3478,79 @@ class MainActivity : AppCompatActivity() {
 
     private fun applyViewStyle(view: View, style: JSONObject) {
         view.alpha = style.optDouble("opacity", 1.0).toFloat()
+        applyTransform(view, style.optJSONArray("transform"))
         if (view !is CraftNativeModalView) {
             view.visibility = if (style.optString("display") == "none") View.GONE else View.VISIBLE
         }
         view.elevation = dp(style.optDouble("elevation", 0.0)).toFloat()
+        view.z = style.optDouble("zIndex", 0.0).toFloat()
         val background = style.has("backgroundColor") && !style.isNull("backgroundColor")
         val border = style.optDouble("borderWidth", 0.0)
         val radius = style.optDouble("borderRadius", 0.0)
+        val sideBorderKeys = listOf("borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth")
+        val hasSideBorders = (sideBorderKeys + listOf("borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor")).any(style::has)
+        val sideWidths = sideBorderKeys.map { dp(style.optDouble(it, border)) }.toIntArray()
+        val cornerRadiusKeys = listOf("borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius")
+        val hasCornerRadii = cornerRadiusKeys.any(style::has)
+        val cornerRadii = cornerRadiusKeys.flatMap { value ->
+            val radius = dp(style.optDouble(value, radius)).toFloat()
+            listOf(radius, radius)
+        }.toFloatArray()
+        val sideColors = listOf("borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor")
+            .map { color(style.optString(it).ifBlank { style.optString("borderColor") }, Color.TRANSPARENT) }
+            .toIntArray()
         val defaultBackground = if (defaultBackgrounds.containsKey(view)) {
             defaultBackgrounds[view]
         } else {
             view.background.also { defaultBackgrounds[view] = it }
         }
-        if (background || border > 0 || radius > 0) {
-            view.background = GradientDrawable().apply {
-                setColor(color(style.optString("backgroundColor"), Color.TRANSPARENT))
-                cornerRadius = dp(radius).toFloat()
-                if (border > 0) setStroke(dp(border), color(style.optString("borderColor"), Color.TRANSPARENT))
+        if (background || border > 0 || radius > 0 || hasSideBorders) {
+            if (hasSideBorders) {
+                view.background = CraftNativeSideBorderDrawable(
+                    color(style.optString("backgroundColor"), Color.TRANSPARENT),
+                    cornerRadii,
+                    sideWidths,
+                    sideColors,
+                )
+            } else {
+                view.background = GradientDrawable().apply {
+                    setColor(color(style.optString("backgroundColor"), Color.TRANSPARENT))
+                    if (hasCornerRadii) setCornerRadii(cornerRadii) else cornerRadius = dp(radius).toFloat()
+                    if (border > 0) {
+                        val borderColor = color(style.optString("borderColor"), Color.TRANSPARENT)
+                        when (style.optString("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)
+                        }
+                    }
+                }
             }
         } else view.background = defaultBackground
         view.clipToOutline = style.optString("overflow") == "hidden"
         if (view is ViewGroup) view.clipChildren = style.optString("overflow") == "hidden"
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P &&
+            (style.has("shadowColor") || style.has("shadowOpacity") || style.has("shadowRadius"))
+        ) {
+            val shadowOpacity = style.optDouble("shadowOpacity", 1.0).coerceIn(0.0, 1.0)
+            val shadow = color(style.optString("shadowColor"), 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
+            view.elevation = max(view.elevation, dp(style.optDouble("shadowRadius", 0.0) * 2.0).toFloat())
+            val offset = style.optJSONObject("shadowOffset")
+            val offsetX = dp(offset?.optDouble("width", 0.0) ?: 0.0)
+            val offsetY = dp(offset?.optDouble("height", 0.0) ?: 0.0)
+            val shadowRadius = dp(style.optDouble("shadowRadius", 0.0)).toFloat()
+            view.outlineProvider = object : ViewOutlineProvider() {
+                override fun getOutline(target: View, outline: Outline) {
+                    outline.setRoundRect(offsetX, offsetY, target.width + offsetX, target.height + offsetY, shadowRadius)
+                }
+            }
+            view.invalidateOutline()
+        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            view.outlineProvider = ViewOutlineProvider.BACKGROUND
+        }
         if (view is ImageView) {
             val tint = style.opt("tintColor") as? String
             if (tint.isNullOrBlank() || tint == "null" || tint == "undefined") {
@@ -3301,6 +3561,49 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
+    private fun applyTransform(view: View, transforms: JSONArray?) {
+        view.translationX = 0f
+        view.translationY = 0f
+        view.scaleX = 1f
+        view.scaleY = 1f
+        view.rotation = 0f
+        view.rotationX = 0f
+        view.rotationY = 0f
+        CraftNativeSkewTransforms.clear(view)
+        if (transforms == null) return
+        var skewX = 0f
+        var skewY = 0f
+        for (index in 0 until transforms.length()) {
+            val transform = transforms.optJSONObject(index) ?: continue
+            val key = transform.keys().asSequence().firstOrNull() ?: continue
+            when (key) {
+                "translateX" -> view.translationX += dp(transform.optDouble(key, 0.0)).toFloat()
+                "translateY" -> view.translationY += dp(transform.optDouble(key, 0.0)).toFloat()
+                "scale" -> transform.optDouble(key, 1.0).toFloat().let { view.scaleX *= it; view.scaleY *= it }
+                "scaleX" -> view.scaleX *= transform.optDouble(key, 1.0).toFloat()
+                "scaleY" -> view.scaleY *= transform.optDouble(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))
+                "skewX" -> skewX += skewFactor(transform.opt(key))
+                "skewY" -> skewY += skewFactor(transform.opt(key))
+            }
+        }
+        CraftNativeSkewTransforms.set(view, skewX, skewY)
+    }
+
+    private fun skewFactor(value: Any?): Float =
+        kotlin.math.tan(angleDegrees(value).toDouble() * PI / 180.0).toFloat()
+
+    private fun angleDegrees(value: Any?): Float {
+        val text = value?.toString()?.trim() ?: return 0f
+        return when {
+            text.endsWith("rad") -> Math.toDegrees(text.dropLast(3).toDoubleOrNull() ?: 0.0).toFloat()
+            text.endsWith("deg") -> text.dropLast(3).toFloatOrNull() ?: 0f
+            else -> text.toFloatOrNull() ?: 0f
+        }
+    }
+
     private fun ensureLayoutListener(screen: Screen, view: View) {
         if (screen.layoutListeners.containsKey(view)) return
         val listener = View.OnLayoutChangeListener { changed, left, top, right, bottom, _, _, _, _ ->
@@ -3409,13 +3712,59 @@ class MainActivity : AppCompatActivity() {
             style.optDouble("lineHeight", Double.NaN).takeUnless { it.isNaN() }?.let { dp(it) - view.textSize } ?: 0f,
             1f
         )
+        val shadowColor = style.optString("textShadowColor").takeIf { it.isNotBlank() }
+        if (shadowColor == null) {
+            view.paint.clearShadowLayer()
+        } else {
+            val offset = style.optJSONObject("textShadowOffset")
+            view.setShadowLayer(
+                dp(style.optDouble("textShadowRadius", 0.0)).toFloat().coerceAtLeast(0f),
+                dp(offset?.optDouble("width", 0.0) ?: 0.0).toFloat(),
+                dp(offset?.optDouble("height", 0.0) ?: 0.0).toFloat(),
+                color(shadowColor, Color.TRANSPARENT),
+            )
+        }
         view.paintFlags = view.paintFlags and Paint.UNDERLINE_TEXT_FLAG.inv() and Paint.STRIKE_THRU_TEXT_FLAG.inv()
-        when (style.optString("textDecorationLine")) {
-            "underline" -> view.paintFlags = view.paintFlags or Paint.UNDERLINE_TEXT_FLAG
-            "line-through" -> view.paintFlags = view.paintFlags or Paint.STRIKE_THRU_TEXT_FLAG
-            "underline line-through" -> view.paintFlags = view.paintFlags or
-                Paint.UNDERLINE_TEXT_FLAG or Paint.STRIKE_THRU_TEXT_FLAG
+        applyTextDecoration(view, style)
+    }
+
+    private fun applyTextDecoration(view: TextView, style: JSONObject) {
+        val line = style.optString("textDecorationLine")
+        val text = view.text?.toString() ?: return
+        if (line.isBlank() || line == "none" || text.isEmpty()) {
+            if (view.text is Spannable) view.text = text
+            return
         }
+        val decorationColor = style.optString("textDecorationColor")
+            .takeIf { it.isNotBlank() }
+            ?.let { color(it, Color.TRANSPARENT) }
+        val decorated = SpannableString(text)
+        decorated.setSpan(
+            CraftTextDecorationSpan(
+                line,
+                style.optString("textDecorationStyle").ifBlank { "solid" },
+                decorationColor,
+            ),
+            0,
+            decorated.length,
+            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
+        )
+        view.text = decorated
+    }
+
+    /**
+     * Match iOS image loading: HTTPS is allowed everywhere, while plain HTTP
+     * is limited to loopback/development hosts. Android's generated manifest
+     * enables cleartext traffic only for the corresponding dev-server or
+     * local-network configurations.
+     */
+    private fun loadsImage(uri: Uri): Boolean {
+        val scheme = uri.scheme?.lowercase() ?: return false
+        if (scheme == "https") return true
+        if (scheme != "http") return false
+        val host = uri.host?.lowercase() ?: return false
+        return host == "localhost" || host == "127.0.0.1" || host == "10.0.2.2" ||
+            host == "::1" || host.endsWith(".localhost")
     }
 
     private fun updateImage(screen: Screen, view: ImageView, source: Any?) {
@@ -3459,7 +3808,7 @@ class MainActivity : AppCompatActivity() {
             } else imageFailure(screen, view, uri, "Bundled image was not found")
             return
         }
-        if (!uri.startsWith("https://")) {
+        if (!loadsImage(Uri.parse(uri))) {
             imageFailure(screen, view, uri, "Unsupported image source")
             return
         }
@@ -3599,14 +3948,30 @@ class MainActivity : AppCompatActivity() {
         val raw = props.optString("textContentType").ifBlank { props.optString("autoComplete") }
         return when (raw.replace("-", "").replace("_", "").lowercase()) {
             "username" -> View.AUTOFILL_HINT_USERNAME
+            "nickname" -> "personNickname"
             "password", "currentpassword" -> View.AUTOFILL_HINT_PASSWORD
             "newpassword" -> "newPassword"
             "onetimecode" -> "smsOTPCode"
             "emailaddress", "email" -> View.AUTOFILL_HINT_EMAIL_ADDRESS
             "telephonenumber", "tel", "phone" -> View.AUTOFILL_HINT_PHONE
             "name" -> View.AUTOFILL_HINT_NAME
+            "givenname", "firstname" -> "personGivenName"
+            "middlename", "additionalname" -> "personMiddleName"
+            "familyname", "lastname" -> "personFamilyName"
+            "nameprefix", "honorificprefix" -> "personNamePrefix"
+            "namesuffix", "honorificsuffix" -> "personNameSuffix"
+            "organizationname", "organization" -> "organizationName"
+            "jobtitle", "organizationtitle" -> "jobTitle"
+            "url" -> "url"
             "postalcode" -> View.AUTOFILL_HINT_POSTAL_CODE
             "fullstreetaddress", "streetaddress" -> View.AUTOFILL_HINT_POSTAL_ADDRESS
+            "streetaddressline1", "addressline1" -> "streetAddress"
+            "streetaddressline2", "addressline2" -> "streetAddressLine2"
+            "addresscity", "addresslevel2" -> "addressLocality"
+            "addressstate", "addresslevel1" -> "addressRegion"
+            "countryname", "country" -> "addressCountry"
+            "location" -> "location"
+            "creditcardnumber", "ccnumber" -> "creditCardNumber"
             else -> null
         }
     }
@@ -3617,6 +3982,11 @@ class MainActivity : AppCompatActivity() {
         "next" -> EditorInfo.IME_ACTION_NEXT
         "search" -> EditorInfo.IME_ACTION_SEARCH
         "send" -> EditorInfo.IME_ACTION_SEND
+        // Android has no separate JOIN, ROUTE, CONTINUE, or EMERGENCY_CALL
+        // action. GO/NEXT are the closest platform actions and still expose
+        // an actionable IME key instead of silently falling back to NONE.
+        "join", "route", "emergency-call" -> EditorInfo.IME_ACTION_GO
+        "continue" -> EditorInfo.IME_ACTION_NEXT
         else -> EditorInfo.IME_ACTION_NONE
     }
 
@@ -3710,6 +4080,11 @@ class MainActivity : AppCompatActivity() {
 
     override fun onStart() {
         super.onStart()
+        if (!animationScaleObserverRegistered) {
+            contentResolver.registerContentObserver(Settings.Global.getUriFor(Settings.Global.ANIMATOR_DURATION_SCALE), false, animationScaleObserver)
+            contentResolver.registerContentObserver(Settings.Global.getUriFor(Settings.Global.TRANSITION_ANIMATION_SCALE), false, animationScaleObserver)
+            animationScaleObserverRegistered = true
+        }
         nativeAppState = "active"
         publish("APP_STATE", JSONObject().put("state", nativeAppState))
     }
@@ -3721,6 +4096,10 @@ class MainActivity : AppCompatActivity() {
     }
 
     override fun onStop() {
+        if (animationScaleObserverRegistered) {
+            contentResolver.unregisterContentObserver(animationScaleObserver)
+            animationScaleObserverRegistered = false
+        }
         nativeAppState = "background"
         publish("APP_STATE", JSONObject().put("state", nativeAppState))
         super.onStop()
@@ -3964,6 +4343,7 @@ class MainActivity : AppCompatActivity() {
     }
 
     override fun onDestroy() {
+        if (animationScaleObserverRegistered) contentResolver.unregisterContentObserver(animationScaleObserver)
         screens.forEach { closeScreen(it) }
         screens.clear()
         imageJobs.values.forEach { it.cancel(true) }