@webspatial/platform-visionos 0.1.22 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webspatial/platform-visionos",
-  "version": "0.1.22",
+  "version": "1.0.0",
   "description": "Used to publish WebSpatial projects to Apple Vision Pro",
   "type": "commonjs",
   "engines": {

package/web-spatial/Assets.xcassets/AppIcon.solidimagestack/Back.solidimagestacklayer/Content.imageset/Contents.json

@@ -1,6 +1,7 @@
 {
   "images": [
     {
+      "filename": "icon-default.png",
       "idiom": "vision",
       "scale": "2x"
     }

package/web-spatial/Assets.xcassets/AppIcon.solidimagestack/Middle.solidimagestacklayer/Content.imageset/Contents.json

@@ -1,6 +1,7 @@
 {
   "images": [
     {
+      "filename": "icon.png",
       "idiom": "vision",
       "scale": "2x"
     }

package/web-spatial/Assets.xcassets/arrow_left.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "arrow_left.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/arrow_right.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "arrow_right.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/back.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "back.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/browser.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "browser.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/close.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "close.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/copy.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "copy.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/home.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "home.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/link.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "link.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/logo.imageset/Contents.json

@@ -1,6 +1,7 @@
 {
   "images": [
     {
+      "filename": "icon-default.png",
       "idiom": "universal",
       "scale": "1x"
     },

package/web-spatial/Assets.xcassets/more.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "more.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/Assets.xcassets/refresh.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "filename": "refresh.png",
+      "idiom": "universal",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/web-spatial/libs/Utils/ColorExtension.swift

@@ -0,0 +1,32 @@
+import SwiftUI
+
+extension Color {
+    init(hex: String) {
+        let hex = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+            .replacingOccurrences(of: "#", with: "")
+
+        guard hex.count == 6 || hex.count == 8 else {
+            self.init(.sRGB, red: 0, green: 0, blue: 0, opacity: 1)
+            return
+        }
+
+        let scanner = Scanner(string: hex)
+        var hexNumber: UInt64 = 0
+        scanner.scanHexInt64(&hexNumber)
+
+        let r, g, b, a: Double
+        if hex.count == 8 {
+            r = Double((hexNumber & 0xFF00_0000) >> 24) / 255
+            g = Double((hexNumber & 0x00FF_0000) >> 16) / 255
+            b = Double((hexNumber & 0x0000_FF00) >> 8) / 255
+            a = Double(hexNumber & 0x0000_00FF) / 255
+        } else {
+            a = 1.0
+            r = Double((hexNumber & 0xFF0000) >> 16) / 255
+            g = Double((hexNumber & 0x00FF00) >> 8) / 255
+            b = Double(hexNumber & 0x0000FF) / 255
+        }
+
+        self.init(.sRGB, red: r, green: g, blue: b, opacity: a)
+    }
+}

package/web-spatial/libs/Utils/CommandManager.swift

@@ -617,6 +617,7 @@ class CommandManager {
             // Update scene state
             var cfg = WindowContainerPlainDefaultValues()
             cfg.defaultSize = CGSize(width: resolution.width, height: resolution.height)
+            // TODO: need set resizeRange?
             WindowContainerMgr.Instance.updateWindowContainerPlainDefaultValues(cfg)
             return
         }

package/web-spatial/libs/Utils/WindowContainerMgr.swift

@@ -16,6 +16,10 @@ struct WindowContainerData: Decodable, Hashable, Encodable {
     let windowContainerID: String
 }
 
+struct WindowContainerResizability: Decodable, Encodable {
+    let resizeRange: ResizeRange?
+}
+
 enum LoadingMethod: String, Decodable, Encodable, Hashable {
     case show
     case hide
@@ -29,6 +33,7 @@ struct LoadingWindowContainerData: Decodable, Hashable, Encodable {
 struct WindowContainerPlainDefaultValues {
     var defaultSize: CGSize?
     var windowResizability: WindowResizability?
+    var resizeRange: ResizeRange?
 }
 
 // support WindowContainerOptions => WindowContainerPlainDefaultValues
@@ -38,19 +43,28 @@ extension WindowContainerPlainDefaultValues {
             width: options.defaultSize?.width ?? DefaultPlainWindowContainerSize.width,
             height: options.defaultSize?.height ?? DefaultPlainWindowContainerSize.height
         )
-        windowResizability = getWindowResizability(options.resizability)
+        windowResizability = getWindowResizability(nil)
+        resizeRange = options.resizability
     }
 }
 
+struct ResizeRange: Codable {
+    var minWidth: Double?
+    var minHeight: Double?
+    var maxWidth: Double?
+    var maxHeight: Double?
+}
+
 // incomming JSB data
 struct WindowContainerOptions: Codable {
     // windowContainer
     let defaultSize: Size?
-    let resizability: String?
     struct Size: Codable {
         var width: Double
         var height: Double
     }
+
+    let resizability: ResizeRange?
 }
 
 func getWindowResizability(_ windowResizability: String?) -> WindowResizability {
@@ -79,7 +93,8 @@ class WindowContainerMgr: ObservableObject {
 
     private var wgSetting: WindowContainerPlainDefaultValues = .init(
         defaultSize: CGSize(width: 1080, height: 720 + (pwaManager.display != .fullscreen ? NavView.navHeight : 0)),
-        windowResizability: .automatic
+        windowResizability: .automatic,
+        resizeRange: nil
     )
 
     func getValue() -> WindowContainerPlainDefaultValues {
@@ -100,5 +115,8 @@ class WindowContainerMgr: ObservableObject {
         if let newResizability = data.windowResizability {
             wgSetting.windowResizability = newResizability
         }
+        if let newResizeRange = data.resizeRange {
+            wgSetting.resizeRange = newResizeRange
+        }
     }
 }

package/web-spatial/libs/webView/backend/NativeWebView.swift

@@ -125,7 +125,6 @@ class Coordinator: NSObject, WKNavigationDelegate, WKScriptMessageHandler, WKUID
                 // backward/forward
                 webViewRef?.didNavBackForward()
             }
-            webViewRef?.navInfo.url = resource
             decisionHandler(.allow)
         } else {
             decisionHandler(.cancel)
@@ -211,6 +210,34 @@ class Coordinator: NSObject, WKNavigationDelegate, WKScriptMessageHandler, WKUID
             wg.updateFrame = !(wg.updateFrame)
         }
     }
+
+    private var isObserving = false
+    func startObserving(webView: WKWebView) {
+        guard !isObserving else { return }
+        webView.addObserver(self, forKeyPath: #keyPath(WKWebView.url), options: .new, context: nil)
+        isObserving = true
+    }
+
+    func stopObserving(webView: WKWebView) {
+        guard isObserving else { return }
+        webView.removeObserver(self, forKeyPath: #keyPath(WKWebView.url))
+        isObserving = false
+    }
+
+    override func observeValue(
+        forKeyPath keyPath: String?,
+        of object: Any?,
+        change: [NSKeyValueChangeKey: Any]?,
+        context: UnsafeMutableRawPointer?
+    ) {
+        if keyPath == #keyPath(WKWebView.url),
+           let url = (object as? WKWebView)?.url?.absoluteString
+        {
+            DispatchQueue.main.async {
+                self.webViewRef?.navInfo.url = url
+            }
+        }
+    }
 }
 
 struct WebViewNative: UIViewRepresentable {
@@ -250,6 +277,7 @@ struct WebViewNative: UIViewRepresentable {
                 myConfig.setURLSchemeHandler(webViewHolder.webViewCoordinator, forURLScheme: "file")
             }
             webViewHolder.appleWebView = WKWebView(frame: .zero, configuration: myConfig)
+            webViewHolder.webViewCoordinator!.startObserving(webView: webViewHolder.appleWebView!)
             let configUA = myConfig.applicationNameForUserAgent as? String ?? ""
 
             // change webview ua
@@ -284,6 +312,10 @@ struct WebViewNative: UIViewRepresentable {
     func updateUIView(_ webView: WKWebView, context: Context) {
         initialLoad()
     }
+
+    static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
+        coordinator.stopObserving(webView: uiView)
+    }
 }
 
 // extend webview to support file://

package/web-spatial/libs/webView/manifest.swift

@@ -21,7 +21,7 @@ struct PWAManager: Codable {
             width: 1280,
             height: 720
         ),
-        resizability: "automatic"
+        resizability: nil
     )
     var useMainScene: Bool = true
     private var version: String = "PACKAGE_VERSION"

package/web-spatial/views/LoadingView.swift

@@ -1,5 +1,4 @@
 import SwiftUI
-import SwiftUICore
 
 struct LoadingView: View {
     var body: some View {

package/web-spatial/views/PlainWindowContainerView.swift

@@ -9,7 +9,38 @@ struct PlainWindowContainerView: View {
     @State private var timer: Timer?
 
     private func setSize(size: CGSize) {
-        sceneDelegate.window?.windowScene?.requestGeometryUpdate(.Vision(size: size))
+        sceneDelegate.window?.windowScene?
+            .requestGeometryUpdate(
+                .Vision(
+                    size: size
+                )
+            )
+    }
+
+    private func setResizibility(resizingRestrictions: UIWindowScene.ResizingRestrictions) {
+        sceneDelegate.window?.windowScene?
+            .requestGeometryUpdate(
+                .Vision(
+                    resizingRestrictions: resizingRestrictions
+                )
+            )
+    }
+
+    private func setResizeRange(resizeRange: ResizeRange) {
+        sceneDelegate.window?.windowScene?
+            .requestGeometryUpdate(
+                .Vision(
+                    minimumSize: CGSize(
+                        width: resizeRange.minWidth ?? 0,
+                        height: resizeRange
+                            .minHeight ?? 0
+                    ),
+                    maximumSize: CGSize(
+                        width: resizeRange.maxWidth ?? .infinity,
+                        height: resizeRange.maxHeight ?? .infinity
+                    )
+                )
+            )
     }
 
     var body: some View {
@@ -39,7 +70,6 @@ struct PlainWindowContainerView: View {
                         // Avoid showing webview until its loading completes
                         let wc = e.getComponent(SpatialWindowComponent.self)
                         let didFinishFirstLoad = wc != nil ? wc!.didFinishFirstLoad : false
-
                         SpatialWebViewUI().environment(e)
                             .frame(width: width, height: height).padding3D(.front, -100_000)
                             .rotation3DEffect(Rotation3D(simd_quatf(ix: e.modelEntity.orientation.vector.x, iy: e.modelEntity.orientation.vector.y, iz: e.modelEntity.orientation.vector.z, r: e.modelEntity.orientation.vector.w)))
@@ -47,12 +77,30 @@ struct PlainWindowContainerView: View {
                             .offset(z: z)
                             .opacity(didFinishFirstLoad ? 1.0 : 0.0)
                             .animation(.linear(duration: 0.2), value: didFinishFirstLoad)
+                            .ornament(attachmentAnchor: .scene(.top), contentAlignment: .center) {
+                                if pwaManager.display != .fullscreen {
+                                    ZStack {
+                                        NavView(swc: wc, navInfo: wc!.navInfo).offset(y: -15)
+                                    }.frame(height: 100)
+                                }
+                            }
                     }
                 }
             }
             .onReceive(windowContainerContent.setSize) { newSize in
                 setSize(size: newSize)
             }
+            .onAppear {
+                let wd = WindowContainerMgr.Instance.getValue()
+                if let range = wd.resizeRange {
+                    self.setResizeRange(resizeRange: range)
+                    if (range.minWidth != nil || range.minWidth != nil) && range.minWidth == range.maxWidth && range.minHeight == range.maxHeight {
+                        self.setResizibility(resizingRestrictions: .none)
+                    } else {
+                        self.setResizibility(resizingRestrictions: .freeform)
+                    }
+                }
+            }
             .onChange(of: proxy3D.size) {
                 // WkWebview has an issue where it doesn't resize while the swift window is resized
                 // Treid to call didMoveToWindow to force redraw to occur but that seemed to cause rendering artifacts so that solution was rejected

package/web-spatial/views/SpatialWebViewUI.swift

@@ -28,115 +28,33 @@ struct SpatialWebViewUI: View {
             let parentYOffset = Float(wv.scrollOffset.y)
 
             let childEntities = ent.getEntities()
-            VStack(spacing: 0) {
-                if wv.isRootWebview() && pwaManager.display != .fullscreen {
-                    NavView(swc: wv, navInfo: wv.navInfo)
-                    Spacer()
-                }
-                // Display child entities of the webview
-                ZStack {
-                    OptionalClip(clipEnabled: ent.coordinateSpace != .ROOT && wv.isScrollEnabled()) {
-                        ZStack {
-                            ForEach(Array(childEntities.keys), id: \.self) { key in
-                                if let e = childEntities[key] {
-                                    let _ = e.forceUpdate ? 0 : 0
-                                    if let childWindowcomponent = e.getComponent(SpatialWindowComponent.self) {
-                                        if e.coordinateSpace == .DOM {
-                                            let view = childWindowcomponent
-                                            let x = CGFloat(e.modelEntity.position.x)
-                                            let y = CGFloat(e.modelEntity.position.y - (view.scrollWithParent ? parentYOffset : 0))
-                                            let z = CGFloat(e.modelEntity.position.z) + (e.zIndex * zOrderBias)
-                                            let width = CGFloat(view.resolutionX)
-                                            let height = CGFloat(view.resolutionY)
-                                            let anchor = view.rotationAnchor
-
-                                            // Matrix = MTranslate X MRotate X MScale
-                                            SpatialWebViewUI().environment(e)
-                                                .frame(width: width, height: height)
-                                                // use .offset(smallVal) to workaround for glassEffect not working and small width/height spatialDiv not working
-                                                .offset(z: 0.0001)
-                                                .scaleEffect(
-                                                    x: CGFloat(e.modelEntity.scale.x),
-                                                    y: CGFloat(e.modelEntity.scale.y),
-                                                    z: CGFloat(e.modelEntity.scale.z),
-                                                    anchor: anchor
-                                                )
-                                                .rotation3DEffect(
-                                                    Rotation3D(simd_quatf(
-                                                        ix: e.modelEntity.orientation.vector.x,
-                                                        iy: e.modelEntity.orientation.vector.y,
-                                                        iz: e.modelEntity.orientation.vector.z,
-                                                        r: e.modelEntity.orientation.vector.w
-                                                    )),
-                                                    anchor: anchor
-                                                )
-
-                                                .position(x: x, y: y)
-                                                .offset(z: z)
-                                                .gesture(
-                                                    DragGesture()
-                                                        .onChanged { gesture in
-                                                            let scrollEnabled = view.isScrollEnabled()
-                                                            if !scrollEnabled {
-                                                                // Check if there is a nearest scroll-enabled SpatialWindowComponent in the current SpatialEntity
-                                                                // and scroll it if it exists
-                                                                if let targetScrollWV = wv.findNearestScrollEnabledSpatialWindowComponent() {
-                                                                    if !view.dragStarted {
-                                                                        view.dragStarted = true
-                                                                        view.dragStart = (gesture.translation.height)
-                                                                    }
-
-                                                                    // TODO: this should have velocity
-                                                                    let delta = view.dragStart - gesture.translation.height
-                                                                    view.dragStart = gesture.translation.height
-                                                                    targetScrollWV.updateScrollOffset(delta: delta)
-                                                                }
-                                                            }
-                                                        }
-                                                        .onEnded { _ in
-                                                            let scrollEnabled = view.isScrollEnabled()
-
-                                                            if !scrollEnabled {
-                                                                if let targetScrollWV = wv.findNearestScrollEnabledSpatialWindowComponent() {
-                                                                    view.dragStarted = false
-                                                                    view.dragStart = 0
-
-                                                                    targetScrollWV.stopScrolling()
-                                                                }
-                                                            }
-                                                        }
-                                                )
-                                        }
-                                    }
-                                }
-                            }
-
-                            // Model3D content
-                            ForEach(Array(childEntities.keys), id: \.self) { key in
-                                if let e = childEntities[key] {
-                                    let _ = e.forceUpdate ? 0 : 0
-                                    SpatialModel3DView(parentYOffset: parentYOffset)
-                                        .environment(e)
-                                }
-                            }
-
-                            // SpatialView content
-                            ForEach(Array(childEntities.keys), id: \.self) { key in
-                                if let e = childEntities[key] {
+            // Display child entities of the webview
+            ZStack {
+                OptionalClip(clipEnabled: ent.coordinateSpace != .ROOT && wv.isScrollEnabled()) {
+                    ZStack {
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                let _ = e.forceUpdate ? 0 : 0
+                                if let childWindowcomponent = e.getComponent(SpatialWindowComponent.self) {
                                     if e.coordinateSpace == .DOM {
-                                        if let viewComponent = e.getComponent(SpatialViewComponent.self) {
-                                            let _ = e.forceUpdate ? 0 : 0
-                                            let x = CGFloat(e.modelEntity.position.x)
-                                            let y = CGFloat(e.modelEntity.position.y - parentYOffset)
-                                            let z = CGFloat(e.modelEntity.position.z)
-
-                                            let width = CGFloat(viewComponent.resolutionX)
-                                            let height = CGFloat(viewComponent.resolutionY)
-
-                                            SpatialViewUI().environment(e).frame(width: width, height: height).scaleEffect(
+                                        let view = childWindowcomponent
+                                        let x = CGFloat(e.modelEntity.position.x)
+                                        let y = CGFloat(e.modelEntity.position.y - (view.scrollWithParent ? parentYOffset : 0))
+                                        let z = CGFloat(e.modelEntity.position.z) + (e.zIndex * zOrderBias)
+                                        let width = CGFloat(view.resolutionX)
+                                        let height = CGFloat(view.resolutionY)
+                                        let anchor = view.rotationAnchor
+
+                                        // Matrix = MTranslate X MRotate X MScale
+                                        SpatialWebViewUI().environment(e)
+                                            .frame(width: width, height: height)
+                                            // use .offset(smallVal) to workaround for glassEffect not working and small width/height spatialDiv not working
+                                            .offset(z: 0.0001)
+                                            .scaleEffect(
                                                 x: CGFloat(e.modelEntity.scale.x),
                                                 y: CGFloat(e.modelEntity.scale.y),
-                                                z: CGFloat(e.modelEntity.scale.z)
+                                                z: CGFloat(e.modelEntity.scale.z),
+                                                anchor: anchor
                                             )
                                             .rotation3DEffect(
                                                 Rotation3D(simd_quatf(
@@ -144,50 +62,118 @@ struct SpatialWebViewUI: View {
                                                     iy: e.modelEntity.orientation.vector.y,
                                                     iz: e.modelEntity.orientation.vector.z,
                                                     r: e.modelEntity.orientation.vector.w
-                                                ))
-                                            ).position(x: x, y: y)
+                                                )),
+                                                anchor: anchor
+                                            )
+
+                                            .position(x: x, y: y)
                                             .offset(z: z)
-                                        }
+                                            .gesture(
+                                                DragGesture()
+                                                    .onChanged { gesture in
+                                                        let scrollEnabled = view.isScrollEnabled()
+                                                        if !scrollEnabled {
+                                                            // Check if there is a nearest scroll-enabled SpatialWindowComponent in the current SpatialEntity
+                                                            // and scroll it if it exists
+                                                            if let targetScrollWV = wv.findNearestScrollEnabledSpatialWindowComponent() {
+                                                                if !view.dragStarted {
+                                                                    view.dragStarted = true
+                                                                    view.dragStart = (gesture.translation.height)
+                                                                }
+
+                                                                // TODO: this should have velocity
+                                                                let delta = view.dragStart - gesture.translation.height
+                                                                view.dragStart = gesture.translation.height
+                                                                targetScrollWV.updateScrollOffset(delta: delta)
+                                                            }
+                                                        }
+                                                    }
+                                                    .onEnded { _ in
+                                                        let scrollEnabled = view.isScrollEnabled()
+                                                        if !scrollEnabled {
+                                                            if let targetScrollWV = wv.findNearestScrollEnabledSpatialWindowComponent() {
+                                                                view.dragStarted = false
+                                                                view.dragStart = 0
+                                                                targetScrollWV.stopScrolling()
+                                                            }
+                                                        }
+                                                    }
+                                            )
                                     }
                                 }
                             }
-                        }.frame(maxWidth: .infinity, maxHeight: .infinity).frame(maxDepth: 0, alignment: .back).offset(z: 0)
-                    }
+                        }
 
-                    // Display the main webview
-                    if wv.didFailLoad {
-                        VStack {
-                            Text("Failed to load webpage. Is the server running?")
-                                .foregroundColor(.white)
-                            Button("Reload") {
-                                if let url = wv.getURL() {
-                                    wv.navigateToURL(url: url)
-                                } else {
-                                    logger.warning("Unable to reload URL")
-                                }
+                        // Model3D content
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                let _ = e.forceUpdate ? 0 : 0
+                                SpatialModel3DView(parentYOffset: parentYOffset)
+                                    .environment(e)
                             }
-                            .foregroundColor(.white)
                         }
-                        .frame(maxWidth: .infinity, maxHeight: .infinity).glassBackgroundEffect()
 
-                    } else {
-                        wv.getView()
-                            .materialWithBorderCorner(
-                                wv.backgroundMaterial,
-                                wv.cornerRadius
-                            )
+                        // SpatialView content
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                if e.coordinateSpace == .DOM {
+                                    if let viewComponent = e.getComponent(SpatialViewComponent.self) {
+                                        let _ = e.forceUpdate ? 0 : 0
+                                        let x = CGFloat(e.modelEntity.position.x)
+                                        let y = CGFloat(e.modelEntity.position.y - parentYOffset)
+                                        let z = CGFloat(e.modelEntity.position.z)
+
+                                        let width = CGFloat(viewComponent.resolutionX)
+                                        let height = CGFloat(viewComponent.resolutionY)
+
+                                        SpatialViewUI().environment(e).frame(width: width, height: height).scaleEffect(
+                                            x: CGFloat(e.modelEntity.scale.x),
+                                            y: CGFloat(e.modelEntity.scale.y),
+                                            z: CGFloat(e.modelEntity.scale.z)
+                                        )
+                                        .rotation3DEffect(
+                                            Rotation3D(simd_quatf(
+                                                ix: e.modelEntity.orientation.vector.x,
+                                                iy: e.modelEntity.orientation.vector.y,
+                                                iz: e.modelEntity.orientation.vector.z,
+                                                r: e.modelEntity.orientation.vector.w
+                                            ))
+                                        ).position(x: x, y: y)
+                                        .offset(z: z)
+                                    }
+                                }
+                            }
+                        }
+                    }.frame(maxWidth: .infinity, maxHeight: .infinity).frame(maxDepth: 0, alignment: .back).offset(z: 0)
+                }
 
-                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                // Display the main webview
+                if wv.didFailLoad {
+                    VStack {
+                        Text("Failed to load webpage. Is the server running?")
+                            .foregroundColor(.white)
+                        Button("Reload") {
+                            if let url = wv.getURL() {
+                                wv.navigateToURL(url: url)
+                            } else {
+                                logger.warning("Unable to reload URL")
+                            }
+                        }
+                        .foregroundColor(.white)
                     }
+                    .frame(maxWidth: .infinity, maxHeight: .infinity).glassBackgroundEffect()
+
+                } else {
+                    wv.getView()
+                        .materialWithBorderCorner(
+                            wv.backgroundMaterial,
+                            wv.cornerRadius
+                        )
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                 }
-                .opacity(wv.opacity)
-                .hidden(!ent.visible)
-                //            .ornament(attachmentAnchor: .scene(.top), contentAlignment: .top) {
-                //                if wv.isRootWebview() && pwaManager.display != .fullscreen {
-                //                    NavView(swc: wv, navInfo: wv.navInfo)
-                //                }
-                //            }
             }
+            .opacity(wv.opacity)
+            .hidden(!ent.visible)
         }
     }
 }

package/web-spatial/views/ui/NavView.swift

@@ -2,16 +2,20 @@ import SwiftUI
 import WebKit
 
 struct NavView: View {
-    static let navHeight: CGFloat = 80
+    static let navHeight: CGFloat = 60
+    static let minWidth: CGFloat = 400
     @State var swc: SpatialWindowComponent?
     @StateObject var navInfo: NavInfo
-    @State var showUrl: Bool = false
-    @State private var showNav: Bool = false
+    @State var navWidth: CGFloat = 0
     @State private var showCopyTip = false
-    @State private var navWidth: CGFloat = 0
-    @State private var contentHeight: CGFloat = 68
+    @State private var contentHeight: CGFloat = 60
     @State private var texWidth: CGFloat = 0
     @State private var firstGetSize: Bool = true
+    @State private var timer: Timer?
+    @State private var timeRemaining = 5
+    @State private var showEnter: Double = 1
+    @State private var showNav: Double = 0
+    @State private var showUrl: Double = 0
     @Namespace var hoverNamespace
     var navHoverGroup: HoverEffectGroup {
         HoverEffectGroup(hoverNamespace)
@@ -20,83 +24,108 @@ struct NavView: View {
     var body: some View {
         ZStack {
             ZStack {
-                HStack {
-                    Image("logo").resizable().frame(width: 44, height: 44)
+                HStack(spacing: 10) {
+                    Image("logo").resizable().frame(width: 32, height: 32)
                         .cornerRadius(100)
-                    NavButton(action: { print("click"); showNav = true }, children: Image(systemName: "link"))
+                    if pwaManager.display == .minimal {
+                        NavButton(action: { swc?.goBack() }, children: Image("arrow_left"), clearBackGround: true).disabled(!(swc?.canGoBack ?? false))
+                        NavButton(action: { swc?.goForward() }, children: Image("arrow_right"), clearBackGround: true).disabled(!(swc?.canGoBack ?? false))
+                        NavButton(action: { swc?.reload() }, children: Image("refresh"), clearBackGround: true)
+                        NavDivider()
+                    }
+                    NavButton(action: { print("click"); withAnimation(.easeInOut(duration: 0.5)) { showNav = 1.0; showEnter = 0 } }, children: Image("more"), clearBackGround: true)
                 }
                 .padding(12)
-                .background(.thinMaterial)
+                .background(Color(hex: "#161616E5"))
                 .hoverEffect(in: navHoverGroup) { effect, isActive, _ in
-                    effect.opacity((isActive && !showNav) ? 1 : 0)
+                    effect.opacity((isActive && showNav == 0 && showUrl == 0) ? 1 : 0)
                 }
-                Image("nav").resizable().frame(width: 29, height: 29).hoverEffect(.highlight).hoverEffect(in: navHoverGroup) { effect, isActive, _ in
-                    effect.opacity((isActive && !showNav) ? 0 : 1)
+                Image("nav").resizable().frame(width: 32, height: 32).hoverEffect(.highlight).hoverEffect(in: navHoverGroup) { effect, isActive, _ in
+                    effect.opacity((isActive && showNav == 0 && showUrl == 0) ? 0 : 1)
                 }
             }
             .frame(height: contentHeight)
             .cornerRadius(100)
-            .hoverEffect(in: navHoverGroup) { effect, isActive, proxy in
-                effect.clipShape(.capsule.size(
-                    width: isActive ? proxy.size.width : proxy.size.height,
-                    height: proxy.size.height,
-                    anchor: .center
-                ))
-            }
-            .opacity(showNav ? 0 : 1)
-//            if showNav {
+            .opacity(showEnter)
             HStack(spacing: 14) {
                 if pwaManager.display == .minimal {
-                    NavButton(action: { swc?.goBack() }, children: Image(systemName: "arrow.left"), clearBackGround: true).disabled(!(swc?.canGoBack ?? false))
-                    NavButton(action: { swc?.goForward() }, children: Image(systemName: "arrow.right"), clearBackGround: true).disabled(!(swc?.canGoBack ?? false))
+                    NavButton(action: { swc?.goBack() }, children: Image("arrow_left")).disabled(!(swc?.canGoBack ?? false))
+                    NavButton(action: { swc?.goForward() }, children: Image("arrow_right")).disabled(!(swc?.canGoBack ?? false))
+                    NavButton(action: { swc?.reload() }, children: Image("refresh"))
+                    NavDivider()
                 }
-                NavButton(action: { swc?.reload() }, children: Image(systemName: "arrow.clockwise"), clearBackGround: true)
-                NavButton(action: { swc?.navigateToURL(url: URL(string: pwaManager.start_url)!) }, children: Image(systemName: "house.fill"), clearBackGround: true)
-                NavButton(action: { withAnimation(.easeInOut(duration: 0.5)) { showUrl = true } }, children: Image(systemName: "link"), clearBackGround: true)
-                NavButton(action: { showNav = false }, children: Image(systemName: "chevron.up"))
+                NavButton(action: { swc?.navigateToURL(url: URL(string: pwaManager.start_url)!) }, children: Image("home"))
+                NavButton(action: { withAnimation(.easeInOut(duration: 0.5)) { showUrl = 1; showNav = 0 } }, children: Image("link"))
+                NavButton(action: { showNav = 0; showEnter = 1 }, children: Image("back"))
             }
             .padding(12)
-            .glassBackgroundEffect(in: RoundedRectangle(cornerRadius: 100))
-            .opacity(withAnimation(.easeInOut(duration: 0.5)) { showNav ? 1 : 0 })
-            .ornament(attachmentAnchor: .scene(.top), contentAlignment: .top) {
-                if showUrl {
-                    HStack(spacing: 14) {
-                        Text(navInfo.url.count > 0 ? navInfo.url : (swc?.getURL()?.absoluteString ?? ""))
-                            .padding()
-                            .lineLimit(1)
-                            .overlay(GeometryReader { geo -> AnyView in
-                                DispatchQueue.main.async {
-                                    if geo.size.width > 0 {
-                                        texWidth = .minimum(300, geo.size.width)
-                                    }
-                                }
-                                return AnyView(EmptyView())
-                            })
-                            .frame(width: .maximum(300, texWidth))
-                        NavButton(action: {
-                            UIPasteboard.general.string = swc?.getURL()?.absoluteString ?? ""
-                            showCopyTip = true
-                            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
-                                showCopyTip = false
-                            }
-                        }, children: Image(systemName: "square.on.square"))
-                        NavButton(action: { showUrl = false }, children: Image(systemName: "xmark"))
-                    }
+            .background(Color(hex: "#161616E5"))
+            .cornerRadius(100)
+            .opacity(showNav)
+            .onChange(of: showNav) { _, newValue in
+                if newValue == 1 {
+                    startTimer()
+                } else {
+                    stopTimer()
+                }
+            }
+            HStack(spacing: 6) {
+                Text(navInfo.url.count > 0 ? navInfo.url : (swc?.getURL()?.absoluteString ?? ""))
+                    .lineLimit(1)
+                    .textSelection(.enabled)
                     .padding(12)
-                    .glassBackgroundEffect(in: RoundedRectangle(cornerRadius: 100))
-                    .popover(isPresented: $showCopyTip) {
-                        Text("copied！")
-                            .padding()
-                            .cornerRadius(10)
+                    .frame(minWidth: 200)
+                    .frame(maxWidth: 500)
+                    .frame(height: 44)
+                    .background(.black)
+                    .cornerRadius(100)
+                NavButton(action: {
+                    UIPasteboard.general.string = swc?.getURL()?.absoluteString ?? ""
+                    showCopyTip = true
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
+                        showCopyTip = false
                     }
-                }
+                    withAnimation(.easeInOut(duration: 0.5)) { showUrl = 0; showNav = 1 }
+                }, children: Image("copy"))
+                NavButton(action: {
+                    print("open browser")
+                    UIApplication.shared.open(URL(string: navInfo.url.count > 0 ? navInfo.url : (swc?.getURL()?.absoluteString ?? ""))!, options: [:], completionHandler: nil)
+                    withAnimation(.easeInOut(duration: 0.5)) { showUrl = 0; showNav = 1 }
+                }, children: Image("browser"))
+                NavButton(action: { withAnimation(.easeInOut(duration: 0.5)) { showUrl = 0; showNav = 1 } }, children: Image("close"))
             }
-//            }
+            .popover(isPresented: $showCopyTip) {
+                Text("copied！")
+                    .padding()
+                    .background(Color(hex: "#161616E5"))
+                    .cornerRadius(10)
+            }
+            .padding(8)
+            .background(Color(hex: "#161616E5"))
+            .cornerRadius(100)
+            .opacity(showUrl)
         }
+    }
 
-//        else{
+    private func startTimer() {
+        timeRemaining = 5
+        timer = Timer.scheduledTimer(
+            withTimeInterval: 1,
+            repeats: true
+        ) { _ in
+            timeRemaining -= 1
 
-//        }
+            if timeRemaining <= 0 {
+                showNav = 0
+                showEnter = 1
+                stopTimer()
+            }
+        }
+    }
+
+    private func stopTimer() {
+        timer?.invalidate()
+        timer = nil
     }
 }
 
@@ -112,27 +141,45 @@ struct NavButton: View {
     var children: Image
     var size: CGFloat = 44
     var padding: CGFloat = 10
-    var clearBackGround: Bool = false
+    var clearBackGround: Bool = true
     var body: some View {
         if clearBackGround {
             Button(action: action, label: {
-                Circle()
-                    .fill(Color.white.opacity(0))
-                    .frame(width: size, height: size)
-                    .overlay(
-                        children.frame(width: size, height: size).padding(padding)
-                    )
-            }).frame(width: size, height: size).buttonStyle(NavButtonStyle()).hoverEffect(.highlight)
+                ZStack {
+                    Circle()
+                        .fill(Color.white.opacity(0))
+                        .frame(width: size, height: size)
+                        .overlay(
+                            children.resizable().frame(width: size - padding * 2, height: size - padding * 2)
+                        )
+                        .contentShape(Circle())
+                }
+            }).buttonStyle(NavButtonStyle()).frame(width: size, height: size).hoverEffect(.highlight)
         } else {
             Button(action: action, label: {
                 Circle()
                     .fill(Color.white.opacity(0))
                     .frame(width: size, height: size)
                     .overlay(
-                        children.frame(width: size, height: size).padding(padding)
+                        children.resizable().frame(width: size - padding * 2, height: size - padding * 2)
                     )
-            }).frame(width: size, height: size).hoverEffect(.highlight)
+                    .contentShape(Circle())
+            }).hoverEffect(.highlight)
+        }
+    }
+}
+
+struct NavDivider: View {
+    var width: CGFloat = 1
+    var height: CGFloat = 16
+    var paddingLR: CGFloat = 4
+    var paddingTB: CGFloat = 12
+    var body: some View {
+        VStack {
+            Rectangle().fill(Color(hex: "#FFFFFF3D")).frame(width: width, height: height)
         }
+        .padding([.top, .bottom], paddingTB)
+        .padding([.leading, .trailing], paddingLR)
     }
 }
 

package/web-spatial.xcodeproj/project.pbxproj

@@ -21,8 +21,8 @@
 		2B2F1D992BEDA8EF006897EE /* VolumetricWindowContainerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B2F1D982BEDA8EF006897EE /* VolumetricWindowContainerView.swift */; };
 		2B2F1D9B2BEDA975006897EE /* PlainWindowContainerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B2F1D9A2BEDA975006897EE /* PlainWindowContainerView.swift */; };
 		2B37E8E12D002C4D0096749A /* MaterialWithBorderCornerModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B37E8E02D002C2B0096749A /* MaterialWithBorderCornerModifier.swift */; };
+		2B48B3F12DF9866700826889 /* ColorExtension.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B48B3F02DF9866100826889 /* ColorExtension.swift */; };
 		2B67BBAC2D151C1A00BBC689 /* manifest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B67BBAB2D151C1500BBC689 /* manifest.swift */; };
-		2B6BA5DF2DF0607400D40337 /* nav.png in Resources */ = {isa = PBXBuildFile; fileRef = 2B6BA5DE2DF0607400D40337 /* nav.png */; };
 		2B85209C2BFD5FDB0038FE29 /* UpdateSystem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B85209B2BFD5FDB0038FE29 /* UpdateSystem.swift */; };
 		2B9909932C3605A9004826D1 /* Window.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B9909922C3605A9004826D1 /* Window.swift */; };
 		2BA06D712D4380C60020B505 /* LoadingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2BA06D702D4380C30020B505 /* LoadingView.swift */; };
@@ -76,8 +76,8 @@
 		2B2F1D982BEDA8EF006897EE /* VolumetricWindowContainerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VolumetricWindowContainerView.swift; sourceTree = "<group>"; };
 		2B2F1D9A2BEDA975006897EE /* PlainWindowContainerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlainWindowContainerView.swift; sourceTree = "<group>"; };
 		2B37E8E02D002C2B0096749A /* MaterialWithBorderCornerModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MaterialWithBorderCornerModifier.swift; sourceTree = "<group>"; };
+		2B48B3F02DF9866100826889 /* ColorExtension.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ColorExtension.swift; sourceTree = "<group>"; };
 		2B67BBAB2D151C1500BBC689 /* manifest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = manifest.swift; sourceTree = "<group>"; };
-		2B6BA5DE2DF0607400D40337 /* nav.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = nav.png; sourceTree = "<group>"; };
 		2B85209B2BFD5FDB0038FE29 /* UpdateSystem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UpdateSystem.swift; sourceTree = "<group>"; };
 		2B9909922C3605A9004826D1 /* Window.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Window.swift; sourceTree = "<group>"; };
 		2BA06D702D4380C30020B505 /* LoadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadingView.swift; sourceTree = "<group>"; };
@@ -125,6 +125,7 @@
 		2B0B1C0E2C494E4100E644F9 /* Utils */ = {
 			isa = PBXGroup;
 			children = (
+				2B48B3F02DF9866100826889 /* ColorExtension.swift */,
 				2B0FF4F32DD2711800C3F20A /* PerfClock.swift */,
 				2BD510552D54A2FF0001E5E6 /* SceneManager.swift */,
 				2B0B43092CBE21540003CEF3 /* CommandManager.swift */,
@@ -160,7 +161,6 @@
 				2B2F1D8A2BED4CD0006897EE /* libs */,
 				2B2F1D6A2BEBFAAA006897EE /* web_spatialApp.swift */,
 				2B2F1D702BEBFAAC006897EE /* Assets.xcassets */,
-				2B6BA5DE2DF0607400D40337 /* nav.png */,
 				2B2F1D752BEBFAAC006897EE /* Info.plist */,
 				2B2F1D722BEBFAAC006897EE /* Preview Content */,
 			);
@@ -354,7 +354,6 @@
 			files = (
 				2BDBF9B62C4ED9F600D269D7 /* static-web in Resources */,
 				2B2F1D742BEBFAAC006897EE /* Preview Assets.xcassets in Resources */,
-				2B6BA5DF2DF0607400D40337 /* nav.png in Resources */,
 				2B2F1D712BEBFAAC006897EE /* Assets.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -392,6 +391,7 @@
 				2BDBED5F2D3F885A0065443F /* SpatialModel3DComponent.swift in Sources */,
 				2B2F1D6B2BEBFAAA006897EE /* web_spatialApp.swift in Sources */,
 				2B0B1C102C494E5400E644F9 /* Logger.swift in Sources */,
+				2B48B3F12DF9866700826889 /* ColorExtension.swift in Sources */,
 				2B37E8E12D002C4D0096749A /* MaterialWithBorderCornerModifier.swift in Sources */,
 				2BC261222D38F1DA00BCA977 /* NavView.swift in Sources */,
 				2BAC1BE22CDC49040022E29B /* SpatialViewUI.swift in Sources */,