@webspatial/react-sdk 1.1.0 → 1.2.1

package/dist/default/index.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.1.0"
+        window.__webspatialsdk__['react-sdk-version'] = "1.2.1"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -300,7 +300,7 @@ var SpatialContainerRefProxy = class {
               }
               const extraProps = cacheExtraRefProps;
               if (extraProps.hasOwnProperty(prop)) {
-                return extraProps[prop]();
+                return extraProps[prop];
               }
             }
             const value = Reflect.get(target, prop);
@@ -335,6 +335,12 @@ var SpatialContainerRefProxy = class {
                 self.transformVisibilityTaskContainerDom.className = value;
               }
             }
+            if (typeof prop === "string" && self.extraRefProps) {
+              if (!cacheExtraRefProps) {
+                cacheExtraRefProps = self.extraRefProps(domProxy);
+              }
+              cacheExtraRefProps[prop] = value;
+            }
             return Reflect.set(target, prop, value);
           }
         }
@@ -680,7 +686,7 @@ var StandardSpatializedContainer = forwardRef(
 function injectSpatialDefaultStyle() {
   const styleElement = document.createElement("style");
   styleElement.type = "text/css";
-  styleElement.innerHTML = " .xr-spatial-default {  --xr-back: 0; --xr-depth: 0; --xr-z-index: 0; --xr-background-material: none;  } ";
+  styleElement.innerHTML = " :where(.xr-spatial-default) {  --xr-back: 0; --xr-depth: 0; --xr-z-index: 0; --xr-background-material: none;  } ";
   document.head.appendChild(styleElement);
 }
 
@@ -1158,12 +1164,12 @@ function useSync2DFrame(spatialId, portalInstanceObject, spatializedContainerObj
 
 // src/spatialized-container/hooks/useSpatializedElement.ts
 import { useEffect as useEffect6, useState as useState3 } from "react";
-function useSpatializedElement(createSpatializedElement3, portalInstanceObject) {
+function useSpatializedElement(createSpatializedElement2, portalInstanceObject) {
   const [spatializedElement, setSpatializedElement] = useState3();
   useEffect6(() => {
     let isDestroyed = false;
     let spatializedElement2;
-    createSpatializedElement3().then(
+    createSpatializedElement2().then(
       (inSpatializedElement) => {
         if (!isDestroyed) {
           spatializedElement2 = inSpatializedElement;
@@ -1181,7 +1187,7 @@ function useSpatializedElement(createSpatializedElement3, portalInstanceObject)
         spatializedElement2 = void 0;
       }
     };
-  }, [createSpatializedElement3, portalInstanceObject]);
+  }, [createSpatializedElement2, portalInstanceObject]);
   return spatializedElement;
 }
 
@@ -1215,16 +1221,14 @@ function renderPlaceholderInSubPortal(portalInstanceObject, El) {
 function PortalSpatializedContainer(props) {
   const {
     spatializedContent: Content,
-    createSpatializedElement: createSpatializedElement3,
+    createSpatializedElement: createSpatializedElement2,
     getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
     onSpatialTap,
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd,
     [SpatialID]: spatialId,
@@ -1251,7 +1255,7 @@ function PortalSpatializedContainer(props) {
   }, []);
   useSync2DFrame(spatialId, portalInstanceObject, spatializedContainerObject);
   const spatializedElement = useSpatializedElement(
-    createSpatializedElement3,
+    createSpatializedElement2,
     portalInstanceObject
   );
   const PlaceholderEl = renderPlaceholderInSubPortal(
@@ -1298,16 +1302,6 @@ function PortalSpatializedContainer(props) {
       spatializedElement.onSpatialDragStart = onSpatialDragStart;
     }
   }, [spatializedElement, onSpatialDragStart]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialRotateStart = onSpatialRotateStart;
-    }
-  }, [spatializedElement, onSpatialRotateStart]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialMagnifyStart = onSpatialMagnifyStart;
-    }
-  }, [spatializedElement, onSpatialMagnifyStart]);
   return /* @__PURE__ */ jsxs(PortalInstanceContext.Provider, { value: portalInstanceObject, children: [
     spatializedElement && portalInstanceObject.dom && /* @__PURE__ */ jsx3(Content, { spatializedElement, ...restProps }),
     PlaceholderEl
@@ -1315,7 +1309,7 @@ function PortalSpatializedContainer(props) {
 }
 
 // src/spatialized-container/hooks/useSpatialEvents.ts
-function createEventProxy(event, currentTargetGetter) {
+function createEventProxy(event, currentTargetGetter, offsetXGetter, offsetYGetter, offsetZGetter) {
   return new Proxy(event, {
     get(target, prop) {
       if (prop === "currentTarget") {
@@ -1324,20 +1318,41 @@ function createEventProxy(event, currentTargetGetter) {
       if (prop === "isTrusted") {
         return true;
       }
+      if (prop === "bubbles") {
+        return false;
+      }
+      if (prop === "offsetX" && offsetXGetter) {
+        return offsetXGetter(target) ?? 0;
+      }
+      if (prop === "offsetY" && offsetYGetter) {
+        return offsetYGetter(target) ?? 0;
+      }
+      if (prop === "offsetZ" && offsetZGetter) {
+        return offsetZGetter(target) ?? 0;
+      }
       return Reflect.get(target, prop);
     }
   });
 }
-function createEventHandler(handler, currentTargetGetter) {
+function createEventHandler(handler, currentTargetGetter, offsetXGetter, offsetYGetter, offsetZGetter) {
   return handler ? (event) => {
-    const proxyEvent = createEventProxy(event, currentTargetGetter);
+    const proxyEvent = createEventProxy(
+      event,
+      currentTargetGetter,
+      offsetXGetter,
+      offsetYGetter,
+      offsetZGetter
+    );
     handler(proxyEvent);
   } : void 0;
 }
 function useSpatialEventsBase(spatialEvents, currentTargetGetter) {
   const onSpatialTap = createEventHandler(
     spatialEvents.onSpatialTap,
-    currentTargetGetter
+    currentTargetGetter,
+    (ev) => ev.detail?.location3D?.x,
+    (ev) => ev.detail?.location3D?.y,
+    (ev) => ev.detail?.location3D?.z
   );
   const onSpatialDrag = createEventHandler(
     spatialEvents.onSpatialDrag,
@@ -1365,19 +1380,18 @@ function useSpatialEventsBase(spatialEvents, currentTargetGetter) {
   );
   const onSpatialDragStart = createEventHandler(
     spatialEvents.onSpatialDragStart,
-    currentTargetGetter
+    currentTargetGetter,
+    (ev) => ev.detail?.startLocation3D?.x,
+    (ev) => ev.detail?.startLocation3D?.y,
+    (ev) => ev.detail?.startLocation3D?.z
   );
-  const onSpatialRotateStart = createEventHandler(spatialEvents.onSpatialRotateStart, currentTargetGetter);
-  const onSpatialMagnifyStart = createEventHandler(spatialEvents.onSpatialMagnifyStart, currentTargetGetter);
   return {
     onSpatialTap,
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd
   };
@@ -1462,16 +1476,14 @@ function SpatializedContainerBase(inprops, ref) {
     const {
       component: Component,
       spatializedContent,
-      createSpatializedElement: createSpatializedElement3,
+      createSpatializedElement: createSpatializedElement2,
       getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
       onSpatialTap: onSpatialTap2,
       onSpatialDragStart: onSpatialDragStart2,
       onSpatialDrag: onSpatialDrag2,
       onSpatialDragEnd: onSpatialDragEnd2,
-      onSpatialRotateStart: onSpatialRotateStart2,
       onSpatialRotate: onSpatialRotate2,
       onSpatialRotateEnd: onSpatialRotateEnd2,
-      onSpatialMagnifyStart: onSpatialMagnifyStart2,
       onSpatialMagnify: onSpatialMagnify2,
       onSpatialMagnifyEnd: onSpatialMagnifyEnd2,
       extraRefProps: extraRefProps2,
@@ -1498,10 +1510,8 @@ function SpatializedContainerBase(inprops, ref) {
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd,
     extraRefProps,
@@ -1515,10 +1525,8 @@ function SpatializedContainerBase(inprops, ref) {
           onSpatialDragStart,
           onSpatialDrag,
           onSpatialDragEnd,
-          onSpatialRotateStart,
           onSpatialRotate,
           onSpatialRotateEnd,
-          onSpatialMagnifyStart,
           onSpatialMagnify,
           onSpatialMagnifyEnd
         },
@@ -1547,7 +1555,7 @@ function SpatializedContainerBase(inprops, ref) {
       }, [spatialContainerRefProxy.current]);
       const {
         spatializedContent,
-        createSpatializedElement: createSpatializedElement3,
+        createSpatializedElement: createSpatializedElement2,
         getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
         ...restProps
       } = props;
@@ -1584,10 +1592,8 @@ function SpatializedContainerBase(inprops, ref) {
         onSpatialDragStart,
         onSpatialDrag,
         onSpatialDragEnd,
-        onSpatialRotateStart,
         onSpatialRotate,
         onSpatialRotateEnd,
-        onSpatialMagnifyStart,
         onSpatialMagnify,
         onSpatialMagnifyEnd
       },
@@ -1599,7 +1605,7 @@ function SpatializedContainerBase(inprops, ref) {
     );
     const {
       spatializedContent,
-      createSpatializedElement: createSpatializedElement3,
+      createSpatializedElement: createSpatializedElement2,
       getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
       ...restProps
     } = props;
@@ -1809,17 +1815,21 @@ import {
   useCallback as useCallback6,
   useContext as useContext8,
   useEffect as useEffect12,
-  useMemo as useMemo3
+  useMemo as useMemo3,
+  useState as useState6,
+  useImperativeHandle,
+  useRef as useRef4
 } from "react";
 import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
 function getAbsoluteURL(url) {
   if (!url) {
     return "";
   }
-  if (url.startsWith("http") || url.startsWith("//")) {
+  try {
+    return new URL(url, document.baseURI).toString();
+  } catch {
     return url;
   }
-  return window.location.origin + url;
 }
 function createLoadEvent(type, targetGetter) {
   const event = new CustomEvent(type, {
@@ -1882,43 +1892,23 @@ function SpatializedContent2(props) {
   }, [onError]);
   return /* @__PURE__ */ jsx8(Fragment2, {});
 }
-async function createSpatializedElement2() {
-  return getSession().createSpatializedStatic3DElement();
-}
 function SpatializedStatic3DElementContainerBase(props, ref) {
+  const containerRef = useRef4(null);
+  const [elementCreated, setElementCreated] = useState6(false);
+  useImperativeHandle(ref, () => elementCreated ? containerRef.current : null, [elementCreated]);
+  const createSpatializedElement2 = useCallback6(async () => {
+    const element = await getSession().createSpatializedStatic3DElement();
+    setElementCreated(true);
+    return element;
+  }, [setElementCreated]);
   const extraRefProps = useCallback6(
     (domProxy) => {
-      const modelTransform = new DOMMatrix();
-      let needupdate = false;
-      const triggerUpdate = () => {
-        const spatializedElement = domProxy.__spatializedElement;
-        spatializedElement.updateModelTransform(modelTransform);
-        needupdate = false;
-      };
-      const domMatrixProxy = new Proxy(modelTransform, {
-        get(target, prop, receiver) {
-          const value = Reflect.get(target, prop, receiver);
-          if (typeof value === "function") {
-            return function(...args) {
-              requestAnimationFrame(triggerUpdate);
-              return value.apply(target, args);
-            };
-          } else {
-            return value;
-          }
-        },
-        set(target, prop, value) {
-          const success = Reflect.set(target, prop, value);
-          if (!needupdate) {
-            needupdate = true;
-            requestAnimationFrame(triggerUpdate);
-          }
-          return success;
-        }
-      });
+      let modelTransform = new DOMMatrixReadOnly();
       return {
-        currentSrc: () => getAbsoluteURL(props.src),
-        ready: () => {
+        get currentSrc() {
+          return getAbsoluteURL(props.src);
+        },
+        get ready() {
           const spatializedElement = domProxy.__spatializedElement;
           const promise = spatializedElement.ready.then((success) => {
             if (success) {
@@ -1928,7 +1918,14 @@ function SpatializedStatic3DElementContainerBase(props, ref) {
           });
           return promise;
         },
-        entityTransform: () => domMatrixProxy
+        get entityTransform() {
+          return modelTransform;
+        },
+        set entityTransform(value) {
+          modelTransform = value;
+          const spatializedElement = domProxy.__spatializedElement;
+          spatializedElement.updateModelTransform(modelTransform);
+        }
       };
     },
     []
@@ -1936,7 +1933,7 @@ function SpatializedStatic3DElementContainerBase(props, ref) {
   return /* @__PURE__ */ jsx8(
     SpatializedContainer,
     {
-      ref,
+      ref: containerRef,
       component: "div",
       createSpatializedElement: createSpatializedElement2,
       spatializedContent: SpatializedContent2,
@@ -1998,9 +1995,9 @@ function initScene(name, callback, options) {
 import { forwardRef as forwardRef9 } from "react";
 
 // src/spatialized-container-monitor/useMonitorDomChange.tsx
-import { useRef as useRef4, useEffect as useEffect13, useMemo as useMemo4 } from "react";
+import { useRef as useRef5, useEffect as useEffect13, useMemo as useMemo4 } from "react";
 function useMonitorDomChange(inRef) {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   useEffect13(() => {
     const observer = new MutationObserver((mutationsList) => {
       notifyDOMUpdate(mutationsList);
@@ -2093,6 +2090,9 @@ function withSpatialMonitor(El) {
 }
 
 // src/reality/components/Entity.tsx
+import { forwardRef as forwardRef11 } from "react";
+
+// src/reality/components/BaseEntity.tsx
 import { forwardRef as forwardRef10 } from "react";
 
 // src/reality/context/RealityContext.tsx
@@ -2106,7 +2106,7 @@ var ParentContext = createContext6(null);
 var useParentContext = () => useContext10(ParentContext);
 
 // src/reality/hooks/useEntityTransform.tsx
-import { useEffect as useEffect15, useRef as useRef5 } from "react";
+import { useEffect as useEffect15, useRef as useRef6 } from "react";
 
 // src/reality/utils/ResourceRegistry.ts
 var ResourceRegistry = class {
@@ -2122,7 +2122,8 @@ var ResourceRegistry = class {
   removeAndDestroy(id) {
     const p = this.resources.get(id);
     if (p) {
-      p.then((spatialObj) => spatialObj.destroy());
+      p.then((spatialObj) => spatialObj.destroy()).catch(() => {
+      });
     }
     this.resources.delete(id);
   }
@@ -2132,7 +2133,10 @@ var ResourceRegistry = class {
   destroy() {
     const pending = Array.from(this.resources.values());
     this.resources.clear();
-    pending.forEach((promise) => promise.then((spatialObj) => spatialObj.destroy()));
+    pending.forEach(
+      (promise) => promise.then((spatialObj) => spatialObj.destroy()).catch(() => {
+      })
+    );
   }
 };
 
@@ -2183,7 +2187,7 @@ var AbortResourceManager = class {
 
 // src/reality/hooks/useEntityTransform.tsx
 function useEntityTransform(entity, { position, rotation, scale }) {
-  const last = useRef5({});
+  const last = useRef6({});
   useEffect15(() => {
     if (!entity) return;
     const shouldUpdate = !shallowEqualVec3(last.current.position, position) || !shallowEqualRotation(last.current.rotation, rotation) || !shallowEqualVec3(last.current.scale, scale);
@@ -2203,7 +2207,7 @@ function useEntityTransform(entity, { position, rotation, scale }) {
 }
 
 // src/reality/hooks/useEntityEvent.tsx
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect17, useRef as useRef8 } from "react";
 
 // src/reality/type.ts
 var eventMap = {
@@ -2224,9 +2228,9 @@ var eventMap = {
 };
 
 // src/reality/hooks/useEntityRef.tsx
-import { useImperativeHandle } from "react";
+import { useImperativeHandle as useImperativeHandle2 } from "react";
 var useEntityRef = (ref, instance) => {
-  useImperativeHandle(ref, () => instance);
+  useImperativeHandle2(ref, () => instance);
 };
 var EntityRef = class {
   _entity;
@@ -2307,27 +2311,69 @@ function createEventProxy2(ev, instance) {
         }
         return instance;
       }
+      if (prop === "bubbles") {
+        return true;
+      }
+      if (prop === "offsetX") {
+        const type = target.type;
+        if (type === "spatialtap") {
+          return target.detail?.location3D?.x ?? 0;
+        }
+        if (type === "spatialdragstart") {
+          return target.detail?.startLocation3D?.x ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "offsetY") {
+        const type = target.type;
+        if (type === "spatialtap") {
+          return target.detail?.location3D?.y ?? 0;
+        }
+        if (type === "spatialdragstart") {
+          return target.detail?.startLocation3D?.y ?? 0;
+        }
+        return void 0;
+      }
+      if (prop === "offsetZ") {
+        const type = target.type;
+        if (type === "spatialtap") {
+          return target.detail?.location3D?.z ?? 0;
+        }
+        if (type === "spatialdragstart") {
+          return target.detail?.startLocation3D?.z ?? 0;
+        }
+        return void 0;
+      }
       const val = target[prop];
       return typeof val === "function" ? val.bind(target) : val;
     }
   });
 }
 var useEntityEvent = ({ instance, ...handlers }) => {
+  const eventsSetRef = useRef8(/* @__PURE__ */ new Set());
   useEffect17(() => {
     const entity = instance.entity;
     if (!entity) return;
-    const boundHandlers = [];
     Object.entries(eventMap).forEach(([reactKey, spatialEvent]) => {
       const handlerFn = handlers[reactKey];
       if (!handlerFn) return;
       const wrapped = (ev) => handlerFn(createEventProxy2(ev, instance));
       entity.addEvent(spatialEvent, wrapped);
-      boundHandlers.push(() => entity.removeEvent(spatialEvent));
+      eventsSetRef.current.add(reactKey);
     });
     return () => {
-      boundHandlers.forEach((unbind) => unbind());
     };
   }, [instance.entity, ...Object.values(handlers)]);
+  useEffect17(() => {
+    const entity = instance.entity;
+    if (!entity) return;
+    return () => {
+      for (let x of eventsSetRef.current) {
+        entity.removeEvent(x);
+      }
+      eventsSetRef.current.clear();
+    };
+  }, [instance.entity]);
   return null;
 };
 
@@ -2346,7 +2392,7 @@ var useEntityId = ({ id, entity }) => {
 };
 
 // src/reality/hooks/useEntity.tsx
-import { useEffect as useEffect19, useRef as useRef7 } from "react";
+import { useEffect as useEffect19, useRef as useRef9 } from "react";
 var useEntity = ({
   ref,
   id,
@@ -2357,10 +2403,10 @@ var useEntity = ({
   onSpatialDragStart,
   onSpatialDrag,
   onSpatialDragEnd,
-  onSpatialRotateStart,
+  // onSpatialRotateStart,
   onSpatialRotate,
   onSpatialRotateEnd,
-  onSpatialMagnifyStart,
+  // onSpatialMagnifyStart,
   onSpatialMagnify,
   onSpatialMagnifyEnd,
   // TODO: add other event handlers
@@ -2368,7 +2414,7 @@ var useEntity = ({
 }) => {
   const ctx = useRealityContext();
   const parent = useParentContext();
-  const instanceRef = useRef7(new EntityRef(null, ctx));
+  const instanceRef = useRef9(new EntityRef(null, ctx));
   const forceUpdate = useForceUpdate2();
   useEffect19(() => {
     if (!ctx) return;
@@ -2409,10 +2455,10 @@ var useEntity = ({
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
+    // onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
+    // onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd
   });
@@ -2420,115 +2466,94 @@ var useEntity = ({
 };
 
 // src/reality/hooks/useForceUpdate.tsx
-import { useCallback as useCallback7, useState as useState7 } from "react";
+import { useCallback as useCallback7, useState as useState8 } from "react";
 var useForceUpdate2 = () => {
-  const [, setTick] = useState7(0);
+  const [, setTick] = useState8(0);
   return useCallback7(() => setTick((tick) => tick + 1), []);
 };
 
-// src/reality/components/Entity.tsx
+// src/reality/components/BaseEntity.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Entity = forwardRef10(
-  ({ id, children, position, rotation, scale, onSpatialTap, name }, ref) => {
+var BaseEntity = forwardRef10(
+  ({ children, createEntity, ...rest }, ref) => {
     const ctx = useRealityContext();
     const entity = useEntity({
+      ...rest,
       ref,
-      id,
-      position,
-      rotation,
-      scale,
-      onSpatialTap,
-      createEntity: async () => ctx.session.createEntity({ id, name })
+      createEntity: (signal) => createEntity(ctx, signal)
     });
     if (!entity) return null;
     return /* @__PURE__ */ jsx12(ParentContext.Provider, { value: entity, children });
   }
 );
 
+// src/reality/components/Entity.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Entity = forwardRef11((props, ref) => {
+  const { id, name, children, ...rest } = props;
+  return /* @__PURE__ */ jsx13(
+    BaseEntity,
+    {
+      ...rest,
+      id,
+      ref,
+      createEntity: async (ctxVal) => ctxVal.session.createEntity({ id, name }),
+      children
+    }
+  );
+});
+
 // src/reality/components/BoxEntity.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 
 // src/reality/components/GeometryEntity.tsx
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var GeometryEntity = forwardRef11(
-  ({
-    id,
-    position,
-    rotation,
-    scale,
-    onSpatialTap,
-    onSpatialDragStart,
-    onSpatialDrag,
-    onSpatialDragEnd,
-    onSpatialRotateStart,
-    onSpatialRotate,
-    onSpatialRotateEnd,
-    onSpatialMagnifyStart,
-    onSpatialMagnify,
-    onSpatialMagnifyEnd,
-    // TODO: add other event handlers
-    children,
-    name,
-    materials,
-    geometryOptions,
-    createGeometry
-  }, ref) => {
-    const ctx = useRealityContext();
-    const entity = useEntity({
-      ref,
-      id,
-      position,
-      rotation,
-      scale,
-      onSpatialTap,
-      onSpatialDragStart,
-      onSpatialDrag,
-      onSpatialDragEnd,
-      onSpatialRotateStart,
-      onSpatialRotate,
-      onSpatialRotateEnd,
-      onSpatialMagnifyStart,
-      onSpatialMagnify,
-      onSpatialMagnifyEnd,
-      createEntity: async (signal) => {
-        const manager = new AbortResourceManager(signal);
-        try {
-          const ent = await manager.addResource(
-            () => ctx.session.createEntity({ id, name })
-          );
-          const geometry = await manager.addResource(
-            () => createGeometry(geometryOptions)
-          );
-          const materialList = await Promise.all(
-            materials?.map((id2) => ctx.resourceRegistry.get(id2)).filter(Boolean) ?? []
-          );
-          const modelComponent = await manager.addResource(
-            () => ctx.session.createModelComponent({
-              mesh: geometry,
-              materials: materialList
-            })
-          );
-          await ent.addComponent(modelComponent);
-          return ent;
-        } catch (error) {
-          console.error(error);
-          await manager.dispose();
-          return null;
-        }
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var GeometryEntity = forwardRef12(
+  ({ id, children, name, materials, geometryOptions, createGeometry, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx14(
+      BaseEntity,
+      {
+        ...rest,
+        id,
+        ref,
+        createEntity: async (ctx, signal) => {
+          const manager = new AbortResourceManager(signal);
+          try {
+            const ent = await manager.addResource(
+              () => ctx.session.createEntity({ id, name })
+            );
+            const geometry = await manager.addResource(
+              () => createGeometry(geometryOptions)
+            );
+            const materialList = await Promise.all(
+              materials?.map((id2) => ctx.resourceRegistry.get(id2)).filter(Boolean) ?? []
+            );
+            const modelComponent = await manager.addResource(
+              () => ctx.session.createModelComponent({
+                mesh: geometry,
+                materials: materialList
+              })
+            );
+            await ent.addComponent(modelComponent);
+            return ent;
+          } catch (error) {
+            await manager.dispose();
+            return null;
+          }
+        },
+        children
       }
-    });
-    if (!entity) return null;
-    return /* @__PURE__ */ jsx13(ParentContext.Provider, { value: entity, children });
+    );
   }
 );
 
 // src/reality/components/BoxEntity.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var BoxEntity = forwardRef12(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var BoxEntity = forwardRef13(
   ({ children, ...props }, ref) => {
     const ctx = useRealityContext();
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       GeometryEntity,
       {
         ...props,
@@ -2548,10 +2573,10 @@ var BoxEntity = forwardRef12(
 );
 
 // src/reality/components/UnlitMaterial.tsx
-import { useEffect as useEffect20, useRef as useRef8 } from "react";
+import { useEffect as useEffect20, useRef as useRef10 } from "react";
 var UnlitMaterial = ({ children, ...options }) => {
   const ctx = useRealityContext();
-  const materialRef = useRef8();
+  const materialRef = useRef10();
   useEffect20(() => {
     if (!ctx) return;
     const { session, reality, resourceRegistry } = ctx;
@@ -2574,12 +2599,12 @@ var UnlitMaterial = ({ children, ...options }) => {
 };
 
 // src/reality/components/SphereEntity.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var SphereEntity = forwardRef13(
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var SphereEntity = forwardRef14(
   ({ children, ...props }, ref) => {
     const ctx = useRealityContext();
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       GeometryEntity,
       {
         ...props,
@@ -2595,12 +2620,12 @@ var SphereEntity = forwardRef13(
 );
 
 // src/reality/components/ConeEntity.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var ConeEntity = forwardRef14(
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ConeEntity = forwardRef15(
   ({ children, ...props }, ref) => {
     const ctx = useRealityContext();
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       GeometryEntity,
       {
         ...props,
@@ -2617,12 +2642,12 @@ var ConeEntity = forwardRef14(
 );
 
 // src/reality/components/CylinderEntity.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var CylinderEntity = forwardRef15(
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var CylinderEntity = forwardRef16(
   ({ children, ...props }, ref) => {
     const ctx = useRealityContext();
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       GeometryEntity,
       {
         ...props,
@@ -2639,12 +2664,12 @@ var CylinderEntity = forwardRef15(
 );
 
 // src/reality/components/PlaneEntity.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var PlaneEntity = forwardRef16(
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var PlaneEntity = forwardRef17(
   ({ children, ...props }, ref) => {
     const ctx = useRealityContext();
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       GeometryEntity,
       {
         ...props,
@@ -2662,13 +2687,13 @@ var PlaneEntity = forwardRef16(
 );
 
 // src/reality/components/SceneGraph.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var SceneGraph = ({ children }) => {
-  return /* @__PURE__ */ jsx19(ParentContext.Provider, { value: null, children });
+  return /* @__PURE__ */ jsx20(ParentContext.Provider, { value: null, children });
 };
 
 // src/reality/components/ModelAsset.tsx
-import { useEffect as useEffect21, useRef as useRef9 } from "react";
+import { useEffect as useEffect21, useRef as useRef11 } from "react";
 var resolveAssetUrl = (url) => {
   if (url.startsWith("http://") || url.startsWith("https://")) {
     return url;
@@ -2677,16 +2702,16 @@ var resolveAssetUrl = (url) => {
 };
 var ModelAsset = ({ children, ...options }) => {
   const ctx = useRealityContext();
-  const materialRef = useRef9();
+  const materialRef = useRef11();
   useEffect21(() => {
     const controller = new AbortController();
     if (!ctx) return;
     const { session, reality, resourceRegistry } = ctx;
     const init = async () => {
-      const resolvedUrl = resolveAssetUrl(options.src);
-      const modelAssetPromise = session.createModelAsset({ url: resolvedUrl });
-      resourceRegistry.add(options.id, modelAssetPromise);
       try {
+        const resolvedUrl = resolveAssetUrl(options.src);
+        const modelAssetPromise = session.createModelAsset({ url: resolvedUrl });
+        resourceRegistry.add(options.id, modelAssetPromise);
         const mat = await modelAssetPromise;
         if (controller.signal.aborted) {
           mat.destroy();
@@ -2708,58 +2733,64 @@ var ModelAsset = ({ children, ...options }) => {
 };
 
 // src/reality/components/ModelEntity.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var ModelEntity = forwardRef17(
-  ({ id, model, position, rotation, scale, onSpatialTap, children, name }, ref) => {
-    const ctx = useRealityContext();
-    const entity = useEntity({
-      ref,
-      id,
-      position,
-      rotation,
-      scale,
-      onSpatialTap,
-      createEntity: async (signal) => {
-        try {
-          const modelAsset = await ctx.resourceRegistry.get(model);
-          if (!modelAsset)
-            throw new Error(`ModelEntity: model not found ${model}`);
-          if (signal.aborted) {
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ModelEntity = forwardRef18(
+  ({ id, model, children, name, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx21(
+      BaseEntity,
+      {
+        ...rest,
+        id,
+        ref,
+        createEntity: async (ctx, signal) => {
+          try {
+            const modelAsset = await ctx.resourceRegistry.get(model);
+            if (!modelAsset)
+              throw new Error(`ModelEntity: model not found ${model}`);
+            if (signal.aborted) return null;
+            return ctx.session.createSpatialModelEntity(
+              {
+                modelAssetId: modelAsset.id,
+                name
+              },
+              { id, name }
+            );
+          } catch (error) {
             return null;
           }
-          return ctx.session.createSpatialModelEntity(
-            {
-              modelAssetId: modelAsset.id,
-              name
-            },
-            { id, name }
-          );
-        } catch (error) {
-          console.error("ModelEntity error:", error);
-          return null;
-        }
+        },
+        children
       }
-    });
-    if (!entity) return null;
-    return /* @__PURE__ */ jsx20(ParentContext.Provider, { value: entity, children });
+    );
   }
 );
 
 // src/reality/components/Reality.tsx
 import {
-  forwardRef as forwardRef18,
+  forwardRef as forwardRef19,
   useCallback as useCallback8,
   useEffect as useEffect22,
-  useRef as useRef10,
-  useState as useState8
+  useRef as useRef12,
+  useState as useState9
 } from "react";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
-var Reality = forwardRef18(
-  function RealityBase({ children, ...props }, ref) {
-    const ctxRef = useRef10(null);
-    const creationId = useRef10(0);
-    const [isReady, setIsReady] = useState8(false);
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
+var Reality = forwardRef19(
+  function RealityBase({ children, ...inProps }, ref) {
+    const {
+      onSpatialTap,
+      onSpatialDragStart,
+      onSpatialDrag,
+      onSpatialDragEnd,
+      onSpatialRotate,
+      onSpatialRotateEnd,
+      onSpatialMagnify,
+      onSpatialMagnifyEnd,
+      ...props
+    } = inProps;
+    const ctxRef = useRef12(null);
+    const creationId = useRef12(0);
+    const [isReady, setIsReady] = useState9(false);
     const cleanupReality = useCallback8(() => {
       ctxRef.current?.resourceRegistry.destroy();
       ctxRef.current?.reality.destroy();
@@ -2805,9 +2836,9 @@ var Reality = forwardRef18(
         return null;
       }
     }, [cleanupReality]);
-    const content = useCallback8(() => /* @__PURE__ */ jsx21(Fragment3, {}), []);
+    const content = useCallback8(() => /* @__PURE__ */ jsx22(Fragment3, {}), []);
     return /* @__PURE__ */ jsxs3(RealityContext.Provider, { value: ctxRef.current, children: [
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         SpatializedContainer,
         {
           component: "div",
@@ -2823,9 +2854,9 @@ var Reality = forwardRef18(
 );
 
 // src/Model.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { Spatial as Spatial2 } from "@webspatial/core-sdk";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var spatial2 = new Spatial2();
 function ModelBase(props, ref) {
   const { "enable-xr": enableXR, ...restProps } = props;
@@ -2835,23 +2866,21 @@ function ModelBase(props, ref) {
       onSpatialDragStart,
       onSpatialDrag,
       onSpatialDragEnd,
-      onSpatialRotateStart,
       onSpatialRotate,
       onSpatialRotateEnd,
-      onSpatialMagnifyStart,
       onSpatialMagnify,
       onSpatialMagnifyEnd,
       ...modelProps
     } = restProps;
-    return /* @__PURE__ */ jsx22("model", { ref, ...modelProps });
+    return /* @__PURE__ */ jsx23("model", { ref, ...modelProps });
   }
-  return /* @__PURE__ */ jsx22(SpatializedStatic3DElementContainer, { ref, ...restProps });
+  return /* @__PURE__ */ jsx23(SpatializedStatic3DElementContainer, { ref, ...restProps });
 }
-var Model = withSSRSupported(forwardRef19(ModelBase));
+var Model = withSSRSupported(forwardRef20(ModelBase));
 Model.displayName = "Model";
 
 // src/index.ts
-var version = "1.1.0";
+var version = "1.2.1";
 if (typeof window !== "undefined") {
   initPolyfill();
 }