@webspatial/react-sdk 1.6.1 → 2.0.0

package/dist/web/index.js

@@ -1,3905 +0,0 @@
-
-      (function(){
-        if(typeof window === 'undefined') return;
-        if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.6.1"
-        window.__webspatialsdk__['XR_ENV'] = "web"
-    })()
-      
-
-// src/spatialized-container/hooks/useDomProxy.ts
-import { useCallback, useEffect, useRef } from "react";
-
-// src/spatialized-container/types.ts
-var SpatialCustomStyleVars = {
-  back: "--xr-back",
-  depth: "--xr-depth",
-  backgroundMaterial: "--xr-background-material",
-  xrZIndex: "--xr-z-index"
-};
-
-// src/spatialized-container/utils.ts
-function getInheritedStyleProps(computedStyle) {
-  var propNames = [
-    "azimuth",
-    "borderCollapse",
-    "borderSpacing",
-    "captionSide",
-    "color",
-    "cursor",
-    "direction",
-    // 'elevation',
-    "emptyCells",
-    "fontFamily",
-    "fontSize",
-    "fontStyle",
-    "fontVariant",
-    "fontWeight",
-    "font",
-    "letterSpacing",
-    "lineHeight",
-    "listStyleImage",
-    "listStylePosition",
-    "listStyleType",
-    "listStyle",
-    "orphans",
-    // 'pitchRange',
-    // 'pitch',
-    "quotes",
-    // 'richness',
-    // 'speakHeader',
-    // 'speakNumeral',
-    // 'speakPunctuation',
-    // 'speak',
-    // 'speechRate',
-    // 'stress',
-    "textAlign",
-    "textIndent",
-    "textTransform",
-    "visibility",
-    // 'voiceFamily',
-    // 'volume',
-    "whiteSpace",
-    "widows",
-    "wordSpacing",
-    // background also need to be synced
-    "background",
-    // position also need to be synced
-    "position",
-    "width",
-    "height",
-    "display",
-    // content-visibility also need to be synced
-    "contentVisibility"
-  ];
-  var props = {};
-  for (var cssName of propNames) {
-    if (computedStyle[cssName]) {
-      props[cssName] = computedStyle[cssName];
-    }
-  }
-  return props;
-}
-function parseTransformOrigin(computedStyle) {
-  const transformOriginProperty = computedStyle.getPropertyValue("transform-origin");
-  const [x, y] = transformOriginProperty.split(" ").map(parseFloat);
-  const width = parseFloat(computedStyle.getPropertyValue("width"));
-  const height = parseFloat(computedStyle.getPropertyValue("height"));
-  return {
-    x: width > 0 ? x / width : 0.5,
-    y: height > 0 ? y / height : 0.5,
-    z: 0.5
-  };
-}
-function parseBorderRadius(borderProperty, width) {
-  if (borderProperty === "") {
-    return 0;
-  }
-  if (borderProperty.endsWith("%")) {
-    return width * parseFloat(borderProperty) / 100;
-  }
-  return parseFloat(borderProperty);
-}
-function parseCornerRadius(computedStyle) {
-  const width = parseFloat(computedStyle.getPropertyValue("width"));
-  const topLeftPropertyValue = computedStyle.getPropertyValue(
-    "border-top-left-radius"
-  );
-  const topRightPropertyValue = computedStyle.getPropertyValue(
-    "border-top-right-radius"
-  );
-  const bottomLeftPropertyValue = computedStyle.getPropertyValue(
-    "border-bottom-left-radius"
-  );
-  const bottomRightPropertyValue = computedStyle.getPropertyValue(
-    "border-bottom-right-radius"
-  );
-  const cornerRadius = {
-    topLeading: parseBorderRadius(topLeftPropertyValue, width),
-    bottomLeading: parseBorderRadius(bottomLeftPropertyValue, width),
-    topTrailing: parseBorderRadius(topRightPropertyValue, width),
-    bottomTrailing: parseBorderRadius(bottomRightPropertyValue, width)
-  };
-  return cornerRadius;
-}
-function extractAndRemoveCustomProperties(cssText, properties) {
-  if (!cssText) {
-    return { extractedValues: {}, filteredCssText: "" };
-  }
-  const extractedValues = {};
-  const rules = cssText.split(";");
-  const filteredRules = rules.filter((rule) => {
-    const [key, value] = rule.split(":").map((part) => part.trim());
-    if (properties.includes(key)) {
-      extractedValues[key] = value;
-      return false;
-    }
-    return true;
-  });
-  const filteredCssText = filteredRules.join(";").trim();
-  return { extractedValues, filteredCssText };
-}
-function joinToCSSText(cssKV) {
-  const rules = Object.entries(cssKV).map(([key, value]) => `${key}: ${value}`);
-  return rules.join(";");
-}
-
-// src/spatialized-container/hooks/useDomProxy.ts
-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;
-  // extre ref props, used to add extra props to ref
-  extraRefProps;
-  constructor(ref, extraRefProps) {
-    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) {
-      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
-                            );
-                          }
-                        } else {
-                          return value2.apply(this, args);
-                        }
-                      }.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);
-                      }
-                    });
-                    const appendedCSSText = joinToCSSText({
-                      transform: "none",
-                      visibility: "hidden"
-                    });
-                    return Reflect.set(
-                      target2,
-                      prop2,
-                      [appendedCSSText, filteredCssText].join(";")
-                    );
-                  }
-                  return Reflect.set(target2, prop2, 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 = "";
-                  }
-                  return true;
-                }
-                if (property === "class") {
-                  domProxy.className = "xr-spatial-default";
-                  return true;
-                }
-              };
-            }
-            return value.bind(target);
-          }
-          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() {
-    const ref = this.ref;
-    if (!ref) {
-      return;
-    }
-    if (this.domProxy && this.transformVisibilityTaskContainerDom) {
-      if (typeof ref === "function") {
-        ref(this.domProxy);
-      } else {
-        ref.current = this.domProxy;
-      }
-    } else {
-      if (typeof ref === "function") {
-        ref(null);
-      } else {
-        ref.current = null;
-      }
-    }
-  }
-  updateRef(ref) {
-    this.ref = ref;
-  }
-};
-function hijackGetComputedStyle() {
-  const rawFn = window.getComputedStyle.bind(window);
-  window.getComputedStyle = (element, pseudoElt) => {
-    const dom = element.__raw;
-    if (dom) {
-      return rawFn(dom, pseudoElt);
-    }
-    return rawFn(element, pseudoElt);
-  };
-}
-function useDomProxy(ref, extraRefProps) {
-  const spatialContainerRefProxy = useRef(
-    new SpatialContainerRefProxy(ref, extraRefProps)
-  );
-  useEffect(() => {
-    spatialContainerRefProxy.current.updateRef(ref);
-  }, [ref]);
-  const transformVisibilityTaskContainerCallback = useCallback(
-    (el) => {
-      spatialContainerRefProxy.current.updateTransformVisibilityTaskContainerDom(
-        el
-      );
-    },
-    []
-  );
-  const standardSpatializedContainerCallback = useCallback(
-    (el) => {
-      spatialContainerRefProxy.current.updateStandardSpatializedContainerDom(el);
-    },
-    []
-  );
-  return {
-    transformVisibilityTaskContainerCallback,
-    standardSpatializedContainerCallback,
-    spatialContainerRefProxy
-  };
-}
-
-// src/spatialized-container/hooks/use2DFrameDetector.ts
-import {
-  useContext,
-  useLayoutEffect,
-  useEffect as useEffect2,
-  useCallback as useCallback2
-} from "react";
-
-// src/spatialized-container/context/SpatializedContainerContext.ts
-import { createContext } from "react";
-
-// src/spatialized-container/SpatialID.ts
-var SpatialID = "data-spatial-id";
-
-// src/spatialized-container/context/SpatializedContainerContext.ts
-var SpatializedContainerObject = class {
-  dom = null;
-  domSpatialId = null;
-  fns = {};
-  // cache dom for each spatialId
-  spatialId2dom = {};
-  spatialId2parentSpatialDom = {};
-  // layer : [standardInstance sequence, portalInstance sequence]
-  layerSequences = {};
-  notify2DFramePlaceHolderChange(dom) {
-    this.dom = dom;
-    this.domSpatialId = dom.getAttribute(SpatialID);
-    Object.values(this.fns).forEach((fn) => fn());
-  }
-  spatialId2transformVisibility = {};
-  updateSpatialTransformVisibility(spatialId, spatialTransformVisibility) {
-    this.spatialId2transformVisibility[spatialId] = spatialTransformVisibility;
-    this.fnsForSpatialTransformVisibility[spatialId]?.forEach(
-      (fn) => fn(spatialTransformVisibility)
-    );
-  }
-  // this is used by onSpatialEvent.currentTarget property
-  spatialId2ContainerRefProxy = {};
-  // this is called in sub standardInstance env
-  updateSpatialContainerRefProxyInfo(spatialId, spatialContainerRefProxy) {
-    this.spatialId2ContainerRefProxy[spatialId] = spatialContainerRefProxy;
-  }
-  getSpatialContainerRefProxyBySpatialId(spatialId) {
-    return this.spatialId2ContainerRefProxy[spatialId];
-  }
-  // notify when TransformVisibilityTaskContainer data change
-  fnsForSpatialTransformVisibility = {};
-  // used by StandardSpatializedContainer and PortalSpatializedContainer
-  onSpatialTransformVisibilityChange(spatialId, fn) {
-    if (!this.fnsForSpatialTransformVisibility[spatialId]) {
-      this.fnsForSpatialTransformVisibility[spatialId] = [];
-    }
-    this.fnsForSpatialTransformVisibility[spatialId].push(fn);
-    if (this.spatialId2transformVisibility[spatialId]) {
-      fn(this.spatialId2transformVisibility[spatialId]);
-    }
-  }
-  offSpatialTransformVisibilityChange(spatialId, fn) {
-    const fns = this.fnsForSpatialTransformVisibility[spatialId];
-    if (fns) {
-      this.fnsForSpatialTransformVisibility[spatialId] = fns.filter(
-        (f) => f !== fn
-      );
-    }
-  }
-  on2DFrameChange(spatialId, fn) {
-    this.fns[spatialId] = fn;
-    if (this.dom) {
-      fn();
-    }
-  }
-  off2DFrameChange(spatialId) {
-    delete this.fns[spatialId];
-    delete this.spatialId2dom[spatialId];
-    delete this.spatialId2parentSpatialDom[spatialId];
-  }
-  querySpatialDomBySpatialId(spatialId) {
-    if (this.domSpatialId === spatialId) {
-      return this.dom;
-    }
-    if (!this.dom) {
-      return null;
-    }
-    if (!this.spatialId2dom[spatialId]) {
-      const spatialDom = this.dom.querySelector(`[${SpatialID}="${spatialId}"]`);
-      if (spatialDom) {
-        this.spatialId2dom[spatialId] = spatialDom;
-      }
-    }
-    return this.spatialId2dom[spatialId];
-  }
-  queryParentSpatialDomBySpatialId(spatialId) {
-    if (this.domSpatialId === spatialId) {
-      return null;
-    }
-    if (this.spatialId2parentSpatialDom[spatialId]) {
-      return this.spatialId2parentSpatialDom[spatialId];
-    }
-    let spatialDom = this.querySpatialDomBySpatialId(spatialId);
-    if (spatialDom) {
-      if (spatialDom === this.dom) return null;
-      let parentSpatialDom = spatialDom.parentElement;
-      while (parentSpatialDom && spatialDom !== this.dom) {
-        if (parentSpatialDom.hasAttribute(SpatialID)) {
-          break;
-        } else {
-          parentSpatialDom = parentSpatialDom.parentElement;
-        }
-      }
-      this.spatialId2parentSpatialDom[spatialId] = parentSpatialDom;
-      return parentSpatialDom;
-    }
-    return null;
-  }
-  getSpatialId(layer, isInStandardInstance, name = "") {
-    if (this.layerSequences[layer] === void 0) {
-      this.layerSequences[layer] = [0, 0];
-    }
-    const idx = isInStandardInstance ? 0 : 1;
-    const sequenceId = this.layerSequences[layer][idx];
-    this.layerSequences[layer][idx] = sequenceId + 1;
-    const spatialId = `${name}_${layer}_${sequenceId}`;
-    return spatialId;
-  }
-};
-var SpatializedContainerContext = createContext(null);
-
-// src/spatialized-container/hooks/use2DFrameDetector.ts
-function use2DFrameDetector(ref) {
-  const spatializedContainerObject = useContext(
-    SpatializedContainerContext
-  );
-  const notify2DFrameChange = useCallback2(() => {
-    ref.current && spatializedContainerObject.notify2DFramePlaceHolderChange(ref.current);
-  }, [ref.current, spatializedContainerObject]);
-  useLayoutEffect(notify2DFrameChange, [notify2DFrameChange]);
-  useEffect2(() => {
-    if (!ref.current || !spatializedContainerObject) {
-      console.warn(
-        "Ref is not attached to the DOM or spatializedContainerObject is not available"
-      );
-      return;
-    }
-    window.addEventListener("resize", notify2DFrameChange);
-    return () => {
-      window.removeEventListener("resize", notify2DFrameChange);
-    };
-  }, []);
-  useEffect2(() => {
-    if (!ref.current) {
-      console.warn("Ref is not attached to the DOM");
-      return;
-    }
-    const ro = new ResizeObserver(notify2DFrameChange);
-    ro.observe(ref.current);
-    return () => {
-      ro.disconnect();
-    };
-  }, []);
-  useEffect2(() => {
-    if (!ref.current) {
-      console.warn("Ref is not attached to the DOM");
-      return;
-    }
-    const ro = new MutationObserver(notify2DFrameChange);
-    ro.observe(ref.current, {
-      attributeFilter: ["class", "style"],
-      subtree: true
-    });
-    return () => {
-      ro.disconnect();
-    };
-  }, []);
-}
-
-// src/spatialized-container/StandardSpatializedContainer.tsx
-import {
-  forwardRef,
-  useCallback as useCallback3,
-  useContext as useContext2,
-  useEffect as useEffect3,
-  useRef as useRef2,
-  useState
-} from "react";
-import { jsx } from "react/jsx-runtime";
-function useSpatialTransformVisibilityWatcher(spatialId) {
-  const [transformExist, setTransformExist] = useState(false);
-  const spatializedContainerObject = useContext2(SpatializedContainerContext);
-  useEffect3(() => {
-    const fn = (spatialTransform) => {
-      setTransformExist(spatialTransform.transform !== "none");
-    };
-    spatializedContainerObject.onSpatialTransformVisibilityChange(spatialId, fn);
-    return () => {
-      spatializedContainerObject.offSpatialTransformVisibilityChange(
-        spatialId,
-        fn
-      );
-    };
-  }, [spatialId, spatializedContainerObject]);
-  return transformExist;
-}
-function useInternalRef(ref) {
-  const refInternal = useRef2(null);
-  const refInternalCallback = useCallback3(
-    (node) => {
-      refInternal.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref]
-  );
-  return { refInternal, refInternalCallback };
-}
-function StandardSpatializedContainerBase(props, ref) {
-  const {
-    component: Component,
-    style: inStyle = {},
-    className,
-    inStandardSpatializedContainer = false,
-    ...restProps
-  } = props;
-  const { refInternal, refInternalCallback } = useInternalRef(ref);
-  if (!inStandardSpatializedContainer) {
-    use2DFrameDetector(refInternal);
-  }
-  const transformExist = useSpatialTransformVisibilityWatcher(props[SpatialID]);
-  const extraStyle = {
-    visibility: "hidden",
-    transition: "none",
-    transform: transformExist ? "translateZ(0)" : "none"
-  };
-  const style = { ...inStyle, ...extraStyle };
-  const classNames = className ? `${className} xr-spatial-default` : "xr-spatial-default";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref: refInternalCallback,
-      style,
-      className: classNames,
-      ...restProps
-    }
-  );
-}
-var StandardSpatializedContainer = forwardRef(
-  StandardSpatializedContainerBase
-);
-function injectSpatialDefaultStyle() {
-  const styleElement = document.createElement("style");
-  styleElement.type = "text/css";
-  styleElement.innerHTML = " :where(.xr-spatial-default) {  --xr-back: 0; --xr-depth: 0; --xr-z-index: 0; --xr-background-material: none;  } ";
-  document.head.appendChild(styleElement);
-}
-
-// src/spatialized-container/TransformVisibilityTaskContainer.tsx
-import {
-  forwardRef as forwardRef2,
-  useCallback as useCallback5,
-  useRef as useRef3
-} from "react";
-import { createPortal } from "react-dom";
-
-// src/spatialized-container/hooks/useSpatialTransformVisibility.ts
-import { useCallback as useCallback4, useContext as useContext3, useEffect as useEffect4 } from "react";
-
-// src/notifyUpdateStandInstanceLayout.ts
-function notifyUpdateStandInstanceLayout() {
-  document.dispatchEvent(
-    new CustomEvent("standInstanceLayout" /* standInstanceLayout */, {
-      detail: {}
-    })
-  );
-}
-function notifyDOMUpdate(mutationsList) {
-  document.dispatchEvent(
-    new CustomEvent("domUpdated" /* domUpdated */, {
-      detail: mutationsList
-    })
-  );
-}
-
-// src/spatialized-container/hooks/useSpatialTransformVisibility.ts
-function parseTransformAndVisibilityProperties(node) {
-  const computedStyle = getComputedStyle(node);
-  const transform = computedStyle.getPropertyValue("transform");
-  const visibility = computedStyle.getPropertyValue("visibility");
-  return {
-    visibility,
-    transform
-  };
-}
-function useSpatialTransformVisibility(spatialId, ref) {
-  const spatializedContainerObject = useContext3(SpatializedContainerContext);
-  const checkSpatialStyleUpdate = useCallback4(() => {
-    if (!ref.current) {
-      return;
-    }
-    const spatialTransformVisibility = parseTransformAndVisibilityProperties(
-      ref.current
-    );
-    spatializedContainerObject.updateSpatialTransformVisibility(
-      spatialId,
-      spatialTransformVisibility
-    );
-  }, []);
-  useEffect4(() => {
-    checkSpatialStyleUpdate();
-  }, [checkSpatialStyleUpdate]);
-  useEffect4(() => {
-    const observer = new MutationObserver((mutationsList) => {
-      checkSpatialStyleUpdate();
-    });
-    const config = {
-      childList: false,
-      subtree: false,
-      attributes: true,
-      // attributeOldValue: true,
-      attributeFilter: ["style", "class"]
-    };
-    observer.observe(ref.current, config);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-  useEffect4(() => {
-    const headObserver = new MutationObserver((mutations) => {
-      checkSpatialStyleUpdate();
-    });
-    headObserver.observe(document.head, { childList: true, subtree: true });
-    return () => {
-      headObserver.disconnect();
-    };
-  }, []);
-  useEffect4(() => {
-    const onDomUpdated = (event) => {
-      checkSpatialStyleUpdate();
-    };
-    document.addEventListener(
-      "domUpdated" /* domUpdated */,
-      onDomUpdated
-    );
-    return () => {
-      document.removeEventListener(
-        "domUpdated" /* domUpdated */,
-        onDomUpdated
-      );
-    };
-  }, []);
-}
-
-// src/spatialized-container/TransformVisibilityTaskContainer.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var cssParserDivContainer = null;
-function initCSSParserDivContainer() {
-  cssParserDivContainer = document?.createElement("div");
-  if (cssParserDivContainer) {
-    cssParserDivContainer.style.position = "absolute";
-    cssParserDivContainer.setAttribute("data-id", "css-parser-div-container");
-  }
-}
-function createOrGetCSSParserDivContainer() {
-  if (cssParserDivContainer && !cssParserDivContainer.parentElement) {
-    document?.body.appendChild(cssParserDivContainer);
-  }
-  return cssParserDivContainer;
-}
-function useInternalRef2(ref) {
-  const refInternal = useRef3(null);
-  const refInternalCallback = useCallback5(
-    (node) => {
-      refInternal.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref]
-  );
-  return { refInternal, refInternalCallback };
-}
-function TransformVisibilityTaskContainerBase(props, ref) {
-  const { style: inStyle, ...restProps } = props;
-  const extraStyle = {
-    // when width/height equal to zero, transform: translateX(-50%) won't work
-    // to make sure the element is not visible, we set left/top to a very large negative value
-    left: -1e4,
-    top: -1e4,
-    pointerEvents: "none",
-    opacity: 0,
-    // width: 0,
-    // height: 0,
-    padding: 0,
-    transition: "none",
-    position: "absolute"
-  };
-  const { refInternal, refInternalCallback } = useInternalRef2(ref);
-  const style = { ...inStyle, ...extraStyle };
-  useSpatialTransformVisibility(props[SpatialID], refInternal);
-  const cssParserDivContainer2 = createOrGetCSSParserDivContainer();
-  if (!cssParserDivContainer2) {
-    return null;
-  }
-  return createPortal(
-    /* @__PURE__ */ jsx2("div", { ref: refInternalCallback, style, ...restProps }),
-    cssParserDivContainer2
-  );
-}
-var TransformVisibilityTaskContainer = forwardRef2(
-  TransformVisibilityTaskContainerBase
-);
-
-// src/spatialized-container/SpatializedContainer.tsx
-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 available in the current browser
-   * [TODO] discuss implications of this not being async
-   */
-  requestSession() {
-    return null;
-  }
-  /**
-   * Checks if the current page is running in a spatial web environment.
-   * This method detects if the application is running in a WebSpatial-compatible browser.
-   * @returns True if running in a spatial web environment, false otherwise
-   */
-  runInSpatialWeb() {
-    return false;
-  }
-  /**
-   * @returns true if web spatial is supported by this webpage
-   */
-  isSupported() {
-    return false;
-  }
-  /**
-   * Gets the native version, format is "x.x.x"
-   * @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, or null when runtime is unavailable
-   */
-  getClientVersion() {
-    return null;
-  }
-};
-function isSSREnv() {
-  return false;
-}
-var PhysicalMetrics = {
-  pointToPhysical: (point, options) => {
-    return point / 1360;
-  },
-  physicalToPoint: (physical, options) => {
-    return physical * 1360;
-  },
-  getValue: () => ({
-    meterToPtUnscaled: 1360,
-    meterToPtScaled: 1360
-  }),
-  subscribe: (cb) => () => {
-  }
-};
-
-// src/utils/getSession.ts
-var spatial = null;
-var _currentSession = null;
-function getSession() {
-  if (isSSREnv()) return null;
-  if (!spatial) {
-    spatial = new Spatial();
-  }
-  if (!spatial.isSupported()) {
-    return null;
-  }
-  if (_currentSession) {
-    return _currentSession;
-  }
-  _currentSession = spatial.requestSession();
-  return _currentSession;
-}
-
-// src/spatialized-container/context/SpatialLayerContext.ts
-import { createContext as createContext2 } from "react";
-var SpatialLayerContext = createContext2(0);
-
-// src/spatialized-container/PortalSpatializedContainer.tsx
-import { useMemo, useContext as useContext4, useEffect as useEffect7 } from "react";
-
-// src/spatialized-container/context/PortalInstanceContext.ts
-import { createContext as createContext3 } from "react";
-
-// src/utils/debugTool.ts
-async function inspectCurrentSpatialScene() {
-  const spatialScene = getSession().getSpatialScene();
-  return spatialScene.inspect();
-}
-function getSpatialized2DElement(spatialized2DElement) {
-  return spatialized2DElement.__innerSpatializedElement?.();
-}
-function enableDebugTool() {
-  if (isSSREnv()) return;
-  Object.assign(window, {
-    inspectCurrentSpatialScene,
-    getSpatialized2DElement
-  });
-}
-
-// src/spatialized-container/context/PortalInstanceContext.ts
-var PortalInstanceObject = class {
-  spatialId;
-  spatializedContainerObject;
-  parentPortalInstanceObject;
-  spatializedElement;
-  // cachedDomInfo used for cache dom info
-  // when dom is updated, this property should be updated as well
-  cachedDomInfo;
-  get dom() {
-    return this.cachedDomInfo?.dom;
-  }
-  get computedStyle() {
-    return this.cachedDomInfo?.computedStyle;
-  }
-  get isFixedPosition() {
-    return this.cachedDomInfo?.isFixedPosition;
-  }
-  // cachedDomRect used for cache dom rect
-  cachedDomRect;
-  get domRect() {
-    return this.cachedDomRect;
-  }
-  // cachedTransformVisibilityInfo used for cache transform visibility info
-  cachedTransformVisibilityInfo;
-  get transformMatrix() {
-    return this.cachedTransformVisibilityInfo?.transformMatrix;
-  }
-  get visibility() {
-    return this.cachedTransformVisibilityInfo?.visibility;
-  }
-  // spatializedElementPromise used for get spatialized element
-  // SpatializedElement is when attachSpatializedElement is called
-  spatializedElementPromise;
-  spatializedElementResolver;
-  // used for get extra spatialized element properties
-  getExtraSpatializedElementProperties;
-  constructor(spatialId, spatializedContainerObject, parentPortalInstanceObject, getExtraSpatializedElementProperties2) {
-    this.spatialId = spatialId;
-    this.spatializedContainerObject = spatializedContainerObject;
-    this.parentPortalInstanceObject = parentPortalInstanceObject;
-    this.getExtraSpatializedElementProperties = getExtraSpatializedElementProperties2;
-    this.spatializedElementPromise = new Promise(
-      (resolve) => {
-        this.spatializedElementResolver = resolve;
-      }
-    );
-  }
-  // called when PortalSpatializedContainer is mounted
-  init() {
-    this.spatializedContainerObject.onSpatialTransformVisibilityChange(
-      this.spatialId,
-      this.onSpatialTransformVisibilityChange
-    );
-  }
-  // called when PortalSpatializedContainer is unmounted
-  destroy() {
-    this.spatializedContainerObject.offSpatialTransformVisibilityChange(
-      this.spatialId,
-      this.onSpatialTransformVisibilityChange
-    );
-  }
-  onSpatialTransformVisibilityChange = (spatialTransform) => {
-    this.cachedTransformVisibilityInfo = {
-      transformMatrix: new DOMMatrix(spatialTransform.transform),
-      visibility: spatialTransform.visibility
-    };
-    this.updateSpatializedElementProperties();
-  };
-  // called when 2D frame change
-  notify2DFrameChange() {
-    const dom = this.spatializedContainerObject.querySpatialDomBySpatialId(
-      this.spatialId
-    );
-    if (!dom) {
-      return;
-    }
-    const computedStyle = getComputedStyle(dom);
-    this.cachedDomInfo = {
-      dom,
-      computedStyle,
-      isFixedPosition: computedStyle.getPropertyValue("position") === "fixed"
-    };
-    this.updateSpatializedElementProperties();
-    const __innerSpatializedElement = () => this.spatializedElement;
-    Object.assign(dom, {
-      __innerSpatializedElement
-    });
-  }
-  async getSpatializedElement() {
-    return this.spatializedElementPromise;
-  }
-  // called when SpatializedElement is created
-  attachSpatializedElement(spatializedElement) {
-    this.spatializedElement = spatializedElement;
-    this.addToParent(spatializedElement);
-    this.spatializedElementResolver?.(spatializedElement);
-    this.updateSpatializedElementProperties();
-  }
-  inAddingToParent = false;
-  async addToParent(spatializedElement) {
-    if (this.inAddingToParent) {
-      return;
-    }
-    this.inAddingToParent = true;
-    if (this.isFixedPosition || !this.parentPortalInstanceObject) {
-      var spatialScene = await getSession().getSpatialScene();
-      await spatialScene.addSpatializedElement(spatializedElement);
-    } else {
-      const parentSpatialized2DElement = await this.parentPortalInstanceObject.getSpatializedElement();
-      parentSpatialized2DElement.addSpatializedElement(spatializedElement);
-    }
-    this.inAddingToParent = false;
-  }
-  updateSpatializedElementProperties() {
-    const dom = this.dom;
-    const spatializedElement = this.spatializedElement;
-    const visibility = this.visibility;
-    if (!dom || !spatializedElement || !visibility || !this.transformMatrix) {
-      return;
-    }
-    const computedStyle = this.computedStyle;
-    const isFixedPosition = this.isFixedPosition;
-    let domRect = dom.getBoundingClientRect();
-    let { x, y } = domRect;
-    if (!isFixedPosition) {
-      const parentDom = this.spatializedContainerObject.queryParentSpatialDomBySpatialId(
-        this.spatialId
-      );
-      if (parentDom) {
-        const parentDomRect = parentDom.getBoundingClientRect();
-        x -= parentDomRect.x;
-        y -= parentDomRect.y;
-      } else {
-        x += window.scrollX;
-        y += window.scrollY;
-      }
-    }
-    this.cachedDomRect = {
-      x: domRect.x,
-      y: domRect.y,
-      width: domRect.width,
-      height: domRect.height
-    };
-    const width = domRect.width;
-    const height = domRect.height;
-    const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
-    const scrollWithParent = !isFixedPosition;
-    const display = computedStyle.getPropertyValue("display");
-    const visible = visibility === "visible" && display !== "none";
-    const zIndex = parseFloat(
-      computedStyle.getPropertyValue(SpatialCustomStyleVars.xrZIndex)
-    ) || 0;
-    const backOffset = parseFloat(computedStyle.getPropertyValue(SpatialCustomStyleVars.back)) || 0;
-    const depth = parseFloat(
-      computedStyle.getPropertyValue(SpatialCustomStyleVars.depth)
-    ) || 0;
-    const rotationAnchor = parseTransformOrigin(computedStyle);
-    const extraProperties = this.getExtraSpatializedElementProperties?.(computedStyle) || {};
-    spatializedElement.updateProperties({
-      clientX: x,
-      clientY: y,
-      width,
-      height,
-      depth,
-      opacity,
-      scrollWithParent,
-      zIndex,
-      visible,
-      backOffset,
-      rotationAnchor,
-      ...extraProperties
-    });
-    spatializedElement.updateTransform(this.transformMatrix);
-    Object.assign(this.dom, {
-      __spatializedElement: spatializedElement
-    });
-  }
-};
-var PortalInstanceContext = createContext3(
-  null
-);
-
-// src/spatialized-container/hooks/useSync2DFrame.ts
-import { useEffect as useEffect5, useState as useState2 } from "react";
-function useForceUpdate() {
-  const [, setToggle] = useState2(false);
-  return () => setToggle((toggle) => !toggle);
-}
-function useSync2DFrame(spatialId, portalInstanceObject, spatializedContainerObject) {
-  const forceUpdate = useForceUpdate();
-  useEffect5(() => {
-    spatializedContainerObject.on2DFrameChange(spatialId, () => {
-      portalInstanceObject.notify2DFrameChange();
-      forceUpdate();
-    });
-    return () => {
-      spatializedContainerObject.off2DFrameChange(spatialId);
-    };
-  }, []);
-}
-
-// src/spatialized-container/hooks/useSpatializedElement.ts
-import { useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
-function useSpatializedElement(createSpatializedElement2, portalInstanceObject) {
-  const [spatializedElement, setSpatializedElement] = useState3();
-  const elementRef = useRef4(void 0);
-  useEffect6(() => {
-    let isDestroyed = false;
-    createSpatializedElement2().then(
-      (inSpatializedElement) => {
-        if (!inSpatializedElement) return;
-        if (!isDestroyed) {
-          elementRef.current = inSpatializedElement;
-          portalInstanceObject.attachSpatializedElement(inSpatializedElement);
-          setSpatializedElement(inSpatializedElement);
-        } else {
-          inSpatializedElement?.destroy();
-        }
-      }
-    );
-    return () => {
-      isDestroyed = true;
-      const el = elementRef.current;
-      if (el) {
-        el.destroy();
-        elementRef.current = void 0;
-        setSpatializedElement(void 0);
-      }
-    };
-  }, [createSpatializedElement2, portalInstanceObject]);
-  return spatializedElement;
-}
-
-// src/spatialized-container/PortalSpatializedContainer.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
-function constrainedAxisToVec3(input) {
-  if (input == null) return { x: 0, y: 0, z: 0 };
-  if (Array.isArray(input)) {
-    return { x: input[0] ?? 0, y: input[1] ?? 0, z: input[2] ?? 0 };
-  }
-  const v = input;
-  return { x: v.x, y: v.y, z: v.z };
-}
-function constrainedAxisKey(input) {
-  const v = constrainedAxisToVec3(input);
-  return `${v.x},${v.y},${v.z}`;
-}
-function renderPlaceholderInSubPortal(portalInstanceObject, El) {
-  const spatialId = portalInstanceObject.spatialId;
-  const inPortalInstanceEnv = !!portalInstanceObject.parentPortalInstanceObject;
-  const position = portalInstanceObject.computedStyle?.getPropertyValue("position");
-  const shouldRenderPlaceHolder = inPortalInstanceEnv && portalInstanceObject && portalInstanceObject.domRect && position !== "absolute" && position !== "fixed";
-  if (!shouldRenderPlaceHolder) {
-    return /* @__PURE__ */ jsx3(Fragment, {});
-  }
-  const { width, height } = portalInstanceObject.domRect;
-  const display = portalInstanceObject.computedStyle.getPropertyValue("display");
-  const spatialIdProps = { [SpatialID]: spatialId };
-  return /* @__PURE__ */ jsx3(
-    El,
-    {
-      ...spatialIdProps,
-      style: {
-        position: "relative",
-        width: `${width}px`,
-        height: `${height}px`,
-        visibility: "hidden",
-        display
-      }
-    }
-  );
-}
-function PortalSpatializedContainer(props) {
-  const {
-    spatializedContent: Content,
-    createSpatializedElement: createSpatializedElement2,
-    getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
-    onSpatialTap,
-    onSpatialDragStart,
-    onSpatialDrag,
-    onSpatialDragEnd,
-    onSpatialRotate,
-    onSpatialRotateEnd,
-    onSpatialMagnify,
-    onSpatialMagnifyEnd,
-    spatialEventOptions,
-    [SpatialID]: spatialId,
-    ...restProps
-  } = props;
-  const spatializedContainerObject = useContext4(
-    SpatializedContainerContext
-  );
-  const parentPortalInstanceObject = useContext4(PortalInstanceContext);
-  const portalInstanceObject = useMemo(
-    () => new PortalInstanceObject(
-      spatialId,
-      spatializedContainerObject,
-      parentPortalInstanceObject,
-      getExtraSpatializedElementProperties2
-    ),
-    []
-  );
-  useEffect7(() => {
-    portalInstanceObject.init();
-    return () => {
-      portalInstanceObject.destroy();
-    };
-  }, []);
-  useSync2DFrame(spatialId, portalInstanceObject, spatializedContainerObject);
-  const spatializedElement = useSpatializedElement(
-    createSpatializedElement2,
-    portalInstanceObject
-  );
-  const PlaceholderEl = renderPlaceholderInSubPortal(
-    portalInstanceObject,
-    props.component
-  );
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialTap = onSpatialTap;
-    }
-  }, [spatializedElement, onSpatialTap]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialDrag = onSpatialDrag;
-    }
-  }, [spatializedElement, onSpatialDrag]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialDragEnd = onSpatialDragEnd;
-    }
-  }, [spatializedElement, onSpatialDragEnd]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialRotate = onSpatialRotate;
-    }
-  }, [spatializedElement, onSpatialRotate]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialRotateEnd = onSpatialRotateEnd;
-    }
-  }, [spatializedElement, onSpatialRotateEnd]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialMagnify = onSpatialMagnify;
-    }
-  }, [spatializedElement, onSpatialMagnify]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialMagnifyEnd = onSpatialMagnifyEnd;
-    }
-  }, [spatializedElement, onSpatialMagnifyEnd]);
-  useEffect7(() => {
-    if (spatializedElement) {
-      spatializedElement.onSpatialDragStart = onSpatialDragStart;
-    }
-  }, [spatializedElement, onSpatialDragStart]);
-  const rotateConstraintKey = constrainedAxisKey(
-    spatialEventOptions?.constrainedToAxis
-  );
-  useEffect7(() => {
-    if (!spatializedElement) return;
-    const axis = constrainedAxisToVec3(spatialEventOptions?.constrainedToAxis);
-    void spatializedElement.updateProperties({ rotateConstrainedToAxis: axis });
-  }, [spatializedElement, rotateConstraintKey]);
-  return /* @__PURE__ */ jsxs(PortalInstanceContext.Provider, { value: portalInstanceObject, children: [
-    spatializedElement && portalInstanceObject.dom && /* @__PURE__ */ jsx3(Content, { spatializedElement, ...restProps }),
-    PlaceholderEl
-  ] });
-}
-
-// src/reality/context/InsideAttachmentContext.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
-var InsideAttachmentContext = createContext4(false);
-var useInsideAttachment = () => useContext5(InsideAttachmentContext);
-
-// src/spatialized-container/hooks/useSpatialEvents.ts
-function createEventProxy(event, currentTargetGetter, offsetXGetter, offsetYGetter, offsetZGetter, clientXGetter, clientYGetter, clientZGetter, translationXGetter, translationYGetter, translationZGetter, quaternionGetter, magnificationGetter) {
-  return new Proxy(event, {
-    get(target, prop) {
-      if (prop === "currentTarget") {
-        return 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;
-      }
-      if (prop === "clientX" && clientXGetter) {
-        return clientXGetter(target) ?? 0;
-      }
-      if (prop === "clientY" && clientYGetter) {
-        return clientYGetter(target) ?? 0;
-      }
-      if (prop === "clientZ" && clientZGetter) {
-        return clientZGetter(target) ?? 0;
-      }
-      if (prop === "translationX" && translationXGetter) {
-        return translationXGetter(target) ?? 0;
-      }
-      if (prop === "translationY" && translationYGetter) {
-        return translationYGetter(target) ?? 0;
-      }
-      if (prop === "translationZ" && translationZGetter) {
-        return translationZGetter(target) ?? 0;
-      }
-      if (prop === "quaternion" && quaternionGetter) {
-        return quaternionGetter(target) ?? { x: 0, y: 0, z: 0, w: 1 };
-      }
-      if (prop === "magnification" && magnificationGetter) {
-        return magnificationGetter(target) ?? 1;
-      }
-      return Reflect.get(target, prop);
-    }
-  });
-}
-function createEventHandler(handler, currentTargetGetter, offsetXGetter, offsetYGetter, offsetZGetter, clientXGetter, clientYGetter, clientZGetter, translationXGetter, translationYGetter, translationZGetter, quaternionGetter, magnificationGetter) {
-  return handler ? (event) => {
-    const proxyEvent = createEventProxy(
-      event,
-      currentTargetGetter,
-      offsetXGetter,
-      offsetYGetter,
-      offsetZGetter,
-      clientXGetter,
-      clientYGetter,
-      clientZGetter,
-      translationXGetter,
-      translationYGetter,
-      translationZGetter,
-      quaternionGetter,
-      magnificationGetter
-    );
-    handler(proxyEvent);
-  } : void 0;
-}
-function useSpatialEventsBase(spatialEvents, currentTargetGetter) {
-  const onSpatialTap = createEventHandler(
-    spatialEvents.onSpatialTap,
-    currentTargetGetter,
-    // offsetX/Y/Z come from local coordinates
-    (ev) => ev.detail?.location3D?.x,
-    (ev) => ev.detail?.location3D?.y,
-    (ev) => ev.detail?.location3D?.z,
-    // clientX/Y/Z come from global scene coordinates
-    (ev) => ev.detail?.globalLocation3D?.x,
-    (ev) => ev.detail?.globalLocation3D?.y,
-    (ev) => ev.detail?.globalLocation3D?.z
-  );
-  const onSpatialDrag = createEventHandler(
-    spatialEvents.onSpatialDrag,
-    currentTargetGetter,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    (ev) => ev.detail?.translation3D?.x,
-    (ev) => ev.detail?.translation3D?.y,
-    (ev) => ev.detail?.translation3D?.z
-  );
-  const onSpatialDragEnd = createEventHandler(
-    spatialEvents.onSpatialDragEnd,
-    currentTargetGetter
-  );
-  const onSpatialRotate = createEventHandler(
-    spatialEvents.onSpatialRotate,
-    currentTargetGetter,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    (ev) => ev.detail?.quaternion
-  );
-  const onSpatialRotateEnd = createEventHandler(
-    spatialEvents.onSpatialRotateEnd,
-    currentTargetGetter
-  );
-  const onSpatialMagnify = createEventHandler(
-    spatialEvents.onSpatialMagnify,
-    currentTargetGetter,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    void 0,
-    (ev) => ev.detail?.magnification
-  );
-  const onSpatialMagnifyEnd = createEventHandler(
-    spatialEvents.onSpatialMagnifyEnd,
-    currentTargetGetter
-  );
-  const onSpatialDragStart = createEventHandler(
-    spatialEvents.onSpatialDragStart,
-    currentTargetGetter,
-    (ev) => ev.detail?.startLocation3D?.x,
-    (ev) => ev.detail?.startLocation3D?.y,
-    (ev) => ev.detail?.startLocation3D?.z,
-    (ev) => ev.detail?.globalLocation3D?.x,
-    (ev) => ev.detail?.globalLocation3D?.y,
-    (ev) => ev.detail?.globalLocation3D?.z
-  );
-  return {
-    onSpatialTap,
-    onSpatialDragStart,
-    onSpatialDrag,
-    onSpatialDragEnd,
-    onSpatialRotate,
-    onSpatialRotateEnd,
-    onSpatialMagnify,
-    onSpatialMagnifyEnd
-  };
-}
-function useSpatialEvents(spatialEvents, spatialContainerRefProxy) {
-  return useSpatialEventsBase(
-    spatialEvents,
-    () => spatialContainerRefProxy.current?.domProxy
-  );
-}
-function useSpatialEventsWhenSpatializedContainerExist(spatialEvents, spatialId, spatializedContainerObject) {
-  return useSpatialEventsBase(spatialEvents, () => {
-    const spatialContainerRefProxy = spatializedContainerObject.getSpatialContainerRefProxyBySpatialId(
-      spatialId
-    );
-    return spatialContainerRefProxy?.domProxy;
-  });
-}
-
-// src/ssr/SSRContext.tsx
-import { createContext as createContext5, useState as useState4, useEffect as useEffect8 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var SSRContext = createContext5(false);
-var SSRProvider = ({
-  isSSR: initialIsSSR = true,
-  children
-}) => {
-  const [isSSR, setIsSSR] = useState4(initialIsSSR);
-  useEffect8(() => {
-    if (isSSR) {
-      setIsSSR(false);
-    }
-  }, []);
-  return /* @__PURE__ */ jsx4(SSRContext.Provider, { value: isSSR, children });
-};
-
-// src/ssr/withSSRSupported.tsx
-import { forwardRef as forwardRef3 } from "react";
-
-// src/ssr/useSSRPhase.tsx
-import { useContext as useContext6, useState as useState5, useEffect as useEffect9 } from "react";
-function useSSRPhase() {
-  const isSSRContext = useContext6(SSRContext);
-  const isServer = typeof window === "undefined";
-  const [hydrated, setHydrated] = useState5(false);
-  useEffect9(() => setHydrated(true), []);
-  if (isServer) {
-    return "ssr";
-  }
-  if (isSSRContext) {
-    return hydrated ? "after-hydrate" : "hydrate";
-  } else {
-    return "after-hydrate";
-  }
-}
-
-// src/ssr/withSSRSupported.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function withSSRSupported(Component) {
-  const ClientOnlyComponent = (props, ref) => {
-    const phase = useSSRPhase();
-    let renderType = "real";
-    if (phase === "ssr" || phase === "hydrate") {
-      renderType = "fake";
-    }
-    if (renderType === "fake") {
-      const { style, className } = props;
-      return /* @__PURE__ */ jsx5("div", { style, className, ref });
-    } else {
-      return /* @__PURE__ */ jsx5(Component, { ...props, ref });
-    }
-  };
-  ClientOnlyComponent.displayName = `withClientOnly(${Component.displayName || Component.name || "Component"})`;
-  return forwardRef3(ClientOnlyComponent);
-}
-
-// src/spatialized-container/SpatializedContainer.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-function DegradedContainer({
-  innerRef,
-  ...inprops
-}) {
-  const {
-    component: Component,
-    children,
-    ["enable-xr"]: _enableXR,
-    onSpatialTap: _onSpatialTap,
-    onSpatialDragStart: _onSpatialDragStart,
-    onSpatialDrag: _onSpatialDrag,
-    onSpatialDragEnd: _onSpatialDragEnd,
-    onSpatialRotate: _onSpatialRotate,
-    onSpatialRotateEnd: _onSpatialRotateEnd,
-    onSpatialMagnify: _onSpatialMagnify,
-    onSpatialMagnifyEnd: _onSpatialMagnifyEnd,
-    spatialEventOptions: _spatialEventOptions,
-    spatializedContent: _content,
-    createSpatializedElement: _create,
-    getExtraSpatializedElementProperties: _getExtra,
-    extraRefProps: _extraRef,
-    sizingMode: _sizingMode,
-    ...restProps
-  } = inprops;
-  return /* @__PURE__ */ jsx6(Component, { ref: innerRef, ...restProps, children });
-}
-function SpatializedContainerBase(inprops, ref) {
-  const isWebSpatialEnv = getSession() !== null;
-  const insideAttachment = useInsideAttachment();
-  if (!isWebSpatialEnv || insideAttachment) {
-    if (insideAttachment) {
-      console.warn(
-        `[WebSpatial] ${inprops.component || "Spatial element"} cannot be used inside AttachmentAsset. Rendering as plain HTML.`
-      );
-    }
-    return /* @__PURE__ */ jsx6(DegradedContainer, { ...inprops, innerRef: ref });
-  }
-  const layer = useContext7(SpatialLayerContext) + 1;
-  const rootSpatializedContainerObject = useContext7(
-    SpatializedContainerContext
-  );
-  const inSpatializedContainer = !!rootSpatializedContainerObject;
-  const portalInstanceObject = useContext7(PortalInstanceContext);
-  const inPortalInstanceEnv = !!portalInstanceObject;
-  const isInStandardInstance = !inPortalInstanceEnv;
-  const spatialId = useMemo2(() => {
-    return !inSpatializedContainer ? `root_container` : rootSpatializedContainerObject.getSpatialId(layer, isInStandardInstance);
-  }, []);
-  const spatialIdProps = {
-    [SpatialID]: spatialId
-  };
-  const {
-    onSpatialTap,
-    onSpatialDragStart,
-    onSpatialDrag,
-    onSpatialDragEnd,
-    onSpatialRotate,
-    onSpatialRotateEnd,
-    onSpatialMagnify,
-    onSpatialMagnifyEnd,
-    extraRefProps,
-    ...props
-  } = inprops;
-  if (inSpatializedContainer) {
-    if (inPortalInstanceEnv) {
-      const spatialEvents = useSpatialEventsWhenSpatializedContainerExist(
-        {
-          onSpatialTap,
-          onSpatialDragStart,
-          onSpatialDrag,
-          onSpatialDragEnd,
-          onSpatialRotate,
-          onSpatialRotateEnd,
-          onSpatialMagnify,
-          onSpatialMagnifyEnd
-        },
-        spatialId,
-        rootSpatializedContainerObject
-      );
-      return /* @__PURE__ */ jsx6(SpatialLayerContext.Provider, { value: layer, children: /* @__PURE__ */ jsx6(
-        PortalSpatializedContainer,
-        {
-          ...spatialIdProps,
-          ...props,
-          ...spatialEvents
-        }
-      ) });
-    } else {
-      const {
-        transformVisibilityTaskContainerCallback,
-        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,
-          spatialContainerRefProxy.current
-        );
-      }, [spatialContainerRefProxy.current]);
-      const {
-        spatializedContent,
-        createSpatializedElement: createSpatializedElement2,
-        getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
-        spatialEventOptions: _nestedSpatialEventOptions,
-        ...restProps
-      } = props;
-      return /* @__PURE__ */ jsxs2(SpatialLayerContext.Provider, { value: layer, children: [
-        /* @__PURE__ */ jsx6(
-          StandardSpatializedContainer,
-          {
-            ref: standardSpatializedContainerCallback,
-            ...spatialIdProps,
-            ...restProps,
-            inStandardSpatializedContainer: true
-          }
-        ),
-        /* @__PURE__ */ jsx6(
-          TransformVisibilityTaskContainer,
-          {
-            ref: transformVisibilityTaskContainerCallback,
-            ...spatialIdProps,
-            className: probeClassName,
-            style: props.style
-          }
-        )
-      ] });
-    }
-  } else {
-    const {
-      transformVisibilityTaskContainerCallback,
-      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,
-        onSpatialDragStart,
-        onSpatialDrag,
-        onSpatialDragEnd,
-        onSpatialRotate,
-        onSpatialRotateEnd,
-        onSpatialMagnify,
-        onSpatialMagnifyEnd
-      },
-      spatialContainerRefProxy
-    );
-    const spatializedContainerObject = useMemo2(
-      () => new SpatializedContainerObject(),
-      []
-    );
-    const {
-      spatializedContent,
-      createSpatializedElement: createSpatializedElement2,
-      getExtraSpatializedElementProperties: getExtraSpatializedElementProperties2,
-      spatialEventOptions: _rootSpatialEventOptions,
-      ...restProps
-    } = props;
-    return /* @__PURE__ */ jsx6(SpatialLayerContext.Provider, { value: layer, children: /* @__PURE__ */ jsxs2(
-      SpatializedContainerContext.Provider,
-      {
-        value: spatializedContainerObject,
-        children: [
-          /* @__PURE__ */ jsx6(
-            StandardSpatializedContainer,
-            {
-              ref: standardSpatializedContainerCallback,
-              ...spatialIdProps,
-              ...restProps,
-              inStandardSpatializedContainer: false
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            PortalSpatializedContainer,
-            {
-              ...spatialIdProps,
-              ...props,
-              ...spatialEvents
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            TransformVisibilityTaskContainer,
-            {
-              ref: transformVisibilityTaskContainerCallback,
-              ...spatialIdProps,
-              className: probeClassName,
-              style: props.style
-            }
-          )
-        ]
-      }
-    ) });
-  }
-}
-var SpatializedContainer = withSSRSupported(
-  forwardRef4(SpatializedContainerBase)
-);
-
-// src/spatialized-container/Spatialized2DElementContainer.tsx
-import { createPortal as createPortal2 } from "react-dom";
-import {
-  forwardRef as forwardRef5,
-  useContext as useContext8,
-  useEffect as useEffect12
-} from "react";
-
-// src/utils/windowStyleSync.ts
-function asyncLoadStyleToChildWindow(childWindow, link, isCurrent) {
-  return new Promise((resolve) => {
-    const { href } = link;
-    const sep = href.includes("?") ? "&" : "?";
-    link.href = `${href}${sep}uniqueURL=${Math.random()}`;
-    let finished = false;
-    const finish = (ok) => {
-      if (finished) return;
-      finished = true;
-      resolve(ok);
-    };
-    link.onerror = () => {
-      finish(false);
-    };
-    link.onload = () => {
-      if (!isCurrent()) {
-        link.parentNode?.removeChild(link);
-        finish(false);
-        return;
-      }
-      finish(true);
-    };
-    setTimeout(() => {
-      if (!isCurrent()) {
-        finish(false);
-        return;
-      }
-      childWindow.document.head.appendChild(link);
-    }, 50);
-  });
-}
-var WEBSPATIAL_SYNC_ATTR = "data-webspatial-sync";
-var WEBSPATIAL_SYNC_KEY_ATTR = "data-webspatial-sync-key";
-function setOpenWindowStyle(openedWindow) {
-  openedWindow.document.documentElement.style.cssText += document.documentElement.style.cssText;
-  openedWindow.document.documentElement.style.backgroundColor = "transparent";
-  openedWindow.document.body.style.margin = "0px";
-  openedWindow.document.body.style.display = "inline-block";
-  openedWindow.document.body.style.minWidth = "auto";
-  openedWindow.document.body.style.minHeight = "auto";
-  openedWindow.document.body.style.maxWidth = "fit-content";
-  openedWindow.document.body.style.minWidth = "fit-content";
-  openedWindow.document.body.style.background = "transparent";
-}
-var controllers = /* @__PURE__ */ new WeakMap();
-function getController(childWindow) {
-  const prev = controllers.get(childWindow);
-  if (prev) return prev;
-  const next = { version: 0 };
-  controllers.set(childWindow, next);
-  return next;
-}
-async function syncParentHeadToChild(childWindow) {
-  const controller = getController(childWindow);
-  const version2 = ++controller.version;
-  const styleLoadedPromises = [];
-  const { head } = childWindow.document;
-  const isCurrent = () => controller.version === version2;
-  const parentStyles = Array.from(document.head.querySelectorAll("style"));
-  const parentStylesheets = Array.from(
-    document.head.querySelectorAll('link[rel="stylesheet"][href]')
-  );
-  const desiredStylesheetKeys = /* @__PURE__ */ new Set();
-  for (const link of parentStylesheets) {
-    if (link.href) desiredStylesheetKeys.add(link.href);
-  }
-  const existingSyncedLinks = Array.from(
-    head.querySelectorAll(
-      `link[rel="stylesheet"][${WEBSPATIAL_SYNC_ATTR}="1"]`
-    )
-  );
-  for (const link of existingSyncedLinks) {
-    const key = link.getAttribute(WEBSPATIAL_SYNC_KEY_ATTR) ?? link.href;
-    if (!desiredStylesheetKeys.has(key)) link.parentNode?.removeChild(link);
-  }
-  const prevSyncedStyles = head.querySelectorAll(
-    `style[${WEBSPATIAL_SYNC_ATTR}="1"]`
-  );
-  prevSyncedStyles.forEach((n) => n.parentNode?.removeChild(n));
-  for (const styleEl of parentStyles) {
-    const node = styleEl.cloneNode(true);
-    node.setAttribute(WEBSPATIAL_SYNC_ATTR, "1");
-    head.appendChild(node);
-  }
-  const currentKeys = /* @__PURE__ */ new Set();
-  const currentSyncedLinks = Array.from(
-    head.querySelectorAll(
-      `link[rel="stylesheet"][${WEBSPATIAL_SYNC_ATTR}="1"]`
-    )
-  );
-  for (const link of currentSyncedLinks) {
-    currentKeys.add(link.getAttribute(WEBSPATIAL_SYNC_KEY_ATTR) ?? link.href);
-  }
-  for (const link of parentStylesheets) {
-    const key = link.href;
-    if (!key || currentKeys.has(key)) continue;
-    const node = link.cloneNode(true);
-    node.setAttribute(WEBSPATIAL_SYNC_ATTR, "1");
-    node.setAttribute(WEBSPATIAL_SYNC_KEY_ATTR, key);
-    styleLoadedPromises.push(
-      asyncLoadStyleToChildWindow(childWindow, node, isCurrent)
-    );
-  }
-  childWindow.document.documentElement.className = document.documentElement.className;
-  return Promise.all(styleLoadedPromises);
-}
-
-// src/utils/useSyncHeadStyles.ts
-import { useEffect as useEffect11 } from "react";
-function defaultShouldSync(mutations) {
-  if (!Array.isArray(mutations) || mutations.length === 0) return false;
-  for (const mutation of mutations) {
-    const nodes = [
-      ...Array.from(mutation.addedNodes),
-      ...Array.from(mutation.removedNodes)
-    ];
-    for (const node of nodes) {
-      if (!(node instanceof Element)) continue;
-      const tag = node.tagName;
-      if (tag === "STYLE") return true;
-      if (tag === "LINK") {
-        const { rel } = node;
-        if (rel && rel.toLowerCase() === "stylesheet") return true;
-      }
-    }
-  }
-  return false;
-}
-function useSyncHeadStyles(childWindow, options) {
-  const delayMs = 100;
-  const subtree = options?.subtree ?? false;
-  const immediate = options?.immediate ?? true;
-  useEffect11(() => {
-    if (!childWindow) return;
-    let timer;
-    const scheduleSync = () => {
-      if (timer) window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        syncParentHeadToChild(childWindow);
-      }, delayMs);
-    };
-    if (immediate) scheduleSync();
-    const observer = new MutationObserver((mutations) => {
-      if (!defaultShouldSync(mutations)) return;
-      scheduleSync();
-    });
-    observer.observe(document.head, { childList: true, subtree });
-    return () => {
-      if (timer) window.clearTimeout(timer);
-      observer.disconnect();
-    };
-  }, [childWindow, delayMs, subtree, immediate]);
-}
-
-// src/spatialized-container/Spatialized2DElementContainer.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function getJSXPortalInstance(inProps, portalInstanceObject) {
-  const { component: El, style: inStyle = {}, ...props } = inProps;
-  const extraStyle = {
-    visibility: "visible",
-    position: "relative",
-    top: "0px",
-    left: "0px",
-    margin: "0px",
-    marginLeft: "0px",
-    marginRight: "0px",
-    marginTop: "0px",
-    marginBottom: "0px",
-    borderRadius: "0px",
-    // overflow: '',
-    transform: "none"
-  };
-  const computedStyle = portalInstanceObject.computedStyle;
-  const inheritedPortalStyle = getInheritedStyleProps(computedStyle);
-  const style = {
-    ...inStyle,
-    ...inheritedPortalStyle,
-    ...extraStyle
-  };
-  return /* @__PURE__ */ jsx7(El, { style, ...props });
-}
-function useSyncDocumentTitle(windowProxy, spatializedElement, name) {
-  useEffect12(() => {
-    windowProxy.document.title = name;
-    spatializedElement.updateProperties({
-      name
-    });
-  }, [name]);
-}
-function SpatializedContent(props) {
-  const { spatializedElement, ...restProps } = props;
-  const spatialized2DElement = spatializedElement;
-  const { windowProxy } = spatialized2DElement;
-  useSyncHeadStyles(windowProxy, {
-    subtree: false
-  });
-  const name = restProps["data-name"] || "";
-  useSyncDocumentTitle(windowProxy, spatialized2DElement, name);
-  const portalInstanceObject = useContext8(
-    PortalInstanceContext
-  );
-  const JSXPortalInstance = getJSXPortalInstance(
-    restProps,
-    portalInstanceObject
-  );
-  return createPortal2(JSXPortalInstance, windowProxy.document.body);
-}
-function getExtraSpatializedElementProperties(computedStyle) {
-  const overflow = computedStyle.getPropertyValue("overflow");
-  const scrollPageEnabled = ["visible", "hidden", "clip"].indexOf(overflow) >= 0;
-  const material = computedStyle.getPropertyValue(
-    SpatialCustomStyleVars.backgroundMaterial
-  );
-  const properties = {};
-  properties.scrollPageEnabled = scrollPageEnabled;
-  properties.cornerRadius = parseCornerRadius(computedStyle);
-  if (material) {
-    properties.material = material;
-  }
-  return properties;
-}
-async function createSpatializedElement() {
-  const spatializedElement = await getSession().createSpatialized2DElement();
-  const { windowProxy } = spatializedElement;
-  setOpenWindowStyle(windowProxy);
-  await syncParentHeadToChild(windowProxy);
-  const viewport = windowProxy.document.querySelector('meta[name="viewport"]');
-  if (viewport) {
-    viewport?.setAttribute(
-      "content",
-      " initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    );
-  } else {
-    const meta = windowProxy.document.createElement("meta");
-    meta.name = "viewport";
-    meta.content = "initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
-    windowProxy.document.head.appendChild(meta);
-  }
-  return spatializedElement;
-}
-function Spatialized2DElementContainerBase(props, ref) {
-  return /* @__PURE__ */ jsx7(
-    SpatializedContainer,
-    {
-      ref,
-      createSpatializedElement,
-      getExtraSpatializedElementProperties,
-      spatializedContent: SpatializedContent,
-      ...props
-    }
-  );
-}
-var Spatialized2DElementContainer = forwardRef5(
-  Spatialized2DElementContainerBase
-);
-
-// src/spatialized-container/SpatializedStatic3DElementContainer.tsx
-import {
-  Children,
-  forwardRef as forwardRef6,
-  isValidElement,
-  useCallback as useCallback7,
-  useContext as useContext9,
-  useEffect as useEffect13,
-  useMemo as useMemo3,
-  useRef as useRef5
-} from "react";
-import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
-function getAbsoluteURL(url) {
-  if (!url) return url;
-  try {
-    return new URL(url, document.baseURI).toString();
-  } catch {
-    return url;
-  }
-}
-function createLoadEvent(type, targetGetter) {
-  const event = new CustomEvent(type, {
-    bubbles: false,
-    cancelable: false
-  });
-  const proxyEvent = new Proxy(event, {
-    get(target, prop) {
-      if (prop === "target") {
-        return targetGetter();
-      }
-      return Reflect.get(target, prop);
-    }
-  });
-  return proxyEvent;
-}
-function createLoadFailureEvent(targetGetter) {
-  return createLoadEvent("modelloadfailed", 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, children, spatializedElement, onLoad, onError, autoPlay, loop } = props;
-  const portalInstanceObject = useContext9(PortalInstanceContext);
-  const modelURL = useMemo3(() => getAbsoluteURL(src), [src]);
-  const sources = useMemo3(() => collectSources(children), [children]);
-  useEffect13(() => {
-    spatializedElement.updateProperties({
-      modelURL: modelURL ?? "",
-      sources,
-      autoplay: autoPlay,
-      loop
-    });
-  }, [modelURL, JSON.stringify(sources), autoPlay, loop]);
-  useEffect13(() => {
-    if (onLoad) {
-      spatializedElement.onLoadCallback = () => {
-        onLoad(
-          createLoadSuccessEvent(
-            () => portalInstanceObject.dom.__targetProxy
-          )
-        );
-      };
-    } else {
-      spatializedElement.onLoadCallback = void 0;
-    }
-  }, [onLoad]);
-  useEffect13(() => {
-    if (onError) {
-      spatializedElement.onLoadFailureCallback = () => {
-        onError(
-          createLoadFailureEvent(
-            () => portalInstanceObject.dom.__targetProxy
-          )
-        );
-      };
-    } else {
-      spatializedElement.onLoadFailureCallback = void 0;
-    }
-  }, [onError]);
-  return /* @__PURE__ */ jsx8(Fragment2, {});
-}
-function SpatializedStatic3DElementContainerBase(props, ref) {
-  const promiseRef = useRef5(null);
-  const createSpatializedElement2 = useCallback7(() => {
-    promiseRef.current = getSession().createSpatializedStatic3DElement(
-      getAbsoluteURL(props.src),
-      collectSources(props.children)
-    );
-    return promiseRef.current;
-  }, []);
-  const extraRefProps = useCallback7(
-    (domProxy) => {
-      let modelTransform = new DOMMatrixReadOnly();
-      return {
-        get currentSrc() {
-          const spatializedElement = domProxy.__spatializedElement;
-          return spatializedElement?.currentSrc ?? "";
-        },
-        get ready() {
-          return promiseRef.current.then((spatializedElement) => spatializedElement.ready).then((success) => {
-            if (success) return createLoadSuccessEvent(() => domProxy);
-            throw createLoadFailureEvent(() => domProxy);
-          });
-        },
-        get entityTransform() {
-          return modelTransform;
-        },
-        set entityTransform(value) {
-          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;
-          }
-        }
-      };
-    },
-    []
-  );
-  return /* @__PURE__ */ jsx8(
-    SpatializedContainer,
-    {
-      ref,
-      component: "div",
-      createSpatializedElement: createSpatializedElement2,
-      spatializedContent: SpatializedContent2,
-      extraRefProps,
-      ...props
-    }
-  );
-}
-var SpatializedStatic3DElementContainer = forwardRef6(
-  SpatializedStatic3DElementContainerBase
-);
-
-// src/spatialized-container/Spatialized2DElementContainerFactory.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var CachedSpatialized2DElementContainerType = /* @__PURE__ */ new Map();
-function withSpatialized2DElementContainer(Component) {
-  if (CachedSpatialized2DElementContainerType.has(Component)) {
-    return CachedSpatialized2DElementContainerType.get(Component);
-  } else {
-    const TypedSpatialized2DElementContainer = forwardRef7(
-      (givenProps, ref) => {
-        const { component: ignoreComponent, ...props } = givenProps;
-        return /* @__PURE__ */ jsx9(
-          Spatialized2DElementContainer,
-          {
-            component: Component,
-            ...props,
-            ref
-          }
-        );
-      }
-    );
-    CachedSpatialized2DElementContainerType.set(
-      Component,
-      TypedSpatialized2DElementContainer
-    );
-    CachedSpatialized2DElementContainerType.set(
-      TypedSpatialized2DElementContainer,
-      TypedSpatialized2DElementContainer
-    );
-    return TypedSpatialized2DElementContainer;
-  }
-}
-
-// src/spatialized-container/index.ts
-function initPolyfill() {
-  hijackGetComputedStyle();
-  injectSpatialDefaultStyle();
-  initCSSParserDivContainer();
-}
-
-// src/initScene.web.ts
-function initScene(name, callback) {
-  return;
-}
-
-// src/spatialized-container-monitor/withSpatialMonitor.tsx
-import { forwardRef as forwardRef9 } from "react";
-
-// src/spatialized-container-monitor/useMonitorDomChange.tsx
-import { useRef as useRef6, useEffect as useEffect14, useMemo as useMemo4 } from "react";
-function useMonitorDomChange(inRef) {
-  const ref = useRef6(null);
-  useEffect14(() => {
-    const observer = new MutationObserver((mutationsList) => {
-      notifyDOMUpdate(mutationsList);
-    });
-    const config = {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["style", "class"]
-    };
-    ref.current && observer.observe(ref.current, config);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-  const proxyRef = useMemo4(
-    () => new Proxy(ref, {
-      set: function(target, key, value) {
-        if (key === "current") {
-          if (inRef) {
-            if (typeof inRef === "function") {
-              inRef(value);
-            } else if (inRef) {
-              inRef.current = value;
-            }
-          }
-        }
-        return Reflect.set(target, key, value);
-      }
-    }),
-    []
-  );
-  return proxyRef;
-}
-
-// src/spatialized-container-monitor/useMonitorDocumentHeaderChange.tsx
-import { useEffect as useEffect15 } from "react";
-function useMonitorDocumentHeaderChange() {
-  useEffect15(() => {
-    const observer = new MutationObserver((mutationsList) => {
-      notifyUpdateStandInstanceLayout();
-    });
-    const config = {
-      childList: true,
-      subtree: true,
-      attributes: true
-    };
-    observer.observe(document.head, config);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-}
-
-// src/spatialized-container-monitor/SpatialMonitor.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function SpatialMonitorBase(inProps, inRef) {
-  const { El = "div", ...props } = inProps;
-  const ref = useMonitorDomChange(inRef);
-  useMonitorDocumentHeaderChange();
-  return /* @__PURE__ */ jsx10(El, { ...props, ref });
-}
-var SpatialMonitor = forwardRef8(SpatialMonitorBase);
-
-// src/spatialized-container-monitor/withSpatialMonitor.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var cachedWithSpatialMonitorType = /* @__PURE__ */ new Map();
-function withSpatialMonitor(El) {
-  if (cachedWithSpatialMonitorType.has(El)) {
-    return cachedWithSpatialMonitorType.get(El);
-  } else {
-    const WithSpatialMonitorComponent = forwardRef9(
-      (givenProps, givenRef) => {
-        const {
-          El: _,
-          ...props
-        } = givenProps;
-        return /* @__PURE__ */ jsx11(SpatialMonitor, { El, ...props, ref: givenRef });
-      }
-    );
-    WithSpatialMonitorComponent.displayName = `WithSpatialMonitor(${typeof El === "string" ? El : El.displayName || El.name})`;
-    cachedWithSpatialMonitorType.set(El, WithSpatialMonitorComponent);
-    cachedWithSpatialMonitorType.set(
-      cachedWithSpatialMonitorType,
-      cachedWithSpatialMonitorType
-    );
-    return WithSpatialMonitorComponent;
-  }
-}
-
-// src/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
-import { createContext as createContext6, useContext as useContext10 } from "react";
-var RealityContext = createContext6(null);
-var useRealityContext = () => useContext10(RealityContext);
-
-// src/reality/context/ParentContext.tsx
-import { createContext as createContext7, useContext as useContext11 } from "react";
-var ParentContext = createContext7(null);
-var useParentContext = () => useContext11(ParentContext);
-
-// src/reality/context/AttachmentContext.tsx
-import { createContext as createContext8, useContext as useContext12 } from "react";
-var AttachmentRegistry = class {
-  // name → (instanceId → container)
-  containers = /* @__PURE__ */ new Map();
-  listeners = /* @__PURE__ */ new Map();
-  addContainer(name, instanceId, container) {
-    if (!this.containers.has(name)) {
-      this.containers.set(name, /* @__PURE__ */ new Map());
-    }
-    this.containers.get(name).set(instanceId, container);
-    this.notifyListeners(name);
-  }
-  removeContainer(name, instanceId) {
-    this.containers.get(name)?.delete(instanceId);
-    if (this.containers.get(name)?.size === 0) {
-      this.containers.delete(name);
-    }
-    this.notifyListeners(name);
-  }
-  getContainers(name) {
-    const map = this.containers.get(name);
-    if (!map) return [];
-    return Array.from(map, ([instanceId, container]) => ({
-      instanceId,
-      container
-    }));
-  }
-  onContainersChange(name, cb) {
-    const current = this.getContainers(name);
-    if (current.length > 0) {
-      cb(current);
-    }
-    const prev = this.listeners.get(name);
-    if (prev) prev([]);
-    this.listeners.set(name, cb);
-    return () => {
-      if (this.listeners.get(name) === cb) {
-        this.listeners.delete(name);
-      }
-    };
-  }
-  notifyListeners(name) {
-    const cs = this.getContainers(name);
-    this.listeners.get(name)?.(cs);
-  }
-  destroy() {
-    this.containers.clear();
-    this.listeners.clear();
-  }
-};
-var AttachmentContext = createContext8(null);
-
-// src/reality/hooks/useEntityTransform.tsx
-import { useEffect as useEffect16, useRef as useRef7 } from "react";
-
-// src/reality/utils/ResourceRegistry.ts
-var ResourceRegistry = class {
-  resources = /* @__PURE__ */ new Map();
-  add(id, resource) {
-    this.resources.set(id, resource);
-  }
-  remove(id) {
-    this.resources.delete(id);
-  }
-  // Remove the resource by id and destroy it once resolved
-  // This does not cancel in-flight creation; it schedules destruction after resolution
-  removeAndDestroy(id) {
-    const p = this.resources.get(id);
-    if (p) {
-      p.then((spatialObj) => spatialObj.destroy()).catch(() => {
-      });
-    }
-    this.resources.delete(id);
-  }
-  get(id) {
-    return this.resources.get(id);
-  }
-  destroy() {
-    const pending = Array.from(this.resources.values());
-    this.resources.clear();
-    pending.forEach(
-      (promise) => promise.then((spatialObj) => spatialObj.destroy()).catch(() => {
-      })
-    );
-  }
-};
-
-// src/reality/utils/equal.ts
-function shallowEqualVec3(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  return a.x === b.x && a.y === b.y && a.z === b.z;
-}
-function shallowEqualRotation(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  return a.x === b.x && a.y === b.y && a.z === b.z && ("w" in a ? a.w === b.w : true);
-}
-function shallowEqualObject(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  return keysA.every((key) => a[key] === b[key]);
-}
-function shallowEqualArray(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  if (a.length !== b.length) return false;
-  return a.every((val, i) => val === b[i]);
-}
-
-// src/reality/utils/AbortResourceManager.ts
-var AbortResourceManager = class {
-  constructor(signal) {
-    this.signal = signal;
-    signal.addEventListener("abort", () => {
-      this.aborted = true;
-      void this.dispose();
-    });
-  }
-  resources = [];
-  aborted = false;
-  async addResource(factory) {
-    if (this.aborted) throw new DOMException("Aborted", "AbortError");
-    const resource = await factory();
-    if (this.aborted) {
-      await resource.destroy();
-      throw new DOMException("Aborted", "AbortError");
-    }
-    this.resources.push(resource);
-    return resource;
-  }
-  async dispose() {
-    const resources = this.resources.splice(0);
-    for (const r of resources) {
-      try {
-        await r.destroy();
-      } catch (e) {
-        console.error("AbortResourceManager dispose error:", e, r);
-      }
-    }
-  }
-};
-
-// src/reality/hooks/useEntityTransform.tsx
-function useEntityTransform(entity, { position, rotation, scale }) {
-  const last = useRef7({});
-  useEffect16(() => {
-    if (!entity) return;
-    const shouldUpdate = !shallowEqualVec3(last.current.position, position) || !shallowEqualRotation(last.current.rotation, rotation) || !shallowEqualVec3(last.current.scale, scale);
-    if (!shouldUpdate) return;
-    last.current = { position, rotation, scale };
-    const updateTransform = async () => {
-      try {
-        await entity.updateTransform({ position, rotation, scale });
-      } catch (err) {
-        console.error("[useEntityTransform] Failed to update transform:", err);
-      }
-    };
-    updateTransform();
-    return () => {
-    };
-  }, [entity, position, rotation, scale]);
-}
-
-// src/reality/hooks/useEntityEvent.tsx
-import { useEffect as useEffect18, useRef as useRef9 } from "react";
-
-// src/reality/type.ts
-var eventMap = {
-  // tap
-  onSpatialTap: "spatialtap",
-  // drag
-  onSpatialDragStart: "spatialdragstart",
-  onSpatialDrag: "spatialdrag",
-  onSpatialDragEnd: "spatialdragend",
-  // rotate
-  onSpatialRotate: "spatialrotate",
-  onSpatialRotateEnd: "spatialrotateend",
-  // magnify
-  onSpatialMagnify: "spatialmagnify",
-  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 === "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;
-      }
-      if (prop === "translationX") {
-        const type = target.type;
-        if (type === "spatialdrag") {
-          return target.detail?.translation3D?.x ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "translationY") {
-        const type = target.type;
-        if (type === "spatialdrag") {
-          return target.detail?.translation3D?.y ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "translationZ") {
-        const type = target.type;
-        if (type === "spatialdrag") {
-          return target.detail?.translation3D?.z ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "quaternion") {
-        const type = target.type;
-        if (type === "spatialrotate") {
-          return target.detail?.quaternion ?? {
-            x: 0,
-            y: 0,
-            z: 0,
-            w: 1
-          };
-        }
-        return void 0;
-      }
-      if (prop === "magnification") {
-        const type = target.type;
-        if (type === "spatialmagnify") {
-          return target.detail?.magnification ?? 1;
-        }
-        return void 0;
-      }
-      if (prop === "clientX") {
-        const type = target.type;
-        if (type === "spatialtap" || type === "spatialdragstart") {
-          return target.detail?.globalLocation3D?.x ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "clientY") {
-        const type = target.type;
-        if (type === "spatialtap" || type === "spatialdragstart") {
-          return target.detail?.globalLocation3D?.y ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "clientZ") {
-        const type = target.type;
-        if (type === "spatialtap" || type === "spatialdragstart") {
-          return target.detail?.globalLocation3D?.z ?? 0;
-        }
-        return void 0;
-      }
-      const val = target[prop];
-      return typeof val === "function" ? val.bind(target) : val;
-    }
-  });
-}
-var useEntityEvent = ({ instance, ...handlers }) => {
-  const eventsSetRef = useRef9(/* @__PURE__ */ new Set());
-  useEffect18(() => {
-    const entity = instance.entity;
-    if (!entity) return;
-    Object.entries(eventMap).forEach(([reactKey, spatialEvent]) => {
-      const handlerFn = handlers[reactKey];
-      if (!handlerFn) return;
-      const wrapped = (ev) => handlerFn(createEventProxy2(ev, instance));
-      entity.addEvent(spatialEvent, wrapped);
-      eventsSetRef.current.add(reactKey);
-    });
-    return () => {
-    };
-  }, [instance.entity, ...Object.values(handlers)]);
-  useEffect18(() => {
-    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/useRealityEvents.tsx
-import { useEffect as useEffect19, useRef as useRef10 } from "react";
-function createEventProxy3(ev, instance) {
-  return new Proxy(ev, {
-    get(target, prop) {
-      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;
-      }
-      if (prop === "translationX") {
-        const type = target.type;
-        if (type === "spatialdrag") {
-          return target.detail?.translation3D?.x ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "translationY") {
-        const type = target.type;
-        if (type === "spatialdrag") {
-          return target.detail?.translation3D?.y ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "translationZ") {
-        const type = target.type;
-        if (type === "spatialdrag") {
-          return target.detail?.translation3D?.z ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "quaternion") {
-        const type = target.type;
-        if (type === "spatialrotate") {
-          return target.detail?.quaternion ?? {
-            x: 0,
-            y: 0,
-            z: 0,
-            w: 1
-          };
-        }
-        return void 0;
-      }
-      if (prop === "magnification") {
-        const type = target.type;
-        if (type === "spatialmagnify") {
-          return target.detail?.magnification ?? 1;
-        }
-        return void 0;
-      }
-      if (prop === "clientX") {
-        const type = target.type;
-        if (type === "spatialtap" || type === "spatialdragstart") {
-          return target.detail?.globalLocation3D?.x ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "clientY") {
-        const type = target.type;
-        if (type === "spatialtap" || type === "spatialdragstart") {
-          return target.detail?.globalLocation3D?.y ?? 0;
-        }
-        return void 0;
-      }
-      if (prop === "clientZ") {
-        const type = target.type;
-        if (type === "spatialtap" || type === "spatialdragstart") {
-          return target.detail?.globalLocation3D?.z ?? 0;
-        }
-        return void 0;
-      }
-      const val = target[prop];
-      return typeof val === "function" ? val.bind(target) : val;
-    }
-  });
-}
-var useRealityEvents = ({ instance, ...handlers }) => {
-  const eventsSetRef = useRef10(/* @__PURE__ */ new Set());
-  useEffect19(() => {
-    if (!instance) return;
-    Object.entries(eventMap).forEach(([reactKey, spatialEvent]) => {
-      const handlerFn = handlers[reactKey];
-      if (!handlerFn) return;
-      const wrapped = (ev) => handlerFn(createEventProxy3(ev, instance));
-      instance.addEvent(spatialEvent, wrapped);
-      eventsSetRef.current.add(spatialEvent);
-    });
-    return () => {
-      if (instance) {
-        for (let x of eventsSetRef.current) {
-          instance.removeEvent(x);
-        }
-        eventsSetRef.current.clear();
-      }
-    };
-  }, [instance, ...Object.values(handlers)]);
-};
-
-// src/reality/hooks/useEntityId.tsx
-import { useEffect as useEffect20 } from "react";
-var useEntityId = ({ id, entity }) => {
-  const ctx = useRealityContext();
-  useEffect20(() => {
-    if (!id || !entity || !ctx) return;
-    ctx.resourceRegistry.add(id, Promise.resolve(entity));
-    return () => {
-      ctx.resourceRegistry.remove(id);
-    };
-  }, [id, entity, ctx]);
-  return null;
-};
-
-// src/reality/hooks/useEntity.tsx
-import { useEffect as useEffect21, useRef as useRef11 } from "react";
-var useEntity = ({
-  ref,
-  id,
-  position,
-  rotation,
-  scale,
-  enableInput,
-  onSpatialTap,
-  onSpatialDragStart,
-  onSpatialDrag,
-  onSpatialDragEnd,
-  onSpatialRotate,
-  onSpatialRotateEnd,
-  onSpatialMagnify,
-  onSpatialMagnifyEnd,
-  createEntity,
-  recreateKey
-}) => {
-  const ctx = useRealityContext();
-  const parent = useParentContext();
-  const instanceRef = useRef11(new EntityRef(null, ctx));
-  const forceUpdate = useForceUpdate2();
-  useEffect21(() => {
-    if (!ctx) return;
-    const controller = new AbortController();
-    const init = async () => {
-      try {
-        const ent = await createEntity(controller.signal);
-        if (!ent) return;
-        if (controller.signal.aborted) {
-          ent.destroy();
-          return;
-        }
-        await ent.updateTransform({ position, rotation, scale });
-        if (controller.signal.aborted) {
-          ent.destroy();
-          return;
-        }
-        if (parent) {
-          const result = await parent.addEntity(ent);
-          if (!result.success) throw new Error("parent.addEntity failed");
-        } else {
-          const result = await ctx.reality.addEntity(ent);
-          if (!result.success) throw new Error("ctx.reality.addEntity failed");
-        }
-        instanceRef.current?.updateEntity(ent);
-        forceUpdate();
-      } catch (error) {
-        console.error("useEntity init ~ error:", error);
-      }
-    };
-    init();
-    return () => {
-      controller.abort();
-      instanceRef.current?.destroy();
-    };
-  }, [ctx, parent, recreateKey]);
-  useEntityId({ id, entity: instanceRef.current.entity });
-  useEntityTransform(instanceRef.current.entity, { position, rotation, scale });
-  useEntityRef(ref, instanceRef.current);
-  useEntityEvent({
-    instance: instanceRef.current,
-    onSpatialTap,
-    onSpatialDragStart,
-    onSpatialDrag,
-    onSpatialDragEnd,
-    onSpatialRotate,
-    onSpatialRotateEnd,
-    onSpatialMagnify,
-    onSpatialMagnifyEnd
-  });
-  useEffect21(() => {
-    const ent = instanceRef.current.entity;
-    if (!ent) return;
-    if (enableInput !== void 0) {
-      ent.enableInput = !!enableInput;
-    }
-  }, [instanceRef.current.entity, enableInput]);
-  return instanceRef.current.entity;
-};
-
-// src/reality/hooks/useForceUpdate.tsx
-import { useCallback as useCallback8, useState as useState7 } from "react";
-var useForceUpdate2 = () => {
-  const [, setTick] = useState7(0);
-  return useCallback8(() => setTick((tick) => tick + 1), []);
-};
-
-// src/reality/components/BaseEntity.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var BaseEntity = forwardRef10(
-  ({ children, createEntity, recreateKey, ...rest }, ref) => {
-    const ctx = useRealityContext();
-    const entity = useEntity({
-      ...rest,
-      ref,
-      recreateKey,
-      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 forwardRef13 } from "react";
-
-// src/reality/components/GeometryEntity.tsx
-import { forwardRef as forwardRef12, useEffect as useEffect22, useRef as useRef12 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var GeometryEntity = forwardRef12(
-  ({ id, children, name, materials, geometryOptions, createGeometry, ...rest }, ref) => {
-    const ctx = useRealityContext();
-    const entityRef = useRef12(null);
-    const componentRef = useRef12(null);
-    const mutableRef = useRef12({
-      lastSnapshot: null,
-      rebuildGen: 0
-    });
-    useEffect22(() => {
-      const { lastSnapshot } = mutableRef.current;
-      if (!ctx || !entityRef.current || lastSnapshot === null) return;
-      const geometryChanged = !shallowEqualObject(
-        lastSnapshot.geometryOptions,
-        geometryOptions
-      );
-      const materialsChanged = !shallowEqualArray(
-        lastSnapshot.materials,
-        materials
-      );
-      if (!geometryChanged && !materialsChanged) return;
-      mutableRef.current.lastSnapshot = { geometryOptions, materials };
-      mutableRef.current.rebuildGen += 1;
-      const gen = mutableRef.current.rebuildGen;
-      const rebuild = async () => {
-        const entity = entityRef.current;
-        if (!entity) return;
-        try {
-          const oldComponent = componentRef.current;
-          if (oldComponent) {
-            await entity.removeComponent(oldComponent);
-            await oldComponent.destroy();
-            componentRef.current = null;
-            if (gen !== mutableRef.current.rebuildGen) return;
-          }
-          const geometry = await createGeometry(geometryOptions);
-          if (gen !== mutableRef.current.rebuildGen) {
-            await geometry.destroy();
-            return;
-          }
-          const materialList = await Promise.all(
-            materials?.map((mid) => ctx.resourceRegistry.get(mid)).filter(Boolean) ?? []
-          );
-          if (gen !== mutableRef.current.rebuildGen) {
-            await geometry.destroy();
-            return;
-          }
-          const modelComponent = await ctx.session.createModelComponent({
-            mesh: geometry,
-            materials: materialList
-          });
-          if (gen !== mutableRef.current.rebuildGen) {
-            await modelComponent.destroy();
-            await geometry.destroy();
-            return;
-          }
-          await entity.addComponent(modelComponent);
-          componentRef.current = modelComponent;
-        } catch (error) {
-          if (gen === mutableRef.current.rebuildGen) {
-            console.error("GeometryEntity: rebuild failed", error);
-          }
-        }
-      };
-      rebuild();
-    }, [ctx, geometryOptions, materials, createGeometry]);
-    return /* @__PURE__ */ jsx14(
-      BaseEntity,
-      {
-        ...rest,
-        id,
-        ref,
-        createEntity: async (ctx2, signal) => {
-          const manager = new AbortResourceManager(signal);
-          try {
-            const ent = await manager.addResource(
-              () => ctx2.session.createEntity({ id, name })
-            );
-            const geometry = await manager.addResource(
-              () => createGeometry(geometryOptions)
-            );
-            const materialList = await Promise.all(
-              materials?.map((id2) => ctx2.resourceRegistry.get(id2)).filter(Boolean) ?? []
-            );
-            const modelComponent = await manager.addResource(
-              () => ctx2.session.createModelComponent({
-                mesh: geometry,
-                materials: materialList
-              })
-            );
-            await ent.addComponent(modelComponent);
-            entityRef.current = ent;
-            componentRef.current = modelComponent;
-            mutableRef.current.lastSnapshot = { geometryOptions, materials };
-            return ent;
-          } catch (error) {
-            await manager.dispose();
-            return null;
-          }
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/BoxEntity.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var BoxEntity = forwardRef13(
-  ({ children, ...props }, ref) => {
-    const ctx = useRealityContext();
-    return /* @__PURE__ */ jsx15(
-      GeometryEntity,
-      {
-        ...props,
-        ref,
-        createGeometry: (options) => ctx.session.createBoxGeometry(options),
-        geometryOptions: {
-          width: props.width,
-          height: props.height,
-          depth: props.depth,
-          cornerRadius: props.cornerRadius,
-          splitFaces: props.splitFaces
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/UnlitMaterial.tsx
-import { useEffect as useEffect23, useRef as useRef13 } from "react";
-var UnlitMaterial = ({
-  children,
-  ...options
-}) => {
-  const ctx = useRealityContext();
-  const materialRef = useRef13();
-  const isInitializedRef = useRef13(false);
-  useEffect23(() => {
-    if (!ctx) return;
-    const { session, reality, resourceRegistry } = ctx;
-    const init = async () => {
-      const materialPromise = session.createUnlitMaterial(options);
-      resourceRegistry.add(options.id, materialPromise);
-      try {
-        const mat = await materialPromise;
-        materialRef.current = mat;
-        isInitializedRef.current = true;
-      } catch (error) {
-        console.error(" ~ UnlitMaterial ~ error:", error);
-      }
-    };
-    init();
-    return () => {
-      resourceRegistry.removeAndDestroy(options.id);
-      materialRef.current = void 0;
-      isInitializedRef.current = false;
-    };
-  }, [ctx]);
-  useEffect23(() => {
-    if (!isInitializedRef.current || !materialRef.current) return;
-    const updates = {};
-    if (options.color !== void 0) updates.color = options.color;
-    if (options.transparent !== void 0)
-      updates.transparent = options.transparent;
-    if (options.opacity !== void 0) updates.opacity = options.opacity;
-    if (Object.keys(updates).length > 0) {
-      materialRef.current.updateProperties(updates);
-    }
-  }, [options.color, options.transparent, options.opacity]);
-  return null;
-};
-
-// src/reality/components/SphereEntity.tsx
-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__ */ jsx16(
-      GeometryEntity,
-      {
-        ...props,
-        ref,
-        createGeometry: (options) => ctx.session.createSphereGeometry(options),
-        geometryOptions: {
-          radius: props.radius
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/ConeEntity.tsx
-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__ */ jsx17(
-      GeometryEntity,
-      {
-        ...props,
-        ref,
-        createGeometry: (options) => ctx.session.createConeGeometry(options),
-        geometryOptions: {
-          radius: props.radius,
-          height: props.height
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/CylinderEntity.tsx
-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__ */ jsx18(
-      GeometryEntity,
-      {
-        ...props,
-        ref,
-        createGeometry: (options) => ctx.session.createCylinderGeometry(options),
-        geometryOptions: {
-          radius: props.radius,
-          height: props.height
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/PlaneEntity.tsx
-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__ */ jsx19(
-      GeometryEntity,
-      {
-        ...props,
-        ref,
-        createGeometry: (options) => ctx.session.createPlaneGeometry(options),
-        geometryOptions: {
-          width: props.width,
-          height: props.height,
-          cornerRadius: props.cornerRadius
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/SceneGraph.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var SceneGraph = ({ children }) => {
-  return /* @__PURE__ */ jsx20(ParentContext.Provider, { value: null, children });
-};
-
-// src/reality/components/ModelAsset.tsx
-import { useEffect as useEffect24, useRef as useRef14 } from "react";
-var resolveAssetUrl = (url) => {
-  if (url.startsWith("http://") || url.startsWith("https://")) {
-    return url;
-  }
-  return new URL(url, window.location.href).href;
-};
-var ModelAsset = ({ children, ...options }) => {
-  const ctx = useRealityContext();
-  const materialRef = useRef14();
-  useEffect24(() => {
-    const controller = new AbortController();
-    if (!ctx) return;
-    const { session, reality, resourceRegistry } = ctx;
-    const init = async () => {
-      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();
-          return;
-        }
-        materialRef.current = mat;
-        options.onLoad?.();
-      } catch (error) {
-        options.onError?.(error);
-      }
-    };
-    init();
-    return () => {
-      controller.abort();
-      materialRef.current?.destroy();
-    };
-  }, [ctx]);
-  return null;
-};
-
-// src/reality/components/ModelEntity.tsx
-import { forwardRef as forwardRef18, useEffect as useEffect25, useRef as useRef15 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ModelEntity = forwardRef18(
-  ({ id, model, children, name, materials, ...rest }, ref) => {
-    const ctx = useRealityContext();
-    const entityRef = useRef15(null);
-    const lastMaterialsRef = useRef15(void 0);
-    useEffect25(() => {
-      if (!ctx || !entityRef.current) return;
-      const next = materials ?? [];
-      const prev = lastMaterialsRef.current ?? [];
-      if (shallowEqualArray(prev, next)) return;
-      lastMaterialsRef.current = next;
-      const apply = async () => {
-        try {
-          const materialList = (await Promise.all(
-            next.map((mid) => ctx.resourceRegistry.get(mid))
-          )).filter(Boolean);
-          if (entityRef.current) {
-            await entityRef.current.setMaterials(materialList);
-          }
-        } catch (error) {
-          console.error("ModelEntity: failed to set materials", error);
-        }
-      };
-      apply();
-    }, [ctx, materials]);
-    return /* @__PURE__ */ jsx21(
-      BaseEntity,
-      {
-        ...rest,
-        id,
-        ref,
-        recreateKey: model,
-        createEntity: async (ctx2, signal) => {
-          try {
-            const modelAsset = await ctx2.resourceRegistry.get(model);
-            if (!modelAsset)
-              throw new Error(`ModelEntity: model not found ${model}`);
-            if (signal.aborted) return null;
-            const ent = await ctx2.session.createSpatialModelEntity(
-              {
-                modelAssetId: modelAsset.id,
-                name
-              },
-              { id, name }
-            );
-            entityRef.current = ent;
-            if (materials && materials.length > 0) {
-              const materialList = (await Promise.all(
-                materials.map(
-                  (mid) => ctx2.resourceRegistry.get(mid)
-                )
-              )).filter(Boolean);
-              if (materialList.length > 0 && !signal.aborted) {
-                await ent.setMaterials(materialList);
-              }
-            }
-            lastMaterialsRef.current = materials ?? [];
-            return ent;
-          } catch (error) {
-            return null;
-          }
-        },
-        children
-      }
-    );
-  }
-);
-
-// src/reality/components/Reality.tsx
-import {
-  forwardRef as forwardRef19,
-  useCallback as useCallback9,
-  useEffect as useEffect26,
-  useRef as useRef16,
-  useState as useState8
-} from "react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
-var Reality = forwardRef19(
-  function RealityBase({ children, ...inProps }, ref) {
-    const insideAttachment = useInsideAttachment();
-    if (insideAttachment) {
-      console.warn(
-        "[WebSpatial] Reality cannot be used inside AttachmentAsset."
-      );
-      return null;
-    }
-    const {
-      onSpatialTap,
-      onSpatialDragStart,
-      onSpatialDrag,
-      onSpatialDragEnd,
-      onSpatialRotate,
-      onSpatialRotateEnd,
-      onSpatialMagnify,
-      onSpatialMagnifyEnd,
-      ...props
-    } = inProps;
-    const ctxRef = useRef16(null);
-    const creationId = useRef16(0);
-    const [isReady, setIsReady] = useState8(false);
-    const cleanupReality = useCallback9(() => {
-      ctxRef.current?.attachmentRegistry.destroy();
-      ctxRef.current?.resourceRegistry.destroy();
-      ctxRef.current?.reality.destroy();
-      ctxRef.current = null;
-      setIsReady(false);
-    }, []);
-    useEffect26(() => {
-      return () => {
-        creationId.current++;
-        cleanupReality();
-      };
-    }, [cleanupReality]);
-    const createReality = useCallback9(async () => {
-      const id = ++creationId.current;
-      const resourceRegistry = new ResourceRegistry();
-      const attachmentRegistry = new AttachmentRegistry();
-      const session = await getSession();
-      if (!session) {
-        resourceRegistry.destroy();
-        attachmentRegistry.destroy();
-        return null;
-      }
-      const reality = await session.createSpatializedDynamic3DElement();
-      const isCancelled = () => id !== creationId.current;
-      if (isCancelled()) {
-        resourceRegistry.destroy();
-        attachmentRegistry.destroy();
-        reality.destroy();
-        return null;
-      }
-      try {
-        const result = await session.getSpatialScene().addSpatializedElement(reality);
-        if (!result.success || isCancelled()) {
-          resourceRegistry.destroy();
-          attachmentRegistry.destroy();
-          reality.destroy();
-          return null;
-        }
-        cleanupReality();
-        ctxRef.current = {
-          session,
-          reality,
-          resourceRegistry,
-          attachmentRegistry
-        };
-        setIsReady(true);
-        return reality;
-      } catch (err) {
-        console.error("[createReality] failed", err);
-        resourceRegistry.destroy();
-        attachmentRegistry.destroy();
-        reality.destroy();
-        return null;
-      }
-    }, [cleanupReality]);
-    const content = useCallback9(() => /* @__PURE__ */ jsx22(Fragment3, {}), []);
-    useRealityEvents({
-      instance: ctxRef.current?.reality ?? null,
-      onSpatialTap,
-      onSpatialDragStart,
-      onSpatialDrag,
-      onSpatialDragEnd,
-      onSpatialRotate,
-      onSpatialRotateEnd,
-      onSpatialMagnify,
-      onSpatialMagnifyEnd
-    });
-    return /* @__PURE__ */ jsxs3(RealityContext.Provider, { value: ctxRef.current, children: [
-      /* @__PURE__ */ jsx22(
-        SpatializedContainer,
-        {
-          component: "div",
-          ref,
-          createSpatializedElement: createReality,
-          spatializedContent: content,
-          ...props
-        }
-      ),
-      isReady && children
-    ] });
-  }
-);
-
-// src/reality/components/AttachmentAsset.tsx
-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 = ({
-  name,
-  children
-}) => {
-  const ctx = useRealityContext();
-  const [containers, setContainers] = useState9([]);
-  useEffect27(() => {
-    if (!ctx) return;
-    return ctx.attachmentRegistry.onContainersChange(name, setContainers);
-  }, [ctx, name]);
-  if (!containers.length) return null;
-  return /* @__PURE__ */ jsx23(InsideAttachmentContext.Provider, { value: true, children: containers.map(
-    ({ instanceId, container }) => createPortal3(children, container, instanceId)
-  ) });
-};
-
-// src/reality/components/AttachmentEntity.tsx
-import { useEffect as useEffect28, useRef as useRef17, useState as useState10 } from "react";
-var instanceCounter = 0;
-var AttachmentEntity = ({
-  attachment: attachmentName,
-  position,
-  size
-}) => {
-  const ctx = useRealityContext();
-  const parent = useParentContext();
-  const attachmentRef = useRef17(null);
-  const parentIdRef = useRef17(null);
-  const instanceIdRef = useRef17(`att_${++instanceCounter}`);
-  const attachmentNameRef = useRef17(attachmentName);
-  const [childWindow, setChildWindow] = useState10(null);
-  useEffect28(() => {
-    if (!ctx || !parent) return;
-    if (attachmentRef.current) return;
-    const parentId = parent.id;
-    parentIdRef.current = parentId;
-    let cancelled = false;
-    const init = async () => {
-      try {
-        const att = await ctx.session.createAttachmentEntity({
-          parentEntityId: parentId,
-          position: position ?? [0, 0, 0],
-          size,
-          ownerViewId: ctx.reality.id
-        });
-        if (cancelled) {
-          att.destroy();
-          return;
-        }
-        const windowProxy = att.getWindowProxy();
-        setOpenWindowStyle(windowProxy);
-        windowProxy.document.body.style.display = "block";
-        windowProxy.document.body.style.minWidth = "100%";
-        windowProxy.document.body.style.maxWidth = "100%";
-        windowProxy.document.body.style.minHeight = "100%";
-        const viewport = windowProxy.document.querySelector(
-          'meta[name="viewport"]'
-        );
-        if (!viewport) {
-          const meta = windowProxy.document.createElement("meta");
-          meta.name = "viewport";
-          meta.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
-          windowProxy.document.head.appendChild(meta);
-        }
-        const base = windowProxy.document.createElement("base");
-        base.href = document.baseURI;
-        windowProxy.document.head.appendChild(base);
-        attachmentRef.current = att;
-        setChildWindow(windowProxy);
-        ctx.attachmentRegistry.addContainer(
-          attachmentNameRef.current,
-          instanceIdRef.current,
-          att.getContainer()
-        );
-      } catch (error) {
-        console.error("[AttachmentEntity] init error:", error);
-      }
-    };
-    init();
-    return () => {
-      cancelled = true;
-      const att = attachmentRef.current;
-      if (att) {
-        ctx.attachmentRegistry.removeContainer(
-          attachmentNameRef.current,
-          instanceIdRef.current
-        );
-        att.destroy();
-        attachmentRef.current = null;
-        setChildWindow(null);
-      }
-    };
-  }, [ctx, parent]);
-  useEffect28(() => {
-    if (!ctx) return;
-    const att = attachmentRef.current;
-    const prevName = attachmentNameRef.current;
-    if (att && prevName !== attachmentName) {
-      ctx.attachmentRegistry.removeContainer(prevName, instanceIdRef.current);
-      ctx.attachmentRegistry.addContainer(
-        attachmentName,
-        instanceIdRef.current,
-        att.getContainer()
-      );
-      attachmentNameRef.current = attachmentName;
-    } else {
-      attachmentNameRef.current = attachmentName;
-    }
-  }, [ctx, attachmentName]);
-  useSyncHeadStyles(childWindow, { subtree: false });
-  useEffect28(() => {
-    if (!attachmentRef.current) return;
-    attachmentRef.current.update({ position, size });
-  }, [position?.[0], position?.[1], position?.[2], size?.width, size?.height]);
-  return null;
-};
-
-// src/reality/components/Material.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-var Material = (props) => {
-  if (props.type === "unlit") {
-    const { type, ...rest } = props;
-    return /* @__PURE__ */ jsx24(UnlitMaterial, { ...rest });
-  }
-  return null;
-};
-
-// src/Model.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var spatial2 = new Spatial();
-function ModelBase(props, ref) {
-  const insideAttachment = useInsideAttachment();
-  const { "enable-xr": enableXR, ...restProps } = props;
-  if (!enableXR || !spatial2.runInSpatialWeb() || insideAttachment) {
-    const {
-      onSpatialTap,
-      onSpatialDragStart,
-      onSpatialDrag,
-      onSpatialDragEnd,
-      onSpatialRotate,
-      onSpatialRotateEnd,
-      onSpatialMagnify,
-      onSpatialMagnifyEnd,
-      spatialEventOptions: _spatialEventOptions,
-      ...modelProps
-    } = restProps;
-    return /* @__PURE__ */ jsx25("model", { ref, ...modelProps });
-  }
-  return /* @__PURE__ */ jsx25(SpatializedStatic3DElementContainer, { ref, ...restProps });
-}
-var Model = withSSRSupported(forwardRef20(ModelBase));
-Model.displayName = "Model";
-
-// src/useMetrics.tsx
-import { useSyncExternalStore } from "react";
-function useMetrics() {
-  useSyncExternalStore(PhysicalMetrics.subscribe, PhysicalMetrics.getValue);
-  const { pointToPhysical, physicalToPoint } = PhysicalMetrics;
-  return { pointToPhysical, physicalToPoint };
-}
-
-// src/jsx/jsx-shared.ts
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
-import reactJSXRuntime from "react/jsx-runtime";
-import { createElement as reactCreateElement } from "react";
-var attributeFlag = "enable-xr";
-var styleFlag = "enableXr";
-var classFlag = "__enableXr__";
-var xrMonitorFlag = "enable-xr-monitor";
-function replaceToSpatialPrimitiveType(type, props) {
-  if (type === Model) {
-    return type;
-  }
-  const propsObject = props;
-  if (attributeFlag in propsObject) {
-    delete propsObject[attributeFlag];
-    return withSpatialized2DElementContainer(type);
-  }
-  if (xrMonitorFlag in propsObject) {
-    delete propsObject[xrMonitorFlag];
-    return withSpatialMonitor(type);
-  }
-  if (propsObject && propsObject.style && styleFlag in propsObject.style) {
-    delete propsObject.style[styleFlag];
-    return withSpatialized2DElementContainer(type);
-  }
-  if (propsObject && typeof propsObject.className === "string") {
-    const originalClassNames = propsObject.className.split(" ");
-    const idx = originalClassNames.indexOf(classFlag);
-    if (idx !== -1) {
-      originalClassNames.splice(idx, 1);
-      propsObject.className = originalClassNames.join(" ");
-      return withSpatialized2DElementContainer(type);
-    }
-  }
-  return type;
-}
-function createElement(...args) {
-  const [type, props, ...rest] = args;
-  const newType = replaceToSpatialPrimitiveType(type, props);
-  return reactCreateElement(newType, props, ...rest);
-}
-
-// src/utils/convertCoordinate.ts
-function resolveSpatialObjectId(target) {
-  if (typeof window !== "undefined" && target === window) {
-    const scene = getSession()?.getSpatialScene();
-    return scene?.id ?? "";
-  }
-  const maybeEntity = target;
-  if (maybeEntity && typeof maybeEntity === "object" && "entity" in maybeEntity) {
-    return maybeEntity.entity?.id ?? null;
-  }
-  const dom = target?.__raw ?? target;
-  if (dom && typeof dom === "object") {
-    const spatializedElement = dom.__spatializedElement ?? dom.__innerSpatializedElement?.();
-    if (spatializedElement && spatializedElement.id) {
-      return spatializedElement.id;
-    }
-  }
-  return null;
-}
-async function convertCoordinate(position, { from, to }) {
-  try {
-    const fromId = resolveSpatialObjectId(from);
-    const toId = resolveSpatialObjectId(to);
-    if (fromId === null || toId === null) {
-      console.warn(
-        "convertCoordinate error: from or to is not a valid coordinate convertible"
-      );
-      return position;
-    }
-    const spatialScene = getSession()?.getSpatialScene();
-    if (!spatialScene) return position;
-    const ret = await spatialScene.convertCoordinate(position, fromId, toId);
-    return ret ?? position;
-  } catch (error) {
-    console.warn("convertCoordinate error:", error);
-    return position;
-  }
-}
-
-// src/index.ts
-var version = "1.6.1";
-if (typeof window !== "undefined") {
-  initPolyfill();
-}
-export {
-  AttachmentAsset,
-  AttachmentEntity,
-  BoxEntity as Box,
-  BoxEntity,
-  ConeEntity as Cone,
-  ConeEntity,
-  CylinderEntity as Cylinder,
-  CylinderEntity,
-  Entity,
-  Material,
-  Model,
-  ModelAsset,
-  ModelEntity,
-  PlaneEntity as Plane,
-  PlaneEntity,
-  Reality,
-  SSRProvider,
-  SceneGraph,
-  SpatialMonitor,
-  Spatialized2DElementContainer,
-  SpatializedContainer,
-  SpatializedStatic3DElementContainer,
-  SphereEntity as Sphere,
-  SphereEntity,
-  UnlitMaterial,
-  SceneGraph as World,
-  convertCoordinate,
-  createElement,
-  enableDebugTool,
-  eventMap,
-  initPolyfill,
-  initScene,
-  useMetrics,
-  version,
-  withSpatialMonitor,
-  withSpatialized2DElementContainer
-};
-//# sourceMappingURL=index.js.map