@webspatial/react-sdk 1.0.5 → 1.2.0

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.0.5"
+        window.__webspatialsdk__['react-sdk-version'] = "1.2.0"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -186,19 +186,40 @@ var SpatialContainerRefProxy = class {
               if (!self.styleProxy) {
                 self.styleProxy = new Proxy(target.style, {
                   get(target2, prop2) {
-                    if (prop2 === "visibility") {
-                      return self.transformVisibilityTaskContainerDom?.style.getPropertyValue(
-                        "visibility"
-                      );
-                    }
-                    if (prop2 === "transform") {
+                    if (prop2 === "visibility" || prop2 === "transform") {
                       return self.transformVisibilityTaskContainerDom?.style.getPropertyValue(
-                        "transform"
+                        prop2
                       );
                     }
                     const value2 = Reflect.get(target2, prop2);
                     if (typeof value2 === "function") {
-                      return value2.bind(target2);
+                      if (prop2 === "setProperty" || prop2 === "removeProperty" || prop2 === "getPropertyValue") {
+                        return function(...args) {
+                          const validProperties = ["visibility", "transform"];
+                          const [property] = args;
+                          if (validProperties.includes(property)) {
+                            if (prop2 === "setProperty") {
+                              const [, kValue] = args;
+                              self.transformVisibilityTaskContainerDom?.style.setProperty(
+                                property,
+                                kValue
+                              );
+                            } else if (prop2 === "removeProperty") {
+                              self.transformVisibilityTaskContainerDom?.style.removeProperty(
+                                property
+                              );
+                            } else if (prop2 === "getPropertyValue") {
+                              return self.transformVisibilityTaskContainerDom?.style.getPropertyValue(
+                                property
+                              );
+                            }
+                          } else {
+                            return value2.apply(this, args);
+                          }
+                        }.bind(target2);
+                      } else {
+                        return value2.bind(target2);
+                      }
                     } else {
                       return value2;
                     }
@@ -279,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);
@@ -314,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);
           }
         }
@@ -659,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);
 }
 
@@ -1200,10 +1227,8 @@ function PortalSpatializedContainer(props) {
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd,
     [SpatialID]: spatialId,
@@ -1277,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
@@ -1294,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") {
@@ -1303,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,
@@ -1344,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
   };
@@ -1447,10 +1482,8 @@ function SpatializedContainerBase(inprops, ref) {
       onSpatialDragStart: onSpatialDragStart2,
       onSpatialDrag: onSpatialDrag2,
       onSpatialDragEnd: onSpatialDragEnd2,
-      onSpatialRotateStart: onSpatialRotateStart2,
       onSpatialRotate: onSpatialRotate2,
       onSpatialRotateEnd: onSpatialRotateEnd2,
-      onSpatialMagnifyStart: onSpatialMagnifyStart2,
       onSpatialMagnify: onSpatialMagnify2,
       onSpatialMagnifyEnd: onSpatialMagnifyEnd2,
       extraRefProps: extraRefProps2,
@@ -1477,10 +1510,8 @@ function SpatializedContainerBase(inprops, ref) {
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd,
     extraRefProps,
@@ -1494,10 +1525,8 @@ function SpatializedContainerBase(inprops, ref) {
           onSpatialDragStart,
           onSpatialDrag,
           onSpatialDragEnd,
-          onSpatialRotateStart,
           onSpatialRotate,
           onSpatialRotateEnd,
-          onSpatialMagnifyStart,
           onSpatialMagnify,
           onSpatialMagnifyEnd
         },
@@ -1563,10 +1592,8 @@ function SpatializedContainerBase(inprops, ref) {
         onSpatialDragStart,
         onSpatialDrag,
         onSpatialDragEnd,
-        onSpatialRotateStart,
         onSpatialRotate,
         onSpatialRotateEnd,
-        onSpatialMagnifyStart,
         onSpatialMagnify,
         onSpatialMagnifyEnd
       },
@@ -1795,10 +1822,11 @@ 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, {
@@ -1867,37 +1895,12 @@ async function createSpatializedElement2() {
 function SpatializedStatic3DElementContainerBase(props, ref) {
   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) {
@@ -1907,7 +1910,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);
+        }
       };
     },
     []
@@ -2072,6 +2082,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
@@ -2101,7 +2114,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);
   }
@@ -2111,7 +2125,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(() => {
+      })
+    );
   }
 };
 
@@ -2182,7 +2199,7 @@ function useEntityTransform(entity, { position, rotation, scale }) {
 }
 
 // src/reality/hooks/useEntityEvent.tsx
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17, useRef as useRef7 } from "react";
 
 // src/reality/type.ts
 var eventMap = {
@@ -2202,42 +2219,161 @@ var eventMap = {
   onSpatialMagnifyEnd: "spatialmagnifyend"
 };
 
+// src/reality/hooks/useEntityRef.tsx
+import { useImperativeHandle } from "react";
+var useEntityRef = (ref, instance) => {
+  useImperativeHandle(ref, () => instance);
+};
+var EntityRef = class {
+  _entity;
+  _ctx;
+  constructor(entity = null, ctx = null) {
+    this._entity = entity;
+    this._ctx = ctx;
+  }
+  updateEntity(entity) {
+    if (entity) this._entity = entity;
+  }
+  updateCtx(ctx) {
+    if (ctx) this._ctx = ctx;
+  }
+  destroy() {
+    this._entity?.destroy();
+  }
+  get entity() {
+    return this._entity;
+  }
+  get id() {
+    return this._entity?.userData?.id;
+  }
+  get name() {
+    return this._entity?.userData?.name;
+  }
+  async convertFromEntityToEntity(fromEntityId, toEntityId, position) {
+    if (!this._entity) return position;
+    try {
+      const fromEnt = await this._ctx?.resourceRegistry.get(fromEntityId);
+      const toEnt = await this._ctx?.resourceRegistry.get(toEntityId);
+      if (!fromEnt || !toEnt) return position;
+      const ret = await this._entity.convertFromEntityToEntity(
+        fromEnt.id,
+        toEnt.id,
+        position
+      );
+      return ret?.data ?? position;
+    } catch {
+      return position;
+    }
+  }
+  async convertFromEntityToReality(entityId, position) {
+    if (!this._entity) return position;
+    try {
+      const ent = await this._ctx?.resourceRegistry.get(entityId);
+      if (!ent) return position;
+      const ret = await this._entity.convertFromEntityToScene(ent.id, position);
+      return ret?.data ?? position;
+    } catch {
+      return position;
+    }
+  }
+  async convertFromRealityToEntity(entityId, position) {
+    if (!this._entity) return position;
+    try {
+      const ent = await this._ctx?.resourceRegistry.get(entityId);
+      if (!ent) return position;
+      const ret = await this._entity.convertFromSceneToEntity(ent.id, position);
+      return ret?.data ?? position;
+    } catch {
+      return position;
+    }
+  }
+};
+
 // src/reality/hooks/useEntityEvent.tsx
 function createEventProxy2(ev, instance) {
   return new Proxy(ev, {
     get(target, prop) {
-      if (prop === "target" || prop === "currentTarget") {
+      if (prop === "currentTarget") {
         return instance;
       }
+      if (prop === "target") {
+        const origin = target.__origin;
+        if (origin) {
+          return new EntityRef(origin, null);
+        }
+        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 }) => {
-  useEffect16(() => {
+  const eventsSetRef = useRef7(/* @__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;
 };
 
 // src/reality/hooks/useEntityId.tsx
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 var useEntityId = ({ id, entity }) => {
   const ctx = useRealityContext();
-  useEffect17(() => {
+  useEffect18(() => {
     if (!id || !entity || !ctx) return;
     ctx.resourceRegistry.add(id, Promise.resolve(entity));
     return () => {
@@ -2248,7 +2384,7 @@ var useEntityId = ({ id, entity }) => {
 };
 
 // src/reality/hooks/useEntity.tsx
-import { useEffect as useEffect18, useRef as useRef6 } from "react";
+import { useEffect as useEffect19, useRef as useRef8 } from "react";
 var useEntity = ({
   ref,
   id,
@@ -2259,10 +2395,10 @@ var useEntity = ({
   onSpatialDragStart,
   onSpatialDrag,
   onSpatialDragEnd,
-  onSpatialRotateStart,
+  // onSpatialRotateStart,
   onSpatialRotate,
   onSpatialRotateEnd,
-  onSpatialMagnifyStart,
+  // onSpatialMagnifyStart,
   onSpatialMagnify,
   onSpatialMagnifyEnd,
   // TODO: add other event handlers
@@ -2270,9 +2406,9 @@ var useEntity = ({
 }) => {
   const ctx = useRealityContext();
   const parent = useParentContext();
-  const instanceRef = useRef6(new EntityRef(null, ctx));
+  const instanceRef = useRef8(new EntityRef(null, ctx));
   const forceUpdate = useForceUpdate2();
-  useEffect18(() => {
+  useEffect19(() => {
     if (!ctx) return;
     const controller = new AbortController();
     const init = async () => {
@@ -2311,86 +2447,16 @@ var useEntity = ({
     onSpatialDragStart,
     onSpatialDrag,
     onSpatialDragEnd,
-    onSpatialRotateStart,
+    // onSpatialRotateStart,
     onSpatialRotate,
     onSpatialRotateEnd,
-    onSpatialMagnifyStart,
+    // onSpatialMagnifyStart,
     onSpatialMagnify,
     onSpatialMagnifyEnd
   });
   return instanceRef.current.entity;
 };
 
-// src/reality/hooks/useEntityRef.tsx
-import { useImperativeHandle } from "react";
-var useEntityRef = (ref, instance) => {
-  useImperativeHandle(ref, () => instance);
-};
-var EntityRef = class {
-  _entity;
-  _ctx;
-  constructor(entity = null, ctx = null) {
-    this._entity = entity;
-    this._ctx = ctx;
-  }
-  updateEntity(entity) {
-    if (entity) this._entity = entity;
-  }
-  updateCtx(ctx) {
-    if (ctx) this._ctx = ctx;
-  }
-  destroy() {
-    this._entity?.destroy();
-  }
-  get entity() {
-    return this._entity;
-  }
-  get id() {
-    return this._entity?.userData?.id;
-  }
-  get name() {
-    return this._entity?.userData?.name;
-  }
-  async convertFromEntityToEntity(fromEntityId, toEntityId, position) {
-    if (!this._entity) return position;
-    try {
-      const fromEnt = await this._ctx?.resourceRegistry.get(fromEntityId);
-      const toEnt = await this._ctx?.resourceRegistry.get(toEntityId);
-      if (!fromEnt || !toEnt) return position;
-      const ret = await this._entity.convertFromEntityToEntity(
-        fromEnt.id,
-        toEnt.id,
-        position
-      );
-      return ret?.data ?? position;
-    } catch {
-      return position;
-    }
-  }
-  async convertFromEntityToReality(entityId, position) {
-    if (!this._entity) return position;
-    try {
-      const ent = await this._ctx?.resourceRegistry.get(entityId);
-      if (!ent) return position;
-      const ret = await this._entity.convertFromEntityToScene(ent.id, position);
-      return ret?.data ?? position;
-    } catch {
-      return position;
-    }
-  }
-  async convertFromRealityToEntity(entityId, position) {
-    if (!this._entity) return position;
-    try {
-      const ent = await this._ctx?.resourceRegistry.get(entityId);
-      if (!ent) return position;
-      const ret = await this._entity.convertFromSceneToEntity(ent.id, position);
-      return ret?.data ?? position;
-    } catch {
-      return position;
-    }
-  }
-};
-
 // src/reality/hooks/useForceUpdate.tsx
 import { useCallback as useCallback7, useState as useState7 } from "react";
 var useForceUpdate2 = () => {
@@ -2398,108 +2464,88 @@ var useForceUpdate2 = () => {
   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) {
-          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,
@@ -2519,10 +2565,10 @@ var BoxEntity = forwardRef12(
 );
 
 // src/reality/components/UnlitMaterial.tsx
-import { useEffect as useEffect20, useRef as useRef8 } from "react";
+import { useEffect as useEffect20, useRef as useRef9 } from "react";
 var UnlitMaterial = ({ children, ...options }) => {
   const ctx = useRealityContext();
-  const materialRef = useRef8();
+  const materialRef = useRef9();
   useEffect20(() => {
     if (!ctx) return;
     const { session, reality, resourceRegistry } = ctx;
@@ -2545,12 +2591,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,
@@ -2566,12 +2612,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,
@@ -2588,12 +2634,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,
@@ -2610,12 +2656,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,
@@ -2633,13 +2679,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 useRef10 } from "react";
 var resolveAssetUrl = (url) => {
   if (url.startsWith("http://") || url.startsWith("https://")) {
     return url;
@@ -2648,16 +2694,16 @@ var resolveAssetUrl = (url) => {
 };
 var ModelAsset = ({ children, ...options }) => {
   const ctx = useRealityContext();
-  const materialRef = useRef9();
+  const materialRef = useRef10();
   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();
@@ -2679,57 +2725,63 @@ 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,
+  useRef as useRef11,
   useState as useState8
 } 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);
+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 = useRef11(null);
+    const creationId = useRef11(0);
     const [isReady, setIsReady] = useState8(false);
     const cleanupReality = useCallback8(() => {
       ctxRef.current?.resourceRegistry.destroy();
@@ -2776,9 +2828,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",
@@ -2794,9 +2846,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;
@@ -2806,23 +2858,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.0.5";
+var version = "1.2.0";
 if (typeof window !== "undefined") {
   initPolyfill();
 }