craft-native 0.0.140 → 0.0.142

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

@@ -6,9 +6,16 @@ import android.content.Context
 import android.content.res.ColorStateList
 import android.content.res.Configuration
 import android.content.Intent
+import android.media.AudioAttributes
+import android.media.AudioFormat
+import android.media.AudioTrack
 import android.graphics.BitmapFactory
+import android.graphics.Canvas
 import android.graphics.Color
+import android.graphics.DashPathEffect
+import android.graphics.Matrix
 import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.Typeface
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.GradientDrawable
@@ -28,11 +35,13 @@ import android.util.Base64
 import android.util.TypedValue
 import android.view.Gravity
 import android.view.KeyEvent
+import android.view.MotionEvent
 import android.view.inputmethod.EditorInfo
 import android.text.InputType
 import android.text.Layout
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewTreeObserver
 import android.widget.AdapterView
 import android.widget.ArrayAdapter
 import android.widget.Button
@@ -46,6 +55,8 @@ import android.widget.SeekBar
 import android.widget.Spinner
 import android.widget.Switch
 import android.widget.TextView
+import android.widget.MediaController
+import android.widget.VideoView
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
@@ -61,6 +72,7 @@ import androidx.javascriptengine.Message
 import androidx.javascriptengine.MessagePort
 import androidx.javascriptengine.MessagePortClient
 import com.google.common.util.concurrent.ListenableFuture
+import com.craft.runtime.CraftNative
 import org.json.JSONArray
 import org.json.JSONObject
 import java.net.URL
@@ -69,7 +81,10 @@ import java.util.concurrent.Future
 import java.util.UUID
 import kotlin.math.max
 import kotlin.math.min
+import kotlin.math.PI
 import kotlin.math.roundToInt
+import kotlin.math.roundToLong
+import kotlin.math.sin
 
 private const val CRAFT_NATIVE_CAPABILITY_TIMEOUT_MS = 30_000L
 
@@ -154,6 +169,214 @@ private fun craftNativeGridColumnCount(value: Any?): Int {
     return max(1, trimmed.split(Regex("\\s+")).count { it.isNotBlank() })
 }
 
+/** 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()
+        set(value) {
+            field = value
+            invalidate()
+            requestLayout()
+        }
+
+    private data class SvgPaint(
+        val fill: String? = "#000000",
+        val stroke: String? = null,
+        val strokeWidth: Float = 1f,
+        val color: String = "#000000",
+        val opacity: Float = 1f,
+        val typeface: Typeface = Typeface.DEFAULT,
+    ) {
+        fun merge(node: JSONObject): SvgPaint {
+            val props = node.optJSONObject("props") ?: JSONObject()
+            val style = node.optJSONObject("style") ?: JSONObject()
+            fun value(name: String): String? = when {
+                style.has(name) && !style.isNull(name) -> style.optString(name)
+                props.has(name) && !props.isNull(name) -> props.optString(name)
+                else -> null
+            }
+            val weight = value("fontWeight")
+            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,
+                typeface = if (weight in setOf("bold", "700")) Typeface.DEFAULT_BOLD else typeface,
+            )
+        }
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val width = MeasureSpec.getSize(widthMeasureSpec)
+        val box = viewBox()
+        val naturalHeight = if (box != null && box.second > 0) (width * box.second / box.first).roundToInt() else 0
+        val height = when (MeasureSpec.getMode(heightMeasureSpec)) {
+            MeasureSpec.EXACTLY -> MeasureSpec.getSize(heightMeasureSpec)
+            MeasureSpec.AT_MOST -> min(naturalHeight, MeasureSpec.getSize(heightMeasureSpec))
+            else -> naturalHeight
+        }
+        setMeasuredDimension(resolveSize(width, widthMeasureSpec), resolveSize(height, heightMeasureSpec))
+    }
+
+    /** viewBox units to the view's pixels, set by each draw. */
+    private val viewTransform = Matrix()
+    private val inverseTransform = Matrix()
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        val box = viewBox() ?: return
+        if (box.first <= 0 || box.second <= 0) return
+        // Centred at one scale (SVG's default, `xMidYMid meet`), or each axis
+        // stretched to fill (`preserveAspectRatio="none"`).
+        val stretch = drawing.optJSONObject("props")?.optString("preserveAspectRatio")?.trim() == "none"
+        var sx = width.toFloat() / box.first
+        var sy = height.toFloat() / box.second
+        var dx = 0f
+        var dy = 0f
+        if (!stretch) {
+            val scale = min(sx, sy)
+            sx = scale
+            sy = scale
+            dx = (width - box.first * scale) / 2f
+            dy = (height - box.second * scale) / 2f
+        }
+        if (!sx.isFinite() || !sy.isFinite() || sx <= 0f || sy <= 0f) return
+        viewTransform.reset()
+        viewTransform.postTranslate(-box.third, -box.fourth)
+        viewTransform.postScale(sx, sy)
+        viewTransform.postTranslate(dx, dy)
+        viewTransform.invert(inverseTransform)
+        canvas.save()
+        canvas.concat(viewTransform)
+        drawNodes(canvas, drawing.optJSONArray("children") ?: JSONArray(), SvgPaint().merge(drawing))
+        canvas.restore()
+    }
+
+    private fun viewBox(): Quadruple<Float, Float, Float, Float>? {
+        val values = drawing.optJSONObject("props")?.optJSONArray("viewBox") ?: return null
+        if (values.length() != 4) return null
+        val x = values.optDouble(0, Double.NaN).toFloat()
+        val y = values.optDouble(1, Double.NaN).toFloat()
+        val width = values.optDouble(2, Double.NaN).toFloat()
+        val height = values.optDouble(3, Double.NaN).toFloat()
+        if (!x.isFinite() || !y.isFinite() || !width.isFinite() || !height.isFinite()) return null
+        return Quadruple(width, height, x, y)
+    }
+
+    private fun drawNodes(canvas: Canvas, children: JSONArray, inherited: SvgPaint) {
+        for (index in 0 until children.length()) {
+            val node = children.optJSONObject(index) ?: continue
+            val style = node.optJSONObject("style") ?: JSONObject()
+            if (style.optString("display") == "none") continue
+            val paint = inherited.merge(node)
+            when (node.optString("type")) {
+                "G" -> drawNodes(canvas, node.optJSONArray("children") ?: JSONArray(), paint)
+                "SvgText" -> drawText(canvas, node, paint)
+                else -> drawPath(canvas, node, paint)
+            }
+        }
+    }
+
+    private fun drawPath(canvas: Canvas, node: JSONObject, style: SvgPaint) {
+        val props = node.optJSONObject("props") ?: JSONObject()
+        val geometry = props.optJSONArray("geometry") ?: return
+        val path = Path()
+        var index = 0
+        while (index < geometry.length()) {
+            val command = geometry.optDouble(index, Double.NaN).toInt()
+            fun number(offset: Int): Float = geometry.optDouble(index + offset, Double.NaN).toFloat()
+            when (command) {
+                0 -> if (index + 2 < geometry.length()) { path.moveTo(number(1), number(2)); index += 3 } else break
+                1 -> if (index + 2 < geometry.length()) { path.lineTo(number(1), number(2)); index += 3 } else break
+                2 -> if (index + 6 < geometry.length()) { path.cubicTo(number(1), number(2), number(3), number(4), number(5), number(6)); index += 7 } else break
+                3 -> if (index + 4 < geometry.length()) { path.quadTo(number(1), number(2), number(3), number(4)); index += 5 } else break
+                4 -> { path.close(); index += 1 }
+                else -> break
+            }
+        }
+        val fill = android.graphics.Paint(Paint.ANTI_ALIAS_FLAG).apply {
+            color = resolveColor(style.fill, style.color, Color.TRANSPARENT)
+            alpha = (style.opacity * 255f).roundToInt().coerceIn(0, 255)
+            this.style = Paint.Style.FILL
+        }
+        if (style.fill != "none" && style.fill != "transparent") canvas.drawPath(path, fill)
+        if (!style.stroke.isNullOrBlank() && style.stroke != "none" && style.stroke != "transparent" && style.strokeWidth > 0) {
+            val stroke = android.graphics.Paint(Paint.ANTI_ALIAS_FLAG).apply {
+                color = resolveColor(style.stroke, style.color, Color.TRANSPARENT)
+                alpha = (style.opacity * 255f).roundToInt().coerceIn(0, 255)
+                this.style = Paint.Style.STROKE
+                strokeWidth = style.strokeWidth
+                strokeCap = when (props.optString("strokeLinecap")) {
+                    "round" -> Paint.Cap.ROUND
+                    "square" -> Paint.Cap.SQUARE
+                    else -> Paint.Cap.BUTT
+                }
+                strokeJoin = when (props.optString("strokeLinejoin")) {
+                    "round" -> Paint.Join.ROUND
+                    "bevel" -> Paint.Join.BEVEL
+                    else -> Paint.Join.MITER
+                }
+                props.optJSONArray("strokeDasharray")?.let { values ->
+                    val dashes: List<Float> = (0 until values.length()).mapNotNull {
+                        values.optDouble(it, Double.NaN).takeUnless { value -> value.isNaN() }?.toFloat()
+                    }
+                    if (dashes.isNotEmpty()) {
+                        val dashPattern = dashes.toFloatArray()
+                        val pattern: FloatArray = if (dashPattern.size % 2 == 1) {
+                            FloatArray(dashPattern.size * 2) { index -> dashPattern[index % dashPattern.size] }
+                        } else {
+                            dashPattern
+                        }
+                        pathEffect = DashPathEffect(pattern, 0f)
+                    }
+                }
+            }
+            // `vector-effect="non-scaling-stroke"`: the stroke is in the view's
+            // pixels, so a stretched chart's line keeps its width.
+            if (props.optString("vectorEffect") == "non-scaling-stroke") {
+                val line = Path(path).apply { transform(viewTransform) }
+                canvas.save()
+                canvas.concat(inverseTransform)
+                canvas.drawPath(line, stroke)
+                canvas.restore()
+            } else {
+                canvas.drawPath(path, stroke)
+            }
+        }
+    }
+
+    private fun drawText(canvas: Canvas, node: JSONObject, style: SvgPaint) {
+        val props = node.optJSONObject("props") ?: JSONObject()
+        val nodeStyle = node.optJSONObject("style") ?: JSONObject()
+        val text = buildString {
+            val children = node.optJSONArray("children") ?: JSONArray()
+            for (index in 0 until children.length()) if (children.opt(index) is String) append(children.optString(index))
+        }
+        if (text.isEmpty()) return
+        val size = (if (props.has("fontSize")) props.optDouble("fontSize", 12.0) else nodeStyle.optDouble("fontSize", 12.0))
+            .toFloat()
+        val paint = android.graphics.Paint(Paint.ANTI_ALIAS_FLAG).apply {
+            color = resolveColor(style.fill, style.color, Color.BLACK)
+            alpha = (style.opacity * 255f).roundToInt().coerceIn(0, 255)
+            textSize = size
+            typeface = style.typeface
+        }
+        var x = props.optDouble("x", 0.0).toFloat()
+        val y = props.optDouble("y", 0.0).toFloat()
+        when (props.optString("textAnchor")) {
+            "middle" -> x -= paint.measureText(text) / 2f
+            "end" -> x -= paint.measureText(text)
+        }
+        canvas.drawText(text, x, y, paint)
+    }
+
+    private fun resolveColor(value: String?, current: String, fallback: Int): Int = runCatching {
+        Color.parseColor(if (value == "currentColor") current else value ?: current)
+    }.getOrDefault(fallback)
+
+    private data class Quadruple<T1, T2, T3, T4>(val first: T1, val second: T2, val third: T3, val fourth: T4)
+}
+
 /** A deterministic flex-shaped container shared by normal views and scroll content. */
 private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     var onLayoutChanged: (() -> Unit)? = null
@@ -167,9 +390,11 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     private var grid = false
     private var gridColumns = 1
     private var gridAutoRows: Int? = null
+    private var reverse = false
 
     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)
         alignItems = style.optString("alignItems", "stretch")
         alignContent = style.optString("alignContent", "flex-start")
@@ -214,7 +439,7 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         val gap = if (orientation == HORIZONTAL) columnGap else rowGap
         val lines = mutableListOf<Line>()
         val absolute = mutableListOf<Entry>()
-        var line = Line()
+        val pending = mutableListOf<Entry>()
         for (index in 0 until childCount) {
             val child = getChildAt(index)
             if (child.visibility == GONE) continue
@@ -236,18 +461,43 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             val childHeight = measureChildHeight(child, style, height - paddingTop - paddingBottom, verticalMargins)
             val entry = Entry(child, style, childWidth, childHeight)
             if (style.position == "absolute") { absolute += entry; continue }
-            val childMain = (if (orientation == HORIZONTAL) childWidth + horizontalMargins else childHeight + verticalMargins)
-            val childCross = (if (orientation == HORIZONTAL) childHeight + verticalMargins else childWidth + horizontalMargins)
-            val next = if (line.entries.isEmpty()) childMain else line.main + gap + childMain
-            if (wrap && line.entries.isNotEmpty() && next > availableMain) {
-                lines += line
-                line = Line()
-            }
-            line.entries += entry
-            line.main = if (line.entries.size == 1) childMain else line.main + gap + childMain
-            line.cross = max(line.cross, childCross)
-        }
-        if (line.entries.isNotEmpty()) lines += line
+            pending += entry
+        }
+        if (pending.isNotEmpty()) {
+            val basis = pending.map { entry ->
+                if (orientation == HORIZONTAL) entry.width.toFloat() else entry.height.toFloat()
+            }.toFloatArray()
+            val margins = pending.flatMap { entry ->
+                val lp = entry.view.layoutParams as? MarginLayoutParams
+                if (orientation == HORIZONTAL) listOf((lp?.leftMargin ?: 0).toFloat(), (lp?.rightMargin ?: 0).toFloat())
+                else listOf((lp?.topMargin ?: 0).toFloat(), (lp?.bottomMargin ?: 0).toFloat())
+            }.toFloatArray()
+            val sharedLineIds = CraftNative.flexLines(availableMain.toFloat(), gap.toFloat(), wrap, basis, margins)
+            val lineIds = sharedLineIds?.takeIf { ids ->
+                ids.size >= pending.size && ids.firstOrNull() == 0 &&
+                    ids.indices.drop(1).all { index -> ids[index] >= ids[index - 1] }
+            }
+            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 lp = entry.view.layoutParams as? MarginLayoutParams
+                val crossMargins = if (orientation == HORIZONTAL) (lp?.topMargin ?: 0) + (lp?.bottomMargin ?: 0)
+                else (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
+                val childCross = if (orientation == HORIZONTAL) entry.height + crossMargins else entry.width + crossMargins
+                if (index > 0 && lineIds != null && lineIds[index] != lineIds[index - 1]) {
+                    lines += line
+                    line = Line()
+                } else if (index > 0 && lineIds == null && wrap && line.entries.isNotEmpty() && line.main + gap + childMain > availableMain) {
+                    lines += line
+                    line = Line()
+                }
+                line.entries += entry
+                line.main = if (line.entries.size == 1) childMain else line.main + gap + childMain
+                line.cross = max(line.cross, childCross)
+            }
+            if (line.entries.isNotEmpty()) lines += line
+        }
         return lines to absolute
     }
 
@@ -361,6 +611,24 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         else -> 0.0
     }
 
+    private fun justifyCode(): Int = when (justifyContent) {
+        "center" -> 1
+        "flex-end" -> 2
+        "space-between" -> 3
+        "space-around" -> 4
+        "space-evenly" -> 5
+        else -> 0
+    }
+
+    private fun alignContentCode(): Int = when (alignContent) {
+        "center" -> 1
+        "flex-end" -> 2
+        "space-between" -> 3
+        "space-around" -> 4
+        "stretch" -> 5
+        else -> 0
+    }
+
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         val widthMode = View.MeasureSpec.getMode(widthMeasureSpec)
         val width = View.MeasureSpec.getSize(widthMeasureSpec).takeUnless { widthMode == View.MeasureSpec.UNSPECIFIED } ?: 1_000_000
@@ -396,36 +664,66 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
         if (grid) {
             val layout = gridLayout(width, height)
-            var rowTop = paddingTop
-            for ((rowIndex, row) in layout.rows.withIndex()) {
-                val rowHeight = layout.rowHeights[rowIndex]
-                for ((column, entry) in row.withIndex()) {
-                    val align = entry.style.alignSelf ?: alignItems
-                    val lp = entry.view.layoutParams as? MarginLayoutParams
-                    val marginLeft = lp?.leftMargin ?: 0
-                    val marginRight = lp?.rightMargin ?: 0
-                    val marginTop = lp?.topMargin ?: 0
-                    val marginBottom = lp?.bottomMargin ?: 0
-                    val availableWidth = max(0, layout.cellWidth - marginLeft - marginRight)
-                    val availableHeight = max(0, rowHeight - marginTop - marginBottom)
-                    val childWidth = if (align == "stretch" && entry.style.width == null) availableWidth else min(availableWidth, 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
-                        "flex-end" -> availableWidth - childWidth
-                        else -> 0
-                    }
-                    val y = rowTop + marginTop + when (align) {
-                        "center" -> (availableHeight - childHeight) / 2
-                        "flex-end" -> availableHeight - childHeight
-                        else -> 0
-                    }
+            val contentWidth = width - paddingLeft - paddingRight
+            val contentHeight = height - paddingTop - paddingBottom
+            val flow = layout.rows.flatten()
+            val sharedFrames = CraftNative.grid(
+                contentWidth.toFloat(), contentHeight.toFloat(), gridColumns, columnGap.toFloat(), rowGap.toFloat(),
+                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.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.minHeight?.resolve(null)?.toFloat() ?: Float.NaN }.toFloatArray(),
+                flow.map { it.style.maxHeight?.resolve(null)?.toFloat() ?: Float.NaN }.toFloatArray(),
+                flow.flatMap {
+                    val lp = it.view.layoutParams as? MarginLayoutParams
+                    listOf((lp?.leftMargin ?: 0).toFloat(), (lp?.rightMargin ?: 0).toFloat(), (lp?.topMargin ?: 0).toFloat(), (lp?.bottomMargin ?: 0).toFloat())
+                }.toFloatArray(),
+                flow.flatMap {
+                    val align = it.style.alignSelf ?: alignItems
+                    listOf(if (align == "stretch") 1f else 0f, if (align == "center") 1f else if (align == "flex-end") 2f else 0f)
+                }.toFloatArray(),
+            )
+            if (sharedFrames != null) {
+                for ((index, entry) in flow.withIndex()) {
+                    val offset = index * 4
+                    val x = paddingLeft + sharedFrames[offset].roundToInt()
+                    val y = paddingTop + sharedFrames[offset + 1].roundToInt()
+                    val childWidth = sharedFrames[offset + 2].roundToInt()
+                    val childHeight = sharedFrames[offset + 3].roundToInt()
                     entry.view.layout(x, y, x + childWidth, y + childHeight)
                 }
-                rowTop += rowHeight + rowGap
+            } else {
+                var rowTop = paddingTop
+                for ((rowIndex, row) in layout.rows.withIndex()) {
+                    val rowHeight = layout.rowHeights[rowIndex]
+                    for ((column, entry) in row.withIndex()) {
+                        val align = entry.style.alignSelf ?: alignItems
+                        val lp = entry.view.layoutParams as? MarginLayoutParams
+                        val marginLeft = lp?.leftMargin ?: 0
+                        val marginRight = lp?.rightMargin ?: 0
+                        val marginTop = lp?.topMargin ?: 0
+                        val marginBottom = lp?.bottomMargin ?: 0
+                        val availableWidth = max(0, layout.cellWidth - marginLeft - marginRight)
+                        val availableHeight = max(0, rowHeight - marginTop - marginBottom)
+                        val childWidth = if (align == "stretch" && entry.style.width == null) availableWidth else min(availableWidth, 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
+                            "flex-end" -> availableWidth - childWidth
+                            else -> 0
+                        }
+                        val y = rowTop + marginTop + when (align) {
+                            "center" -> (availableHeight - childHeight) / 2
+                            "flex-end" -> availableHeight - childHeight
+                            else -> 0
+                        }
+                        entry.view.layout(x, y, x + childWidth, y + childHeight)
+                    }
+                    rowTop += rowHeight + rowGap
+                }
             }
-            val contentWidth = width - paddingLeft - paddingRight
-            val contentHeight = height - paddingTop - paddingBottom
             for (entry in layout.absolute) {
                 if (entry.view is CraftNativeModalView && entry.view.visibility == View.VISIBLE) entry.view.bringToFront()
                 val childWidth = if (entry.style.left != null && entry.style.right != null) contentWidth - entry.style.left!! - entry.style.right!! else entry.width
@@ -448,8 +746,14 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
         val crossFree = max(0, availableCross - totalCross)
         var crossLeading = 0
         var crossBetween = crossGap
+        val sharedCross = if (wrap && lines.size > 1) {
+            CraftNative.flexLineDistribution(
+                availableCross.toFloat(), crossGap.toFloat(), alignContentCode(), lines.map { it.cross.toFloat() }.toFloatArray()
+            )
+        } else null
+        sharedCross?.second?.forEachIndexed { index, size -> lines[index].cross = size.roundToInt() }
         if (wrap && lines.size > 1) {
-            when (alignContent) {
+            if (sharedCross == null) when (alignContent) {
                 "center" -> crossLeading = crossFree / 2
                 "flex-end" -> crossLeading = crossFree
                 "space-between" -> crossBetween = crossFree / (lines.size - 1) + crossGap
@@ -464,23 +768,55 @@ private class CraftNativeFlexLayout(context: Context) : LinearLayout(context) {
             }
         }
         var crossOffset = (if (orientation == HORIZONTAL) paddingTop else paddingLeft) + crossLeading
-        for (line in lines) {
+        for ((lineIndex, line) in lines.withIndex()) {
+            val lineOffset = sharedCross?.first?.get(lineIndex)?.roundToInt()?.let { (if (orientation == HORIZONTAL) paddingTop else paddingLeft) + it } ?: crossOffset
             val rawFree = availableMain - line.main
-            val factors = line.entries.map { if (rawFree >= 0) it.style.flexGrow else it.style.flexShrink ?: defaultFlexShrink(it.view) }
-            val totalFactor = factors.sum()
-            val distributedMain = line.entries.indices.sumOf { index ->
-                val base = if (orientation == HORIZONTAL) line.entries[index].width else line.entries[index].height
-                val primary = if (totalFactor > 0) max(0, (base + rawFree * factors[index] / totalFactor).toInt()) else base
-                val constrained = if (orientation == HORIZONTAL) {
-                    clamp(primary, line.entries[index].style.minWidth?.resolve(contentWidth), line.entries[index].style.maxWidth?.resolve(contentWidth))
-                } else {
-                    clamp(primary, line.entries[index].style.minHeight?.resolve(contentHeight), line.entries[index].style.maxHeight?.resolve(contentHeight))
-                }
-                val lp = line.entries[index].view.layoutParams as? MarginLayoutParams
-                val margins = if (orientation == HORIZONTAL) (lp?.leftMargin ?: 0) + (lp?.rightMargin ?: 0)
+            val sharedPrimary = CraftNative.flexRow(
+                availableMain.toFloat(),
+                gap.toFloat(),
+                justifyCode(),
+                line.entries.map { entry -> if (orientation == HORIZONTAL) entry.width.toFloat() else entry.height.toFloat() }.toFloatArray(),
+                line.entries.map { it.style.flexGrow.toFloat() }.toFloatArray(),
+                line.entries.map { (it.style.flexShrink ?: defaultFlexShrink(it.view)).toFloat() }.toFloatArray(),
+                line.entries.map {
+                    (if (orientation == HORIZONTAL) it.style.minWidth?.resolve(contentWidth) else it.style.minHeight?.resolve(contentHeight))?.toFloat()
+                        ?: Float.NaN
+                }.toFloatArray(),
+                line.entries.map {
+                    (if (orientation == HORIZONTAL) it.style.maxWidth?.resolve(contentWidth) else it.style.maxHeight?.resolve(contentHeight))?.toFloat()
+                        ?: Float.NaN
+                }.toFloatArray(),
+                line.entries.flatMap { entry ->
+                    val lp = entry.view.layoutParams as? MarginLayoutParams
+                    if (orientation == HORIZONTAL) listOf((lp?.leftMargin ?: 0).toFloat(), (lp?.rightMargin ?: 0).toFloat())
+                    else listOf((lp?.topMargin ?: 0).toFloat(), (lp?.bottomMargin ?: 0).toFloat())
+                }.toFloatArray(),
+            )
+            val sharedPositions = sharedPrimary?.takeIf { it.size == line.entries.size * 2 }
+            val distributedMain = if (sharedPrimary != null) {
+                line.entries.indices.sumOf { index ->
+                    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)
-                constrained + margins
-            } + max(0, line.entries.size - 1) * gap
+                    sharedPrimary[index].roundToInt() + margins
+                } + max(0, line.entries.size - 1) * gap
+            } else {
+                val factors = line.entries.map { if (rawFree >= 0) it.style.flexGrow else it.style.flexShrink ?: defaultFlexShrink(it.view) }
+                val totalFactor = factors.sum()
+                line.entries.indices.sumOf { index ->
+                    val base = if (orientation == HORIZONTAL) line.entries[index].width else line.entries[index].height
+                    val primary = if (totalFactor > 0) max(0, (base + rawFree * factors[index] / totalFactor).toInt()) else base
+                    val constrained = if (orientation == HORIZONTAL) {
+                        clamp(primary, line.entries[index].style.minWidth?.resolve(contentWidth), line.entries[index].style.maxWidth?.resolve(contentWidth))
+                    } else {
+                        clamp(primary, line.entries[index].style.minHeight?.resolve(contentHeight), line.entries[index].style.maxHeight?.resolve(contentHeight))
+                    }
+                    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)
+                    constrained + margins
+                } + max(0, line.entries.size - 1) * gap
+            }
             val free = max(0, availableMain - distributedMain)
             val (leading, between) = distribution(free, line.entries.size)
             var mainOffset = if (orientation == HORIZONTAL) paddingLeft else paddingTop
@@ -495,27 +831,43 @@ 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
                 val crossTrailing = if (orientation == HORIZONTAL) lp?.bottomMargin ?: 0 else lp?.rightMargin ?: 0
-                val crossAvailable = max(0, line.cross - crossLeading - crossTrailing)
-                val crossPosition = when (align) {
-                    "center" -> crossLeading + (crossAvailable - crossSize) / 2
-                    "flex-end" -> line.cross - crossTrailing - crossSize
+                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 x = if (orientation == HORIZONTAL) mainOffset + marginStart else crossOffset + crossPosition
-                val y = if (orientation == HORIZONTAL) crossOffset + crossPosition else mainOffset + marginStart
-                val primary = if (orientation == HORIZONTAL) entry.width else entry.height
-                val distributed = if (totalFactor > 0) max(0, (primary + rawFree * factors[index] / totalFactor).toInt()) else primary
-                val distributedPrimary = if (orientation == HORIZONTAL) {
-                    clamp(distributed, entry.style.minWidth?.resolve(contentWidth), entry.style.maxWidth?.resolve(contentWidth))
-                } else {
-                    clamp(distributed, entry.style.minHeight?.resolve(contentHeight), entry.style.maxHeight?.resolve(contentHeight))
+                // 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
+                val positionedMain = sharedPosition?.let { (if (orientation == HORIZONTAL) paddingLeft else paddingTop) + it }
+                    ?: mainOffset + marginStart
+                val x = if (orientation == HORIZONTAL) positionedMain else lineOffset + crossPosition
+                val y = if (orientation == HORIZONTAL) lineOffset + crossPosition else positionedMain
+                val distributedPrimary = sharedPrimary?.get(index)?.roundToInt() ?: run {
+                    val primary = if (orientation == HORIZONTAL) entry.width else entry.height
+                    val factor = if (rawFree >= 0) entry.style.flexGrow else entry.style.flexShrink ?: defaultFlexShrink(entry.view)
+                    val totalFactor = line.entries.sumOf { if (rawFree >= 0) it.style.flexGrow else it.style.flexShrink ?: defaultFlexShrink(it.view) }
+                    val distributed = if (totalFactor > 0) max(0, (primary + rawFree * factor / totalFactor).toInt()) else primary
+                    if (orientation == HORIZONTAL) {
+                        clamp(distributed, entry.style.minWidth?.resolve(contentWidth), entry.style.maxWidth?.resolve(contentWidth))
+                    } else {
+                        clamp(distributed, entry.style.minHeight?.resolve(contentHeight), entry.style.maxHeight?.resolve(contentHeight))
+                    }
                 }
                 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)
-                mainOffset += distributedPrimary + marginStart + marginEnd + gap + between
+                if (sharedPosition == null) mainOffset += distributedPrimary + marginStart + marginEnd + gap + between
             }
-            crossOffset += line.cross + crossBetween
+            if (sharedCross == null) crossOffset += line.cross + crossBetween
         }
         for (entry in absolute) {
             if (entry.view is CraftNativeModalView && entry.view.visibility == View.VISIBLE) entry.view.bringToFront()
@@ -736,6 +1088,7 @@ private class CraftNativeModalView(context: Context) : FrameLayout(context) {
     val content = CraftNativeFlexLayout(context)
     private val blocker = View(context)
     private var renderedVisible = false
+    private var dismissSuppressedByRequest = false
     private var animationGeneration = 0
     var onRequestClose: (() -> Unit)? = null
 
@@ -748,13 +1101,38 @@ private class CraftNativeModalView(context: Context) : FrameLayout(context) {
     init {
         isClickable = true
         blocker.isClickable = true
-        blocker.setOnTouchListener { _, _ -> true }
+        blocker.setOnTouchListener { _, event ->
+            if (event.action == MotionEvent.ACTION_UP) requestClose()
+            true
+        }
         blocker.setBackgroundColor(Color.argb(82, 0, 0, 0))
         addView(blocker, LayoutParams(-1, -1))
         addView(content, LayoutParams(-1, -1))
     }
 
+    fun requestClose() {
+        val handler = onRequestClose ?: return
+        dismissSuppressedByRequest = true
+        isClickable = false
+        blocker.isEnabled = false
+        handler()
+    }
+
+    fun consumeDismissSuppression(): Boolean {
+        val suppressed = dismissSuppressedByRequest
+        dismissSuppressedByRequest = false
+        return suppressed
+    }
+
+    fun clearDismissSuppression() {
+        dismissSuppressedByRequest = false
+    }
+
     fun setVisible(visible: Boolean, opacity: Float, animationType: String?) {
+        if (visible) {
+            isClickable = true
+            blocker.isEnabled = true
+        }
         if (renderedVisible == visible && visibility == if (visible) View.VISIBLE else View.GONE) {
             if (visible && alpha != opacity) alpha = opacity
             return
@@ -806,6 +1184,9 @@ private class CraftNativeModalView(context: Context) : FrameLayout(context) {
         visibility = View.GONE
         translationY = 0f
         alpha = 0f
+        isClickable = true
+        blocker.isEnabled = true
+        dismissSuppressedByRequest = false
         onRequestClose = null
     }
 }
@@ -817,6 +1198,232 @@ private data class LayoutBounds(
     val height: Double,
 )
 
+/**
+ * Android's default spinner style is indeterminate-only, so assigning
+ * `isIndeterminate = false` to it is silently ignored. Use a determinate
+ * ProgressBar style and carry over the platform spinner drawable instead;
+ * that preserves the native look while allowing `animating={false}` to be a
+ * genuinely stopped control.
+ */
+private class CraftNativeActivityIndicator(context: Context) :
+    android.widget.ProgressBar(context, null, android.R.attr.progressBarStyleHorizontal) {
+    init {
+        val spinner = android.widget.ProgressBar(context).indeterminateDrawable
+        indeterminateDrawable = spinner
+        progressDrawable = spinner?.constantState?.newDrawable()?.mutate() ?: spinner
+    }
+}
+
+private class CraftNativeVideoView(context: Context) : VideoView(context) {
+    private var sourceUri = ""
+    private var shouldLoop = false
+    private var shouldPlay = false
+    private var muted = false
+
+    fun configure(source: Any?, autoplay: Boolean, paused: Boolean, loop: Boolean, muted: Boolean, controls: Boolean) {
+        val uri = when (source) {
+            is String -> source
+            is JSONObject -> source.optString("uri")
+            else -> ""
+        }
+        shouldLoop = loop
+        shouldPlay = autoplay && !paused
+        this.muted = muted
+        setMediaController(if (controls) MediaController(context).also { it.setAnchorView(this) } else null)
+        if (uri != sourceUri) {
+            sourceUri = uri
+            stopPlayback()
+            if (uri.isBlank()) return
+            setVideoURI(Uri.parse(uri))
+            setOnPreparedListener { mediaPlayer ->
+                mediaPlayer.isLooping = shouldLoop
+                val volume = if (this.muted) 0f else 1f
+                mediaPlayer.setVolume(volume, volume)
+                if (shouldPlay) start()
+            }
+            setOnCompletionListener { if (shouldLoop && !isPlaying) start() }
+        }
+        if (uri.isBlank()) return
+        runCatching {
+            if (shouldPlay && !isPlaying) start()
+            else if (!shouldPlay && isPlaying) pause()
+        }
+    }
+
+    fun stop() {
+        stopPlayback()
+        sourceUri = ""
+    }
+}
+
+/** The oscillator/gain subset of Web Audio used by native STX screens. */
+private class CraftNativeAudio {
+    private data class ParameterEvent(val time: Double, val value: Double, val ramp: Boolean)
+
+    private class Parameter(initial: Double) {
+        private var current = initial
+        private val events = mutableListOf<ParameterEvent>()
+
+        @Synchronized fun set(value: Double) {
+            current = value
+            events.clear()
+        }
+
+        @Synchronized fun schedule(value: Double, time: Double, ramp: Boolean) {
+            events += ParameterEvent(time.coerceAtLeast(0.0), value, ramp)
+            events.sortBy { it.time }
+        }
+
+        @Synchronized fun valueAt(time: Double): Double {
+            var previousTime = 0.0
+            var previousValue = current
+            for (event in events) {
+                if (time < event.time) {
+                    if (!event.ramp || event.time <= previousTime) return previousValue
+                    val fraction = (time - previousTime) / (event.time - previousTime)
+                    return previousValue + (event.value - previousValue) * fraction
+                }
+                previousTime = event.time
+                previousValue = event.value
+            }
+            return previousValue
+        }
+    }
+
+    private class OscillatorState {
+        val frequency = Parameter(440.0)
+        @Volatile var gain = Parameter(1.0)
+        @Volatile var phase = 0.0
+        @Volatile var active = false
+        var contextStart = 0.0
+    }
+
+    private val handler = Handler(Looper.getMainLooper())
+    private val oscillators = mutableMapOf<String, OscillatorState>()
+    private val gains = mutableMapOf<String, Parameter>()
+    private val contextStarts = mutableMapOf<String, Double>()
+    private var track: AudioTrack? = null
+    @Volatile private var running = false
+    private var renderThread: Thread? = null
+
+    @Synchronized fun handle(payload: JSONObject) {
+        when (payload.optString("action")) {
+            "createContext" -> {
+                payload.optString("contextId").takeIf { it.isNotBlank() }?.let {
+                    contextStarts[it] = System.nanoTime() / 1_000_000_000.0
+                }
+            }
+            "createOscillator" -> {
+                val id = payload.optString("nodeId")
+                if (id.isNotBlank()) oscillators.putIfAbsent(id, OscillatorState()).also {
+                    oscillators[id]?.contextStart = contextStarts[payload.optString("contextId")]
+                        ?: (System.nanoTime() / 1_000_000_000.0)
+                    oscillators[id]?.frequency?.set(payload.optDouble("frequency", 440.0).coerceAtLeast(0.0))
+                }
+            }
+            "createGain" -> {
+                val id = payload.optString("nodeId")
+                if (id.isNotBlank()) gains[id] = Parameter(payload.optDouble("gain", 1.0).coerceAtLeast(0.0))
+            }
+            "connect" -> {
+                val source = payload.optString("sourceId")
+                oscillators[source]?.gain = gains[payload.optString("destinationId")] ?: Parameter(1.0)
+            }
+            "frequency" -> oscillators[payload.optString("nodeId")]?.frequency?.set(payload.optDouble("value", 0.0).coerceAtLeast(0.0))
+            "frequencyAtTime", "frequencyRampToTime" -> oscillators[payload.optString("nodeId")]?.frequency?.schedule(
+                payload.optDouble("value", 0.0).coerceAtLeast(0.0),
+                payload.optDouble("time", 0.0),
+                payload.optString("action") == "frequencyRampToTime",
+            )
+            "gain" -> gains[payload.optString("nodeId")]?.set(payload.optDouble("value", 0.0).coerceAtLeast(0.0))
+            "gainAtTime", "gainRampToTime" -> gains[payload.optString("nodeId")]?.schedule(
+                payload.optDouble("value", 0.0).coerceAtLeast(0.0),
+                payload.optDouble("time", 0.0),
+                payload.optString("action") == "gainRampToTime",
+            )
+            "start", "stop" -> {
+                val state = oscillators[payload.optString("nodeId")] ?: return
+                ensureTrack()
+                val active = payload.optString("action") == "start"
+                val delay = (payload.optDouble("delay", 0.0).coerceAtLeast(0.0) * 1000).roundToLong()
+                handler.postDelayed({ state.active = active }, delay)
+            }
+            "close" -> close()
+        }
+    }
+
+    @Synchronized fun close() {
+        oscillators.values.forEach { it.active = false }
+        oscillators.clear()
+        gains.clear()
+        contextStarts.clear()
+        running = false
+        renderThread?.interrupt()
+        renderThread = null
+        track?.let { output ->
+            runCatching {
+                output.pause()
+                output.flush()
+                output.release()
+            }
+        }
+        track = null
+    }
+
+    @Synchronized private fun ensureTrack() {
+        if (track != null) return
+        val sampleRate = 44_100
+        val minBuffer = AudioTrack.getMinBufferSize(sampleRate, AudioFormat.CHANNEL_OUT_STEREO, AudioFormat.ENCODING_PCM_16BIT)
+        val format = AudioFormat.Builder()
+            .setSampleRate(sampleRate)
+            .setEncoding(AudioFormat.ENCODING_PCM_16BIT)
+            .setChannelMask(AudioFormat.CHANNEL_OUT_STEREO)
+            .build()
+        val attributes = AudioAttributes.Builder()
+            .setUsage(AudioAttributes.USAGE_MEDIA)
+            .setContentType(AudioAttributes.CONTENT_TYPE_MUSIC)
+            .build()
+        val created = AudioTrack.Builder()
+            .setAudioAttributes(attributes)
+            .setAudioFormat(format)
+            .setBufferSizeInBytes(max(minBuffer, sampleRate / 4))
+            .setTransferMode(AudioTrack.MODE_STREAM)
+            .build()
+        track = created
+        running = true
+        created.play()
+        renderThread = Thread({ render(created, sampleRate) }, "craft-native-audio").also { it.start() }
+    }
+
+    private fun render(output: AudioTrack, sampleRate: Int) {
+        val buffer = ShortArray(1024 * 2)
+        while (running && !Thread.currentThread().isInterrupted) {
+            val snapshot = synchronized(this) {
+                oscillators.mapValues { (id, state) ->
+                    Triple(state, state.gain, state.active)
+                }
+            }
+            val now = System.nanoTime() / 1_000_000_000.0
+            for (frame in 0 until 1024) {
+                var sample = 0.0
+                snapshot.forEach { (_, value) ->
+                    val (state, gain, active) = value
+                    if (!active) return@forEach
+                    val time = (now - state.contextStart).coerceAtLeast(0.0) + frame.toDouble() / sampleRate
+                    val frequency = state.frequency.valueAt(time)
+                    sample += sin(state.phase) * gain.valueAt(time)
+                    state.phase += 2 * PI * frequency / sampleRate
+                    if (state.phase >= 2 * PI) state.phase -= 2 * PI
+                }
+                val value = (sample.coerceIn(-1.0, 1.0) * Short.MAX_VALUE).toInt().toShort()
+                buffer[frame * 2] = value
+                buffer[frame * 2 + 1] = value
+            }
+            if (output.write(buffer, 0, buffer.size, AudioTrack.WRITE_BLOCKING) < 0) break
+        }
+    }
+}
+
 /** WebView-free host for a route bundle compiled by `stx native compile`. */
 class MainActivity : AppCompatActivity() {
     private class Screen(
@@ -854,6 +1461,7 @@ class MainActivity : AppCompatActivity() {
         val modalVisibility = mutableMapOf<View, Boolean>()
         val modalCloseHandlers = mutableMapOf<View, String>()
         val layoutHandlers = mutableMapOf<View, String>()
+        val layoutListeners = mutableMapOf<View, View.OnLayoutChangeListener>()
         val lastLayoutBounds = mutableMapOf<View, LayoutBounds>()
         val flatListRows = mutableMapOf<CraftNativeFlatList, MutableMap<String, MutableMap<String, View>>>()
         val flatListOwners = mutableMapOf<String, String>()
@@ -862,11 +1470,13 @@ class MainActivity : AppCompatActivity() {
         val capabilityScope = UUID.randomUUID().toString()
         val pendingCapabilities = mutableSetOf<String>()
         val capabilityTimeouts = mutableMapOf<String, Runnable>()
+        val audio = CraftNativeAudio()
         var active = true
 
         fun close() {
             if (!active) return
             active = false
+            audio.close()
             val finish = {
                 port?.close()
                 isolate.close()
@@ -1040,6 +1650,80 @@ class MainActivity : AppCompatActivity() {
             globalThis.__stxNativeRoute = ${route?.let { JSONObject.quote(it) } ?: "undefined"};
             globalThis.__stxNativeParams = ${params};
         """.trimIndent()
+        val audioPrelude = """
+            (function() {
+              if (typeof globalThis.AudioContext !== 'function') {
+                var nextAudioId = 0;
+                function audioMessage(payload) {
+                  globalThis.__stxNativeBridge.postMessage({ type: 'AUDIO', payload: payload });
+                }
+                function audioParam(contextId, nodeId, action, initial) {
+                  var current = Number(initial) || 0;
+                  var param = {};
+                  Object.defineProperty(param, 'value', {
+                    configurable: true,
+                    enumerable: true,
+                    get: function() { return current; },
+                    set: function(value) {
+                      current = Number(value) || 0;
+                      audioMessage({ action: action, contextId: contextId, nodeId: nodeId, value: current });
+                    }
+                  });
+                  function schedule(value, when, ramp) {
+                    current = Number(value) || 0;
+                    var time = Number(when);
+                    audioMessage({ action: action + (ramp ? 'RampToTime' : 'AtTime'), contextId: contextId, nodeId: nodeId, value: current, time: isFinite(time) ? Math.max(0, time) : 0 });
+                  }
+                  param.setValueAtTime = function(value, when) { schedule(value, when, false); return param; };
+                  param.linearRampToValueAtTime = function(value, when) { schedule(value, when, true); return param; };
+                  return param;
+                }
+                function AudioContext() {
+                  this._id = 'audio-' + (++nextAudioId);
+                  this._started = Date.now() / 1000;
+                  this.state = 'running';
+                  this.destination = { _contextId: this._id, _nodeId: 'destination' };
+                  audioMessage({ action: 'createContext', contextId: this._id });
+                }
+                Object.defineProperty(AudioContext.prototype, 'currentTime', {
+                  get: function() { return Date.now() / 1000 - this._started; }
+                });
+                AudioContext.prototype.createOscillator = function() {
+                  var context = this;
+                  var node = { _contextId: context._id, _nodeId: context._id + '-osc-' + (++nextAudioId) };
+                  node.frequency = audioParam(context._id, node._nodeId, 'frequency', 440);
+                  node.connect = function(destination) {
+                    audioMessage({ action: 'connect', contextId: context._id, sourceId: node._nodeId, destinationId: destination && destination._nodeId || 'destination' });
+                    return destination;
+                  };
+                  node.start = function(when) {
+                    audioMessage({ action: 'start', contextId: context._id, nodeId: node._nodeId, delay: Math.max(0, (Number(when) || 0) - context.currentTime) });
+                  };
+                  node.stop = function(when) {
+                    audioMessage({ action: 'stop', contextId: context._id, nodeId: node._nodeId, delay: Math.max(0, (Number(when) || 0) - context.currentTime) });
+                  };
+                  audioMessage({ action: 'createOscillator', contextId: context._id, nodeId: node._nodeId, frequency: node.frequency.value });
+                  return node;
+                };
+                AudioContext.prototype.createGain = function() {
+                  var context = this;
+                  var node = { _contextId: context._id, _nodeId: context._id + '-gain-' + (++nextAudioId) };
+                  node.gain = audioParam(context._id, node._nodeId, 'gain', 1);
+                  node.connect = function(destination) {
+                    audioMessage({ action: 'connect', contextId: context._id, sourceId: node._nodeId, destinationId: destination && destination._nodeId || 'destination' });
+                    return destination;
+                  };
+                  audioMessage({ action: 'createGain', contextId: context._id, nodeId: node._nodeId, gain: node.gain.value });
+                  return node;
+                };
+                AudioContext.prototype.resume = function() { this.state = 'running'; return Promise.resolve(); };
+                AudioContext.prototype.suspend = function() { this.state = 'suspended'; return Promise.resolve(); };
+                AudioContext.prototype.close = function() { this.state = 'closed'; audioMessage({ action: 'close', contextId: this._id }); return Promise.resolve(); };
+                globalThis.AudioContext = AudioContext;
+                globalThis.webkitAudioContext = AudioContext;
+              }
+            })()
+        """.trimIndent()
         val prelude = if (useMessagePorts) """
             (async function() {
               const port = await android.getNamedPort('craft');
@@ -1055,6 +1739,7 @@ class MainActivity : AppCompatActivity() {
                 postMessage: function(value) { port.postMessage(value); },
                 onMessage: function(callback) { port.onmessage = function(event) { callback(event.data); }; }
               };
+              $audioPrelude
             })()
         """.trimIndent() else """
             $routePrelude
@@ -1069,6 +1754,7 @@ class MainActivity : AppCompatActivity() {
               postMessage: function(value) { console.log(${JSONObject.quote(prefix)} + value); },
               onMessage: function(callback) { globalThis.__stxNativeCallback = callback; }
             };
+            $audioPrelude
         """.trimIndent()
         val setup = isolate.evaluateJavaScriptAsync(prelude)
         setup.addListener({
@@ -1206,6 +1892,7 @@ class MainActivity : AppCompatActivity() {
                     capabilities.cancel(token)
                 }
             }
+            "AUDIO" -> screen.audio.handle(payload)
         }
     }
 
@@ -1243,9 +1930,30 @@ class MainActivity : AppCompatActivity() {
             val updated = screen.controls["id:$target"] ?: return false
             if (!updateParentLayoutStyle(updated, document.optJSONObject("style") ?: JSONObject())) return false
         }
+        if (applied.isNotEmpty()) {
+            scheduleLayoutEvents(screen)
+        }
         return true
     }
 
+    private fun scheduleLayoutEvents(screen: Screen) {
+        if (!screen.active) return
+        val observer = screen.view.viewTreeObserver
+        if (observer.isAlive) {
+            val listener = object : ViewTreeObserver.OnGlobalLayoutListener {
+                override fun onGlobalLayout() {
+                    if (observer.isAlive) observer.removeOnGlobalLayoutListener(this)
+                    if (screen.active) emitLayoutEvents(screen)
+                }
+            }
+            observer.addOnGlobalLayoutListener(listener)
+        }
+        screen.view.requestLayout()
+        // A tree that is already settled may not produce a global-layout
+        // callback; keep the event path live for that case as well.
+        screen.view.postOnAnimation { if (screen.active) emitLayoutEvents(screen) }
+    }
+
     /**
      * Targeted mutations bypass the parent's child reconciliation. Rebind the
      * updated node's layout style explicitly so removing a width/height (or
@@ -1482,16 +2190,39 @@ class MainActivity : AppCompatActivity() {
                 transparent = props.optBoolean("transparent", false)
                 content.configure(style, resources.displayMetrics.density)
                 reconcileChildren(screen, content, children, path, next, style, previousControls)
-                val visible = props.optBoolean("visible", false) && style.optString("display") != "none"
+                // Dynamic :visible bindings arrive as a display style mutation;
+                // static visible props remain authoritative when present.
+                val visible = if (props.has("visible")) {
+                    // An explicit visible prop owns modal visibility. The
+                    // binding runtime may leave a stale display:none style
+                    // from the previous hidden state when it patches props.
+                    props.optBoolean("visible", false)
+                } else {
+                    style.has("display") && style.optString("display") != "none"
+                }
                 val wasVisible = screen.modalVisibility[this]
                 screen.modalVisibility[this] = visible
                 val requestClose = events.optString("onRequestClose")
                 if (requestClose.isNotBlank()) screen.modalCloseHandlers[this] = requestClose else screen.modalCloseHandlers.remove(this)
+                onRequestClose = if (requestClose.isNotBlank()) {
+                    { send(screen, "EVENT", JSONObject().put("handlerName", requestClose).put("nativeEvent", JSONObject())) }
+                } else {
+                    null
+                }
                 setVisible(visible, style.optDouble("opacity", 1.0).toFloat(), props.optString("animationType").ifBlank { null })
+                if (visible) clearDismissSuppression()
+                val suppressDismiss = !visible && consumeDismissSuppression()
                 if (wasVisible != visible && (visible || wasVisible == true)) {
                     val lifecycleHandler = if (visible) events.optString("onShow") else events.optString("onDismiss")
-                    if (lifecycleHandler.isNotBlank()) {
-                        send(screen, "EVENT", JSONObject().put("handlerName", lifecycleHandler).put("nativeEvent", JSONObject()))
+                    if (lifecycleHandler.isNotBlank() && !suppressDismiss) {
+                        // Deliver lifecycle callbacks after reconciliation returns to
+                        // the queue; the handler may immediately schedule another
+                        // render against this native view.
+                        post {
+                            if (screen.active && screen.modalVisibility[this] == visible) {
+                                send(screen, "EVENT", JSONObject().put("handlerName", lifecycleHandler).put("nativeEvent", JSONObject()))
+                            }
+                        }
                     }
                 }
             }
@@ -1579,7 +2310,7 @@ class MainActivity : AppCompatActivity() {
                     }
                 })
             }
-            "ActivityIndicator" -> (previous as? android.widget.ProgressBar ?: android.widget.ProgressBar(this)).apply {
+            "ActivityIndicator" -> (previous as? CraftNativeActivityIndicator ?: CraftNativeActivityIndicator(this)).apply {
                 val requestedSize = props.opt("size")
                 val scale = when (requestedSize) {
                     "large" -> 1.35f
@@ -1613,6 +2344,19 @@ class MainActivity : AppCompatActivity() {
                 if (onError.isNotBlank()) screen.imageErrorHandlers[this] = onError else screen.imageErrorHandlers.remove(this)
                 updateImage(screen, this, props.opt("source"))
             }
+            "Video" -> (previous as? CraftNativeVideoView ?: CraftNativeVideoView(this)).apply {
+                configure(
+                    source = props.opt("source"),
+                    autoplay = props.optBoolean("autoplay", props.optBoolean("autoPlay", false)),
+                    paused = props.optBoolean("paused", false),
+                    loop = props.optBoolean("loop", false),
+                    muted = props.optBoolean("muted", false),
+                    controls = props.optBoolean("controls", false),
+                )
+            }
+            "Svg" -> (previous as? CraftNativeSvgView ?: CraftNativeSvgView(this)).apply {
+                drawing = node
+            }
             "ScrollView" -> (previous as? CraftNativeScrollView ?: CraftNativeScrollView(this)).apply {
                 val horizontal = props.optBoolean("horizontal", false) || style.optString("flexDirection") in setOf("row", "row-reverse")
                 setHorizontal(horizontal)
@@ -1711,6 +2455,9 @@ class MainActivity : AppCompatActivity() {
                 reconcileChildren(screen, this, children, path, next, style, previousControls)
             }
         }
+        if (control is CraftNativeFlexLayout) {
+            control.onLayoutChanged = { if (screen.active) emitLayoutEvents(screen) }
+        }
         val pressInHandler = events.optString("onPressIn").takeIf { it.isNotBlank() }
         val pressOutHandler = events.optString("onPressOut").takeIf { it.isNotBlank() }
         if (pressInHandler != null) screen.pressInHandlers[control] = pressInHandler else screen.pressInHandlers.remove(control)
@@ -1786,9 +2533,11 @@ class MainActivity : AppCompatActivity() {
         if (layoutHandler.isNotBlank()) {
             if (screen.layoutHandlers[control] != layoutHandler) screen.lastLayoutBounds.remove(control)
             screen.layoutHandlers[control] = layoutHandler
+            ensureLayoutListener(screen, control)
         } else {
             screen.layoutHandlers.remove(control)
             screen.lastLayoutBounds.remove(control)
+            screen.layoutListeners.remove(control)?.let(control::removeOnLayoutChangeListener)
         }
         if (control is ImageView) imageErrors[control]?.let { message ->
             val current = control.contentDescription?.toString().orEmpty()
@@ -1807,7 +2556,6 @@ class MainActivity : AppCompatActivity() {
                 View.VISIBLE
             }
         }
-        if (type == "Modal" && !props.optBoolean("visible", false)) control.visibility = View.GONE
         val width = style.optDouble("width", Double.NaN).takeUnless { it.isNaN() }?.let(::dp)
         val height = style.optDouble("height", Double.NaN).takeUnless { it.isNaN() }?.let(::dp)
         control.layoutParams = LinearLayout.LayoutParams(
@@ -1968,7 +2716,9 @@ class MainActivity : AppCompatActivity() {
 
     private fun applyViewStyle(view: View, style: JSONObject) {
         view.alpha = style.optDouble("opacity", 1.0).toFloat()
-        view.visibility = if (style.optString("display") == "none") View.GONE else View.VISIBLE
+        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()
         val background = style.has("backgroundColor") && !style.isNull("backgroundColor")
         val border = style.optDouble("borderWidth", 0.0)
@@ -1997,6 +2747,15 @@ class MainActivity : AppCompatActivity() {
         }
     }
 
+    private fun ensureLayoutListener(screen: Screen, view: View) {
+        if (screen.layoutListeners.containsKey(view)) return
+        val listener = View.OnLayoutChangeListener { changed, left, top, right, bottom, _, _, _, _ ->
+            if (screen.active) emitLayoutEvent(screen, changed, left, top, right, bottom)
+        }
+        screen.layoutListeners[view] = listener
+        view.addOnLayoutChangeListener(listener)
+    }
+
     private fun configureText(view: TextView, value: String, style: JSONObject) {
         view.text = when (style.optString("textTransform")) {
             "uppercase" -> value.uppercase()
@@ -2353,14 +3112,21 @@ class MainActivity : AppCompatActivity() {
     }
 
     private fun emitLayoutEvents(screen: Screen, view: View) {
+        emitLayoutEvent(screen, view, view.left, view.top, view.right, view.bottom)
+        if (view is ViewGroup) {
+            for (index in 0 until view.childCount) emitLayoutEvents(screen, view.getChildAt(index))
+        }
+    }
+
+    private fun emitLayoutEvent(screen: Screen, view: View, left: Int, top: Int, right: Int, bottom: Int) {
         val handler = screen.layoutHandlers[view]
         if (handler != null && view.isShown) {
             val density = resources.displayMetrics.density
             val bounds = LayoutBounds(
-                x = view.left.toDouble() / density.toDouble(),
-                y = view.top.toDouble() / density.toDouble(),
-                width = view.width.toDouble() / density.toDouble(),
-                height = view.height.toDouble() / density.toDouble(),
+                x = left.toDouble() / density.toDouble(),
+                y = top.toDouble() / density.toDouble(),
+                width = (right - left).toDouble() / density.toDouble(),
+                height = (bottom - top).toDouble() / density.toDouble(),
             )
             if (screen.lastLayoutBounds[view] != bounds) {
                 screen.lastLayoutBounds[view] = bounds
@@ -2373,9 +3139,6 @@ class MainActivity : AppCompatActivity() {
                         .put("height", bounds.height))))
             }
         }
-        if (view is ViewGroup) {
-            for (index in 0 until view.childCount) emitLayoutEvents(screen, view.getChildAt(index))
-        }
     }
 
     private fun send(screen: Screen, type: String, payload: JSONObject, correlationId: String? = null) {
@@ -2440,6 +3203,8 @@ class MainActivity : AppCompatActivity() {
             releaseFlatList(screen, it, preservingInputDrafts)
         }
         released.filterIsInstance<CraftNativeModalView>().forEach { it.resetForTeardown() }
+        released.filterIsInstance<CraftNativeVideoView>().forEach { it.stop() }
+        released.filterIsInstance<CraftNativeFlexLayout>().forEach { it.onLayoutChanged = null }
         released.filterIsInstance<CraftNativeScrollView>().forEach { it.setRefreshHandler(null, false) }
         releaseImages(released)
         released.filterIsInstance<EditText>().forEach {
@@ -2455,6 +3220,10 @@ class MainActivity : AppCompatActivity() {
         screen.pressOutHandlers.keys.removeAll(released)
         screen.longPressHandlers.keys.removeAll(released)
         screen.layoutHandlers.keys.removeAll(released)
+        screen.layoutListeners.forEach { (view, listener) ->
+            if (view in released) view.removeOnLayoutChangeListener(listener)
+        }
+        screen.layoutListeners.keys.removeAll(released)
         screen.lastLayoutBounds.keys.removeAll(released)
         screen.scrollHandlers.keys.removeAll(released)
         screen.scrollBeginHandlers.keys.removeAll(released)
@@ -2515,9 +3284,7 @@ class MainActivity : AppCompatActivity() {
         val screen = screens.lastOrNull() ?: return back()
         val modal = screen.modalVisibility.entries.lastOrNull { (view, visible) -> visible && view.visibility == View.VISIBLE }
         if (modal != null) {
-            screen.modalCloseHandlers[modal.key]?.let { handler ->
-                send(screen, "EVENT", JSONObject().put("handlerName", handler).put("nativeEvent", JSONObject()))
-            }
+            (modal.key as? CraftNativeModalView)?.requestClose()
             return
         }
         back()