@webspatial/react-sdk 1.5.0 → 1.6.1

package/dist/web/index.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.5.0"
+        window.__webspatialsdk__['react-sdk-version'] = "1.6.1"
         window.__webspatialsdk__['XR_ENV'] = "web"
     })()
       
@@ -145,11 +145,20 @@ function joinToCSSText(cssKV) {
 }
 
 // src/spatialized-container/hooks/useDomProxy.ts
-function makeOriginalKey(key) {
-  return `__original_${key}`;
-}
 var SpatialContainerRefProxy = class {
   transformVisibilityTaskContainerDom = null;
+  /** Raw Standard host element (styled root). Used to mirror class onto the transform probe. */
+  standardRawDom = null;
+  standardClassObserver = null;
+  /**
+   * When set, Standard's DOM className is forwarded here so TransformVisibilityTaskContainer
+   * can render it from React state (avoids React clobbering imperative class updates).
+   */
+  mirrorClassNotify = null;
+  /** Last class string applied to the probe + used to skip redundant syncs. */
+  lastMirroredClassName = null;
+  /** Coalesce multiple class sync triggers in the same turn (Observer + classList, etc.). */
+  classSyncMicrotaskQueued = false;
   ref;
   domProxy;
   styleProxy;
@@ -159,211 +168,263 @@ var SpatialContainerRefProxy = class {
     this.ref = ref;
     this.extraRefProps = extraRefProps;
   }
+  setMirrorClassNotify(fn) {
+    this.mirrorClassNotify = fn;
+    if (fn && this.standardRawDom) {
+      this.flushSyncTransformClassFromStandard(true);
+    }
+  }
+  disconnectStandardClassObserver() {
+    this.standardClassObserver?.disconnect();
+    this.standardClassObserver = null;
+  }
+  attachStandardClassObserver() {
+    this.disconnectStandardClassObserver();
+    if (!this.standardRawDom) {
+      return;
+    }
+    this.standardClassObserver = new MutationObserver(() => {
+      this.scheduleSyncTransformClassFromStandard();
+    });
+    this.standardClassObserver.observe(this.standardRawDom, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  }
+  /**
+   * Merge multiple sync requests (e.g. classList hook + MutationObserver) into one microtask.
+   */
+  scheduleSyncTransformClassFromStandard() {
+    if (this.classSyncMicrotaskQueued) {
+      return;
+    }
+    this.classSyncMicrotaskQueued = true;
+    queueMicrotask(() => {
+      this.classSyncMicrotaskQueued = false;
+      this.flushSyncTransformClassFromStandard(false);
+    });
+  }
+  /**
+   * Source of truth: Standard host DOM (incl. styled-components runtime class changes).
+   * @param force when true, skip same-string short-circuit (e.g. mirror notify just registered).
+   */
+  flushSyncTransformClassFromStandard(force) {
+    if (!this.standardRawDom) {
+      return;
+    }
+    const name = this.standardRawDom.className;
+    const probe = this.transformVisibilityTaskContainerDom;
+    if (!force && probe && probe.className === name && this.lastMirroredClassName === name) {
+      return;
+    }
+    this.lastMirroredClassName = name;
+    if (probe) {
+      probe.className = name;
+    }
+    this.mirrorClassNotify?.(name);
+  }
   updateStandardSpatializedContainerDom(dom) {
     const self = this;
-    if (dom) {
-      let cacheExtraRefProps;
-      const domProxy = new Proxy(
-        dom,
-        {
-          get(target, prop) {
-            if (prop === "__raw") {
-              return target;
-            }
-            if (prop === "xrClientDepth") {
-              return target.style.getPropertyValue(SpatialCustomStyleVars.depth);
-            }
-            if (prop === "xrOffsetBack") {
-              return target.style.getPropertyValue(SpatialCustomStyleVars.back);
-            }
-            if (prop === "style") {
-              if (!self.styleProxy) {
-                self.styleProxy = new Proxy(target.style, {
-                  get(target2, prop2) {
-                    if (prop2 === "visibility" || prop2 === "transform") {
-                      return self.transformVisibilityTaskContainerDom?.style.getPropertyValue(
-                        prop2
-                      );
-                    }
-                    const value2 = Reflect.get(target2, prop2);
-                    if (typeof value2 === "function") {
-                      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);
+    if (!dom) {
+      this.disconnectStandardClassObserver();
+      this.standardRawDom = null;
+      this.lastMirroredClassName = null;
+      this.domProxy = void 0;
+      this.styleProxy = void 0;
+      this.updateDomProxyToRef();
+      return;
+    }
+    this.standardRawDom = dom;
+    let cacheExtraRefProps;
+    const domProxy = new Proxy(
+      dom,
+      {
+        get(target, prop) {
+          if (prop === "__raw") {
+            return target;
+          }
+          if (prop === "xrClientDepth") {
+            return target.style.getPropertyValue(SpatialCustomStyleVars.depth);
+          }
+          if (prop === "xrOffsetBack") {
+            return target.style.getPropertyValue(SpatialCustomStyleVars.back);
+          }
+          if (prop === "style") {
+            if (!self.styleProxy) {
+              self.styleProxy = new Proxy(target.style, {
+                get(target2, prop2) {
+                  if (prop2 === "visibility" || prop2 === "transform") {
+                    return self.transformVisibilityTaskContainerDom?.style.getPropertyValue(
+                      prop2
+                    );
+                  }
+                  const value2 = Reflect.get(target2, prop2);
+                  if (typeof value2 === "function") {
+                    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
+                            );
                           }
-                        }.bind(target2);
-                      } else {
-                        return value2.bind(target2);
-                      }
-                    } else {
-                      return value2;
-                    }
-                  },
-                  set(target2, prop2, value2) {
-                    if (prop2 === "visibility") {
-                      self.transformVisibilityTaskContainerDom?.style.setProperty(
-                        "visibility",
-                        value2
-                      );
-                      return true;
-                    }
-                    if (prop2 === "transform") {
-                      self.transformVisibilityTaskContainerDom?.style.setProperty(
-                        "transform",
-                        value2
-                      );
-                      return true;
-                    }
-                    if (prop2 === SpatialCustomStyleVars.backgroundMaterial) {
-                      target2.setProperty(
-                        SpatialCustomStyleVars.backgroundMaterial,
-                        value2
-                      );
-                    } else if (prop2 === SpatialCustomStyleVars.back) {
-                      target2.setProperty(
-                        SpatialCustomStyleVars.back,
-                        value2
-                      );
-                    } else if (prop2 === SpatialCustomStyleVars.xrZIndex) {
-                      target2.setProperty(
-                        SpatialCustomStyleVars.xrZIndex,
-                        value2
-                      );
-                    } else if (prop2 === SpatialCustomStyleVars.depth) {
-                      target2.setProperty(
-                        SpatialCustomStyleVars.depth,
-                        value2
-                      );
-                    } else if (prop2 === "cssText") {
-                      const toFilteredCSSProperties = [
-                        "transform",
-                        "visibility"
-                      ];
-                      const { extractedValues, filteredCssText } = extractAndRemoveCustomProperties(
-                        value2,
-                        toFilteredCSSProperties
-                      );
-                      toFilteredCSSProperties.forEach((key) => {
-                        if (extractedValues[key]) {
-                          self.transformVisibilityTaskContainerDom?.style.setProperty(
-                            key,
-                            extractedValues[key]
-                          );
                         } else {
-                          target2.removeProperty(key);
+                          return value2.apply(this, args);
                         }
-                      });
-                      const appendedCSSText = joinToCSSText({
-                        transform: "none",
-                        visibility: "hidden"
-                      });
-                      return Reflect.set(
-                        target2,
-                        prop2,
-                        [appendedCSSText, filteredCssText].join(";")
-                      );
+                      }.bind(target2);
+                    } else {
+                      return value2.bind(target2);
                     }
-                    return Reflect.set(target2, prop2, value2);
+                  } else {
+                    return value2;
                   }
-                });
-              }
-              return self.styleProxy;
-            }
-            if (typeof prop === "string" && self.extraRefProps) {
-              if (!cacheExtraRefProps) {
-                cacheExtraRefProps = self.extraRefProps(domProxy);
-              }
-              const extraProps = cacheExtraRefProps;
-              if (extraProps.hasOwnProperty(prop)) {
-                return extraProps[prop];
-              }
-            }
-            const value = Reflect.get(target, prop);
-            if (typeof value === "function") {
-              if ("removeAttribute" === prop) {
-                return function(...args) {
-                  const [property] = args;
-                  if (property === "style") {
-                    dom.style.cssText = "visibility: hidden; transition: none; transform: none;";
-                    if (self.transformVisibilityTaskContainerDom) {
-                      self.transformVisibilityTaskContainerDom.style.visibility = "";
-                      self.transformVisibilityTaskContainerDom.style.transform = "";
-                    }
+                },
+                set(target2, prop2, value2) {
+                  if (prop2 === "visibility") {
+                    self.transformVisibilityTaskContainerDom?.style.setProperty(
+                      "visibility",
+                      value2
+                    );
                     return true;
                   }
-                  if (property === "class") {
-                    domProxy.className = "xr-spatial-default";
+                  if (prop2 === "transform") {
+                    self.transformVisibilityTaskContainerDom?.style.setProperty(
+                      "transform",
+                      value2
+                    );
                     return true;
                   }
-                };
-              }
-              return value.bind(target);
+                  if (prop2 === SpatialCustomStyleVars.backgroundMaterial) {
+                    target2.setProperty(
+                      SpatialCustomStyleVars.backgroundMaterial,
+                      value2
+                    );
+                  } else if (prop2 === SpatialCustomStyleVars.back) {
+                    target2.setProperty(
+                      SpatialCustomStyleVars.back,
+                      value2
+                    );
+                  } else if (prop2 === SpatialCustomStyleVars.xrZIndex) {
+                    target2.setProperty(
+                      SpatialCustomStyleVars.xrZIndex,
+                      value2
+                    );
+                  } else if (prop2 === SpatialCustomStyleVars.depth) {
+                    target2.setProperty(
+                      SpatialCustomStyleVars.depth,
+                      value2
+                    );
+                  } else if (prop2 === "cssText") {
+                    const toFilteredCSSProperties = ["transform", "visibility"];
+                    const { extractedValues, filteredCssText } = extractAndRemoveCustomProperties(
+                      value2,
+                      toFilteredCSSProperties
+                    );
+                    toFilteredCSSProperties.forEach((key) => {
+                      if (extractedValues[key]) {
+                        self.transformVisibilityTaskContainerDom?.style.setProperty(
+                          key,
+                          extractedValues[key]
+                        );
+                      } else {
+                        target2.removeProperty(key);
+                      }
+                    });
+                    const appendedCSSText = joinToCSSText({
+                      transform: "none",
+                      visibility: "hidden"
+                    });
+                    return Reflect.set(
+                      target2,
+                      prop2,
+                      [appendedCSSText, filteredCssText].join(";")
+                    );
+                  }
+                  return Reflect.set(target2, prop2, value2);
+                }
+              });
             }
-            return value;
-          },
-          set(target, prop, value) {
-            if (prop === "className") {
-              if (value && value.indexOf("xr-spatial-default") === -1) {
-                value = value + " xr-spatial-default";
-              }
-              if (self.transformVisibilityTaskContainerDom) {
-                self.transformVisibilityTaskContainerDom.className = value;
-              }
+            return self.styleProxy;
+          }
+          if (typeof prop === "string" && self.extraRefProps) {
+            if (!cacheExtraRefProps) {
+              cacheExtraRefProps = self.extraRefProps(domProxy);
             }
-            if (typeof prop === "string" && self.extraRefProps) {
-              if (!cacheExtraRefProps) {
-                cacheExtraRefProps = self.extraRefProps(domProxy);
-              }
-              cacheExtraRefProps[prop] = value;
+            const extraProps = cacheExtraRefProps;
+            if (extraProps.hasOwnProperty(prop)) {
+              return extraProps[prop];
             }
-            return Reflect.set(target, prop, value);
           }
-        }
-      );
-      this.domProxy = domProxy;
-      const domClassList = dom.classList;
-      const domClassMethodKeys = ["add", "remove", "toggle", "replace"];
-      domClassMethodKeys.forEach((key) => {
-        const hiddenKey = makeOriginalKey(key);
-        const hiddenKeyExist = domClassList[hiddenKey] !== void 0;
-        const originalMethod = hiddenKeyExist ? domClassList[hiddenKey] : domClassList[key].bind(domClassList);
-        domClassList[hiddenKey] = originalMethod;
-        domClassList[key] = function(...args) {
-          const result = originalMethod(...args);
-          if (self.transformVisibilityTaskContainerDom) {
-            self.transformVisibilityTaskContainerDom.className = dom.className;
+          const value = Reflect.get(target, prop);
+          if (typeof value === "function") {
+            if ("removeAttribute" === prop) {
+              return function(...args) {
+                const [property] = args;
+                if (property === "style") {
+                  dom.style.cssText = "visibility: hidden; transition: none; transform: none;";
+                  if (self.transformVisibilityTaskContainerDom) {
+                    self.transformVisibilityTaskContainerDom.style.visibility = "";
+                    self.transformVisibilityTaskContainerDom.style.transform = "";
+                  }
+                  return true;
+                }
+                if (property === "class") {
+                  domProxy.className = "xr-spatial-default";
+                  return true;
+                }
+              };
+            }
+            return value.bind(target);
           }
-          return result;
-        };
-      });
-      this.styleProxy = void 0;
-      this.updateDomProxyToRef();
-      Object.assign(dom, {
-        __targetProxy: domProxy
-      });
-    }
+          return value;
+        },
+        set(target, prop, value) {
+          if (prop === "className") {
+            if (value && String(value).indexOf("xr-spatial-default") === -1) {
+              value = value + " xr-spatial-default";
+            }
+          }
+          if (typeof prop === "string" && self.extraRefProps) {
+            if (!cacheExtraRefProps) {
+              cacheExtraRefProps = self.extraRefProps(domProxy);
+            }
+            cacheExtraRefProps[prop] = value;
+          }
+          const ok = Reflect.set(target, prop, value);
+          if (ok && prop === "className") {
+            self.scheduleSyncTransformClassFromStandard();
+          }
+          return ok;
+        }
+      }
+    );
+    this.domProxy = domProxy;
+    this.styleProxy = void 0;
+    this.updateDomProxyToRef();
+    Object.assign(dom, {
+      __targetProxy: domProxy
+    });
+    this.attachStandardClassObserver();
+    this.scheduleSyncTransformClassFromStandard();
   }
   updateTransformVisibilityTaskContainerDom(dom) {
     this.transformVisibilityTaskContainerDom = dom;
+    if (!dom) {
+      this.lastMirroredClassName = null;
+    }
+    this.scheduleSyncTransformClassFromStandard();
     this.updateDomProxyToRef();
   }
   updateDomProxyToRef() {
@@ -843,13 +904,20 @@ var TransformVisibilityTaskContainer = forwardRef2(
 );
 
 // src/spatialized-container/SpatializedContainer.tsx
-import { forwardRef as forwardRef4, useContext as useContext7, useEffect as useEffect10, useMemo as useMemo2 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useCallback as useCallback6,
+  useContext as useContext7,
+  useEffect as useEffect10,
+  useMemo as useMemo2,
+  useState as useState6
+} from "react";
 
 // src/noRuntime.ts
 var Spatial = class {
   /**
    * Requests a session object from the browser
-   * @returns The session or null if not availible in the current browser
+   * @returns The session or null if not available in the current browser
    * [TODO] discuss implications of this not being async
    */
   requestSession() {
@@ -871,14 +939,14 @@ var Spatial = class {
   }
   /**
    * Gets the native version, format is "x.x.x"
-   * @returns native version string
+   * @returns native version string, or null when runtime is unavailable
    */
   getNativeVersion() {
     return null;
   }
   /**
    * Gets the client version, format is "x.x.x"
-   * @returns client version string
+   * @returns client version string, or null when runtime is unavailable
    */
   getClientVersion() {
     return null;
@@ -898,7 +966,7 @@ var PhysicalMetrics = {
     meterToPtUnscaled: 1360,
     meterToPtScaled: 1360
   }),
-  subscribe: (cb) => {
+  subscribe: (cb) => () => {
   }
 };
 
@@ -1203,7 +1271,7 @@ function renderPlaceholderInSubPortal(portalInstanceObject, El) {
     return /* @__PURE__ */ jsx3(Fragment, {});
   }
   const { width, height } = portalInstanceObject.domRect;
-  const display = portalInstanceObject.computedStyle.getPropertyPriority("display");
+  const display = portalInstanceObject.computedStyle.getPropertyValue("display");
   const spatialIdProps = { [SpatialID]: spatialId };
   return /* @__PURE__ */ jsx3(
     El,
@@ -1648,6 +1716,20 @@ function SpatializedContainerBase(inprops, ref) {
         standardSpatializedContainerCallback,
         spatialContainerRefProxy
       } = useDomProxy(ref, extraRefProps);
+      const [probeClassName, setProbeClassName] = useState6(
+        () => props.className ?? ""
+      );
+      const notifyProbeClass = useCallback6((name) => {
+        setProbeClassName((prev) => prev === name ? prev : name);
+      }, []);
+      useEffect10(() => {
+        spatialContainerRefProxy.current.setMirrorClassNotify?.(
+          notifyProbeClass
+        );
+        return () => {
+          spatialContainerRefProxy.current.setMirrorClassNotify?.(null);
+        };
+      }, [spatialContainerRefProxy, notifyProbeClass]);
       useEffect10(() => {
         rootSpatializedContainerObject.updateSpatialContainerRefProxyInfo(
           spatialId,
@@ -1676,7 +1758,7 @@ function SpatializedContainerBase(inprops, ref) {
           {
             ref: transformVisibilityTaskContainerCallback,
             ...spatialIdProps,
-            className: props.className,
+            className: probeClassName,
             style: props.style
           }
         )
@@ -1688,6 +1770,18 @@ function SpatializedContainerBase(inprops, ref) {
       standardSpatializedContainerCallback,
       spatialContainerRefProxy
     } = useDomProxy(ref, extraRefProps);
+    const [probeClassName, setProbeClassName] = useState6(
+      () => props.className ?? ""
+    );
+    const notifyProbeClass = useCallback6((name) => {
+      setProbeClassName((prev) => prev === name ? prev : name);
+    }, []);
+    useEffect10(() => {
+      spatialContainerRefProxy.current.setMirrorClassNotify?.(notifyProbeClass);
+      return () => {
+        spatialContainerRefProxy.current.setMirrorClassNotify?.(null);
+      };
+    }, [spatialContainerRefProxy, notifyProbeClass]);
     const spatialEvents = useSpatialEvents(
       {
         onSpatialTap,
@@ -1739,7 +1833,7 @@ function SpatializedContainerBase(inprops, ref) {
             {
               ref: transformVisibilityTaskContainerCallback,
               ...spatialIdProps,
-              className: props.className,
+              className: probeClassName,
               style: props.style
             }
           )
@@ -2019,8 +2113,10 @@ var Spatialized2DElementContainer = forwardRef5(
 
 // src/spatialized-container/SpatializedStatic3DElementContainer.tsx
 import {
+  Children,
   forwardRef as forwardRef6,
-  useCallback as useCallback6,
+  isValidElement,
+  useCallback as useCallback7,
   useContext as useContext9,
   useEffect as useEffect13,
   useMemo as useMemo3,
@@ -2028,9 +2124,7 @@ import {
 } from "react";
 import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
 function getAbsoluteURL(url) {
-  if (!url) {
-    return "";
-  }
+  if (!url) return url;
   try {
     return new URL(url, document.baseURI).toString();
   } catch {
@@ -2058,21 +2152,34 @@ function createLoadFailureEvent(targetGetter) {
 function createLoadSuccessEvent(targetGetter) {
   return createLoadEvent("modelloaded", targetGetter);
 }
+function collectSources(children) {
+  const sources = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === "source") {
+      const { src, type } = child.props;
+      if (src) {
+        sources.push({ src: getAbsoluteURL(src), type });
+      }
+    }
+  });
+  return sources;
+}
 function SpatializedContent2(props) {
-  const { src, spatializedElement, onLoad, onError } = props;
-  const spatializedStatic3DElement = spatializedElement;
-  const portalInstanceObject = useContext9(
-    PortalInstanceContext
-  );
-  const currentSrc = useMemo3(() => getAbsoluteURL(src), [src]);
+  const { src, children, spatializedElement, onLoad, onError, autoPlay, loop } = props;
+  const portalInstanceObject = useContext9(PortalInstanceContext);
+  const modelURL = useMemo3(() => getAbsoluteURL(src), [src]);
+  const sources = useMemo3(() => collectSources(children), [children]);
   useEffect13(() => {
-    if (src) {
-      spatializedStatic3DElement.updateProperties({ modelURL: currentSrc });
-    }
-  }, [currentSrc]);
+    spatializedElement.updateProperties({
+      modelURL: modelURL ?? "",
+      sources,
+      autoplay: autoPlay,
+      loop
+    });
+  }, [modelURL, JSON.stringify(sources), autoPlay, loop]);
   useEffect13(() => {
     if (onLoad) {
-      spatializedStatic3DElement.onLoadCallback = () => {
+      spatializedElement.onLoadCallback = () => {
         onLoad(
           createLoadSuccessEvent(
             () => portalInstanceObject.dom.__targetProxy
@@ -2080,12 +2187,12 @@ function SpatializedContent2(props) {
         );
       };
     } else {
-      spatializedStatic3DElement.onLoadCallback = void 0;
+      spatializedElement.onLoadCallback = void 0;
     }
   }, [onLoad]);
   useEffect13(() => {
     if (onError) {
-      spatializedStatic3DElement.onLoadFailureCallback = () => {
+      spatializedElement.onLoadFailureCallback = () => {
         onError(
           createLoadFailureEvent(
             () => portalInstanceObject.dom.__targetProxy
@@ -2093,24 +2200,27 @@ function SpatializedContent2(props) {
         );
       };
     } else {
-      spatializedStatic3DElement.onLoadFailureCallback = void 0;
+      spatializedElement.onLoadFailureCallback = void 0;
     }
   }, [onError]);
   return /* @__PURE__ */ jsx8(Fragment2, {});
 }
 function SpatializedStatic3DElementContainerBase(props, ref) {
   const promiseRef = useRef5(null);
-  const createSpatializedElement2 = useCallback6(() => {
-    const url = getAbsoluteURL(props.src);
-    promiseRef.current = getSession().createSpatializedStatic3DElement(url);
+  const createSpatializedElement2 = useCallback7(() => {
+    promiseRef.current = getSession().createSpatializedStatic3DElement(
+      getAbsoluteURL(props.src),
+      collectSources(props.children)
+    );
     return promiseRef.current;
   }, []);
-  const extraRefProps = useCallback6(
+  const extraRefProps = useCallback7(
     (domProxy) => {
       let modelTransform = new DOMMatrixReadOnly();
       return {
         get currentSrc() {
-          return getAbsoluteURL(props.src);
+          const spatializedElement = domProxy.__spatializedElement;
+          return spatializedElement?.currentSrc ?? "";
         },
         get ready() {
           return promiseRef.current.then((spatializedElement) => spatializedElement.ready).then((success) => {
@@ -2125,6 +2235,32 @@ function SpatializedStatic3DElementContainerBase(props, ref) {
           modelTransform = value;
           const spatializedElement = domProxy.__spatializedElement;
           spatializedElement?.updateModelTransform(modelTransform);
+        },
+        async play() {
+          const spatializedElement = domProxy.__spatializedElement;
+          await spatializedElement?.play();
+        },
+        async pause() {
+          const spatializedElement = domProxy.__spatializedElement;
+          await spatializedElement?.pause();
+        },
+        get paused() {
+          const spatializedElement = domProxy.__spatializedElement;
+          return spatializedElement?.paused ?? true;
+        },
+        get duration() {
+          const spatializedElement = domProxy.__spatializedElement;
+          return spatializedElement?.duration ?? 0;
+        },
+        get playbackRate() {
+          const spatializedElement = domProxy.__spatializedElement;
+          return spatializedElement?.playbackRate ?? 1;
+        },
+        set playbackRate(value) {
+          const spatializedElement = domProxy.__spatializedElement;
+          if (spatializedElement) {
+            spatializedElement.playbackRate = value;
+          }
         }
       };
     },
@@ -2937,10 +3073,10 @@ var useEntity = ({
 };
 
 // src/reality/hooks/useForceUpdate.tsx
-import { useCallback as useCallback7, useState as useState6 } from "react";
+import { useCallback as useCallback8, useState as useState7 } from "react";
 var useForceUpdate2 = () => {
-  const [, setTick] = useState6(0);
-  return useCallback7(() => setTick((tick) => tick + 1), []);
+  const [, setTick] = useState7(0);
+  return useCallback8(() => setTick((tick) => tick + 1), []);
 };
 
 // src/reality/components/BaseEntity.tsx
@@ -3363,10 +3499,10 @@ var ModelEntity = forwardRef18(
 // src/reality/components/Reality.tsx
 import {
   forwardRef as forwardRef19,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useEffect as useEffect26,
   useRef as useRef16,
-  useState as useState7
+  useState as useState8
 } from "react";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
 var Reality = forwardRef19(
@@ -3391,8 +3527,8 @@ var Reality = forwardRef19(
     } = inProps;
     const ctxRef = useRef16(null);
     const creationId = useRef16(0);
-    const [isReady, setIsReady] = useState7(false);
-    const cleanupReality = useCallback8(() => {
+    const [isReady, setIsReady] = useState8(false);
+    const cleanupReality = useCallback9(() => {
       ctxRef.current?.attachmentRegistry.destroy();
       ctxRef.current?.resourceRegistry.destroy();
       ctxRef.current?.reality.destroy();
@@ -3405,7 +3541,7 @@ var Reality = forwardRef19(
         cleanupReality();
       };
     }, [cleanupReality]);
-    const createReality = useCallback8(async () => {
+    const createReality = useCallback9(async () => {
       const id = ++creationId.current;
       const resourceRegistry = new ResourceRegistry();
       const attachmentRegistry = new AttachmentRegistry();
@@ -3448,7 +3584,7 @@ var Reality = forwardRef19(
         return null;
       }
     }, [cleanupReality]);
-    const content = useCallback8(() => /* @__PURE__ */ jsx22(Fragment3, {}), []);
+    const content = useCallback9(() => /* @__PURE__ */ jsx22(Fragment3, {}), []);
     useRealityEvents({
       instance: ctxRef.current?.reality ?? null,
       onSpatialTap,
@@ -3477,7 +3613,7 @@ var Reality = forwardRef19(
 );
 
 // src/reality/components/AttachmentAsset.tsx
-import { useEffect as useEffect27, useState as useState8 } from "react";
+import { useEffect as useEffect27, useState as useState9 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var AttachmentAsset = ({
@@ -3485,7 +3621,7 @@ var AttachmentAsset = ({
   children
 }) => {
   const ctx = useRealityContext();
-  const [containers, setContainers] = useState8([]);
+  const [containers, setContainers] = useState9([]);
   useEffect27(() => {
     if (!ctx) return;
     return ctx.attachmentRegistry.onContainersChange(name, setContainers);
@@ -3497,7 +3633,7 @@ var AttachmentAsset = ({
 };
 
 // src/reality/components/AttachmentEntity.tsx
-import { useEffect as useEffect28, useRef as useRef17, useState as useState9 } from "react";
+import { useEffect as useEffect28, useRef as useRef17, useState as useState10 } from "react";
 var instanceCounter = 0;
 var AttachmentEntity = ({
   attachment: attachmentName,
@@ -3510,7 +3646,7 @@ var AttachmentEntity = ({
   const parentIdRef = useRef17(null);
   const instanceIdRef = useRef17(`att_${++instanceCounter}`);
   const attachmentNameRef = useRef17(attachmentName);
-  const [childWindow, setChildWindow] = useState9(null);
+  const [childWindow, setChildWindow] = useState10(null);
   useEffect28(() => {
     if (!ctx || !parent) return;
     if (attachmentRef.current) return;
@@ -3724,7 +3860,7 @@ async function convertCoordinate(position, { from, to }) {
 }
 
 // src/index.ts
-var version = "1.5.0";
+var version = "1.6.1";
 if (typeof window !== "undefined") {
   initPolyfill();
 }