@webspatial/react-sdk 0.0.4 → 0.0.5

package/dist/jsx/jsx-dev-runtime.mjs

@@ -0,0 +1,3445 @@
+// src/spatial-react-components/SpatialPrimitive.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/spatial-react-components/primitives.ts
+var primitives = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+  // SVG
+  "circle",
+  "clipPath",
+  "defs",
+  "ellipse",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "stop",
+  "svg",
+  "text",
+  "tspan"
+];
+
+// src/spatial-react-components/SpatialReactComponent/SpatialReactComponent.tsx
+import { forwardRef as forwardRef2, useMemo as useMemo2, useContext as useContext4 } from "react";
+
+// src/utils/getSession.ts
+import { Spatial } from "@webspatial/core-sdk";
+var spatial = null;
+var _currentSession = null;
+function getSession() {
+  if ("false") return null;
+  if (!spatial) {
+    spatial = new Spatial();
+  }
+  if (!spatial.isSupported()) {
+    return null;
+  }
+  if (_currentSession) {
+    return _currentSession;
+  }
+  _currentSession = spatial.requestSession();
+  return _currentSession;
+}
+
+// src/spatial-react-components/SpatialReactComponent/StandardInstance.tsx
+import {
+  useRef,
+  useLayoutEffect,
+  useEffect,
+  useContext,
+  forwardRef
+} from "react";
+
+// src/spatial-react-components/hooks/useForceUpdate.ts
+import { useState } from "react";
+function useForceUpdate() {
+  const [, setToggle] = useState(false);
+  return () => setToggle((toggle) => !toggle);
+}
+
+// src/spatial-react-components/SpatialReactComponent/SpatialIsStandardInstanceContext.ts
+import { createContext } from "react";
+var SpatialIsStandardInstanceContext = createContext(
+  null
+);
+
+// src/spatial-react-components/SpatialReactComponent/SpatialReactContext.ts
+import { createContext as createContext2 } from "react";
+
+// src/spatial-react-components/SpatialReactComponent/const.ts
+var SpatialID = "data-spatial-id";
+
+// src/spatial-react-components/SpatialReactComponent/SpatialReactContext.ts
+var SpatialReactContextObject = class {
+  debugName;
+  constructor(debugName) {
+    this.debugName = debugName;
+  }
+  dom = null;
+  domSpatialId = null;
+  fns = {};
+  // cache dom for each spatialId
+  spatialId2dom = {};
+  spatialId2parentSpatialDom = {};
+  // layer : [standardInstance sequence, portalInstance sequence]
+  layerSequences = {};
+  getSpatialID(layer, isInStandardInstance, debugName = "") {
+    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 = `${debugName}_${layer}_${sequenceId}`;
+    return spatialId;
+  }
+  onDomChange(spatialId, fn) {
+    this.fns[spatialId] = fn;
+    if (this.dom) {
+      fn();
+    }
+  }
+  offDomChange(spatialId) {
+    delete this.fns[spatialId];
+    delete this.spatialId2dom[spatialId];
+    delete this.spatialId2parentSpatialDom[spatialId];
+  }
+  notifyDomChange(dom) {
+    this.dom = dom;
+    this.domSpatialId = dom.getAttribute(SpatialID);
+    Object.values(this.fns).forEach((fn) => fn());
+  }
+  querySpatialDom(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];
+  }
+  queryParentSpatialDom(spatialId) {
+    if (this.domSpatialId === spatialId) {
+      return null;
+    }
+    if (this.spatialId2parentSpatialDom[spatialId]) {
+      return this.spatialId2parentSpatialDom[spatialId];
+    }
+    let spatialDom = this.querySpatialDom(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;
+  }
+  // Used for CSSModel3D
+  // layer : [standardInstance sequence, portalInstance sequence]
+  subDivLayerSequences = {};
+  subDivEventHandlers = {};
+  getSubDivSpatialID(layer, isInStandardInstance, prefix = "") {
+    if (this.subDivLayerSequences[layer] === void 0) {
+      this.subDivLayerSequences[layer] = [0, 0];
+    }
+    const idx = isInStandardInstance ? 0 : 1;
+    const sequenceId = this.subDivLayerSequences[layer][idx];
+    this.subDivLayerSequences[layer][idx] = sequenceId + 1;
+    const spatialId = `${prefix}_${layer}_${sequenceId}`;
+    return spatialId;
+  }
+  onSubDivEvent(subSpatialId, eventHandler) {
+    this.subDivEventHandlers[subSpatialId] = eventHandler;
+  }
+  offSubDivEvent(subSpatialId) {
+    delete this.subDivEventHandlers[subSpatialId];
+  }
+  notifySubDivEvent(subSpatialId, args) {
+    const eventHandler = this.subDivEventHandlers[subSpatialId];
+    if (eventHandler) {
+      eventHandler(args);
+    }
+  }
+};
+var SpatialReactContext = createContext2(null);
+
+// src/spatial-react-components/SpatialReactComponent/StandardInstance.tsx
+import { jsx } from "react/jsx-runtime";
+function useDetectDomRectChange() {
+  const ref = useRef(null);
+  const forceUpdate = useForceUpdate();
+  const spatialReactContextObject = useContext(SpatialReactContext);
+  useLayoutEffect(() => {
+    ref.current && spatialReactContextObject?.notifyDomChange(ref.current);
+  });
+  useEffect(() => {
+    if (!ref.current || !spatialReactContextObject) {
+      console.warn(
+        "Ref is not attached to the DOM or spatialReactContextObject is not available"
+      );
+      return;
+    }
+    const handleResize = () => {
+      forceUpdate();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [spatialReactContextObject]);
+  useEffect(() => {
+    if (!ref.current) {
+      console.warn("Ref is not attached to the DOM");
+      return;
+    }
+    let ro = new ResizeObserver((elements) => {
+      forceUpdate();
+    });
+    ro.observe(ref.current);
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    if (!ref.current) {
+      console.warn("Ref is not attached to the DOM");
+      return;
+    }
+    let ro = new MutationObserver((elements) => {
+      forceUpdate();
+    });
+    ro.observe(ref.current, {
+      attributeFilter: ["class", "style"],
+      subtree: true
+    });
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  return ref;
+}
+var StandardInstance = forwardRef(function(inProps, refIn) {
+  const { El, style: inStyle, debugShowStandardInstance, ...props } = inProps;
+  const extraStyle = {
+    visibility: debugShowStandardInstance ? void 0 : "hidden",
+    transition: "none"
+  };
+  const style = { ...inStyle, ...extraStyle };
+  var ref = useDetectDomRectChange();
+  const proxyRef = new Proxy(ref, {
+    get(target, prop, receiver) {
+      return Reflect.get(target, prop, receiver);
+    },
+    set(target, prop, value, receiver) {
+      if (prop === "current") {
+        const domElement = value;
+        if (refIn) {
+          if (typeof refIn === "function") {
+            refIn(domElement);
+          } else {
+            refIn.current = domElement;
+          }
+        }
+      }
+      return Reflect.set(target, prop, value, receiver);
+    }
+  });
+  return /* @__PURE__ */ jsx(SpatialIsStandardInstanceContext.Provider, { value: true, children: /* @__PURE__ */ jsx(El, { "data-standardinstance": true, ref: proxyRef, style, ...props }) });
+});
+StandardInstance.displayName = "StandardInstance";
+
+// src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
+import {
+  useRef as useRef3,
+  useCallback,
+  useEffect as useEffect3,
+  useState as useState2,
+  useContext as useContext3,
+  useMemo
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/spatial-react-components/SpatialReactComponent/usePortalContainer.tsx
+import { useContext as useContext2, useRef as useRef2, useEffect as useEffect2 } from "react";
+
+// src/spatial-react-components/SpatialReactComponent/SpatialWindowManager.ts
+var SpatialWindowManager = class {
+  initPromise;
+  entity;
+  webview;
+  window = null;
+  setDebugName(debugName) {
+    this.entity?._setName(debugName);
+  }
+  async initInternal(url) {
+    if ("false") return;
+    this.entity = await getSession().createEntity();
+    this.webview = await getSession().createWindowComponent();
+    await this.webview.loadURL(url);
+    await this.entity.setCoordinateSpace("Dom");
+    await this.webview.setScrollWithParent(true);
+    await this.webview.setScrollEnabled(false);
+    await this.entity.setComponent(this.webview);
+    var wc = await getSession().getCurrentWindowComponent();
+    var ent = await wc.getEntity();
+    await this.entity.setParent(ent);
+  }
+  async initInternalFromWindow(parentSpatialWindowManager) {
+    if ("false") return;
+    var w = await getSession().createWindowContext();
+    this.window = w;
+    this.entity = await getSession().createEntity();
+    this.webview = await getSession().createWindowComponent();
+    await this.webview.setFromWindow(w);
+    await this.entity.setCoordinateSpace("Dom");
+    await this.webview.setScrollWithParent(true);
+    await this.webview.setScrollEnabled(false);
+    await this.entity.setComponent(this.webview);
+    if (parentSpatialWindowManager !== void 0) {
+      if (parentSpatialWindowManager !== null) {
+        await parentSpatialWindowManager.initPromise;
+        this.entity.setParent(parentSpatialWindowManager.entity);
+      } else {
+        var wc = await getSession().getCurrentWindowComponent();
+        var ent = await wc.getEntity();
+        await this.entity.setParent(ent);
+      }
+    }
+  }
+  async init(url) {
+    this.initPromise = this.initInternal(url);
+    await this.initPromise;
+  }
+  async initFromWidow(parentSpatialWindowManager) {
+    this.initPromise = this.initInternalFromWindow(parentSpatialWindowManager);
+    await this.initPromise;
+  }
+  async resize(rect, offset, rotation = { x: 0, y: 0, z: 0, w: 1 }, scale = { x: 1, y: 1, z: 1 }, rotationOrigin = { x: 0, y: 0, z: 0 }) {
+    let targetPosX = rect.x + rect.width / 2;
+    let targetPosY = rect.y + rect.height / 2 + window.scrollY;
+    if (!this.webview) {
+      return;
+    }
+    var entity = this.entity;
+    entity.transform.position.x = targetPosX + (offset ? offset.x : 0);
+    entity.transform.position.y = targetPosY + (offset ? offset.y : 0);
+    entity.transform.position.z = offset ? offset.z : 0;
+    entity.transform.orientation.x = rotation.x;
+    entity.transform.orientation.y = rotation.y;
+    entity.transform.orientation.z = rotation.z;
+    entity.transform.orientation.w = rotation.w;
+    entity.transform.scale.x = scale.x;
+    entity.transform.scale.y = scale.y;
+    entity.transform.scale.z = scale.z;
+    await entity.updateTransform();
+    var webview = this.webview;
+    await webview.setResolution(rect.width, rect.height);
+    await webview.setRotationAnchor(rotationOrigin);
+  }
+  async setZIndex(zIndex) {
+    let entity = this.entity;
+    entity.updateZIndex(zIndex);
+  }
+  async destroy() {
+    if (this.initPromise) {
+      await this.initPromise;
+      this.entity?.destroy();
+      this.webview?.destroy();
+      this.window = null;
+    }
+  }
+};
+
+// src/spatial-react-components/SpatialReactComponent/SpatialWindowManagerContext.ts
+import { createContext as createContext3 } from "react";
+var SpatialWindowManagerContext = createContext3(null);
+
+// src/spatial-react-components/SpatialReactComponent/usePortalContainer.tsx
+function usePortalContainer(options) {
+  const isStandard = useContext2(SpatialIsStandardInstanceContext);
+  const parentSpatialWindowManager = useContext2(SpatialWindowManagerContext);
+  const forceUpdate = useForceUpdate();
+  const spatialWindowManagerRef = useRef2();
+  useEffect2(() => {
+    let isDestroyed = false;
+    let spawnedResult;
+    async function asyncCreatePortalContainer() {
+      const session = getSession();
+      let windowMgr = new SpatialWindowManager();
+      await windowMgr.initFromWidow(parentSpatialWindowManager);
+      if (isDestroyed) {
+        windowMgr.destroy();
+        return;
+      }
+      spawnedResult = await options.onContainerSpawned(windowMgr);
+      if (isDestroyed) {
+        options.onContainerDestroyed(windowMgr, spawnedResult);
+        windowMgr.destroy();
+        return;
+      }
+      spatialWindowManagerRef.current = windowMgr;
+      forceUpdate();
+    }
+    if (isStandard !== true) {
+      asyncCreatePortalContainer();
+    }
+    return () => {
+      isDestroyed = true;
+      const spatialWindowManager = spatialWindowManagerRef.current;
+      if (spatialWindowManager) {
+        options.onContainerDestroyed(spatialWindowManager, spawnedResult);
+        spatialWindowManager.destroy();
+      }
+    };
+  }, []);
+  return [spatialWindowManagerRef.current];
+}
+
+// src/spatial-react-components/SpatialReactComponent/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"
+  ];
+  var props = {};
+  for (var cssName of propNames) {
+    if (computedStyle[cssName]) {
+      props[cssName] = computedStyle[cssName];
+    }
+  }
+  return props;
+}
+function domRect2rectType(from) {
+  return {
+    x: from.x,
+    y: from.y,
+    width: from.width,
+    height: from.height
+  };
+}
+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;
+}
+
+// src/spatial-react-components/SpatialReactComponent/SpatialDebugNameContext.ts
+import { createContext as createContext4 } from "react";
+var SpatialDebugNameContext = createContext4("");
+
+// src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function renderJSXPortalInstance(inProps, elWidth, elHeight, inheritedPortalStyle, className) {
+  const { El, style: inStyle = {}, className: _, ...props } = inProps;
+  const extraStyle = {
+    visibility: "visible",
+    position: "",
+    top: "0px",
+    left: "0px",
+    margin: "0px",
+    marginLeft: "0px",
+    marginRight: "0px",
+    marginTop: "0px",
+    marginBottom: "0px",
+    borderRadius: "0px",
+    overflow: ""
+  };
+  const elWHStyle = {
+    width: `${elWidth}px`,
+    height: `${elHeight}px`
+  };
+  const style = {
+    ...inStyle,
+    ...inheritedPortalStyle,
+    ...extraStyle,
+    ...elWHStyle
+  };
+  return /* @__PURE__ */ jsx2(El, { style, className, ...props });
+}
+function setOpenWindowStyle(openedWindow) {
+  openedWindow.document.documentElement.style.cssText += document.documentElement.style.cssText;
+  openedWindow.document.documentElement.style.backgroundColor = "transparent";
+  openedWindow.document.body.style.margin = "0px";
+}
+function handleOpenWindowDocumentClick(openedWindow) {
+  openedWindow.document.onclick = function(e) {
+    let element = e.target;
+    let found = false;
+    while (!found) {
+      if (element && element.tagName == "A") {
+        if (!element.onclick) {
+          window.location.href = element.href;
+        }
+        return false;
+      }
+      if (element && element.parentElement) {
+        element = element.parentElement;
+      } else {
+        break;
+      }
+    }
+  };
+}
+function asyncLoadStyleToChildWindow(childWindow, n, debugName) {
+  return new Promise((resolve) => {
+    n.href += "?uniqueURL=" + Math.random();
+    n.onerror = function() {
+      console.error(
+        "Failed to load style link",
+        debugName,
+        n.href
+      );
+      resolve(false);
+    };
+    n.onload = function() {
+      resolve(true);
+    };
+    childWindow.document.head.appendChild(n);
+  });
+}
+async function syncParentHeadToChild(childWindow, debugName) {
+  const styleLoadedPromises = [];
+  for (let i = document.head.children.length - 1; i >= 0; i--) {
+    let n = document.head.children[i].cloneNode(true);
+    if (n.nodeName == "LINK" && n.rel == "stylesheet" && n.href) {
+      const promise = asyncLoadStyleToChildWindow(
+        childWindow,
+        n,
+        debugName
+      );
+      styleLoadedPromises.push(promise);
+    } else {
+      childWindow.document.head.appendChild(n);
+    }
+  }
+  if (debugName) {
+    childWindow.document.title = debugName;
+  }
+  return Promise.all(styleLoadedPromises);
+}
+async function syncHeaderStyle(openedWindow, debugName) {
+  await syncParentHeadToChild(openedWindow, debugName);
+  const headObserver = new MutationObserver((mutations) => {
+    syncParentHeadToChild(openedWindow, debugName);
+  });
+  headObserver.observe(document.head, { childList: true, subtree: true });
+  return headObserver;
+}
+function syncDefaultSpatialStyle(openedWindow, debugName) {
+  const styleElement = document.createElement("style");
+  styleElement.type = "text/css";
+  styleElement.innerHTML = " .xr-spatial-default {  --xr-back: 0.001; --xr-background-material: none  } ";
+  openedWindow.document.head.appendChild(styleElement);
+}
+function useSyncSpatialProps(spatialWindowManager, props, domRect, anchor, cornerRadiusFromStyle, opacity, stylePosition) {
+  let { allowScroll, scrollWithParent, style, spatialStyle = {} } = props;
+  let {
+    position = { x: 0, y: 0, z: 1 },
+    rotation = { x: 0, y: 0, z: 0, w: 1 },
+    scale = { x: 1, y: 1, z: 1 },
+    material = { type: "none" },
+    cornerRadius = cornerRadiusFromStyle,
+    zIndex = 0
+  } = spatialStyle;
+  let styleOverflow = style?.overflow;
+  const visible = useMemo(() => {
+    return spatialStyle.visible !== false && domRect.width > 0 && domRect.height > 0;
+  }, [spatialStyle.visible, domRect.width, domRect.height]);
+  if (position.x === void 0) position.x = 0;
+  if (position.y === void 0) position.y = 0;
+  if (position.z === void 0) position.z = 1;
+  if (scale.x === void 0) scale.x = 1;
+  if (scale.y === void 0) scale.y = 1;
+  if (scale.z === void 0) scale.z = 1;
+  const cornerRadiusObject = {
+    topLeading: 0,
+    bottomLeading: 0,
+    topTrailing: 0,
+    bottomTrailing: 0
+  };
+  if (typeof cornerRadius == "number") {
+    cornerRadiusObject.topLeading = cornerRadius;
+    cornerRadiusObject.bottomLeading = cornerRadius;
+    cornerRadiusObject.topTrailing = cornerRadius;
+    cornerRadiusObject.bottomTrailing = cornerRadius;
+  } else {
+    Object.assign(cornerRadiusObject, cornerRadius);
+  }
+  useEffect3(() => {
+    if (spatialWindowManager && spatialWindowManager.webview) {
+      const webview = spatialWindowManager.webview;
+      (async function() {
+        webview.setStyle({
+          material: { type: material.type },
+          cornerRadius: cornerRadiusObject
+        });
+      })();
+    }
+  }, [
+    spatialWindowManager,
+    material.type,
+    cornerRadiusObject.topLeading,
+    cornerRadiusObject.bottomLeading,
+    cornerRadiusObject.topTrailing,
+    cornerRadiusObject.bottomTrailing
+  ]);
+  useEffect3(() => {
+    if (spatialWindowManager && spatialWindowManager.webview) {
+      const webview = spatialWindowManager.webview;
+      (async function() {
+        webview.setScrollEnabled(allowScroll || styleOverflow == "scroll");
+        const isFixed = scrollWithParent == false || stylePosition == "fixed";
+        webview.setScrollWithParent(!isFixed);
+      })();
+    }
+  }, [
+    spatialWindowManager,
+    allowScroll,
+    scrollWithParent,
+    stylePosition,
+    styleOverflow
+  ]);
+  useEffect3(() => {
+    if (spatialWindowManager) {
+      ;
+      (async function() {
+        await spatialWindowManager.resize(
+          domRect,
+          position,
+          rotation,
+          scale,
+          anchor
+        );
+        spatialWindowManager?.setZIndex(zIndex);
+      })();
+    }
+  }, [
+    spatialWindowManager,
+    domRect.x,
+    domRect.y,
+    domRect.width,
+    domRect.height,
+    position,
+    rotation,
+    scale,
+    anchor,
+    zIndex
+  ]);
+  useEffect3(() => {
+    if (spatialWindowManager && spatialWindowManager.webview) {
+      const webview = spatialWindowManager.webview;
+      webview.setOpacity(opacity);
+    }
+  }, [spatialWindowManager, opacity]);
+  useEffect3(() => {
+    if (spatialWindowManager) {
+      spatialWindowManager.entity?.setVisible(visible);
+    }
+  }, [spatialWindowManager, visible]);
+  useEffect3(() => {
+    if (spatialWindowManager?.window && spatialWindowManager.webview) {
+      ;
+      (async function() {
+        const bodyWidth = document.body.getBoundingClientRect().width;
+        const viewport = spatialWindowManager.window?.document.querySelector(
+          'meta[name="viewport"]'
+        );
+        viewport?.setAttribute(
+          "content",
+          `width=${bodyWidth}, initial-scale=1.0 user-scalable=no`
+        );
+        await spatialWindowManager.webview?.setScrollEdgeInsets({
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: domRect.width - bodyWidth
+        });
+      })();
+    }
+  }, [spatialWindowManager, domRect.width]);
+}
+function useSyncDomRect(spatialId) {
+  const [domRect, setDomRect] = useState2({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const inheritedPortalStyleRef = useRef3({});
+  const anchorRef = useRef3({
+    x: 0.5,
+    y: 0.5,
+    z: 0.5
+  });
+  const cornerRadiusRef = useRef3({
+    topLeading: 0,
+    bottomLeading: 0,
+    topTrailing: 0,
+    bottomTrailing: 0
+  });
+  const opacityRef = useRef3(1);
+  const spatialReactContextObject = useContext3(SpatialReactContext);
+  const inheritedPortalClassNameRef = useRef3("");
+  useEffect3(() => {
+    const syncDomRect = () => {
+      const dom = spatialReactContextObject?.querySpatialDom(spatialId);
+      if (!dom) {
+        return;
+      }
+      let domRect2 = dom.getBoundingClientRect();
+      let rectType = domRect2rectType(domRect2);
+      const parentDom = spatialReactContextObject?.queryParentSpatialDom(spatialId);
+      if (parentDom) {
+        const parentDomRect = parentDom.getBoundingClientRect();
+        const parentRectType = domRect2rectType(parentDomRect);
+        rectType.x -= parentRectType.x;
+        rectType.y -= parentRectType.y;
+      }
+      const computedStyle = getComputedStyle(dom);
+      inheritedPortalStyleRef.current = getInheritedStyleProps(computedStyle);
+      const anchor = parseTransformOrigin(computedStyle);
+      anchorRef.current = anchor;
+      const cornerRadius = parseCornerRadius(computedStyle);
+      cornerRadiusRef.current = cornerRadius;
+      const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+      opacityRef.current = opacity;
+      inheritedPortalClassNameRef.current = dom.className;
+      setDomRect(rectType);
+    };
+    spatialReactContextObject?.onDomChange(spatialId, syncDomRect);
+    return () => {
+      spatialReactContextObject?.offDomChange(spatialId);
+    };
+  }, []);
+  return {
+    domRect,
+    inheritedPortalStyle: inheritedPortalStyleRef.current,
+    anchor: anchorRef.current,
+    cornerRadius: cornerRadiusRef.current,
+    opacity: opacityRef.current,
+    className: inheritedPortalClassNameRef.current
+  };
+}
+function PortalInstance(inProps) {
+  const { allowScroll, scrollWithParent, spatialStyle, isSubPortal, ...props } = inProps;
+  const debugName = useContext3(SpatialDebugNameContext);
+  const onContainerSpawned = useCallback(
+    async (spatialWindowManager2) => {
+      const openWindow = spatialWindowManager2.window;
+      setOpenWindowStyle(openWindow);
+      handleOpenWindowDocumentClick(openWindow);
+      syncDefaultSpatialStyle(openWindow, debugName);
+      const headObserver = await syncHeaderStyle(openWindow, debugName);
+      const spawnedResult = {
+        headObserver
+      };
+      spatialWindowManager2.setDebugName(debugName);
+      return spawnedResult;
+    },
+    []
+  );
+  const onContainerDestroyed = useCallback(
+    (spatialWindowManager2, spawnedResult) => {
+      const { headObserver } = spawnedResult;
+      headObserver.disconnect();
+    },
+    []
+  );
+  const [spatialWindowManager] = usePortalContainer({
+    onContainerSpawned,
+    onContainerDestroyed
+  });
+  const spatialId = props[SpatialID];
+  const {
+    domRect,
+    inheritedPortalStyle,
+    anchor,
+    cornerRadius,
+    opacity,
+    className
+  } = useSyncDomRect(spatialId);
+  useSyncSpatialProps(
+    spatialWindowManager,
+    {
+      style: props.style,
+      allowScroll,
+      scrollWithParent,
+      spatialStyle
+    },
+    domRect,
+    anchor,
+    cornerRadius,
+    opacity,
+    inheritedPortalStyle.position
+  );
+  const JSXPortalInstance = renderJSXPortalInstance(
+    props,
+    domRect.width,
+    domRect.height,
+    inheritedPortalStyle,
+    className
+  );
+  const needRenderPlaceHolder = isSubPortal && inheritedPortalStyle.position !== "absolute" && inheritedPortalStyle.position !== "fixed";
+  return /* @__PURE__ */ jsxs(SpatialWindowManagerContext.Provider, { value: spatialWindowManager, children: [
+    needRenderPlaceHolder && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className,
+        style: {
+          position: "relative",
+          width: `${domRect.width}px`,
+          height: `${domRect.height}px`
+        }
+      }
+    ),
+    spatialWindowManager && spatialWindowManager.window && createPortal(
+      JSXPortalInstance,
+      spatialWindowManager.window.document.body
+    )
+  ] });
+}
+PortalInstance.displayName = "PortalInstance";
+
+// src/spatial-react-components/SpatialReactComponent/SpatialLayerContext.ts
+import { createContext as createContext5 } from "react";
+var SpatialLayerContext = createContext5(0);
+
+// src/spatial-react-components/SpatialReactComponent/SpatialReactComponent.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function parseProps(inProps) {
+  const {
+    debugShowStandardInstance,
+    debugName = "",
+    component,
+    allowScroll,
+    spatialStyle,
+    scrollWithParent,
+    ...props
+  } = inProps;
+  const El = component ? component : "div";
+  const componentDesc = { El };
+  const spatialDesc = { spatialStyle, allowScroll, scrollWithParent };
+  const debugDesc = { debugName, debugShowStandardInstance };
+  return { componentDesc, spatialDesc, debugDesc, props };
+}
+function renderWebReactComponent(inProps, ref) {
+  const { componentDesc, props } = parseProps(inProps);
+  const { El } = componentDesc;
+  return /* @__PURE__ */ jsx3(El, { ...props, ref });
+}
+function renderSpatialReactComponent(inProps, ref) {
+  const { componentDesc, spatialDesc, debugDesc, props } = parseProps(inProps);
+  const standardInstanceProps = {
+    ...props,
+    ...componentDesc,
+    debugShowStandardInstance: debugDesc.debugShowStandardInstance
+  };
+  const portalInstanceProps = {
+    ...props,
+    ...componentDesc,
+    ...spatialDesc
+  };
+  const spatialReactContextObject = useMemo2(
+    () => new SpatialReactContextObject(debugDesc.debugName),
+    []
+  );
+  return /* @__PURE__ */ jsxs2(SpatialReactContext.Provider, { value: spatialReactContextObject, children: [
+    /* @__PURE__ */ jsx3(StandardInstance, { ...standardInstanceProps, ref }),
+    /* @__PURE__ */ jsx3(PortalInstance, { isSubPortal: false, ...portalInstanceProps })
+  ] });
+}
+function renderSubPortalInstance(inProps) {
+  const { componentDesc, spatialDesc, props } = parseProps(inProps);
+  const portalInstanceProps = {
+    ...props,
+    ...componentDesc,
+    ...spatialDesc
+  };
+  return /* @__PURE__ */ jsx3(PortalInstance, { isSubPortal: true, ...portalInstanceProps });
+}
+function SpatialReactComponentRefactor(inProps, ref) {
+  const layer = useContext4(SpatialLayerContext) + 1;
+  const parentSpatialReactContextObject = useContext4(SpatialReactContext);
+  const isRootInstance = !parentSpatialReactContextObject;
+  const isInStandardInstance = !!useContext4(SpatialIsStandardInstanceContext);
+  const spatialID = useMemo2(() => {
+    return isRootInstance ? layer.toString() : parentSpatialReactContextObject.getSpatialID(
+      layer,
+      isInStandardInstance,
+      inProps.debugName
+    );
+  }, []);
+  const props = { ...inProps, [SpatialID]: spatialID };
+  const contentInLayer = renderContentInLayer(props, ref);
+  return /* @__PURE__ */ jsx3(SpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ jsx3(SpatialLayerContext.Provider, { value: layer, children: contentInLayer }) });
+}
+function renderContentInLayer(inProps, ref) {
+  const isInStandardInstance = useContext4(SpatialIsStandardInstanceContext);
+  const isWebSpatialEnv2 = getSession() !== null;
+  if (isInStandardInstance || !isWebSpatialEnv2) {
+    return renderWebReactComponent(inProps, ref);
+  } else {
+    const parentSpatialReactContextObject = useContext4(SpatialReactContext);
+    if (parentSpatialReactContextObject) {
+      return renderSubPortalInstance(inProps);
+    } else {
+      return renderSpatialReactComponent(inProps, ref);
+    }
+  }
+}
+var SpatialReactComponent = forwardRef2(SpatialReactComponentRefactor);
+SpatialReactComponent.displayName = "SpatialReactComponent";
+
+// src/spatial-react-components/SpatialPrimitive.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var cachedWithSpatialType = /* @__PURE__ */ new Map();
+function withSpatial(Component) {
+  if (cachedWithSpatialType.has(Component)) {
+    return cachedWithSpatialType.get(Component);
+  } else {
+    const WithSpatialComponent = forwardRef3(
+      (givenProps, givenRef) => {
+        const { component: ignoreComponent, ...props } = givenProps;
+        return /* @__PURE__ */ jsx4(
+          SpatialReactComponent,
+          {
+            component: Component,
+            ...props,
+            ref: givenRef
+          }
+        );
+      }
+    );
+    WithSpatialComponent.displayName = `WithSpatial(${typeof Component === "string" ? Component : Component.displayName || Component.name})`;
+    cachedWithSpatialType.set(Component, WithSpatialComponent);
+    cachedWithSpatialType.set(WithSpatialComponent, WithSpatialComponent);
+    return WithSpatialComponent;
+  }
+}
+var SpatialPrimitive = {};
+(function createSpatialPrimitive(SpatialPrimitive2) {
+  primitives.forEach((primitive) => {
+    SpatialPrimitive2[primitive] = withSpatial(primitive);
+  });
+})(SpatialPrimitive);
+var SpatialDiv = SpatialPrimitive.div;
+
+// src/spatial-react-components/hooks/useMonitorDomChange.tsx
+import { useRef as useRef4, useEffect as useEffect4 } from "react";
+
+// src/spatial-react-components/hooks/useMonitorDocumentHeaderChange.tsx
+import { useEffect as useEffect5 } from "react";
+
+// src/spatial-react-components/SpatialMonitor.tsx
+import { jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialDiv.tsx
+import { forwardRef as forwardRef5 } from "react";
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
+import {
+  forwardRef as forwardRef4,
+  useContext as useContext5,
+  useEffect as useEffect7,
+  useMemo as useMemo3,
+  useRef as useRef6
+} from "react";
+
+// src/spatial-react-components/CSSSpatialDiv/useSpatialStyle.ts
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5, useState as useState3 } from "react";
+import isEqual from "lodash.isequal";
+
+// src/spatial-react-components/CSSSpatialDiv/math/index.ts
+import { Matrix4 } from "three/src/math/Matrix4.js";
+import { Vector3 } from "three/src/math/Vector3.js";
+import { Quaternion } from "three/src/math/Quaternion.js";
+
+// src/spatial-react-components/CSSSpatialDiv/const.ts
+var SpatialCustomVars = {
+  back: "--xr-back",
+  backgroundMaterial: "--xr-background-material"
+};
+var BackgroundMaterialDefault = "none";
+
+// src/spatial-react-components/CSSSpatialDiv/useSpatialStyle.ts
+function parse2dMatrix(transformDataArray) {
+  const [n11, n21, n12, n22, n13, n23] = transformDataArray;
+  const matrix4 = new Matrix4(
+    n11,
+    n12,
+    0,
+    n13,
+    n21,
+    n22,
+    0,
+    n23,
+    0,
+    0,
+    1,
+    0,
+    0,
+    0,
+    0,
+    1
+  );
+  return matrix4;
+}
+function parse3dMatrix(transformDataArray) {
+  const matrix4 = new Matrix4().fromArray(transformDataArray);
+  return matrix4;
+}
+function parseTransform(computedStyle) {
+  let transform = computedStyle.getPropertyValue("transform");
+  const matrixFlagString = "matrix(";
+  const idxOfMatrix = transform.indexOf(matrixFlagString);
+  if (idxOfMatrix !== -1) {
+    const transformDataArray = transform.substring(matrixFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
+    return parse2dMatrix(transformDataArray);
+  } else {
+    const matrix3dFlagString = "matrix3d(";
+    const idxOfMatrix3d = transform.indexOf(matrix3dFlagString);
+    if (idxOfMatrix3d !== -1) {
+      const transform3dDataArray = transform.substring(matrix3dFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
+      return parse3dMatrix(transform3dDataArray);
+    } else {
+      return new Matrix4();
+    }
+  }
+}
+function parseBack(computedStyle) {
+  let useBackProperty = computedStyle.position === "absolute" || computedStyle.position === "relative" || computedStyle.position === "fixed";
+  if (!useBackProperty) return new Matrix4();
+  let backProperty = computedStyle.getPropertyValue(SpatialCustomVars.back);
+  let back = void 0;
+  try {
+    back = parseFloat(backProperty);
+  } catch (error) {
+  }
+  return new Matrix4().makeTranslation(0, 0, back || 1);
+}
+function parseSpatialStyle(node) {
+  const computedStyle = getComputedStyle(node);
+  const mat4ForBack = parseBack(computedStyle);
+  const mat4ForTransform = parseTransform(computedStyle);
+  const resultMatrix = new Matrix4();
+  resultMatrix.multiplyMatrices(mat4ForBack, mat4ForTransform);
+  const position = new Vector3();
+  const quaternion = new Quaternion();
+  const scale = new Vector3();
+  resultMatrix.decompose(position, quaternion, scale);
+  const zIndex = parseFloat(computedStyle.getPropertyValue("z-index"));
+  const visible = computedStyle.getPropertyValue("visibility") === "visible";
+  const backgroundMaterialType = computedStyle.getPropertyValue(
+    SpatialCustomVars.backgroundMaterial
+  );
+  return {
+    position: { x: position.x, y: position.y, z: position.z },
+    rotation: {
+      x: quaternion.x,
+      y: quaternion.y,
+      z: quaternion.z,
+      w: quaternion.w
+    },
+    scale: { x: scale.x, y: scale.y, z: scale.z },
+    zIndex,
+    material: {
+      type: backgroundMaterialType
+    },
+    visible
+  };
+}
+function useSpatialStyle() {
+  const ref = useRef5(null);
+  const [spatialStyle, setSpatialStyle] = useState3({
+    position: { x: 0, y: 0, z: 1 },
+    rotation: { x: 0, y: 0, z: 0, w: 1 },
+    scale: { x: 1, y: 1, z: 1 },
+    zIndex: 0,
+    material: {
+      type: "none"
+    },
+    visible: true
+  });
+  const [ready, setReady] = useState3(false);
+  const checkSpatialStyleUpdate = useCallback2(() => {
+    const nextSpatialStyle = parseSpatialStyle(ref.current);
+    if (!isEqual(spatialStyle, nextSpatialStyle)) {
+      setSpatialStyle(nextSpatialStyle);
+    }
+  }, []);
+  useEffect6(() => {
+    if (!ref.current) {
+      return;
+    }
+    const spatialStyle2 = parseSpatialStyle(ref.current);
+    setSpatialStyle(spatialStyle2);
+    setReady(true);
+  }, []);
+  useEffect6(() => {
+    if (!ref.current) {
+      return;
+    }
+    const observer = new MutationObserver((mutationsList) => {
+      checkSpatialStyleUpdate();
+    });
+    const config = {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      // attributeOldValue: true,
+      attributeFilter: ["style", "class"]
+    };
+    observer.observe(ref.current, config);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  useEffect6(() => {
+    if (!ref.current) {
+      return;
+    }
+    function isDescendant(child, parent) {
+      if (child === parent) {
+        return true;
+      }
+      let node = child;
+      while (node) {
+        if (node === parent) {
+          return true;
+        }
+        node = node.parentElement;
+      }
+      return false;
+    }
+    const onDomUpdated = (event) => {
+      const mutationsList = event.detail;
+      const spatialReactComponentDiv = ref.current.previousElementSibling;
+      const targets = mutationsList.map((m) => m.target).filter(
+        (node) => node !== ref.current && !isDescendant(node, spatialReactComponentDiv)
+      );
+      if (targets.length > 0) {
+        checkSpatialStyleUpdate();
+      }
+    };
+    document.addEventListener(
+      "domUpdated" /* domUpdated */,
+      onDomUpdated
+    );
+    return () => {
+      document.removeEventListener(
+        "domUpdated" /* domUpdated */,
+        onDomUpdated
+      );
+    };
+  }, []);
+  return { ref, ready, spatialStyle };
+}
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialDebugNameContext.ts
+import { createContext as createContext6 } from "react";
+var CSSSpatialDebugNameContext = createContext6("");
+
+// src/spatial-react-components/CSSSpatialDiv/useHijackSpatialDivRef.ts
+import { useCallback as useCallback3 } from "react";
+
+// src/spatial-react-components/CSSSpatialDiv/injectClassStyle.ts
+var InjectClassName = "xr-css-spatial-default";
+function injectClassStyle() {
+  const style = document.createElement("style");
+  style.innerHTML = `
+   .${InjectClassName} {
+        ${SpatialCustomVars.backgroundMaterial}: ${BackgroundMaterialDefault};
+    }
+  `;
+  document.head.prepend(style);
+}
+injectClassStyle();
+
+// src/spatial-react-components/CSSSpatialDiv/utils.ts
+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/spatial-react-components/CSSSpatialDiv/useHijackSpatialDivRef.ts
+function makeOriginalKey(key) {
+  return `__original_${key}`;
+}
+function useHijackSpatialDivRef(refIn, cssParserRef) {
+  const ref = cssParserRef;
+  const spatialDivRef = useCallback3(
+    (domElement) => {
+      if (domElement && refIn) {
+        const domStyle = domElement.style;
+        const domStyleProxy = new Proxy(domStyle, {
+          get(target, prop) {
+            if (typeof target[prop] === "function") {
+              return function(...args) {
+                if (prop === "setProperty") {
+                  const [property, value] = args;
+                  if (property === SpatialCustomVars.backgroundMaterial) {
+                    ref.current?.style.setProperty(
+                      SpatialCustomVars.backgroundMaterial,
+                      value
+                    );
+                  } else if (property === SpatialCustomVars.back) {
+                    ref.current?.style.setProperty(
+                      SpatialCustomVars.back,
+                      value
+                    );
+                  } else if (property === "transform") {
+                    ref.current?.style.setProperty(property, value);
+                    return true;
+                  }
+                } else if (prop === "removeProperty") {
+                  const [property] = args;
+                  if (property === SpatialCustomVars.backgroundMaterial || property === SpatialCustomVars.back || property === "transform") {
+                    ref.current?.style.removeProperty(property);
+                  }
+                } else if (prop === "getPropertyValue") {
+                  const [property] = args;
+                  if (property === "transform") {
+                    return ref.current?.style[property];
+                  }
+                }
+                return target[prop](
+                  ...args
+                );
+              };
+            }
+            if (prop === "transform") {
+              return ref.current?.style[prop];
+            }
+            if (prop === "visibility") {
+              return ref.current?.style.visibility;
+            }
+            if (prop === "cssText") {
+            }
+            return Reflect.get(target, prop);
+          },
+          set(target, property, value) {
+            if (property === SpatialCustomVars.backgroundMaterial) {
+              ref.current?.style.setProperty(
+                SpatialCustomVars.backgroundMaterial,
+                value
+              );
+            } else if (property === SpatialCustomVars.back) {
+              ref.current?.style.setProperty(
+                SpatialCustomVars.back,
+                value
+              );
+            } else if (property === "transform") {
+              ref.current?.style.setProperty(property, value);
+              return true;
+            } else if (property === "visibility") {
+              ref.current?.style.setProperty(property, value);
+              return true;
+            } else if (property === "cssText") {
+              const toFilteredCSSProperties = [
+                "transform",
+                "visibility",
+                SpatialCustomVars.back,
+                SpatialCustomVars.backgroundMaterial
+              ];
+              const { extractedValues, filteredCssText } = extractAndRemoveCustomProperties(
+                value,
+                toFilteredCSSProperties
+              );
+              toFilteredCSSProperties.forEach((key) => {
+                if (extractedValues[key]) {
+                  ref.current?.style.setProperty(key, extractedValues[key]);
+                } else {
+                  ref.current?.style.removeProperty(key);
+                }
+              });
+              const appendedCSSText = joinToCSSText({
+                transform: "none",
+                visibility: "hidden"
+              });
+              return Reflect.set(
+                target,
+                property,
+                [appendedCSSText, filteredCssText].join(";")
+              );
+            }
+            return Reflect.set(target, property, value);
+          }
+        });
+        const domClassList = domElement.classList;
+        const domClassMethodKeys = ["add", "remove", "toggle", "replace"];
+        domClassMethodKeys.forEach((key) => {
+          const hiddenKey = makeOriginalKey(key);
+          const hiddenKeyExist = domClassList[hiddenKey] !== void 0;
+          const originalMethod = hiddenKeyExist ? domClassList[hiddenKey] : domClassList[key].bind(domClassList);
+          domClassList[hiddenKey] = originalMethod;
+          domClassList[key] = function(...args) {
+            const result = originalMethod(...args);
+            if (ref.current) {
+              ref.current.className = domElement.className + " " + InjectClassName;
+            }
+            return result;
+          };
+        });
+        const __getComputedStyle = (originalGetComputedStyle, pseudoElt) => {
+          return originalGetComputedStyle(domElement, pseudoElt);
+        };
+        const proxyDomElement = new Proxy(domElement, {
+          get(target, prop) {
+            if (prop === "style") {
+              return domStyleProxy;
+            }
+            if (prop === "__isSpatialDiv") {
+              return true;
+            }
+            if (prop === "__getComputedStyle") {
+              return __getComputedStyle;
+            }
+            if (typeof target[prop] === "function") {
+              return function(...args) {
+                if ("removeAttribute" === prop) {
+                  const [property] = args;
+                  if (property === "style") {
+                    domStyleProxy.cssText = "";
+                    return true;
+                  }
+                  if (property === "class") {
+                    proxyDomElement.className = "";
+                    return true;
+                  }
+                }
+                return target[prop](...args);
+              };
+            }
+            return Reflect.get(target, prop, target);
+          },
+          set(target, prop, value) {
+            if (ref.current) {
+              if (prop === "className") {
+                ref.current.className = value + " " + InjectClassName;
+              }
+              if (prop === "style") {
+                domStyleProxy.cssText = joinToCSSText(value);
+                return true;
+              }
+            }
+            return Reflect.set(target, prop, value);
+          }
+        });
+        if (typeof refIn === "function") {
+          refIn(proxyDomElement);
+        } else {
+          refIn.current = proxyDomElement;
+        }
+      } else if (refIn) {
+        if (typeof refIn === "function") {
+          refIn(null);
+        } else {
+          refIn.current = null;
+        }
+      }
+    },
+    [refIn]
+  );
+  return spatialDivRef;
+}
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialLayerContext.ts
+import { createContext as createContext7 } from "react";
+var CSSSpatialLayerContext = createContext7(0);
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialRootContext.ts
+import { createContext as createContext8 } from "react";
+var CSSSpatialID = "CSSSpatialID";
+var CSSSpatialRootContextObject = class {
+  prefix = "css";
+  domSpatialId = null;
+  fns = {};
+  // cache dom for each spatialId
+  spatialId2dom = {};
+  // layer : [standardInstance sequence, portalInstance sequence]
+  layerSequences = {};
+  getSpatialID(layer, isInStandardInstance, debugName = "") {
+    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 = `${this.prefix}_${debugName}_${layer}_${sequenceId}`;
+    return spatialId;
+  }
+  onDomChange(spatialId, fn) {
+    this.fns[spatialId] = fn;
+  }
+  offDomChange(spatialId, fn) {
+    delete this.fns[spatialId];
+  }
+  setCSSParserRef(cssSpatialID, domElement) {
+    if (domElement) {
+      this.spatialId2dom[cssSpatialID] = domElement;
+    } else {
+      delete this.spatialId2dom[cssSpatialID];
+    }
+    this.fns[cssSpatialID]?.(domElement);
+  }
+};
+var CSSSpatialRootContext = createContext8(null);
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function renderRootCSSSpatialComponent(inProps, refIn) {
+  const cssSpatialRootContextObject = useMemo3(
+    () => new CSSSpatialRootContextObject(),
+    []
+  );
+  const {
+    style = {},
+    className = "",
+    children,
+    debugName,
+    debugShowStandardInstance,
+    ...props
+  } = inProps;
+  const { ref, spatialStyle, ready } = useSpatialStyle();
+  const divRefStyle = {
+    ...style,
+    width: 0,
+    height: 0,
+    padding: 0,
+    transition: "none"
+  };
+  const spatialDivStyle = {
+    ...style,
+    transform: "none"
+  };
+  const El = inProps.component || "div";
+  const spatialDivRef = useHijackSpatialDivRef(refIn, ref);
+  const divRefClassName = className + " " + InjectClassName;
+  return /* @__PURE__ */ jsxs4(CSSSpatialRootContext.Provider, { value: cssSpatialRootContextObject, children: [
+    ready && /* @__PURE__ */ jsx5(
+      SpatialReactComponent,
+      {
+        style: spatialDivStyle,
+        className,
+        children,
+        ...props,
+        spatialStyle,
+        debugName,
+        debugShowStandardInstance,
+        ref: spatialDivRef
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      El,
+      {
+        style: divRefStyle,
+        className: divRefClassName,
+        ...props,
+        ref,
+        "data-cssparser": true
+      }
+    )
+  ] });
+}
+function renderInWebEnv(props, ref) {
+  return /* @__PURE__ */ jsx5(SpatialReactComponent, { ...props, ref });
+}
+function renderInStandardInstance(cssSpatialRootContextObject, cssSpatialID, inProps, refIn) {
+  const { style: inStyle = {}, ...props } = inProps;
+  const style = {
+    ...inStyle,
+    transform: "none",
+    visibility: "hidden"
+  };
+  var cssParserRef = useRef6(null);
+  const spatialDivRef = useHijackSpatialDivRef(refIn, cssParserRef);
+  useEffect7(() => {
+    const onDomChangeAction = (dom) => {
+      cssParserRef.current = dom;
+    };
+    cssSpatialRootContextObject.onDomChange(cssSpatialID, onDomChangeAction);
+    return () => {
+      cssSpatialRootContextObject.offDomChange(cssSpatialID, onDomChangeAction);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx5(SpatialReactComponent, { style, ...props, ref: spatialDivRef });
+}
+function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inProps) {
+  const {
+    style = {},
+    className = "",
+    children,
+    debugName,
+    debugShowStandardInstance,
+    ...props
+  } = inProps;
+  const { ref, spatialStyle, ready } = useSpatialStyle();
+  const divRefStyle = {
+    ...style,
+    width: 0,
+    height: 0,
+    padding: 0,
+    transition: "none"
+  };
+  const spatialDivStyle = {
+    ...style,
+    transform: "none"
+  };
+  const El = inProps.component || "div";
+  const divRefClassName = className + " " + InjectClassName;
+  useEffect7(() => {
+    cssSpatialRootContextObject.setCSSParserRef(cssSpatialID, ref.current);
+  }, [ref.current]);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    ready && /* @__PURE__ */ jsx5(
+      SpatialReactComponent,
+      {
+        style: spatialDivStyle,
+        className,
+        children,
+        ...props,
+        spatialStyle,
+        debugName,
+        debugShowStandardInstance
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      El,
+      {
+        style: divRefStyle,
+        className: divRefClassName,
+        ...props,
+        ref
+      }
+    )
+  ] });
+}
+function CSSSpatialComponentBase(inProps, ref) {
+  const { [CSSSpatialID]: cssSpatialID, ...props } = inProps;
+  const isWebEnv = "false";
+  if (isWebEnv) {
+    return renderInWebEnv(props, ref);
+  } else {
+    const cssSpatialRootContextObject = useContext5(CSSSpatialRootContext);
+    if (cssSpatialRootContextObject) {
+      const isInStandardInstance = !!useContext5(
+        SpatialIsStandardInstanceContext
+      );
+      if (isInStandardInstance) {
+        return renderInStandardInstance(
+          cssSpatialRootContextObject,
+          cssSpatialID,
+          props,
+          ref
+        );
+      } else {
+        return renderInPortalInstance(
+          cssSpatialRootContextObject,
+          cssSpatialID,
+          props
+        );
+      }
+    } else {
+      return renderRootCSSSpatialComponent(props, ref);
+    }
+  }
+}
+var CSSSpatialComponentBaseWithRef = forwardRef4(CSSSpatialComponentBase);
+function CSSSpatialComponentWithRef(inProps, ref) {
+  const layer = useContext5(CSSSpatialLayerContext) + 1;
+  const cssSpatialRootContextObject = useContext5(CSSSpatialRootContext);
+  const isRootInstance = !cssSpatialRootContextObject;
+  const isInStandardInstance = !!useContext5(SpatialIsStandardInstanceContext);
+  const cssSpatialID = useMemo3(() => {
+    return isRootInstance ? layer.toString() : cssSpatialRootContextObject.getSpatialID(
+      layer,
+      isInStandardInstance,
+      inProps.debugName
+    );
+  }, []);
+  const props = { ...inProps, [CSSSpatialID]: cssSpatialID };
+  return /* @__PURE__ */ jsx5(CSSSpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ jsx5(CSSSpatialLayerContext.Provider, { value: layer, children: /* @__PURE__ */ jsx5(CSSSpatialComponentBaseWithRef, { ...props, ref }) }) });
+}
+var CSSSpatialComponent = forwardRef4(CSSSpatialComponentWithRef);
+
+// src/spatial-react-components/CSSSpatialDiv/CSSSpatialDiv.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var cachedWithCSSSpatialType = /* @__PURE__ */ new Map();
+function withCSSSpatial(Component) {
+  if (cachedWithCSSSpatialType.has(Component)) {
+    return cachedWithCSSSpatialType.get(Component);
+  } else {
+    const WithCSSSpatialComponent = forwardRef5(
+      (givenProps, givenRef) => {
+        const {
+          component: ignoreComponent,
+          className: origClassName = "",
+          ...props
+        } = givenProps;
+        const className = "xr-spatial-default " + origClassName;
+        return /* @__PURE__ */ jsx6(
+          CSSSpatialComponent,
+          {
+            component: Component,
+            className,
+            ...props,
+            ref: givenRef
+          }
+        );
+      }
+    );
+    WithCSSSpatialComponent.displayName = `WithCSSSpatial(${typeof Component === "string" ? Component : Component.displayName || Component.name})`;
+    cachedWithCSSSpatialType.set(Component, WithCSSSpatialComponent);
+    cachedWithCSSSpatialType.set(
+      WithCSSSpatialComponent,
+      WithCSSSpatialComponent
+    );
+    return WithCSSSpatialComponent;
+  }
+}
+var CSSSpatialPrimitive = {};
+(function createSpatialPrimitive2(CSSSpatialPrimitive2) {
+  primitives.forEach((primitive) => {
+    CSSSpatialPrimitive2[primitive] = withCSSSpatial(primitive);
+  });
+})(CSSSpatialPrimitive);
+var CSSSpatialDiv = CSSSpatialPrimitive.div;
+
+// src/spatial-react-components/SpatialView.tsx
+import { SpatialHelper } from "@webspatial/core-sdk";
+import {
+  useRef as useRef7,
+  useImperativeHandle,
+  forwardRef as forwardRef6,
+  useEffect as useEffect8
+} from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var runAsync = (fn) => {
+  return fn();
+};
+var SpatialViewEl = forwardRef6(
+  (props, ref) => {
+    const divRef = useRef7(null);
+    const spatialEntity = useRef7(null);
+    const activePromise = useRef7(null);
+    useImperativeHandle(ref, () => ({
+      ...divRef.current,
+      getViewEntity: async () => {
+        if (activePromise.current) {
+          await activePromise.current;
+        }
+        return spatialEntity.current;
+      }
+    }));
+    if (getSession() == null) {
+      return /* @__PURE__ */ jsx7("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
+    }
+    useEffect8(() => {
+      if ("false") return;
+      activePromise.current = runAsync(async () => {
+        if (activePromise.current) {
+          await activePromise.current;
+        }
+        let sh = new SpatialHelper(getSession());
+        let x = await sh.dom.attachSpatialView(divRef.current);
+        spatialEntity.current = x.entity;
+        if (props.onViewLoad) {
+          props.onViewLoad(x.entity);
+        }
+      });
+      return () => {
+        if ("false") return;
+        runAsync(async () => {
+          await activePromise.current;
+          spatialEntity.current?.destroy();
+          if (props.onViewUnload) {
+            props.onViewUnload();
+          }
+        });
+      };
+    }, []);
+    const { onViewLoad, onViewUnload, ...divProps } = props;
+    return /* @__PURE__ */ jsx7("div", { ref: divRef, ...divProps });
+  }
+);
+
+// src/spatial-react-components/Model/index.tsx
+import {
+  forwardRef as forwardRef9,
+  Children,
+  useMemo as useMemo8,
+  useRef as useRef12,
+  useEffect as useEffect16
+} from "react";
+
+// src/spatial-react-components/Model3D/Model3D.tsx
+import { forwardRef as forwardRef7, useContext as useContext8, useMemo as useMemo6 } from "react";
+
+// src/spatial-react-components/Model3D/useDetectLayoutDomUpdated.ts
+import { useRef as useRef8, useEffect as useEffect9 } from "react";
+function useDetectLayoutDomUpdated(onDomUpdated) {
+  const ref = useRef8(null);
+  useEffect9(() => {
+    if (!ref.current) {
+      console.warn("Ref is not attached to the DOM");
+      return;
+    }
+    let ro = new ResizeObserver((elements) => {
+      onDomUpdated();
+    });
+    ro.observe(ref.current);
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  useEffect9(() => {
+    if (!ref.current) {
+      console.warn("Ref is not attached to the DOM");
+      return;
+    }
+    let ro = new MutationObserver((elements) => {
+      onDomUpdated();
+    });
+    ro.observe(ref.current, {
+      attributeFilter: ["class", "style"],
+      subtree: true,
+      attributeOldValue: false
+    });
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  return ref;
+}
+
+// src/spatial-react-components/Model3D/useModel3DNative.ts
+import { useRef as useRef9, useEffect as useEffect10, useState as useState4 } from "react";
+
+// src/spatial-react-components/Model3D/utils.ts
+function PopulatePartialSpatialTransformType(spatialTransform = {}) {
+  const {
+    position = { x: 0, y: 0, z: 0 },
+    rotation = { x: 0, y: 0, z: 0, w: 1 },
+    scale = { x: 1, y: 1, z: 1 }
+  } = spatialTransform;
+  const { x: tx = 0, y: ty = 0, z: tz = 0 } = position;
+  const { x: rx = 0, y: ry = 0, z: rz = 0, w = 1 } = rotation;
+  const { x: sx = 1, y: sy = 1, z: sz = 1 } = scale;
+  return {
+    position: { x: tx, y: ty, z: tz },
+    rotation: { x: rx, y: ry, z: rz, w },
+    scale: { x: sx, y: sy, z: sz }
+  };
+}
+function getAbsoluteURL(url) {
+  if (!url) {
+    return "";
+  }
+  if (url.startsWith("http")) {
+    return url;
+  }
+  return `${location.origin}${url}`;
+}
+
+// src/spatial-react-components/Model3D/Model3DNative.ts
+var Model3DNative = class {
+  constructor(parentEntity) {
+    this.parentEntity = parentEntity;
+  }
+  parentEntity;
+  initPromise;
+  entity;
+  spatialModel3DComponent;
+  // private modelUrl: string
+  isDestroyed = false;
+  _onDragStart;
+  _onDrag;
+  _onDragEnd;
+  _onTap;
+  _onDoubleTap;
+  _onLongPress;
+  async init(modelUrl, onSuccess, onFailure) {
+    if (this.isDestroyed) {
+      return;
+    }
+    this.initPromise = this.initInternal(modelUrl, onSuccess, onFailure);
+    return this.initPromise;
+  }
+  async initInternal(modelUrl, onSuccess, onFailure) {
+    if ("false") return;
+    var session = getSession();
+    if (!session) {
+      return;
+    }
+    const entity = await session.createEntity();
+    await entity.setCoordinateSpace("Dom");
+    const spatialModel3DComponent = await session.createModel3DComponent({
+      url: getAbsoluteURL(modelUrl)
+    });
+    await entity.setComponent(spatialModel3DComponent);
+    if (this.isDestroyed) {
+      return;
+    }
+    if (this.parentEntity) {
+      await entity.setParent(this.parentEntity);
+    } else {
+      var wc = session.getCurrentWindowComponent();
+      var ent = await wc.getEntity();
+      await entity.setParent(ent);
+    }
+    this.entity = entity;
+    this.spatialModel3DComponent = spatialModel3DComponent;
+    this.spatialModel3DComponent.onSuccess = onSuccess;
+    this.spatialModel3DComponent.onFailure = onFailure;
+    this.spatialModel3DComponent.onDragStart = this._onDragStart;
+    this.spatialModel3DComponent.onDrag = this._onDrag;
+    this.spatialModel3DComponent.onDragEnd = this._onDragEnd;
+    this.spatialModel3DComponent.onTap = this._onTap;
+    this.spatialModel3DComponent.onDoubleTap = this._onDoubleTap;
+    this.spatialModel3DComponent.onLongPress = this._onLongPress;
+  }
+  async setVisible(visible) {
+    if (this.entity) {
+      await this.entity.setVisible(visible);
+    }
+  }
+  async setContentMode(contentMode) {
+    if (this.spatialModel3DComponent) {
+      await this.spatialModel3DComponent.setContentMode(contentMode);
+    }
+  }
+  async setResizable(resizable) {
+    if (this.spatialModel3DComponent) {
+      await this.spatialModel3DComponent.setResizable(resizable);
+    }
+  }
+  async setAspectRatio(aspectRatio) {
+    if (this.spatialModel3DComponent) {
+      await this.spatialModel3DComponent.setAspectRatio(aspectRatio);
+    }
+  }
+  async updateByDom(dom, options) {
+    if (!this.entity || !this.spatialModel3DComponent) {
+      return;
+    }
+    const rect = dom.getBoundingClientRect();
+    const targetPosX = rect.left + (rect.right - rect.left) / 2;
+    const targetPosY = rect.bottom + (rect.top - rect.bottom) / 2 + window.scrollY;
+    const { spatialTransform } = options;
+    const { position, rotation, scale } = spatialTransform;
+    const entity = this.entity;
+    entity.transform.position.x = targetPosX + position.x;
+    entity.transform.position.y = targetPosY + position.y;
+    entity.transform.position.z = position.z;
+    entity.transform.orientation.x = rotation.x;
+    entity.transform.orientation.y = rotation.y;
+    entity.transform.orientation.z = rotation.z;
+    entity.transform.orientation.w = rotation.w;
+    entity.transform.scale.x = scale.x;
+    entity.transform.scale.y = scale.y;
+    entity.transform.scale.z = scale.z;
+    await entity.updateTransform();
+    const spatialModel3DComponent = this.spatialModel3DComponent;
+    await spatialModel3DComponent.setResolution(rect.width, rect.height);
+    const computedStyle = getComputedStyle(dom);
+    const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+    await spatialModel3DComponent.setOpacity(opacity);
+    const anchor = parseTransformOrigin(computedStyle);
+    await spatialModel3DComponent.setRotationAnchor(anchor);
+  }
+  async updateRectAndTransform(rect, spatialTransform) {
+    if (!this.entity || !this.spatialModel3DComponent) {
+      return;
+    }
+    const targetPosX = rect.x + (rect.width - rect.x) / 2;
+    const targetPosY = rect.y + (rect.height - rect.y) / 2 + window.scrollY;
+    const { position, rotation, scale } = spatialTransform;
+    const entity = this.entity;
+    entity.transform.position.x = targetPosX + position.x;
+    entity.transform.position.y = targetPosY + position.y;
+    entity.transform.position.z = position.z;
+    entity.transform.orientation.x = rotation.x;
+    entity.transform.orientation.y = rotation.y;
+    entity.transform.orientation.z = rotation.z;
+    entity.transform.orientation.w = rotation.w;
+    entity.transform.scale.x = scale.x;
+    entity.transform.scale.y = scale.y;
+    entity.transform.scale.z = scale.z;
+    await entity.updateTransform();
+    const spatialModel3DComponent = this.spatialModel3DComponent;
+    await spatialModel3DComponent.setResolution(rect.width, rect.height);
+  }
+  async setRotationAnchor(anchor) {
+    if (this.spatialModel3DComponent) {
+      await this.spatialModel3DComponent.setRotationAnchor(anchor);
+    }
+  }
+  async setOpacity(opacity) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.setOpacity(opacity);
+    }
+  }
+  set onDragStart(callback) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.onDragStart = callback;
+    }
+    this._onDragStart = callback;
+  }
+  set onDrag(callback) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.onDrag = callback;
+    }
+    this._onDrag = callback;
+  }
+  set onDragEnd(callback) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.onDragEnd = callback;
+    }
+    this._onDragEnd = callback;
+  }
+  set onTap(callback) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.onTap = callback;
+    }
+    this._onTap = callback;
+  }
+  set onDoubleTap(callback) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.onDoubleTap = callback;
+    }
+    this._onDoubleTap = callback;
+  }
+  set onLongPress(callback) {
+    if (this.spatialModel3DComponent) {
+      this.spatialModel3DComponent.onLongPress = callback;
+    }
+    this._onLongPress = callback;
+  }
+  /**
+   * Destroys the current 3D model instance
+   * 1. Marks the instance as destroyed
+   * 2. Waits for initialization to complete (if in progress)
+   * 3. Destroys the spatial entity
+   * 4. Cleans up all related references
+   */
+  async destroy() {
+    this.isDestroyed = true;
+    if (this.initPromise) {
+      await this.initPromise;
+    }
+    this.entity?.destroy();
+    this.entity = void 0;
+    this.spatialModel3DComponent = void 0;
+    this.initPromise = void 0;
+  }
+};
+
+// src/spatial-react-components/Model3D/useModel3DNative.ts
+function useModel3DNative(modelUrl, parentEntity, eventHandlers = {}, onModel3DNativeReadyCb) {
+  let model3DNativeRef = useRef9(null);
+  const [phase, setPhase] = useState4(
+    "loading"
+  );
+  const [failureReason, setFailureReason] = useState4("");
+  useEffect10(() => {
+    let isDestroyed = false;
+    const model3DContainer = new Model3DNative(parentEntity);
+    model3DContainer.init(
+      modelUrl,
+      () => {
+        setPhase("success");
+      },
+      (error) => {
+        setPhase("failure");
+        setFailureReason(error);
+      }
+    ).then(() => {
+      if (!isDestroyed) {
+        model3DNativeRef.current = model3DContainer;
+        if (onModel3DNativeReadyCb) {
+          onModel3DNativeReadyCb(model3DContainer);
+        }
+      }
+    });
+    return () => {
+      isDestroyed = true;
+      model3DContainer.destroy();
+      model3DNativeRef.current = null;
+      setPhase("loading");
+    };
+  }, [modelUrl]);
+  useEffect10(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.onDragStart = eventHandlers.onDragStart;
+    }
+  }, [model3DNativeRef.current, eventHandlers.onDragStart]);
+  useEffect10(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.onDrag = eventHandlers.onDrag;
+    }
+  }, [model3DNativeRef.current, eventHandlers.onDrag]);
+  useEffect10(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.onDragEnd = eventHandlers.onDragEnd;
+    }
+  });
+  useEffect10(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.onTap = eventHandlers.onTap;
+    }
+  }, [model3DNativeRef.current, eventHandlers.onTap]);
+  useEffect10(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.onDoubleTap = eventHandlers.onDoubleTap;
+    }
+  }, [model3DNativeRef.current, eventHandlers.onDoubleTap]);
+  useEffect10(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.onLongPress = eventHandlers.onLongPress;
+    }
+  }, [model3DNativeRef.current, eventHandlers.onLongPress]);
+  return { model3DNativeRef, phase, failureReason };
+}
+
+// src/spatial-react-components/Model3D/Model3DNotInSpatialDiv.tsx
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function renderModel3DNotInSpatialDiv(props, refIn) {
+  const {
+    className,
+    style = {},
+    modelUrl,
+    visible,
+    spatialTransform,
+    contentMode = "fit",
+    resizable = true,
+    aspectRatio = 0,
+    onLoad,
+    children,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    onTap,
+    onDoubleTap,
+    onLongPress
+  } = props;
+  const theSpatialTransform = PopulatePartialSpatialTransformType(spatialTransform);
+  const onDomUpdated = useCallback4(() => {
+    if (model3DNativeRef.current && layoutInstanceRef.current) {
+      const model3DNative = model3DNativeRef.current;
+      model3DNative.updateByDom(layoutInstanceRef.current, {
+        spatialTransform: theSpatialTransform
+      });
+    }
+  }, [
+    theSpatialTransform.position.x,
+    theSpatialTransform.position.y,
+    theSpatialTransform.position.z,
+    theSpatialTransform.rotation.x,
+    theSpatialTransform.rotation.y,
+    theSpatialTransform.rotation.z,
+    theSpatialTransform.rotation.w,
+    theSpatialTransform.scale.x,
+    theSpatialTransform.scale.y,
+    theSpatialTransform.scale.z
+  ]);
+  const onModel3DContainerReadyCb = useCallback4(() => {
+    if (model3DNativeRef.current && layoutInstanceRef.current) {
+      model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
+        spatialTransform: theSpatialTransform
+      });
+    }
+  }, [
+    theSpatialTransform.position.x,
+    theSpatialTransform.position.y,
+    theSpatialTransform.position.z,
+    theSpatialTransform.rotation.x,
+    theSpatialTransform.rotation.y,
+    theSpatialTransform.rotation.z,
+    theSpatialTransform.rotation.w,
+    theSpatialTransform.scale.x,
+    theSpatialTransform.scale.y,
+    theSpatialTransform.scale.z
+  ]);
+  const onDragStartCb = useCallback4(
+    (spatialDragEvent) => {
+      if (onDragStart) {
+        const dragEvent = {
+          ...spatialDragEvent,
+          target: layoutInstanceRef.current
+        };
+        onDragStart(dragEvent);
+      }
+    },
+    [onDragStart]
+  );
+  const onDragCb = useCallback4(
+    (spatialDragEvent) => {
+      if (onDrag) {
+        const dragEvent = {
+          ...spatialDragEvent,
+          target: layoutInstanceRef.current
+        };
+        onDrag(dragEvent);
+      }
+    },
+    [onDrag]
+  );
+  const onDragEndCb = useCallback4(
+    (spatialDragEvent) => {
+      if (onDragEnd) {
+        const dragEvent = {
+          ...spatialDragEvent,
+          target: layoutInstanceRef.current
+        };
+        onDragEnd(dragEvent);
+      }
+    },
+    [onDragEnd]
+  );
+  const onTapCb = useCallback4(() => {
+    if (onTap) {
+      const event = {
+        target: layoutInstanceRef.current
+      };
+      onTap(event);
+    }
+  }, [onTap]);
+  const onDoubleTapCb = useCallback4(() => {
+    if (onDoubleTap) {
+      const event = {
+        target: layoutInstanceRef.current
+      };
+      onDoubleTap(event);
+    }
+  }, [onDoubleTap]);
+  const onLongPressCb = useCallback4(() => {
+    if (onLongPress) {
+      const event = {
+        target: layoutInstanceRef.current
+      };
+      onLongPress(event);
+    }
+  }, [onLongPress]);
+  const layoutInstanceRef = useDetectLayoutDomUpdated(onDomUpdated);
+  const { model3DNativeRef, phase, failureReason } = useModel3DNative(
+    modelUrl,
+    void 0,
+    {
+      onDragStart: onDragStart ? onDragStartCb : void 0,
+      onDrag: onDrag ? onDragCb : void 0,
+      onDragEnd: onDragEnd ? onDragEndCb : void 0,
+      onTap: onTap ? onTapCb : void 0,
+      onDoubleTap: onDoubleTap ? onDoubleTapCb : void 0,
+      onLongPress: onLongPress ? onLongPressCb : void 0
+    },
+    onModel3DContainerReadyCb
+  );
+  const onSuccess = useCallback4(() => {
+    ;
+    layoutInstanceRef.current.ready = true;
+    if (onLoad) {
+      onLoad({
+        target: layoutInstanceRef.current
+      });
+    }
+  }, [onLoad]);
+  const onFailure = useCallback4(
+    (_) => {
+      const modelElement = layoutInstanceRef.current;
+      modelElement.ready = false;
+      if (onLoad) {
+        onLoad({
+          target: layoutInstanceRef.current
+        });
+      }
+    },
+    [onLoad]
+  );
+  useEffect11(() => {
+    if (phase === "failure") {
+      onFailure(failureReason);
+    } else if (phase === "success") {
+      onSuccess();
+    }
+  }, [phase]);
+  useEffect11(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setVisible(visible);
+    }
+  }, [model3DNativeRef.current, visible]);
+  useEffect11(() => {
+    if (model3DNativeRef.current && layoutInstanceRef.current) {
+      model3DNativeRef.current.updateByDom(layoutInstanceRef.current, {
+        spatialTransform: theSpatialTransform
+      });
+    }
+  }, [
+    theSpatialTransform.position.x,
+    theSpatialTransform.position.y,
+    theSpatialTransform.position.z,
+    theSpatialTransform.rotation.x,
+    theSpatialTransform.rotation.y,
+    theSpatialTransform.rotation.z,
+    theSpatialTransform.rotation.w,
+    theSpatialTransform.scale.x,
+    theSpatialTransform.scale.y,
+    theSpatialTransform.scale.z
+  ]);
+  useEffect11(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setContentMode(contentMode);
+    }
+  }, [model3DNativeRef.current, contentMode]);
+  useEffect11(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setResizable(resizable);
+    }
+  }, [model3DNativeRef.current, resizable]);
+  useEffect11(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setAspectRatio(aspectRatio);
+    }
+  }, [model3DNativeRef.current, aspectRatio]);
+  const layoutDomStyle = {
+    ...style,
+    visibility: phase === "failure" ? "visible" : "hidden",
+    transform: ""
+  };
+  const proxyRef = useMemo4(
+    () => new Proxy(layoutInstanceRef, {
+      get(target, prop, receiver) {
+        return Reflect.get(target, prop, receiver);
+      },
+      set(target, prop, value, receiver) {
+        if (prop === "current") {
+          const domElement = value;
+          if (domElement) {
+            domElement.ready = false;
+            domElement.currentSrc = modelUrl;
+          }
+          if (refIn) {
+            if (typeof refIn === "function") {
+              refIn(domElement);
+            } else {
+              refIn.current = domElement;
+            }
+          }
+        }
+        return Reflect.set(target, prop, value, receiver);
+      }
+    }),
+    [layoutInstanceRef, refIn]
+  );
+  useEffect11(() => {
+    return () => {
+      if (layoutInstanceRef.current) {
+        const modelElement = layoutInstanceRef.current;
+        modelElement.ready = false;
+        modelElement.currentSrc = modelUrl;
+      }
+    };
+  }, [modelUrl]);
+  return /* @__PURE__ */ jsx8("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
+}
+
+// src/spatial-react-components/Model3D/Model3DStandardInstance.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function renderModel3DStandardInstance(spatialId, props, refIn) {
+  const { className, style } = props;
+  const extraProps = {
+    [SpatialID]: spatialId
+  };
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-model3d-spatialid": spatialId,
+      className,
+      style,
+      ref: refIn,
+      ...extraProps
+    }
+  );
+}
+
+// src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
+import {
+  useCallback as useCallback5,
+  useContext as useContext7,
+  useEffect as useEffect13,
+  useMemo as useMemo5
+} from "react";
+
+// src/spatial-react-components/Model3D/useSyncDomInfoFromStandardInstance.ts
+import { useRef as useRef10, useEffect as useEffect12, useState as useState5, useContext as useContext6 } from "react";
+function useSyncDomInfoFromStandardInstance(spatialId) {
+  const [domRect, setDomRect] = useState5({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const inheritedPortalStyleRef = useRef10({});
+  const anchorRef = useRef10({
+    x: 0.5,
+    y: 0.5,
+    z: 0.5
+  });
+  const opacityRef = useRef10(1);
+  const spatialReactContextObject = useContext6(SpatialReactContext);
+  const inheritedPortalClassNameRef = useRef10("");
+  const modelRef = useRef10(null);
+  useEffect12(() => {
+    const syncDomRect = () => {
+      const dom = spatialReactContextObject?.querySpatialDom(spatialId);
+      if (!dom) {
+        return;
+      }
+      modelRef.current = dom;
+      let domRect2 = dom.getBoundingClientRect();
+      let rectType = domRect2rectType(domRect2);
+      const parentDom = spatialReactContextObject?.queryParentSpatialDom(spatialId);
+      if (parentDom) {
+        const parentDomRect = parentDom.getBoundingClientRect();
+        const parentRectType = domRect2rectType(parentDomRect);
+        rectType.x -= parentRectType.x;
+        rectType.y -= parentRectType.y;
+      }
+      const computedStyle = getComputedStyle(dom);
+      inheritedPortalStyleRef.current = getInheritedStyleProps(computedStyle);
+      const anchor = parseTransformOrigin(computedStyle);
+      anchorRef.current = anchor;
+      const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+      opacityRef.current = opacity;
+      inheritedPortalClassNameRef.current = dom.className;
+      setDomRect(rectType);
+    };
+    spatialReactContextObject?.onDomChange(spatialId, syncDomRect);
+    return () => {
+      spatialReactContextObject?.offDomChange(spatialId);
+    };
+  }, []);
+  return {
+    modelRef,
+    domRect,
+    inheritedPortalStyle: inheritedPortalStyleRef.current,
+    anchor: anchorRef.current,
+    opacity: opacityRef.current,
+    className: inheritedPortalClassNameRef.current
+  };
+}
+
+// src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
+import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
+function useModelEvents(props, modelRef) {
+  const {
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    onTap,
+    onDoubleTap,
+    onLongPress
+  } = props;
+  const onDragStartCb = useCallback5(
+    (spatialDragEvent) => {
+      if (onDragStart) {
+        const dragEvent = {
+          ...spatialDragEvent,
+          target: modelRef.current
+        };
+        onDragStart(dragEvent);
+      }
+    },
+    [onDragStart]
+  );
+  const onDragCb = useCallback5(
+    (spatialDragEvent) => {
+      if (onDrag) {
+        const dragEvent = {
+          ...spatialDragEvent,
+          target: modelRef.current
+        };
+        onDrag(dragEvent);
+      }
+    },
+    [onDrag]
+  );
+  const onDragEndCb = useCallback5(
+    (spatialDragEvent) => {
+      if (onDragEnd) {
+        const dragEvent = {
+          ...spatialDragEvent,
+          target: modelRef.current
+        };
+        onDragEnd(dragEvent);
+      }
+    },
+    [onDragEnd]
+  );
+  const onTapCb = useCallback5(() => {
+    if (onTap) {
+      const event = {
+        target: modelRef.current
+      };
+      onTap(event);
+    }
+  }, [onTap]);
+  const onDoubleTapCb = useCallback5(() => {
+    if (onDoubleTap) {
+      const event = {
+        target: modelRef.current
+      };
+      onDoubleTap(event);
+    }
+  }, [onDoubleTap]);
+  const onLongPressCb = useCallback5(() => {
+    if (onLongPress) {
+      const event = {
+        target: modelRef.current
+      };
+      onLongPress(event);
+    }
+  }, [onLongPress]);
+  return {
+    onDragStart: onDragStartCb,
+    onDrag: onDragCb,
+    onDragEnd: onDragEndCb,
+    onTap: onTapCb,
+    onDoubleTap: onDoubleTapCb,
+    onLongPress: onLongPressCb
+  };
+}
+function renderModel3DPortalInstance(spatialId, props) {
+  const {
+    style: _,
+    modelUrl,
+    visible,
+    spatialTransform,
+    contentMode = "fit",
+    resizable = true,
+    aspectRatio = 0,
+    onLoad,
+    children
+  } = props;
+  const theSpatialTransform = useMemo5(() => {
+    return PopulatePartialSpatialTransformType(spatialTransform);
+  }, [spatialTransform]);
+  const {
+    modelRef,
+    domRect,
+    inheritedPortalStyle,
+    anchor,
+    opacity,
+    className
+  } = useSyncDomInfoFromStandardInstance(spatialId);
+  const parentSpatialWindowManager = useContext7(SpatialWindowManagerContext);
+  const eventHandlers = useModelEvents(
+    props,
+    modelRef
+  );
+  const { model3DNativeRef, phase, failureReason } = useModel3DNative(
+    modelUrl,
+    parentSpatialWindowManager.entity,
+    eventHandlers
+  );
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.updateRectAndTransform(
+        domRect,
+        theSpatialTransform
+      );
+    }
+  }, [model3DNativeRef.current, domRect, theSpatialTransform]);
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setRotationAnchor(anchor);
+    }
+  }, [model3DNativeRef.current, anchor]);
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setVisible(visible);
+    }
+  }, [model3DNativeRef.current, visible]);
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setContentMode(contentMode);
+    }
+  }, [model3DNativeRef.current, contentMode]);
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setResizable(resizable);
+    }
+  }, [model3DNativeRef.current, resizable]);
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setAspectRatio(aspectRatio);
+    }
+  }, [model3DNativeRef.current, aspectRatio]);
+  useEffect13(() => {
+    if (model3DNativeRef.current) {
+      model3DNativeRef.current.setOpacity(opacity);
+    }
+  }, [model3DNativeRef.current, opacity]);
+  const onSuccess = useCallback5(() => {
+    ;
+    modelRef.current.ready = true;
+    if (onLoad) {
+      onLoad({
+        target: modelRef.current
+      });
+    }
+  }, [onLoad]);
+  const onFailure = useCallback5(
+    (_2) => {
+      const modelElement = modelRef.current;
+      modelElement.ready = false;
+      if (onLoad) {
+        onLoad({
+          target: modelRef.current
+        });
+      }
+    },
+    [onLoad]
+  );
+  useEffect13(() => {
+    if (phase === "failure") {
+      onFailure(failureReason);
+    } else if (phase === "success") {
+      onSuccess();
+    }
+  }, [phase]);
+  useEffect13(() => {
+    return () => {
+      const modelElement = modelRef.current;
+      if (modelElement) {
+        modelElement.ready = false;
+        modelElement.currentSrc = modelUrl;
+      }
+    };
+  }, [modelUrl]);
+  const needRenderPlaceHolder = inheritedPortalStyle.position !== "absolute";
+  if (!needRenderPlaceHolder && phase !== "failure") {
+    return /* @__PURE__ */ jsx10(Fragment2, {});
+  } else {
+    const extraStyle = {
+      visibility: "visible",
+      top: "0px",
+      left: "0px",
+      margin: "0px",
+      marginLeft: "0px",
+      marginRight: "0px",
+      marginTop: "0px",
+      marginBottom: "0px",
+      borderRadius: "0px",
+      overflow: "",
+      width: `${domRect.width}px`,
+      height: `${domRect.height}px`
+    };
+    const style = {
+      ...inheritedPortalStyle,
+      ...extraStyle
+    };
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        "data-model3d-spatialid": spatialId,
+        className,
+        style,
+        children: phase === "failure" && children
+      }
+    );
+  }
+}
+
+// src/spatial-react-components/Model3D/Model3D.tsx
+function Model3DBase(props, refIn) {
+  const parentSpatialReactContextObject = useContext8(SpatialReactContext);
+  const isInSpatialDiv = !!parentSpatialReactContextObject;
+  if (isInSpatialDiv) {
+    const layer = useContext8(SpatialLayerContext) + 1;
+    const isInStandardInstance = !!useContext8(SpatialIsStandardInstanceContext);
+    const spatialId = useMemo6(() => {
+      return parentSpatialReactContextObject.getSpatialID(
+        layer,
+        isInStandardInstance,
+        "Model3D"
+      );
+    }, []);
+    if (isInStandardInstance) {
+      return renderModel3DStandardInstance(spatialId, props, refIn);
+    } else {
+      return renderModel3DPortalInstance(spatialId, props);
+    }
+  } else {
+    return renderModel3DNotInSpatialDiv(props, refIn);
+  }
+}
+var Model3D = forwardRef7(Model3DBase);
+Model3D.displayName = "Model3D";
+
+// src/spatial-react-components/Model3D/CSSModel3D.tsx
+import { forwardRef as forwardRef8, useContext as useContext11, useMemo as useMemo7 } from "react";
+
+// src/spatial-react-components/Model3D/CSSModel3DNotInSpatialDiv.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
+  const { className, style = {}, ...props } = inProps;
+  const cssParserDomStyle = {
+    ...style,
+    width: 0,
+    height: 0,
+    padding: 0
+  };
+  const { ref: cssParserDomRef, spatialStyle, ready } = useSpatialStyle();
+  const ref = useHijackSpatialDivRef(
+    refIn,
+    cssParserDomRef
+  );
+  const spatialTransform = {
+    position: spatialStyle.position,
+    rotation: spatialStyle.rotation,
+    scale: spatialStyle.scale
+  };
+  const visible = spatialStyle.visible;
+  const model3DStyle = {
+    ...style,
+    transform: "none"
+  };
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    ready && /* @__PURE__ */ jsx11(
+      Model3D,
+      {
+        className,
+        style: model3DStyle,
+        ref,
+        spatialTransform,
+        visible,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className,
+        style: cssParserDomStyle,
+        ref: cssParserDomRef
+      }
+    )
+  ] });
+}
+
+// src/spatial-react-components/Model3D/CSSModel3DStandardInstance.tsx
+import { useContext as useContext9, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
+  const { style: inStyle = {}, ...props } = inProps;
+  const style = {
+    ...inStyle,
+    transform: "none",
+    visibility: "hidden"
+  };
+  var cssParserRef = useRef11(null);
+  const ref = useHijackSpatialDivRef(
+    refIn,
+    cssParserRef
+  );
+  const rootSpatialReactContextObject = useContext9(SpatialReactContext);
+  useEffect14(() => {
+    const onSubEvent = (dom) => {
+      cssParserRef.current = dom;
+    };
+    rootSpatialReactContextObject.onSubDivEvent(spatialId, onSubEvent);
+    return () => {
+      rootSpatialReactContextObject.offSubDivEvent(spatialId);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx12(Model3D, { style, ...props, ref, visible: true });
+}
+
+// src/spatial-react-components/Model3D/CSSModel3DPortalInstance.tsx
+import { useContext as useContext10, useEffect as useEffect15 } from "react";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function renderCSSModel3DPortalInstance(spatialId, inProps) {
+  const { className, style = {}, ...props } = inProps;
+  const rootSpatialReactContextObject = useContext10(SpatialReactContext);
+  const { ref, spatialStyle, ready } = useSpatialStyle();
+  const spatialTransform = {
+    position: spatialStyle.position,
+    rotation: spatialStyle.rotation,
+    scale: spatialStyle.scale
+  };
+  const visible = spatialStyle.visible;
+  useEffect15(() => {
+    rootSpatialReactContextObject.notifySubDivEvent(spatialId, ref.current);
+  }, [ref.current]);
+  const cssParserDomStyle = {
+    ...style,
+    width: 0,
+    height: 0,
+    padding: 0
+  };
+  const model3DStyle = {
+    ...style,
+    transform: "none"
+  };
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    ready && /* @__PURE__ */ jsx13(
+      Model3D,
+      {
+        className,
+        style: model3DStyle,
+        spatialTransform,
+        visible,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx13("div", { className, style: cssParserDomStyle, ref })
+  ] });
+}
+
+// src/spatial-react-components/Model3D/CSSModel3D.tsx
+function CSSModel3DBase(props, refIn) {
+  const rootSpatialReactContextObject = useContext11(SpatialReactContext);
+  const isInSpatialDiv = !!rootSpatialReactContextObject;
+  if (isInSpatialDiv) {
+    const layer = useContext11(SpatialLayerContext) + 1;
+    const isInStandardInstance = !!useContext11(SpatialIsStandardInstanceContext);
+    const spatialId = useMemo7(() => {
+      return rootSpatialReactContextObject.getSubDivSpatialID(
+        layer,
+        isInStandardInstance,
+        "CSSModel3D"
+      );
+    }, []);
+    if (isInStandardInstance) {
+      return renderCSSModel3DStandardInstance(spatialId, props, refIn);
+    } else {
+      return renderCSSModel3DPortalInstance(spatialId, props);
+    }
+  } else {
+    return renderCSSModel3DNotInSpatialDiv(props, refIn);
+  }
+}
+var CSSModel3D = forwardRef8(CSSModel3DBase);
+CSSModel3D.displayName = "CSSModel3D";
+
+// src/spatial-react-components/Model/index.tsx
+import "@google/model-viewer";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function renderInModel3D(inProps, ref, modelUrl, placeHolder) {
+  const { poster, ...props } = inProps;
+  return /* @__PURE__ */ jsxs7(CSSModel3D, { modelUrl, ...props, ref, children: [
+    " ",
+    placeHolder,
+    " "
+  ] });
+}
+function parseChildren(child) {
+  if (child === void 0) {
+    throw new Error("children with <source> required  ");
+  }
+  const children = Children.toArray(child);
+  const sourceElements = children.filter(
+    (node) => node.type === "source"
+  );
+  if (sourceElements.length === 0) {
+    throw new Error("children with at least one <source> required  ");
+  }
+  const gltfSources = sourceElements.filter((node) => {
+    const type = node.props?.type.trim();
+    return type.startsWith("model/gltf-binary") || type.startsWith("model/gltf+json");
+  });
+  const usdzSources = sourceElements.filter(
+    (node) => node.props?.type.trim().startsWith("model/vnd.usdz+zip")
+  );
+  let lastChild = children[children.length - 1];
+  const placeHolder = sourceElements.indexOf(lastChild) < 0 ? lastChild : void 0;
+  const gltfSourceURL = gltfSources.length > 0 && gltfSources[0].props?.src;
+  const usdzSourceURL = usdzSources.length > 0 && usdzSources[0].props?.src;
+  return {
+    placeHolder,
+    gltfSourceURL: getAbsoluteURL(gltfSourceURL),
+    usdzSourceURL: getAbsoluteURL(usdzSourceURL)
+  };
+}
+function ModelBase(inProps, ref) {
+  const { children, ...props } = inProps;
+  const { placeHolder, gltfSourceURL, usdzSourceURL } = useMemo8(
+    () => parseChildren(children),
+    [children]
+  );
+  const isWebEnv = !getSession();
+  if (isWebEnv) {
+    const myModelViewer = useRef12(null);
+    const { className, style = {}, ...props2 } = inProps;
+    useEffect16(() => {
+      myModelViewer.current.addEventListener("load", (event) => {
+        if (props2.onLoad) {
+          props2.onLoad({
+            target: { ready: true, currentSrc: gltfSourceURL }
+          });
+        }
+      });
+      myModelViewer.current.addEventListener("pointerdown", (event) => {
+        if (props2.onDragStart) {
+          props2.onDragStart({
+            eventType: "dragstart",
+            translation3D: { x: 0, y: 0, z: 0 },
+            startLocation3D: { x: 0, y: 0, z: 0 },
+            target: ref.current
+          });
+        }
+      });
+      myModelViewer.current.addEventListener("pointermove", (event) => {
+        if (props2.onDrag) {
+          props2.onDrag({
+            eventType: "drag",
+            translation3D: { x: 0, y: 0, z: 0 },
+            startLocation3D: { x: 0, y: 0, z: 0 },
+            target: ref.current
+          });
+        }
+      });
+      myModelViewer.current.addEventListener("pointerup", (event) => {
+        if (props2.onDragEnd) {
+          props2.onDragEnd({
+            eventType: "dragend",
+            translation3D: { x: 0, y: 0, z: 0 },
+            startLocation3D: { x: 0, y: 0, z: 0 },
+            target: ref.current
+          });
+        }
+      });
+    }, []);
+    useEffect16(() => {
+      if (props2.contentMode !== void 0 && props2.contentMode !== "fit") {
+        console.warn(
+          "Model element contentMode != fit isn't supported on 2D screens"
+        );
+      }
+      if (props2.resizable !== void 0 && props2.resizable !== false) {
+        console.warn(
+          "Model element resizable != false isn't supported on 2D screens"
+        );
+      }
+      if (props2.aspectRatio !== void 0 && props2.aspectRatio !== 1) {
+        console.warn(
+          "Model element aspectRatio != 1 isn't supported on 2D screens"
+        );
+      }
+    }, [props2.contentMode, props2.resizable, props2.aspectRatio]);
+    return /* @__PURE__ */ jsx14("div", { ref, className, style, children: /* @__PURE__ */ jsx14(
+      "model-viewer",
+      {
+        ref: myModelViewer,
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        src: gltfSourceURL,
+        "camera-controls": true,
+        "touch-action": "pan-y",
+        poster: props2.poster
+      }
+    ) });
+  } else {
+    return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
+  }
+}
+var Model = forwardRef9(ModelBase);
+Model.displayName = "Model";
+
+// src/XRApp.ts
+var defaultSceneConfig = {
+  defaultSize: {
+    width: 900,
+    height: 700
+  },
+  resizability: "automatic"
+};
+var CONTEXT_WINDOW_URL = "webspatial://createWindowContext";
+var originalOpen = window.open;
+var XRApp = class _XRApp {
+  static instance;
+  static getInstance() {
+    if (!_XRApp.instance) {
+      _XRApp.instance = new _XRApp();
+    }
+    return _XRApp.instance;
+  }
+  handleATag(event) {
+    const targetElement = event.target;
+    if (targetElement.tagName === "A") {
+      const link = targetElement;
+      const target = link.target;
+      const url = link.href;
+      if (target && target !== "_self") {
+        event.preventDefault();
+        window.open(url, target);
+      }
+    }
+  }
+  init() {
+    ;
+    window.open = this.open;
+    document.addEventListener("click", this.handleATag);
+  }
+  deinit() {
+    ;
+    window.open = originalOpen;
+    document.removeEventListener("click", this.handleATag);
+  }
+  configMap = {};
+  // name=>config
+  getConfig(name) {
+    if (name === void 0 || !this.configMap[name]) return void 0;
+    return this.configMap[name];
+  }
+  async show(window2, cfg) {
+    try {
+      let session = getSession();
+      await session._createScene(
+        "Plain",
+        // only support Plain for now
+        {
+          sceneData: {
+            method: "showRoot",
+            sceneConfig: cfg,
+            // url: url,
+            window: window2
+          }
+        }
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  open = (url, target, features) => {
+    const newWindow = originalOpen(url, target, features);
+    if (url === CONTEXT_WINDOW_URL) return newWindow;
+    if (target === "_self" || target === "_parent" || target === "_top") {
+      return newWindow;
+    }
+    let cnt = 2;
+    let timer = setInterval(async () => {
+      cnt -= 1;
+      if (cnt < 0) {
+        clearInterval(timer);
+        return;
+      }
+      if (newWindow._webSpatialID) {
+        clearInterval(timer);
+        let session = getSession();
+        if (!session) {
+          console.error("no session");
+        } else {
+          const cfg = this.getConfig(target);
+          try {
+            await session._createScene(
+              "Plain",
+              // only support Plain for now
+              {
+                sceneData: {
+                  method: "createRoot",
+                  sceneConfig: cfg,
+                  url,
+                  window: newWindow
+                  // windowID: (newWindow as any)._webSpatialID,
+                  // windowContainerID: (newWindow as any)._webSpatialGroupID,
+                }
+              }
+            );
+            if (typeof target === "string" && this.configMap[target]) {
+              delete this.configMap[target];
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      }
+    }, 0);
+    return newWindow;
+  };
+  initScene(name, callback) {
+    this.configMap[name] = callback({ ...defaultSceneConfig });
+  }
+};
+
+// src/jsx/injectSceneHook.ts
+async function injectSceneHook() {
+  if (!window.opener) return;
+  if (window._SceneHookOff) return;
+  await getSession()?.setLoading("show");
+  function onContentLoaded(callback) {
+    if (document.readyState === "interactive" || document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+  onContentLoaded(async () => {
+    let cfg = defaultSceneConfig;
+    if (typeof window.xrCurrentSceneDefaults === "function") {
+      try {
+        cfg = await window.xrCurrentSceneDefaults?.();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(null);
+      }, 1e3);
+    });
+    await getSession()?.setLoading("hide");
+    await XRApp.getInstance().show(window, cfg);
+  });
+}
+
+// src/jsx/spatialPolyfill.ts
+var isWebSpatialEnv = getSession() !== null;
+var SpatialGlobalCustomVars = {
+  backgroundMaterial: "--xr-background-material"
+};
+var htmlBackgroundMaterial = "";
+function setCurrentWindowStyle(backgroundMaterial) {
+  if (backgroundMaterial !== htmlBackgroundMaterial) {
+    const session = getSession();
+    session.getCurrentWindowComponent().setStyle({
+      material: { type: backgroundMaterial }
+    });
+    htmlBackgroundMaterial = backgroundMaterial;
+  }
+}
+function checkHtmlBackgroundMaterial() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const backgroundMaterial = computedStyle.getPropertyValue(
+    SpatialGlobalCustomVars.backgroundMaterial
+  );
+  setCurrentWindowStyle(backgroundMaterial || "none");
+}
+var htmlCornerRadius = {
+  topLeading: 0,
+  bottomLeading: 0,
+  topTrailing: 0,
+  bottomTrailing: 0
+};
+function checkCornerRadius() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const cornerRadius = parseCornerRadius(computedStyle);
+  setCornerRadius(cornerRadius);
+}
+function setCornerRadius(cornerRadius) {
+  if (htmlCornerRadius.topLeading !== cornerRadius.topLeading || htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading || htmlCornerRadius.topTrailing !== cornerRadius.topTrailing || htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing) {
+    const session = getSession();
+    if (!session) return;
+    session.getCurrentWindowComponent().setStyle({
+      cornerRadius
+    });
+    htmlCornerRadius.topLeading = cornerRadius.topLeading;
+    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
+    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
+    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
+  }
+}
+function setOpacity(opacity) {
+  const session = getSession();
+  if (!session) return;
+  session.getCurrentWindowComponent().setOpacity(opacity);
+}
+function checkOpacity() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+  setOpacity(opacity);
+}
+async function setHtmlVisible(visible) {
+  const session = getSession();
+  if (!session) return;
+  const wc = session.getCurrentWindowComponent();
+  const ent = await wc.getEntity();
+  ent?.setVisible(visible);
+}
+function checkHtmlVisible() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const visibility = computedStyle.getPropertyValue("visibility") !== "hidden";
+  const widthGtZero = parseFloat(computedStyle.getPropertyValue("width")) > 0;
+  setHtmlVisible(visibility && widthGtZero);
+}
+function hijackDocumentElementStyle() {
+  const rawDocumentStyle = document.documentElement.style;
+  const styleProxy = new Proxy(rawDocumentStyle, {
+    set: function(target, key, value) {
+      const ret = Reflect.set(target, key, value);
+      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
+        setCurrentWindowStyle(value);
+      }
+      if (key === "border-radius" || key === "borderRadius" || key === "border-top-left-radius" || key === "borderTopLeftRadius" || key === "border-top-right-radius" || key === "borderTopRightRadius" || key === "border-bottom-left-radius" || key === "borderBottomLeftRadius" || key === "border-bottom-right-radius" || key === "borderBottomRightRadius") {
+        checkCornerRadius();
+      }
+      if (key === "opacity") {
+        checkOpacity();
+      }
+      if (key === "visibility" || key === "display") {
+        checkHtmlVisible();
+      }
+      return ret;
+    },
+    get: function(target, prop) {
+      if (typeof target[prop] === "function") {
+        return function(...args) {
+          if (prop === "setProperty") {
+            const [property, value] = args;
+            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
+              setCurrentWindowStyle(value);
+            }
+          } else if (prop === "removeProperty") {
+            const [property] = args;
+            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
+              setCurrentWindowStyle("none");
+            }
+          }
+          return target[prop](
+            ...args
+          );
+        };
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+  Object.defineProperty(document.documentElement, "style", {
+    get: function() {
+      return styleProxy;
+    }
+  });
+}
+function monitorExternalStyleChange() {
+  const headObserver = new MutationObserver(function(mutationsList) {
+    for (const mutation of mutationsList) {
+      if (mutation.type === "childList") {
+        let needCheck = false;
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeName === "LINK" && node.rel === "stylesheet") {
+            needCheck = true;
+          }
+        });
+        mutation.removedNodes.forEach((node) => {
+          if (node.nodeName === "LINK" && node.rel === "stylesheet") {
+            needCheck = true;
+          }
+        });
+        if (needCheck) {
+          checkCSSProperties();
+        }
+      }
+    }
+  });
+  headObserver.observe(document.head, { childList: true, subtree: true });
+}
+function checkCSSProperties() {
+  checkHtmlBackgroundMaterial();
+  checkCornerRadius();
+  checkOpacity();
+  checkHtmlVisible();
+  window.addEventListener("resize", checkHtmlVisible);
+}
+function hijackGetComputedStyle() {
+  const rawFn = window.getComputedStyle.bind(window);
+  window.getComputedStyle = (element, pseudoElt) => {
+    if (element.__isSpatialDiv) {
+      return element.__getComputedStyle(rawFn, pseudoElt);
+    }
+    return rawFn(element, pseudoElt);
+  };
+}
+function hijackWindowOpen() {
+  XRApp.getInstance().init();
+}
+function spatialPolyfill() {
+  if (!isWebSpatialEnv) {
+    return;
+  }
+  injectSceneHook();
+  hijackWindowOpen();
+  checkCSSProperties();
+  hijackGetComputedStyle();
+  hijackDocumentElementStyle();
+  monitorExternalStyleChange();
+}
+
+// src/jsx/jsx-dev-runtime.ts
+import { Fragment as Fragment5 } from "react/jsx-runtime";
+
+// src/jsx/jsx-shared.ts
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import reactJSXRuntime from "react/jsx-runtime";
+var attributeFlag = "enable-xr";
+var styleFlag = "enableXr";
+var classFlag = "__enableXr__";
+function replaceToSpatialPrimitiveType(type, props) {
+  const propsObject = props;
+  if (attributeFlag in propsObject) {
+    delete propsObject[attributeFlag];
+    return withCSSSpatial(type);
+  }
+  if (propsObject && propsObject.style && styleFlag in propsObject.style) {
+    delete propsObject.style[styleFlag];
+    return withCSSSpatial(type);
+  }
+  if (propsObject && propsObject.className) {
+    const originalClassNames = propsObject.className.split(" ");
+    const idx = originalClassNames.indexOf(classFlag);
+    if (idx !== -1) {
+      originalClassNames.splice(idx, 1);
+      propsObject.className = originalClassNames.join(" ");
+      return withCSSSpatial(type);
+    }
+  }
+  return type;
+}
+function jsx15(type, props, key) {
+  type = replaceToSpatialPrimitiveType(type, props);
+  return reactJSXRuntime.jsx(type, props, key);
+}
+function jsxDEV(type, props, key, isStatic, source, self) {
+  type = replaceToSpatialPrimitiveType(type, props);
+  return _jsxDEV(type, props, key, isStatic, source, self);
+}
+
+// src/jsx/jsx-dev-runtime.ts
+spatialPolyfill();
+export {
+  Fragment5 as Fragment,
+  jsx15 as jsx,
+  jsxDEV
+};
+//# sourceMappingURL=jsx-dev-runtime.mjs.map