@webspatial/react-sdk 1.0.4 → 1.0.5

package/dist/jsx/jsx-dev-runtime.d.ts

@@ -1,7 +1,7 @@
 export { Fragment } from 'react/jsx-runtime';
 import * as react from 'react';
 import { JSXSource } from 'react/jsx-dev-runtime';
-import { WindowContainerOptions } from '@webspatial/core-sdk';
+import { SpatialTapEvent, SpatialDragStartEvent, SpatialDragEvent, SpatialDragEndEvent, SpatialRotateStartEvent, SpatialRotateEvent, SpatialRotateEndEvent, SpatialMagnifyStartEvent, SpatialMagnifyEvent, SpatialMagnifyEndEvent } from '@webspatial/react-sdk';
 
 declare function jsxs(type: React.ElementType, props: unknown, key?: React.Key): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 declare function jsx(type: React.ElementType, props: unknown, key?: React.Key): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
@@ -45,6 +45,16 @@ declare namespace WebSpatialJSX {
         [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
             style?: React.CSSProperties;
             'enable-xr'?: boolean;
+            onSpatialTap?: (e: SpatialTapEvent) => void;
+            onSpatialDragStart?: (e: SpatialDragStartEvent) => void;
+            onSpatialDrag?: (e: SpatialDragEvent) => void;
+            onSpatialDragEnd?: (e: SpatialDragEndEvent) => void;
+            onSpatialRotateStart?: (e: SpatialRotateStartEvent) => void;
+            onSpatialRotate?: (e: SpatialRotateEvent) => void;
+            onSpatialRotateEnd?: (e: SpatialRotateEndEvent) => void;
+            onSpatialMagnifyStart?: (e: SpatialMagnifyStartEvent) => void;
+            onSpatialMagnify?: (e: SpatialMagnifyEvent) => void;
+            onSpatialMagnifyEnd?: (e: SpatialMagnifyEndEvent) => void;
         };
     };
 }
@@ -52,20 +62,17 @@ declare module 'react' {
     interface CSSProperties {
         '--xr-background-material'?: string;
         '--xr-back'?: number | string;
+        '--xr-depth'?: number | string;
         '--xr-z-index'?: number | string;
         enableXr?: boolean;
     }
 }
-declare global {
-    interface Window {
-        xrCurrentSceneDefaults: (defaultConfig: WindowContainerOptions) => Promise<WindowContainerOptions>;
-    }
-}
 
 declare global {
     interface CSSStyleDeclaration {
         '--xr-background-material'?: string;
         '--xr-back'?: number | string;
+        '--xr-depth'?: number | string;
         '--xr-z-index'?: number | string;
         enableXr?: boolean;
     }

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

@@ -2,232 +2,34 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.0.4"
+        window.__webspatialsdk__['react-sdk-version'] = "1.0.5"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
 
-// src/polyfill/spatialPolyfill.ts
-import { parseCornerRadius, getSession as getSession2, XRApp as XRApp2 } from "@webspatial/react-sdk";
-
-// src/polyfill/injectSceneHook.ts
-import { getSession } from "@webspatial/react-sdk";
-import { defaultSceneConfig, XRApp } from "@webspatial/react-sdk";
-async function injectSceneHook() {
-  if (!window.opener) return;
-  if (window._SceneHookOff) return;
-  await getSession()?.setLoading("show");
-  function onContentLoaded(callback) {
-    if (document.readyState === "interactive" || document.readyState === "complete") {
-      callback();
-    } else {
-      document.addEventListener("DOMContentLoaded", callback);
-    }
-  }
-  onContentLoaded(async () => {
-    let cfg = defaultSceneConfig;
-    if (typeof window.xrCurrentSceneDefaults === "function") {
-      try {
-        cfg = await window.xrCurrentSceneDefaults?.(defaultSceneConfig);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    await new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve(null);
-      }, 1e3);
-    });
-    await getSession()?.setLoading("hide");
-    await XRApp.getInstance().show(window, cfg);
-  });
-}
-
-// src/polyfill/spatialPolyfill.ts
-var isWebSpatialEnv = getSession2() !== null;
-var SpatialGlobalCustomVars = {
-  backgroundMaterial: "--xr-background-material"
-};
-var htmlBackgroundMaterial = "";
-function setCurrentWindowStyle(backgroundMaterial) {
-  if (backgroundMaterial !== htmlBackgroundMaterial) {
-    const session = getSession2();
-    session.getCurrentWindowComponent().setStyle({
-      material: { type: backgroundMaterial }
-    });
-    htmlBackgroundMaterial = backgroundMaterial;
-  }
-}
-function checkHtmlBackgroundMaterial() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const backgroundMaterial = computedStyle.getPropertyValue(
-    SpatialGlobalCustomVars.backgroundMaterial
-  );
-  setCurrentWindowStyle(backgroundMaterial || "none");
-}
-var htmlCornerRadius = {
-  topLeading: 0,
-  bottomLeading: 0,
-  topTrailing: 0,
-  bottomTrailing: 0
-};
-function checkCornerRadius() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const cornerRadius = parseCornerRadius(computedStyle);
-  setCornerRadius(cornerRadius);
-}
-function setCornerRadius(cornerRadius) {
-  if (htmlCornerRadius.topLeading !== cornerRadius.topLeading || htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading || htmlCornerRadius.topTrailing !== cornerRadius.topTrailing || htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing) {
-    const session = getSession2();
-    if (!session) return;
-    session.getCurrentWindowComponent().setStyle({
-      cornerRadius
-    });
-    htmlCornerRadius.topLeading = cornerRadius.topLeading;
-    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
-    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
-    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
-  }
-}
-function setOpacity(opacity) {
-  const session = getSession2();
-  if (!session) return;
-  session.getCurrentWindowComponent().setOpacity(opacity);
-}
-function checkOpacity() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
-  setOpacity(opacity);
-}
-async function setHtmlVisible(visible) {
-  const session = getSession2();
-  if (!session) return;
-  const wc = session.getCurrentWindowComponent();
-  const ent = await wc.getEntity();
-  ent?.setVisible(visible);
-}
-function checkHtmlVisible() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const visibility = computedStyle.getPropertyValue("visibility") !== "hidden";
-  setHtmlVisible(visibility);
-}
-function hijackDocumentElementStyle() {
-  const rawDocumentStyle = document.documentElement.style;
-  const styleProxy = new Proxy(rawDocumentStyle, {
-    set: function(target, key, value) {
-      const ret = Reflect.set(target, key, value);
-      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
-        setCurrentWindowStyle(value);
-      }
-      if (key === "border-radius" || key === "borderRadius" || key === "border-top-left-radius" || key === "borderTopLeftRadius" || key === "border-top-right-radius" || key === "borderTopRightRadius" || key === "border-bottom-left-radius" || key === "borderBottomLeftRadius" || key === "border-bottom-right-radius" || key === "borderBottomRightRadius") {
-        checkCornerRadius();
-      }
-      if (key === "opacity") {
-        checkOpacity();
-      }
-      if (key === "visibility" || key === "display") {
-        checkHtmlVisible();
-      }
-      return ret;
-    },
-    get: function(target, prop) {
-      if (typeof target[prop] === "function") {
-        return function(...args) {
-          if (prop === "setProperty") {
-            const [property, value] = args;
-            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
-              setCurrentWindowStyle(value);
-            }
-          } else if (prop === "removeProperty") {
-            const [property] = args;
-            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
-              setCurrentWindowStyle("none");
-            }
-          }
-          return target[prop](
-            ...args
-          );
-        };
-      }
-      return Reflect.get(target, prop);
-    }
-  });
-  Object.defineProperty(document.documentElement, "style", {
-    get: function() {
-      return styleProxy;
-    }
-  });
-}
-function monitorExternalStyleChange() {
-  const headObserver = new MutationObserver(function(mutationsList) {
-    checkCSSProperties();
-  });
-  headObserver.observe(document.head, { childList: true, subtree: true });
-}
-function checkCSSProperties() {
-  checkHtmlBackgroundMaterial();
-  checkCornerRadius();
-  checkOpacity();
-  checkHtmlVisible();
-  window.addEventListener("resize", checkHtmlVisible);
-}
-function hijackGetComputedStyle() {
-  const rawFn = window.getComputedStyle.bind(window);
-  window.getComputedStyle = (element, pseudoElt) => {
-    if (element.__isSpatialDiv) {
-      return element.__getComputedStyle(rawFn, pseudoElt);
-    }
-    return rawFn(element, pseudoElt);
-  };
-}
-function hijackWindowOpen() {
-  XRApp2.getInstance().init();
-}
-function monitorHTMLAttributeChange() {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.type === "attributes" && mutation.attributeName) {
-        checkCSSProperties();
-      }
-    });
-  });
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["style", "class"]
-  });
-  window.addEventListener("load", () => {
-    checkCSSProperties();
-  });
-}
-function spatialPolyfill() {
-  if (!isWebSpatialEnv) {
-    return;
-  }
-  injectSceneHook();
-  hijackWindowOpen();
-  checkCSSProperties();
-  hijackGetComputedStyle();
-  hijackDocumentElementStyle();
-  monitorExternalStyleChange();
-  monitorHTMLAttributeChange();
-}
-
 // src/jsx/jsx-dev-runtime.ts
 import { Fragment } from "react/jsx-runtime";
 
 // src/jsx/jsx-shared.ts
 import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import reactJSXRuntime from "react/jsx-runtime";
-import { withCSSSpatial, withSpatialMonitor } from "@webspatial/react-sdk";
+import {
+  withSpatialMonitor,
+  withSpatialized2DElementContainer,
+  Model
+} from "@webspatial/react-sdk";
 var attributeFlag = "enable-xr";
 var styleFlag = "enableXr";
 var classFlag = "__enableXr__";
 var xrMonitorFlag = "enable-xr-monitor";
 function replaceToSpatialPrimitiveType(type, props) {
+  if (type === Model) {
+    return type;
+  }
   const propsObject = props;
   if (attributeFlag in propsObject) {
     delete propsObject[attributeFlag];
-    return withCSSSpatial(type);
+    return withSpatialized2DElementContainer(type);
   }
   if (xrMonitorFlag in propsObject) {
     delete propsObject[xrMonitorFlag];
@@ -235,7 +37,7 @@ function replaceToSpatialPrimitiveType(type, props) {
   }
   if (propsObject && propsObject.style && styleFlag in propsObject.style) {
     delete propsObject.style[styleFlag];
-    return withCSSSpatial(type);
+    return withSpatialized2DElementContainer(type);
   }
   if (propsObject && propsObject.className) {
     const originalClassNames = propsObject.className.split(" ");
@@ -243,7 +45,7 @@ function replaceToSpatialPrimitiveType(type, props) {
     if (idx !== -1) {
       originalClassNames.splice(idx, 1);
       propsObject.className = originalClassNames.join(" ");
-      return withCSSSpatial(type);
+      return withSpatialized2DElementContainer(type);
     }
   }
   return type;
@@ -256,9 +58,6 @@ function jsxDEV(type, props, key, isStatic, source, self) {
   type = replaceToSpatialPrimitiveType(type, props);
   return _jsxDEV(type, props, key, isStatic, source, self);
 }
-
-// src/jsx/jsx-dev-runtime.ts
-spatialPolyfill();
 export {
   Fragment,
   jsx,

package/dist/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/polyfill/spatialPolyfill.ts","../../src/polyfill/injectSceneHook.ts","../../src/jsx/jsx-dev-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["//@ts-ignore\nimport { parseCornerRadius, getSession, XRApp } from '@webspatial/react-sdk'\nimport { injectSceneHook } from './injectSceneHook'\n\nconst isWebSpatialEnv = getSession() !== null\n\nconst SpatialGlobalCustomVars = {\n  backgroundMaterial: '--xr-background-material',\n}\n\n// keep track of current html background material\nlet htmlBackgroundMaterial = ''\nfunction setCurrentWindowStyle(backgroundMaterial: string) {\n  if (backgroundMaterial !== htmlBackgroundMaterial) {\n    const session = getSession()!\n    session.getCurrentWindowComponent().setStyle({\n      material: { type: backgroundMaterial as any },\n    })\n    htmlBackgroundMaterial = backgroundMaterial\n  }\n}\n\nfunction checkHtmlBackgroundMaterial() {\n  const computedStyle = getComputedStyle(document.documentElement)\n\n  const backgroundMaterial = computedStyle.getPropertyValue(\n    SpatialGlobalCustomVars.backgroundMaterial,\n  )\n\n  setCurrentWindowStyle(backgroundMaterial || 'none')\n}\n\n// keep track of current corner radius\nlet htmlCornerRadius = {\n  topLeading: 0,\n  bottomLeading: 0,\n  topTrailing: 0,\n  bottomTrailing: 0,\n}\nfunction checkCornerRadius() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const cornerRadius = parseCornerRadius(computedStyle)\n  setCornerRadius(cornerRadius)\n}\n\nfunction setCornerRadius(cornerRadius: any) {\n  if (\n    htmlCornerRadius.topLeading !== cornerRadius.topLeading ||\n    htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading ||\n    htmlCornerRadius.topTrailing !== cornerRadius.topTrailing ||\n    htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing\n  ) {\n    const session = getSession()!\n    if (!session) return\n    session.getCurrentWindowComponent().setStyle({\n      cornerRadius,\n    })\n    htmlCornerRadius.topLeading = cornerRadius.topLeading\n    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading\n    htmlCornerRadius.topTrailing = cornerRadius.topTrailing\n    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing\n  }\n}\n\nfunction setOpacity(opacity: number) {\n  const session = getSession()!\n  if (!session) return\n  session.getCurrentWindowComponent().setOpacity(opacity)\n}\n\nfunction checkOpacity() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const opacity = parseFloat(computedStyle.getPropertyValue('opacity'))\n  setOpacity(opacity)\n}\n\nasync function setHtmlVisible(visible: boolean) {\n  const session = getSession()!\n  if (!session) return\n  const wc = session.getCurrentWindowComponent()\n  const ent = await wc.getEntity()\n  ent?.setVisible(visible)\n}\n\nfunction checkHtmlVisible() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const visibility = computedStyle.getPropertyValue('visibility') !== 'hidden'\n  setHtmlVisible(visibility)\n}\n\nfunction hijackDocumentElementStyle() {\n  const rawDocumentStyle = document.documentElement.style\n  const styleProxy = new Proxy(rawDocumentStyle, {\n    set: function (target, key, value) {\n      const ret = Reflect.set(target, key, value)\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        setCurrentWindowStyle(value)\n      }\n\n      if (\n        key === 'border-radius' ||\n        key === 'borderRadius' ||\n        key === 'border-top-left-radius' ||\n        key === 'borderTopLeftRadius' ||\n        key === 'border-top-right-radius' ||\n        key === 'borderTopRightRadius' ||\n        key === 'border-bottom-left-radius' ||\n        key === 'borderBottomLeftRadius' ||\n        key === 'border-bottom-right-radius' ||\n        key === 'borderBottomRightRadius'\n      ) {\n        checkCornerRadius()\n      }\n\n      if (key === 'opacity') {\n        checkOpacity()\n      }\n\n      if (key === 'visibility' || key === 'display') {\n        checkHtmlVisible()\n      }\n\n      return ret\n    },\n    get: function (target, prop: string) {\n      if (typeof target[prop as keyof CSSStyleDeclaration] === 'function') {\n        return function (this: any, ...args: any[]) {\n          if (prop === 'setProperty') {\n            const [property, value] = args\n            if (property === SpatialGlobalCustomVars.backgroundMaterial) {\n              setCurrentWindowStyle(value)\n            }\n          } else if (prop === 'removeProperty') {\n            const [property] = args\n            if (property === SpatialGlobalCustomVars.backgroundMaterial) {\n              setCurrentWindowStyle('none')\n            }\n          }\n          return (target[prop as keyof CSSStyleDeclaration] as Function)(\n            ...args,\n          )\n        }\n      }\n      return Reflect.get(target, prop)\n    },\n  })\n  Object.defineProperty(document.documentElement, 'style', {\n    get: function () {\n      return styleProxy\n    },\n  })\n}\n\nfunction monitorExternalStyleChange() {\n  const headObserver = new MutationObserver(function (mutationsList) {\n    checkCSSProperties()\n  })\n\n  headObserver.observe(document.head, { childList: true, subtree: true })\n}\n\nfunction checkCSSProperties() {\n  checkHtmlBackgroundMaterial()\n  checkCornerRadius()\n  checkOpacity()\n  checkHtmlVisible()\n  window.addEventListener('resize', checkHtmlVisible)\n}\n\nfunction hijackGetComputedStyle() {\n  const rawFn = window.getComputedStyle.bind(window)\n  window.getComputedStyle = (element, pseudoElt) => {\n    if ((element as any).__isSpatialDiv) {\n      return (element as any).__getComputedStyle(rawFn, pseudoElt)\n    }\n    return rawFn(element, pseudoElt)\n  }\n}\n\nfunction hijackWindowOpen() {\n  XRApp.getInstance().init()\n}\n\nfunction monitorHTMLAttributeChange() {\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes' && mutation.attributeName) {\n        checkCSSProperties()\n      }\n    })\n  })\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['style', 'class'],\n  })\n\n  // some css may still loading, need to checkCSSProperties after all window document loaded\n  window.addEventListener('load', () => {\n    checkCSSProperties()\n  })\n}\n\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n  monitorHTMLAttributeChange()\n}\n","//@ts-ignore\nimport { getSession } from '@webspatial/react-sdk'\n//@ts-ignore\nimport { defaultSceneConfig, XRApp } from '@webspatial/react-sdk'\n\nexport async function injectSceneHook() {\n  if (!window.opener) return\n  if ((window as any)._SceneHookOff) return\n\n  await getSession()?.setLoading('show')\n  // see this flag, we have done create the root scene\n\n  function onContentLoaded(callback: any) {\n    if (\n      document.readyState === 'interactive' ||\n      document.readyState === 'complete'\n    ) {\n      callback()\n    } else {\n      document.addEventListener('DOMContentLoaded', callback)\n    }\n  }\n\n  onContentLoaded(async () => {\n    let cfg = defaultSceneConfig\n    if (typeof (window as any).xrCurrentSceneDefaults === 'function') {\n      try {\n        cfg = await (window as any).xrCurrentSceneDefaults?.(defaultSceneConfig)\n      } catch (error) {\n        console.error(error)\n      }\n    }\n    // fixme: this duration is too short so that hide and show is at racing, so add a little delay to avoid\n    await new Promise((resolve, reject) => {\n      setTimeout(() => {\n        resolve(null)\n      }, 1000)\n    })\n    await getSession()?.setLoading('hide')\n    await XRApp.getInstance().show(window, cfg)\n  })\n}\n","import { spatialPolyfill } from '../polyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsxDEV, jsx } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\nexport * from './xr-css-extension'\n","import { jsxDEV as _jsxDEV, JSXSource } from 'react/jsx-dev-runtime'\nimport reactJSXRuntime from 'react/jsx-runtime'\n//@ts-ignore bypass ts check for external\nimport { withCSSSpatial, withSpatialMonitor } from '@webspatial/react-sdk'\nconst attributeFlag = 'enable-xr'\nconst styleFlag = 'enableXr'\nconst classFlag = '__enableXr__'\nconst xrMonitorFlag = 'enable-xr-monitor'\n\nexport function replaceToSpatialPrimitiveType(\n  type: React.ElementType,\n  props: unknown,\n) {\n  const propsObject = props as Record<string, any>\n  if (attributeFlag in propsObject) {\n    delete propsObject[attributeFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (xrMonitorFlag in propsObject) {\n    delete propsObject[xrMonitorFlag]\n    return withSpatialMonitor(type)\n  }\n\n  if (propsObject && propsObject.style && styleFlag in propsObject.style) {\n    delete propsObject.style[styleFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (propsObject && propsObject.className) {\n    const originalClassNames = propsObject.className.split(' ')\n    const idx = originalClassNames.indexOf(classFlag)\n    if (idx !== -1) {\n      originalClassNames.splice(idx, 1)\n      propsObject.className = originalClassNames.join(' ')\n      return withCSSSpatial(type)\n    }\n  }\n\n  return type\n}\n\nexport function jsxs(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsxs(type, props, key)\n}\n\nexport function jsx(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsx(type, props, key)\n}\n\nexport function jsxDEV(\n  type: React.ElementType,\n  props: unknown,\n  key: React.Key,\n  isStatic: boolean,\n  source?: JSXSource,\n  self?: unknown,\n) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return _jsxDEV(type, props, key, isStatic, source, self)\n}\n"],"mappings":"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","names":["getSession","XRApp","getSession","XRApp"]}
+{"version":3,"sources":["../../src/jsx/jsx-dev-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["export { Fragment } from 'react/jsx-runtime'\nexport { jsxDEV, jsx } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\nexport * from './xr-css-extension'\n","import { jsxDEV as _jsxDEV, JSXSource } from 'react/jsx-dev-runtime'\nimport reactJSXRuntime from 'react/jsx-runtime'\nimport {\n  withSpatialMonitor,\n  withSpatialized2DElementContainer,\n  Model,\n  //@ts-ignore bypass ts check for external\n} from '@webspatial/react-sdk'\nconst attributeFlag = 'enable-xr'\nconst styleFlag = 'enableXr'\nconst classFlag = '__enableXr__'\nconst xrMonitorFlag = 'enable-xr-monitor'\n\nexport function replaceToSpatialPrimitiveType(\n  type: React.ElementType,\n  props: unknown,\n) {\n  if (type === Model) {\n    return type\n  }\n\n  const propsObject = props as Record<string, any>\n  if (attributeFlag in propsObject) {\n    delete propsObject[attributeFlag]\n    return withSpatialized2DElementContainer(type)\n  }\n\n  if (xrMonitorFlag in propsObject) {\n    delete propsObject[xrMonitorFlag]\n    return withSpatialMonitor(type)\n  }\n\n  if (propsObject && propsObject.style && styleFlag in propsObject.style) {\n    delete propsObject.style[styleFlag]\n    return withSpatialized2DElementContainer(type)\n  }\n\n  if (propsObject && propsObject.className) {\n    const originalClassNames = propsObject.className.split(' ')\n    const idx = originalClassNames.indexOf(classFlag)\n    if (idx !== -1) {\n      originalClassNames.splice(idx, 1)\n      propsObject.className = originalClassNames.join(' ')\n      return withSpatialized2DElementContainer(type)\n    }\n  }\n\n  return type\n}\n\nexport function jsxs(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsxs(type, props, key)\n}\n\nexport function jsx(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsx(type, props, key)\n}\n\nexport function jsxDEV(\n  type: React.ElementType,\n  props: unknown,\n  key: React.Key,\n  isStatic: boolean,\n  source?: JSXSource,\n  self?: unknown,\n) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return _jsxDEV(type, props, key, isStatic, source, self)\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,gBAAgB;;;ACAzB,SAAS,UAAU,eAA0B;AAC7C,OAAO,qBAAqB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,IAAM,gBAAgB;AACtB,IAAM,YAAY;AAClB,IAAM,YAAY;AAClB,IAAM,gBAAgB;AAEf,SAAS,8BACd,MACA,OACA;AACA,MAAI,SAAS,OAAO;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,cAAc;AACpB,MAAI,iBAAiB,aAAa;AAChC,WAAO,YAAY,aAAa;AAChC,WAAO,kCAAkC,IAAI;AAAA,EAC/C;AAEA,MAAI,iBAAiB,aAAa;AAChC,WAAO,YAAY,aAAa;AAChC,WAAO,mBAAmB,IAAI;AAAA,EAChC;AAEA,MAAI,eAAe,YAAY,SAAS,aAAa,YAAY,OAAO;AACtE,WAAO,YAAY,MAAM,SAAS;AAClC,WAAO,kCAAkC,IAAI;AAAA,EAC/C;AAEA,MAAI,eAAe,YAAY,WAAW;AACxC,UAAM,qBAAqB,YAAY,UAAU,MAAM,GAAG;AAC1D,UAAM,MAAM,mBAAmB,QAAQ,SAAS;AAChD,QAAI,QAAQ,IAAI;AACd,yBAAmB,OAAO,KAAK,CAAC;AAChC,kBAAY,YAAY,mBAAmB,KAAK,GAAG;AACnD,aAAO,kCAAkC,IAAI;AAAA,IAC/C;AAAA,EACF;AAEA,SAAO;AACT;AAOO,SAAS,IAAI,MAAyB,OAAgB,KAAiB;AAC5E,SAAO,8BAA8B,MAAM,KAAK;AAChD,SAAO,gBAAgB,IAAI,MAAM,OAAO,GAAG;AAC7C;AAEO,SAAS,OACd,MACA,OACA,KACA,UACA,QACA,MACA;AACA,SAAO,8BAA8B,MAAM,KAAK;AAChD,SAAO,QAAQ,MAAM,OAAO,KAAK,UAAU,QAAQ,IAAI;AACzD;","names":[]}

package/dist/jsx/jsx-dev-runtime.web.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.0.4"
+        window.__webspatialsdk__['react-sdk-version'] = "1.0.5"
         window.__webspatialsdk__['XR_ENV'] = "web"
     })()
       

package/dist/jsx/jsx-runtime.d.ts

@@ -2,4 +2,4 @@ export { Fragment } from 'react/jsx-runtime';
 export { JSX, jsx, j as jsxs } from './jsx-dev-runtime.js';
 import 'react';
 import 'react/jsx-dev-runtime';
-import '@webspatial/core-sdk';
+import '@webspatial/react-sdk';

package/dist/jsx/jsx-runtime.js

@@ -2,232 +2,34 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "1.0.4"
+        window.__webspatialsdk__['react-sdk-version'] = "1.0.5"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
 
-// src/polyfill/spatialPolyfill.ts
-import { parseCornerRadius, getSession as getSession2, XRApp as XRApp2 } from "@webspatial/react-sdk";
-
-// src/polyfill/injectSceneHook.ts
-import { getSession } from "@webspatial/react-sdk";
-import { defaultSceneConfig, XRApp } from "@webspatial/react-sdk";
-async function injectSceneHook() {
-  if (!window.opener) return;
-  if (window._SceneHookOff) return;
-  await getSession()?.setLoading("show");
-  function onContentLoaded(callback) {
-    if (document.readyState === "interactive" || document.readyState === "complete") {
-      callback();
-    } else {
-      document.addEventListener("DOMContentLoaded", callback);
-    }
-  }
-  onContentLoaded(async () => {
-    let cfg = defaultSceneConfig;
-    if (typeof window.xrCurrentSceneDefaults === "function") {
-      try {
-        cfg = await window.xrCurrentSceneDefaults?.(defaultSceneConfig);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-    await new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve(null);
-      }, 1e3);
-    });
-    await getSession()?.setLoading("hide");
-    await XRApp.getInstance().show(window, cfg);
-  });
-}
-
-// src/polyfill/spatialPolyfill.ts
-var isWebSpatialEnv = getSession2() !== null;
-var SpatialGlobalCustomVars = {
-  backgroundMaterial: "--xr-background-material"
-};
-var htmlBackgroundMaterial = "";
-function setCurrentWindowStyle(backgroundMaterial) {
-  if (backgroundMaterial !== htmlBackgroundMaterial) {
-    const session = getSession2();
-    session.getCurrentWindowComponent().setStyle({
-      material: { type: backgroundMaterial }
-    });
-    htmlBackgroundMaterial = backgroundMaterial;
-  }
-}
-function checkHtmlBackgroundMaterial() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const backgroundMaterial = computedStyle.getPropertyValue(
-    SpatialGlobalCustomVars.backgroundMaterial
-  );
-  setCurrentWindowStyle(backgroundMaterial || "none");
-}
-var htmlCornerRadius = {
-  topLeading: 0,
-  bottomLeading: 0,
-  topTrailing: 0,
-  bottomTrailing: 0
-};
-function checkCornerRadius() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const cornerRadius = parseCornerRadius(computedStyle);
-  setCornerRadius(cornerRadius);
-}
-function setCornerRadius(cornerRadius) {
-  if (htmlCornerRadius.topLeading !== cornerRadius.topLeading || htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading || htmlCornerRadius.topTrailing !== cornerRadius.topTrailing || htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing) {
-    const session = getSession2();
-    if (!session) return;
-    session.getCurrentWindowComponent().setStyle({
-      cornerRadius
-    });
-    htmlCornerRadius.topLeading = cornerRadius.topLeading;
-    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
-    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
-    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
-  }
-}
-function setOpacity(opacity) {
-  const session = getSession2();
-  if (!session) return;
-  session.getCurrentWindowComponent().setOpacity(opacity);
-}
-function checkOpacity() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
-  setOpacity(opacity);
-}
-async function setHtmlVisible(visible) {
-  const session = getSession2();
-  if (!session) return;
-  const wc = session.getCurrentWindowComponent();
-  const ent = await wc.getEntity();
-  ent?.setVisible(visible);
-}
-function checkHtmlVisible() {
-  const computedStyle = getComputedStyle(document.documentElement);
-  const visibility = computedStyle.getPropertyValue("visibility") !== "hidden";
-  setHtmlVisible(visibility);
-}
-function hijackDocumentElementStyle() {
-  const rawDocumentStyle = document.documentElement.style;
-  const styleProxy = new Proxy(rawDocumentStyle, {
-    set: function(target, key, value) {
-      const ret = Reflect.set(target, key, value);
-      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
-        setCurrentWindowStyle(value);
-      }
-      if (key === "border-radius" || key === "borderRadius" || key === "border-top-left-radius" || key === "borderTopLeftRadius" || key === "border-top-right-radius" || key === "borderTopRightRadius" || key === "border-bottom-left-radius" || key === "borderBottomLeftRadius" || key === "border-bottom-right-radius" || key === "borderBottomRightRadius") {
-        checkCornerRadius();
-      }
-      if (key === "opacity") {
-        checkOpacity();
-      }
-      if (key === "visibility" || key === "display") {
-        checkHtmlVisible();
-      }
-      return ret;
-    },
-    get: function(target, prop) {
-      if (typeof target[prop] === "function") {
-        return function(...args) {
-          if (prop === "setProperty") {
-            const [property, value] = args;
-            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
-              setCurrentWindowStyle(value);
-            }
-          } else if (prop === "removeProperty") {
-            const [property] = args;
-            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
-              setCurrentWindowStyle("none");
-            }
-          }
-          return target[prop](
-            ...args
-          );
-        };
-      }
-      return Reflect.get(target, prop);
-    }
-  });
-  Object.defineProperty(document.documentElement, "style", {
-    get: function() {
-      return styleProxy;
-    }
-  });
-}
-function monitorExternalStyleChange() {
-  const headObserver = new MutationObserver(function(mutationsList) {
-    checkCSSProperties();
-  });
-  headObserver.observe(document.head, { childList: true, subtree: true });
-}
-function checkCSSProperties() {
-  checkHtmlBackgroundMaterial();
-  checkCornerRadius();
-  checkOpacity();
-  checkHtmlVisible();
-  window.addEventListener("resize", checkHtmlVisible);
-}
-function hijackGetComputedStyle() {
-  const rawFn = window.getComputedStyle.bind(window);
-  window.getComputedStyle = (element, pseudoElt) => {
-    if (element.__isSpatialDiv) {
-      return element.__getComputedStyle(rawFn, pseudoElt);
-    }
-    return rawFn(element, pseudoElt);
-  };
-}
-function hijackWindowOpen() {
-  XRApp2.getInstance().init();
-}
-function monitorHTMLAttributeChange() {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.type === "attributes" && mutation.attributeName) {
-        checkCSSProperties();
-      }
-    });
-  });
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["style", "class"]
-  });
-  window.addEventListener("load", () => {
-    checkCSSProperties();
-  });
-}
-function spatialPolyfill() {
-  if (!isWebSpatialEnv) {
-    return;
-  }
-  injectSceneHook();
-  hijackWindowOpen();
-  checkCSSProperties();
-  hijackGetComputedStyle();
-  hijackDocumentElementStyle();
-  monitorExternalStyleChange();
-  monitorHTMLAttributeChange();
-}
-
 // src/jsx/jsx-runtime.ts
 import { Fragment } from "react/jsx-runtime";
 
 // src/jsx/jsx-shared.ts
 import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import reactJSXRuntime from "react/jsx-runtime";
-import { withCSSSpatial, withSpatialMonitor } from "@webspatial/react-sdk";
+import {
+  withSpatialMonitor,
+  withSpatialized2DElementContainer,
+  Model
+} from "@webspatial/react-sdk";
 var attributeFlag = "enable-xr";
 var styleFlag = "enableXr";
 var classFlag = "__enableXr__";
 var xrMonitorFlag = "enable-xr-monitor";
 function replaceToSpatialPrimitiveType(type, props) {
+  if (type === Model) {
+    return type;
+  }
   const propsObject = props;
   if (attributeFlag in propsObject) {
     delete propsObject[attributeFlag];
-    return withCSSSpatial(type);
+    return withSpatialized2DElementContainer(type);
   }
   if (xrMonitorFlag in propsObject) {
     delete propsObject[xrMonitorFlag];
@@ -235,7 +37,7 @@ function replaceToSpatialPrimitiveType(type, props) {
   }
   if (propsObject && propsObject.style && styleFlag in propsObject.style) {
     delete propsObject.style[styleFlag];
-    return withCSSSpatial(type);
+    return withSpatialized2DElementContainer(type);
   }
   if (propsObject && propsObject.className) {
     const originalClassNames = propsObject.className.split(" ");
@@ -243,7 +45,7 @@ function replaceToSpatialPrimitiveType(type, props) {
     if (idx !== -1) {
       originalClassNames.splice(idx, 1);
       propsObject.className = originalClassNames.join(" ");
-      return withCSSSpatial(type);
+      return withSpatialized2DElementContainer(type);
     }
   }
   return type;
@@ -256,9 +58,6 @@ function jsx(type, props, key) {
   type = replaceToSpatialPrimitiveType(type, props);
   return reactJSXRuntime.jsx(type, props, key);
 }
-
-// src/jsx/jsx-runtime.ts
-spatialPolyfill();
 export {
   Fragment,
   jsx,