@webspatial/platform-visionos 1.7.0 → 2.0.0

package/web-spatial/model/element-motion/SpatializedElementAnimationWriteAdapter.swift

@@ -0,0 +1,65 @@
+import Foundation
+import Spatial
+
+struct SpatializedElementAnimationWriteAdapter {
+    func currentAffineTransform(for element: SpatializedElement) -> AffineTransform3D {
+        element.transform
+    }
+
+    func applyAffine(_ affine: AffineTransform3D, to element: SpatializedElement) {
+        element.transform = affine
+    }
+
+    func baselineOpacity(for element: SpatializedElement) -> Double {
+        element.opacity
+    }
+
+    func applyOpacity(_ opacity: Double, to element: SpatializedElement) {
+        element.opacity = opacity
+    }
+
+    func acquireMask(on element: SpatializedElement, animationId: String, animatesTransform: Bool, animatesOpacity: Bool) -> Bool {
+        guard canAcquireMask(on: element, animationId: animationId, animatesTransform: animatesTransform, animatesOpacity: animatesOpacity) else {
+            return false
+        }
+
+        if animatesTransform {
+            element.animatingMask.acquire(transform: animationId)
+        }
+        if animatesOpacity {
+            element.animatingMask.acquire(opacity: animationId)
+        }
+        return true
+    }
+
+    /// Checks whether all requested animated fields are free or already owned by this animation.
+    private func canAcquireMask(on element: SpatializedElement, animationId: String, animatesTransform: Bool, animatesOpacity: Bool) -> Bool {
+        if animatesTransform,
+           let owner = element.animatingMask.transformAnimationId,
+           owner != animationId
+        {
+            return false
+        }
+
+        if animatesOpacity,
+           let owner = element.animatingMask.opacityAnimationId,
+           owner != animationId
+        {
+            return false
+        }
+
+        return true
+    }
+
+    func releaseMaskAndApplyPending(on element: SpatializedElement, animationId: String) {
+        element.animatingMask.release(animationId: animationId)
+    }
+
+    func shouldAllowTransformWrite(on element: SpatializedElement, animationId: String) -> Bool {
+        element.animatingMask.transformAnimationId == nil || element.animatingMask.transformAnimationId == animationId
+    }
+
+    func shouldAllowOpacityWrite(on element: SpatializedElement, animationId: String) -> Bool {
+        element.animatingMask.opacityAnimationId == nil || element.animatingMask.opacityAnimationId == animationId
+    }
+}

package/web-spatial/model/element-motion/SpatializedElementMotionBridgeTypes.swift

@@ -0,0 +1,43 @@
+import Foundation
+
+// MARK: - Timeline wire types (matches JS SpatializedMotionTimeline)
+
+struct SpatializedMotionKeyframePayload: Decodable {
+    let at: Double
+    let value: Double
+    let timingFunction: String?
+}
+
+struct SpatializedMotionTrackPayload: Decodable {
+    let property: String
+    let keyframes: [SpatializedMotionKeyframePayload]
+    let timingFunction: String?
+}
+
+struct SpatializedMotionTimelinePayload: Decodable {
+    let duration: Double
+    let delay: Double?
+    let playbackRate: Double?
+    let loop: SpatializedMotionLoopConfig?
+    let tracks: [SpatializedMotionTrackPayload]
+}
+
+// MARK: - Event Payloads
+
+/// Payload structure matching the JS-side spatialized motion values.
+struct SpatializedMotionValuesPayload: Encodable {
+    let transform: SpatializedMotionTransformPayload?
+    let opacity: Double?
+}
+
+struct SpatializedMotionTransformPayload: Encodable {
+    let translate: Vec3Payload?
+    let rotate: Vec3Payload?
+    let scale: Vec3Payload?
+}
+
+struct Vec3Payload: Encodable {
+    let x: Double?
+    let y: Double?
+    let z: Double?
+}

package/web-spatial/model/element-motion/SpatializedElementMotionTimelineSampler.swift

@@ -0,0 +1,99 @@
+import Foundation
+
+// MARK: - Timeline sampler (parity with Web evaluateMotionTimeline)
+
+/// Per-track timeline sampling for native spatialized element motion.
+final class SpatializedElementMotionTimelineSampler {
+    let duration: Double
+    private let tracks: [SpatializedMotionTrackPayload]
+    private let baselineTransform: SpatializedMotionTransformComponents
+    private let baselineOpacity: Double
+
+    private(set) var animatesTransform = false
+    private(set) var animatesOpacity = false
+
+    init(timeline: SpatializedMotionTimelinePayload, baselineTransform: SpatializedMotionTransformComponents, baselineOpacity: Double) {
+        duration = timeline.duration
+        tracks = timeline.tracks
+        self.baselineTransform = baselineTransform
+        self.baselineOpacity = baselineOpacity
+        for track in tracks {
+            if track.property == "opacity" {
+                animatesOpacity = true
+            }
+            if track.property.hasPrefix("transform.") {
+                animatesTransform = true
+            }
+        }
+    }
+
+    func sampleTransformAndOpacity(at timeSec: Double) -> (transform: SpatializedMotionTransformComponents, opacity: Double) {
+        let t = min(max(timeSec, 0), duration)
+        var transform = baselineTransform
+        var opacity = baselineOpacity
+
+        for track in tracks {
+            let value = sampleTrack(track, at: t)
+            applyScalar(property: track.property, value: value, transform: &transform, opacity: &opacity)
+        }
+
+        return (transform, opacity)
+    }
+
+    private func sampleTrack(_ track: SpatializedMotionTrackPayload, at timeSec: Double) -> Double {
+        let frames = track.keyframes.sorted { $0.at < $1.at }
+        guard let first = frames.first else { return 0 }
+        guard let last = frames.last else { return 0 }
+
+        if timeSec <= first.at { return first.value }
+        if timeSec >= last.at { return last.value }
+
+        for i in 0 ..< (frames.count - 1) {
+            let a = frames[i]
+            let b = frames[i + 1]
+            if timeSec >= a.at, timeSec <= b.at {
+                let span = b.at - a.at
+                if span <= 0 { return b.value }
+                let linear = (timeSec - a.at) / span
+                let eased = SpatializedMotionTimingFunction
+                    .from(name: a.timingFunction ?? track.timingFunction ?? "linear")
+                    .evaluate(linear)
+                return a.value + (b.value - a.value) * eased
+            }
+        }
+
+        return last.value
+    }
+
+    private func applyScalar(
+        property: String,
+        value: Double,
+        transform: inout SpatializedMotionTransformComponents,
+        opacity: inout Double
+    ) {
+        switch property {
+        case "opacity":
+            opacity = value
+        case "transform.translate.x":
+            transform.translateX = value
+        case "transform.translate.y":
+            transform.translateY = value
+        case "transform.translate.z":
+            transform.translateZ = value
+        case "transform.rotate.x":
+            transform.rotateX = value
+        case "transform.rotate.y":
+            transform.rotateY = value
+        case "transform.rotate.z":
+            transform.rotateZ = value
+        case "transform.scale.x":
+            transform.scaleX = value
+        case "transform.scale.y":
+            transform.scaleY = value
+        case "transform.scale.z":
+            transform.scaleZ = value
+        default:
+            break
+        }
+    }
+}

package/web-spatial/model/element-motion/SpatializedElementMotionTiming.swift

@@ -0,0 +1,99 @@
+import Foundation
+
+// MARK: - Loop Configuration
+
+/// Loop configuration decoded from JS bridge.
+/// Supports: true (reset loop), { reverse: true } (reverse loop), false/nil (play once).
+enum SpatializedMotionLoopConfig: Decodable {
+    case none
+    case resetLoop
+    case reverseLoop
+
+    init(from decoder: Decoder) throws {
+        let container = try decoder.singleValueContainer()
+
+        // Try bool first
+        if let boolVal = try? container.decode(Bool.self) {
+            self = boolVal ? .resetLoop : .none
+            return
+        }
+
+        // Try object { reverse?: Bool }
+        struct LoopObject: Decodable {
+            let reverse: Bool?
+        }
+        if let obj = try? container.decode(LoopObject.self) {
+            self = (obj.reverse == true) ? .reverseLoop : .resetLoop
+            return
+        }
+
+        self = .none
+    }
+}
+
+// MARK: - Timing Functions
+
+/// Cubic bezier timing functions for manual frame interpolation.
+enum SpatializedMotionTimingFunction {
+    case linear
+    case easeIn
+    case easeOut
+    case easeInOut
+
+    /// Evaluate the timing function at progress t (0...1) -> output (0...1)
+    func evaluate(_ t: Double) -> Double {
+        switch self {
+        case .linear:
+            return t
+        case .easeIn:
+            // cubic-bezier(0.42, 0, 1, 1)
+            return cubicBezier(t, x1: 0.42, y1: 0.0, x2: 1.0, y2: 1.0)
+        case .easeOut:
+            // cubic-bezier(0, 0, 0.58, 1)
+            return cubicBezier(t, x1: 0.0, y1: 0.0, x2: 0.58, y2: 1.0)
+        case .easeInOut:
+            // cubic-bezier(0.42, 0, 0.58, 1)
+            return cubicBezier(t, x1: 0.42, y1: 0.0, x2: 0.58, y2: 1.0)
+        }
+    }
+
+    /// Solve cubic bezier curve for Y given input T (time fraction).
+    private func cubicBezier(_ t: Double, x1: Double, y1: Double, x2: Double, y2: Double) -> Double {
+        if x1 == 0 && y1 == 0 && x2 == 1 && y2 == 1 {
+            return t
+        }
+
+        // Newton-Raphson to solve for bezier parameter given x = t
+        var guessT = t
+        for _ in 0 ..< 8 {
+            let currentX = sampleCurveX(guessT, x1: x1, x2: x2)
+            let derivative = sampleCurveDerivativeX(guessT, x1: x1, x2: x2)
+            if abs(derivative) < 1e-6 { break }
+            guessT -= (currentX - t) / derivative
+        }
+        guessT = max(0.0, min(1.0, guessT))
+        return sampleCurveY(guessT, y1: y1, y2: y2)
+    }
+
+    private func sampleCurveX(_ t: Double, x1: Double, x2: Double) -> Double {
+        return ((1.0 - 3.0 * x2 + 3.0 * x1) * t + (3.0 * x2 - 6.0 * x1)) * t * t + 3.0 * x1 * t
+    }
+
+    private func sampleCurveY(_ t: Double, y1: Double, y2: Double) -> Double {
+        return ((1.0 - 3.0 * y2 + 3.0 * y1) * t + (3.0 * y2 - 6.0 * y1)) * t * t + 3.0 * y1 * t
+    }
+
+    private func sampleCurveDerivativeX(_ t: Double, x1: Double, x2: Double) -> Double {
+        return (3.0 * (1.0 - 3.0 * x2 + 3.0 * x1) * t + 2.0 * (3.0 * x2 - 6.0 * x1)) * t + 3.0 * x1
+    }
+
+    static func from(name: String) -> SpatializedMotionTimingFunction {
+        switch name {
+        case "linear": return .linear
+        case "easeIn": return .easeIn
+        case "easeOut": return .easeOut
+        case "easeInOut": return .easeInOut
+        default: return .easeInOut
+        }
+    }
+}

package/web-spatial/model/element-motion/SpatializedElementMotionTransformTypes.swift

@@ -0,0 +1,22 @@
+import Foundation
+
+// MARK: - Transform Components
+
+/// Fully resolved transform components used for interpolation and composition.
+struct SpatializedMotionTransformComponents {
+    var translateX: Double
+    var translateY: Double
+    var translateZ: Double
+    var rotateX: Double // degrees
+    var rotateY: Double // degrees
+    var rotateZ: Double // degrees
+    var scaleX: Double
+    var scaleY: Double
+    var scaleZ: Double
+
+    static let identity = SpatializedMotionTransformComponents(
+        translateX: 0, translateY: 0, translateZ: 0,
+        rotateX: 0, rotateY: 0, rotateZ: 0,
+        scaleX: 1, scaleY: 1, scaleZ: 1
+    )
+}

package/web-spatial/protocol/SpatializedElementContainer.swift

@@ -4,5 +4,5 @@ protocol SpatializedElementContainer {
     func addChild(_ spatializedElement: SpatializedElement)
     func removeChild(_ spatializedElement: SpatializedElement)
     func getChildren() -> [String: SpatializedElement]
-    func getChildrenOfType(_ type: SpatializedElementType) -> [String: SpatializedElement]
+    func getChildren<T: SpatializedElement>(ofType type: T.Type) -> [T]
 }

package/web-spatial/view/SpatialNavView.swift

@@ -76,13 +76,11 @@ struct SpatialNavView: View {
     @State private var showEnter: Double = 1
     @State private var showNav: Double = 0
     @State private var showUrl: Double = 0
+    @State private var canGoBack = false
+    @State private var canGoForward = false
+    @State private var navigationStateListenerID: UUID?
     @Namespace var hoverNamespace
 
-    func checkButtonState() {
-        canGoBack = model!.getController().webview!.canGoBack
-        canGoForward = model!.getController().webview!.canGoForward
-    }
-
     func goBack() {
         spatialScene.resetForNavigation()
         model?.getController().webview?.goBack()
@@ -107,9 +105,30 @@ struct SpatialNavView: View {
         return model?.getController().webview?.url
     }
 
-    @State var canGoBack: Bool = false
+    func checkButtonState() {
+        canGoBack = model?.getController().webview?.canGoBack ?? false
+        canGoForward = model?.getController().webview?.canGoForward ?? false
+    }
+
+    func registerNavigationStateListener() {
+        guard navigationStateListenerID == nil else { return }
 
-    @State var canGoForward: Bool = false
+        let listener: (SpatialWebViewState) -> Void = { state in
+            guard case .didUpdateNavigationState = state else { return }
+            Task { @MainActor in
+                self.checkButtonState()
+            }
+        }
+
+        navigationStateListenerID = model?.addStateListener(listener)
+    }
+
+    func unregisterNavigationStateListener() {
+        guard let navigationStateListenerID else { return }
+
+        model?.removeStateListener(navigationStateListenerID)
+        self.navigationStateListenerID = nil
+    }
 
     var navHoverGroup: HoverEffectGroup {
         HoverEffectGroup(hoverNamespace)
@@ -128,6 +147,7 @@ struct SpatialNavView: View {
                             children: Image("arrow_left"),
                             clearBackGround: true
                         )
+                        .opacity(self.canGoBack ? 1 : 0.5)
                         .disabled(!(self.canGoBack))
                         NavButton(
                             action: { self.goForward()
@@ -135,7 +155,8 @@ struct SpatialNavView: View {
                             children: Image("arrow_right"),
                             clearBackGround: true
                         )
-                        .disabled(!(self.canGoBack))
+                        .opacity(self.canGoForward ? 1 : 0.5)
+                        .disabled(!(self.canGoForward))
                         NavButton(action: { self.reload() }, children: Image("refresh"), clearBackGround: true)
                         NavDivider()
                     }
@@ -160,13 +181,15 @@ struct SpatialNavView: View {
                         },
                         children: Image("arrow_left")
                     )
+                    .opacity(self.canGoBack ? 1 : 0.5)
                     .disabled(!(self.canGoBack))
                     NavButton(
                         action: { self.goForward()
                         },
                         children: Image("arrow_right")
                     )
-                    .disabled(!(self.canGoBack))
+                    .opacity(self.canGoForward ? 1 : 0.5)
+                    .disabled(!(self.canGoForward))
                     NavButton(action: { self.reload() }, children: Image("refresh"))
                     NavDivider()
                 }
@@ -238,9 +261,11 @@ struct SpatialNavView: View {
             .opacity(showUrl)
         }
         .onAppear {
-            model?.addStateListener(.didFinishLoad) {
-                self.checkButtonState()
-            }
+            checkButtonState()
+            registerNavigationStateListener()
+        }
+        .onDisappear {
+            unregisterNavigationStateListener()
         }
     }
 

package/web-spatial/view/SpatialSceneContentView.swift

@@ -32,31 +32,28 @@ struct SpatialSceneContentView: View {
                         .frame(width: width, height: height)
                         .offset(z: -1)
 
-                    let childrenOfSpatialized2DElement: [SpatializedElement] = Array(spatialScene.getChildrenOfType(.Spatialized2DElement).values)
+                    let childrenOfSpatialized2DElement = spatialScene.getChildren(ofType: Spatialized2DElement.self)
 
                     ForEach(childrenOfSpatialized2DElement, id: \.id) { child in
-                        SpatializedElementView(parentScrollOffset: spatialScene.scrollOffset) {
-                            Spatialized2DElementView()
+                        SpatializedElementView(parentScrollOffset: spatialScene.scrollOffset, spatializedElement: child) {
+                            Spatialized2DElementView(spatialized2DElement: child)
                         }
-                        .environment(child)
                     }
 
-                    let childrenOfSpatializedStatic3DElement: [SpatializedElement] = Array(spatialScene.getChildrenOfType(.SpatializedStatic3DElement).values)
+                    let childrenOfSpatializedStatic3DElement = spatialScene.getChildren(ofType: SpatializedStatic3DElement.self)
 
                     ForEach(childrenOfSpatializedStatic3DElement, id: \.id) { child in
-                        SpatializedElementView(parentScrollOffset: spatialScene.scrollOffset) {
-                            SpatializedStatic3DView()
+                        SpatializedElementView(parentScrollOffset: spatialScene.scrollOffset, spatializedElement: child) {
+                            SpatializedStatic3DView(spatializedStatic3DElement: child)
                         }
-                        .environment(child)
                     }
 
-                    let childrenOfSpatializedDynamic3DElement: [SpatializedElement] = Array(spatialScene.getChildrenOfType(.SpatializedDynamic3DElement).values)
+                    let childrenOfSpatializedDynamic3DElement = spatialScene.getChildren(ofType: SpatializedDynamic3DElement.self)
 
                     ForEach(childrenOfSpatializedDynamic3DElement, id: \.id) { child in
-                        SpatializedElementView(parentScrollOffset: spatialScene.scrollOffset) {
-                            SpatializedDynamic3DView()
+                        SpatializedElementView(parentScrollOffset: spatialScene.scrollOffset, spatializedElement: child) {
+                            SpatializedDynamic3DView(spatializedDynamic3DElement: child)
                         }
-                        .environment(child)
                     }
                 }
             }

package/web-spatial/view/Spatialized2DElementView.swift

@@ -19,13 +19,9 @@ class Spatialized2DViewGestureData {
 }
 
 struct Spatialized2DElementView: View {
-    @Environment(SpatializedElement.self) var spatializedElement: SpatializedElement
+    let spatialized2DElement: Spatialized2DElement
     @Environment(SpatialScene.self) var spatialScene: SpatialScene
 
-    private var spatialized2DElement: Spatialized2DElement {
-        return spatializedElement as! Spatialized2DElement
-    }
-
     @State private var gestureData = Spatialized2DViewGestureData()
 
     var body: some View {
@@ -40,30 +36,27 @@ struct Spatialized2DElementView: View {
                 )
                 .simultaneousGesture(spatialized2DElement.scrollPageEnabled ? dragWebGesture : nil)
 
-            let childrenOfSpatialized2DElement: [SpatializedElement] = Array(spatialized2DElement.getChildrenOfType(.Spatialized2DElement).values)
+            let childrenOfSpatialized2DElement = spatialized2DElement.getChildren(ofType: Spatialized2DElement.self)
 
             ForEach(childrenOfSpatialized2DElement, id: \.id) { child in
-                SpatializedElementView(parentScrollOffset: spatialized2DElement.scrollOffset) {
-                    Spatialized2DElementView()
+                SpatializedElementView(parentScrollOffset: spatialized2DElement.scrollOffset, spatializedElement: child) {
+                    Spatialized2DElementView(spatialized2DElement: child)
                 }
-                .environment(child)
             }
 
-            let childrenOfSpatializedStatic3DElement: [SpatializedElement] = Array(spatialized2DElement.getChildrenOfType(.SpatializedStatic3DElement).values)
+            let childrenOfSpatializedStatic3DElement = spatialized2DElement.getChildren(ofType: SpatializedStatic3DElement.self)
             ForEach(childrenOfSpatializedStatic3DElement, id: \.id) { child in
-                SpatializedElementView(parentScrollOffset: spatialized2DElement.scrollOffset) {
-                    SpatializedStatic3DView()
+                SpatializedElementView(parentScrollOffset: spatialized2DElement.scrollOffset, spatializedElement: child) {
+                    SpatializedStatic3DView(spatializedStatic3DElement: child)
                 }
-                .environment(child)
             }
 
-            let childrenOfSpatializedDynamic3DElement: [SpatializedElement] = Array(spatialized2DElement.getChildrenOfType(.SpatializedDynamic3DElement).values)
+            let childrenOfSpatializedDynamic3DElement = spatialized2DElement.getChildren(ofType: SpatializedDynamic3DElement.self)
 
             ForEach(childrenOfSpatializedDynamic3DElement, id: \.id) { child in
-                SpatializedElementView(parentScrollOffset: spatialized2DElement.scrollOffset) {
-                    SpatializedDynamic3DView()
+                SpatializedElementView(parentScrollOffset: spatialized2DElement.scrollOffset, spatializedElement: child) {
+                    SpatializedDynamic3DView(spatializedDynamic3DElement: child)
                 }
-                .environment(child)
             }
         }
     }

package/web-spatial/view/SpatializedDynamic3DView.swift

@@ -2,16 +2,12 @@ import RealityKit
 import SwiftUI
 
 struct SpatializedDynamic3DView: View {
-    @Environment(SpatializedElement.self) var spatializedElement: SpatializedElement
+    let spatializedDynamic3DElement: SpatializedDynamic3DElement
     @Environment(SpatialScene.self) var spatialScene: SpatialScene
     @State private var isDrag = false
     @State private var isRotate = false
     @State private var isScale = false
 
-    private var spatializedDynamic3DElement: SpatializedDynamic3DElement {
-        return spatializedElement as! SpatializedDynamic3DElement
-    }
-
     var spatialTapEvent: some Gesture {
         SpatialTapGesture(count: 1).targetedToAnyEntity()
             .onEnded { value in
@@ -63,7 +59,7 @@ struct SpatializedDynamic3DView: View {
     }
 
     private func makeRotateGesture3D() -> RotateGesture3D {
-        guard let raw = spatializedElement.rotateConstrainedToAxis else {
+        guard let raw = spatializedDynamic3DElement.rotateConstrainedToAxis else {
             return RotateGesture3D()
         }
         let dx = Double(raw.x)

package/web-spatial/view/SpatializedElementView.swift

@@ -7,7 +7,7 @@ final class GestureState {
 }
 
 struct SpatializedElementView<Content: View>: View {
-    @Environment(SpatializedElement.self) var spatializedElement: SpatializedElement
+    let spatializedElement: SpatializedElement
     @Environment(SpatialScene.self) var spatialScene: SpatialScene
 
     var parentScrollOffset: Vec2
@@ -15,8 +15,9 @@ struct SpatializedElementView<Content: View>: View {
 
     @State private var gestureState = GestureState()
 
-    init(parentScrollOffset: Vec2, @ViewBuilder content: () -> Content) {
+    init(parentScrollOffset: Vec2, spatializedElement: SpatializedElement, @ViewBuilder content: () -> Content) {
         self.parentScrollOffset = parentScrollOffset
+        self.spatializedElement = spatializedElement
         self.content = content()
     }