@webspatial/react-sdk 0.1.0 → 0.1.2

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

@@ -1,4 +1,4 @@
 export { Fragment } from 'react/jsx-runtime';
-export { a as jsx, j as jsxDEV } from './jsx-runtime-C06ExmCC.js';
+export { W as JSX, a as jsx, j as jsxDEV } from './jsx-runtime-CgwWInpr.js';
 import 'react';
 import 'react/jsx-dev-runtime';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/jsx/spatialPolyfill.ts","../../src/jsx/injectSceneHook.ts","../../src/jsx/jsx-dev-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["import { getSession, parseCornerRadius, 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  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\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    for (const mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        let needCheck = false\n        mutation.addedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n\n          if (node.nodeName === 'STYLE') {\n            needCheck = true\n          }\n        })\n\n        mutation.removedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n        })\n\n        if (needCheck) {\n          checkCSSProperties()\n        }\n      }\n    }\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\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n}\n","import { defaultSceneConfig, XRApp, getSession } 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?.()\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 './spatialPolyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsxDEV, jsx } from './jsx-shared'\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/spatialPolyfill.ts","../../src/jsx/injectSceneHook.ts","../../src/jsx/jsx-dev-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["import { getSession, parseCornerRadius, 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  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\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    for (const mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        let needCheck = false\n        mutation.addedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n\n          if (node.nodeName === 'STYLE') {\n            needCheck = true\n          }\n        })\n\n        mutation.removedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n        })\n\n        if (needCheck) {\n          checkCSSProperties()\n        }\n      }\n    }\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\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n}\n","import { defaultSceneConfig, XRApp, getSession } 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?.()\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 './spatialPolyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsxDEV, jsx } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\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"]}

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

@@ -0,0 +1,48 @@
+import 'react/jsx-runtime';
+import * as react from 'react';
+import { JSXSource } from 'react/jsx-dev-runtime';
+
+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>>;
+declare function jsxDEV(type: React.ElementType, props: unknown, key: React.Key, isStatic: boolean, source?: JSXSource, self?: unknown): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXElement = true extends IsPreReact19 ? JSX.Element : React.JSX.Element;
+/** @ts-ignore */
+type ReactJSXElementClass = true extends IsPreReact19 ? JSX.ElementClass : React.JSX.ElementClass;
+/** @ts-ignore */
+type ReactJSXElementAttributesProperty = true extends IsPreReact19 ? JSX.ElementAttributesProperty : React.JSX.ElementAttributesProperty;
+/** @ts-ignore */
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19 ? JSX.ElementChildrenAttribute : React.JSX.ElementChildrenAttribute;
+/** @ts-ignore */
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19 ? JSX.LibraryManagedAttributes<C, P> : React.JSX.LibraryManagedAttributes<C, P>;
+/** @ts-ignore */
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19 ? JSX.IntrinsicAttributes : React.JSX.IntrinsicAttributes;
+/** @ts-ignore */
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19 ? JSX.IntrinsicClassAttributes<T> : React.JSX.IntrinsicClassAttributes<T>;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+/** @ts-ignore */
+type ReactJSXElementType = true extends IsPreReact19 ? string | React.JSXElementConstructor<any> : React.JSX.ElementType;
+declare namespace WebSpatialJSX {
+    type ElementType = ReactJSXElementType;
+    interface Element extends ReactJSXElement {
+    }
+    interface ElementClass extends ReactJSXElementClass {
+    }
+    interface ElementAttributesProperty extends ReactJSXElementAttributesProperty {
+    }
+    interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {
+    }
+    type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>;
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {
+    }
+    interface IntrinsicClassAttributes<T> extends ReactJSXIntrinsicClassAttributes<T> {
+    }
+    type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K];
+    };
+}
+
+export { WebSpatialJSX as W, jsx as a, jsxs as b, jsxDEV as j };

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

@@ -1,4 +1,4 @@
 export { Fragment } from 'react/jsx-runtime';
-export { a as jsx, b as jsxs } from './jsx-runtime-C06ExmCC.js';
+export { W as JSX, a as jsx, b as jsxs } from './jsx-runtime-CgwWInpr.js';
 import 'react';
 import 'react/jsx-dev-runtime';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/jsx/spatialPolyfill.ts","../../src/jsx/injectSceneHook.ts","../../src/jsx/jsx-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["import { getSession, parseCornerRadius, 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  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\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    for (const mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        let needCheck = false\n        mutation.addedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n\n          if (node.nodeName === 'STYLE') {\n            needCheck = true\n          }\n        })\n\n        mutation.removedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n        })\n\n        if (needCheck) {\n          checkCSSProperties()\n        }\n      }\n    }\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\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n}\n","import { defaultSceneConfig, XRApp, getSession } 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?.()\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 './spatialPolyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsx, jsxs } from './jsx-shared'\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/spatialPolyfill.ts","../../src/jsx/injectSceneHook.ts","../../src/jsx/jsx-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["import { getSession, parseCornerRadius, 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  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\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    for (const mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        let needCheck = false\n        mutation.addedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n\n          if (node.nodeName === 'STYLE') {\n            needCheck = true\n          }\n        })\n\n        mutation.removedNodes.forEach(node => {\n          if (\n            node.nodeName === 'LINK' &&\n            (node as HTMLLinkElement).rel === 'stylesheet'\n          ) {\n            needCheck = true\n          }\n        })\n\n        if (needCheck) {\n          checkCSSProperties()\n        }\n      }\n    }\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\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n}\n","import { defaultSceneConfig, XRApp, getSession } 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?.()\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 './spatialPolyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsx, jsxs } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\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"]}

package/dist/web/index.js

@@ -3400,9 +3400,23 @@ function ModelBase(inProps, ref) {
     const isDragging = useRef12(false);
     let [modelViewerExists, setModelViewerExists] = useState6(false);
     useEffect16(() => {
+      var modelViewerFound = false;
       customElements.whenDefined("model-viewer").then(function() {
-        setModelViewerExists(true);
+        modelViewerFound = true;
+        setModelViewerExists(modelViewerFound);
       });
+      setTimeout(() => {
+        if (!modelViewerFound) {
+          console.warn(
+            'model-viewer element not loaded yet, if you want to fallback to webGL model loading, you must include the model-viewer library manually in your html file eg. \n\n <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>'
+          );
+          if (props2.onLoad) {
+            props2.onLoad({
+              target: { ready: false, currentSrc: gltfSourceURL }
+            });
+          }
+        }
+      }, 500);
     }, []);
     useEffect16(() => {
       if (!modelViewerExists) {
@@ -3493,7 +3507,14 @@ function ModelBase(inProps, ref) {
         "touch-action": "pan-y",
         poster: props2.poster
       }
-    ) : /* @__PURE__ */ jsx16(Fragment5, {}) });
+    ) : /* @__PURE__ */ jsx16(Fragment5, { children: props2.poster ? /* @__PURE__ */ jsx16(
+      "img",
+      {
+        className,
+        style: Object.assign(style, { objectFit: "contain" }),
+        src: props2.poster
+      }
+    ) : /* @__PURE__ */ jsx16(Fragment5, {}) }) });
   } else {
     return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
   }