npm - @webspatial/react-sdk - Versions diffs - 0.0.0 → 0.0.2 - Mend

@webspatial/react-sdk 0.0.0 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/cjs/default/index.js +156 -156
package/dist/cjs/default/index.js.map +4 -4
package/dist/cjs/default/spatial-react-components/index.d.ts +0 -1
package/dist/cjs/default/spatial-react-components/index.d.ts.map +1 -1
package/dist/cjs/web/index.js +155 -155
package/dist/cjs/web/index.js.map +4 -4
package/dist/cjs/web/spatial-react-components/index.d.ts +0 -1
package/dist/cjs/web/spatial-react-components/index.d.ts.map +1 -1
package/dist/jsx/jsx-dev-runtime.js +299 -303
package/dist/jsx/jsx-dev-runtime.js.map +4 -4
package/dist/jsx/jsx-runtime.js +299 -303
package/dist/jsx/jsx-runtime.js.map +4 -4
package/npm/plugin/vite.d.ts +5 -0
package/package.json +6 -6

package/dist/jsx/jsx-dev-runtime.js CHANGED Viewed

@@ -65,11 +65,9 @@ var require_web = __commonJS({
     var __toCommonJS2 = /* @__PURE__ */ __name((mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod), "__toCommonJS");
     var src_exports = {};
     __export2(src_exports, {
-      CSSModel3D: /* @__PURE__ */ __name(() => CSSModel3D, "CSSModel3D"),
       CSSSpatialDiv: /* @__PURE__ */ __name(() => CSSSpatialDiv, "CSSSpatialDiv"),
       CSSSpatialPrimitive: /* @__PURE__ */ __name(() => CSSSpatialPrimitive, "CSSSpatialPrimitive"),
       Model: /* @__PURE__ */ __name(() => Model, "Model"),
-      Model3D: /* @__PURE__ */ __name(() => Model3D, "Model3D"),
       SpatialDiv: /* @__PURE__ */ __name(() => SpatialDiv, "SpatialDiv"),
       SpatialMonitor: /* @__PURE__ */ __name(() => SpatialMonitor, "SpatialMonitor"),
       SpatialPrimitive: /* @__PURE__ */ __name(() => SpatialPrimitive, "SpatialPrimitive"),
@@ -2074,11 +2072,63 @@ var require_web = __commonJS({
       });
     }, "createSpatialPrimitive2"), "createSpatialPrimitive"))(CSSSpatialPrimitive);
     var CSSSpatialDiv = CSSSpatialPrimitive.div;
-    var import_react26 = require("react");
     var import_react21 = require("react");
+    var import_jsx_runtime8 = require("react/jsx-runtime");
+    var runAsync = /* @__PURE__ */ __name2((fn) => {
+      return fn();
+    }, "runAsync");
+    var SpatialViewEl = (0, import_react21.forwardRef)(
+      (props, ref) => {
+        const divRef = (0, import_react21.useRef)(null);
+        const spatialEntity = (0, import_react21.useRef)(null);
+        const activePromise = (0, import_react21.useRef)(null);
+        (0, import_react21.useImperativeHandle)(ref, () => ({
+          ...divRef.current,
+          getViewEntity: /* @__PURE__ */ __name2(async () => {
+            if (activePromise.current) {
+              await activePromise.current;
+            }
+            return spatialEntity.current;
+          }, "getViewEntity")
+        }));
+        if (getSession3() == null) {
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
+        }
+        (0, import_react21.useEffect)(() => {
+          if (true) return;
+          activePromise.current = runAsync(async () => {
+            if (activePromise.current) {
+              await activePromise.current;
+            }
+            let sh = new SpatialHelper(getSession3());
+            let x = await sh.dom.attachSpatialView(divRef.current);
+            spatialEntity.current = x.entity;
+            if (props.onViewLoad) {
+              props.onViewLoad(x.entity);
+            }
+          });
+          return () => {
+            if (true) return;
+            runAsync(async () => {
+              await activePromise.current;
+              spatialEntity.current?.destroy();
+              if (props.onViewUnload) {
+                props.onViewUnload();
+              }
+            });
+          };
+        }, []);
+        const { onViewLoad, onViewUnload, ...divProps } = props;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...divProps });
+      }
+    );
+    var SpatialView = SpatialViewEl;
+    var import_react31 = require("react");
+    var import_react27 = require("react");
+    var import_react22 = require("react");
     function useDetectLayoutDomUpdated(onDomUpdated) {
-      const ref = (0, import_react21.useRef)(null);
-      (0, import_react21.useEffect)(() => {
+      const ref = (0, import_react22.useRef)(null);
+      (0, import_react22.useEffect)(() => {
         if (!ref.current) {
           console.warn("Ref is not attached to the DOM");
           return;
@@ -2091,7 +2141,7 @@ var require_web = __commonJS({
           ro.disconnect();
         };
       }, []);
-      (0, import_react21.useEffect)(() => {
+      (0, import_react22.useEffect)(() => {
         if (!ref.current) {
           console.warn("Ref is not attached to the DOM");
           return;
@@ -2112,7 +2162,7 @@ var require_web = __commonJS({
     }
     __name(useDetectLayoutDomUpdated, "useDetectLayoutDomUpdated");
     __name2(useDetectLayoutDomUpdated, "useDetectLayoutDomUpdated");
-    var import_react22 = require("react");
+    var import_react23 = require("react");
     function PopulatePartialSpatialTransformType(spatialTransform = {}) {
       const {
         position = { x: 0, y: 0, z: 0 },
@@ -2339,12 +2389,12 @@ var require_web = __commonJS({
       }
     };
     function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DNativeReadyCb) {
-      let model3DNativeRef = (0, import_react22.useRef)(null);
-      const [phase, setPhase] = (0, import_react22.useState)(
+      let model3DNativeRef = (0, import_react23.useRef)(null);
+      const [phase, setPhase] = (0, import_react23.useState)(
         "loading"
       );
-      const [failureReason, setFailureReason] = (0, import_react22.useState)("");
-      (0, import_react22.useEffect)(() => {
+      const [failureReason, setFailureReason] = (0, import_react23.useState)("");
+      (0, import_react23.useEffect)(() => {
         let isDestroyed = false;
         const model3DContainer = new Model3DNative(parentEntity);
         model3DContainer.init(
@@ -2371,32 +2421,32 @@ var require_web = __commonJS({
           setPhase("loading");
         };
       }, [modelUrl]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDragStart = eventHandlers.onDragStart;
         }
       }, [model3DNativeRef.current, eventHandlers.onDragStart]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDrag = eventHandlers.onDrag;
         }
       }, [model3DNativeRef.current, eventHandlers.onDrag]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDragEnd = eventHandlers.onDragEnd;
         }
       });
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onTap = eventHandlers.onTap;
         }
       }, [model3DNativeRef.current, eventHandlers.onTap]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDoubleTap = eventHandlers.onDoubleTap;
         }
       }, [model3DNativeRef.current, eventHandlers.onDoubleTap]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onLongPress = eventHandlers.onLongPress;
         }
@@ -2405,8 +2455,8 @@ var require_web = __commonJS({
     }
     __name(useModel3DNative, "useModel3DNative");
     __name2(useModel3DNative, "useModel3DNative");
-    var import_react23 = require("react");
-    var import_jsx_runtime8 = require("react/jsx-runtime");
+    var import_react24 = require("react");
+    var import_jsx_runtime9 = require("react/jsx-runtime");
     function renderModel3DNotInSpatialDiv(props, refIn) {
       const {
         className,
@@ -2427,7 +2477,7 @@ var require_web = __commonJS({
         onLongPress
       } = props;
       const theSpatialTransform = PopulatePartialSpatialTransformType(spatialTransform);
-      const onDomUpdated = (0, import_react23.useCallback)(() => {
+      const onDomUpdated = (0, import_react24.useCallback)(() => {
         if (model3DNativeRef.current && layoutInstanceRef.current) {
           const model3DNative = model3DNativeRef.current;
           model3DNative.updateByDom(layoutInstanceRef.current, {
@@ -2446,7 +2496,7 @@ var require_web = __commonJS({
         theSpatialTransform.scale.y,
         theSpatialTransform.scale.z
       ]);
-      const onModel3DContainerReadyCb = (0, import_react23.useCallback)(() => {
+      const onModel3DContainerReadyCb = (0, import_react24.useCallback)(() => {
         if (model3DNativeRef.current && layoutInstanceRef.current) {
           model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
             spatialTransform: theSpatialTransform
@@ -2464,7 +2514,7 @@ var require_web = __commonJS({
         theSpatialTransform.scale.y,
         theSpatialTransform.scale.z
       ]);
-      const onDragStartCb = (0, import_react23.useCallback)(
+      const onDragStartCb = (0, import_react24.useCallback)(
         (spatialDragEvent) => {
           if (onDragStart) {
             const dragEvent = {
@@ -2476,7 +2526,7 @@ var require_web = __commonJS({
         },
         [onDragStart]
       );
-      const onDragCb = (0, import_react23.useCallback)(
+      const onDragCb = (0, import_react24.useCallback)(
         (spatialDragEvent) => {
           if (onDrag) {
             const dragEvent = {
@@ -2488,7 +2538,7 @@ var require_web = __commonJS({
         },
         [onDrag]
       );
-      const onDragEndCb = (0, import_react23.useCallback)(
+      const onDragEndCb = (0, import_react24.useCallback)(
         (spatialDragEvent) => {
           if (onDragEnd) {
             const dragEvent = {
@@ -2500,7 +2550,7 @@ var require_web = __commonJS({
         },
         [onDragEnd]
       );
-      const onTapCb = (0, import_react23.useCallback)(() => {
+      const onTapCb = (0, import_react24.useCallback)(() => {
         if (onTap) {
           const event = {
             target: layoutInstanceRef.current
@@ -2508,7 +2558,7 @@ var require_web = __commonJS({
           onTap(event);
         }
       }, [onTap]);
-      const onDoubleTapCb = (0, import_react23.useCallback)(() => {
+      const onDoubleTapCb = (0, import_react24.useCallback)(() => {
         if (onDoubleTap) {
           const event = {
             target: layoutInstanceRef.current
@@ -2516,7 +2566,7 @@ var require_web = __commonJS({
           onDoubleTap(event);
         }
       }, [onDoubleTap]);
-      const onLongPressCb = (0, import_react23.useCallback)(() => {
+      const onLongPressCb = (0, import_react24.useCallback)(() => {
         if (onLongPress) {
           const event = {
             target: layoutInstanceRef.current
@@ -2538,7 +2588,7 @@ var require_web = __commonJS({
         },
         onModel3DContainerReadyCb
       );
-      const onSuccess = (0, import_react23.useCallback)(() => {
+      const onSuccess = (0, import_react24.useCallback)(() => {
         ;
         layoutInstanceRef.current.ready = true;
         if (onLoad) {
@@ -2547,7 +2597,7 @@ var require_web = __commonJS({
           });
         }
       }, [onLoad]);
-      const onFailure = (0, import_react23.useCallback)(
+      const onFailure = (0, import_react24.useCallback)(
         (_) => {
           const modelElement = layoutInstanceRef.current;
           modelElement.ready = false;
@@ -2559,19 +2609,19 @@ var require_web = __commonJS({
         },
         [onLoad]
       );
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (phase === "failure") {
           onFailure(failureReason);
         } else if (phase === "success") {
           onSuccess();
         }
       }, [phase]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setVisible(visible);
         }
       }, [model3DNativeRef.current, visible]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current && layoutInstanceRef.current) {
           model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
             spatialTransform: theSpatialTransform
@@ -2589,17 +2639,17 @@ var require_web = __commonJS({
         theSpatialTransform.scale.y,
         theSpatialTransform.scale.z
       ]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setContentMode(contentMode);
         }
       }, [model3DNativeRef.current, contentMode]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setResizable(resizable);
         }
       }, [model3DNativeRef.current, resizable]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setAspectRatio(aspectRatio);
         }
@@ -2609,7 +2659,7 @@ var require_web = __commonJS({
         visibility: phase === "failure" ? "visible" : "hidden",
         transform: ""
       };
-      const proxyRef = (0, import_react23.useMemo)(
+      const proxyRef = (0, import_react24.useMemo)(
         () => new Proxy(layoutInstanceRef, {
           get(target, prop, receiver) {
             return Reflect.get(target, prop, receiver);
@@ -2634,7 +2684,7 @@ var require_web = __commonJS({
         }),
         [layoutInstanceRef, refIn]
       );
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         return () => {
           if (layoutInstanceRef.current) {
             const modelElement = layoutInstanceRef.current;
@@ -2643,17 +2693,17 @@ var require_web = __commonJS({
           }
         };
       }, [modelUrl]);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
     }
     __name(renderModel3DNotInSpatialDiv, "renderModel3DNotInSpatialDiv");
     __name2(renderModel3DNotInSpatialDiv, "renderModel3DNotInSpatialDiv");
-    var import_jsx_runtime9 = require("react/jsx-runtime");
+    var import_jsx_runtime10 = require("react/jsx-runtime");
     function renderModel3DStandardInstance(spatialId, props, refIn) {
       const { className, style } = props;
       const extraProps = {
         [SpatialID]: spatialId
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           "data-model3d-spatialid": spatialId,
@@ -2666,26 +2716,26 @@ var require_web = __commonJS({
     }
     __name(renderModel3DStandardInstance, "renderModel3DStandardInstance");
     __name2(renderModel3DStandardInstance, "renderModel3DStandardInstance");
+    var import_react26 = require("react");
     var import_react25 = require("react");
-    var import_react24 = require("react");
     function useSyncDomInfoFromStandardInstance(spatialId) {
-      const [domRect, setDomRect] = (0, import_react24.useState)({
+      const [domRect, setDomRect] = (0, import_react25.useState)({
         x: 0,
         y: 0,
         width: 0,
         height: 0
       });
-      const inheritedPortalStyleRef = (0, import_react24.useRef)({});
-      const anchorRef = (0, import_react24.useRef)({
+      const inheritedPortalStyleRef = (0, import_react25.useRef)({});
+      const anchorRef = (0, import_react25.useRef)({
         x: 0.5,
         y: 0.5,
         z: 0.5
       });
-      const opacityRef = (0, import_react24.useRef)(1);
-      const spatialReactContextObject = (0, import_react24.useContext)(SpatialReactContext);
-      const inheritedPortalClassNameRef = (0, import_react24.useRef)("");
-      const modelRef = (0, import_react24.useRef)(null);
-      (0, import_react24.useEffect)(() => {
+      const opacityRef = (0, import_react25.useRef)(1);
+      const spatialReactContextObject = (0, import_react25.useContext)(SpatialReactContext);
+      const inheritedPortalClassNameRef = (0, import_react25.useRef)("");
+      const modelRef = (0, import_react25.useRef)(null);
+      (0, import_react25.useEffect)(() => {
         const syncDomRect = /* @__PURE__ */ __name2(() => {
           const dom = spatialReactContextObject?.querySpatialDom(spatialId);
           if (!dom) {
@@ -2726,7 +2776,7 @@ var require_web = __commonJS({
     }
     __name(useSyncDomInfoFromStandardInstance, "useSyncDomInfoFromStandardInstance");
     __name2(useSyncDomInfoFromStandardInstance, "useSyncDomInfoFromStandardInstance");
-    var import_jsx_runtime10 = require("react/jsx-runtime");
+    var import_jsx_runtime11 = require("react/jsx-runtime");
     function useModelEvents(props, modelRef) {
       const {
         onDragStart,
@@ -2736,7 +2786,7 @@ var require_web = __commonJS({
         onDoubleTap,
         onLongPress
       } = props;
-      const onDragStartCb = (0, import_react25.useCallback)(
+      const onDragStartCb = (0, import_react26.useCallback)(
         (spatialDragEvent) => {
           if (onDragStart) {
             const dragEvent = {
@@ -2748,7 +2798,7 @@ var require_web = __commonJS({
         },
         [onDragStart]
       );
-      const onDragCb = (0, import_react25.useCallback)(
+      const onDragCb = (0, import_react26.useCallback)(
         (spatialDragEvent) => {
           if (onDrag) {
             const dragEvent = {
@@ -2760,7 +2810,7 @@ var require_web = __commonJS({
         },
         [onDrag]
       );
-      const onDragEndCb = (0, import_react25.useCallback)(
+      const onDragEndCb = (0, import_react26.useCallback)(
         (spatialDragEvent) => {
           if (onDragEnd) {
             const dragEvent = {
@@ -2772,7 +2822,7 @@ var require_web = __commonJS({
         },
         [onDragEnd]
       );
-      const onTapCb = (0, import_react25.useCallback)(() => {
+      const onTapCb = (0, import_react26.useCallback)(() => {
         if (onTap) {
           const event = {
             target: modelRef.current
@@ -2780,7 +2830,7 @@ var require_web = __commonJS({
           onTap(event);
         }
       }, [onTap]);
-      const onDoubleTapCb = (0, import_react25.useCallback)(() => {
+      const onDoubleTapCb = (0, import_react26.useCallback)(() => {
         if (onDoubleTap) {
           const event = {
             target: modelRef.current
@@ -2788,7 +2838,7 @@ var require_web = __commonJS({
           onDoubleTap(event);
         }
       }, [onDoubleTap]);
-      const onLongPressCb = (0, import_react25.useCallback)(() => {
+      const onLongPressCb = (0, import_react26.useCallback)(() => {
         if (onLongPress) {
           const event = {
             target: modelRef.current
@@ -2819,7 +2869,7 @@ var require_web = __commonJS({
         onLoad,
         children
       } = props;
-      const theSpatialTransform = (0, import_react25.useMemo)(() => {
+      const theSpatialTransform = (0, import_react26.useMemo)(() => {
         return PopulatePartialSpatialTransformType(spatialTransform);
       }, [spatialTransform]);
       const {
@@ -2830,7 +2880,7 @@ var require_web = __commonJS({
         opacity,
         className
       } = useSyncDomInfoFromStandardInstance(spatialId);
-      const parentSpatialWindowManager = (0, import_react25.useContext)(SpatialWindowManagerContext);
+      const parentSpatialWindowManager = (0, import_react26.useContext)(SpatialWindowManagerContext);
       const eventHandlers = useModelEvents(
         props,
         modelRef
@@ -2840,7 +2890,7 @@ var require_web = __commonJS({
         parentSpatialWindowManager.entity,
         eventHandlers
       );
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.updateRectAndTransform(
             domRect,
@@ -2848,37 +2898,37 @@ var require_web = __commonJS({
           );
         }
       }, [model3DNativeRef.current, domRect, theSpatialTransform]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setRotationAnchor(anchor);
         }
       }, [model3DNativeRef.current, anchor]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setVisible(visible);
         }
       }, [model3DNativeRef.current, visible]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setContentMode(contentMode);
         }
       }, [model3DNativeRef.current, contentMode]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setResizable(resizable);
         }
       }, [model3DNativeRef.current, resizable]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setAspectRatio(aspectRatio);
         }
       }, [model3DNativeRef.current, aspectRatio]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setOpacity(opacity);
         }
       }, [model3DNativeRef.current, opacity]);
-      const onSuccess = (0, import_react25.useCallback)(() => {
+      const onSuccess = (0, import_react26.useCallback)(() => {
         ;
         modelRef.current.ready = true;
         if (onLoad) {
@@ -2887,7 +2937,7 @@ var require_web = __commonJS({
           });
         }
       }, [onLoad]);
-      const onFailure = (0, import_react25.useCallback)(
+      const onFailure = (0, import_react26.useCallback)(
         (_2) => {
           const modelElement = modelRef.current;
           modelElement.ready = false;
@@ -2899,14 +2949,14 @@ var require_web = __commonJS({
         },
         [onLoad]
       );
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (phase === "failure") {
           onFailure(failureReason);
         } else if (phase === "success") {
           onSuccess();
         }
       }, [phase]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         return () => {
           const modelElement = modelRef.current;
           if (modelElement) {
@@ -2917,7 +2967,7 @@ var require_web = __commonJS({
       }, [modelUrl]);
       const needRenderPlaceHolder = inheritedPortalStyle.position !== "absolute";
       if (!needRenderPlaceHolder && phase !== "failure") {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
       } else {
         const extraStyle = {
           visibility: "visible",
@@ -2937,7 +2987,7 @@ var require_web = __commonJS({
           ...inheritedPortalStyle,
           ...extraStyle
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             "data-model3d-spatialid": spatialId,
@@ -2951,12 +3001,12 @@ var require_web = __commonJS({
     __name(renderModel3DPortalInstance, "renderModel3DPortalInstance");
     __name2(renderModel3DPortalInstance, "renderModel3DPortalInstance");
     function Model3DBase(props, refIn) {
-      const parentSpatialReactContextObject = (0, import_react26.useContext)(SpatialReactContext);
+      const parentSpatialReactContextObject = (0, import_react27.useContext)(SpatialReactContext);
       const isInSpatialDiv = !!parentSpatialReactContextObject;
       if (isInSpatialDiv) {
-        const layer = (0, import_react26.useContext)(SpatialLayerContext) + 1;
-        const isInStandardInstance = !!(0, import_react26.useContext)(SpatialIsStandardInstanceContext);
-        const spatialId = (0, import_react26.useMemo)(() => {
+        const layer = (0, import_react27.useContext)(SpatialLayerContext) + 1;
+        const isInStandardInstance = !!(0, import_react27.useContext)(SpatialIsStandardInstanceContext);
+        const spatialId = (0, import_react27.useMemo)(() => {
           return parentSpatialReactContextObject.getSpatialID(
             layer,
             isInStandardInstance,
@@ -2974,10 +3024,10 @@ var require_web = __commonJS({
     }
     __name(Model3DBase, "Model3DBase");
     __name2(Model3DBase, "Model3DBase");
-    var Model3D = (0, import_react26.forwardRef)(Model3DBase);
+    var Model3D = (0, import_react27.forwardRef)(Model3DBase);
     Model3D.displayName = "Model3D";
-    var import_react29 = require("react");
-    var import_jsx_runtime11 = require("react/jsx-runtime");
+    var import_react30 = require("react");
+    var import_jsx_runtime12 = require("react/jsx-runtime");
     function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
       const { className, style = {}, ...props } = inProps;
       const cssParserDomStyle = {
@@ -3000,8 +3050,8 @@ var require_web = __commonJS({
         ...style,
         transform: "none"
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        ready && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        ready && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Model3D,
           {
             className,
@@ -3012,7 +3062,7 @@ var require_web = __commonJS({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className,
@@ -3024,8 +3074,8 @@ var require_web = __commonJS({
     }
     __name(renderCSSModel3DNotInSpatialDiv, "renderCSSModel3DNotInSpatialDiv");
     __name2(renderCSSModel3DNotInSpatialDiv, "renderCSSModel3DNotInSpatialDiv");
-    var import_react27 = require("react");
-    var import_jsx_runtime12 = require("react/jsx-runtime");
+    var import_react28 = require("react");
+    var import_jsx_runtime13 = require("react/jsx-runtime");
     function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
       const { style: inStyle = {}, ...props } = inProps;
       const style = {
@@ -3033,13 +3083,13 @@ var require_web = __commonJS({
         transform: "none",
         visibility: "hidden"
       };
-      var cssParserRef = (0, import_react27.useRef)(null);
+      var cssParserRef = (0, import_react28.useRef)(null);
       const ref = useHijackSpatialDivRef(
         refIn,
         cssParserRef
       );
-      const rootSpatialReactContextObject = (0, import_react27.useContext)(SpatialReactContext);
-      (0, import_react27.useEffect)(() => {
+      const rootSpatialReactContextObject = (0, import_react28.useContext)(SpatialReactContext);
+      (0, import_react28.useEffect)(() => {
         const onSubEvent = /* @__PURE__ */ __name2((dom) => {
           cssParserRef.current = dom;
         }, "onSubEvent");
@@ -3048,15 +3098,15 @@ var require_web = __commonJS({
           rootSpatialReactContextObject.offSubDivEvent(spatialId);
         };
       }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Model3D, { style, ...props, ref, visible: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Model3D, { style, ...props, ref, visible: true });
     }
     __name(renderCSSModel3DStandardInstance, "renderCSSModel3DStandardInstance");
     __name2(renderCSSModel3DStandardInstance, "renderCSSModel3DStandardInstance");
-    var import_react28 = require("react");
-    var import_jsx_runtime13 = require("react/jsx-runtime");
+    var import_react29 = require("react");
+    var import_jsx_runtime14 = require("react/jsx-runtime");
     function renderCSSModel3DPortalInstance(spatialId, inProps) {
       const { className, style = {}, ...props } = inProps;
-      const rootSpatialReactContextObject = (0, import_react28.useContext)(SpatialReactContext);
+      const rootSpatialReactContextObject = (0, import_react29.useContext)(SpatialReactContext);
       const { ref, spatialStyle, ready } = useSpatialStyle();
       const spatialTransform = {
         position: spatialStyle.position,
@@ -3064,7 +3114,7 @@ var require_web = __commonJS({
         scale: spatialStyle.scale
       };
       const visible = spatialStyle.visible;
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         rootSpatialReactContextObject.notifySubDivEvent(spatialId, ref.current);
       }, [ref.current]);
       const cssParserDomStyle = {
@@ -3076,8 +3126,8 @@ var require_web = __commonJS({
         ...style,
         transform: "none"
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        ready && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        ready && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Model3D,
           {
             className,
@@ -3087,18 +3137,18 @@ var require_web = __commonJS({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style: cssParserDomStyle, ref })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, style: cssParserDomStyle, ref })
       ] });
     }
     __name(renderCSSModel3DPortalInstance, "renderCSSModel3DPortalInstance");
     __name2(renderCSSModel3DPortalInstance, "renderCSSModel3DPortalInstance");
     function CSSModel3DBase(props, refIn) {
-      const rootSpatialReactContextObject = (0, import_react29.useContext)(SpatialReactContext);
+      const rootSpatialReactContextObject = (0, import_react30.useContext)(SpatialReactContext);
       const isInSpatialDiv = !!rootSpatialReactContextObject;
       if (isInSpatialDiv) {
-        const layer = (0, import_react29.useContext)(SpatialLayerContext) + 1;
-        const isInStandardInstance = !!(0, import_react29.useContext)(SpatialIsStandardInstanceContext);
-        const spatialId = (0, import_react29.useMemo)(() => {
+        const layer = (0, import_react30.useContext)(SpatialLayerContext) + 1;
+        const isInStandardInstance = !!(0, import_react30.useContext)(SpatialIsStandardInstanceContext);
+        const spatialId = (0, import_react30.useMemo)(() => {
           return rootSpatialReactContextObject.getSubDivSpatialID(
             layer,
             isInStandardInstance,
@@ -3116,60 +3166,8 @@ var require_web = __commonJS({
     }
     __name(CSSModel3DBase, "CSSModel3DBase");
     __name2(CSSModel3DBase, "CSSModel3DBase");
-    var CSSModel3D = (0, import_react29.forwardRef)(CSSModel3DBase);
+    var CSSModel3D = (0, import_react30.forwardRef)(CSSModel3DBase);
     CSSModel3D.displayName = "CSSModel3D";
-    var import_react30 = require("react");
-    var import_jsx_runtime14 = require("react/jsx-runtime");
-    var runAsync = /* @__PURE__ */ __name2((fn) => {
-      return fn();
-    }, "runAsync");
-    var SpatialViewEl = (0, import_react30.forwardRef)(
-      (props, ref) => {
-        const divRef = (0, import_react30.useRef)(null);
-        const spatialEntity = (0, import_react30.useRef)(null);
-        const activePromise = (0, import_react30.useRef)(null);
-        (0, import_react30.useImperativeHandle)(ref, () => ({
-          ...divRef.current,
-          getViewEntity: /* @__PURE__ */ __name2(async () => {
-            if (activePromise.current) {
-              await activePromise.current;
-            }
-            return spatialEntity.current;
-          }, "getViewEntity")
-        }));
-        if (getSession3() == null) {
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
-        }
-        (0, import_react30.useEffect)(() => {
-          if (true) return;
-          activePromise.current = runAsync(async () => {
-            if (activePromise.current) {
-              await activePromise.current;
-            }
-            let sh = new SpatialHelper(getSession3());
-            let x = await sh.dom.attachSpatialView(divRef.current);
-            spatialEntity.current = x.entity;
-            if (props.onViewLoad) {
-              props.onViewLoad(x.entity);
-            }
-          });
-          return () => {
-            if (true) return;
-            runAsync(async () => {
-              await activePromise.current;
-              spatialEntity.current?.destroy();
-              if (props.onViewUnload) {
-                props.onViewUnload();
-              }
-            });
-          };
-        }, []);
-        const { onViewLoad, onViewUnload, ...divProps } = props;
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: divRef, ...divProps });
-      }
-    );
-    var SpatialView = SpatialViewEl;
-    var import_react31 = require("react");
     var import_model_viewer = require("@google/model-viewer");
     var import_jsx_runtime15 = require("react/jsx-runtime");
     function renderInModel3D(inProps, ref, modelUrl, placeHolder) {
@@ -3462,11 +3460,9 @@ var require_default = __commonJS({
     var __toCommonJS2 = /* @__PURE__ */ __name((mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod), "__toCommonJS");
     var src_exports = {};
     __export2(src_exports, {
-      CSSModel3D: /* @__PURE__ */ __name(() => CSSModel3D, "CSSModel3D"),
       CSSSpatialDiv: /* @__PURE__ */ __name(() => CSSSpatialDiv, "CSSSpatialDiv"),
       CSSSpatialPrimitive: /* @__PURE__ */ __name(() => CSSSpatialPrimitive, "CSSSpatialPrimitive"),
       Model: /* @__PURE__ */ __name(() => Model, "Model"),
-      Model3D: /* @__PURE__ */ __name(() => Model3D, "Model3D"),
       SpatialDiv: /* @__PURE__ */ __name(() => SpatialDiv, "SpatialDiv"),
       SpatialMonitor: /* @__PURE__ */ __name(() => SpatialMonitor, "SpatialMonitor"),
       SpatialPrimitive: /* @__PURE__ */ __name(() => SpatialPrimitive, "SpatialPrimitive"),
@@ -5470,11 +5466,64 @@ var require_default = __commonJS({
       });
     }, "createSpatialPrimitive2"), "createSpatialPrimitive"))(CSSSpatialPrimitive);
     var CSSSpatialDiv = CSSSpatialPrimitive.div;
-    var import_react26 = require("react");
+    var import_core_sdk2 = require("@webspatial/core-sdk");
     var import_react21 = require("react");
+    var import_jsx_runtime8 = require("react/jsx-runtime");
+    var runAsync = /* @__PURE__ */ __name2((fn) => {
+      return fn();
+    }, "runAsync");
+    var SpatialViewEl = (0, import_react21.forwardRef)(
+      (props, ref) => {
+        const divRef = (0, import_react21.useRef)(null);
+        const spatialEntity = (0, import_react21.useRef)(null);
+        const activePromise = (0, import_react21.useRef)(null);
+        (0, import_react21.useImperativeHandle)(ref, () => ({
+          ...divRef.current,
+          getViewEntity: /* @__PURE__ */ __name2(async () => {
+            if (activePromise.current) {
+              await activePromise.current;
+            }
+            return spatialEntity.current;
+          }, "getViewEntity")
+        }));
+        if (getSession3() == null) {
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
+        }
+        (0, import_react21.useEffect)(() => {
+          if (false) return;
+          activePromise.current = runAsync(async () => {
+            if (activePromise.current) {
+              await activePromise.current;
+            }
+            let sh = new import_core_sdk2.SpatialHelper(getSession3());
+            let x = await sh.dom.attachSpatialView(divRef.current);
+            spatialEntity.current = x.entity;
+            if (props.onViewLoad) {
+              props.onViewLoad(x.entity);
+            }
+          });
+          return () => {
+            if (false) return;
+            runAsync(async () => {
+              await activePromise.current;
+              spatialEntity.current?.destroy();
+              if (props.onViewUnload) {
+                props.onViewUnload();
+              }
+            });
+          };
+        }, []);
+        const { onViewLoad, onViewUnload, ...divProps } = props;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...divProps });
+      }
+    );
+    var SpatialView = SpatialViewEl;
+    var import_react31 = require("react");
+    var import_react27 = require("react");
+    var import_react22 = require("react");
     function useDetectLayoutDomUpdated(onDomUpdated) {
-      const ref = (0, import_react21.useRef)(null);
-      (0, import_react21.useEffect)(() => {
+      const ref = (0, import_react22.useRef)(null);
+      (0, import_react22.useEffect)(() => {
         if (!ref.current) {
           console.warn("Ref is not attached to the DOM");
           return;
@@ -5487,7 +5536,7 @@ var require_default = __commonJS({
           ro.disconnect();
         };
       }, []);
-      (0, import_react21.useEffect)(() => {
+      (0, import_react22.useEffect)(() => {
         if (!ref.current) {
           console.warn("Ref is not attached to the DOM");
           return;
@@ -5508,7 +5557,7 @@ var require_default = __commonJS({
     }
     __name(useDetectLayoutDomUpdated, "useDetectLayoutDomUpdated");
     __name2(useDetectLayoutDomUpdated, "useDetectLayoutDomUpdated");
-    var import_react22 = require("react");
+    var import_react23 = require("react");
     function PopulatePartialSpatialTransformType(spatialTransform = {}) {
       const {
         position = { x: 0, y: 0, z: 0 },
@@ -5735,12 +5784,12 @@ var require_default = __commonJS({
       }
     };
     function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DNativeReadyCb) {
-      let model3DNativeRef = (0, import_react22.useRef)(null);
-      const [phase, setPhase] = (0, import_react22.useState)(
+      let model3DNativeRef = (0, import_react23.useRef)(null);
+      const [phase, setPhase] = (0, import_react23.useState)(
         "loading"
       );
-      const [failureReason, setFailureReason] = (0, import_react22.useState)("");
-      (0, import_react22.useEffect)(() => {
+      const [failureReason, setFailureReason] = (0, import_react23.useState)("");
+      (0, import_react23.useEffect)(() => {
         let isDestroyed = false;
         const model3DContainer = new Model3DNative(parentEntity);
         model3DContainer.init(
@@ -5767,32 +5816,32 @@ var require_default = __commonJS({
           setPhase("loading");
         };
       }, [modelUrl]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDragStart = eventHandlers.onDragStart;
         }
       }, [model3DNativeRef.current, eventHandlers.onDragStart]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDrag = eventHandlers.onDrag;
         }
       }, [model3DNativeRef.current, eventHandlers.onDrag]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDragEnd = eventHandlers.onDragEnd;
         }
       });
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onTap = eventHandlers.onTap;
         }
       }, [model3DNativeRef.current, eventHandlers.onTap]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onDoubleTap = eventHandlers.onDoubleTap;
         }
       }, [model3DNativeRef.current, eventHandlers.onDoubleTap]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react23.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.onLongPress = eventHandlers.onLongPress;
         }
@@ -5801,8 +5850,8 @@ var require_default = __commonJS({
     }
     __name(useModel3DNative, "useModel3DNative");
     __name2(useModel3DNative, "useModel3DNative");
-    var import_react23 = require("react");
-    var import_jsx_runtime8 = require("react/jsx-runtime");
+    var import_react24 = require("react");
+    var import_jsx_runtime9 = require("react/jsx-runtime");
     function renderModel3DNotInSpatialDiv(props, refIn) {
       const {
         className,
@@ -5823,7 +5872,7 @@ var require_default = __commonJS({
         onLongPress
       } = props;
       const theSpatialTransform = PopulatePartialSpatialTransformType(spatialTransform);
-      const onDomUpdated = (0, import_react23.useCallback)(() => {
+      const onDomUpdated = (0, import_react24.useCallback)(() => {
         if (model3DNativeRef.current && layoutInstanceRef.current) {
           const model3DNative = model3DNativeRef.current;
           model3DNative.updateByDom(layoutInstanceRef.current, {
@@ -5842,7 +5891,7 @@ var require_default = __commonJS({
         theSpatialTransform.scale.y,
         theSpatialTransform.scale.z
       ]);
-      const onModel3DContainerReadyCb = (0, import_react23.useCallback)(() => {
+      const onModel3DContainerReadyCb = (0, import_react24.useCallback)(() => {
         if (model3DNativeRef.current && layoutInstanceRef.current) {
           model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
             spatialTransform: theSpatialTransform
@@ -5860,7 +5909,7 @@ var require_default = __commonJS({
         theSpatialTransform.scale.y,
         theSpatialTransform.scale.z
       ]);
-      const onDragStartCb = (0, import_react23.useCallback)(
+      const onDragStartCb = (0, import_react24.useCallback)(
         (spatialDragEvent) => {
           if (onDragStart) {
             const dragEvent = {
@@ -5872,7 +5921,7 @@ var require_default = __commonJS({
         },
         [onDragStart]
       );
-      const onDragCb = (0, import_react23.useCallback)(
+      const onDragCb = (0, import_react24.useCallback)(
         (spatialDragEvent) => {
           if (onDrag) {
             const dragEvent = {
@@ -5884,7 +5933,7 @@ var require_default = __commonJS({
         },
         [onDrag]
       );
-      const onDragEndCb = (0, import_react23.useCallback)(
+      const onDragEndCb = (0, import_react24.useCallback)(
         (spatialDragEvent) => {
           if (onDragEnd) {
             const dragEvent = {
@@ -5896,7 +5945,7 @@ var require_default = __commonJS({
         },
         [onDragEnd]
       );
-      const onTapCb = (0, import_react23.useCallback)(() => {
+      const onTapCb = (0, import_react24.useCallback)(() => {
         if (onTap) {
           const event = {
             target: layoutInstanceRef.current
@@ -5904,7 +5953,7 @@ var require_default = __commonJS({
           onTap(event);
         }
       }, [onTap]);
-      const onDoubleTapCb = (0, import_react23.useCallback)(() => {
+      const onDoubleTapCb = (0, import_react24.useCallback)(() => {
         if (onDoubleTap) {
           const event = {
             target: layoutInstanceRef.current
@@ -5912,7 +5961,7 @@ var require_default = __commonJS({
           onDoubleTap(event);
         }
       }, [onDoubleTap]);
-      const onLongPressCb = (0, import_react23.useCallback)(() => {
+      const onLongPressCb = (0, import_react24.useCallback)(() => {
         if (onLongPress) {
           const event = {
             target: layoutInstanceRef.current
@@ -5934,7 +5983,7 @@ var require_default = __commonJS({
         },
         onModel3DContainerReadyCb
       );
-      const onSuccess = (0, import_react23.useCallback)(() => {
+      const onSuccess = (0, import_react24.useCallback)(() => {
         ;
         layoutInstanceRef.current.ready = true;
         if (onLoad) {
@@ -5943,7 +5992,7 @@ var require_default = __commonJS({
           });
         }
       }, [onLoad]);
-      const onFailure = (0, import_react23.useCallback)(
+      const onFailure = (0, import_react24.useCallback)(
         (_) => {
           const modelElement = layoutInstanceRef.current;
           modelElement.ready = false;
@@ -5955,19 +6004,19 @@ var require_default = __commonJS({
         },
         [onLoad]
       );
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (phase === "failure") {
           onFailure(failureReason);
         } else if (phase === "success") {
           onSuccess();
         }
       }, [phase]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setVisible(visible);
         }
       }, [model3DNativeRef.current, visible]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current && layoutInstanceRef.current) {
           model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
             spatialTransform: theSpatialTransform
@@ -5985,17 +6034,17 @@ var require_default = __commonJS({
         theSpatialTransform.scale.y,
         theSpatialTransform.scale.z
       ]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setContentMode(contentMode);
         }
       }, [model3DNativeRef.current, contentMode]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setResizable(resizable);
         }
       }, [model3DNativeRef.current, resizable]);
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setAspectRatio(aspectRatio);
         }
@@ -6005,7 +6054,7 @@ var require_default = __commonJS({
         visibility: phase === "failure" ? "visible" : "hidden",
         transform: ""
       };
-      const proxyRef = (0, import_react23.useMemo)(
+      const proxyRef = (0, import_react24.useMemo)(
         () => new Proxy(layoutInstanceRef, {
           get(target, prop, receiver) {
             return Reflect.get(target, prop, receiver);
@@ -6030,7 +6079,7 @@ var require_default = __commonJS({
         }),
         [layoutInstanceRef, refIn]
       );
-      (0, import_react23.useEffect)(() => {
+      (0, import_react24.useEffect)(() => {
         return () => {
           if (layoutInstanceRef.current) {
             const modelElement = layoutInstanceRef.current;
@@ -6039,17 +6088,17 @@ var require_default = __commonJS({
           }
         };
       }, [modelUrl]);
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
     }
     __name(renderModel3DNotInSpatialDiv, "renderModel3DNotInSpatialDiv");
     __name2(renderModel3DNotInSpatialDiv, "renderModel3DNotInSpatialDiv");
-    var import_jsx_runtime9 = require("react/jsx-runtime");
+    var import_jsx_runtime10 = require("react/jsx-runtime");
     function renderModel3DStandardInstance(spatialId, props, refIn) {
       const { className, style } = props;
       const extraProps = {
         [SpatialID]: spatialId
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           "data-model3d-spatialid": spatialId,
@@ -6062,26 +6111,26 @@ var require_default = __commonJS({
     }
     __name(renderModel3DStandardInstance, "renderModel3DStandardInstance");
     __name2(renderModel3DStandardInstance, "renderModel3DStandardInstance");
+    var import_react26 = require("react");
     var import_react25 = require("react");
-    var import_react24 = require("react");
     function useSyncDomInfoFromStandardInstance(spatialId) {
-      const [domRect, setDomRect] = (0, import_react24.useState)({
+      const [domRect, setDomRect] = (0, import_react25.useState)({
         x: 0,
         y: 0,
         width: 0,
         height: 0
       });
-      const inheritedPortalStyleRef = (0, import_react24.useRef)({});
-      const anchorRef = (0, import_react24.useRef)({
+      const inheritedPortalStyleRef = (0, import_react25.useRef)({});
+      const anchorRef = (0, import_react25.useRef)({
         x: 0.5,
         y: 0.5,
         z: 0.5
       });
-      const opacityRef = (0, import_react24.useRef)(1);
-      const spatialReactContextObject = (0, import_react24.useContext)(SpatialReactContext);
-      const inheritedPortalClassNameRef = (0, import_react24.useRef)("");
-      const modelRef = (0, import_react24.useRef)(null);
-      (0, import_react24.useEffect)(() => {
+      const opacityRef = (0, import_react25.useRef)(1);
+      const spatialReactContextObject = (0, import_react25.useContext)(SpatialReactContext);
+      const inheritedPortalClassNameRef = (0, import_react25.useRef)("");
+      const modelRef = (0, import_react25.useRef)(null);
+      (0, import_react25.useEffect)(() => {
         const syncDomRect = /* @__PURE__ */ __name2(() => {
           const dom = spatialReactContextObject?.querySpatialDom(spatialId);
           if (!dom) {
@@ -6122,7 +6171,7 @@ var require_default = __commonJS({
     }
     __name(useSyncDomInfoFromStandardInstance, "useSyncDomInfoFromStandardInstance");
     __name2(useSyncDomInfoFromStandardInstance, "useSyncDomInfoFromStandardInstance");
-    var import_jsx_runtime10 = require("react/jsx-runtime");
+    var import_jsx_runtime11 = require("react/jsx-runtime");
     function useModelEvents(props, modelRef) {
       const {
         onDragStart,
@@ -6132,7 +6181,7 @@ var require_default = __commonJS({
         onDoubleTap,
         onLongPress
       } = props;
-      const onDragStartCb = (0, import_react25.useCallback)(
+      const onDragStartCb = (0, import_react26.useCallback)(
         (spatialDragEvent) => {
           if (onDragStart) {
             const dragEvent = {
@@ -6144,7 +6193,7 @@ var require_default = __commonJS({
         },
         [onDragStart]
       );
-      const onDragCb = (0, import_react25.useCallback)(
+      const onDragCb = (0, import_react26.useCallback)(
         (spatialDragEvent) => {
           if (onDrag) {
             const dragEvent = {
@@ -6156,7 +6205,7 @@ var require_default = __commonJS({
         },
         [onDrag]
       );
-      const onDragEndCb = (0, import_react25.useCallback)(
+      const onDragEndCb = (0, import_react26.useCallback)(
         (spatialDragEvent) => {
           if (onDragEnd) {
             const dragEvent = {
@@ -6168,7 +6217,7 @@ var require_default = __commonJS({
         },
         [onDragEnd]
       );
-      const onTapCb = (0, import_react25.useCallback)(() => {
+      const onTapCb = (0, import_react26.useCallback)(() => {
         if (onTap) {
           const event = {
             target: modelRef.current
@@ -6176,7 +6225,7 @@ var require_default = __commonJS({
           onTap(event);
         }
       }, [onTap]);
-      const onDoubleTapCb = (0, import_react25.useCallback)(() => {
+      const onDoubleTapCb = (0, import_react26.useCallback)(() => {
         if (onDoubleTap) {
           const event = {
             target: modelRef.current
@@ -6184,7 +6233,7 @@ var require_default = __commonJS({
           onDoubleTap(event);
         }
       }, [onDoubleTap]);
-      const onLongPressCb = (0, import_react25.useCallback)(() => {
+      const onLongPressCb = (0, import_react26.useCallback)(() => {
         if (onLongPress) {
           const event = {
             target: modelRef.current
@@ -6215,7 +6264,7 @@ var require_default = __commonJS({
         onLoad,
         children
       } = props;
-      const theSpatialTransform = (0, import_react25.useMemo)(() => {
+      const theSpatialTransform = (0, import_react26.useMemo)(() => {
         return PopulatePartialSpatialTransformType(spatialTransform);
       }, [spatialTransform]);
       const {
@@ -6226,7 +6275,7 @@ var require_default = __commonJS({
         opacity,
         className
       } = useSyncDomInfoFromStandardInstance(spatialId);
-      const parentSpatialWindowManager = (0, import_react25.useContext)(SpatialWindowManagerContext);
+      const parentSpatialWindowManager = (0, import_react26.useContext)(SpatialWindowManagerContext);
       const eventHandlers = useModelEvents(
         props,
         modelRef
@@ -6236,7 +6285,7 @@ var require_default = __commonJS({
         parentSpatialWindowManager.entity,
         eventHandlers
       );
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.updateRectAndTransform(
             domRect,
@@ -6244,37 +6293,37 @@ var require_default = __commonJS({
           );
         }
       }, [model3DNativeRef.current, domRect, theSpatialTransform]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setRotationAnchor(anchor);
         }
       }, [model3DNativeRef.current, anchor]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setVisible(visible);
         }
       }, [model3DNativeRef.current, visible]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setContentMode(contentMode);
         }
       }, [model3DNativeRef.current, contentMode]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setResizable(resizable);
         }
       }, [model3DNativeRef.current, resizable]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setAspectRatio(aspectRatio);
         }
       }, [model3DNativeRef.current, aspectRatio]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (model3DNativeRef.current) {
           model3DNativeRef.current.setOpacity(opacity);
         }
       }, [model3DNativeRef.current, opacity]);
-      const onSuccess = (0, import_react25.useCallback)(() => {
+      const onSuccess = (0, import_react26.useCallback)(() => {
         ;
         modelRef.current.ready = true;
         if (onLoad) {
@@ -6283,7 +6332,7 @@ var require_default = __commonJS({
           });
         }
       }, [onLoad]);
-      const onFailure = (0, import_react25.useCallback)(
+      const onFailure = (0, import_react26.useCallback)(
         (_2) => {
           const modelElement = modelRef.current;
           modelElement.ready = false;
@@ -6295,14 +6344,14 @@ var require_default = __commonJS({
         },
         [onLoad]
       );
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         if (phase === "failure") {
           onFailure(failureReason);
         } else if (phase === "success") {
           onSuccess();
         }
       }, [phase]);
-      (0, import_react25.useEffect)(() => {
+      (0, import_react26.useEffect)(() => {
         return () => {
           const modelElement = modelRef.current;
           if (modelElement) {
@@ -6313,7 +6362,7 @@ var require_default = __commonJS({
       }, [modelUrl]);
       const needRenderPlaceHolder = inheritedPortalStyle.position !== "absolute";
       if (!needRenderPlaceHolder && phase !== "failure") {
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
       } else {
         const extraStyle = {
           visibility: "visible",
@@ -6333,7 +6382,7 @@ var require_default = __commonJS({
           ...inheritedPortalStyle,
           ...extraStyle
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             "data-model3d-spatialid": spatialId,
@@ -6347,12 +6396,12 @@ var require_default = __commonJS({
     __name(renderModel3DPortalInstance, "renderModel3DPortalInstance");
     __name2(renderModel3DPortalInstance, "renderModel3DPortalInstance");
     function Model3DBase(props, refIn) {
-      const parentSpatialReactContextObject = (0, import_react26.useContext)(SpatialReactContext);
+      const parentSpatialReactContextObject = (0, import_react27.useContext)(SpatialReactContext);
       const isInSpatialDiv = !!parentSpatialReactContextObject;
       if (isInSpatialDiv) {
-        const layer = (0, import_react26.useContext)(SpatialLayerContext) + 1;
-        const isInStandardInstance = !!(0, import_react26.useContext)(SpatialIsStandardInstanceContext);
-        const spatialId = (0, import_react26.useMemo)(() => {
+        const layer = (0, import_react27.useContext)(SpatialLayerContext) + 1;
+        const isInStandardInstance = !!(0, import_react27.useContext)(SpatialIsStandardInstanceContext);
+        const spatialId = (0, import_react27.useMemo)(() => {
           return parentSpatialReactContextObject.getSpatialID(
             layer,
             isInStandardInstance,
@@ -6370,10 +6419,10 @@ var require_default = __commonJS({
     }
     __name(Model3DBase, "Model3DBase");
     __name2(Model3DBase, "Model3DBase");
-    var Model3D = (0, import_react26.forwardRef)(Model3DBase);
+    var Model3D = (0, import_react27.forwardRef)(Model3DBase);
     Model3D.displayName = "Model3D";
-    var import_react29 = require("react");
-    var import_jsx_runtime11 = require("react/jsx-runtime");
+    var import_react30 = require("react");
+    var import_jsx_runtime12 = require("react/jsx-runtime");
     function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
       const { className, style = {}, ...props } = inProps;
       const cssParserDomStyle = {
@@ -6396,8 +6445,8 @@ var require_default = __commonJS({
         ...style,
         transform: "none"
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        ready && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        ready && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Model3D,
           {
             className,
@@ -6408,7 +6457,7 @@ var require_default = __commonJS({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className,
@@ -6420,8 +6469,8 @@ var require_default = __commonJS({
     }
     __name(renderCSSModel3DNotInSpatialDiv, "renderCSSModel3DNotInSpatialDiv");
     __name2(renderCSSModel3DNotInSpatialDiv, "renderCSSModel3DNotInSpatialDiv");
-    var import_react27 = require("react");
-    var import_jsx_runtime12 = require("react/jsx-runtime");
+    var import_react28 = require("react");
+    var import_jsx_runtime13 = require("react/jsx-runtime");
     function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
       const { style: inStyle = {}, ...props } = inProps;
       const style = {
@@ -6429,13 +6478,13 @@ var require_default = __commonJS({
         transform: "none",
         visibility: "hidden"
       };
-      var cssParserRef = (0, import_react27.useRef)(null);
+      var cssParserRef = (0, import_react28.useRef)(null);
       const ref = useHijackSpatialDivRef(
         refIn,
         cssParserRef
       );
-      const rootSpatialReactContextObject = (0, import_react27.useContext)(SpatialReactContext);
-      (0, import_react27.useEffect)(() => {
+      const rootSpatialReactContextObject = (0, import_react28.useContext)(SpatialReactContext);
+      (0, import_react28.useEffect)(() => {
         const onSubEvent = /* @__PURE__ */ __name2((dom) => {
           cssParserRef.current = dom;
         }, "onSubEvent");
@@ -6444,15 +6493,15 @@ var require_default = __commonJS({
           rootSpatialReactContextObject.offSubDivEvent(spatialId);
         };
       }, []);
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Model3D, { style, ...props, ref, visible: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Model3D, { style, ...props, ref, visible: true });
     }
     __name(renderCSSModel3DStandardInstance, "renderCSSModel3DStandardInstance");
     __name2(renderCSSModel3DStandardInstance, "renderCSSModel3DStandardInstance");
-    var import_react28 = require("react");
-    var import_jsx_runtime13 = require("react/jsx-runtime");
+    var import_react29 = require("react");
+    var import_jsx_runtime14 = require("react/jsx-runtime");
     function renderCSSModel3DPortalInstance(spatialId, inProps) {
       const { className, style = {}, ...props } = inProps;
-      const rootSpatialReactContextObject = (0, import_react28.useContext)(SpatialReactContext);
+      const rootSpatialReactContextObject = (0, import_react29.useContext)(SpatialReactContext);
       const { ref, spatialStyle, ready } = useSpatialStyle();
       const spatialTransform = {
         position: spatialStyle.position,
@@ -6460,7 +6509,7 @@ var require_default = __commonJS({
         scale: spatialStyle.scale
       };
       const visible = spatialStyle.visible;
-      (0, import_react28.useEffect)(() => {
+      (0, import_react29.useEffect)(() => {
         rootSpatialReactContextObject.notifySubDivEvent(spatialId, ref.current);
       }, [ref.current]);
       const cssParserDomStyle = {
@@ -6472,8 +6521,8 @@ var require_default = __commonJS({
         ...style,
         transform: "none"
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        ready && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+        ready && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Model3D,
           {
             className,
@@ -6483,18 +6532,18 @@ var require_default = __commonJS({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style: cssParserDomStyle, ref })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, style: cssParserDomStyle, ref })
       ] });
     }
     __name(renderCSSModel3DPortalInstance, "renderCSSModel3DPortalInstance");
     __name2(renderCSSModel3DPortalInstance, "renderCSSModel3DPortalInstance");
     function CSSModel3DBase(props, refIn) {
-      const rootSpatialReactContextObject = (0, import_react29.useContext)(SpatialReactContext);
+      const rootSpatialReactContextObject = (0, import_react30.useContext)(SpatialReactContext);
       const isInSpatialDiv = !!rootSpatialReactContextObject;
       if (isInSpatialDiv) {
-        const layer = (0, import_react29.useContext)(SpatialLayerContext) + 1;
-        const isInStandardInstance = !!(0, import_react29.useContext)(SpatialIsStandardInstanceContext);
-        const spatialId = (0, import_react29.useMemo)(() => {
+        const layer = (0, import_react30.useContext)(SpatialLayerContext) + 1;
+        const isInStandardInstance = !!(0, import_react30.useContext)(SpatialIsStandardInstanceContext);
+        const spatialId = (0, import_react30.useMemo)(() => {
           return rootSpatialReactContextObject.getSubDivSpatialID(
             layer,
             isInStandardInstance,
@@ -6512,61 +6561,8 @@ var require_default = __commonJS({
     }
     __name(CSSModel3DBase, "CSSModel3DBase");
     __name2(CSSModel3DBase, "CSSModel3DBase");
-    var CSSModel3D = (0, import_react29.forwardRef)(CSSModel3DBase);
+    var CSSModel3D = (0, import_react30.forwardRef)(CSSModel3DBase);
     CSSModel3D.displayName = "CSSModel3D";
-    var import_core_sdk2 = require("@webspatial/core-sdk");
-    var import_react30 = require("react");
-    var import_jsx_runtime14 = require("react/jsx-runtime");
-    var runAsync = /* @__PURE__ */ __name2((fn) => {
-      return fn();
-    }, "runAsync");
-    var SpatialViewEl = (0, import_react30.forwardRef)(
-      (props, ref) => {
-        const divRef = (0, import_react30.useRef)(null);
-        const spatialEntity = (0, import_react30.useRef)(null);
-        const activePromise = (0, import_react30.useRef)(null);
-        (0, import_react30.useImperativeHandle)(ref, () => ({
-          ...divRef.current,
-          getViewEntity: /* @__PURE__ */ __name2(async () => {
-            if (activePromise.current) {
-              await activePromise.current;
-            }
-            return spatialEntity.current;
-          }, "getViewEntity")
-        }));
-        if (getSession3() == null) {
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
-        }
-        (0, import_react30.useEffect)(() => {
-          if (false) return;
-          activePromise.current = runAsync(async () => {
-            if (activePromise.current) {
-              await activePromise.current;
-            }
-            let sh = new import_core_sdk2.SpatialHelper(getSession3());
-            let x = await sh.dom.attachSpatialView(divRef.current);
-            spatialEntity.current = x.entity;
-            if (props.onViewLoad) {
-              props.onViewLoad(x.entity);
-            }
-          });
-          return () => {
-            if (false) return;
-            runAsync(async () => {
-              await activePromise.current;
-              spatialEntity.current?.destroy();
-              if (props.onViewUnload) {
-                props.onViewUnload();
-              }
-            });
-          };
-        }, []);
-        const { onViewLoad, onViewUnload, ...divProps } = props;
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: divRef, ...divProps });
-      }
-    );
-    var SpatialView = SpatialViewEl;
-    var import_react31 = require("react");
     var import_model_viewer = require("@google/model-viewer");
     var import_jsx_runtime15 = require("react/jsx-runtime");
     function renderInModel3D(inProps, ref, modelUrl, placeHolder) {