@webspatial/react-sdk 0.0.0 → 0.0.1

package/dist/cjs/default/index.js

@@ -31,11 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  CSSModel3D: () => CSSModel3D,
   CSSSpatialDiv: () => CSSSpatialDiv,
   CSSSpatialPrimitive: () => CSSSpatialPrimitive,
   Model: () => Model,
-  Model3D: () => Model3D,
   SpatialDiv: () => SpatialDiv,
   SpatialMonitor: () => SpatialMonitor,
   SpatialPrimitive: () => SpatialPrimitive,
@@ -2060,14 +2058,71 @@ var CSSSpatialPrimitive = {};
 }, "createSpatialPrimitive"))(CSSSpatialPrimitive);
 var CSSSpatialDiv = CSSSpatialPrimitive.div;
 
+// src/spatial-react-components/SpatialView.tsx
+var import_core_sdk2 = require("@webspatial/core-sdk");
+var import_react21 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var runAsync = /* @__PURE__ */ __name((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__ */ __name(async () => {
+        if (activePromise.current) {
+          await activePromise.current;
+        }
+        return spatialEntity.current;
+      }, "getViewEntity")
+    }));
+    if (getSession() == 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(getSession());
+        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;
+
+// src/spatial-react-components/Model/index.tsx
+var import_react31 = require("react");
+
 // src/spatial-react-components/Model3D/Model3D.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/spatial-react-components/Model3D/useDetectLayoutDomUpdated.ts
-var import_react21 = 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;
@@ -2080,7 +2135,7 @@ function useDetectLayoutDomUpdated(onDomUpdated) {
       ro.disconnect();
     };
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
       return;
@@ -2102,7 +2157,7 @@ function useDetectLayoutDomUpdated(onDomUpdated) {
 __name(useDetectLayoutDomUpdated, "useDetectLayoutDomUpdated");
 
 // src/spatial-react-components/Model3D/useModel3DNative.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/spatial-react-components/Model3D/utils.ts
 function PopulatePartialSpatialTransformType(spatialTransform = {}) {
@@ -2330,12 +2385,12 @@ var Model3DNative = class {
 
 // src/spatial-react-components/Model3D/useModel3DNative.ts
 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(
@@ -2362,32 +2417,32 @@ function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DN
       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;
     }
@@ -2397,8 +2452,8 @@ function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DN
 __name(useModel3DNative, "useModel3DNative");
 
 // src/spatial-react-components/Model3D/Model3DNotInSpatialDiv.tsx
-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,
@@ -2419,7 +2474,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     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, {
@@ -2438,7 +2493,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     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
@@ -2456,7 +2511,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     theSpatialTransform.scale.y,
     theSpatialTransform.scale.z
   ]);
-  const onDragStartCb = (0, import_react23.useCallback)(
+  const onDragStartCb = (0, import_react24.useCallback)(
     (spatialDragEvent) => {
       if (onDragStart) {
         const dragEvent = {
@@ -2468,7 +2523,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onDragStart]
   );
-  const onDragCb = (0, import_react23.useCallback)(
+  const onDragCb = (0, import_react24.useCallback)(
     (spatialDragEvent) => {
       if (onDrag) {
         const dragEvent = {
@@ -2480,7 +2535,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onDrag]
   );
-  const onDragEndCb = (0, import_react23.useCallback)(
+  const onDragEndCb = (0, import_react24.useCallback)(
     (spatialDragEvent) => {
       if (onDragEnd) {
         const dragEvent = {
@@ -2492,7 +2547,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onDragEnd]
   );
-  const onTapCb = (0, import_react23.useCallback)(() => {
+  const onTapCb = (0, import_react24.useCallback)(() => {
     if (onTap) {
       const event = {
         target: layoutInstanceRef.current
@@ -2500,7 +2555,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       onTap(event);
     }
   }, [onTap]);
-  const onDoubleTapCb = (0, import_react23.useCallback)(() => {
+  const onDoubleTapCb = (0, import_react24.useCallback)(() => {
     if (onDoubleTap) {
       const event = {
         target: layoutInstanceRef.current
@@ -2508,7 +2563,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       onDoubleTap(event);
     }
   }, [onDoubleTap]);
-  const onLongPressCb = (0, import_react23.useCallback)(() => {
+  const onLongPressCb = (0, import_react24.useCallback)(() => {
     if (onLongPress) {
       const event = {
         target: layoutInstanceRef.current
@@ -2530,7 +2585,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     onModel3DContainerReadyCb
   );
-  const onSuccess = (0, import_react23.useCallback)(() => {
+  const onSuccess = (0, import_react24.useCallback)(() => {
     ;
     layoutInstanceRef.current.ready = true;
     if (onLoad) {
@@ -2539,7 +2594,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       });
     }
   }, [onLoad]);
-  const onFailure = (0, import_react23.useCallback)(
+  const onFailure = (0, import_react24.useCallback)(
     (_) => {
       const modelElement = layoutInstanceRef.current;
       modelElement.ready = false;
@@ -2551,19 +2606,19 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [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
@@ -2581,17 +2636,17 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     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);
     }
@@ -2601,7 +2656,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     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);
@@ -2626,7 +2681,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     }),
     [layoutInstanceRef, refIn]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     return () => {
       if (layoutInstanceRef.current) {
         const modelElement = layoutInstanceRef.current;
@@ -2635,18 +2690,18 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       }
     };
   }, [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");
 
 // src/spatial-react-components/Model3D/Model3DStandardInstance.tsx
-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,
@@ -2660,28 +2715,28 @@ function renderModel3DStandardInstance(spatialId, props, refIn) {
 __name(renderModel3DStandardInstance, "renderModel3DStandardInstance");
 
 // src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/spatial-react-components/Model3D/useSyncDomInfoFromStandardInstance.ts
-var import_react24 = require("react");
+var import_react25 = 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__ */ __name(() => {
       const dom = spatialReactContextObject?.querySpatialDom(spatialId);
       if (!dom) {
@@ -2723,7 +2778,7 @@ function useSyncDomInfoFromStandardInstance(spatialId) {
 __name(useSyncDomInfoFromStandardInstance, "useSyncDomInfoFromStandardInstance");
 
 // src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function useModelEvents(props, modelRef) {
   const {
     onDragStart,
@@ -2733,7 +2788,7 @@ function useModelEvents(props, modelRef) {
     onDoubleTap,
     onLongPress
   } = props;
-  const onDragStartCb = (0, import_react25.useCallback)(
+  const onDragStartCb = (0, import_react26.useCallback)(
     (spatialDragEvent) => {
       if (onDragStart) {
         const dragEvent = {
@@ -2745,7 +2800,7 @@ function useModelEvents(props, modelRef) {
     },
     [onDragStart]
   );
-  const onDragCb = (0, import_react25.useCallback)(
+  const onDragCb = (0, import_react26.useCallback)(
     (spatialDragEvent) => {
       if (onDrag) {
         const dragEvent = {
@@ -2757,7 +2812,7 @@ function useModelEvents(props, modelRef) {
     },
     [onDrag]
   );
-  const onDragEndCb = (0, import_react25.useCallback)(
+  const onDragEndCb = (0, import_react26.useCallback)(
     (spatialDragEvent) => {
       if (onDragEnd) {
         const dragEvent = {
@@ -2769,7 +2824,7 @@ function useModelEvents(props, modelRef) {
     },
     [onDragEnd]
   );
-  const onTapCb = (0, import_react25.useCallback)(() => {
+  const onTapCb = (0, import_react26.useCallback)(() => {
     if (onTap) {
       const event = {
         target: modelRef.current
@@ -2777,7 +2832,7 @@ function useModelEvents(props, modelRef) {
       onTap(event);
     }
   }, [onTap]);
-  const onDoubleTapCb = (0, import_react25.useCallback)(() => {
+  const onDoubleTapCb = (0, import_react26.useCallback)(() => {
     if (onDoubleTap) {
       const event = {
         target: modelRef.current
@@ -2785,7 +2840,7 @@ function useModelEvents(props, modelRef) {
       onDoubleTap(event);
     }
   }, [onDoubleTap]);
-  const onLongPressCb = (0, import_react25.useCallback)(() => {
+  const onLongPressCb = (0, import_react26.useCallback)(() => {
     if (onLongPress) {
       const event = {
         target: modelRef.current
@@ -2815,7 +2870,7 @@ function renderModel3DPortalInstance(spatialId, props) {
     onLoad,
     children
   } = props;
-  const theSpatialTransform = (0, import_react25.useMemo)(() => {
+  const theSpatialTransform = (0, import_react26.useMemo)(() => {
     return PopulatePartialSpatialTransformType(spatialTransform);
   }, [spatialTransform]);
   const {
@@ -2826,7 +2881,7 @@ function renderModel3DPortalInstance(spatialId, props) {
     opacity,
     className
   } = useSyncDomInfoFromStandardInstance(spatialId);
-  const parentSpatialWindowManager = (0, import_react25.useContext)(SpatialWindowManagerContext);
+  const parentSpatialWindowManager = (0, import_react26.useContext)(SpatialWindowManagerContext);
   const eventHandlers = useModelEvents(
     props,
     modelRef
@@ -2836,7 +2891,7 @@ function renderModel3DPortalInstance(spatialId, props) {
     parentSpatialWindowManager.entity,
     eventHandlers
   );
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.updateRectAndTransform(
         domRect,
@@ -2844,37 +2899,37 @@ function renderModel3DPortalInstance(spatialId, props) {
       );
     }
   }, [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) {
@@ -2883,7 +2938,7 @@ function renderModel3DPortalInstance(spatialId, props) {
       });
     }
   }, [onLoad]);
-  const onFailure = (0, import_react25.useCallback)(
+  const onFailure = (0, import_react26.useCallback)(
     (_2) => {
       const modelElement = modelRef.current;
       modelElement.ready = false;
@@ -2895,14 +2950,14 @@ function renderModel3DPortalInstance(spatialId, props) {
     },
     [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) {
@@ -2913,7 +2968,7 @@ function renderModel3DPortalInstance(spatialId, props) {
   }, [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",
@@ -2933,7 +2988,7 @@ function renderModel3DPortalInstance(spatialId, props) {
       ...inheritedPortalStyle,
       ...extraStyle
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         "data-model3d-spatialid": spatialId,
@@ -2948,12 +3003,12 @@ __name(renderModel3DPortalInstance, "renderModel3DPortalInstance");
 
 // src/spatial-react-components/Model3D/Model3D.tsx
 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,
@@ -2970,14 +3025,14 @@ function Model3DBase(props, refIn) {
   }
 }
 __name(Model3DBase, "Model3DBase");
-var Model3D = (0, import_react26.forwardRef)(Model3DBase);
+var Model3D = (0, import_react27.forwardRef)(Model3DBase);
 Model3D.displayName = "Model3D";
 
 // src/spatial-react-components/Model3D/CSSModel3D.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/spatial-react-components/Model3D/CSSModel3DNotInSpatialDiv.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
   const { className, style = {}, ...props } = inProps;
   const cssParserDomStyle = {
@@ -3000,8 +3055,8 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
     ...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 +3067,7 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className,
@@ -3025,8 +3080,8 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
 __name(renderCSSModel3DNotInSpatialDiv, "renderCSSModel3DNotInSpatialDiv");
 
 // src/spatial-react-components/Model3D/CSSModel3DStandardInstance.tsx
-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 = {
@@ -3034,13 +3089,13 @@ function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
     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__ */ __name((dom) => {
       cssParserRef.current = dom;
     }, "onSubEvent");
@@ -3049,16 +3104,16 @@ function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
       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");
 
 // src/spatial-react-components/Model3D/CSSModel3DPortalInstance.tsx
-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,
@@ -3066,7 +3121,7 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
     scale: spatialStyle.scale
   };
   const visible = spatialStyle.visible;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     rootSpatialReactContextObject.notifySubDivEvent(spatialId, ref.current);
   }, [ref.current]);
   const cssParserDomStyle = {
@@ -3078,8 +3133,8 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
     ...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,
@@ -3089,19 +3144,19 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
         ...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");
 
 // src/spatial-react-components/Model3D/CSSModel3D.tsx
 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,
@@ -3118,65 +3173,10 @@ function CSSModel3DBase(props, refIn) {
   }
 }
 __name(CSSModel3DBase, "CSSModel3DBase");
-var CSSModel3D = (0, import_react29.forwardRef)(CSSModel3DBase);
+var CSSModel3D = (0, import_react30.forwardRef)(CSSModel3DBase);
 CSSModel3D.displayName = "CSSModel3D";
 
-// src/spatial-react-components/SpatialView.tsx
-var import_core_sdk2 = require("@webspatial/core-sdk");
-var import_react30 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var runAsync = /* @__PURE__ */ __name((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__ */ __name(async () => {
-        if (activePromise.current) {
-          await activePromise.current;
-        }
-        return spatialEntity.current;
-      }, "getViewEntity")
-    }));
-    if (getSession() == 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(getSession());
-        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;
-
 // src/spatial-react-components/Model/index.tsx
-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) {