@webspatial/react-sdk 0.0.6 → 0.0.8

package/dist/jsx/jsx-runtime.js

@@ -30,3179 +30,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/jsx/jsx-runtime.ts
 var jsx_runtime_exports = {};
 __export(jsx_runtime_exports, {
-  Fragment: () => import_jsx_runtime17.Fragment,
-  jsx: () => jsx15,
-  jsxs: () => jsxs8
+  Fragment: () => import_jsx_runtime2.Fragment,
+  jsx: () => jsx,
+  jsxs: () => jsxs
 });
 module.exports = __toCommonJS(jsx_runtime_exports);
 
-// src/spatial-react-components/SpatialPrimitive.tsx
-var import_react11 = require("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
-var import_react10 = require("react");
-
-// src/utils/getSession.ts
-var import_core_sdk = require("@webspatial/core-sdk");
-var spatial = null;
-var _currentSession = null;
-function getSession() {
-  if (false) return null;
-  if (!spatial) {
-    spatial = new import_core_sdk.Spatial();
-  }
-  if (!spatial.isSupported()) {
-    return null;
-  }
-  if (_currentSession) {
-    return _currentSession;
-  }
-  _currentSession = spatial.requestSession();
-  return _currentSession;
-}
-
-// src/spatial-react-components/SpatialReactComponent/StandardInstance.tsx
-var import_react4 = require("react");
-
-// src/spatial-react-components/hooks/useForceUpdate.ts
-var import_react = require("react");
-function useForceUpdate() {
-  const [, setToggle] = (0, import_react.useState)(false);
-  return () => setToggle((toggle) => !toggle);
-}
-
-// src/spatial-react-components/SpatialReactComponent/SpatialIsStandardInstanceContext.ts
-var import_react2 = require("react");
-var SpatialIsStandardInstanceContext = (0, import_react2.createContext)(
-  null
-);
-
-// src/spatial-react-components/SpatialReactComponent/SpatialReactContext.ts
-var import_react3 = require("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 = (0, import_react3.createContext)(null);
-
-// src/spatial-react-components/SpatialReactComponent/StandardInstance.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function useDetectDomRectChange() {
-  const ref = (0, import_react4.useRef)(null);
-  const forceUpdate = useForceUpdate();
-  const spatialReactContextObject = (0, import_react4.useContext)(SpatialReactContext);
-  (0, import_react4.useLayoutEffect)(() => {
-    ref.current && spatialReactContextObject?.notifyDomChange(ref.current);
-  });
-  (0, import_react4.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]);
-  (0, import_react4.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();
-    };
-  }, []);
-  (0, import_react4.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 = (0, import_react4.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__ */ (0, import_jsx_runtime.jsx)(SpatialIsStandardInstanceContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { "data-standardinstance": true, ref: proxyRef, style, ...props }) });
-});
-StandardInstance.displayName = "StandardInstance";
-
-// src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
-var import_react8 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/spatial-react-components/SpatialReactComponent/usePortalContainer.tsx
-var import_react6 = require("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
-var import_react5 = require("react");
-var SpatialWindowManagerContext = (0, import_react5.createContext)(null);
-
-// src/spatial-react-components/SpatialReactComponent/usePortalContainer.tsx
-function usePortalContainer(options) {
-  const isStandard = (0, import_react6.useContext)(SpatialIsStandardInstanceContext);
-  const parentSpatialWindowManager = (0, import_react6.useContext)(SpatialWindowManagerContext);
-  const forceUpdate = useForceUpdate();
-  const spatialWindowManagerRef = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
-    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
-var import_react7 = require("react");
-var SpatialDebugNameContext = (0, import_react7.createContext)("");
-
-// src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
-var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(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 = (0, import_react8.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);
-  }
-  (0, import_react8.useEffect)(() => {
-    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
-  ]);
-  (0, import_react8.useEffect)(() => {
-    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
-  ]);
-  (0, import_react8.useEffect)(() => {
-    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
-  ]);
-  (0, import_react8.useEffect)(() => {
-    if (spatialWindowManager && spatialWindowManager.webview) {
-      const webview = spatialWindowManager.webview;
-      webview.setOpacity(opacity);
-    }
-  }, [spatialWindowManager, opacity]);
-  (0, import_react8.useEffect)(() => {
-    if (spatialWindowManager) {
-      spatialWindowManager.entity?.setVisible(visible);
-    }
-  }, [spatialWindowManager, visible]);
-  (0, import_react8.useEffect)(() => {
-    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] = (0, import_react8.useState)({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const inheritedPortalStyleRef = (0, import_react8.useRef)({});
-  const anchorRef = (0, import_react8.useRef)({
-    x: 0.5,
-    y: 0.5,
-    z: 0.5
-  });
-  const cornerRadiusRef = (0, import_react8.useRef)({
-    topLeading: 0,
-    bottomLeading: 0,
-    topTrailing: 0,
-    bottomTrailing: 0
-  });
-  const opacityRef = (0, import_react8.useRef)(1);
-  const spatialReactContextObject = (0, import_react8.useContext)(SpatialReactContext);
-  const inheritedPortalClassNameRef = (0, import_react8.useRef)("");
-  (0, import_react8.useEffect)(() => {
-    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 = (0, import_react8.useContext)(SpatialDebugNameContext);
-  const onContainerSpawned = (0, import_react8.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 = (0, import_react8.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__ */ (0, import_jsx_runtime2.jsxs)(SpatialWindowManagerContext.Provider, { value: spatialWindowManager, children: [
-    needRenderPlaceHolder && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        className,
-        style: {
-          position: "relative",
-          width: `${domRect.width}px`,
-          height: `${domRect.height}px`
-        }
-      }
-    ),
-    spatialWindowManager && spatialWindowManager.window && (0, import_react_dom.createPortal)(
-      JSXPortalInstance,
-      spatialWindowManager.window.document.body
-    )
-  ] });
-}
-PortalInstance.displayName = "PortalInstance";
-
-// src/spatial-react-components/SpatialReactComponent/SpatialLayerContext.ts
-var import_react9 = require("react");
-var SpatialLayerContext = (0, import_react9.createContext)(0);
-
-// src/spatial-react-components/SpatialReactComponent/SpatialReactComponent.tsx
-var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(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 = (0, import_react10.useMemo)(
-    () => new SpatialReactContextObject(debugDesc.debugName),
-    []
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SpatialReactContext.Provider, { value: spatialReactContextObject, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StandardInstance, { ...standardInstanceProps, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalInstance, { isSubPortal: false, ...portalInstanceProps })
-  ] });
-}
-function renderSubPortalInstance(inProps) {
-  const { componentDesc, spatialDesc, props } = parseProps(inProps);
-  const portalInstanceProps = {
-    ...props,
-    ...componentDesc,
-    ...spatialDesc
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalInstance, { isSubPortal: true, ...portalInstanceProps });
-}
-function SpatialReactComponentRefactor(inProps, ref) {
-  const layer = (0, import_react10.useContext)(SpatialLayerContext) + 1;
-  const parentSpatialReactContextObject = (0, import_react10.useContext)(SpatialReactContext);
-  const isRootInstance = !parentSpatialReactContextObject;
-  const isInStandardInstance = !!(0, import_react10.useContext)(SpatialIsStandardInstanceContext);
-  const spatialID = (0, import_react10.useMemo)(() => {
-    return isRootInstance ? layer.toString() : parentSpatialReactContextObject.getSpatialID(
-      layer,
-      isInStandardInstance,
-      inProps.debugName
-    );
-  }, []);
-  const props = { ...inProps, [SpatialID]: spatialID };
-  const contentInLayer = renderContentInLayer(props, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpatialLayerContext.Provider, { value: layer, children: contentInLayer }) });
-}
-function renderContentInLayer(inProps, ref) {
-  const isInStandardInstance = (0, import_react10.useContext)(SpatialIsStandardInstanceContext);
-  const isWebSpatialEnv2 = getSession() !== null;
-  if (isInStandardInstance || !isWebSpatialEnv2) {
-    return renderWebReactComponent(inProps, ref);
-  } else {
-    const parentSpatialReactContextObject = (0, import_react10.useContext)(SpatialReactContext);
-    if (parentSpatialReactContextObject) {
-      return renderSubPortalInstance(inProps);
-    } else {
-      return renderSpatialReactComponent(inProps, ref);
-    }
-  }
-}
-var SpatialReactComponent = (0, import_react10.forwardRef)(SpatialReactComponentRefactor);
-SpatialReactComponent.displayName = "SpatialReactComponent";
-
-// src/spatial-react-components/SpatialPrimitive.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var cachedWithSpatialType = /* @__PURE__ */ new Map();
-function withSpatial(Component) {
-  if (cachedWithSpatialType.has(Component)) {
-    return cachedWithSpatialType.get(Component);
-  } else {
-    const WithSpatialComponent = (0, import_react11.forwardRef)(
-      (givenProps, givenRef) => {
-        const { component: ignoreComponent, ...props } = givenProps;
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          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
-var import_react12 = require("react");
-
-// src/spatial-react-components/hooks/useMonitorDocumentHeaderChange.tsx
-var import_react13 = require("react");
-
-// src/spatial-react-components/SpatialMonitor.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-
-// src/spatial-react-components/CSSSpatialDiv/CSSSpatialDiv.tsx
-var import_react20 = require("react");
-
-// src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
-var import_react19 = require("react");
-
-// src/spatial-react-components/CSSSpatialDiv/useSpatialStyle.ts
-var import_react14 = require("react");
-var import_lodash = __toESM(require("lodash.isequal"));
-
-// src/spatial-react-components/CSSSpatialDiv/math/index.ts
-var import_Matrix4 = require("three/src/math/Matrix4.js");
-var import_Vector3 = require("three/src/math/Vector3.js");
-var import_Quaternion = require("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 import_Matrix4.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 import_Matrix4.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 import_Matrix4.Matrix4();
-    }
-  }
-}
-function parseBack(computedStyle) {
-  let useBackProperty = computedStyle.position === "absolute" || computedStyle.position === "relative" || computedStyle.position === "fixed";
-  if (!useBackProperty) return new import_Matrix4.Matrix4();
-  let backProperty = computedStyle.getPropertyValue(SpatialCustomVars.back);
-  let back = void 0;
-  try {
-    back = parseFloat(backProperty);
-  } catch (error) {
-  }
-  return new import_Matrix4.Matrix4().makeTranslation(0, 0, back || 1);
-}
-function parseSpatialStyle(node) {
-  const computedStyle = getComputedStyle(node);
-  const mat4ForBack = parseBack(computedStyle);
-  const mat4ForTransform = parseTransform(computedStyle);
-  const resultMatrix = new import_Matrix4.Matrix4();
-  resultMatrix.multiplyMatrices(mat4ForBack, mat4ForTransform);
-  const position = new import_Vector3.Vector3();
-  const quaternion = new import_Quaternion.Quaternion();
-  const scale = new import_Vector3.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 = (0, import_react14.useRef)(null);
-  const [spatialStyle, setSpatialStyle] = (0, import_react14.useState)({
-    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] = (0, import_react14.useState)(false);
-  const checkSpatialStyleUpdate = (0, import_react14.useCallback)(() => {
-    const nextSpatialStyle = parseSpatialStyle(ref.current);
-    if (!(0, import_lodash.default)(spatialStyle, nextSpatialStyle)) {
-      setSpatialStyle(nextSpatialStyle);
-    }
-  }, []);
-  (0, import_react14.useEffect)(() => {
-    if (!ref.current) {
-      return;
-    }
-    const spatialStyle2 = parseSpatialStyle(ref.current);
-    setSpatialStyle(spatialStyle2);
-    setReady(true);
-  }, []);
-  (0, import_react14.useEffect)(() => {
-    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();
-    };
-  }, []);
-  (0, import_react14.useEffect)(() => {
-    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
-var import_react15 = require("react");
-var CSSSpatialDebugNameContext = (0, import_react15.createContext)("");
-
-// src/spatial-react-components/CSSSpatialDiv/useHijackSpatialDivRef.ts
-var import_react16 = require("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 = (0, import_react16.useCallback)(
-    (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
-var import_react17 = require("react");
-var CSSSpatialLayerContext = (0, import_react17.createContext)(0);
-
-// src/spatial-react-components/CSSSpatialDiv/CSSSpatialRootContext.ts
-var import_react18 = require("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 = (0, import_react18.createContext)(null);
-
-// src/spatial-react-components/CSSSpatialDiv/CSSSpatialComponent.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function renderRootCSSSpatialComponent(inProps, refIn) {
-  const cssSpatialRootContextObject = (0, import_react19.useMemo)(
-    () => 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__ */ (0, import_jsx_runtime6.jsxs)(CSSSpatialRootContext.Provider, { value: cssSpatialRootContextObject, children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      SpatialReactComponent,
-      {
-        style: spatialDivStyle,
-        className,
-        children,
-        ...props,
-        spatialStyle,
-        debugName,
-        debugShowStandardInstance,
-        ref: spatialDivRef
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      El,
-      {
-        style: divRefStyle,
-        className: divRefClassName,
-        ...props,
-        ref,
-        "data-cssparser": true
-      }
-    )
-  ] });
-}
-function renderInWebEnv(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpatialReactComponent, { ...props, ref });
-}
-function renderInStandardInstance(cssSpatialRootContextObject, cssSpatialID, inProps, refIn) {
-  const { style: inStyle = {}, ...props } = inProps;
-  const style = {
-    ...inStyle,
-    transform: "none",
-    visibility: "hidden"
-  };
-  var cssParserRef = (0, import_react19.useRef)(null);
-  const spatialDivRef = useHijackSpatialDivRef(refIn, cssParserRef);
-  (0, import_react19.useEffect)(() => {
-    const onDomChangeAction = (dom) => {
-      cssParserRef.current = dom;
-    };
-    cssSpatialRootContextObject.onDomChange(cssSpatialID, onDomChangeAction);
-    return () => {
-      cssSpatialRootContextObject.offDomChange(cssSpatialID, onDomChangeAction);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(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;
-  (0, import_react19.useEffect)(() => {
-    cssSpatialRootContextObject.setCSSParserRef(cssSpatialID, ref.current);
-  }, [ref.current]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      SpatialReactComponent,
-      {
-        style: spatialDivStyle,
-        className,
-        children,
-        ...props,
-        spatialStyle,
-        debugName,
-        debugShowStandardInstance
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      El,
-      {
-        style: divRefStyle,
-        className: divRefClassName,
-        ...props,
-        ref
-      }
-    )
-  ] });
-}
-function CSSSpatialComponentBase(inProps, ref) {
-  const { [CSSSpatialID]: cssSpatialID, ...props } = inProps;
-  const isWebEnv = !getSession();
-  if (isWebEnv) {
-    return renderInWebEnv(props, ref);
-  } else {
-    const cssSpatialRootContextObject = (0, import_react19.useContext)(CSSSpatialRootContext);
-    if (cssSpatialRootContextObject) {
-      const isInStandardInstance = !!(0, import_react19.useContext)(
-        SpatialIsStandardInstanceContext
-      );
-      if (isInStandardInstance) {
-        return renderInStandardInstance(
-          cssSpatialRootContextObject,
-          cssSpatialID,
-          props,
-          ref
-        );
-      } else {
-        return renderInPortalInstance(
-          cssSpatialRootContextObject,
-          cssSpatialID,
-          props
-        );
-      }
-    } else {
-      return renderRootCSSSpatialComponent(props, ref);
-    }
-  }
-}
-var CSSSpatialComponentBaseWithRef = (0, import_react19.forwardRef)(CSSSpatialComponentBase);
-function CSSSpatialComponentWithRef(inProps, ref) {
-  const layer = (0, import_react19.useContext)(CSSSpatialLayerContext) + 1;
-  const cssSpatialRootContextObject = (0, import_react19.useContext)(CSSSpatialRootContext);
-  const isRootInstance = !cssSpatialRootContextObject;
-  const isInStandardInstance = !!(0, import_react19.useContext)(SpatialIsStandardInstanceContext);
-  const cssSpatialID = (0, import_react19.useMemo)(() => {
-    return isRootInstance ? layer.toString() : cssSpatialRootContextObject.getSpatialID(
-      layer,
-      isInStandardInstance,
-      inProps.debugName
-    );
-  }, []);
-  const props = { ...inProps, [CSSSpatialID]: cssSpatialID };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CSSSpatialDebugNameContext.Provider, { value: inProps.debugName || "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CSSSpatialLayerContext.Provider, { value: layer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CSSSpatialComponentBaseWithRef, { ...props, ref }) }) });
-}
-var CSSSpatialComponent = (0, import_react19.forwardRef)(CSSSpatialComponentWithRef);
-
-// src/spatial-react-components/CSSSpatialDiv/CSSSpatialDiv.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var cachedWithCSSSpatialType = /* @__PURE__ */ new Map();
-function withCSSSpatial(Component) {
-  if (cachedWithCSSSpatialType.has(Component)) {
-    return cachedWithCSSSpatialType.get(Component);
-  } else {
-    const WithCSSSpatialComponent = (0, import_react20.forwardRef)(
-      (givenProps, givenRef) => {
-        const {
-          component: ignoreComponent,
-          className: origClassName = "",
-          ...props
-        } = givenProps;
-        const className = "xr-spatial-default " + origClassName;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          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
-var import_core_sdk2 = require("@webspatial/core-sdk");
-var import_react21 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var runAsync = (fn) => {
-  return fn();
-};
-var SpatialViewEl = (0, import_react21.forwardRef)(
-  (props, ref) => {
-    const divRef = (0, import_react21.useRef)(null);
-    const spatialEntity = (0, import_react21.useRef)(null);
-    const activePromise = (0, import_react21.useRef)(null);
-    (0, import_react21.useImperativeHandle)(ref, () => ({
-      ...divRef.current,
-      getViewEntity: async () => {
-        if (activePromise.current) {
-          await activePromise.current;
-        }
-        return spatialEntity.current;
-      }
-    }));
-    if (getSession() == null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
-    }
-    (0, import_react21.useEffect)(() => {
-      if (false) return;
-      activePromise.current = runAsync(async () => {
-        if (activePromise.current) {
-          await activePromise.current;
-        }
-        let sh = new import_core_sdk2.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__ */ (0, import_jsx_runtime8.jsx)("div", { ref: divRef, ...divProps });
-  }
-);
-
-// src/spatial-react-components/Model/index.tsx
-var import_react31 = require("react");
-
-// src/spatial-react-components/Model3D/Model3D.tsx
-var import_react27 = require("react");
-
-// src/spatial-react-components/Model3D/useDetectLayoutDomUpdated.ts
-var import_react22 = require("react");
-function useDetectLayoutDomUpdated(onDomUpdated) {
-  const ref = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
-    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();
-    };
-  }, []);
-  (0, import_react22.useEffect)(() => {
-    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
-var import_react23 = require("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 = (0, import_react23.useRef)(null);
-  const [phase, setPhase] = (0, import_react23.useState)(
-    "loading"
-  );
-  const [failureReason, setFailureReason] = (0, import_react23.useState)("");
-  (0, import_react23.useEffect)(() => {
-    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]);
-  (0, import_react23.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.onDragStart = eventHandlers.onDragStart;
-    }
-  }, [model3DNativeRef.current, eventHandlers.onDragStart]);
-  (0, import_react23.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.onDrag = eventHandlers.onDrag;
-    }
-  }, [model3DNativeRef.current, eventHandlers.onDrag]);
-  (0, import_react23.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.onDragEnd = eventHandlers.onDragEnd;
-    }
-  });
-  (0, import_react23.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.onTap = eventHandlers.onTap;
-    }
-  }, [model3DNativeRef.current, eventHandlers.onTap]);
-  (0, import_react23.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.onDoubleTap = eventHandlers.onDoubleTap;
-    }
-  }, [model3DNativeRef.current, eventHandlers.onDoubleTap]);
-  (0, import_react23.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.onLongPress = eventHandlers.onLongPress;
-    }
-  }, [model3DNativeRef.current, eventHandlers.onLongPress]);
-  return { model3DNativeRef, phase, failureReason };
-}
-
-// src/spatial-react-components/Model3D/Model3DNotInSpatialDiv.tsx
-var import_react24 = require("react");
-var import_jsx_runtime9 = require("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 = (0, import_react24.useCallback)(() => {
-    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 = (0, import_react24.useCallback)(() => {
-    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 = (0, import_react24.useCallback)(
-    (spatialDragEvent) => {
-      if (onDragStart) {
-        const dragEvent = {
-          ...spatialDragEvent,
-          target: layoutInstanceRef.current
-        };
-        onDragStart(dragEvent);
-      }
-    },
-    [onDragStart]
-  );
-  const onDragCb = (0, import_react24.useCallback)(
-    (spatialDragEvent) => {
-      if (onDrag) {
-        const dragEvent = {
-          ...spatialDragEvent,
-          target: layoutInstanceRef.current
-        };
-        onDrag(dragEvent);
-      }
-    },
-    [onDrag]
-  );
-  const onDragEndCb = (0, import_react24.useCallback)(
-    (spatialDragEvent) => {
-      if (onDragEnd) {
-        const dragEvent = {
-          ...spatialDragEvent,
-          target: layoutInstanceRef.current
-        };
-        onDragEnd(dragEvent);
-      }
-    },
-    [onDragEnd]
-  );
-  const onTapCb = (0, import_react24.useCallback)(() => {
-    if (onTap) {
-      const event = {
-        target: layoutInstanceRef.current
-      };
-      onTap(event);
-    }
-  }, [onTap]);
-  const onDoubleTapCb = (0, import_react24.useCallback)(() => {
-    if (onDoubleTap) {
-      const event = {
-        target: layoutInstanceRef.current
-      };
-      onDoubleTap(event);
-    }
-  }, [onDoubleTap]);
-  const onLongPressCb = (0, import_react24.useCallback)(() => {
-    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 = (0, import_react24.useCallback)(() => {
-    ;
-    layoutInstanceRef.current.ready = true;
-    if (onLoad) {
-      onLoad({
-        target: layoutInstanceRef.current
-      });
-    }
-  }, [onLoad]);
-  const onFailure = (0, import_react24.useCallback)(
-    (_) => {
-      const modelElement = layoutInstanceRef.current;
-      modelElement.ready = false;
-      if (onLoad) {
-        onLoad({
-          target: layoutInstanceRef.current
-        });
-      }
-    },
-    [onLoad]
-  );
-  (0, import_react24.useEffect)(() => {
-    if (phase === "failure") {
-      onFailure(failureReason);
-    } else if (phase === "success") {
-      onSuccess();
-    }
-  }, [phase]);
-  (0, import_react24.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setVisible(visible);
-    }
-  }, [model3DNativeRef.current, visible]);
-  (0, import_react24.useEffect)(() => {
-    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
-  ]);
-  (0, import_react24.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setContentMode(contentMode);
-    }
-  }, [model3DNativeRef.current, contentMode]);
-  (0, import_react24.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setResizable(resizable);
-    }
-  }, [model3DNativeRef.current, resizable]);
-  (0, import_react24.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setAspectRatio(aspectRatio);
-    }
-  }, [model3DNativeRef.current, aspectRatio]);
-  const layoutDomStyle = {
-    ...style,
-    visibility: phase === "failure" ? "visible" : "hidden",
-    transform: ""
-  };
-  const proxyRef = (0, import_react24.useMemo)(
-    () => 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]
-  );
-  (0, import_react24.useEffect)(() => {
-    return () => {
-      if (layoutInstanceRef.current) {
-        const modelElement = layoutInstanceRef.current;
-        modelElement.ready = false;
-        modelElement.currentSrc = modelUrl;
-      }
-    };
-  }, [modelUrl]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className, style: layoutDomStyle, ref: proxyRef, children: phase === "failure" && children });
-}
-
-// src/spatial-react-components/Model3D/Model3DStandardInstance.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function renderModel3DStandardInstance(spatialId, props, refIn) {
-  const { className, style } = props;
-  const extraProps = {
-    [SpatialID]: spatialId
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      "data-model3d-spatialid": spatialId,
-      className,
-      style,
-      ref: refIn,
-      ...extraProps
-    }
-  );
-}
-
-// src/spatial-react-components/Model3D/Model3DPortalInstance.tsx
-var import_react26 = require("react");
-
-// src/spatial-react-components/Model3D/useSyncDomInfoFromStandardInstance.ts
-var import_react25 = require("react");
-function useSyncDomInfoFromStandardInstance(spatialId) {
-  const [domRect, setDomRect] = (0, import_react25.useState)({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const inheritedPortalStyleRef = (0, import_react25.useRef)({});
-  const anchorRef = (0, import_react25.useRef)({
-    x: 0.5,
-    y: 0.5,
-    z: 0.5
-  });
-  const opacityRef = (0, import_react25.useRef)(1);
-  const spatialReactContextObject = (0, import_react25.useContext)(SpatialReactContext);
-  const inheritedPortalClassNameRef = (0, import_react25.useRef)("");
-  const modelRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
-    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
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function useModelEvents(props, modelRef) {
-  const {
-    onDragStart,
-    onDrag,
-    onDragEnd,
-    onTap,
-    onDoubleTap,
-    onLongPress
-  } = props;
-  const onDragStartCb = (0, import_react26.useCallback)(
-    (spatialDragEvent) => {
-      if (onDragStart) {
-        const dragEvent = {
-          ...spatialDragEvent,
-          target: modelRef.current
-        };
-        onDragStart(dragEvent);
-      }
-    },
-    [onDragStart]
-  );
-  const onDragCb = (0, import_react26.useCallback)(
-    (spatialDragEvent) => {
-      if (onDrag) {
-        const dragEvent = {
-          ...spatialDragEvent,
-          target: modelRef.current
-        };
-        onDrag(dragEvent);
-      }
-    },
-    [onDrag]
-  );
-  const onDragEndCb = (0, import_react26.useCallback)(
-    (spatialDragEvent) => {
-      if (onDragEnd) {
-        const dragEvent = {
-          ...spatialDragEvent,
-          target: modelRef.current
-        };
-        onDragEnd(dragEvent);
-      }
-    },
-    [onDragEnd]
-  );
-  const onTapCb = (0, import_react26.useCallback)(() => {
-    if (onTap) {
-      const event = {
-        target: modelRef.current
-      };
-      onTap(event);
-    }
-  }, [onTap]);
-  const onDoubleTapCb = (0, import_react26.useCallback)(() => {
-    if (onDoubleTap) {
-      const event = {
-        target: modelRef.current
-      };
-      onDoubleTap(event);
-    }
-  }, [onDoubleTap]);
-  const onLongPressCb = (0, import_react26.useCallback)(() => {
-    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 = (0, import_react26.useMemo)(() => {
-    return PopulatePartialSpatialTransformType(spatialTransform);
-  }, [spatialTransform]);
-  const {
-    modelRef,
-    domRect,
-    inheritedPortalStyle,
-    anchor,
-    opacity,
-    className
-  } = useSyncDomInfoFromStandardInstance(spatialId);
-  const parentSpatialWindowManager = (0, import_react26.useContext)(SpatialWindowManagerContext);
-  const eventHandlers = useModelEvents(
-    props,
-    modelRef
-  );
-  const { model3DNativeRef, phase, failureReason } = useModel3DNative(
-    modelUrl,
-    parentSpatialWindowManager.entity,
-    eventHandlers
-  );
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.updateRectAndTransform(
-        domRect,
-        theSpatialTransform
-      );
-    }
-  }, [model3DNativeRef.current, domRect, theSpatialTransform]);
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setRotationAnchor(anchor);
-    }
-  }, [model3DNativeRef.current, anchor]);
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setVisible(visible);
-    }
-  }, [model3DNativeRef.current, visible]);
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setContentMode(contentMode);
-    }
-  }, [model3DNativeRef.current, contentMode]);
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setResizable(resizable);
-    }
-  }, [model3DNativeRef.current, resizable]);
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setAspectRatio(aspectRatio);
-    }
-  }, [model3DNativeRef.current, aspectRatio]);
-  (0, import_react26.useEffect)(() => {
-    if (model3DNativeRef.current) {
-      model3DNativeRef.current.setOpacity(opacity);
-    }
-  }, [model3DNativeRef.current, opacity]);
-  const onSuccess = (0, import_react26.useCallback)(() => {
-    ;
-    modelRef.current.ready = true;
-    if (onLoad) {
-      onLoad({
-        target: modelRef.current
-      });
-    }
-  }, [onLoad]);
-  const onFailure = (0, import_react26.useCallback)(
-    (_2) => {
-      const modelElement = modelRef.current;
-      modelElement.ready = false;
-      if (onLoad) {
-        onLoad({
-          target: modelRef.current
-        });
-      }
-    },
-    [onLoad]
-  );
-  (0, import_react26.useEffect)(() => {
-    if (phase === "failure") {
-      onFailure(failureReason);
-    } else if (phase === "success") {
-      onSuccess();
-    }
-  }, [phase]);
-  (0, import_react26.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
-  } 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__ */ (0, import_jsx_runtime11.jsx)(
-      "div",
-      {
-        "data-model3d-spatialid": spatialId,
-        className,
-        style,
-        children: phase === "failure" && children
-      }
-    );
-  }
-}
-
-// src/spatial-react-components/Model3D/Model3D.tsx
-function Model3DBase(props, refIn) {
-  const parentSpatialReactContextObject = (0, import_react27.useContext)(SpatialReactContext);
-  const isInSpatialDiv = !!parentSpatialReactContextObject;
-  if (isInSpatialDiv) {
-    const layer = (0, import_react27.useContext)(SpatialLayerContext) + 1;
-    const isInStandardInstance = !!(0, import_react27.useContext)(SpatialIsStandardInstanceContext);
-    const spatialId = (0, import_react27.useMemo)(() => {
-      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 = (0, import_react27.forwardRef)(Model3DBase);
-Model3D.displayName = "Model3D";
-
-// src/spatial-react-components/Model3D/CSSModel3D.tsx
-var import_react30 = require("react");
-
-// src/spatial-react-components/Model3D/CSSModel3DNotInSpatialDiv.tsx
-var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Model3D,
-      {
-        className,
-        style: model3DStyle,
-        ref,
-        spatialTransform,
-        visible,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        className,
-        style: cssParserDomStyle,
-        ref: cssParserDomRef
-      }
-    )
-  ] });
-}
-
-// src/spatial-react-components/Model3D/CSSModel3DStandardInstance.tsx
-var import_react28 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function renderCSSModel3DStandardInstance(spatialId, inProps, refIn) {
-  const { style: inStyle = {}, ...props } = inProps;
-  const style = {
-    ...inStyle,
-    transform: "none",
-    visibility: "hidden"
-  };
-  var cssParserRef = (0, import_react28.useRef)(null);
-  const ref = useHijackSpatialDivRef(
-    refIn,
-    cssParserRef
-  );
-  const rootSpatialReactContextObject = (0, import_react28.useContext)(SpatialReactContext);
-  (0, import_react28.useEffect)(() => {
-    const onSubEvent = (dom) => {
-      cssParserRef.current = dom;
-    };
-    rootSpatialReactContextObject.onSubDivEvent(spatialId, onSubEvent);
-    return () => {
-      rootSpatialReactContextObject.offSubDivEvent(spatialId);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Model3D, { style, ...props, ref, visible: true });
-}
-
-// src/spatial-react-components/Model3D/CSSModel3DPortalInstance.tsx
-var import_react29 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function renderCSSModel3DPortalInstance(spatialId, inProps) {
-  const { className, style = {}, ...props } = inProps;
-  const rootSpatialReactContextObject = (0, import_react29.useContext)(SpatialReactContext);
-  const { ref, spatialStyle, ready } = useSpatialStyle();
-  const spatialTransform = {
-    position: spatialStyle.position,
-    rotation: spatialStyle.rotation,
-    scale: spatialStyle.scale
-  };
-  const visible = spatialStyle.visible;
-  (0, import_react29.useEffect)(() => {
-    rootSpatialReactContextObject.notifySubDivEvent(spatialId, ref.current);
-  }, [ref.current]);
-  const cssParserDomStyle = {
-    ...style,
-    width: 0,
-    height: 0,
-    padding: 0
-  };
-  const model3DStyle = {
-    ...style,
-    transform: "none"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    ready && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      Model3D,
-      {
-        className,
-        style: model3DStyle,
-        spatialTransform,
-        visible,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, style: cssParserDomStyle, ref })
-  ] });
-}
-
-// src/spatial-react-components/Model3D/CSSModel3D.tsx
-function CSSModel3DBase(props, refIn) {
-  const rootSpatialReactContextObject = (0, import_react30.useContext)(SpatialReactContext);
-  const isInSpatialDiv = !!rootSpatialReactContextObject;
-  if (isInSpatialDiv) {
-    const layer = (0, import_react30.useContext)(SpatialLayerContext) + 1;
-    const isInStandardInstance = !!(0, import_react30.useContext)(SpatialIsStandardInstanceContext);
-    const spatialId = (0, import_react30.useMemo)(() => {
-      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 = (0, import_react30.forwardRef)(CSSModel3DBase);
-CSSModel3D.displayName = "CSSModel3D";
-
-// src/spatial-react-components/Model/index.tsx
-var import_model_viewer = require("@google/model-viewer");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function renderInModel3D(inProps, ref, modelUrl, placeHolder) {
-  const { poster, ...props } = inProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CSSModel3D, { modelUrl, ...props, ref, children: [
-    " ",
-    placeHolder,
-    " "
-  ] });
-}
-function parseChildren(child) {
-  if (child === void 0) {
-    throw new Error("children with <source> required  ");
-  }
-  const children = import_react31.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 } = (0, import_react31.useMemo)(
-    () => parseChildren(children),
-    [children]
-  );
-  const isWebEnv = !getSession();
-  if (isWebEnv) {
-    const myModelViewer = (0, import_react31.useRef)(null);
-    const { className, style = {}, ...props2 } = inProps;
-    (0, import_react31.useEffect)(() => {
-      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
-          });
-        }
-      });
-    }, []);
-    (0, import_react31.useEffect)(() => {
-      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__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className, style, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "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 = (0, import_react31.forwardRef)(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/spatialPolyfill.ts
+var import_react_sdk2 = require("@webspatial/react-sdk");
 
 // src/jsx/injectSceneHook.ts
+var import_react_sdk = require("@webspatial/react-sdk");
 async function injectSceneHook() {
   if (!window.opener) return;
   if (window._SceneHookOff) return;
-  await getSession()?.setLoading("show");
+  await (0, import_react_sdk.getSession)()?.setLoading("show");
   function onContentLoaded(callback) {
     if (document.readyState === "interactive" || document.readyState === "complete") {
       callback();
@@ -3211,7 +53,7 @@ async function injectSceneHook() {
     }
   }
   onContentLoaded(async () => {
-    let cfg = defaultSceneConfig;
+    let cfg = import_react_sdk.defaultSceneConfig;
     if (typeof window.xrCurrentSceneDefaults === "function") {
       try {
         cfg = await window.xrCurrentSceneDefaults?.();
@@ -3224,20 +66,20 @@ async function injectSceneHook() {
         resolve(null);
       }, 1e3);
     });
-    await getSession()?.setLoading("hide");
-    await XRApp.getInstance().show(window, cfg);
+    await (0, import_react_sdk.getSession)()?.setLoading("hide");
+    await import_react_sdk.XRApp.getInstance().show(window, cfg);
   });
 }
 
 // src/jsx/spatialPolyfill.ts
-var isWebSpatialEnv = getSession() !== null;
+var isWebSpatialEnv = (0, import_react_sdk2.getSession)() !== null;
 var SpatialGlobalCustomVars = {
   backgroundMaterial: "--xr-background-material"
 };
 var htmlBackgroundMaterial = "";
 function setCurrentWindowStyle(backgroundMaterial) {
   if (backgroundMaterial !== htmlBackgroundMaterial) {
-    const session = getSession();
+    const session = (0, import_react_sdk2.getSession)();
     session.getCurrentWindowComponent().setStyle({
       material: { type: backgroundMaterial }
     });
@@ -3259,12 +101,12 @@ var htmlCornerRadius = {
 };
 function checkCornerRadius() {
   const computedStyle = getComputedStyle(document.documentElement);
-  const cornerRadius = parseCornerRadius(computedStyle);
+  const cornerRadius = (0, import_react_sdk2.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();
+    const session = (0, import_react_sdk2.getSession)();
     if (!session) return;
     session.getCurrentWindowComponent().setStyle({
       cornerRadius
@@ -3276,7 +118,7 @@ function setCornerRadius(cornerRadius) {
   }
 }
 function setOpacity(opacity) {
-  const session = getSession();
+  const session = (0, import_react_sdk2.getSession)();
   if (!session) return;
   session.getCurrentWindowComponent().setOpacity(opacity);
 }
@@ -3286,7 +128,7 @@ function checkOpacity() {
   setOpacity(opacity);
 }
 async function setHtmlVisible(visible) {
-  const session = getSession();
+  const session = (0, import_react_sdk2.getSession)();
   if (!session) return;
   const wc = session.getCurrentWindowComponent();
   const ent = await wc.getEntity();
@@ -3354,6 +196,9 @@ function monitorExternalStyleChange() {
           if (node.nodeName === "LINK" && node.rel === "stylesheet") {
             needCheck = true;
           }
+          if (node.nodeName === "STYLE") {
+            needCheck = true;
+          }
         });
         mutation.removedNodes.forEach((node) => {
           if (node.nodeName === "LINK" && node.rel === "stylesheet") {
@@ -3385,7 +230,7 @@ function hijackGetComputedStyle() {
   };
 }
 function hijackWindowOpen() {
-  XRApp.getInstance().init();
+  import_react_sdk2.XRApp.getInstance().init();
 }
 function spatialPolyfill() {
   if (!isWebSpatialEnv) {
@@ -3400,11 +245,12 @@ function spatialPolyfill() {
 }
 
 // src/jsx/jsx-runtime.ts
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 
 // src/jsx/jsx-shared.ts
 var import_jsx_dev_runtime = require("react/jsx-dev-runtime");
-var import_jsx_runtime16 = __toESM(require("react/jsx-runtime"));
+var import_jsx_runtime = __toESM(require("react/jsx-runtime"));
+var import_react_sdk3 = require("@webspatial/react-sdk");
 var attributeFlag = "enable-xr";
 var styleFlag = "enableXr";
 var classFlag = "__enableXr__";
@@ -3412,11 +258,11 @@ function replaceToSpatialPrimitiveType(type, props) {
   const propsObject = props;
   if (attributeFlag in propsObject) {
     delete propsObject[attributeFlag];
-    return withCSSSpatial(type);
+    return (0, import_react_sdk3.withCSSSpatial)(type);
   }
   if (propsObject && propsObject.style && styleFlag in propsObject.style) {
     delete propsObject.style[styleFlag];
-    return withCSSSpatial(type);
+    return (0, import_react_sdk3.withCSSSpatial)(type);
   }
   if (propsObject && propsObject.className) {
     const originalClassNames = propsObject.className.split(" ");
@@ -3424,18 +270,18 @@ function replaceToSpatialPrimitiveType(type, props) {
     if (idx !== -1) {
       originalClassNames.splice(idx, 1);
       propsObject.className = originalClassNames.join(" ");
-      return withCSSSpatial(type);
+      return (0, import_react_sdk3.withCSSSpatial)(type);
     }
   }
   return type;
 }
-function jsxs8(type, props, key) {
+function jsxs(type, props, key) {
   type = replaceToSpatialPrimitiveType(type, props);
-  return import_jsx_runtime16.default.jsxs(type, props, key);
+  return import_jsx_runtime.default.jsxs(type, props, key);
 }
-function jsx15(type, props, key) {
+function jsx(type, props, key) {
   type = replaceToSpatialPrimitiveType(type, props);
-  return import_jsx_runtime16.default.jsx(type, props, key);
+  return import_jsx_runtime.default.jsx(type, props, key);
 }
 
 // src/jsx/jsx-runtime.ts