craft-native 0.0.163 → 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,9 +96,11 @@ 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
+import kotlin.math.ceil
 import kotlin.math.roundToInt
 import kotlin.math.roundToLong
 import kotlin.math.sin
@@ -177,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()
@@ -202,13 +241,16 @@ private class CraftNativeSvgView(context: Context) : View(context) {
                 props.has(name) && !props.isNull(name) -> props.optString(name)
                 else -> null
             }
+            // Keep the cascade explicit: computed style wins over a raw prop
+            // when both provide the same SVG paint value.
             val weight = value("fontWeight")
+            val ownOpacity = value("opacity")?.toFloatOrNull() ?: 1f
             return copy(
                 fill = value("fill") ?: fill,
                 stroke = value("stroke") ?: stroke,
                 strokeWidth = value("strokeWidth")?.toFloatOrNull() ?: strokeWidth,
                 color = value("color") ?: color,
-                opacity = (value("opacity")?.toFloatOrNull() ?: 1f) * opacity,
+                opacity = ownOpacity * opacity,
                 typeface = if (weight in setOf("bold", "700")) Typeface.DEFAULT_BOLD else typeface,
             )
         }
@@ -393,23 +435,35 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     private var alignItems = "stretch"
     private var alignContent = "flex-start"
     private var justifyContent = "flex-start"
-    private var rowGap = 0
-    private var columnGap = 0
+    private var rowGap = 0f
+    private var columnGap = 0f
     private var grid = false
     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")
-        val gap = (style.optDouble("gap", 0.0) * density).toInt()
-        rowGap = (style.optDouble("rowGap", gap.toDouble() / density.toDouble()) * density).toInt()
-        columnGap = (style.optDouble("columnGap", gap.toDouble() / density.toDouble()) * density).toInt()
+        val gap = style.optDouble("gap", 0.0) * density
+        rowGap = style.optDouble("rowGap", gap / density.toDouble()).toFloat() * density
+        columnGap = style.optDouble("columnGap", gap / density.toDouble()).toFloat() * density
         grid = style.optString("display") == "grid"
         gridColumns = craftNativeGridColumnCount(
             if (style.has("gridTemplateColumns")) style.opt("gridTemplateColumns") else style.opt("gridColumns")
@@ -438,8 +492,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     }
 
     private data class Entry(val view: View, val style: CraftNativeLayoutStyle, val width: Int, val height: Int)
-    private data class Line(val entries: MutableList<Entry> = mutableListOf(), var main: Int = 0, var cross: Int = 0)
-    private data class GridLayout(val rows: List<List<Entry>>, val absolute: List<Entry>, val cellWidth: Int, val rowHeights: List<Int>)
+    private data class Line(val entries: MutableList<Entry> = mutableListOf(), var main: Float = 0f, var cross: Float = 0f)
+    private data class GridLayout(val rows: List<List<Entry>>, val absolute: List<Entry>, val cellWidth: Float, val rowHeights: List<Float>)
 
     private fun entries(width: Int, height: Int): Pair<List<Line>, List<Entry>> {
         val availableMain = if (orientation == HORIZONTAL) max(0, width - paddingLeft - paddingRight)
@@ -487,8 +541,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             }
             var line = Line()
             pending.forEachIndexed { index, entry ->
-                val childMain = if (orientation == HORIZONTAL) entry.width + (margins[index * 2] + margins[index * 2 + 1]).roundToInt()
-                else entry.height + (margins[index * 2] + margins[index * 2 + 1]).roundToInt()
+                val childMain = if (orientation == HORIZONTAL) entry.width.toFloat() + margins[index * 2] + margins[index * 2 + 1]
+                else entry.height.toFloat() + margins[index * 2] + margins[index * 2 + 1]
                 val lp = entry.view.layoutParams as? MarginLayoutParams
                 val crossMargins = if (orientation == HORIZONTAL) (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
                 else (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
@@ -502,17 +556,22 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 }
                 line.entries += entry
                 line.main = if (line.entries.size == 1) childMain else line.main + gap + childMain
-                line.cross = max(line.cross, childCross)
+                line.cross = max(line.cross, childCross.toFloat())
             }
             if (line.entries.isNotEmpty()) lines += line
         }
+        // Reconciliation reverses the child order so the main axis runs in
+        // the requested direction. With wrapping, that also reverses the
+        // line order; flexbox keeps wrap lines in cross-axis order, so restore
+        // the groups while retaining the reversed entries inside each line.
+        if (reverse && wrap && lines.size > 1) lines.reverse()
         return lines to absolute
     }
 
     private fun gridLayout(width: Int, height: Int): GridLayout {
         val availableWidth = max(0, width - paddingLeft - paddingRight)
         val gap = columnGap
-        val cellWidth = max(0, (availableWidth - max(0, gridColumns - 1) * gap) / max(1, gridColumns))
+        val cellWidth = max(0f, (availableWidth.toFloat() - max(0, gridColumns - 1) * gap) / max(1, gridColumns).toFloat())
         val rows = mutableListOf<MutableList<Entry>>()
         val absolute = mutableListOf<Entry>()
         for (index in 0 until childCount) {
@@ -532,7 +591,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 absolute += Entry(child, style, modalWidth, modalHeight)
                 continue
             }
-            val childWidth = measureChildWidth(child, style, cellWidth, horizontalMargins)
+            val childWidth = measureChildWidth(child, style, cellWidth.roundToInt(), horizontalMargins)
             val childHeight = measureChildHeight(child, style, height - paddingTop - paddingBottom, verticalMargins)
             val entry = Entry(child, style, childWidth, childHeight)
             if (style.position == "absolute") absolute += entry
@@ -542,10 +601,10 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             }
         }
         val rowHeights = rows.map { row ->
-            max(gridAutoRows?.resolve(height - paddingTop - paddingBottom) ?: 0, row.maxOfOrNull { entry ->
+            max((gridAutoRows?.resolve(height - paddingTop - paddingBottom) ?: 0).toFloat(), row.maxOfOrNull { entry ->
                 val lp = entry.view.layoutParams as? MarginLayoutParams
-                entry.height + (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
-            } ?: 0)
+                (entry.height + (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)).toFloat()
+            } ?: 0f)
         }
         return GridLayout(rows, absolute, cellWidth, rowHeights)
     }
@@ -573,9 +632,9 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             flowIndex += 1
         }
         val cellWidth = columnWidths.maxOrNull() ?: 0
-        val width = paddingLeft + paddingRight + cellWidth * columns + max(0, columns - 1) * columnGap
+        val width = paddingLeft + paddingRight + cellWidth * columns + (max(0, columns - 1) * columnGap).roundToInt()
         val rowGapTotal = max(0, rowHeights.size - 1) * rowGap
-        val measuredHeight = paddingTop + paddingBottom + rowHeights.sum() + rowGapTotal
+        val measuredHeight = paddingTop + paddingBottom + rowHeights.sum() + rowGapTotal.roundToInt()
         return width to measuredHeight
     }
 
@@ -658,15 +717,15 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     }
 
     /** Keep the old-runtime shim on the same bounded-flex water-fill rule as the Zig bridge. */
-    private fun fallbackFlexWidths(line: Line, available: Int, gap: Int): IntArray {
+    private fun fallbackFlexWidths(line: Line, available: Int, gap: Float): IntArray {
         val horizontal = orientation == HORIZONTAL
         val hypothetical = line.entries.sumOf { entry ->
             val lp = entry.view.layoutParams as? MarginLayoutParams
             val margins = if (horizontal) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
             else (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
-            (if (horizontal) entry.width else entry.height) + margins
-        } + max(0, line.entries.size - 1) * gap
-        val free = available - hypothetical
+            ((if (horizontal) entry.width else entry.height) + margins).toDouble()
+        } + max(0, line.entries.size - 1) * gap.toDouble()
+        val free = available.toDouble() - hypothetical
         val growTotal = line.entries.sumOf { it.style.flexGrow }
         val shrinkTotal = line.entries.sumOf {
             (it.style.flexShrink ?: defaultFlexShrink(it.view)) * (if (horizontal) it.width else it.height)
@@ -695,7 +754,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 }
             }
             if (factor <= 0) return@repeat
-            val remaining = available - fixed - activeBasis
+            val remaining = available.toDouble() - fixed - activeBasis
             var froze = false
             for ((index, entry) in line.entries.withIndex()) {
                 if (frozen[index]) continue
@@ -733,16 +792,16 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 return
             }
             val layout = gridLayout(width, height)
-            val desiredWidth = paddingLeft + paddingRight + layout.cellWidth * gridColumns + max(0, gridColumns - 1) * columnGap
-            val desiredHeight = paddingTop + paddingBottom + layout.rowHeights.sum() + max(0, layout.rowHeights.size - 1) * rowGap
+            val desiredWidth = paddingLeft + paddingRight + (layout.cellWidth * gridColumns + max(0, gridColumns - 1) * columnGap).roundToInt()
+            val desiredHeight = paddingTop + paddingBottom + layout.rowHeights.sum().roundToInt() + (max(0, layout.rowHeights.size - 1) * rowGap).roundToInt()
             setMeasuredDimension(resolveSize(desiredWidth, widthMeasureSpec), resolveSize(desiredHeight, heightMeasureSpec))
             return
         }
         val (lines, absolute) = entries(width, height)
-        val main = lines.maxOfOrNull { it.main } ?: 0
-        val cross = lines.sumOf { it.cross } + max(0, lines.size - 1) * (if (orientation == HORIZONTAL) rowGap else columnGap)
-        val desiredWidth = if (orientation == HORIZONTAL) main else cross
-        val desiredHeight = if (orientation == HORIZONTAL) cross else main
+        val main = lines.maxOfOrNull { it.main } ?: 0f
+        val cross = lines.sumOf { it.cross.toDouble() } + max(0, lines.size - 1) * (if (orientation == HORIZONTAL) rowGap else columnGap).toDouble()
+        val desiredWidth = if (orientation == HORIZONTAL) main.roundToInt() else cross.roundToInt()
+        val desiredHeight = if (orientation == HORIZONTAL) cross.roundToInt() else main.roundToInt()
         val absWidth = absolute.maxOfOrNull { it.width } ?: 0
         val absHeight = absolute.maxOfOrNull { it.height } ?: 0
         setMeasuredDimension(
@@ -760,12 +819,12 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             // Older runtimes return null for the optional symbol; the local
             // layout below remains the compatibility path in that case.
             val sharedFrames = CraftNative.grid(
-                contentWidth.toFloat(), contentHeight.toFloat(), gridColumns, columnGap.toFloat(), rowGap.toFloat(),
+                contentWidth.toFloat(), contentHeight.toFloat(), gridColumns, columnGap, rowGap,
                 flow.map { it.width.toFloat() }.toFloatArray(), flow.map { it.height.toFloat() }.toFloatArray(),
-                flow.map { it.style.width?.resolve(layout.cellWidth)?.toFloat() ?: Float.NaN }.toFloatArray(),
+                flow.map { it.style.width?.resolve(layout.cellWidth.roundToInt())?.toFloat() ?: Float.NaN }.toFloatArray(),
                 flow.map { it.style.height?.resolve(null)?.toFloat() ?: Float.NaN }.toFloatArray(),
-                flow.map { it.style.minWidth?.resolve(layout.cellWidth)?.toFloat() ?: Float.NaN }.toFloatArray(),
-                flow.map { it.style.maxWidth?.resolve(layout.cellWidth)?.toFloat() ?: Float.NaN }.toFloatArray(),
+                flow.map { it.style.minWidth?.resolve(layout.cellWidth.roundToInt())?.toFloat() ?: Float.NaN }.toFloatArray(),
+                flow.map { it.style.maxWidth?.resolve(layout.cellWidth.roundToInt())?.toFloat() ?: Float.NaN }.toFloatArray(),
                 flow.map { it.style.minHeight?.resolve(null)?.toFloat() ?: Float.NaN }.toFloatArray(),
                 flow.map { it.style.maxHeight?.resolve(null)?.toFloat() ?: Float.NaN }.toFloatArray(),
                 flow.flatMap {
@@ -790,8 +849,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                 }
             } else {
                 val totalRows = layout.rowHeights.sum()
-                val rowGaps = max(0, layout.rowHeights.size - 1) * rowGap
-                val freeRows = max(0, contentHeight - totalRows - rowGaps).toFloat()
+                val rowGaps = max(0, layout.rowHeights.size - 1) * rowGap.toFloat()
+                val freeRows = max(0f, contentHeight.toFloat() - totalRows - rowGaps)
                 val rowCount = max(1, layout.rowHeights.size)
                 var rowLeading = 0f
                 var rowBetween = rowGap.toFloat()
@@ -820,15 +879,15 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                         val marginRight = lp?.rightMargin ?: 0
                         val marginTop = lp?.topMargin ?: 0
                         val marginBottom = lp?.bottomMargin ?: 0
-                        val availableWidth = max(0, layout.cellWidth - marginLeft - marginRight)
+                        val availableWidth = max(0f, layout.cellWidth - marginLeft - marginRight)
                         val availableHeight = max(0, (rowHeight - marginTop - marginBottom).roundToInt())
-                        val childWidth = if (align == "stretch" && entry.style.width == null) availableWidth else min(availableWidth, entry.width)
+                        val childWidth = if (align == "stretch" && entry.style.width == null) availableWidth.roundToInt() else min(availableWidth.roundToInt(), entry.width)
                         val childHeight = if (align == "stretch" && entry.style.height == null) availableHeight else min(availableHeight, entry.height)
-                        val x = paddingLeft + column * (layout.cellWidth + columnGap) + marginLeft + when (align) {
-                            "center" -> (availableWidth - childWidth) / 2
+                        val x = (paddingLeft + column * (layout.cellWidth + columnGap) + marginLeft + when (align) {
+                            "center" -> (availableWidth - childWidth) / 2f
                             "flex-end" -> availableWidth - childWidth
-                            else -> 0
-                        }
+                            else -> 0f
+                        }).roundToInt()
                         val y = (rowTop + marginTop + when (align) {
                             "center" -> (availableHeight - childHeight) / 2
                             "flex-end" -> availableHeight - childHeight
@@ -857,42 +916,45 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         val crossGap = if (orientation == HORIZONTAL) rowGap else columnGap
         val availableMain = if (orientation == HORIZONTAL) contentWidth else contentHeight
         val availableCross = if (orientation == HORIZONTAL) contentHeight else contentWidth
-        val totalCross = lines.sumOf { it.cross } + max(0, lines.size - 1) * crossGap
-        val crossFree = max(0, availableCross - totalCross)
-        var crossLeading = 0
+        val totalCross = lines.sumOf { it.cross.toDouble() }.toFloat() + max(0, lines.size - 1) * crossGap
+        val crossFree = max(0f, availableCross.toFloat() - totalCross)
+        var crossLeading = 0f
         var crossBetween = crossGap
         val sharedCross = if (wrap && lines.size > 1) {
             CraftNative.flexLineDistribution(
-                availableCross.toFloat(), crossGap.toFloat(), alignContentCode(), lines.map { it.cross.toFloat() }.toFloatArray()
+                availableCross.toFloat(), crossGap, alignContentCode(), lines.map { it.cross }.toFloatArray()
             )
         } else null
-        sharedCross?.second?.forEachIndexed { index, size -> lines[index].cross = size.roundToInt() }
+        sharedCross?.second?.forEachIndexed { index, size -> lines[index].cross = size }
         if (wrap && lines.size > 1) {
             if (sharedCross == null) when (alignContent) {
-                "center" -> crossLeading = crossFree / 2
+                "center" -> crossLeading = crossFree / 2f
                 "flex-end" -> crossLeading = crossFree
-                "space-between" -> crossBetween = crossFree / (lines.size - 1) + crossGap
+                "space-between" -> crossBetween = crossFree / (lines.size - 1).toFloat() + crossGap
                 "space-around" -> {
-                    crossBetween = crossFree / lines.size + crossGap
-                    crossLeading = crossFree / (lines.size * 2)
+                    crossBetween = crossFree / lines.size.toFloat() + crossGap
+                    crossLeading = crossFree / (lines.size * 2).toFloat()
                 }
                 "space-evenly" -> {
-                    crossBetween = crossFree / (lines.size + 1) + crossGap
-                    crossLeading = crossFree / (lines.size + 1)
-                }
-                "stretch" -> {
-                    val extra = crossFree / lines.size
-                    lines.forEach { it.cross += extra }
+                    crossBetween = crossFree / (lines.size + 1).toFloat() + crossGap
+                    crossLeading = crossFree / (lines.size + 1).toFloat()
                 }
             }
         }
-        var crossOffset = (if (orientation == HORIZONTAL) paddingTop else paddingLeft) + crossLeading
+        val stretchExtra = if (sharedCross == null && wrap && lines.size > 1 && alignContent == "stretch")
+            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 lineOffset = sharedCross?.first?.get(lineIndex)?.roundToInt()?.let { (if (orientation == HORIZONTAL) paddingTop else paddingLeft) + it } ?: crossOffset
+            val lineCross = line.cross.toFloat() + stretchExtra
+                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(),
-                gap.toFloat(),
+                gap,
                 justifyCode(),
                 line.entries.map { entry -> if (orientation == HORIZONTAL) entry.width.toFloat() else entry.height.toFloat() }.toFloatArray(),
                 line.entries.map { it.style.flexGrow.toFloat() }.toFloatArray(),
@@ -917,8 +979,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                     val lp = line.entries[index].view.layoutParams as? MarginLayoutParams
                     val margins = if (orientation == HORIZONTAL) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
                     else (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
-                    sharedPrimary[index].roundToInt() + margins
-                } + max(0, line.entries.size - 1) * gap
+                    sharedPrimary[index].toDouble() + margins
+                } + max(0, line.entries.size - 1) * gap.toDouble()
             } else {
                 line.entries.indices.sumOf { index ->
                     val constrained = fallbackWidths[index]
@@ -926,48 +988,64 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
                     val margins = if (orientation == HORIZONTAL) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
                         else (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
                     constrained + margins
-                } + max(0, line.entries.size - 1) * gap
+                }.toDouble() + max(0, line.entries.size - 1) * gap.toDouble()
             }
-            val free = max(0, availableMain - distributedMain)
+            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
                 val marginEnd = if (orientation == HORIZONTAL) lp?.rightMargin ?: 0 else lp?.bottomMargin ?: 0
                 val crossSize = if ((entry.style.alignSelf ?: alignItems) == "stretch" && (if (orientation == HORIZONTAL) entry.style.height else entry.style.width) == null)
-                    max(0, line.cross - (if (orientation == HORIZONTAL) (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0) else (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)))
+                    max(0, (lineCross - (if (orientation == HORIZONTAL) (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0) else (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0))).roundToInt())
                 else if (orientation == HORIZONTAL) entry.height else entry.width
                 val align = entry.style.alignSelf ?: alignItems
-                val crossLeading = if (orientation == HORIZONTAL) lp?.topMargin ?: 0 else lp?.leftMargin ?: 0
-                val crossTrailing = if (orientation == HORIZONTAL) lp?.bottomMargin ?: 0 else lp?.rightMargin ?: 0
-                val alignment = when (align) {
-                    "center" -> 1
-                    "flex-end" -> 2
-                    else -> 0
-                }
-                val crossPosition = CraftNative.crossAxisPosition(
-                    line.cross.toFloat(), crossSize.toFloat(), crossLeading.toFloat(), crossTrailing.toFloat(), alignment
-                )?.roundToInt() ?: when (alignment) {
-                    1 -> crossLeading + (line.cross - crossLeading - crossTrailing - crossSize) / 2
-                    2 -> line.cross - crossTrailing - crossSize
-                    else -> crossLeading
+                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 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.
-                val sharedPosition = if (!reverse) sharedPositions?.get(index)?.roundToInt() else null
+                // The shared result stores widths in the first half and
+                // main-axis positions in the second half.
+                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
-                val y = if (orientation == HORIZONTAL) lineOffset + crossPosition 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
                 entry.view.layout(x, y, x + w, y + h)
                 if (sharedPosition == null) mainOffset += distributedPrimary + marginStart + marginEnd + gap + between
             }
-            if (sharedCross == null) crossOffset += line.cross + crossBetween
+            if (sharedCross == null) crossOffset += lineCross + crossBetween
         }
         for (entry in absolute) {
             if (entry.view is CraftNativeModalView && entry.view.visibility == View.VISIBLE) entry.view.bringToFront()
@@ -980,8 +1058,8 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         onLayoutChanged?.invoke()
     }
 
-    private fun distribution(free: Int, count: Int): Pair<Float, Float> {
-        val available = free.toFloat()
+    private fun distribution(free: Float, count: Int): Pair<Float, Float> {
+        val available = free
         return when (justifyContent) {
             "center" -> available / 2f to 0f
             "flex-end" -> available to 0f
@@ -991,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. */
@@ -1013,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 {
@@ -1421,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
 
@@ -1472,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) }
@@ -1522,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,
@@ -1572,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()
     }
@@ -1792,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(
@@ -2113,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); }; }
               };
@@ -2128,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; }
             };
@@ -2179,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())
         }
     }
 
@@ -2212,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)
@@ -2529,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)
@@ -2537,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)
@@ -2723,12 +2937,29 @@ class MainActivity : AppCompatActivity() {
                 val minimum = props.optDouble("minimumValue", 0.0)
                 val maximumCandidate = props.optDouble("maximumValue", 1.0)
                 val maximum = if (maximumCandidate > minimum) maximumCandidate else minimum + Double.MIN_VALUE
-                max = 1000
                 setOnSeekBarChangeListener(null)
                 val step = props.optDouble("step", 0.0).takeIf { it > 0 }
+                // A stepped slider needs one native position per authored
+                // step; a fixed 1,000-position SeekBar silently made large
+                // ranges unable to represent most valid values. Continuous
+                // sliders retain the bounded scale to avoid an enormous max.
+                val progressMax = step?.let {
+                    // 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)
-                val value = if (step != null) minimum + ((requested - minimum) / step).roundToInt() * step else requested
-                progress = (((value - minimum) / (maximum - minimum)) * max).roundToInt().coerceIn(0, max)
+                val value = (if (step != null) minimum + ((requested - minimum) / step).roundToInt() * step else requested)
+                    .coerceIn(minimum, maximum)
+                progress = if (step != null) {
+                    ((value - minimum) / step).roundToInt().coerceIn(0, max)
+                } else {
+                    (((value - minimum) / (maximum - minimum)) * max).roundToInt().coerceIn(0, max)
+                }
                 if (step != null) screen.sliderSteps[this] = step else screen.sliderSteps.remove(this)
                 progressTintList = props.optString("minimumTrackTintColor").takeIf { it.isNotBlank() }
                     ?.let { ColorStateList.valueOf(color(it, Color.WHITE)) }
@@ -2744,25 +2975,19 @@ class MainActivity : AppCompatActivity() {
                 setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
                     override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
                         val current = screen.handlers[seekBar] ?: return
-                        val raw = minimum + (maximum - minimum) * progress.toDouble() / max.toDouble()
                         val step = screen.sliderSteps[seekBar]
-                        val value = if (step != null) minimum + ((raw - minimum) / step).roundToInt() * step else raw
-                        if (step != null) {
-                            val snappedProgress = (((value - minimum) / (maximum - minimum)) * max)
-                                .roundToInt().coerceIn(0, max)
-                            if (seekBar.progress != snappedProgress) {
-                                seekBar.progress = snappedProgress
-                                return
-                            }
-                        }
+                        val value = (if (step != null) minimum + progress * step else
+                            minimum + (maximum - minimum) * progress.toDouble() / max.toDouble())
+                            .coerceIn(minimum, maximum)
                         send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("value", value)))
                     }
                     override fun onStartTrackingTouch(seekBar: SeekBar) {}
                     override fun onStopTrackingTouch(seekBar: SeekBar) {
                         val current = screen.sliderCompleteHandlers[seekBar] ?: return
-                        val raw = minimum + (maximum - minimum) * seekBar.progress.toDouble() / max.toDouble()
                         val step = screen.sliderSteps[seekBar]
-                        val value = if (step != null) minimum + ((raw - minimum) / step).roundToInt() * step else raw
+                        val value = (if (step != null) minimum + seekBar.progress * step else
+                            minimum + (maximum - minimum) * seekBar.progress.toDouble() / max.toDouble())
+                            .coerceIn(minimum, maximum)
                         send(screen, "EVENT", JSONObject().put("handlerName", current).put("nativeEvent", JSONObject().put("value", value)))
                     }
                 })
@@ -3253,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") {
@@ -3284,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, _, _, _, _ ->
@@ -3392,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?) {
@@ -3442,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
         }
@@ -3582,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
         }
     }
@@ -3600,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
     }
 
@@ -3693,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))
     }
@@ -3704,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()
@@ -3947,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) }