craft-native 0.0.140 → 0.0.142

package/dist/ios/templates/CraftNativeScreen.swift

@@ -1,4 +1,7 @@
 import Foundation
+import AVFoundation
+import AVKit
+import Darwin
 import JavaScriptCore
 import OSLog
 import SwiftUI
@@ -18,6 +21,477 @@ private func craftNativeGridColumnCount(_ value: Any?) -> Int {
     return max(1, tracks.count)
 }
 
+/// Optional bridge to the shared Zig flex rule. Native hosts retain their
+/// local implementation when no Craft runtime is linked (the normal SDK
+/// fallback), while runtime-backed apps get one cross-platform calculation.
+private enum CraftNativeFlexBridge {
+    private struct Item {
+        var basis: Float
+        var grow: Float
+        var shrink: Float
+        var min: Float
+        var max: Float
+        var marginStart: Float
+        var marginEnd: Float
+    }
+
+    private typealias Function = @convention(c) (
+        Float, Float, UInt32, UnsafeRawPointer, Int, UnsafeMutableRawPointer, UnsafeMutableRawPointer
+    ) -> Int32
+
+    private static let function: Function? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_flex_row_justified") else { return nil }
+        return unsafeBitCast(symbol, to: Function.self)
+    }()
+
+    static func widths(available: CGFloat, gap: CGFloat, justify: UInt32, items: [(basis: CGFloat, grow: CGFloat, shrink: CGFloat, min: CGFloat?, max: CGFloat?, leading: CGFloat, trailing: CGFloat)]) -> [(width: CGFloat, position: CGFloat)]? {
+        guard let function, !items.isEmpty else { return nil }
+        var input = items.map { item in
+            Item(
+                basis: Float(item.basis), grow: Float(item.grow), shrink: Float(item.shrink),
+                min: item.min.map(Float.init) ?? .nan, max: item.max.map(Float.init) ?? .nan,
+                marginStart: Float(item.leading), marginEnd: Float(item.trailing)
+            )
+        }
+        var output = [Float](repeating: 0, count: input.count)
+        var positions = [Float](repeating: 0, count: input.count)
+        let status = input.withUnsafeBufferPointer { inputBuffer in
+            output.withUnsafeMutableBufferPointer { outputBuffer in
+                positions.withUnsafeMutableBufferPointer { positionBuffer in
+                    function(Float(available), Float(gap), justify, UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!), UnsafeMutableRawPointer(positionBuffer.baseAddress!))
+                }
+            }
+        }
+        guard status == 0, output.allSatisfy({ $0.isFinite }), positions.allSatisfy({ $0.isFinite }) else { return nil }
+        return zip(output, positions).map { (width: CGFloat($0), position: CGFloat($1)) }
+    }
+}
+
+private func craftNativeJustifyCode(_ value: String) -> UInt32 {
+    switch value {
+    case "center": return 1
+    case "flex-end": return 2
+    case "space-between": return 3
+    case "space-around": return 4
+    case "space-evenly": return 5
+    default: return 0
+    }
+}
+
+private enum CraftNativeFlexLineBridge {
+    private struct Item {
+        var basis: Float
+        var marginStart: Float
+        var marginEnd: Float
+    }
+
+    private typealias Function = @convention(c) (
+        Float, Float, UInt32, UnsafeRawPointer, Int, UnsafeMutableRawPointer
+    ) -> Int32
+
+    private static let function: Function? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_flex_line_breaks") else { return nil }
+        return unsafeBitCast(symbol, to: Function.self)
+    }()
+
+    static func lines(available: CGFloat, gap: CGFloat, wrap: Bool, items: [(basis: CGFloat, leading: CGFloat, trailing: CGFloat)]) -> [Int]? {
+        guard let function, !items.isEmpty else { return nil }
+        var input = items.map { Item(basis: Float($0.basis), marginStart: Float($0.leading), marginEnd: Float($0.trailing)) }
+        var output = [Int32](repeating: 0, count: input.count)
+        let status = input.withUnsafeBufferPointer { inputBuffer in
+            output.withUnsafeMutableBufferPointer { outputBuffer in
+                function(Float(available), Float(gap), wrap ? 1 : 0, UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
+            }
+        }
+        guard status > 0 else { return nil }
+        return output.map(Int.init)
+    }
+}
+
+private enum CraftNativeFlexLineDistributionBridge {
+    private typealias Function = @convention(c) (
+        Float, Float, UInt32, UnsafeRawPointer, Int, UnsafeMutableRawPointer, UnsafeMutableRawPointer
+    ) -> Int32
+
+    private static let function: Function? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_flex_line_distribution") else { return nil }
+        return unsafeBitCast(symbol, to: Function.self)
+    }()
+
+    static func distribute(available: CGFloat, gap: CGFloat, alignment: UInt32, lineCrosses: [CGFloat]) -> (offsets: [CGFloat], sizes: [CGFloat])? {
+        guard let function, !lineCrosses.isEmpty else { return nil }
+        var input = lineCrosses.map(Float.init)
+        var offsets = [Float](repeating: 0, count: input.count)
+        var sizes = [Float](repeating: 0, count: input.count)
+        let status = input.withUnsafeBufferPointer { inputBuffer in
+            offsets.withUnsafeMutableBufferPointer { offsetBuffer in
+                sizes.withUnsafeMutableBufferPointer { sizeBuffer in
+                    function(Float(available), Float(gap), alignment, UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(offsetBuffer.baseAddress!), UnsafeMutableRawPointer(sizeBuffer.baseAddress!))
+                }
+            }
+        }
+        guard status == 0, offsets.allSatisfy({ $0.isFinite }), sizes.allSatisfy({ $0.isFinite }) else { return nil }
+        return (offsets.map { CGFloat($0) }, sizes.map { CGFloat($0) })
+    }
+}
+
+/// Optional bridge to the shared cross-axis alignment rule. The local rule is
+/// retained for runtimes built before this symbol was exported.
+private enum CraftNativeCrossAxisBridge {
+    private typealias Function = @convention(c) (Float, Float, Float, Float, UInt32) -> Float
+
+    private static let function: Function? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_cross_axis_position") else { return nil }
+        return unsafeBitCast(symbol, to: Function.self)
+    }()
+
+    static func position(available: CGFloat, size: CGFloat, leading: CGFloat, trailing: CGFloat, alignment: UInt32) -> CGFloat? {
+        guard let function else { return nil }
+        let result = function(Float(available), Float(size), Float(leading), Float(trailing), alignment)
+        return result.isFinite ? CGFloat(result) : nil
+    }
+}
+
+private enum CraftNativeGridBridge {
+    private struct Item {
+        var intrinsicWidth: Float
+        var intrinsicHeight: Float
+        var explicitWidth: Float
+        var explicitHeight: Float
+        var minWidth: Float
+        var maxWidth: Float
+        var minHeight: Float
+        var maxHeight: Float
+        var marginLeft: Float
+        var marginRight: Float
+        var marginTop: Float
+        var marginBottom: Float
+        var stretch: UInt32
+        var alignment: UInt32
+    }
+
+    private struct Frame {
+        var x: Float
+        var y: Float
+        var width: Float
+        var height: Float
+    }
+
+    private typealias Function = @convention(c) (
+        Float, Float, UInt32, Float, Float, UnsafeRawPointer, Int, UnsafeMutableRawPointer
+    ) -> Int32
+
+    private static let function: Function? = {
+        guard let symbol = dlsym(UnsafeMutableRawPointer(bitPattern: -2), "craft_native_grid") else { return nil }
+        return unsafeBitCast(symbol, to: Function.self)
+    }()
+
+    static func frames(
+        availableWidth: CGFloat,
+        availableHeight: CGFloat,
+        columns: Int,
+        columnGap: CGFloat,
+        rowGap: CGFloat,
+        items: [(intrinsicWidth: CGFloat, intrinsicHeight: CGFloat, explicitWidth: CGFloat?, explicitHeight: CGFloat?, minWidth: CGFloat?, maxWidth: CGFloat?, minHeight: CGFloat?, maxHeight: CGFloat?, marginLeft: CGFloat, marginRight: CGFloat, marginTop: CGFloat, marginBottom: CGFloat, stretch: Bool, alignment: UInt32)]
+    ) -> [(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)]? {
+        guard let function, !items.isEmpty else { return nil }
+        var input = items.map { item in
+            Item(
+                intrinsicWidth: Float(item.intrinsicWidth), intrinsicHeight: Float(item.intrinsicHeight),
+                explicitWidth: item.explicitWidth.map(Float.init) ?? .nan, explicitHeight: item.explicitHeight.map(Float.init) ?? .nan,
+                minWidth: item.minWidth.map(Float.init) ?? .nan, maxWidth: item.maxWidth.map(Float.init) ?? .nan,
+                minHeight: item.minHeight.map(Float.init) ?? .nan, maxHeight: item.maxHeight.map(Float.init) ?? .nan,
+                marginLeft: Float(item.marginLeft), marginRight: Float(item.marginRight),
+                marginTop: Float(item.marginTop), marginBottom: Float(item.marginBottom),
+                stretch: item.stretch ? 1 : 0, alignment: item.alignment
+            )
+        }
+        var output = [Frame](repeating: Frame(x: 0, y: 0, width: 0, height: 0), count: input.count)
+        let status = input.withUnsafeBufferPointer { inputBuffer in
+            output.withUnsafeMutableBufferPointer { outputBuffer in
+                function(Float(availableWidth), Float(availableHeight), UInt32(max(1, columns)), Float(columnGap), Float(rowGap), UnsafeRawPointer(inputBuffer.baseAddress!), input.count, UnsafeMutableRawPointer(outputBuffer.baseAddress!))
+            }
+        }
+        guard status == 0, output.allSatisfy({ frame in
+            frame.x.isFinite && frame.y.isFinite && frame.width.isFinite && frame.height.isFinite
+        }) else { return nil }
+        return output.map { (CGFloat($0.x), CGFloat($0.y), CGFloat($0.width), CGFloat($0.height)) }
+    }
+}
+
+private final class CraftNativeVideoView: UIView {
+    private let playerController = AVPlayerViewController()
+    private var player: AVPlayer?
+    private var sourceURI = ""
+    private var endObserver: NSObjectProtocol?
+    private var loops = false
+
+    init(host: UIViewController) {
+        super.init(frame: .zero)
+        clipsToBounds = true
+        host.addChild(playerController)
+        addSubview(playerController.view)
+        playerController.didMove(toParent: host)
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        clipsToBounds = true
+        addSubview(playerController.view)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        playerController.view.frame = bounds
+    }
+
+    func configure(source: Any?, autoplay: Bool, paused: Bool, loop: Bool, muted: Bool, controls: Bool, resizeMode: String?) {
+        let uri = (source as? String) ?? (source as? [String: Any])?["uri"] as? String ?? ""
+        if uri != sourceURI {
+            if let observer = endObserver { NotificationCenter.default.removeObserver(observer) }
+            endObserver = nil
+            player?.pause()
+            player = nil
+            sourceURI = uri
+            loops = false
+            guard let url = URL(string: uri), !uri.isEmpty, url.scheme != nil else {
+                playerController.player = nil
+                return
+            }
+            let next = AVPlayer(url: url)
+            player = next
+            playerController.player = next
+        }
+        guard let player else { return }
+        player.isMuted = muted
+        playerController.showsPlaybackControls = controls
+        playerController.videoGravity = resizeMode == "cover" ? .resizeAspectFill
+            : resizeMode == "stretch" ? .resize
+            : .resizeAspect
+        if loops != loop {
+            if let observer = endObserver { NotificationCenter.default.removeObserver(observer) }
+            endObserver = nil
+            loops = loop
+            if loop, let item = player.currentItem {
+                endObserver = NotificationCenter.default.addObserver(
+                    forName: .AVPlayerItemDidPlayToEndTime,
+                    object: item,
+                    queue: .main
+                ) { [weak player] _ in
+                    player?.seek(to: .zero) { _ in player?.play() }
+                }
+            }
+        }
+        if paused || !autoplay { player.pause() } else { player.play() }
+    }
+
+    func stop() {
+        player?.pause()
+        if let observer = endObserver { NotificationCenter.default.removeObserver(observer) }
+        endObserver = nil
+        player = nil
+        playerController.player = nil
+        sourceURI = ""
+        if playerController.parent != nil {
+            playerController.willMove(toParent: nil)
+            playerController.view.removeFromSuperview()
+            playerController.removeFromParent()
+        }
+    }
+
+    deinit { stop() }
+}
+
+/// The small Web Audio subset used by native STX screens: oscillator and gain
+/// nodes connected to the context destination. JavaScriptCore has no Web Audio
+/// implementation, so the screen installs a compatible surface and routes the
+/// graph to one AVAudioEngine source node per oscillator.
+private final class CraftNativeAudio {
+    private struct ParameterEvent {
+        let time: Double
+        let value: Double
+        let ramp: Bool
+    }
+
+    private final class Parameter {
+        private let lock = NSLock()
+        private var current: Double
+        private var events: [ParameterEvent] = []
+
+        init(_ value: Double) {
+            current = value
+        }
+
+        func set(_ value: Double) {
+            lock.lock(); defer { lock.unlock() }
+            current = value
+            events.removeAll()
+        }
+
+        func schedule(_ value: Double, at time: Double, ramp: Bool) {
+            lock.lock(); defer { lock.unlock() }
+            events.append(ParameterEvent(time: max(0, time), value: value, ramp: ramp))
+            events.sort { $0.time < $1.time }
+        }
+
+        func value(at time: Double) -> Double {
+            lock.lock(); defer { lock.unlock() }
+            var previousTime = 0.0
+            var previousValue = current
+            for event in events {
+                if time < event.time {
+                    guard event.ramp, event.time > previousTime else { return previousValue }
+                    let fraction = (time - previousTime) / (event.time - previousTime)
+                    return previousValue + (event.value - previousValue) * fraction
+                }
+                previousTime = event.time
+                previousValue = event.value
+            }
+            return previousValue
+        }
+    }
+
+    private final class OscillatorState {
+        let lock = NSLock()
+        let frequency = Parameter(440)
+        var gain = Parameter(1)
+        var phase = 0.0
+        var active = false
+        let contextStart: TimeInterval
+
+        init(contextStart: TimeInterval) {
+            self.contextStart = contextStart
+        }
+    }
+
+    private let engine = AVAudioEngine()
+    private var format: AVAudioFormat?
+    private var sources: [String: (state: OscillatorState, node: AVAudioSourceNode)] = [:]
+    private var gains: [String: Parameter] = [:]
+    private var contextStarts: [String: TimeInterval] = [:]
+    private var closed = false
+
+    func handle(_ payload: [String: Any]) {
+        guard !closed, let action = payload["action"] as? String else { return }
+        switch action {
+        case "createContext":
+            closed = false
+            if let contextID = payload["contextId"] as? String {
+                contextStarts[contextID] = Date().timeIntervalSince1970
+            }
+        case "createOscillator":
+            guard let id = payload["nodeId"] as? String else { return }
+            let contextStart = (payload["contextId"] as? String).flatMap { contextStarts[$0] } ?? Date().timeIntervalSince1970
+            createOscillator(id: id, frequency: number(payload["frequency"]) ?? 440, contextStart: contextStart)
+        case "createGain":
+            guard let id = payload["nodeId"] as? String else { return }
+            gains[id] = Parameter(number(payload["gain"]) ?? 1)
+        case "connect":
+            guard let sourceID = payload["sourceId"] as? String else { return }
+            let destinationID = payload["destinationId"] as? String
+            if var source = sources[sourceID] {
+                source.state.lock.lock()
+                source.state.gain = destinationID.flatMap { gains[$0] } ?? Parameter(1)
+                source.state.lock.unlock()
+                sources[sourceID] = source
+            }
+        case "frequency":
+            guard let id = payload["nodeId"] as? String, let value = number(payload["value"]), let source = sources[id] else { return }
+            source.state.frequency.set(max(0, value))
+        case "frequencyAtTime", "frequencyRampToTime":
+            guard let id = payload["nodeId"] as? String, let value = number(payload["value"]), let time = number(payload["time"]), let source = sources[id] else { return }
+            source.state.frequency.schedule(max(0, value), at: time, ramp: action == "frequencyRampToTime")
+        case "gain":
+            guard let id = payload["nodeId"] as? String, let value = number(payload["value"]) else { return }
+            gains[id]?.set(max(0, value))
+        case "gainAtTime", "gainRampToTime":
+            guard let id = payload["nodeId"] as? String, let value = number(payload["value"]), let time = number(payload["time"]) else { return }
+            gains[id]?.schedule(max(0, value), at: time, ramp: action == "gainRampToTime")
+        case "start", "stop":
+            guard let id = payload["nodeId"] as? String, let source = sources[id] else { return }
+            if action == "start" { start(source.state, after: max(0, number(payload["delay"]) ?? 0)) }
+            else { stop(source.state, after: max(0, number(payload["delay"]) ?? 0)) }
+        case "close":
+            close()
+        default:
+            break
+        }
+    }
+
+    func close() {
+        guard !closed else { return }
+        closed = true
+        sources.values.forEach { source in
+            source.state.lock.lock(); source.state.active = false; source.state.lock.unlock()
+            engine.detach(source.node)
+        }
+        sources.removeAll()
+        gains.removeAll()
+        contextStarts.removeAll()
+        engine.stop()
+    }
+
+    private func createOscillator(id: String, frequency: Double, contextStart: TimeInterval) {
+        guard sources[id] == nil else { return }
+        guard let format = audioFormat() else { return }
+        let state = OscillatorState(contextStart: contextStart)
+        state.frequency.set(max(0, frequency))
+        let node = AVAudioSourceNode(format: format) { _, _, frameCount, audioBufferList in
+            let buffers = UnsafeMutableAudioBufferListPointer(audioBufferList)
+            state.lock.lock()
+            let active = state.active
+            let frequency = state.frequency
+            let gain = state.gain
+            var phase = state.phase
+            state.lock.unlock()
+            let startTime = max(0, Date().timeIntervalSince1970 - state.contextStart)
+            for buffer in buffers {
+                guard let data = buffer.mData else { continue }
+                let samples = data.assumingMemoryBound(to: Float.self)
+                for frame in 0..<Int(frameCount) {
+                    let frameTime = startTime + Double(frame) / format.sampleRate
+                    let frameFrequency = frequency.value(at: frameTime)
+                    let frameGain = gain.value(at: frameTime)
+                    samples[frame] = active ? Float(sin(phase) * frameGain) : 0
+                    phase += 2 * Double.pi * frameFrequency / format.sampleRate
+                    if phase >= 2 * Double.pi { phase -= 2 * Double.pi }
+                }
+            }
+            state.lock.lock(); state.phase = phase; state.lock.unlock()
+            return noErr
+        }
+        engine.attach(node)
+        engine.connect(node, to: engine.mainMixerNode, format: format)
+        sources[id] = (state, node)
+    }
+
+    private func audioFormat() -> AVAudioFormat? {
+        if let format { return format }
+        let created = AVAudioFormat(standardFormatWithSampleRate: 44_100, channels: 2)
+        format = created
+        return created
+    }
+
+    private func start(_ state: OscillatorState, after delay: Double) {
+        if !engine.isRunning {
+            try? engine.start()
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
+            state.lock.lock(); state.active = true; state.lock.unlock()
+        }
+    }
+
+    private func stop(_ state: OscillatorState, after delay: Double) {
+        DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
+            state.lock.lock(); state.active = false; state.lock.unlock()
+        }
+    }
+
+    private func number(_ value: Any?) -> Double? {
+        (value as? NSNumber).map { $0.doubleValue }
+    }
+}
+
 /// A WebView-free host for the first stx native vertical slice. The bundled
 /// JavaScript sends whole, compiled view trees to UIKit and receives control
 /// events and Craft API replies through JavaScriptCore.
@@ -249,6 +723,7 @@ private final class CraftNativeFlowView: UIStackView {
     var grid = false { didSet { if grid != oldValue { invalidateMeasurements() } } }
     var gridColumns = 1 { didSet { if gridColumns != oldValue { invalidateMeasurements() } } }
     var gridAutoRows: CGFloat? { didSet { if gridAutoRows != oldValue { invalidateMeasurements() } } }
+    var reverse = false { didSet { if reverse != oldValue { invalidateMeasurements() } } }
     var padding = UIEdgeInsets.zero {
         didSet {
             layoutMargins = padding
@@ -572,44 +1047,73 @@ private final class CraftNativeFlowView: UIStackView {
         // Lines: one, or as many as wrapping needs.
         var lines: [Range<Int>] = []
         let lineLimit = definiteMain ?? roomMain
-        var start = 0
-        var used: CGFloat = 0
-        for index in items.indices {
-            let size = items[index].basis + items[index].mainMargins
-            let next = index == start ? size : used + mainGap + size
-            if wrap, index > start, next > lineLimit {
+        if let lineIds = CraftNativeFlexLineBridge.lines(
+            available: lineLimit,
+            gap: mainGap,
+            wrap: wrap,
+            items: items.map { ($0.basis, $0.mainLeading, $0.mainTrailing) }
+        ) {
+            var start = 0
+            for index in 1..<items.count where lineIds[index] != lineIds[index - 1] {
                 lines.append(start..<index)
                 start = index
-                used = size
-            } else {
-                used = next
             }
+            lines.append(start..<items.count)
+        } else {
+            var start = 0
+            var used: CGFloat = 0
+            for index in items.indices {
+                let size = items[index].basis + items[index].mainMargins
+                let next = index == start ? size : used + mainGap + size
+                if wrap, index > start, next > lineLimit {
+                    lines.append(start..<index)
+                    start = index
+                    used = size
+                } else {
+                    used = next
+                }
+            }
+            if start < items.count { lines.append(start..<items.count) }
         }
-        if start < items.count { lines.append(start..<items.count) }
 
         var lineMains: [CGFloat] = []
         var lineCrosses: [CGFloat] = []
+        var sharedLines: [[(width: CGFloat, position: CGFloat)]?] = []
         for line in lines {
             let gaps = CGFloat(max(0, line.count - 1)) * mainGap
             let hypothetical = line.reduce(0) { $0 + items[$1].basis + items[$1].mainMargins } + gaps
             // A row sized by its content is as wide as that content, up to the
             // room it has; a column sized by its content is as tall as it is.
             let lineMain = definiteMain ?? (horizontal ? min(hypothetical, roomMain) : hypothetical)
-            let free = lineMain - hypothetical
-            if free > 0 {
-                let total = line.reduce(0) { $0 + items[$1].grow }
-                for index in line {
-                    let share = total > 0 ? free * items[index].grow / total : 0
-                    items[index].main = clamp(items[index].basis + share, items[index].minMain, items[index].maxMain)
-                }
-            } else if free < 0 {
-                let total = line.reduce(0) { $0 + items[$1].shrink * items[$1].basis }
-                for index in line {
-                    let share = total > 0 ? -free * items[index].shrink * items[index].basis / total : 0
-                    items[index].main = clamp(items[index].basis - share, items[index].minMain, items[index].maxMain)
+            let sharedWidths = CraftNativeFlexBridge.widths(
+                available: lineMain,
+                gap: mainGap,
+                justify: craftNativeJustifyCode(justifyContent),
+                items: line.map { index in
+                    let item = items[index]
+                    return (item.basis, item.grow, item.shrink, item.minMain, item.maxMain, item.mainLeading, item.mainTrailing)
                 }
+            )
+            sharedLines.append(sharedWidths)
+            if let sharedWidths {
+                for (offset, index) in line.enumerated() { items[index].main = sharedWidths[offset].width }
             } else {
-                for index in line { items[index].main = items[index].basis }
+                let free = lineMain - hypothetical
+                if free > 0 {
+                    let total = line.reduce(0) { $0 + items[$1].grow }
+                    for index in line {
+                        let share = total > 0 ? free * items[index].grow / total : 0
+                        items[index].main = clamp(items[index].basis + share, items[index].minMain, items[index].maxMain)
+                    }
+                } else if free < 0 {
+                    let total = line.reduce(0) { $0 + items[$1].shrink * items[$1].basis }
+                    for index in line {
+                        let share = total > 0 ? -free * items[index].shrink * items[index].basis / total : 0
+                        items[index].main = clamp(items[index].basis - share, items[index].minMain, items[index].maxMain)
+                    }
+                } else {
+                    for index in line { items[index].main = items[index].basis }
+                }
             }
 
             var lineCross: CGFloat = 0
@@ -646,19 +1150,50 @@ private final class CraftNativeFlowView: UIStackView {
             ?? (lineCrosses.reduce(0, +) + CGFloat(max(0, lineCrosses.count - 1)) * crossGap)
         var crossLeading: CGFloat = 0
         var crossBetween = crossGap
+        var sharedCrossOffsets: [CGFloat]? = nil
         if wrap, let definiteCross, lineCrosses.count > 1 {
-            let free = max(0, definiteCross - (lineCrosses.reduce(0, +) + CGFloat(lineCrosses.count - 1) * crossGap))
-            switch alignContent {
-            case "center": crossLeading = free / 2
-            case "flex-end": crossLeading = free
-            case "space-between": crossBetween = free / CGFloat(lineCrosses.count - 1) + crossGap
-            case "space-around":
-                crossBetween = free / CGFloat(lineCrosses.count) + crossGap
-                crossLeading = free / CGFloat(lineCrosses.count * 2)
-            case "stretch":
-                let extra = free / CGFloat(lineCrosses.count)
-                lineCrosses = lineCrosses.map { $0 + extra }
-            default: break
+            let alignment: UInt32 = switch alignContent {
+            case "center": 1
+            case "flex-end": 2
+            case "space-between": 3
+            case "space-around": 4
+            case "stretch": 5
+            default: 0
+            }
+            if let distributed = CraftNativeFlexLineDistributionBridge.distribute(
+                available: definiteCross,
+                gap: crossGap,
+                alignment: alignment,
+                lineCrosses: lineCrosses
+            ) {
+                sharedCrossOffsets = distributed.offsets
+                lineCrosses = distributed.sizes
+                for (lineIndex, line) in lines.enumerated() {
+                    for index in line where items[index].fixedCross == nil && items[index].align == "stretch" {
+                        let item = items[index]
+                        items[index].cross = clamp(lineCrosses[lineIndex] - item.crossMargins, item.minCross, item.maxCross)
+                    }
+                }
+            } else {
+                let free = max(0, definiteCross - (lineCrosses.reduce(0, +) + CGFloat(lineCrosses.count - 1) * crossGap))
+                switch alignContent {
+                case "center": crossLeading = free / 2
+                case "flex-end": crossLeading = free
+                case "space-between": crossBetween = free / CGFloat(lineCrosses.count - 1) + crossGap
+                case "space-around":
+                    crossBetween = free / CGFloat(lineCrosses.count) + crossGap
+                    crossLeading = free / CGFloat(lineCrosses.count * 2)
+                case "stretch":
+                    let extra = free / CGFloat(lineCrosses.count)
+                    lineCrosses = lineCrosses.map { $0 + extra }
+                    for (lineIndex, line) in lines.enumerated() {
+                        for index in line where items[index].fixedCross == nil && items[index].align == "stretch" {
+                            let item = items[index]
+                            items[index].cross = clamp(lineCrosses[lineIndex] - item.crossMargins, item.minCross, item.maxCross)
+                        }
+                    }
+                default: break
+                }
             }
             contentCross = definiteCross
         }
@@ -679,23 +1214,36 @@ private final class CraftNativeFlowView: UIStackView {
                 default: leading = 0; between = 0
                 }
                 let lineCross = lineCrosses[lineIndex]
+                let lineOffset = sharedCrossOffsets?[lineIndex] ?? crossOffset
+                let sharedLine = sharedLines[lineIndex]
+                    let useSharedPositions = !reverse && sharedLine != nil
                 var mainOffset = leading
-                for index in line {
+                for (offset, index) in line.enumerated() {
                     let item = items[index]
-                    let crossPosition: CGFloat
-                    switch item.align {
-                    case "center": crossPosition = item.crossLeading + (lineCross - item.crossMargins - item.cross) / 2
-                    case "flex-end": crossPosition = lineCross - item.crossTrailing - item.cross
-                    default: crossPosition = item.crossLeading
-                    }
-                    let mainPosition = mainOffset + item.mainLeading
+                    let alignment = item.align == "center" ? UInt32(1) : item.align == "flex-end" ? UInt32(2) : UInt32(0)
+                    let crossPosition = CraftNativeCrossAxisBridge.position(
+                        available: lineCross,
+                        size: item.cross,
+                        leading: item.crossLeading,
+                        trailing: item.crossTrailing,
+                        alignment: alignment
+                    ) ?? {
+                        switch alignment {
+                        case 1: return item.crossLeading + (lineCross - item.crossMargins - item.cross) / 2
+                        case 2: return lineCross - item.crossTrailing - item.cross
+                        default: return item.crossLeading
+                        }
+                    }()
+                    let mainPosition = useSharedPositions
+                        ? (sharedLine?[offset].position ?? (mainOffset + item.mainLeading))
+                        : mainOffset + item.mainLeading
                     let frame = horizontal
-                        ? CGRect(x: padding.left + mainPosition, y: padding.top + crossOffset + crossPosition, width: item.main, height: item.cross)
-                        : CGRect(x: padding.left + crossOffset + crossPosition, y: padding.top + mainPosition, width: item.cross, height: item.main)
+                        ? CGRect(x: padding.left + mainPosition, y: padding.top + lineOffset + crossPosition, width: item.main, height: item.cross)
+                        : CGRect(x: padding.left + lineOffset + crossPosition, y: padding.top + mainPosition, width: item.cross, height: item.main)
                     frames.append((item.view, frame))
-                    mainOffset += item.mainMargins + item.main + mainGap + between
+                    if !useSharedPositions { mainOffset += item.mainMargins + item.main + mainGap + between }
                 }
-                crossOffset += lineCross + crossBetween
+                if sharedCrossOffsets == nil { crossOffset += lineCross + crossBetween }
             }
         }
         return horizontal ? CGSize(width: contentMain, height: contentCross) : CGSize(width: contentCross, height: contentMain)
@@ -746,7 +1294,35 @@ private final class CraftNativeFlowView: UIStackView {
         }
         let width = innerWidth ?? (CGFloat(columns) * cellWidth + gaps)
         let height = rowHeights.reduce(0, +) + CGFloat(max(0, rowHeights.count - 1)) * verticalGap
+        let sharedFrames = CraftNativeGridBridge.frames(
+            availableWidth: innerWidth ?? width,
+            availableHeight: innerHeight ?? height,
+            columns: columns,
+            columnGap: horizontalGap,
+            rowGap: verticalGap,
+            items: children.enumerated().map { index, child in
+                let style = child.craftLayoutStyle
+                let align = style.alignSelf ?? alignItems
+                let size = sizes[index]
+                let alignment: UInt32 = align == "center" ? 1 : align == "flex-end" ? 2 : 0
+                return (
+                    size.width, size.height,
+                    style.width?.resolve(cellWidth), style.height?.resolve(nil),
+                    style.minWidth?.resolve(cellWidth), style.maxWidth?.resolve(cellWidth),
+                    style.minHeight?.resolve(nil), style.maxHeight?.resolve(nil),
+                    style.marginLeft, style.marginRight, style.marginTop, style.marginBottom,
+                    align == "stretch", alignment
+                )
+            }
+        )
         if place {
+            if let sharedFrames {
+                for (index, child) in children.enumerated() {
+                    let frame = sharedFrames[index]
+                    frames.append((child, CGRect(x: padding.left + frame.x, y: padding.top + frame.y, width: frame.width, height: frame.height)))
+                }
+                return CGSize(width: width, height: innerHeight ?? height)
+            }
             var rowTop = padding.top
             for (index, child) in children.enumerated() {
                 let style = child.craftLayoutStyle
@@ -775,6 +1351,7 @@ private final class CraftNativeModalView: UIView {
     let contentStack = CraftNativeFlowView()
     private let blocker = UIView()
     private var renderedVisible = false
+    private var dismissSuppressedByRequest = false
     private var animationGeneration = 0
     var onRequestClose: (() -> Void)?
 
@@ -796,6 +1373,7 @@ private final class CraftNativeModalView: UIView {
     required init?(coder: NSCoder) { nil }
 
     func setVisible(_ visible: Bool, opacity: CGFloat, animationType: String?) {
+        if visible { isUserInteractionEnabled = true }
         if renderedVisible == visible && isHidden == !visible {
             if visible, alpha != opacity { alpha = opacity }
             return
@@ -850,10 +1428,27 @@ private final class CraftNativeModalView: UIView {
         isHidden = true
         transform = .identity
         alpha = 0
+        isUserInteractionEnabled = true
+        dismissSuppressedByRequest = false
         onRequestClose = nil
     }
 
-    @objc private func blockerTapped() { onRequestClose?() }
+    func requestClose() {
+        guard let onRequestClose else { return }
+        dismissSuppressedByRequest = true
+        isUserInteractionEnabled = false
+        onRequestClose()
+    }
+
+    func consumeDismissSuppression() -> Bool {
+        let suppressed = dismissSuppressedByRequest
+        dismissSuppressedByRequest = false
+        return suppressed
+    }
+
+    func clearDismissSuppression() { dismissSuppressedByRequest = false }
+
+    @objc private func blockerTapped() { requestClose() }
 
     override func layoutSubviews() {
         super.layoutSubviews()
@@ -1194,14 +1789,36 @@ private final class CraftNativeSvgView: UIView {
         }
     }
 
+    /// viewBox units to the view's points, set by each draw.
+    private var viewTransform = CGAffineTransform.identity
+
+    /// viewBox to view: centred at one scale (SVG's default, `xMidYMid meet`),
+    /// or each axis stretched to fill (`preserveAspectRatio="none"`), as a
+    /// chart a page sizes to its width and a fixed height asks for.
+    static func transform(box: CGRect, bounds: CGSize, preserveAspectRatio: String?) -> CGAffineTransform? {
+        var sx = bounds.width / box.width
+        var sy = bounds.height / box.height
+        var dx: CGFloat = 0
+        var dy: CGFloat = 0
+        if preserveAspectRatio?.trimmingCharacters(in: .whitespaces) != "none" {
+            let scale = min(sx, sy)
+            sx = scale
+            sy = scale
+            dx = (bounds.width - box.width * scale) / 2
+            dy = (bounds.height - box.height * scale) / 2
+        }
+        guard sx.isFinite, sy.isFinite, sx > 0, sy > 0 else { return nil }
+        return CGAffineTransform(translationX: dx, y: dy).scaledBy(x: sx, y: sy).translatedBy(x: -box.minX, y: -box.minY)
+    }
+
     override func draw(_ rect: CGRect) {
         guard let context = UIGraphicsGetCurrentContext() else { return }
+        viewTransform = .identity
         if let box = viewBox {
-            let scale = min(bounds.width / box.width, bounds.height / box.height)
-            guard scale.isFinite, scale > 0 else { return }
-            context.translateBy(x: (bounds.width - box.width * scale) / 2, y: (bounds.height - box.height * scale) / 2)
-            context.scaleBy(x: scale, y: scale)
-            context.translateBy(x: -box.minX, y: -box.minY)
+            let props = drawing["props"] as? [String: Any] ?? [:]
+            guard let transform = CraftNativeSvgView.transform(box: box, bounds: bounds.size, preserveAspectRatio: props["preserveAspectRatio"] as? String) else { return }
+            viewTransform = transform
+            context.concatenate(transform)
         }
         draw(children: drawing["children"] as? [Any] ?? [], paint: Paint().merged(drawing), in: context)
     }
@@ -1225,12 +1842,25 @@ private final class CraftNativeSvgView: UIView {
                     path.fill()
                 }
                 if let stroke = own.resolve(own.stroke), own.strokeWidth > 0 {
+                    // `vector-effect="non-scaling-stroke"`: the stroke is in the
+                    // view's points, so a stretched chart's line keeps its width
+                    // and a round cap stays a round dot.
+                    let nonScaling = (shape["props"] as? [String: Any])?["vectorEffect"] as? String == "non-scaling-stroke"
+                    let line: UIBezierPath
+                    if nonScaling, let copy = path.copy() as? UIBezierPath {
+                        copy.apply(viewTransform)
+                        context.concatenate(viewTransform.inverted())
+                        line = copy
+                    }
+                    else {
+                        line = path
+                    }
                     stroke.setStroke()
-                    path.lineWidth = own.strokeWidth
-                    path.lineCapStyle = own.linecap == "round" ? .round : own.linecap == "square" ? .square : .butt
-                    path.lineJoinStyle = own.linejoin == "round" ? .round : own.linejoin == "bevel" ? .bevel : .miter
-                    if let dashes = own.dashes, !dashes.isEmpty { path.setLineDash(dashes, count: dashes.count, phase: 0) }
-                    path.stroke()
+                    line.lineWidth = own.strokeWidth
+                    line.lineCapStyle = own.linecap == "round" ? .round : own.linecap == "square" ? .square : .butt
+                    line.lineJoinStyle = own.linejoin == "round" ? .round : own.linejoin == "bevel" ? .bevel : .miter
+                    if let dashes = own.dashes, !dashes.isEmpty { line.setLineDash(dashes, count: dashes.count, phase: 0) }
+                    line.stroke()
                 }
                 context.restoreGState()
             }
@@ -1532,6 +2162,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     /// A drawing's shapes are not views: a change to one redraws its `Svg`.
     private var svgOwners: [String: String] = [:]
     private let mutationDocument = CraftNativeMutationDocument()
+    private let audio = CraftNativeAudio()
     private let capabilityScope = UUID().uuidString
     private var pendingCapabilityRequests = Set<String>()
     private var pendingCapabilityDeadlines: [String: DispatchWorkItem] = [:]
@@ -1619,6 +2250,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         guard !runtimeDisposed else { return }
         runtimeDisposed = true
         jsContext.objectForKeyedSubscript("__stxNativeUnmount")?.call(withArguments: [])
+        audio.close()
     }
 
     private func refreshTraitDefaults() {
@@ -1902,6 +2534,76 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
                 keep('navigation', {
                     setOptions: function(options) { craftNativeSetOptions(JSON.stringify(options || {})); }
                 });
+                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;
+                }
             })();
         """)
     }
@@ -2331,6 +3033,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             pendingCapabilityRequests.remove(requestToken)
             pendingCapabilityDeadlines.removeValue(forKey: requestToken)?.cancel()
             CraftNativeActions.cancel(requestToken: requestToken)
+        case "AUDIO":
+            audio.handle(payload)
         default:
             break
         }
@@ -2402,7 +3106,12 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             child.removeFromSuperview()
         }
         if next.view.superview !== rootStack { rootStack.addArrangedSubview(next.view) }
-        rootStack.setLayoutStyle(next.style, for: next.view)
+        // A native screen root fills the safe-area viewport unless the bundle
+        // explicitly sizes it. Without this default, an unstyled SafeAreaView
+        // measures to its scroll content and leaves no viewport to scroll.
+        var rootStyle = next.style
+        if rootStyle["flex"] == nil, rootStyle["height"] == nil { rootStyle["flex"] = 1 }
+        rootStack.setLayoutStyle(rootStyle, for: next.view)
         rootStack.invalidateMeasurements()
         renderedRoot = next
         trackContentScrollView()
@@ -2565,7 +3274,16 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         case "Modal":
             let modal = result as! CraftNativeModalView
             modal.transparent = props["transparent"] as? Bool == true
-            let visible = props["visible"] as? Bool == true && style["display"] as? String != "none"
+            let visible: Bool
+            if let propVisible = props["visible"] as? Bool {
+                // 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.
+                visible = propVisible
+            } else {
+                let display = style["display"] as? String
+                visible = display != nil && display != "none"
+            }
             let modalID = ObjectIdentifier(modal)
             let wasVisible = modalVisibility[modalID]
             modalVisibility[modalID] = visible
@@ -2573,9 +3291,11 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             modal.onRequestClose = nonEmptyHandler(events["onRequestClose"]).map { handler in
                 { [weak self] in self?.send(type: "EVENT", payload: ["handlerName": handler, "nativeEvent": [:]]) }
             }
+            if visible { modal.clearDismissSuppression() }
+            let suppressDismiss = !visible && modal.consumeDismissSuppression()
             if wasVisible != visible, visible || wasVisible == true {
                 let lifecycleHandler = visible ? events["onShow"] : events["onDismiss"]
-                if let lifecycleHandler = nonEmptyHandler(lifecycleHandler) {
+                if let lifecycleHandler = nonEmptyHandler(lifecycleHandler), !suppressDismiss {
                     send(type: "EVENT", payload: ["handlerName": lifecycleHandler, "nativeEvent": [:]])
                 }
             }
@@ -2666,6 +3386,18 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             updateAuxiliaryHandler(events["onLoadEnd"], in: &imageLoadEndHandlers, for: image)
             updateAuxiliaryHandler(events["onError"], in: &imageErrorHandlers, for: image)
             updateImage(image, source: props["source"])
+        case "Video":
+            let video = result as! CraftNativeVideoView
+            let autoplay = (props["autoplay"] as? Bool) == true || (props["autoPlay"] as? Bool) == true
+            video.configure(
+                source: props["source"],
+                autoplay: autoplay,
+                paused: (props["paused"] as? Bool) == true,
+                loop: (props["loop"] as? Bool) == true,
+                muted: (props["muted"] as? Bool) == true,
+                controls: (props["controls"] as? Bool) == true,
+                resizeMode: style["resizeMode"] as? String ?? props["resizeMode"] as? String
+            )
         case "ScrollView":
             let scroll = result as! CraftNativeScrollView
             let flexDirection = style["flexDirection"] as? String
@@ -2772,6 +3504,8 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             return UIActivityIndicatorView(style: .medium)
         case "Image":
             return UIImageView()
+        case "Video":
+            return CraftNativeVideoView(host: self)
         case "Icon":
             let icon = CraftNativeIconView()
             icon.contentMode = .scaleAspectFit
@@ -2792,7 +3526,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     }
 
     private func explicitKey(_ node: [String: Any], props: [String: Any]) -> String? {
-        // The current stx native compiler emits key in props; accept the IR
+        // The current @stacksjs/stx native compiler emits key in props; accept the IR
         // field too so keyed children keep working when the compiler adopts it.
         [node["id"], node["key"], props["key"], props["testID"]]
             .compactMap { $0 as? String }
@@ -3015,6 +3749,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
         imageLoadHandlers.removeValue(forKey: id)
         imageLoadEndHandlers.removeValue(forKey: id)
         imageErrorHandlers.removeValue(forKey: id)
+        if let video = node.view as? CraftNativeVideoView { video.stop() }
         for child in node.children { forgetHandlers(child, preservingInputDrafts: preservingInputDrafts) }
     }
 
@@ -3261,6 +3996,7 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
     private func configureStack(_ stack: CraftNativeFlowView, style: [String: Any]) {
         let direction = style["flexDirection"] as? String
         stack.axis = direction == "row" || direction == "row-reverse" ? .horizontal : .vertical
+        stack.reverse = direction?.hasSuffix("-reverse") == true
         stack.wrap = style["flexWrap"] as? String == "wrap" || style["flexWrap"] as? Bool == true
         stack.alignItems = style["alignItems"] as? String ?? "stretch"
         stack.alignContent = style["alignContent"] as? String ?? "flex-start"