@webspatial/react-sdk 0.0.10 → 0.0.11

package/dist/web/index.js

@@ -1,56 +1,5 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  CSSSpatialDiv: () => CSSSpatialDiv,
-  CSSSpatialPrimitive: () => CSSSpatialPrimitive,
-  Model: () => Model,
-  SpatialDiv: () => SpatialDiv,
-  SpatialMonitor: () => SpatialMonitor,
-  SpatialPrimitive: () => SpatialPrimitive,
-  SpatialView: () => SpatialView,
-  XRApp: () => XRApp,
-  defaultSceneConfig: () => defaultSceneConfig,
-  enableDebugTool: () => enableDebugTool,
-  getSession: () => getSession,
-  initScene: () => initScene,
-  notifyUpdateStandInstanceLayout: () => notifyUpdateStandInstanceLayout,
-  parseCornerRadius: () => parseCornerRadius,
-  withCSSSpatial: () => withCSSSpatial,
-  withSpatial: () => withSpatial
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/spatial-react-components/SpatialPrimitive.tsx
-var import_react11 = require("react");
+import { forwardRef as forwardRef3 } from "react";
 
 // src/spatial-react-components/primitives.ts
 var primitives = [
@@ -191,16 +140,16 @@ var primitives = [
 ];
 
 // src/spatial-react-components/SpatialReactComponent/SpatialReactComponent.tsx
-var import_react10 = require("react");
+import { forwardRef as forwardRef2, useMemo as useMemo2, useContext as useContext4 } from "react";
 
 // src/utils/getSession.ts
-var import_core_sdk = require("@webspatial/core-sdk");
+import { Spatial } from "@webspatial/core-sdk";
 var spatial = null;
 var _currentSession = null;
 function getSession() {
   if (true) return null;
   if (!spatial) {
-    spatial = new import_core_sdk.Spatial();
+    spatial = new Spatial();
   }
   if (!spatial.isSupported()) {
     return null;
@@ -277,23 +226,29 @@ function enableDebugTool() {
 }
 
 // src/spatial-react-components/SpatialReactComponent/StandardInstance.tsx
-var import_react4 = require("react");
+import {
+  useRef,
+  useLayoutEffect,
+  useEffect,
+  useContext,
+  forwardRef
+} from "react";
 
 // src/spatial-react-components/hooks/useForceUpdate.ts
-var import_react = require("react");
+import { useState } from "react";
 function useForceUpdate() {
-  const [, setToggle] = (0, import_react.useState)(false);
+  const [, setToggle] = useState(false);
   return () => setToggle((toggle) => !toggle);
 }
 
 // src/spatial-react-components/SpatialReactComponent/SpatialIsStandardInstanceContext.ts
-var import_react2 = require("react");
-var SpatialIsStandardInstanceContext = (0, import_react2.createContext)(
+import { createContext } from "react";
+var SpatialIsStandardInstanceContext = createContext(
   null
 );
 
 // src/spatial-react-components/SpatialReactComponent/SpatialReactContext.ts
-var import_react3 = require("react");
+import { createContext as createContext2 } from "react";
 
 // src/spatial-react-components/SpatialReactComponent/const.ts
 var SpatialID = "data-spatial-id";
@@ -403,18 +358,18 @@ var SpatialReactContextObject = class {
     }
   }
 };
-var SpatialReactContext = (0, import_react3.createContext)(null);
+var SpatialReactContext = createContext2(null);
 
 // src/spatial-react-components/SpatialReactComponent/StandardInstance.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+import { jsx } from "react/jsx-runtime";
 function useDetectDomRectChange() {
-  const ref = (0, import_react4.useRef)(null);
+  const ref = useRef(null);
   const forceUpdate = useForceUpdate();
-  const spatialReactContextObject = (0, import_react4.useContext)(SpatialReactContext);
-  (0, import_react4.useLayoutEffect)(() => {
+  const spatialReactContextObject = useContext(SpatialReactContext);
+  useLayoutEffect(() => {
     ref.current && spatialReactContextObject?.notifyDomChange(ref.current);
   });
-  (0, import_react4.useEffect)(() => {
+  useEffect(() => {
     if (!ref.current || !spatialReactContextObject) {
       console.warn(
         "Ref is not attached to the DOM or spatialReactContextObject is not available"
@@ -429,7 +384,7 @@ function useDetectDomRectChange() {
       window.removeEventListener("resize", handleResize);
     };
   }, [spatialReactContextObject]);
-  (0, import_react4.useEffect)(() => {
+  useEffect(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
       return;
@@ -442,7 +397,7 @@ function useDetectDomRectChange() {
       ro.disconnect();
     };
   }, []);
-  (0, import_react4.useEffect)(() => {
+  useEffect(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
       return;
@@ -460,7 +415,7 @@ function useDetectDomRectChange() {
   }, []);
   return ref;
 }
-var StandardInstance = (0, import_react4.forwardRef)(function(inProps, refIn) {
+var StandardInstance = forwardRef(function(inProps, refIn) {
   const { El, style: inStyle, debugShowStandardInstance, ...props } = inProps;
   const extraStyle = {
     visibility: debugShowStandardInstance ? void 0 : "hidden",
@@ -486,16 +441,23 @@ var StandardInstance = (0, import_react4.forwardRef)(function(inProps, refIn) {
       return Reflect.set(target, prop, value, receiver);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpatialIsStandardInstanceContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { "data-standardinstance": true, ref: proxyRef, style, ...props }) });
+  return /* @__PURE__ */ jsx(SpatialIsStandardInstanceContext.Provider, { value: true, children: /* @__PURE__ */ jsx(El, { "data-standardinstance": true, ref: proxyRef, style, ...props }) });
 });
 StandardInstance.displayName = "StandardInstance";
 
 // src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
-var import_react8 = require("react");
-var import_react_dom = require("react-dom");
+import {
+  useRef as useRef3,
+  useCallback,
+  useEffect as useEffect3,
+  useState as useState2,
+  useContext as useContext3,
+  useMemo
+} from "react";
+import { createPortal } from "react-dom";
 
 // src/spatial-react-components/SpatialReactComponent/usePortalContainer.tsx
-var import_react6 = require("react");
+import { useContext as useContext2, useRef as useRef2, useEffect as useEffect2 } from "react";
 
 // src/spatial-react-components/SpatialReactComponent/SpatialWindowManager.ts
 var SpatialWindowManager = class {
@@ -586,16 +548,16 @@ var SpatialWindowManager = class {
 };
 
 // src/spatial-react-components/SpatialReactComponent/SpatialWindowManagerContext.ts
-var import_react5 = require("react");
-var SpatialWindowManagerContext = (0, import_react5.createContext)(null);
+import { createContext as createContext3 } from "react";
+var SpatialWindowManagerContext = createContext3(null);
 
 // src/spatial-react-components/SpatialReactComponent/usePortalContainer.tsx
 function usePortalContainer(options) {
-  const isStandard = (0, import_react6.useContext)(SpatialIsStandardInstanceContext);
-  const parentSpatialWindowManager = (0, import_react6.useContext)(SpatialWindowManagerContext);
+  const isStandard = useContext2(SpatialIsStandardInstanceContext);
+  const parentSpatialWindowManager = useContext2(SpatialWindowManagerContext);
   const forceUpdate = useForceUpdate();
-  const spatialWindowManagerRef = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
+  const spatialWindowManagerRef = useRef2();
+  useEffect2(() => {
     let isDestroyed = false;
     let spawnedResult;
     async function asyncCreatePortalContainer() {
@@ -739,8 +701,8 @@ function parseCornerRadius(computedStyle) {
 }
 
 // src/spatial-react-components/SpatialReactComponent/SpatialDebugNameContext.ts
-var import_react7 = require("react");
-var SpatialDebugNameContext = (0, import_react7.createContext)("");
+import { createContext as createContext4 } from "react";
+var SpatialDebugNameContext = createContext4("");
 
 // src/XRApp.ts
 var defaultSceneConfig = {
@@ -864,7 +826,7 @@ function initScene(name, callback) {
 }
 
 // src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function renderJSXPortalInstance(inProps, elWidth, elHeight, inheritedPortalStyle, className) {
   const { El, style: inStyle = {}, className: _, ...props } = inProps;
   const extraStyle = {
@@ -890,7 +852,7 @@ function renderJSXPortalInstance(inProps, elWidth, elHeight, inheritedPortalStyl
     ...extraStyle,
     ...elWHStyle
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(El, { style, className, ...props });
+  return /* @__PURE__ */ jsx2(El, { style, className, ...props });
 }
 function setOpenWindowStyle(openedWindow) {
   openedWindow.document.documentElement.style.cssText += document.documentElement.style.cssText;
@@ -977,7 +939,7 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
     zIndex = 0
   } = spatialStyle;
   let styleOverflow = style?.overflow;
-  const visible = (0, import_react8.useMemo)(() => {
+  const visible = useMemo(() => {
     return spatialStyle.visible !== false && domRect.width > 0 && domRect.height > 0;
   }, [spatialStyle.visible, domRect.width, domRect.height]);
   if (position.x === void 0) position.x = 0;
@@ -1000,7 +962,7 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
   } else {
     Object.assign(cornerRadiusObject, cornerRadius);
   }
-  (0, import_react8.useEffect)(() => {
+  useEffect3(() => {
     if (spatialWindowManager && spatialWindowManager.webview) {
       const webview = spatialWindowManager.webview;
       (async function() {
@@ -1018,7 +980,7 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
     cornerRadiusObject.topTrailing,
     cornerRadiusObject.bottomTrailing
   ]);
-  (0, import_react8.useEffect)(() => {
+  useEffect3(() => {
     if (spatialWindowManager && spatialWindowManager.webview) {
       const webview = spatialWindowManager.webview;
       (async function() {
@@ -1034,7 +996,7 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
     stylePosition,
     styleOverflow
   ]);
-  (0, import_react8.useEffect)(() => {
+  useEffect3(() => {
     if (spatialWindowManager) {
       ;
       (async function() {
@@ -1060,18 +1022,18 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
     anchor,
     zIndex
   ]);
-  (0, import_react8.useEffect)(() => {
+  useEffect3(() => {
     if (spatialWindowManager && spatialWindowManager.webview) {
       const webview = spatialWindowManager.webview;
       webview.setOpacity(opacity);
     }
   }, [spatialWindowManager, opacity]);
-  (0, import_react8.useEffect)(() => {
+  useEffect3(() => {
     if (spatialWindowManager) {
       spatialWindowManager.entity?.setVisible(visible);
     }
   }, [spatialWindowManager, visible]);
-  (0, import_react8.useEffect)(() => {
+  useEffect3(() => {
     if (spatialWindowManager?.window && spatialWindowManager.webview) {
       ;
       (async function() {
@@ -1094,28 +1056,28 @@ function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, corne
   }, [spatialWindowManager, domRect.width]);
 }
 function useSyncDomRect(spatialId) {
-  const [domRect, setDomRect] = (0, import_react8.useState)({
+  const [domRect, setDomRect] = useState2({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   });
-  const inheritedPortalStyleRef = (0, import_react8.useRef)({});
-  const anchorRef = (0, import_react8.useRef)({
+  const inheritedPortalStyleRef = useRef3({});
+  const anchorRef = useRef3({
     x: 0.5,
     y: 0.5,
     z: 0.5
   });
-  const cornerRadiusRef = (0, import_react8.useRef)({
+  const cornerRadiusRef = useRef3({
     topLeading: 0,
     bottomLeading: 0,
     topTrailing: 0,
     bottomTrailing: 0
   });
-  const opacityRef = (0, import_react8.useRef)(1);
-  const spatialReactContextObject = (0, import_react8.useContext)(SpatialReactContext);
-  const inheritedPortalClassNameRef = (0, import_react8.useRef)("");
-  (0, import_react8.useEffect)(() => {
+  const opacityRef = useRef3(1);
+  const spatialReactContextObject = useContext3(SpatialReactContext);
+  const inheritedPortalClassNameRef = useRef3("");
+  useEffect3(() => {
     const syncDomRect = () => {
       const dom = spatialReactContextObject?.querySpatialDom(spatialId);
       if (!dom) {
@@ -1157,8 +1119,8 @@ function useSyncDomRect(spatialId) {
 }
 function PortalInstance(inProps) {
   const { allowScroll, scrollWithParent, spatialStyle, isSubPortal, ...props } = inProps;
-  const debugName = (0, import_react8.useContext)(SpatialDebugNameContext);
-  const onContainerSpawned = (0, import_react8.useCallback)(
+  const debugName = useContext3(SpatialDebugNameContext);
+  const onContainerSpawned = useCallback(
     async (spatialWindowManager2) => {
       const openWindow = spatialWindowManager2.window;
       setOpenWindowStyle(openWindow);
@@ -1173,7 +1135,7 @@ function PortalInstance(inProps) {
     },
     []
   );
-  const onContainerDestroyed = (0, import_react8.useCallback)(
+  const onContainerDestroyed = useCallback(
     (spatialWindowManager2, spawnedResult) => {
       const { headObserver } = spawnedResult;
       headObserver.disconnect();
@@ -1215,8 +1177,8 @@ function PortalInstance(inProps) {
     className
   );
   const needRenderPlaceHolder = isSubPortal && inheritedPortalStyle.position !== "absolute" && inheritedPortalStyle.position !== "fixed";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SpatialWindowManagerContext.Provider, { value: spatialWindowManager, children: [
-    needRenderPlaceHolder && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxs(SpatialWindowManagerContext.Provider, { value: spatialWindowManager, children: [
+    needRenderPlaceHolder && /* @__PURE__ */ jsx2(
       "div",
       {
         className,
@@ -1229,7 +1191,7 @@ function PortalInstance(inProps) {
         }
       }
     ),
-    spatialWindowManager && spatialWindowManager.window && (0, import_react_dom.createPortal)(
+    spatialWindowManager && spatialWindowManager.window && createPortal(
       JSXPortalInstance,
       spatialWindowManager.window.document.body
     )
@@ -1238,11 +1200,11 @@ function PortalInstance(inProps) {
 PortalInstance.displayName = "PortalInstance";
 
 // src/spatial-react-components/SpatialReactComponent/SpatialLayerContext.ts
-var import_react9 = require("react");
-var SpatialLayerContext = (0, import_react9.createContext)(0);
+import { createContext as createContext5 } from "react";
+var SpatialLayerContext = createContext5(0);
 
 // src/spatial-react-components/SpatialReactComponent/SpatialReactComponent.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function parseProps(inProps) {
   const {
     debugShowStandardInstance,
@@ -1262,7 +1224,7 @@ function parseProps(inProps) {
 function renderWebReactComponent(inProps, ref) {
   const { componentDesc, props } = parseProps(inProps);
   const { El } = componentDesc;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(El, { ...props, ref });
+  return /* @__PURE__ */ jsx3(El, { ...props, ref });
 }
 function renderSpatialReactComponent(inProps, ref) {
   const { componentDesc, spatialDesc, debugDesc, props } = parseProps(inProps);
@@ -1276,13 +1238,13 @@ function renderSpatialReactComponent(inProps, ref) {
     ...componentDesc,
     ...spatialDesc
   };
-  const spatialReactContextObject = (0, import_react10.useMemo)(
+  const spatialReactContextObject = useMemo2(
     () => new SpatialReactContextObject(debugDesc.debugName),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SpatialReactContext.Provider, { value: spatialReactContextObject, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StandardInstance, { ...standardInstanceProps, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalInstance, { isSubPortal: false, ...portalInstanceProps })
+  return /* @__PURE__ */ jsxs2(SpatialReactContext.Provider, { value: spatialReactContextObject, children: [
+    /* @__PURE__ */ jsx3(StandardInstance, { ...standardInstanceProps, ref }),
+    /* @__PURE__ */ jsx3(PortalInstance, { isSubPortal: false, ...portalInstanceProps })
   ] });
 }
 function renderSubPortalInstance(inProps) {
@@ -1292,14 +1254,14 @@ function renderSubPortalInstance(inProps) {
     ...componentDesc,
     ...spatialDesc
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalInstance, { isSubPortal: true, ...portalInstanceProps });
+  return /* @__PURE__ */ jsx3(PortalInstance, { isSubPortal: true, ...portalInstanceProps });
 }
 function SpatialReactComponentRefactor(inProps, ref) {
-  const layer = (0, import_react10.useContext)(SpatialLayerContext) + 1;
-  const parentSpatialReactContextObject = (0, import_react10.useContext)(SpatialReactContext);
+  const layer = useContext4(SpatialLayerContext) + 1;
+  const parentSpatialReactContextObject = useContext4(SpatialReactContext);
   const isRootInstance = !parentSpatialReactContextObject;
-  const isInStandardInstance = !!(0, import_react10.useContext)(SpatialIsStandardInstanceContext);
-  const spatialID = (0, import_react10.useMemo)(() => {
+  const isInStandardInstance = !!useContext4(SpatialIsStandardInstanceContext);
+  const spatialID = useMemo2(() => {
     return isRootInstance ? layer.toString() : parentSpatialReactContextObject.getSpatialID(
       layer,
       isInStandardInstance,
@@ -1308,15 +1270,15 @@ function SpatialReactComponentRefactor(inProps, ref) {
   }, []);
   const props = { ...inProps, [SpatialID]: spatialID };
   const contentInLayer = renderContentInLayer(props, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpatialLayerContext.Provider, { value: layer, children: contentInLayer }) });
+  return /* @__PURE__ */ jsx3(SpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ jsx3(SpatialLayerContext.Provider, { value: layer, children: contentInLayer }) });
 }
 function renderContentInLayer(inProps, ref) {
-  const isInStandardInstance = (0, import_react10.useContext)(SpatialIsStandardInstanceContext);
+  const isInStandardInstance = useContext4(SpatialIsStandardInstanceContext);
   const isWebSpatialEnv = getSession() !== null;
   if (isInStandardInstance || !isWebSpatialEnv) {
     return renderWebReactComponent(inProps, ref);
   } else {
-    const parentSpatialReactContextObject = (0, import_react10.useContext)(SpatialReactContext);
+    const parentSpatialReactContextObject = useContext4(SpatialReactContext);
     if (parentSpatialReactContextObject) {
       return renderSubPortalInstance(inProps);
     } else {
@@ -1324,20 +1286,20 @@ function renderContentInLayer(inProps, ref) {
     }
   }
 }
-var SpatialReactComponent = (0, import_react10.forwardRef)(SpatialReactComponentRefactor);
+var SpatialReactComponent = forwardRef2(SpatialReactComponentRefactor);
 SpatialReactComponent.displayName = "SpatialReactComponent";
 
 // src/spatial-react-components/SpatialPrimitive.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+import { jsx as jsx4 } from "react/jsx-runtime";
 var cachedWithSpatialType = /* @__PURE__ */ new Map();
 function withSpatial(Component) {
   if (cachedWithSpatialType.has(Component)) {
     return cachedWithSpatialType.get(Component);
   } else {
-    const WithSpatialComponent = (0, import_react11.forwardRef)(
+    const WithSpatialComponent = forwardRef3(
       (givenProps, givenRef) => {
         const { component: ignoreComponent, ...props } = givenProps;
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ jsx4(
           SpatialReactComponent,
           {
             component: Component,
@@ -1361,8 +1323,11 @@ var SpatialPrimitive = {};
 })(SpatialPrimitive);
 var SpatialDiv = SpatialPrimitive.div;
 
-// src/spatial-react-components/hooks/useMonitorDomChange.tsx
-var import_react12 = require("react");
+// src/spatial-react-components/SpatialMonitor/withSpatialMonitor.tsx
+import { forwardRef as forwardRef5 } from "react";
+
+// src/spatial-react-components/SpatialMonitor/useMonitorDomChange.tsx
+import { useRef as useRef4, useEffect as useEffect4, useMemo as useMemo3 } from "react";
 
 // src/spatial-react-components/notifyUpdateStandInstanceLayout.ts
 function notifyUpdateStandInstanceLayout() {
@@ -1380,10 +1345,10 @@ function notifyDOMUpdate(mutationsList) {
   );
 }
 
-// src/spatial-react-components/hooks/useMonitorDomChange.tsx
-function useMonitorDomChange() {
-  const ref = (0, import_react12.useRef)(void 0);
-  (0, import_react12.useEffect)(() => {
+// src/spatial-react-components/SpatialMonitor/useMonitorDomChange.tsx
+function useMonitorDomChange(inRef) {
+  const ref = useRef4(null);
+  useEffect4(() => {
     const observer = new MutationObserver((mutationsList) => {
       notifyDOMUpdate(mutationsList);
     });
@@ -1398,13 +1363,30 @@ function useMonitorDomChange() {
       observer.disconnect();
     };
   }, []);
-  return ref;
+  const proxyRef = useMemo3(
+    () => new Proxy(ref, {
+      set: function(target, key, value) {
+        if (key === "current") {
+          if (inRef) {
+            if (typeof inRef === "function") {
+              inRef(value);
+            } else if (inRef) {
+              inRef.current = value;
+            }
+          }
+        }
+        return Reflect.set(target, key, value);
+      }
+    }),
+    []
+  );
+  return proxyRef;
 }
 
-// src/spatial-react-components/hooks/useMonitorDocumentHeaderChange.tsx
-var import_react13 = require("react");
+// src/spatial-react-components/SpatialMonitor/useMonitorDocumentHeaderChange.tsx
+import { useEffect as useEffect5 } from "react";
 function useMonitorDocumentHeaderChange() {
-  (0, import_react13.useEffect)(() => {
+  useEffect5(() => {
     const observer = new MutationObserver((mutationsList) => {
       notifyUpdateStandInstanceLayout();
     });
@@ -1420,33 +1402,63 @@ function useMonitorDocumentHeaderChange() {
   }, []);
 }
 
-// src/spatial-react-components/SpatialMonitor.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function SpatialMonitor(props) {
-  const { children, ...otherProps } = props;
-  const ref = useMonitorDomChange();
+// src/spatial-react-components/SpatialMonitor/SpatialMonitor.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SpatialMonitorBase(inProps, inRef) {
+  const { El = "div", ...props } = inProps;
+  const ref = useMonitorDomChange(inRef);
   useMonitorDocumentHeaderChange();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, ...otherProps, children: [
-    " ",
-    children,
-    " "
-  ] });
+  return /* @__PURE__ */ jsx5(El, { ...props, ref });
+}
+var SpatialMonitor = forwardRef4(SpatialMonitorBase);
+
+// src/spatial-react-components/SpatialMonitor/withSpatialMonitor.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var cachedWithSpatialMonitorType = /* @__PURE__ */ new Map();
+function withSpatialMonitor(El) {
+  if (cachedWithSpatialMonitorType.has(El)) {
+    return cachedWithSpatialMonitorType.get(El);
+  } else {
+    const WithSpatialMonitorComponent = forwardRef5(
+      (givenProps, givenRef) => {
+        const {
+          El: _,
+          ...props
+        } = givenProps;
+        return /* @__PURE__ */ jsx6(SpatialMonitor, { El, ...props, ref: givenRef });
+      }
+    );
+    WithSpatialMonitorComponent.displayName = `WithSpatialMonitor(${typeof El === "string" ? El : El.displayName || El.name})`;
+    cachedWithSpatialMonitorType.set(El, WithSpatialMonitorComponent);
+    cachedWithSpatialMonitorType.set(
+      cachedWithSpatialMonitorType,
+      cachedWithSpatialMonitorType
+    );
+    return WithSpatialMonitorComponent;
+  }
 }
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialDiv.tsx
-var import_react20 = require("react");
+import { forwardRef as forwardRef7 } from "react";
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
-var import_react19 = require("react");
+import {
+  forwardRef as forwardRef6,
+  useContext as useContext5,
+  useEffect as useEffect7,
+  useMemo as useMemo4,
+  useRef as useRef6
+} from "react";
 
 // src/spatial-react-components/CSSSpatialDiv/useSpatialStyle.ts
-var import_react14 = require("react");
-var import_lodash = __toESM(require("lodash.isequal"));
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5, useState as useState3 } from "react";
+import isEqual from "lodash.isequal";
 
 // src/spatial-react-components/CSSSpatialDiv/math/index.ts
-var import_Matrix4 = require("three/src/math/Matrix4.js");
-var import_Vector3 = require("three/src/math/Vector3.js");
-var import_Quaternion = require("three/src/math/Quaternion.js");
+import { Matrix4 } from "three/src/math/Matrix4.js";
+import { Vector3 } from "three/src/math/Vector3.js";
+import { Quaternion } from "three/src/math/Quaternion.js";
 
 // src/spatial-react-components/CSSSpatialDiv/const.ts
 var SpatialCustomVars = {
@@ -1458,7 +1470,7 @@ var BackgroundMaterialDefault = "none";
 // src/spatial-react-components/CSSSpatialDiv/useSpatialStyle.ts
 function parse2dMatrix(transformDataArray) {
   const [n11, n21, n12, n22, n13, n23] = transformDataArray;
-  const matrix4 = new import_Matrix4.Matrix4(
+  const matrix4 = new Matrix4(
     n11,
     n12,
     0,
@@ -1479,7 +1491,7 @@ function parse2dMatrix(transformDataArray) {
   return matrix4;
 }
 function parse3dMatrix(transformDataArray) {
-  const matrix4 = new import_Matrix4.Matrix4().fromArray(transformDataArray);
+  const matrix4 = new Matrix4().fromArray(transformDataArray);
   return matrix4;
 }
 function parseTransform(computedStyle) {
@@ -1496,30 +1508,28 @@ function parseTransform(computedStyle) {
       const transform3dDataArray = transform.substring(matrix3dFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
       return parse3dMatrix(transform3dDataArray);
     } else {
-      return new import_Matrix4.Matrix4();
+      return new Matrix4();
     }
   }
 }
 function parseBack(computedStyle) {
-  let useBackProperty = computedStyle.position === "absolute" || computedStyle.position === "relative" || computedStyle.position === "fixed";
-  if (!useBackProperty) return new import_Matrix4.Matrix4();
   let backProperty = computedStyle.getPropertyValue(SpatialCustomVars.back);
   let back = void 0;
   try {
     back = parseFloat(backProperty);
   } catch (error) {
   }
-  return new import_Matrix4.Matrix4().makeTranslation(0, 0, back || 1);
+  return new Matrix4().makeTranslation(0, 0, back || 1);
 }
 function parseSpatialStyle(node) {
   const computedStyle = getComputedStyle(node);
   const mat4ForBack = parseBack(computedStyle);
   const mat4ForTransform = parseTransform(computedStyle);
-  const resultMatrix = new import_Matrix4.Matrix4();
+  const resultMatrix = new Matrix4();
   resultMatrix.multiplyMatrices(mat4ForBack, mat4ForTransform);
-  const position = new import_Vector3.Vector3();
-  const quaternion = new import_Quaternion.Quaternion();
-  const scale = new import_Vector3.Vector3();
+  const position = new Vector3();
+  const quaternion = new Quaternion();
+  const scale = new Vector3();
   resultMatrix.decompose(position, quaternion, scale);
   const zIndex = parseFloat(computedStyle.getPropertyValue("z-index"));
   const visible = computedStyle.getPropertyValue("visibility") === "visible";
@@ -1543,8 +1553,8 @@ function parseSpatialStyle(node) {
   };
 }
 function useSpatialStyle() {
-  const ref = (0, import_react14.useRef)(null);
-  const [spatialStyle, setSpatialStyle] = (0, import_react14.useState)({
+  const ref = useRef5(null);
+  const [spatialStyle, setSpatialStyle] = useState3({
     position: { x: 0, y: 0, z: 1 },
     rotation: { x: 0, y: 0, z: 0, w: 1 },
     scale: { x: 1, y: 1, z: 1 },
@@ -1554,14 +1564,14 @@ function useSpatialStyle() {
     },
     visible: true
   });
-  const [ready, setReady] = (0, import_react14.useState)(false);
-  const checkSpatialStyleUpdate = (0, import_react14.useCallback)(() => {
+  const [ready, setReady] = useState3(false);
+  const checkSpatialStyleUpdate = useCallback2(() => {
     const nextSpatialStyle = parseSpatialStyle(ref.current);
-    if (!(0, import_lodash.default)(spatialStyle, nextSpatialStyle)) {
+    if (!isEqual(spatialStyle, nextSpatialStyle)) {
       setSpatialStyle(nextSpatialStyle);
     }
   }, []);
-  (0, import_react14.useEffect)(() => {
+  useEffect6(() => {
     if (!ref.current) {
       return;
     }
@@ -1569,7 +1579,7 @@ function useSpatialStyle() {
     setSpatialStyle(spatialStyle2);
     setReady(true);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  useEffect6(() => {
     if (!ref.current) {
       return;
     }
@@ -1588,7 +1598,7 @@ function useSpatialStyle() {
       observer.disconnect();
     };
   }, []);
-  (0, import_react14.useEffect)(() => {
+  useEffect6(() => {
     if (!ref.current) {
       return;
     }
@@ -1630,11 +1640,11 @@ function useSpatialStyle() {
 }
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialDebugNameContext.ts
-var import_react15 = require("react");
-var CSSSpatialDebugNameContext = (0, import_react15.createContext)("");
+import { createContext as createContext6 } from "react";
+var CSSSpatialDebugNameContext = createContext6("");
 
 // src/spatial-react-components/CSSSpatialDiv/useHijackSpatialDivRef.ts
-var import_react16 = require("react");
+import { useCallback as useCallback3 } from "react";
 
 // src/spatial-react-components/CSSSpatialDiv/injectClassStyle.ts
 var InjectClassName = "xr-css-spatial-default";
@@ -1678,7 +1688,7 @@ function makeOriginalKey(key) {
 }
 function useHijackSpatialDivRef(refIn, cssParserRef) {
   const ref = cssParserRef;
-  const spatialDivRef = (0, import_react16.useCallback)(
+  const spatialDivRef = useCallback3(
     (domElement) => {
       if (domElement && refIn) {
         const domStyle = domElement.style;
@@ -1855,11 +1865,11 @@ function useHijackSpatialDivRef(refIn, cssParserRef) {
 }
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialLayerContext.ts
-var import_react17 = require("react");
-var CSSSpatialLayerContext = (0, import_react17.createContext)(0);
+import { createContext as createContext7 } from "react";
+var CSSSpatialLayerContext = createContext7(0);
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialRootContext.ts
-var import_react18 = require("react");
+import { createContext as createContext8 } from "react";
 var CSSSpatialID = "CSSSpatialID";
 var CSSSpatialRootContextObject = class {
   prefix = "css";
@@ -1894,12 +1904,12 @@ var CSSSpatialRootContextObject = class {
     this.fns[cssSpatialID]?.(domElement);
   }
 };
-var CSSSpatialRootContext = (0, import_react18.createContext)(null);
+var CSSSpatialRootContext = createContext8(null);
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function renderRootCSSSpatialComponent(inProps, refIn) {
-  const cssSpatialRootContextObject = (0, import_react19.useMemo)(
+  const cssSpatialRootContextObject = useMemo4(
     () => new CSSSpatialRootContextObject(),
     []
   );
@@ -1917,7 +1927,8 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
     width: 0,
     height: 0,
     padding: 0,
-    transition: "none"
+    transition: "none",
+    position: "absolute"
   };
   const spatialDivStyle = {
     ...style,
@@ -1926,8 +1937,8 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
   const El = inProps.component || "div";
   const spatialDivRef = useHijackSpatialDivRef(refIn, ref);
   const divRefClassName = className + " " + InjectClassName;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CSSSpatialRootContext.Provider, { value: cssSpatialRootContextObject, children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ jsxs3(CSSSpatialRootContext.Provider, { value: cssSpatialRootContextObject, children: [
+    ready && /* @__PURE__ */ jsx7(
       SpatialReactComponent,
       {
         style: spatialDivStyle,
@@ -1940,7 +1951,7 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
         ref: spatialDivRef
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ jsx7(
       El,
       {
         style: divRefStyle,
@@ -1953,7 +1964,7 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
   ] });
 }
 function renderInWebEnv(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpatialReactComponent, { ...props, ref });
+  return /* @__PURE__ */ jsx7(SpatialReactComponent, { ...props, ref });
 }
 function renderInStandardInstance(cssSpatialRootContextObject, cssSpatialID, inProps, refIn) {
   const { style: inStyle = {}, ...props } = inProps;
@@ -1962,9 +1973,9 @@ function renderInStandardInstance(cssSpatialRootContextObject, cssSpatialID, inP
     transform: "none",
     visibility: "hidden"
   };
-  var cssParserRef = (0, import_react19.useRef)(null);
+  var cssParserRef = useRef6(null);
   const spatialDivRef = useHijackSpatialDivRef(refIn, cssParserRef);
-  (0, import_react19.useEffect)(() => {
+  useEffect7(() => {
     const onDomChangeAction = (dom) => {
       cssParserRef.current = dom;
     };
@@ -1973,7 +1984,7 @@ function renderInStandardInstance(cssSpatialRootContextObject, cssSpatialID, inP
       cssSpatialRootContextObject.offDomChange(cssSpatialID, onDomChangeAction);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpatialReactComponent, { style, ...props, ref: spatialDivRef });
+  return /* @__PURE__ */ jsx7(SpatialReactComponent, { style, ...props, ref: spatialDivRef });
 }
 function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inProps) {
   const {
@@ -1990,7 +2001,8 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
     width: 0,
     height: 0,
     padding: 0,
-    transition: "none"
+    transition: "none",
+    position: "absolute"
   };
   const spatialDivStyle = {
     ...style,
@@ -1998,11 +2010,11 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
   };
   const El = inProps.component || "div";
   const divRefClassName = className + " " + InjectClassName;
-  (0, import_react19.useEffect)(() => {
+  useEffect7(() => {
     cssSpatialRootContextObject.setCSSParserRef(cssSpatialID, ref.current);
   }, [ref.current]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    ready && /* @__PURE__ */ jsx7(
       SpatialReactComponent,
       {
         style: spatialDivStyle,
@@ -2014,7 +2026,7 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
         debugShowStandardInstance
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ jsx7(
       El,
       {
         style: divRefStyle,
@@ -2031,9 +2043,9 @@ function CSSSpatialComponentBase(inProps, ref) {
   if (isWebEnv) {
     return renderInWebEnv(props, ref);
   } else {
-    const cssSpatialRootContextObject = (0, import_react19.useContext)(CSSSpatialRootContext);
+    const cssSpatialRootContextObject = useContext5(CSSSpatialRootContext);
     if (cssSpatialRootContextObject) {
-      const isInStandardInstance = !!(0, import_react19.useContext)(
+      const isInStandardInstance = !!useContext5(
         SpatialIsStandardInstanceContext
       );
       if (isInStandardInstance) {
@@ -2055,13 +2067,13 @@ function CSSSpatialComponentBase(inProps, ref) {
     }
   }
 }
-var CSSSpatialComponentBaseWithRef = (0, import_react19.forwardRef)(CSSSpatialComponentBase);
+var CSSSpatialComponentBaseWithRef = forwardRef6(CSSSpatialComponentBase);
 function CSSSpatialComponentWithRef(inProps, ref) {
-  const layer = (0, import_react19.useContext)(CSSSpatialLayerContext) + 1;
-  const cssSpatialRootContextObject = (0, import_react19.useContext)(CSSSpatialRootContext);
+  const layer = useContext5(CSSSpatialLayerContext) + 1;
+  const cssSpatialRootContextObject = useContext5(CSSSpatialRootContext);
   const isRootInstance = !cssSpatialRootContextObject;
-  const isInStandardInstance = !!(0, import_react19.useContext)(SpatialIsStandardInstanceContext);
-  const cssSpatialID = (0, import_react19.useMemo)(() => {
+  const isInStandardInstance = !!useContext5(SpatialIsStandardInstanceContext);
+  const cssSpatialID = useMemo4(() => {
     return isRootInstance ? layer.toString() : cssSpatialRootContextObject.getSpatialID(
       layer,
       isInStandardInstance,
@@ -2069,18 +2081,18 @@ function CSSSpatialComponentWithRef(inProps, ref) {
     );
   }, []);
   const props = { ...inProps, [CSSSpatialID]: cssSpatialID };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CSSSpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CSSSpatialLayerContext.Provider, { value: layer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CSSSpatialComponentBaseWithRef, { ...props, ref }) }) });
+  return /* @__PURE__ */ jsx7(CSSSpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ jsx7(CSSSpatialLayerContext.Provider, { value: layer, children: /* @__PURE__ */ jsx7(CSSSpatialComponentBaseWithRef, { ...props, ref }) }) });
 }
-var CSSSpatialComponent = (0, import_react19.forwardRef)(CSSSpatialComponentWithRef);
+var CSSSpatialComponent = forwardRef6(CSSSpatialComponentWithRef);
 
 // src/spatial-react-components/CSSSpatialDiv/CSSSpatialDiv.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+import { jsx as jsx8 } from "react/jsx-runtime";
 var cachedWithCSSSpatialType = /* @__PURE__ */ new Map();
 function withCSSSpatial(Component) {
   if (cachedWithCSSSpatialType.has(Component)) {
     return cachedWithCSSSpatialType.get(Component);
   } else {
-    const WithCSSSpatialComponent = (0, import_react20.forwardRef)(
+    const WithCSSSpatialComponent = forwardRef7(
       (givenProps, givenRef) => {
         const {
           component: ignoreComponent,
@@ -2088,7 +2100,7 @@ function withCSSSpatial(Component) {
           ...props
         } = givenProps;
         const className = "xr-spatial-default " + origClassName;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ jsx8(
           CSSSpatialComponent,
           {
             component: Component,
@@ -2117,18 +2129,23 @@ var 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");
+import { SpatialHelper } from "@webspatial/core-sdk";
+import {
+  useRef as useRef7,
+  useImperativeHandle,
+  forwardRef as forwardRef8,
+  useEffect as useEffect8
+} from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var runAsync = (fn) => {
   return fn();
 };
-var SpatialViewEl = (0, import_react21.forwardRef)(
+var SpatialViewEl = forwardRef8(
   (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, () => ({
+    const divRef = useRef7(null);
+    const spatialEntity = useRef7(null);
+    const activePromise = useRef7(null);
+    useImperativeHandle(ref, () => ({
       ...divRef.current,
       getViewEntity: async () => {
         if (activePromise.current) {
@@ -2138,15 +2155,15 @@ var SpatialViewEl = (0, import_react21.forwardRef)(
       }
     }));
     if (getSession() == null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
+      return /* @__PURE__ */ jsx9("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
     }
-    (0, import_react21.useEffect)(() => {
+    useEffect8(() => {
       if (true) return;
       activePromise.current = runAsync(async () => {
         if (activePromise.current) {
           await activePromise.current;
         }
-        let sh = new import_core_sdk2.SpatialHelper(getSession());
+        let sh = new SpatialHelper(getSession());
         let x = await sh.dom.attachSpatialView(divRef.current);
         spatialEntity.current = x.entity;
         if (props.onViewLoad) {
@@ -2165,22 +2182,29 @@ var SpatialViewEl = (0, import_react21.forwardRef)(
       };
     }, []);
     const { onViewLoad, onViewUnload, ...divProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...divProps });
+    return /* @__PURE__ */ jsx9("div", { ref: divRef, ...divProps });
   }
 );
 var SpatialView = SpatialViewEl;
 
 // src/spatial-react-components/Model/index.tsx
-var import_react31 = require("react");
+import {
+  forwardRef as forwardRef11,
+  Children,
+  useMemo as useMemo9,
+  useRef as useRef12,
+  useEffect as useEffect16,
+  useState as useState6
+} from "react";
 
 // src/spatial-react-components/Model3D/Model3D.tsx
-var import_react27 = require("react");
+import { forwardRef as forwardRef9, useContext as useContext8, useMemo as useMemo7 } from "react";
 
 // src/spatial-react-components/Model3D/useDetectLayoutDomUpdated.ts
-var import_react22 = require("react");
+import { useRef as useRef8, useEffect as useEffect9 } from "react";
 function useDetectLayoutDomUpdated(onDomUpdated) {
-  const ref = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const ref = useRef8(null);
+  useEffect9(() => {
     const handleResize = () => {
       onDomUpdated();
     };
@@ -2189,7 +2213,7 @@ function useDetectLayoutDomUpdated(onDomUpdated) {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  (0, import_react22.useEffect)(() => {
+  useEffect9(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
       return;
@@ -2202,7 +2226,7 @@ function useDetectLayoutDomUpdated(onDomUpdated) {
       ro.disconnect();
     };
   }, []);
-  (0, import_react22.useEffect)(() => {
+  useEffect9(() => {
     if (!ref.current) {
       console.warn("Ref is not attached to the DOM");
       return;
@@ -2223,7 +2247,7 @@ function useDetectLayoutDomUpdated(onDomUpdated) {
 }
 
 // src/spatial-react-components/Model3D/useModel3DNative.ts
-var import_react23 = require("react");
+import { useRef as useRef9, useEffect as useEffect10, useState as useState4 } from "react";
 
 // src/spatial-react-components/Model3D/utils.ts
 function PopulatePartialSpatialTransformType(spatialTransform = {}) {
@@ -2446,12 +2470,12 @@ var Model3DNative = class {
 
 // src/spatial-react-components/Model3D/useModel3DNative.ts
 function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DNativeReadyCb) {
-  let model3DNativeRef = (0, import_react23.useRef)(null);
-  const [phase, setPhase] = (0, import_react23.useState)(
+  let model3DNativeRef = useRef9(null);
+  const [phase, setPhase] = useState4(
     "loading"
   );
-  const [failureReason, setFailureReason] = (0, import_react23.useState)("");
-  (0, import_react23.useEffect)(() => {
+  const [failureReason, setFailureReason] = useState4("");
+  useEffect10(() => {
     let isDestroyed = false;
     const model3DContainer = new Model3DNative(parentEntity);
     model3DContainer.init(
@@ -2478,32 +2502,32 @@ function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DN
       setPhase("loading");
     };
   }, [modelUrl]);
-  (0, import_react23.useEffect)(() => {
+  useEffect10(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.onDragStart = eventHandlers.onDragStart;
     }
   }, [model3DNativeRef.current, eventHandlers.onDragStart]);
-  (0, import_react23.useEffect)(() => {
+  useEffect10(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.onDrag = eventHandlers.onDrag;
     }
   }, [model3DNativeRef.current, eventHandlers.onDrag]);
-  (0, import_react23.useEffect)(() => {
+  useEffect10(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.onDragEnd = eventHandlers.onDragEnd;
     }
   });
-  (0, import_react23.useEffect)(() => {
+  useEffect10(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.onTap = eventHandlers.onTap;
     }
   }, [model3DNativeRef.current, eventHandlers.onTap]);
-  (0, import_react23.useEffect)(() => {
+  useEffect10(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.onDoubleTap = eventHandlers.onDoubleTap;
     }
   }, [model3DNativeRef.current, eventHandlers.onDoubleTap]);
-  (0, import_react23.useEffect)(() => {
+  useEffect10(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.onLongPress = eventHandlers.onLongPress;
     }
@@ -2512,8 +2536,8 @@ function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DN
 }
 
 // src/spatial-react-components/Model3D/Model3DNotInSpatialDiv.tsx
-var import_react24 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo5 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function renderModel3DNotInSpatialDiv(props, refIn) {
   const {
     className,
@@ -2534,7 +2558,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     onLongPress
   } = props;
   const theSpatialTransform = PopulatePartialSpatialTransformType(spatialTransform);
-  const onDomUpdated = (0, import_react24.useCallback)(() => {
+  const onDomUpdated = useCallback4(() => {
     if (model3DNativeRef.current && layoutInstanceRef.current) {
       const model3DNative = model3DNativeRef.current;
       model3DNative.updateByDom(layoutInstanceRef.current, {
@@ -2553,7 +2577,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     theSpatialTransform.scale.y,
     theSpatialTransform.scale.z
   ]);
-  const onModel3DContainerReadyCb = (0, import_react24.useCallback)(() => {
+  const onModel3DContainerReadyCb = useCallback4(() => {
     if (model3DNativeRef.current && layoutInstanceRef.current) {
       model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
         spatialTransform: theSpatialTransform
@@ -2571,7 +2595,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     theSpatialTransform.scale.y,
     theSpatialTransform.scale.z
   ]);
-  const onDragStartCb = (0, import_react24.useCallback)(
+  const onDragStartCb = useCallback4(
     (spatialDragEvent) => {
       if (onDragStart) {
         const dragEvent = {
@@ -2583,7 +2607,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onDragStart]
   );
-  const onDragCb = (0, import_react24.useCallback)(
+  const onDragCb = useCallback4(
     (spatialDragEvent) => {
       if (onDrag) {
         const dragEvent = {
@@ -2595,7 +2619,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onDrag]
   );
-  const onDragEndCb = (0, import_react24.useCallback)(
+  const onDragEndCb = useCallback4(
     (spatialDragEvent) => {
       if (onDragEnd) {
         const dragEvent = {
@@ -2607,7 +2631,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onDragEnd]
   );
-  const onTapCb = (0, import_react24.useCallback)(() => {
+  const onTapCb = useCallback4(() => {
     if (onTap) {
       const event = {
         target: layoutInstanceRef.current
@@ -2615,7 +2639,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       onTap(event);
     }
   }, [onTap]);
-  const onDoubleTapCb = (0, import_react24.useCallback)(() => {
+  const onDoubleTapCb = useCallback4(() => {
     if (onDoubleTap) {
       const event = {
         target: layoutInstanceRef.current
@@ -2623,7 +2647,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       onDoubleTap(event);
     }
   }, [onDoubleTap]);
-  const onLongPressCb = (0, import_react24.useCallback)(() => {
+  const onLongPressCb = useCallback4(() => {
     if (onLongPress) {
       const event = {
         target: layoutInstanceRef.current
@@ -2645,7 +2669,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     onModel3DContainerReadyCb
   );
-  const onSuccess = (0, import_react24.useCallback)(() => {
+  const onSuccess = useCallback4(() => {
     ;
     layoutInstanceRef.current.ready = true;
     if (onLoad) {
@@ -2654,7 +2678,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       });
     }
   }, [onLoad]);
-  const onFailure = (0, import_react24.useCallback)(
+  const onFailure = useCallback4(
     (_) => {
       const modelElement = layoutInstanceRef.current;
       modelElement.ready = false;
@@ -2666,19 +2690,19 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     },
     [onLoad]
   );
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     if (phase === "failure") {
       onFailure(failureReason);
     } else if (phase === "success") {
       onSuccess();
     }
   }, [phase]);
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setVisible(visible);
     }
   }, [model3DNativeRef.current, visible]);
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     if (model3DNativeRef.current && layoutInstanceRef.current) {
       model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
         spatialTransform: theSpatialTransform
@@ -2696,17 +2720,17 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     theSpatialTransform.scale.y,
     theSpatialTransform.scale.z
   ]);
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setContentMode(contentMode);
     }
   }, [model3DNativeRef.current, contentMode]);
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setResizable(resizable);
     }
   }, [model3DNativeRef.current, resizable]);
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setAspectRatio(aspectRatio);
     }
@@ -2716,7 +2740,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     visibility: phase === "failure" ? "visible" : "hidden",
     transform: ""
   };
-  const proxyRef = (0, import_react24.useMemo)(
+  const proxyRef = useMemo5(
     () => new Proxy(layoutInstanceRef, {
       get(target, prop, receiver) {
         return Reflect.get(target, prop, receiver);
@@ -2741,7 +2765,7 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
     }),
     [layoutInstanceRef, refIn]
   );
-  (0, import_react24.useEffect)(() => {
+  useEffect11(() => {
     return () => {
       if (layoutInstanceRef.current) {
         const modelElement = layoutInstanceRef.current;
@@ -2750,17 +2774,17 @@ function renderModel3DNotInSpatialDiv(props, refIn) {
       }
     };
   }, [modelUrl]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
+  return /* @__PURE__ */ jsx10("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
 }
 
 // src/spatial-react-components/Model3D/Model3DStandardInstance.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+import { jsx as jsx11 } from "react/jsx-runtime";
 function renderModel3DStandardInstance(spatialId, props, refIn) {
   const { className, style } = props;
   const extraProps = {
     [SpatialID]: spatialId
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       "data-model3d-spatialid": spatialId,
@@ -2773,28 +2797,33 @@ function renderModel3DStandardInstance(spatialId, props, refIn) {
 }
 
 // src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
-var import_react26 = require("react");
+import {
+  useCallback as useCallback5,
+  useContext as useContext7,
+  useEffect as useEffect13,
+  useMemo as useMemo6
+} from "react";
 
 // src/spatial-react-components/Model3D/useSyncDomInfoFromStandardInstance.ts
-var import_react25 = require("react");
+import { useRef as useRef10, useEffect as useEffect12, useState as useState5, useContext as useContext6 } from "react";
 function useSyncDomInfoFromStandardInstance(spatialId) {
-  const [domRect, setDomRect] = (0, import_react25.useState)({
+  const [domRect, setDomRect] = useState5({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   });
-  const inheritedPortalStyleRef = (0, import_react25.useRef)({});
-  const anchorRef = (0, import_react25.useRef)({
+  const inheritedPortalStyleRef = useRef10({});
+  const anchorRef = useRef10({
     x: 0.5,
     y: 0.5,
     z: 0.5
   });
-  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 opacityRef = useRef10(1);
+  const spatialReactContextObject = useContext6(SpatialReactContext);
+  const inheritedPortalClassNameRef = useRef10("");
+  const modelRef = useRef10(null);
+  useEffect12(() => {
     const syncDomRect = () => {
       const dom = spatialReactContextObject?.querySpatialDom(spatialId);
       if (!dom) {
@@ -2835,7 +2864,7 @@ function useSyncDomInfoFromStandardInstance(spatialId) {
 }
 
 // src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+import { Fragment as Fragment2, jsx as jsx12 } from "react/jsx-runtime";
 function useModelEvents(props, modelRef) {
   const {
     onDragStart,
@@ -2845,7 +2874,7 @@ function useModelEvents(props, modelRef) {
     onDoubleTap,
     onLongPress
   } = props;
-  const onDragStartCb = (0, import_react26.useCallback)(
+  const onDragStartCb = useCallback5(
     (spatialDragEvent) => {
       if (onDragStart) {
         const dragEvent = {
@@ -2857,7 +2886,7 @@ function useModelEvents(props, modelRef) {
     },
     [onDragStart]
   );
-  const onDragCb = (0, import_react26.useCallback)(
+  const onDragCb = useCallback5(
     (spatialDragEvent) => {
       if (onDrag) {
         const dragEvent = {
@@ -2869,7 +2898,7 @@ function useModelEvents(props, modelRef) {
     },
     [onDrag]
   );
-  const onDragEndCb = (0, import_react26.useCallback)(
+  const onDragEndCb = useCallback5(
     (spatialDragEvent) => {
       if (onDragEnd) {
         const dragEvent = {
@@ -2881,7 +2910,7 @@ function useModelEvents(props, modelRef) {
     },
     [onDragEnd]
   );
-  const onTapCb = (0, import_react26.useCallback)(() => {
+  const onTapCb = useCallback5(() => {
     if (onTap) {
       const event = {
         target: modelRef.current
@@ -2889,7 +2918,7 @@ function useModelEvents(props, modelRef) {
       onTap(event);
     }
   }, [onTap]);
-  const onDoubleTapCb = (0, import_react26.useCallback)(() => {
+  const onDoubleTapCb = useCallback5(() => {
     if (onDoubleTap) {
       const event = {
         target: modelRef.current
@@ -2897,7 +2926,7 @@ function useModelEvents(props, modelRef) {
       onDoubleTap(event);
     }
   }, [onDoubleTap]);
-  const onLongPressCb = (0, import_react26.useCallback)(() => {
+  const onLongPressCb = useCallback5(() => {
     if (onLongPress) {
       const event = {
         target: modelRef.current
@@ -2926,7 +2955,7 @@ function renderModel3DPortalInstance(spatialId, props) {
     onLoad,
     children
   } = props;
-  const theSpatialTransform = (0, import_react26.useMemo)(() => {
+  const theSpatialTransform = useMemo6(() => {
     return PopulatePartialSpatialTransformType(spatialTransform);
   }, [spatialTransform]);
   const {
@@ -2937,7 +2966,7 @@ function renderModel3DPortalInstance(spatialId, props) {
     opacity,
     className
   } = useSyncDomInfoFromStandardInstance(spatialId);
-  const parentSpatialWindowManager = (0, import_react26.useContext)(SpatialWindowManagerContext);
+  const parentSpatialWindowManager = useContext7(SpatialWindowManagerContext);
   const eventHandlers = useModelEvents(
     props,
     modelRef
@@ -2947,7 +2976,7 @@ function renderModel3DPortalInstance(spatialId, props) {
     parentSpatialWindowManager.entity,
     eventHandlers
   );
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.updateRectAndTransform(
         domRect,
@@ -2955,37 +2984,37 @@ function renderModel3DPortalInstance(spatialId, props) {
       );
     }
   }, [model3DNativeRef.current, domRect, theSpatialTransform]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setRotationAnchor(anchor);
     }
   }, [model3DNativeRef.current, anchor]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setVisible(visible);
     }
   }, [model3DNativeRef.current, visible]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setContentMode(contentMode);
     }
   }, [model3DNativeRef.current, contentMode]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setResizable(resizable);
     }
   }, [model3DNativeRef.current, resizable]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setAspectRatio(aspectRatio);
     }
   }, [model3DNativeRef.current, aspectRatio]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (model3DNativeRef.current) {
       model3DNativeRef.current.setOpacity(opacity);
     }
   }, [model3DNativeRef.current, opacity]);
-  const onSuccess = (0, import_react26.useCallback)(() => {
+  const onSuccess = useCallback5(() => {
     ;
     modelRef.current.ready = true;
     if (onLoad) {
@@ -2994,7 +3023,7 @@ function renderModel3DPortalInstance(spatialId, props) {
       });
     }
   }, [onLoad]);
-  const onFailure = (0, import_react26.useCallback)(
+  const onFailure = useCallback5(
     (_2) => {
       const modelElement = modelRef.current;
       modelElement.ready = false;
@@ -3006,14 +3035,14 @@ function renderModel3DPortalInstance(spatialId, props) {
     },
     [onLoad]
   );
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     if (phase === "failure") {
       onFailure(failureReason);
     } else if (phase === "success") {
       onSuccess();
     }
   }, [phase]);
-  (0, import_react26.useEffect)(() => {
+  useEffect13(() => {
     return () => {
       const modelElement = modelRef.current;
       if (modelElement) {
@@ -3024,7 +3053,7 @@ function renderModel3DPortalInstance(spatialId, props) {
   }, [modelUrl]);
   const needRenderPlaceHolder = inheritedPortalStyle.position !== "absolute";
   if (!needRenderPlaceHolder && phase !== "failure") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+    return /* @__PURE__ */ jsx12(Fragment2, {});
   } else {
     const extraStyle = {
       visibility: "visible",
@@ -3044,7 +3073,7 @@ function renderModel3DPortalInstance(spatialId, props) {
       ...inheritedPortalStyle,
       ...extraStyle
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         "data-model3d-spatialid": spatialId,
@@ -3058,12 +3087,12 @@ function renderModel3DPortalInstance(spatialId, props) {
 
 // src/spatial-react-components/Model3D/Model3D.tsx
 function Model3DBase(props, refIn) {
-  const parentSpatialReactContextObject = (0, import_react27.useContext)(SpatialReactContext);
+  const parentSpatialReactContextObject = useContext8(SpatialReactContext);
   const isInSpatialDiv = !!parentSpatialReactContextObject;
   if (isInSpatialDiv) {
-    const layer = (0, import_react27.useContext)(SpatialLayerContext) + 1;
-    const isInStandardInstance = !!(0, import_react27.useContext)(SpatialIsStandardInstanceContext);
-    const spatialId = (0, import_react27.useMemo)(() => {
+    const layer = useContext8(SpatialLayerContext) + 1;
+    const isInStandardInstance = !!useContext8(SpatialIsStandardInstanceContext);
+    const spatialId = useMemo7(() => {
       return parentSpatialReactContextObject.getSpatialID(
         layer,
         isInStandardInstance,
@@ -3079,21 +3108,22 @@ function Model3DBase(props, refIn) {
     return renderModel3DNotInSpatialDiv(props, refIn);
   }
 }
-var Model3D = (0, import_react27.forwardRef)(Model3DBase);
+var Model3D = forwardRef9(Model3DBase);
 Model3D.displayName = "Model3D";
 
 // src/spatial-react-components/Model3D/CSSModel3D.tsx
-var import_react30 = require("react");
+import { forwardRef as forwardRef10, useContext as useContext11, useMemo as useMemo8 } from "react";
 
 // src/spatial-react-components/Model3D/CSSModel3DNotInSpatialDiv.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
   const { className, style = {}, ...props } = inProps;
   const cssParserDomStyle = {
     ...style,
     width: 0,
     height: 0,
-    padding: 0
+    padding: 0,
+    position: "absolute"
   };
   const { ref: cssParserDomRef, spatialStyle, ready } = useSpatialStyle();
   const ref = useHijackSpatialDivRef(
@@ -3110,8 +3140,8 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
     ...style,
     transform: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    ready && /* @__PURE__ */ jsx13(
       Model3D,
       {
         className,
@@ -3122,7 +3152,7 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ jsx13(
       "div",
       {
         className,
@@ -3134,8 +3164,8 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
 }
 
 // src/spatial-react-components/Model3D/CSSModel3DStandardInstance.tsx
-var import_react28 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+import { useContext as useContext9, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
   const { style: inStyle = {}, ...props } = inProps;
   const style = {
@@ -3143,13 +3173,13 @@ function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
     transform: "none",
     visibility: "hidden"
   };
-  var cssParserRef = (0, import_react28.useRef)(null);
+  var cssParserRef = useRef11(null);
   const ref = useHijackSpatialDivRef(
     refIn,
     cssParserRef
   );
-  const rootSpatialReactContextObject = (0, import_react28.useContext)(SpatialReactContext);
-  (0, import_react28.useEffect)(() => {
+  const rootSpatialReactContextObject = useContext9(SpatialReactContext);
+  useEffect14(() => {
     const onSubEvent = (dom) => {
       cssParserRef.current = dom;
     };
@@ -3158,15 +3188,15 @@ function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
       rootSpatialReactContextObject.offSubDivEvent(spatialId);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Model3D, { style, ...props, ref, visible: true });
+  return /* @__PURE__ */ jsx14(Model3D, { style, ...props, ref, visible: true });
 }
 
 // src/spatial-react-components/Model3D/CSSModel3DPortalInstance.tsx
-var import_react29 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+import { useContext as useContext10, useEffect as useEffect15 } from "react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 function renderCSSModel3DPortalInstance(spatialId, inProps) {
   const { className, style = {}, ...props } = inProps;
-  const rootSpatialReactContextObject = (0, import_react29.useContext)(SpatialReactContext);
+  const rootSpatialReactContextObject = useContext10(SpatialReactContext);
   const { ref, spatialStyle, ready } = useSpatialStyle();
   const spatialTransform = {
     position: spatialStyle.position,
@@ -3174,21 +3204,22 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
     scale: spatialStyle.scale
   };
   const visible = spatialStyle.visible;
-  (0, import_react29.useEffect)(() => {
+  useEffect15(() => {
     rootSpatialReactContextObject.notifySubDivEvent(spatialId, ref.current);
   }, [ref.current]);
   const cssParserDomStyle = {
     ...style,
     width: 0,
     height: 0,
-    padding: 0
+    padding: 0,
+    position: "absolute"
   };
   const model3DStyle = {
     ...style,
     transform: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    ready && /* @__PURE__ */ jsx15(
       Model3D,
       {
         className,
@@ -3198,18 +3229,18 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, style: cssParserDomStyle, ref })
+    /* @__PURE__ */ jsx15("div", { className, style: cssParserDomStyle, ref })
   ] });
 }
 
 // src/spatial-react-components/Model3D/CSSModel3D.tsx
 function CSSModel3DBase(props, refIn) {
-  const rootSpatialReactContextObject = (0, import_react30.useContext)(SpatialReactContext);
+  const rootSpatialReactContextObject = useContext11(SpatialReactContext);
   const isInSpatialDiv = !!rootSpatialReactContextObject;
   if (isInSpatialDiv) {
-    const layer = (0, import_react30.useContext)(SpatialLayerContext) + 1;
-    const isInStandardInstance = !!(0, import_react30.useContext)(SpatialIsStandardInstanceContext);
-    const spatialId = (0, import_react30.useMemo)(() => {
+    const layer = useContext11(SpatialLayerContext) + 1;
+    const isInStandardInstance = !!useContext11(SpatialIsStandardInstanceContext);
+    const spatialId = useMemo8(() => {
       return rootSpatialReactContextObject.getSubDivSpatialID(
         layer,
         isInStandardInstance,
@@ -3225,14 +3256,14 @@ function CSSModel3DBase(props, refIn) {
     return renderCSSModel3DNotInSpatialDiv(props, refIn);
   }
 }
-var CSSModel3D = (0, import_react30.forwardRef)(CSSModel3DBase);
+var CSSModel3D = forwardRef10(CSSModel3DBase);
 CSSModel3D.displayName = "CSSModel3D";
 
 // src/spatial-react-components/Model/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 function renderInModel3D(inProps, ref, modelUrl, placeHolder) {
   const { poster, ...props } = inProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CSSModel3D, { modelUrl, ...props, ref, children: [
+  return /* @__PURE__ */ jsxs6(CSSModel3D, { modelUrl, ...props, ref, children: [
     " ",
     placeHolder,
     " "
@@ -3242,7 +3273,7 @@ function parseChildren(child) {
   if (child === void 0) {
     throw new Error("children with <source> required  ");
   }
-  const children = import_react31.Children.toArray(child);
+  const children = Children.toArray(child);
   const sourceElements = children.filter(
     (node) => node.type === "source"
   );
@@ -3271,21 +3302,22 @@ function parseChildren(child) {
 }
 function ModelBase(inProps, ref) {
   const { children, ...props } = inProps;
-  const { placeHolder, gltfSourceURL, usdzSourceURL } = (0, import_react31.useMemo)(
+  const { placeHolder, gltfSourceURL, usdzSourceURL } = useMemo9(
     () => parseChildren(children),
     [children]
   );
   const isWebEnv = !getSession();
   if (isWebEnv) {
-    const myModelViewer = (0, import_react31.useRef)(null);
+    const myModelViewer = useRef12(null);
     const { className, style = {}, ...props2 } = inProps;
-    let [modelViewerExists, setModelViewerExists] = (0, import_react31.useState)(false);
-    (0, import_react31.useEffect)(() => {
+    const isDragging = useRef12(false);
+    let [modelViewerExists, setModelViewerExists] = useState6(false);
+    useEffect16(() => {
       customElements.whenDefined("model-viewer").then(function() {
         setModelViewerExists(true);
       });
     }, []);
-    (0, import_react31.useEffect)(() => {
+    useEffect16(() => {
       if (!modelViewerExists) {
         return;
       }
@@ -3306,6 +3338,7 @@ function ModelBase(inProps, ref) {
         }
       });
       myModelViewer.current.addEventListener("pointerdown", (event) => {
+        isDragging.current = true;
         if (props2.onDragStart) {
           props2.onDragStart({
             eventType: "dragstart",
@@ -3316,6 +3349,9 @@ function ModelBase(inProps, ref) {
         }
       });
       myModelViewer.current.addEventListener("pointermove", (event) => {
+        if (!isDragging.current) {
+          return;
+        }
         if (props2.onDrag) {
           props2.onDrag({
             eventType: "drag",
@@ -3326,6 +3362,10 @@ function ModelBase(inProps, ref) {
         }
       });
       myModelViewer.current.addEventListener("pointerup", (event) => {
+        if (!isDragging.current) {
+          return;
+        }
+        isDragging.current = false;
         if (props2.onDragEnd) {
           props2.onDragEnd({
             eventType: "dragend",
@@ -3336,7 +3376,7 @@ function ModelBase(inProps, ref) {
         }
       });
     }, [modelViewerExists]);
-    (0, import_react31.useEffect)(() => {
+    useEffect16(() => {
       if (props2.contentMode !== void 0 && props2.contentMode !== "fit") {
         console.warn(
           "Model element contentMode != fit isn't supported on 2D screens"
@@ -3353,7 +3393,7 @@ function ModelBase(inProps, ref) {
         );
       }
     }, [props2.contentMode, props2.resizable, props2.aspectRatio]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ jsx16("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ jsx16(
       "model-viewer",
       {
         ref: myModelViewer,
@@ -3366,15 +3406,14 @@ function ModelBase(inProps, ref) {
         "touch-action": "pan-y",
         poster: props2.poster
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {}) });
+    ) : /* @__PURE__ */ jsx16(Fragment5, {}) });
   } else {
     return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
   }
 }
-var Model = (0, import_react31.forwardRef)(ModelBase);
+var Model = forwardRef11(ModelBase);
 Model.displayName = "Model";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,
   Model,
@@ -3390,6 +3429,7 @@ Model.displayName = "Model";
   notifyUpdateStandInstanceLayout,
   parseCornerRadius,
   withCSSSpatial,
-  withSpatial
-});
+  withSpatial,
+  withSpatialMonitor
+};
 //# sourceMappingURL=index.js.map