@webspatial/core-sdk 1.0.4 → 1.0.5

package/dist/index.js

@@ -2,1521 +2,2405 @@
     (function(){
       if(typeof window === 'undefined') return;
       if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-      window.__webspatialsdk__['core-sdk-version'] = "1.0.4"
+      window.__webspatialsdk__['core-sdk-version'] = "1.0.5"
   })()
     
-
-// src/core/private/remote-command/RemoteCommand.ts
-var RemoteCommand = class _RemoteCommand {
-  static requestCounter = 0;
-  command;
-  data;
-  requestID;
-  constructor(cmd, data) {
-    this.command = cmd;
-    this.data = data;
-    this.requestID = ++_RemoteCommand.requestCounter;
-  }
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-
-// src/core/private/WebSpatial.ts
-var WindowContainer = class {
-  id = "";
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-var WebSpatialResource = class {
-  id = "";
-  windowContainerId = "";
-  data = {};
-  receiveEvent() {
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
 };
-var WebSpatial = class _WebSpatial {
-  static eventPromises = {};
-  static transactionStarted = false;
-  static transactionCommands = Array();
-  // store event receivers
-  static eventReceivers = {};
-  static registerEventReceiver(resourceId, callback) {
-    this.eventReceivers[resourceId] = callback;
-  }
-  static unregisterEventReceiver(resourceId) {
-    delete this.eventReceivers[resourceId];
-  }
-  static init() {
-    window.__SpatialWebEvent = (e) => {
-      if (e.resourceId) {
-        var callback = _WebSpatial.eventReceivers[e.resourceId];
-        callback(e.data);
-      } else {
-        var p = _WebSpatial.eventPromises[e.requestID];
-        if (p) {
-          if (e.success) {
-            p.res(e);
-          } else {
-            p.rej(e);
-          }
-        }
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ssr-polyfill.ts
+var isSSR, isSSREnv;
+var init_ssr_polyfill = __esm({
+  "src/ssr-polyfill.ts"() {
+    "use strict";
+    isSSR = typeof window === "undefined";
+    isSSREnv = () => isSSR;
+  }
+});
+
+// src/platform-adapter/ssr/SSRPlatform.ts
+var SSRPlatform;
+var init_SSRPlatform = __esm({
+  "src/platform-adapter/ssr/SSRPlatform.ts"() {
+    "use strict";
+    SSRPlatform = class {
+      callJSB(cmd, msg) {
+        return Promise.resolve({
+          success: true,
+          data: void 0,
+          errorCode: void 0,
+          errorMessage: void 0
+        });
+      }
+      callWebSpatialProtocol(schema, query, target, features) {
+        return Promise.resolve({
+          success: true,
+          data: void 0,
+          errorCode: void 0,
+          errorMessage: void 0
+        });
+      }
+      callWebSpatialProtocolSync(schema, query, target, features, resultCallback) {
+        return {
+          success: true,
+          data: void 0,
+          errorCode: void 0,
+          errorMessage: void 0
+        };
       }
     };
   }
-  static startTransaction() {
-    _WebSpatial.transactionStarted = true;
-    _WebSpatial.transactionCommands = [];
-  }
-  static async sendTransaction() {
-    _WebSpatial.transactionStarted = false;
-    var cmd = new RemoteCommand("multiCommand", {
-      commandList: _WebSpatial.transactionCommands
-    });
-    var result = await new Promise((res, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    return result;
-  }
-  static getBackend() {
-    if (window.webkit) {
-      return "AVP";
-    } else {
-      return "UNKNOWN";
-    }
-  }
-  static async sendCommand(cmd) {
-    if (window.__WebSpatialUnloaded) {
-      return;
-    }
-    if (_WebSpatial.transactionStarted) {
-      _WebSpatial.transactionCommands.push(cmd);
-      return;
-    }
-    var msg = JSON.stringify(cmd);
-    if (_WebSpatial.getBackend() == "AVP") {
-      window.webkit.messageHandlers.bridge.postMessage(msg);
-      return;
-    } else {
-      window.__WebSpatialData.androidNativeMessage(msg);
-      return;
-    }
+});
+
+// src/platform-adapter/CommandResultUtils.ts
+function CommandResultSuccess(data) {
+  return {
+    success: true,
+    data,
+    errorCode: "",
+    errorMessage: ""
+  };
+}
+function CommandResultFailure(errorCode, errorMessage = "") {
+  return {
+    success: false,
+    data: void 0,
+    errorCode,
+    errorMessage
+  };
+}
+var init_CommandResultUtils = __esm({
+  "src/platform-adapter/CommandResultUtils.ts"() {
+    "use strict";
   }
-  static getImmersiveWindowContainer() {
-    var wg = new WindowContainer();
-    wg.id = "Immersive";
-    return wg;
-  }
-  static getCurrentWindowContainer() {
-    var wg = new WindowContainer();
-    wg.id = "current";
-    return wg;
-  }
-  static getCurrentWebPanel() {
-    var wg = new WebSpatialResource();
-    wg.id = "current";
-    wg.windowContainerId = _WebSpatial.getCurrentWindowContainer().id;
-    return wg;
-  }
-  static async createScene(style = "Plain", cfg) {
-    const { window: newWindow, ...sceneData } = cfg.sceneData;
-    const jsbSceneData = {
-      ...sceneData,
-      windowID: newWindow._webSpatialID,
-      windowContainerID: newWindow._webSpatialGroupID
+});
+
+// src/SpatialWebEvent.ts
+var SpatialWebEvent;
+var init_SpatialWebEvent = __esm({
+  "src/SpatialWebEvent.ts"() {
+    "use strict";
+    SpatialWebEvent = class _SpatialWebEvent {
+      static eventReceiver = {};
+      static init() {
+        window.__SpatialWebEvent = ({ id, data }) => {
+          _SpatialWebEvent.eventReceiver[id]?.(data);
+        };
+      }
+      static addEventReceiver(id, callback) {
+        _SpatialWebEvent.eventReceiver[id] = callback;
+      }
+      static removeEventReceiver(id) {
+        delete _SpatialWebEvent.eventReceiver[id];
+      }
     };
-    var cmd = new RemoteCommand("createScene", {
-      windowStyle: style,
-      sceneData: jsbSceneData,
-      windowContainerID: window._webSpatialParentGroupID
-      // parent WindowContainerID
-    });
-    try {
-      await new Promise((res, rej) => {
-        _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-        _WebSpatial.sendCommand(cmd);
-      });
-      return true;
-    } catch (error) {
-      return false;
-    }
-  }
-  static async createWindowContainer(style = "Plain", windowContainer, parentWebView) {
-    var cmd = new RemoteCommand("createWindowContainer", {
-      windowStyle: style,
-      windowContainerID: windowContainer ? windowContainer.id : void 0,
-      resourceID: parentWebView ? parentWebView.id : void 0
-    });
-    var result = await new Promise((res2, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res: res2, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    var res = new WindowContainer();
-    res.id = result.data.createdID;
-    return res;
-  }
-  static async destroyResource(resource) {
-    const data = {};
-    var cmd = new RemoteCommand("destroyResource", {
-      windowContainerID: resource.windowContainerId,
-      resourceID: resource.id
-    });
-    _WebSpatial.sendCommand(cmd);
   }
-  static async ping(msg) {
-    var cmd = new RemoteCommand("ping", {
-      windowContainerID: this.getCurrentWindowContainer().id,
-      resourceID: this.getCurrentWebPanel().id,
-      message: msg
-    });
-    if (_WebSpatial.transactionStarted) {
-      _WebSpatial.sendCommand(cmd);
-      return null;
-    } else {
-      var result = await new Promise((res, rej) => {
-        _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-        _WebSpatial.sendCommand(cmd);
-      });
-      return result;
-    }
+});
+
+// src/platform-adapter/android/AndroidPlatform.ts
+var AndroidPlatform_exports = {};
+__export(AndroidPlatform_exports, {
+  AndroidPlatform: () => AndroidPlatform
+});
+function nextRequestId() {
+  requestId = (requestId + 1) % MAX_ID;
+  return `rId_${requestId}`;
+}
+var creatingElementCount, requestId, MAX_ID, AndroidPlatform;
+var init_AndroidPlatform = __esm({
+  "src/platform-adapter/android/AndroidPlatform.ts"() {
+    "use strict";
+    init_CommandResultUtils();
+    init_JSBCommand();
+    init_SpatialWebEvent();
+    creatingElementCount = 0;
+    requestId = 0;
+    MAX_ID = 1e5;
+    AndroidPlatform = class {
+      async callJSB(cmd, msg) {
+        return new Promise((resolve, reject) => {
+          try {
+            const rId = nextRequestId();
+            SpatialWebEvent.addEventReceiver(rId, (result) => {
+              SpatialWebEvent.removeEventReceiver(rId);
+              if (result.success) {
+                resolve(CommandResultSuccess(result.data));
+              } else {
+                const { code, message } = result.data;
+                resolve(CommandResultFailure(code, message));
+              }
+            });
+            const ans = window.webspatialBridge.postMessage(rId, cmd, msg);
+            if (ans !== "") {
+              SpatialWebEvent.removeEventReceiver(rId);
+              const result = JSON.parse(ans);
+              if (result.success) {
+                resolve(CommandResultSuccess(result.data));
+              } else {
+                const { code, message } = result.data;
+                resolve(CommandResultFailure(code, message));
+              }
+            }
+          } catch (error) {
+            console.error(
+              `AndroidPlatform cmd: ${cmd}, msg: ${msg} error: ${error}`
+            );
+            const { code, message } = error;
+            resolve(CommandResultFailure(code, message));
+          }
+        });
+      }
+      async callWebSpatialProtocol(command, query, target, features) {
+        await new Promise((resolve) => setTimeout(resolve, 16 * creatingElementCount));
+        creatingElementCount++;
+        let canCreate = await new CheckWebViewCanCreateCommand().execute();
+        while (!canCreate.data.can) {
+          await new Promise((resolve) => setTimeout(resolve, 16));
+          canCreate = await new CheckWebViewCanCreateCommand().execute();
+        }
+        const { windowProxy } = this.openWindow(command, query, target, features);
+        while (!windowProxy?.open) {
+          await new Promise((resolve) => setTimeout(resolve, 16));
+        }
+        windowProxy?.open("about:blank", "_self");
+        while (!windowProxy?.SpatialId) {
+          await new Promise((resolve) => setTimeout(resolve, 16));
+        }
+        let spatialId = windowProxy?.SpatialId;
+        creatingElementCount--;
+        return Promise.resolve(
+          CommandResultSuccess({ windowProxy, id: spatialId })
+        );
+      }
+      callWebSpatialProtocolSync(command, query, target, features) {
+        const { spatialId: id = "", windowProxy } = this.openWindow(
+          command,
+          query,
+          target,
+          features
+        );
+        return CommandResultSuccess({ windowProxy, id });
+      }
+      openWindow(command, query, target, features) {
+        const windowProxy = window.open(
+          `webspatial://${command}?${query || ""}`,
+          target,
+          features
+        );
+        return { spatialId: "", windowProxy };
+      }
+    };
   }
-  static async getStats() {
-    var cmd = new RemoteCommand("getStats", {
-      windowContainerID: this.getCurrentWindowContainer().id,
-      resourceID: this.getCurrentWebPanel().id
-    });
-    var result = await new Promise((res, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    return result.data;
+});
+
+// src/platform-adapter/vision-os/VisionOSPlatform.ts
+var VisionOSPlatform_exports = {};
+__export(VisionOSPlatform_exports, {
+  VisionOSPlatform: () => VisionOSPlatform
+});
+var VisionOSPlatform;
+var init_VisionOSPlatform = __esm({
+  "src/platform-adapter/vision-os/VisionOSPlatform.ts"() {
+    "use strict";
+    init_CommandResultUtils();
+    VisionOSPlatform = class {
+      async callJSB(cmd, msg) {
+        try {
+          const result = await window.webkit.messageHandlers.bridge.postMessage(
+            `${cmd}::${msg}`
+          );
+          return CommandResultSuccess(result);
+        } catch (error) {
+          const { code, message } = JSON.parse(error.message);
+          return CommandResultFailure(code, message);
+        }
+      }
+      callWebSpatialProtocol(command, query, target, features) {
+        const { spatialId: id, windowProxy } = this.openWindow(
+          command,
+          query,
+          target,
+          features
+        );
+        return Promise.resolve(
+          CommandResultSuccess({ windowProxy, id })
+        );
+      }
+      callWebSpatialProtocolSync(command, query, target, features) {
+        const { spatialId: id = "", windowProxy } = this.openWindow(
+          command,
+          query,
+          target,
+          features
+        );
+        return CommandResultSuccess({ windowProxy, id });
+      }
+      openWindow(command, query, target, features) {
+        const windowProxy = window.open(
+          `webspatial://${command}?${query || ""}`,
+          target,
+          features
+        );
+        const ua = windowProxy?.navigator.userAgent;
+        const spatialId = ua?.match(
+          /\b([0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12})\b/gi
+        )?.[0];
+        return { spatialId, windowProxy };
+      }
+    };
   }
-  static async inspect(spatialObjectId) {
-    var cmd = new RemoteCommand("inspect", {
-      resourceID: spatialObjectId
-    });
-    var result = await new Promise((res, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    return result.data;
+});
+
+// src/platform-adapter/index.ts
+function createPlatform() {
+  if (isSSREnv()) {
+    return new SSRPlatform();
+  }
+  if (window.navigator.userAgent.includes("Android") || window.navigator.userAgent.includes("Linux")) {
+    const AndroidPlatform2 = (init_AndroidPlatform(), __toCommonJS(AndroidPlatform_exports)).AndroidPlatform;
+    return new AndroidPlatform2();
+  } else {
+    const VisionOSPlatform2 = (init_VisionOSPlatform(), __toCommonJS(VisionOSPlatform_exports)).VisionOSPlatform;
+    return new VisionOSPlatform2();
   }
-  static async inspectRootWindowContainer() {
-    return this.inspect("root");
+}
+var init_platform_adapter = __esm({
+  "src/platform-adapter/index.ts"() {
+    "use strict";
+    init_ssr_polyfill();
+    init_SSRPlatform();
   }
-  static async setComponent(entity, resource) {
-    var cmd = new RemoteCommand("setComponent", {
-      windowContainerID: entity.windowContainerId,
-      resourceID: resource.id,
-      entityID: entity.id
-    });
-    _WebSpatial.sendCommand(cmd);
+});
+
+// src/utils.ts
+function parseBorderRadius(borderProperty, width) {
+  if (borderProperty === "") {
+    return 0;
   }
-  static async removeComponent(entity, resource) {
-    var cmd = new RemoteCommand("removeComponent", {
-      windowContainerID: entity.windowContainerId,
-      resourceID: resource.id,
-      entityID: entity.id
-    });
-    _WebSpatial.sendCommand(cmd);
-  }
-  // windowContainer is the group the resource will be tied to (if not provided it will use the current window grou)
-  // parentWebView is the SpatialWebView that the resource will be tied to (if not provided, resource will continue to exist even if this page is unloaded)
-  static async createResource(type, windowContainer, parentWebView, params = {}) {
-    var cmd = new RemoteCommand("createResource", {
-      windowContainerID: windowContainer ? windowContainer.id : void 0,
-      resourceID: parentWebView ? parentWebView.id : void 0,
-      type,
-      params
-    });
-    var result = await new Promise((res2, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res: res2, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    var res = new WebSpatialResource();
-    res.id = result.data.createdID;
-    res.windowContainerId = cmd.data.windowContainerID;
-    return res;
-  }
-  static async updateWindowContainer(wg, data) {
-    var cmd = new RemoteCommand("updateWindowContainer", {
-      windowContainerID: wg.id,
-      update: data
-    });
-    var result = await new Promise((res, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    return result;
+  if (borderProperty.endsWith("%")) {
+    return width * parseFloat(borderProperty) / 100;
   }
-  static async updateResource(resource, data = null) {
-    var cmd = new RemoteCommand("updateResource", {
-      windowContainerID: resource.windowContainerId,
-      resourceID: resource.id,
-      update: data || resource.data
-    });
-    var result = await new Promise((res, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    return result;
+  return parseFloat(borderProperty);
+}
+function parseCornerRadius(computedStyle) {
+  const width = parseFloat(computedStyle.getPropertyValue("width"));
+  const topLeftPropertyValue = computedStyle.getPropertyValue(
+    "border-top-left-radius"
+  );
+  const topRightPropertyValue = computedStyle.getPropertyValue(
+    "border-top-right-radius"
+  );
+  const bottomLeftPropertyValue = computedStyle.getPropertyValue(
+    "border-bottom-left-radius"
+  );
+  const bottomRightPropertyValue = computedStyle.getPropertyValue(
+    "border-bottom-right-radius"
+  );
+  const cornerRadius = {
+    topLeading: parseBorderRadius(topLeftPropertyValue, width),
+    bottomLeading: parseBorderRadius(bottomLeftPropertyValue, width),
+    topTrailing: parseBorderRadius(topRightPropertyValue, width),
+    bottomTrailing: parseBorderRadius(bottomRightPropertyValue, width)
+  };
+  return cornerRadius;
+}
+function composeSRT(position, rotation, scale) {
+  const { x: px, y: py, z: pz } = position;
+  const { x: rx, y: ry, z: rz } = rotation;
+  const { x: sx, y: sy, z: sz } = scale;
+  let m = new DOMMatrix();
+  m = m.translate(px, py, pz);
+  m = m.rotate(rx, ry, rz);
+  m = m.scale(sx, sy, sz);
+  return m;
+}
+var init_utils = __esm({
+  "src/utils.ts"() {
+    "use strict";
   }
-  static async setLoading(method, style) {
-    var cmd = new RemoteCommand("setLoading", {
-      windowContainerID: window._webSpatialParentGroupID,
-      // parent WindowContainerID
-      loading: {
-        method,
-        style
+});
+
+// src/JSBCommand.ts
+var platform, JSBCommand, UpdateEntityPropertiesCommand, UpdateEntityEventCommand, UpdateSpatialSceneProperties, UpdateSceneConfig, FocusScene, GetSpatialSceneState, SpatializedElementCommand, UpdateSpatialized2DElementProperties, UpdateSpatializedDynamic3DElementProperties, UpdateUnlitMaterialProperties, UpdateSpatializedElementTransform, UpdateSpatializedStatic3DElementProperties, AddSpatializedElementToSpatialized2DElement, AddSpatializedElementToSpatialScene, CreateSpatializedStatic3DElementCommand, CreateSpatializedDynamic3DElementCommand, CreateSpatialEntityCommand, CreateModelComponentCommand, CreateSpatialModelEntityCommand, CreateModelAssetCommand, CreateSpatialGeometryCommand, CreateSpatialUnlitMaterialCommand, AddComponentToEntityCommand, SetParentForEntityCommand, ConvertFromEntityToEntityCommand, ConvertFromEntityToSceneCommand, ConvertFromSceneToEntityCommand, InspectCommand, DestroyCommand, CheckWebViewCanCreateCommand, WebSpatialProtocolCommand, createSpatialized2DElementCommand, createSpatialSceneCommand;
+var init_JSBCommand = __esm({
+  "src/JSBCommand.ts"() {
+    "use strict";
+    init_platform_adapter();
+    init_utils();
+    platform = createPlatform();
+    JSBCommand = class {
+      commandType = "";
+      async execute() {
+        const param = this.getParams();
+        const msg = param ? JSON.stringify(param) : "";
+        return platform.callJSB(this.commandType, msg);
+      }
+    };
+    UpdateEntityPropertiesCommand = class extends JSBCommand {
+      constructor(entity, properties) {
+        super();
+        this.entity = entity;
+        this.properties = properties;
+      }
+      commandType = "UpdateEntityProperties";
+      getParams() {
+        const transform = composeSRT(
+          this.properties.position ?? this.entity.position,
+          this.properties.rotation ?? this.entity.rotation,
+          this.properties.scale ?? this.entity.scale
+        ).toFloat64Array();
+        return {
+          entityId: this.entity.id,
+          transform
+        };
+      }
+    };
+    UpdateEntityEventCommand = class extends JSBCommand {
+      constructor(entity, type, isEnable) {
+        super();
+        this.entity = entity;
+        this.type = type;
+        this.isEnable = isEnable;
+      }
+      commandType = "UpdateEntityEvent";
+      getParams() {
+        return {
+          type: this.type,
+          entityId: this.entity.id,
+          isEnable: this.isEnable
+        };
+      }
+    };
+    UpdateSpatialSceneProperties = class extends JSBCommand {
+      properties;
+      commandType = "UpdateSpatialSceneProperties";
+      constructor(properties) {
+        super();
+        this.properties = properties;
+      }
+      getParams() {
+        return this.properties;
+      }
+    };
+    UpdateSceneConfig = class extends JSBCommand {
+      config;
+      commandType = "UpdateSceneConfig";
+      constructor(config) {
+        super();
+        this.config = config;
+      }
+      getParams() {
+        return { config: this.config };
+      }
+    };
+    FocusScene = class extends JSBCommand {
+      constructor(id) {
+        super();
+        this.id = id;
+      }
+      commandType = "FocusScene";
+      getParams() {
+        return { id: this.id };
+      }
+    };
+    GetSpatialSceneState = class extends JSBCommand {
+      commandType = "GetSpatialSceneState";
+      constructor() {
+        super();
+      }
+      getParams() {
+        return {};
+      }
+    };
+    SpatializedElementCommand = class extends JSBCommand {
+      constructor(spatialObject) {
+        super();
+        this.spatialObject = spatialObject;
+      }
+      getParams() {
+        const extraParams = this.getExtraParams();
+        return { id: this.spatialObject.id, ...extraParams };
+      }
+    };
+    UpdateSpatialized2DElementProperties = class extends SpatializedElementCommand {
+      properties;
+      commandType = "UpdateSpatialized2DElementProperties";
+      constructor(spatialObject, properties) {
+        super(spatialObject);
+        this.properties = properties;
+      }
+      getExtraParams() {
+        return this.properties;
+      }
+    };
+    UpdateSpatializedDynamic3DElementProperties = class extends SpatializedElementCommand {
+      properties;
+      commandType = "UpdateSpatializedDynamic3DElementProperties";
+      constructor(spatialObject, properties) {
+        super(spatialObject);
+        this.properties = properties;
+      }
+      getExtraParams() {
+        return {
+          id: this.spatialObject.id,
+          ...this.properties
+        };
+      }
+    };
+    UpdateUnlitMaterialProperties = class extends SpatializedElementCommand {
+      properties;
+      commandType = "UpdateUnlitMaterialProperties";
+      constructor(spatialObject, properties) {
+        super(spatialObject);
+        this.properties = properties;
+      }
+      getExtraParams() {
+        return this.properties;
+      }
+    };
+    UpdateSpatializedElementTransform = class extends SpatializedElementCommand {
+      matrix;
+      commandType = "UpdateSpatializedElementTransform";
+      constructor(spatialObject, matrix) {
+        super(spatialObject);
+        this.matrix = matrix;
+      }
+      getExtraParams() {
+        return { matrix: Array.from(this.matrix.toFloat64Array()) };
+      }
+    };
+    UpdateSpatializedStatic3DElementProperties = class extends SpatializedElementCommand {
+      properties;
+      commandType = "UpdateSpatializedStatic3DElementProperties";
+      constructor(spatialObject, properties) {
+        super(spatialObject);
+        this.properties = properties;
+      }
+      getExtraParams() {
+        return this.properties;
+      }
+    };
+    AddSpatializedElementToSpatialized2DElement = class extends SpatializedElementCommand {
+      commandType = "AddSpatializedElementToSpatialized2DElement";
+      spatializedElement;
+      constructor(spatialObject, spatializedElement) {
+        super(spatialObject);
+        this.spatializedElement = spatializedElement;
+      }
+      getExtraParams() {
+        return { spatializedElementId: this.spatializedElement.id };
+      }
+    };
+    AddSpatializedElementToSpatialScene = class extends JSBCommand {
+      commandType = "AddSpatializedElementToSpatialScene";
+      spatializedElement;
+      constructor(spatializedElement) {
+        super();
+        this.spatializedElement = spatializedElement;
+      }
+      getParams() {
+        return {
+          spatializedElementId: this.spatializedElement.id
+        };
+      }
+    };
+    CreateSpatializedStatic3DElementCommand = class extends JSBCommand {
+      constructor(modelURL) {
+        super();
+        this.modelURL = modelURL;
+        this.modelURL = modelURL;
+      }
+      commandType = "CreateSpatializedStatic3DElement";
+      getParams() {
+        return { modelURL: this.modelURL };
+      }
+    };
+    CreateSpatializedDynamic3DElementCommand = class extends JSBCommand {
+      getParams() {
+        return { test: true };
+      }
+      commandType = "CreateSpatializedDynamic3DElement";
+    };
+    CreateSpatialEntityCommand = class extends JSBCommand {
+      constructor(name) {
+        super();
+        this.name = name;
+      }
+      getParams() {
+        return { name: this.name };
+      }
+      commandType = "CreateSpatialEntity";
+    };
+    CreateModelComponentCommand = class extends JSBCommand {
+      constructor(options) {
+        super();
+        this.options = options;
+      }
+      getParams() {
+        let geometryId = this.options.mesh.id;
+        let materialIds = this.options.materials.map((material) => material.id);
+        return { geometryId, materialIds };
+      }
+      commandType = "CreateModelComponent";
+    };
+    CreateSpatialModelEntityCommand = class extends JSBCommand {
+      constructor(options) {
+        super();
+        this.options = options;
+      }
+      getParams() {
+        return this.options;
+      }
+      commandType = "CreateSpatialModelEntity";
+    };
+    CreateModelAssetCommand = class extends JSBCommand {
+      constructor(options) {
+        super();
+        this.options = options;
+      }
+      getParams() {
+        return { url: this.options.url };
+      }
+      commandType = "CreateModelAsset";
+    };
+    CreateSpatialGeometryCommand = class extends JSBCommand {
+      constructor(type, options = {}) {
+        super();
+        this.type = type;
+        this.options = options;
+      }
+      getParams() {
+        return { type: this.type, ...this.options };
+      }
+      commandType = "CreateGeometry";
+    };
+    CreateSpatialUnlitMaterialCommand = class extends JSBCommand {
+      constructor(options) {
+        super();
+        this.options = options;
+      }
+      getParams() {
+        return this.options;
+      }
+      commandType = "CreateUnlitMaterial";
+    };
+    AddComponentToEntityCommand = class extends JSBCommand {
+      constructor(entity, comp) {
+        super();
+        this.entity = entity;
+        this.comp = comp;
+      }
+      getParams() {
+        return {
+          entityId: this.entity.id,
+          componentId: this.comp.id
+        };
+      }
+      commandType = "AddComponentToEntity";
+    };
+    SetParentForEntityCommand = class extends JSBCommand {
+      // childId, parentId
+      constructor(childId, parentId) {
+        super();
+        this.childId = childId;
+        this.parentId = parentId;
+      }
+      getParams() {
+        return {
+          childId: this.childId,
+          parentId: this.parentId
+        };
+      }
+      commandType = "SetParentToEntity";
+    };
+    ConvertFromEntityToEntityCommand = class extends JSBCommand {
+      constructor(fromEntityId, toEntityId, fromPosition) {
+        super();
+        this.fromEntityId = fromEntityId;
+        this.toEntityId = toEntityId;
+        this.fromPosition = fromPosition;
+      }
+      getParams() {
+        return {
+          fromEntityId: this.fromEntityId,
+          toEntityId: this.toEntityId,
+          position: this.fromPosition
+        };
+      }
+      commandType = "ConvertFromEntityToEntity";
+    };
+    ConvertFromEntityToSceneCommand = class extends JSBCommand {
+      constructor(fromEntityId, position) {
+        super();
+        this.fromEntityId = fromEntityId;
+        this.position = position;
+      }
+      getParams() {
+        return {
+          fromEntityId: this.fromEntityId,
+          position: this.position
+        };
+      }
+      commandType = "ConvertFromEntityToScene";
+    };
+    ConvertFromSceneToEntityCommand = class extends JSBCommand {
+      //  let entityId: String
+      // let position:Vec3
+      constructor(entityId, position) {
+        super();
+        this.entityId = entityId;
+        this.position = position;
+      }
+      getParams() {
+        return {
+          entityId: this.entityId,
+          position: this.position
+        };
+      }
+      commandType = "ConvertFromSceneToEntity";
+    };
+    InspectCommand = class extends JSBCommand {
+      constructor(id = "") {
+        super();
+        this.id = id;
+      }
+      commandType = "Inspect";
+      getParams() {
+        return this.id ? { id: this.id } : { id: "" };
+      }
+    };
+    DestroyCommand = class extends JSBCommand {
+      constructor(id) {
+        super();
+        this.id = id;
+      }
+      commandType = "Destroy";
+      getParams() {
+        return { id: this.id };
+      }
+    };
+    CheckWebViewCanCreateCommand = class extends JSBCommand {
+      constructor(id = "") {
+        super();
+        this.id = id;
+      }
+      commandType = "CheckWebViewCanCreate";
+      getParams() {
+        return { id: this.id };
+      }
+    };
+    WebSpatialProtocolCommand = class extends JSBCommand {
+      target;
+      features;
+      async execute() {
+        const query = this.getQuery();
+        return platform.callWebSpatialProtocol(
+          this.commandType,
+          query,
+          this.target,
+          this.features
+        );
+      }
+      executeSync() {
+        const query = this.getQuery();
+        return platform.callWebSpatialProtocolSync(
+          this.commandType,
+          query,
+          this.target,
+          this.features
+        );
+      }
+      getQuery() {
+        let query = void 0;
+        const params = this.getParams();
+        if (params) {
+          query = Object.keys(params).map((key) => {
+            const value = params[key];
+            const finalValue = typeof value === "object" ? JSON.stringify(value) : value;
+            return `${key}=${encodeURIComponent(finalValue)}`;
+          }).join("&");
+        }
+        return query;
+      }
+    };
+    createSpatialized2DElementCommand = class extends WebSpatialProtocolCommand {
+      commandType = "createSpatialized2DElement";
+      constructor() {
+        super();
+      }
+      getParams() {
+        return {};
+      }
+    };
+    createSpatialSceneCommand = class extends WebSpatialProtocolCommand {
+      constructor(url, config, target, features) {
+        super();
+        this.url = url;
+        this.config = config;
+        this.target = target;
+        this.features = features;
+      }
+      commandType = "createSpatialScene";
+      getParams() {
+        return {
+          url: this.url,
+          config: this.config
+        };
       }
-    });
-    var result = await new Promise((res, rej) => {
-      _WebSpatial.eventPromises[cmd.requestID] = { res, rej };
-      _WebSpatial.sendCommand(cmd);
-    });
-    return result;
-  }
-  static async openImmersiveSpace() {
-    var cmd = new RemoteCommand("openImmersiveSpace");
-    await _WebSpatial.sendCommand(cmd);
-  }
-  static async dismissImmersiveSpace() {
-    var cmd = new RemoteCommand("dismissImmersiveSpace");
-    await _WebSpatial.sendCommand(cmd);
-  }
-  static onFrame(fn) {
-    var dt = 0;
-    var loop = async () => {
-      var curTime = window.performance.now();
-      await fn(curTime);
-      var updateTime = window.performance.now() - curTime;
-      setTimeout(
-        () => {
-          loop();
-        },
-        Math.max(1e3 / 60 - updateTime, 0)
-      );
     };
-    loop();
   }
-};
-WebSpatial.init();
+});
 
-// src/core/SpatialObject.ts
+// src/SpatialObject.ts
+init_JSBCommand();
 var SpatialObject = class {
   /** @hidden */
-  constructor(_resource) {
-    this._resource = _resource;
+  constructor(id) {
+    this.id = id;
+  }
+  name;
+  isDestroyed = false;
+  async inspect() {
+    const ret = await new InspectCommand(this.id).execute();
+    if (ret.success) {
+      return ret.data;
+    }
+    throw new Error(ret.errorMessage);
   }
-  /**
-   * Marks resource to be released (it should no longer be used)
-   */
   async destroy() {
-    await WebSpatial.destroyResource(this._resource);
-    await this.onDestroy();
+    if (this.isDestroyed) {
+      return;
+    }
+    const ret = await new DestroyCommand(this.id).execute();
+    if (ret.success) {
+      this.onDestroy();
+      this.isDestroyed = true;
+      return ret.data;
+    } else if (this.isDestroyed) {
+      return;
+    }
+    throw new Error(ret.errorMessage);
   }
-  name = "";
-  async onDestroy() {
+  // override this method to do some cleanup
+  onDestroy() {
   }
 };
 
-// src/core/SpatialTransform.ts
-var Vec3 = class {
-  constructor(x = 0, y = 0, z = 0) {
-    this.x = x;
-    this.y = y;
-    this.z = z;
-  }
-};
-var Vec4 = class {
-  constructor(x = 0, y = 0, z = 0, w = 1) {
-    this.x = x;
-    this.y = y;
-    this.z = z;
-    this.w = w;
-  }
-};
-var SpatialTransform = class {
-  position = new Vec3(0, 0, 0);
-  /** Quaternion value for x,y,z,w */
-  orientation = new Vec4(0, 0, 0, 1);
-  scale = new Vec3(1, 1, 1);
-};
+// src/scene-polyfill.ts
+init_JSBCommand();
 
-// src/core/SpatialEntity.ts
-var SpatialEntity = class extends SpatialObject {
-  /**
-   * Transform corresponding to the entity
-   * note: updateTransform must be called for transform to be synced to rendering
-   */
-  transform = new SpatialTransform();
-  /** @hidden */
-  _destroyed = false;
-  /** @hidden */
-  get _entity() {
-    return this._resource;
+// src/SpatialScene.ts
+init_JSBCommand();
+var instance;
+var SpatialScene = class _SpatialScene extends SpatialObject {
+  /**
+   * Gets the singleton instance of the SpatialScene.
+   * Creates a new instance if one doesn't exist yet.
+   * @returns The singleton SpatialScene instance
+   */
+  static getInstance() {
+    if (!instance) {
+      instance = new _SpatialScene("");
+    }
+    return instance;
   }
   /**
-   * Syncs the transform with the renderer, must be called to observe updates
+   * Updates the properties of the spatial scene.
+   * This can include background settings, lighting, and other scene-wide properties.
+   * @param properties Partial set of properties to update
+   * @returns Promise resolving when the update is complete
    */
-  async updateTransform() {
-    await WebSpatial.updateResource(this._entity, this.transform);
+  async updateSpatialProperties(properties) {
+    return new UpdateSpatialSceneProperties(properties).execute();
   }
   /**
-   * Syncs the zIndex with the renderer
+   * Adds a spatialized element to the scene.
+   * This makes the element visible and interactive in the spatial environment.
+   * @param element The SpatializedElement to add to the scene
+   * @returns Promise resolving when the element is added
    */
-  async updateZIndex(zIndex) {
-    await WebSpatial.updateResource(this._entity, { zIndex });
+  async addSpatializedElement(element) {
+    return new AddSpatializedElementToSpatialScene(element).execute();
   }
-  components = /* @__PURE__ */ new Map();
   /**
-   * Attaches a component to the entity to be displayed
-   * [TODO] review pass by value vs ref and ownership model for this
+   * Updates the scene creation configuration.
+   * This allows changing scene parameters after initial creation.
+   * @param config The new scene creation configuration
+   * @returns Promise resolving when the update is complete
    */
-  async setComponent(component) {
-    await WebSpatial.setComponent(this._entity, component._resource);
-    this.components.set(component.constructor, component);
+  async updateSceneCreationConfig(config) {
+    return new UpdateSceneConfig(config).execute();
   }
   /**
-   * Removes a component from the entity
+   * Gets the current state of the spatial scene.
+   * This includes information about active elements and scene configuration.
+   * @returns Promise resolving to the current SpatialSceneState
    */
-  async removeComponent(type) {
-    var c = this.getComponent(type);
-    if (c != void 0) {
-      await WebSpatial.removeComponent(this._entity, c._resource);
-      this.components.delete(c.constructor);
+  async getState() {
+    return (await new GetSpatialSceneState().execute()).data.name;
+  }
+};
+
+// src/types/types.ts
+var SpatializedElementType = /* @__PURE__ */ ((SpatializedElementType2) => {
+  SpatializedElementType2[SpatializedElementType2["Spatialized2DElement"] = 0] = "Spatialized2DElement";
+  SpatializedElementType2[SpatializedElementType2["SpatializedStatic3DElement"] = 1] = "SpatializedStatic3DElement";
+  SpatializedElementType2[SpatializedElementType2["SpatializedDynamic3DElement"] = 2] = "SpatializedDynamic3DElement";
+  return SpatializedElementType2;
+})(SpatializedElementType || {});
+var BaseplateVisibilityValues = [
+  "automatic",
+  "visible",
+  "hidden"
+];
+function isValidBaseplateVisibilityType(type) {
+  return BaseplateVisibilityValues.includes(type);
+}
+var WorldScalingValues = ["automatic", "dynamic"];
+function isValidWorldScalingType(type) {
+  return WorldScalingValues.includes(type);
+}
+var WorldAlignmentValues = [
+  "adaptive",
+  "automatic",
+  "gravityAligned"
+];
+function isValidWorldAlignmentType(type) {
+  return WorldAlignmentValues.includes(type);
+}
+var SpatialSceneValues = ["window", "volume"];
+function isValidSpatialSceneType(type) {
+  return SpatialSceneValues.includes(type);
+}
+function isValidSceneUnit(val) {
+  if (typeof val === "number") {
+    return val >= 0;
+  }
+  if (typeof val === "string") {
+    if (val.endsWith("px")) {
+      if (isNaN(Number(val.slice(0, -2)))) {
+        return false;
+      }
+      return Number(val.slice(0, -2)) >= 0;
+    }
+    if (val.endsWith("m")) {
+      if (isNaN(Number(val.slice(0, -1)))) {
+        return false;
+      }
+      return Number(val.slice(0, -1)) >= 0;
     }
   }
-  /**
-   * Gets a component from the entity
-   */
-  getComponent(type) {
-    return this.components.get(type);
+  return false;
+}
+var SpatialSceneState = /* @__PURE__ */ ((SpatialSceneState2) => {
+  SpatialSceneState2["idle"] = "idle";
+  SpatialSceneState2["pending"] = "pending";
+  SpatialSceneState2["willVisible"] = "willVisible";
+  SpatialSceneState2["visible"] = "visible";
+  SpatialSceneState2["fail"] = "fail";
+  return SpatialSceneState2;
+})(SpatialSceneState || {});
+var CubeInfo = class {
+  constructor(size, origin) {
+    this.size = size;
+    this.origin = origin;
+    this.size = size;
+    this.origin = origin;
   }
-  /**
-   * @hidden
-   * Sets the window container that this entity should be rendered by (this does not effect resource ownership)
-   * @param wg the window container that should render this entity
-   */
-  async _setParentWindowContainer(wg) {
-    await WebSpatial.updateResource(this._entity, {
-      setParentWindowContainerID: wg._wg.id
-    });
+  get x() {
+    return this.origin.x;
   }
-  /**
-   * Sets a parent entity, if that entity or its parents are attached to a window container, this entity will be displayed
-   * @param e parent entity or null to remove current parent
-   */
-  async setParent(e) {
-    await WebSpatial.updateResource(this._entity, {
-      setParent: e ? e._entity.id : ""
-    });
+  get y() {
+    return this.origin.y;
   }
-  /**
-   * Sets the coordinate space of this entity (Default: App)
-   * "App" = game engine style coordinates in meters
-   * "Dom" = Windowing coordinates in dom units (eg. 0,0,0 is top left of window)
-   * "Root" = Coordinate space is ignored and content is displayed and updated as window container's root object, window containers can only have one root entity
-   * [TODO] review this api
-   * @param space coordinate space mode
-   */
-  async setCoordinateSpace(space) {
-    await WebSpatial.updateResource(this._entity, { setCoordinateSpace: space });
+  get z() {
+    return this.origin.z;
   }
-  /**
-   * Query the 3d boudning box of the entity
-   * @returns The bounding box of the entity
-   */
-  async getBoundingBox() {
-    var res = await WebSpatial.updateResource(this._entity, {
-      getBoundingBox: true
-    });
-    return res.data;
+  get width() {
+    return this.size.width;
   }
-  /**
-   * Sets if the entity should be visible (default: True)
-   * @param visible
-   */
-  async setVisible(visible) {
-    await WebSpatial.updateResource(this._entity, { visible });
+  get height() {
+    return this.size.height;
   }
-  /**
-   * Removes a reference to the entity by the renderer and this object should no longer be used. [TODO] Attached components will not be destroyed
-   */
-  async destroy() {
-    this._destroyed = true;
-    await WebSpatial.destroyResource(this._entity);
+  get depth() {
+    return this.size.depth;
   }
-  /**
-   * Check if destroy has been called
-   */
-  isDestroyed() {
-    return this._destroyed;
+  get left() {
+    return this.x;
   }
-  // Set Entity name. Currently for debugging only.
-  /** @hidden */
-  async _setName(name) {
-    this.name = name;
-    return WebSpatial.updateResource(this._entity, { name });
+  get top() {
+    return this.y;
+  }
+  get right() {
+    return this.x + this.width;
+  }
+  get bottom() {
+    return this.y + this.height;
+  }
+  get back() {
+    return this.z;
+  }
+  get front() {
+    return this.z + this.depth;
   }
 };
 
-// src/core/component/SpatialComponent.ts
-var SpatialComponent = class extends SpatialObject {
-  /**
-   * Gets the entity this component is attached to
-   * @returns entity or null
-   */
-  async getEntity() {
-    let reqResp = await WebSpatial.updateResource(
-      WebSpatial.getCurrentWebPanel(),
-      { getEntityID: "" }
-    );
-    if (reqResp.data.parentID === "") {
-      return new Promise((res2, rej) => {
-        res2(null);
-      });
-    } else {
-      var res = new WebSpatialResource();
-      res.id = reqResp.data.parentID;
-      return new SpatialEntity(res);
-    }
+// src/scene-polyfill.ts
+var defaultSceneConfig = {
+  defaultSize: {
+    width: 1280,
+    height: 720
   }
 };
-
-// src/core/SpatialWindowContainer.ts
-var SpatialWindowContainer = class {
-  /** @hidden */
-  constructor(_wg) {
-    this._wg = _wg;
+var defaultSceneConfigVolume = {
+  defaultSize: {
+    width: 0.94,
+    height: 0.94,
+    depth: 0.94
   }
-  /**
-   * @hidden
-   * Sets sets the open configuration for opening new window containers
-   * @param options style options
-   */
-  async _setOpenSettings(options) {
-    await WebSpatial.updateWindowContainer(this._wg, {
-      nextOpenSettings: options
-    });
+};
+var INTERNAL_SCHEMA_PREFIX = "webspatial://";
+var SceneManager = class _SceneManager {
+  originalOpen;
+  static instance;
+  static getInstance() {
+    if (!_SceneManager.instance) {
+      _SceneManager.instance = new _SceneManager();
+    }
+    return _SceneManager.instance;
   }
-  /**
-   * Retrieves the root entity of the windowContainer
-   * @returns the root entity of the windowContainer if one exists
-   */
-  async getRootEntity() {
-    let reqResp = await WebSpatial.updateWindowContainer(this._wg, {
-      getRootEntityID: ""
-    });
-    if (reqResp.data.rootEntId === "") {
-      return null;
+  init(window2) {
+    this.originalOpen = window2.open.bind(window2);
+    window2.open = this.open;
+  }
+  configMap = {};
+  // name=>config
+  getConfig(name) {
+    if (name === void 0 || !this.configMap[name]) return void 0;
+    return this.configMap[name];
+  }
+  open = (url, target, features) => {
+    if (url?.startsWith(INTERNAL_SCHEMA_PREFIX)) {
+      return this.originalOpen(url, target, features);
+    }
+    const prefix = `${window.location.protocol}//${window.location.host}`;
+    if (!url?.startsWith(prefix)) {
+      url = prefix + url;
+    }
+    if (target === "_self" || target === "_parent" || target === "_top") {
+      const newWindow = this.originalOpen(url, target, features);
+      return newWindow;
+    }
+    const cfg = target ? this.getConfig(target) : void 0;
+    const cmd = new createSpatialSceneCommand(url, cfg, target, features);
+    const result = cmd.executeSync();
+    if (typeof target === "string" && this.configMap[target]) {
+      delete this.configMap[target];
+    }
+    const id = result.data?.id;
+    if (id) {
+      let focusCmd = new FocusScene(id);
+      focusCmd.execute();
+    }
+    return result.data?.windowProxy;
+  };
+  initScene(name, callback, options) {
+    const sceneType = options?.type ?? "window";
+    const defaultConfig = getSceneDefaultConfig(sceneType);
+    const rawReturnVal = callback({ ...defaultConfig });
+    const [formattedConfig, errors] = formatSceneConfig(rawReturnVal, sceneType);
+    if (errors.length > 0) {
+      console.warn(`initScene ${name} with errors: ${errors.join(", ")}`);
+    }
+    this.configMap[name] = {
+      ...formattedConfig,
+      type: sceneType
+    };
+  }
+};
+function pxToMeter(px) {
+  return px / 1360;
+}
+function meterToPx(meter) {
+  return meter * 1360;
+}
+function formatToNumber(str, targetUnit, defaultUnit) {
+  if (typeof str === "number") {
+    if (defaultUnit === "px" && targetUnit === "px" || defaultUnit === "m" && targetUnit === "m") {
+      return str;
+    }
+    if (defaultUnit === "px" && targetUnit === "m") {
+      return pxToMeter(str);
+    } else if (defaultUnit === "m" && targetUnit === "px") {
+      return meterToPx(str);
+    }
+    return str;
+  }
+  if (targetUnit === "m") {
+    if (str.endsWith("m")) {
+      return Number(str.slice(0, -1));
+    } else if (str.endsWith("px")) {
+      return pxToMeter(Number(str.slice(0, -2)));
+    } else {
+      throw new Error("formatToNumber: invalid str");
+    }
+  } else if (targetUnit === "px") {
+    if (str.endsWith("px")) {
+      return Number(str.slice(0, -2));
+    } else if (str.endsWith("m")) {
+      return meterToPx(Number(str.slice(0, -1)));
     } else {
-      var res = new WebSpatialResource();
-      res.id = reqResp.data.rootEntId;
-      return new SpatialEntity(res);
+      throw new Error("formatToNumber: invalid str");
     }
+  } else {
+    throw new Error("formatToNumber: invalid targetUnit");
   }
-  /*
-   * Sets the root entity that this windowContainer will display (this does not effect resource ownership)
-   * @param entity to display
-   */
-  async setRootEntity(entity) {
-    await entity._setParentWindowContainer(this);
+}
+function formatSceneConfig(config, sceneType) {
+  const defaultSceneConfig2 = getSceneDefaultConfig(sceneType);
+  const errors = [];
+  const isWindow = sceneType === "window";
+  if (!isValidSpatialSceneType(sceneType)) {
+    errors.push(`sceneType`);
+  }
+  if (config.defaultSize) {
+    const iterKeys = ["width", "height", "depth"];
+    for (let k of iterKeys) {
+      if (!(k in config.defaultSize)) continue;
+      if (isValidSceneUnit(config.defaultSize[k])) {
+        ;
+        config.defaultSize[k] = formatToNumber(
+          config.defaultSize[k],
+          isWindow ? "px" : "m",
+          isWindow ? "px" : "m"
+        );
+      } else {
+        ;
+        config.defaultSize[k] = defaultSceneConfig2.defaultSize[k];
+        errors.push(`defaultSize.${k}`);
+      }
+    }
   }
-  async close() {
-    await WebSpatial.updateWindowContainer(this._wg, {
-      close: true
-    });
+  if (config.resizability) {
+    const iterKeys = ["minWidth", "minHeight", "maxWidth", "maxHeight"];
+    for (let k of iterKeys) {
+      if (!(k in config.resizability)) continue;
+      if (isValidSceneUnit(config.resizability[k])) {
+        ;
+        config.resizability[k] = formatToNumber(
+          config.resizability[k],
+          "px",
+          isWindow ? "px" : "m"
+        );
+      } else {
+        ;
+        config.resizability[k] = void 0;
+        errors.push(`resizability.${k}`);
+      }
+    }
   }
-};
-
-// src/core/resource/SpatialMeshResource.ts
-var SpatialMeshResource = class extends SpatialObject {
-};
-
-// src/core/resource/SpatialPhysicallyBasedMaterialResource.ts
-var SpatialPhysicallyBasedMaterialResource = class extends SpatialObject {
-  /**
-   * Base color of the material containing rgba between 0 and 1
-   */
-  baseColor = { r: 0, g: 0.7, b: 0.7, a: 1 };
-  /**
-   * PBR metalic value between 0 and 1
-   */
-  metallic = { value: 0.5 };
-  /**
-   * PBR roughness value between 0 and 1
-   */
-  roughness = { value: 0.5 };
-  _modelComponentAttachedTo = {};
-  _addToComponent(c) {
-    this._modelComponentAttachedTo[c._resource.id] = c;
+  if (config.worldScaling) {
+    if (!isValidWorldScalingType(config.worldScaling)) {
+      config.worldScaling = "automatic";
+      errors.push("worldScaling");
+    }
   }
-  /**
-   * Syncs state of color, metallic, roupghness to the renderer
-   */
-  async update() {
-    await WebSpatial.updateResource(this._resource, {
-      baseColor: this.baseColor,
-      metallic: this.metallic,
-      roughness: this.roughness
-    });
-    for (var key in this._modelComponentAttachedTo) {
-      await this._modelComponentAttachedTo[key]._syncMaterials();
+  if (config.worldAlignment) {
+    if (!isValidWorldAlignmentType(config.worldAlignment)) {
+      config.worldAlignment = "automatic";
+      errors.push("worldAlignment");
     }
   }
-};
-
-// src/core/SpatialSession.ts
-function _parseParentResources(options) {
-  var parentWindowContainer = null;
-  if (options?.windowContainer !== null) {
-    parentWindowContainer = options?.windowContainer ? options?.windowContainer._wg : WebSpatial.getCurrentWindowContainer();
+  if (config.baseplateVisibility) {
+    if (!isValidBaseplateVisibilityType(config.baseplateVisibility)) {
+      config.baseplateVisibility = "automatic";
+      errors.push("baseplateVisibility");
+    }
   }
-  var parentWindow = null;
-  if (options?.windowComponent !== null) {
-    parentWindow = options?.windowComponent ? options?.windowComponent._resource : WebSpatial.getCurrentWebPanel();
+  return [config, errors];
+}
+function initScene(name, callback, options) {
+  return SceneManager.getInstance().initScene(name, callback, options);
+}
+function hijackWindowOpen(window2) {
+  SceneManager.getInstance().init(window2);
+}
+function hijackWindowATag(openedWindow) {
+  openedWindow.document.onclick = function(e) {
+    let element = e.target;
+    let found = false;
+    while (!found) {
+      if (element && element.tagName == "A") {
+        if (handleATag(e)) {
+          return false;
+        }
+        return true;
+      }
+      if (element && element.parentElement) {
+        element = element.parentElement;
+      } else {
+        break;
+      }
+    }
+  };
+}
+function 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);
+      return true;
+    }
   }
-  return [parentWindowContainer, parentWindow];
 }
-var SpatialSession = class _SpatialSession {
-  /** @hidden */
-  _engineUpdateListeners = Array();
-  /** @hidden */
-  _frameLoopStarted = false;
-  /**
-   * Add event listener callback to be called each frame
-   * @param callback callback to be called each update
-   */
-  addOnEngineUpdateEventListener(callback) {
-    this._engineUpdateListeners.push(callback);
-    if (!this._frameLoopStarted) {
-      this._frameLoopStarted = true;
-      WebSpatial.onFrame(async (time) => {
-        await Promise.all(
-          this._engineUpdateListeners.map((cb) => {
-            return cb(time);
-          })
-        );
-      });
+function getSceneDefaultConfig(sceneType) {
+  return sceneType === "window" ? defaultSceneConfig : defaultSceneConfigVolume;
+}
+async function injectScenePolyfill() {
+  if (!window.opener) return;
+  const state = await SpatialScene.getInstance().getState();
+  if (state !== "pending" /* pending */) return;
+  function onContentLoaded(callback) {
+    if (document.readyState === "interactive" || document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
     }
   }
+  onContentLoaded(async () => {
+    let provideDefaultSceneConfig = getSceneDefaultConfig(
+      window.xrCurrentSceneType ?? "window"
+    );
+    let cfg = provideDefaultSceneConfig;
+    if (typeof window.xrCurrentSceneDefaults === "function") {
+      try {
+        cfg = await window.xrCurrentSceneDefaults?.(provideDefaultSceneConfig);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(null);
+      }, 1e3);
+    });
+    const sceneType = window.xrCurrentSceneType ?? "window";
+    const [formattedConfig, errors] = formatSceneConfig(cfg, sceneType);
+    if (errors.length > 0) {
+      console.warn(
+        `window.xrCurrentSceneDefaults with errors: ${errors.join(", ")}`
+      );
+    }
+    await SpatialScene.getInstance().updateSceneCreationConfig({
+      ...formattedConfig,
+      type: sceneType
+    });
+  });
+}
+function injectSceneHook() {
+  hijackWindowOpen(window);
+  hijackWindowATag(window);
+  injectScenePolyfill();
+}
+
+// src/SpatializedElementCreator.ts
+init_JSBCommand();
+
+// src/Spatialized2DElement.ts
+init_JSBCommand();
+
+// src/SpatializedElement.ts
+init_JSBCommand();
+init_SpatialWebEvent();
+
+// src/SpatialWebEventCreator.ts
+function createSpatialEvent(type, detail) {
+  return new CustomEvent(type, {
+    bubbles: true,
+    cancelable: false,
+    detail
+  });
+}
+
+// src/SpatializedElement.ts
+var SpatializedElement = class extends SpatialObject {
   /**
-   * Creates a Entity
-   * @returns Entity
+   * Creates a new spatialized element with the specified ID.
+   * Registers the element to receive spatial events.
+   * @param id Unique identifier for this element
    */
-  async createEntity(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "Entity",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialEntity(entity);
+  constructor(id) {
+    super(id);
+    this.id = id;
+    SpatialWebEvent.addEventReceiver(id, this.onReceiveEvent.bind(this));
   }
   /**
-   * Creates a WindowComponent
-   * [TODO] should creation of components be moved to entity? and these made private?
-   * @returns WindowComponent
+   * Updates the transformation matrix of this element in 3D space.
+   * This affects the position, rotation, and scale of the element.
+   * @param matrix The new transformation matrix
+   * @returns Promise resolving when the transform is updated
    */
-  async createWindowComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "SpatialWebView",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialWindowComponent(entity);
+  async updateTransform(matrix) {
+    return new UpdateSpatializedElementTransform(this, matrix).execute();
   }
   /**
-   * Creates a ViewComponent used to display 3D content within the entity
-   * @returns SpatialViewComponent
+   * Information about the element's bounding cube.
+   * Used for spatial calculations and hit testing.
    */
-  async createViewComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "SpatialView",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialViewComponent(entity);
-  }
+  _cubeInfo;
   /**
-   * Creates a ModelComponent used to display geometry + material of a 3D model
-   * @returns ModelComponent
+   * Gets the current cube information for this element.
+   * @returns The current CubeInfo or undefined if not set
    */
-  async createModelComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    var opts = void 0;
-    if (options) {
-      opts = { modelURL: options.url };
-    }
-    let entity = await WebSpatial.createResource(
-      "ModelComponent",
-      parentWindowContainer,
-      parentWindow,
-      opts
-    );
-    return new SpatialModelComponent(entity);
+  get cubeInfo() {
+    return this._cubeInfo;
   }
   /**
-   * Creates a Model3DComponent
-   * @returns Model3DComponent
+   * The current transformation matrix of this element.
    */
-  async createModel3DComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    var opts = void 0;
-    if (options) {
-      opts = { modelURL: options.url };
-    }
-    let entity = await WebSpatial.createResource(
-      "Model3DComponent",
-      parentWindowContainer,
-      parentWindow,
-      opts
-    );
-    return new SpatialModel3DComponent(entity);
-  }
+  _transform;
   /**
-   * Creates a InputComponent
-   * [Experimental] Creates a InputComponent used to handle click and drag events of the entity containing a model
-   * @returns InputComponent
+   * The inverse of the current transformation matrix.
+   * Used for converting world coordinates to local coordinates.
    */
-  async createInputComponent(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "InputComponent",
-      parentWindowContainer,
-      parentWindow
-    );
-    return new SpatialInputComponent(entity);
+  _transformInv;
+  /**
+   * Gets the current transformation matrix.
+   * @returns The current transformation matrix or undefined if not set
+   */
+  get transform() {
+    return this._transform;
   }
   /**
-   * Creates a MeshResource containing geometry data
-   * @returns MeshResource
+   * Gets the inverse of the current transformation matrix.
+   * @returns The inverse transformation matrix or undefined if not set
    */
-  async createMeshResource(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "MeshResource",
-      parentWindowContainer,
-      parentWindow,
-      options
-    );
-    return new SpatialMeshResource(entity);
+  get transformInv() {
+    return this._transformInv;
   }
   /**
-   * Creates a PhysicallyBasedMaterial containing PBR material data
-   * @returns PhysicallyBasedMaterial
+   * Processes events received from the WebSpatial environment.
+   * Handles various spatial events like transforms, gestures, and interactions.
+   * @param data The event data received from the WebSpatial system
    */
-  async createPhysicallyBasedMaterialResource(options) {
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    let entity = await WebSpatial.createResource(
-      "PhysicallyBasedMaterial",
-      parentWindowContainer,
-      parentWindow,
-      options
-    );
-    return new SpatialPhysicallyBasedMaterialResource(entity);
+  onReceiveEvent(data) {
+    const { type } = data;
+    if (type === "objectdestroy" /* objectdestroy */) {
+      this.isDestroyed = true;
+    } else if (type === "cubeInfo" /* cubeInfo */) {
+      const cubeInfoMsg = data;
+      this._cubeInfo = new CubeInfo(cubeInfoMsg.size, cubeInfoMsg.origin);
+    } else if (type === "transform" /* transform */) {
+      this._transform = new DOMMatrix([
+        data.detail.column0[0],
+        data.detail.column0[1],
+        data.detail.column0[2],
+        0,
+        data.detail.column1[0],
+        data.detail.column1[1],
+        data.detail.column1[2],
+        0,
+        data.detail.column2[0],
+        data.detail.column2[1],
+        data.detail.column2[2],
+        0,
+        data.detail.column3[0],
+        data.detail.column3[1],
+        data.detail.column3[2],
+        1
+      ]);
+      this._transformInv = this._transform.inverse();
+    } else if (type === "spatialtap" /* spatialtap */) {
+      const event = createSpatialEvent(
+        "spatialtap" /* spatialtap */,
+        data.detail
+      );
+      this._onSpatialTap?.(event);
+    } else if (type === "spatialdrag" /* spatialdrag */) {
+      if (!this._isDragging) {
+        const dragStartEvent = createSpatialEvent(
+          "spatialdragstart" /* spatialdragstart */,
+          data.detail
+        );
+        this._onSpatialDragStart?.(dragStartEvent);
+      }
+      this._isDragging = true;
+      const event = createSpatialEvent(
+        "spatialdrag" /* spatialdrag */,
+        data.detail
+      );
+      this._onSpatialDrag?.(event);
+    } else if (type === "spatialdragend" /* spatialdragend */) {
+      this._isDragging = false;
+      const event = createSpatialEvent(
+        "spatialdragend" /* spatialdragend */,
+        data.detail
+      );
+      this._onSpatialDragEnd?.(event);
+    } else if (type === "spatialrotate" /* spatialrotate */) {
+      if (!this._isRotating) {
+        const rotationStartEvent = createSpatialEvent(
+          "spatialrotatestart" /* spatialrotatestart */,
+          data.detail
+        );
+        this._onSpatialRotateStart?.(rotationStartEvent);
+      }
+      this._isRotating = true;
+      const event = createSpatialEvent(
+        "spatialrotate" /* spatialrotate */,
+        data.detail
+      );
+      this._onSpatialRotate?.(event);
+    } else if (type === "spatialrotateend" /* spatialrotateend */) {
+      this._isRotating = false;
+      const event = createSpatialEvent(
+        "spatialrotateend" /* spatialrotateend */,
+        data.detail
+      );
+      this._onSpatialRotateEnd?.(event);
+    } else if (type === "spatialmagnify" /* spatialmagnify */) {
+      if (!this._isMagnify) {
+        const magnifyStartEvent = createSpatialEvent(
+          "spatialmagnifystart" /* spatialmagnifystart */,
+          data.detail
+        );
+        this._onSpatialMagnifyStart?.(magnifyStartEvent);
+      }
+      this._isMagnify = true;
+      const event = createSpatialEvent(
+        "spatialmagnify" /* spatialmagnify */,
+        data.detail
+      );
+      this._onSpatialMagnify?.(event);
+    } else if (type === "spatialmagnifyend" /* spatialmagnifyend */) {
+      this._isMagnify = false;
+      const event = createSpatialEvent(
+        "spatialmagnifyend" /* spatialmagnifyend */,
+        data.detail
+      );
+      this._onSpatialMagnifyEnd?.(event);
+    }
+  }
+  _onSpatialTap;
+  set onSpatialTap(value) {
+    this._onSpatialTap = value;
+    this.updateProperties({
+      enableTapGesture: value !== void 0
+    });
+  }
+  _isDragging = false;
+  _onSpatialDragStart;
+  set onSpatialDragStart(value) {
+    this._onSpatialDragStart = value;
+    this.updateProperties({
+      enableDragStartGesture: this._onSpatialDragStart !== void 0
+    });
+  }
+  _onSpatialDrag;
+  set onSpatialDrag(value) {
+    this._onSpatialDrag = value;
+    this.updateProperties({
+      enableDragGesture: this._onSpatialDrag !== void 0
+    });
+  }
+  _onSpatialDragEnd;
+  set onSpatialDragEnd(value) {
+    this._onSpatialDragEnd = value;
+    this.updateProperties({
+      enableDragEndGesture: value !== void 0
+    });
+  }
+  _isRotating = false;
+  _onSpatialRotateStart;
+  set onSpatialRotateStart(value) {
+    this._onSpatialRotateStart = value;
+    this.updateProperties({
+      enableRotateStartGesture: this._onSpatialRotateStart !== void 0
+    });
+  }
+  _onSpatialRotate;
+  set onSpatialRotate(value) {
+    this._onSpatialRotate = value;
+    this.updateProperties({
+      enableRotateGesture: this._onSpatialRotate !== void 0
+    });
+  }
+  _onSpatialRotateEnd;
+  set onSpatialRotateEnd(value) {
+    this._onSpatialRotateEnd = value;
+    this.updateProperties({
+      enableRotateEndGesture: value !== void 0
+    });
+  }
+  _isMagnify = false;
+  _onSpatialMagnifyStart;
+  set onSpatialMagnifyStart(value) {
+    this._onSpatialMagnifyStart = value;
+    this.updateProperties({
+      enableMagnifyStartGesture: value !== void 0
+    });
   }
-  /**
-   * Creates a WindowContainer
-   * @returns SpatialWindowContainer
-   * */
-  async createWindowContainer(options) {
-    var style = options?.style ? options?.style : "Plain";
-    var [parentWindowContainer, parentWindow] = _parseParentResources(options);
-    return new SpatialWindowContainer(
-      await WebSpatial.createWindowContainer(
-        style,
-        parentWindowContainer,
-        parentWindow
-      )
-    );
+  _onSpatialMagnify;
+  set onSpatialMagnify(value) {
+    this._onSpatialMagnify = value;
+    this.updateProperties({
+      enableMagnifyGesture: value !== void 0
+    });
+  }
+  _onSpatialMagnifyEnd;
+  set onSpatialMagnifyEnd(value) {
+    this._onSpatialMagnifyEnd = value;
+    this.updateProperties({
+      enableMagnifyEndGesture: value !== void 0
+    });
   }
   /**
-   * Creates a Scene to display content within an anchored area managed by the OS
-   * @hidden
-   * @param {WindowStyle} [style='Plain'] - The style of the Scene container to be created with. Defaults to 'Plain'.
-   * @param {Object} [cfg={}] - Configuration object for the Scene.
-   * @returns Boolean
+   * Cleans up resources when this element is destroyed.
+   * Removes event receivers to prevent memory leaks.
    */
-  async _createScene(style = "Plain", cfg) {
-    return await WebSpatial.createScene(style, cfg);
+  onDestroy() {
+    SpatialWebEvent.removeEventReceiver(this.id);
   }
+};
+
+// src/Spatialized2DElement.ts
+var Spatialized2DElement = class extends SpatializedElement {
   /**
-   * Retrieves the window for this page
-   * @returns the window component corresponding to the js running on this page
-   * [TODO] discuss implications of this not being async
+   * Creates a new spatialized 2D element.
+   * @param id Unique identifier for this element
+   * @param windowProxy Reference to the window object containing the 2D content
    */
-  getCurrentWindowComponent() {
-    return new SpatialWindowComponent(WebSpatial.getCurrentWebPanel());
+  constructor(id, windowProxy) {
+    super(id);
+    this.windowProxy = windowProxy;
+    hijackWindowATag(windowProxy);
   }
   /**
-   * Retrieves the parent window for this page or null if this is the root page
-   * @returns the window component or null
+   * Updates the properties of this 2D element.
+   * This can include size, position, background, and other visual properties.
+   * @param properties Partial set of properties to update
+   * @returns Promise resolving when the update is complete
    */
-  async getParentWindowComponent() {
-    let parentResp = await WebSpatial.updateResource(
-      WebSpatial.getCurrentWebPanel(),
-      { getParentID: "" }
-    );
-    if (parentResp.data.parentID === "") {
-      return new Promise((res2, rej) => {
-        res2(null);
-      });
-    } else {
-      var res = new WebSpatialResource();
-      res.id = parentResp.data.parentID;
-      return new SpatialWindowComponent(res);
-    }
+  async updateProperties(properties) {
+    return new UpdateSpatialized2DElementProperties(this, properties).execute();
   }
   /**
-   * Logs a message to the native apps console
-   * @param msg mesage to log
+   * Adds a child spatialized element to this 2D element.
+   * This allows for creating hierarchical structures of spatial elements.
+   * @param element The child element to add
+   * @returns Promise resolving when the element is added
    */
-  async log(...msg) {
-    await WebSpatial.sendCommand(
-      new RemoteCommand("log", {
-        logString: msg.map((x) => {
-          return JSON.stringify(x);
-        })
-      })
-    );
+  async addSpatializedElement(element) {
+    return new AddSpatializedElementToSpatialized2DElement(
+      this,
+      element
+    ).execute();
   }
+};
+
+// src/SpatializedStatic3DElement.ts
+init_JSBCommand();
+var SpatializedStatic3DElement = class extends SpatializedElement {
   /**
-   * @hidden
-   * Debugging only, used to ping the native renderer
+   * Promise resolver for the ready state.
+   * Used to resolve the ready promise when the model is loaded.
    */
-  async _ping(msg) {
-    return await WebSpatial.ping(msg);
-  }
+  _readyResolve;
   /**
-   * @hidden
-   * Debugging to get internal state from native code
-   * @returns stats from native code. Objects tracks number of native objects that were created but not yet explicitly destroyed. RefObjects tracks bjects that still have references. After an object is destroyed, we should be cleaning up all of the native references. Expect objects.count == refObjects.count , if not, there is likely a leak.
+   * Caches the last model URL to detect changes.
+   * Used to reset the ready promise when the model URL changes.
    */
-  async _getStats() {
-    return await WebSpatial.getStats();
-  }
+  modelURL = "";
   /**
-   * @hidden
+   * Creates a new promise for tracking the ready state of the model.
+   * @returns Promise that resolves when the model is loaded (true) or fails to load (false)
    */
-  async _inspect(spatialObjectId = WebSpatial.getCurrentWebPanel().id) {
-    return WebSpatial.inspect(spatialObjectId);
+  createReadyPromise() {
+    return new Promise((resolve) => {
+      this._readyResolve = resolve;
+    });
   }
   /**
-   * @hidden
+   * Promise that resolves when the model is loaded.
+   * Resolves to true on successful load, false on failure.
    */
-  async _inspectRootWindowContainer() {
-    return WebSpatial.inspectRootWindowContainer();
-  }
-  /** Opens the immersive space */
-  async openImmersiveSpace() {
-    return await WebSpatial.openImmersiveSpace();
-  }
-  /** Closes the immersive space */
-  async dismissImmersiveSpace() {
-    return await WebSpatial.dismissImmersiveSpace();
-  }
-  static _immersiveWindowContainer = null;
+  ready = this.createReadyPromise();
   /**
-   * Retreives the window container corresponding to the Immersive space
-   * @returns the immersive window container
+   * Updates the properties of this static 3D element.
+   * Handles special case for modelURL changes by resetting the ready promise.
+   * @param properties Partial set of properties to update
+   * @returns Promise resolving when the update is complete
    */
-  async getImmersiveWindowContainer() {
-    if (_SpatialSession._immersiveWindowContainer) {
-      return _SpatialSession._immersiveWindowContainer;
+  async updateProperties(properties) {
+    if (properties.modelURL !== void 0) {
+      if (this.modelURL !== properties.modelURL) {
+        this.modelURL = properties.modelURL;
+        this.ready = this.createReadyPromise();
+      }
+    }
+    return new UpdateSpatializedStatic3DElementProperties(
+      this,
+      properties
+    ).execute();
+  }
+  /**
+   * Processes events received from the WebSpatial environment.
+   * Handles model loading events in addition to base spatial events.
+   * @param data The event data received from the WebSpatial system
+   */
+  onReceiveEvent(data) {
+    if (data.type === "modelloaded" /* modelloaded */) {
+      this._onLoadCallback?.();
+      this._readyResolve?.(true);
+    } else if (data.type === "modelloadfailed" /* modelloadfailed */) {
+      this._onLoadFailureCallback?.();
+      this._readyResolve?.(false);
     } else {
-      _SpatialSession._immersiveWindowContainer = new SpatialWindowContainer(
-        WebSpatial.getImmersiveWindowContainer()
-      );
-      return _SpatialSession._immersiveWindowContainer;
+      super.onReceiveEvent(data);
     }
   }
-  // Retreives the window container that is the parent to this spatial web page
-  static _currentWindowContainer = null;
   /**
-   * Gets the current window container for the window
-   * [TODO] discuss what happens if it doesnt yet have a window container
-   * @returns the current window container for the window
+   * Callback function for successful model loading.
    */
-  getCurrentWindowContainer() {
-    if (_SpatialSession._currentWindowContainer) {
-      return _SpatialSession._currentWindowContainer;
-    } else {
-      _SpatialSession._currentWindowContainer = new SpatialWindowContainer(
-        WebSpatial.getCurrentWindowContainer()
-      );
-      return _SpatialSession._currentWindowContainer;
-    }
-  }
+  _onLoadCallback;
   /**
-   * Start a transaction that queues up commands to submit them all at once to reduce ipc overhead
-   * @param fn function to be run, within this function, promises will not resolve
-   * @returns promise for the entire transaction completion
+   * Sets the callback function for successful model loading.
+   * @param callback Function to call when the model is loaded successfully
    */
-  transaction(fn) {
-    WebSpatial.startTransaction();
-    fn();
-    return WebSpatial.sendTransaction();
+  set onLoadCallback(callback) {
+    this._onLoadCallback = callback;
   }
   /**
-   * Creates a window context object that is compatable with SpatialWindowComponent's setFromWindow API
-   * @returns window context
+   * Callback function for model loading failure.
    */
-  async createWindowContext() {
-    let openedWindow = window.open("webspatial://createWindowContext");
-    if (WebSpatial.getBackend() != "AVP") {
-      var counter = 0;
-      while (openedWindow.window.testAPI == null) {
-        if (counter > 15) {
-          openedWindow?.close();
-          openedWindow = window.open("about:blank");
-          counter = 0;
-          this.log("unexpected error when trying to open new window, retrying.");
-        }
-        var locName = "about:blank?x" + counter;
-        openedWindow.location.href = locName;
-        counter++;
-        await new Promise((resolve) => setTimeout(resolve, 10));
-      }
-      ;
-      openedWindow._webSpatialID = openedWindow.window.testAPI.getWindowID();
-    } else {
-      while (openedWindow.window._webSpatialID == void 0) {
-        await new Promise((resolve) => setTimeout(resolve, 10));
-      }
-    }
-    openedWindow.document.head.innerHTML = `<meta name="viewport" content="width=device-width, initial-scale=1">
-      <base href="${document.baseURI}">
-      `;
-    return openedWindow;
+  _onLoadFailureCallback;
+  /**
+   * Sets the callback function for model loading failure.
+   * @param callback Function to call when the model fails to load
+   */
+  set onLoadFailureCallback(callback) {
+    this._onLoadFailureCallback = callback;
   }
-  // Get Entity by id. Currently for debugging only.
-  /** @hidden */
-  async _getEntity(id) {
-    const entityInfo = await WebSpatial.inspect(id);
-    const [_, x, y, z] = entityInfo.position.match(/(\d+\.?\d*)/g);
-    const [__, sx, sy, sz] = entityInfo.scale.match(/(\d+\.?\d*)/g);
-    var res = new WebSpatialResource();
-    res.id = id;
-    res.windowContainerId = WebSpatial.getCurrentWindowContainer().id;
-    const entity = new SpatialEntity(res);
-    entity.transform.position.x = parseFloat(x);
-    entity.transform.position.y = parseFloat(y);
-    entity.transform.position.z = parseFloat(z);
-    entity.transform.scale.x = parseFloat(sx);
-    entity.transform.scale.y = parseFloat(sy);
-    entity.transform.scale.z = parseFloat(sz);
-    return entity;
-  }
-  // set loading view.
-  /** @hidden */
-  async setLoading(method, style) {
-    return WebSpatial.setLoading(method, style);
+  updateModelTransform(transform) {
+    const modelTransform = Array.from(transform.toFloat64Array());
+    this.updateProperties({ modelTransform });
   }
 };
 
-// src/core/Spatial.ts
-var Spatial = class {
-  /**
-   * Requests a session object from the browser
-   * @returns The session or null if not availible in the current browser
-   * [TODO] discuss implications of this not being async
-   */
-  requestSession() {
-    if (this.isSupported() && this.getNativeVersion() === this.getClientVersion()) {
-      return new SpatialSession();
-    } else {
-      return null;
-    }
+// src/SpatializedDynamic3DElement.ts
+init_JSBCommand();
+var SpatializedDynamic3DElement = class extends SpatializedElement {
+  children = [];
+  constructor(id) {
+    super(id);
+  }
+  async addEntity(entity) {
+    const ans = new SetParentForEntityCommand(entity.id, this.id).execute();
+    this.children.push(entity);
+    entity.parent = this;
+    return ans;
+  }
+  async updateProperties(properties) {
+    return new UpdateSpatializedDynamic3DElementProperties(
+      this,
+      properties
+    ).execute();
   }
-  /**
-   * @returns true if web spatial is supported by this webpage
-   */
-  isSupported() {
-    return this.getNativeVersion() === this.getClientVersion();
+};
+
+// src/SpatializedElementCreator.ts
+async function createSpatialized2DElement() {
+  const result = await new createSpatialized2DElementCommand().execute();
+  if (!result.success) {
+    throw new Error("createSpatialized2DElement failed");
+  } else {
+    const { id, windowProxy } = result.data;
+    windowProxy.document.head.innerHTML = `<meta name="viewport" content="width=device-width, initial-scale=1">
+      <base href="${document.baseURI}">`;
+    return new Spatialized2DElement(id, windowProxy);
   }
-  /**
-   * Gets the native version, format is "x.x.x"
-   * @returns native version string
-   */
-  getNativeVersion() {
-    if (window.__WebSpatialData && window.__WebSpatialData.getNativeVersion) {
-      return window.__WebSpatialData.getNativeVersion();
-    }
-    return window.WebSpatailNativeVersion === "PACKAGE_VERSION" ? this.getClientVersion() : window.WebSpatailNativeVersion;
+}
+async function createSpatializedStatic3DElement(modelURL) {
+  const result = await new CreateSpatializedStatic3DElementCommand(
+    modelURL
+  ).execute();
+  if (!result.success) {
+    throw new Error("createSpatializedStatic3DElement failed");
+  } else {
+    const { id } = result.data;
+    return new SpatializedStatic3DElement(id);
   }
-  /**
-   * Gets the client version, format is "x.x.x"
-   * @returns client version string
-   */
-  getClientVersion() {
-    return "1.0.4";
+}
+async function createSpatializedDynamic3DElement() {
+  const result = await new CreateSpatializedDynamic3DElementCommand().execute();
+  if (!result.success) {
+    throw new Error("createSpatializedDynamic3DElement failed");
+  } else {
+    const { id } = result.data;
+    return new SpatializedDynamic3DElement(id);
   }
-};
+}
 
-// src/core/SpatialHelper.ts
-var SpatialHelper = class _SpatialHelper {
-  constructor(session) {
-    this.session = session;
-  }
-  static _instance = null;
-  static get instance() {
-    if (this._instance) {
-      return this._instance;
+// src/reality/realityCreator.ts
+init_JSBCommand();
+
+// src/reality/entity/SpatialEntity.ts
+init_JSBCommand();
+init_JSBCommand();
+init_SpatialWebEvent();
+var SpatialEntity = class _SpatialEntity extends SpatialObject {
+  constructor(id, userData) {
+    super(id);
+    this.userData = userData;
+    SpatialWebEvent.addEventReceiver(id, this.onReceiveEvent);
+  }
+  position = { x: 0, y: 0, z: 0 };
+  rotation = { x: 0, y: 0, z: 0 };
+  scale = { x: 1, y: 1, z: 1 };
+  events = {};
+  children = [];
+  parent = null;
+  async addComponent(component) {
+    return new AddComponentToEntityCommand(this, component).execute();
+  }
+  async setPosition(position) {
+    return this.updateTransform({ position });
+  }
+  async setRotation(rotation) {
+    return this.updateTransform({ rotation });
+  }
+  async setScale(scale) {
+    return this.updateTransform({ scale });
+  }
+  async addEntity(ent) {
+    const ans = await new SetParentForEntityCommand(ent.id, this.id).execute();
+    this.children.push(ent);
+    ent.parent = this;
+    return ans;
+  }
+  async removeFromParent() {
+    const ans = await new SetParentForEntityCommand(
+      this.id,
+      void 0
+    ).execute();
+    if (this.parent) {
+      this.parent.children = this.parent.children.filter(
+        (child) => child.id !== this.id
+      );
+      this.parent = null;
+    }
+    return ans;
+  }
+  async updateTransform(properties) {
+    this.position = properties.position ?? this.position;
+    this.rotation = properties.rotation ?? this.rotation;
+    this.scale = properties.scale ?? this.scale;
+    return new UpdateEntityPropertiesCommand(this, properties).execute();
+  }
+  async addEvent(type, callback) {
+    if (this.events[type]) {
+      this.events[type] = callback;
     } else {
-      let spatial = new Spatial();
-      if (spatial.isSupported()) {
-        let session = spatial.requestSession();
-        if (session) {
-          this._instance = new _SpatialHelper(session);
-          return this._instance;
-        }
+      try {
+        await this.updateEntityEvent(type, true);
+        this.events[type] = callback;
+      } catch (error) {
+        console.error("addEvent failed", type);
       }
     }
-    return null;
-  }
-  shape = {
-    createShapeEntity: async (shape = "box") => {
-      var box = await this.session.createMeshResource({ shape });
-      var mat = await this.session.createPhysicallyBasedMaterialResource();
-      await mat.update();
-      var customModel = await this.session.createModelComponent();
-      customModel.setMaterials([mat]);
-      customModel.setMesh(box);
-      var boxEntity = await this.session.createEntity();
-      await boxEntity.setComponent(customModel);
-      boxEntity.transform.position.z = 0;
-      boxEntity.transform.scale = new Vec3(0.5, 0.5, 0.5);
-      await boxEntity.updateTransform();
-      return boxEntity;
-    },
-    createModelEntity: async (url) => {
-      var customModel = await this.session.createModelComponent({ url });
-      var boxEntity = await this.session.createEntity();
-      await boxEntity.setComponent(customModel);
-      await boxEntity.updateTransform();
-      return boxEntity;
-    },
-    wrapInBoundingBoxEntity: async (entityToWrap) => {
-      var bb = await entityToWrap.getBoundingBox();
-      var targetSize = 1;
-      var scale = targetSize / Math.max(bb.extents.x, bb.extents.y, bb.extents.z);
-      entityToWrap.transform.scale.x = scale;
-      entityToWrap.transform.scale.y = scale;
-      entityToWrap.transform.scale.z = scale;
-      entityToWrap.transform.position.x = -bb.center.x * scale;
-      entityToWrap.transform.position.y = -bb.center.y * scale;
-      entityToWrap.transform.position.z = -bb.center.z * scale;
-      await entityToWrap.updateTransform();
-      var boudningEntity = await _SpatialHelper.instance?.session.createEntity();
-      await entityToWrap.setParent(boudningEntity);
-      return boudningEntity;
+  }
+  async removeEvent(eventName) {
+    if (this.events[eventName]) {
+      delete this.events[eventName];
+      try {
+        await this.updateEntityEvent(eventName, false);
+      } catch (error) {
+        console.error("removeEvent failed", eventName);
+      }
     }
-  };
-  navigation = {
-    openPanel: async (url, options) => {
-      if (options?.resolution) {
-        await this.session.getCurrentWindowContainer()._setOpenSettings({ resolution: options.resolution });
-      }
-      var wg = await this.session.createWindowContainer({
-        style: "Plain",
-        windowComponent: null,
-        windowContainer: null
-      });
-      var ent = await this.session.createEntity({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      var i = await this.session.createWindowComponent({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      await i.loadURL(url);
-      await ent.setCoordinateSpace("Root");
-      await ent.setComponent(i);
-      await wg.setRootEntity(ent);
-      await this.session.getCurrentWindowContainer()._setOpenSettings({ resolution: { width: 900, height: 700 } });
-      return {
-        windowContainer: wg
-      };
-    },
-    openVolume: async (url, options) => {
-      var wg = await this.session.createWindowContainer({
-        style: "Volumetric",
-        windowComponent: null,
-        windowContainer: null
-      });
-      var rootEnt = await this.session.createEntity({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      await rootEnt.setComponent(
-        await this.session.createViewComponent({
-          windowComponent: null,
-          windowContainer: wg
-        })
+  }
+  async updateEntityEvent(eventName, isEnable) {
+    return new UpdateEntityEventCommand(this, eventName, isEnable).execute();
+  }
+  onReceiveEvent = (data) => {
+    const { type } = data;
+    if (type === "objectdestroy" /* objectdestroy */) {
+      this.isDestroyed = true;
+    } else if (type === "spatialtap" /* spatialtap */) {
+      const evt = createSpatialEvent(
+        "spatialtap" /* spatialtap */,
+        data.detail
       );
-      await rootEnt.setCoordinateSpace("Root");
-      await wg.setRootEntity(rootEnt);
-      var ent = await this.session.createEntity({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      var i = await this.session.createWindowComponent({
-        windowComponent: null,
-        windowContainer: wg
-      });
-      await i.loadURL(url);
-      if (options?.resolution) {
-        await i.setResolution(
-          options.resolution.width,
-          options.resolution.height
-        );
-      } else {
-        await i.setResolution(1e3, 1e3);
-      }
-      ent.transform.position.z = -0.49;
-      await ent.updateTransform();
-      await ent.setCoordinateSpace("App");
-      await ent.setComponent(i);
-      await ent.setParent(rootEnt);
+      this.dispatchEvent(evt);
+    } else if (type === "spatialdragstart" /* spatialdragstart */) {
+      const evt = createSpatialEvent(
+        "spatialdragstart" /* spatialdragstart */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialdrag" /* spatialdrag */) {
+      const evt = createSpatialEvent(
+        "spatialdrag" /* spatialdrag */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialdragend" /* spatialdragend */) {
+      const evt = createSpatialEvent(
+        "spatialdragend" /* spatialdragend */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialrotatestart" /* spatialrotatestart */) {
+      const evt = createSpatialEvent(
+        "spatialrotatestart" /* spatialrotatestart */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialrotate" /* spatialrotate */) {
+      const evt = createSpatialEvent(
+        "spatialrotate" /* spatialrotate */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialrotateend" /* spatialrotateend */) {
+      const evt = createSpatialEvent(
+        "spatialrotateend" /* spatialrotateend */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialmagnifystart" /* spatialmagnifystart */) {
+      const evt = createSpatialEvent(
+        "spatialmagnifystart" /* spatialmagnifystart */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialmagnify" /* spatialmagnify */) {
+      const evt = createSpatialEvent(
+        "spatialmagnify" /* spatialmagnify */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
+    } else if (type === "spatialmagnifyend" /* spatialmagnifyend */) {
+      const evt = createSpatialEvent(
+        "spatialmagnifyend" /* spatialmagnifyend */,
+        data.detail
+      );
+      this.dispatchEvent(evt);
     }
   };
-  dom = {
-    attachSpatialView: async (divOnPage) => {
-      var viewEnt = await this.session.createEntity();
-      await viewEnt.setCoordinateSpace("Dom");
-      await viewEnt.setComponent(await this.session.createViewComponent());
-      var wc = await this.session.getCurrentWindowComponent();
-      var ent = await wc.getEntity();
-      await viewEnt.setParent(ent);
-      var update = () => {
-        var rect = divOnPage.getBoundingClientRect();
-        viewEnt.transform.position.x = rect.x + rect.width / 2;
-        viewEnt.transform.position.y = rect.y + rect.height / 2 + window.scrollY;
-        viewEnt.updateTransform();
-        viewEnt.getComponent(SpatialViewComponent).setResolution(rect.width, rect.height);
-      };
-      var mo = new MutationObserver(update);
-      mo.observe(divOnPage, { attributes: true });
-      var ro = new ResizeObserver(update);
-      ro.observe(divOnPage);
-      const addRemoveObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.removedNodes.forEach((node) => {
-            if (node instanceof HTMLElement) {
-              update();
-            }
-          });
-          mutation.addedNodes.forEach((node) => {
-            if (node instanceof HTMLElement) {
-              update();
-            }
-          });
-        });
-      });
-      addRemoveObserver.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-      update();
-      return {
-        entity: viewEnt
-      };
+  dispatchEvent(evt) {
+    this.events[evt.type]?.(evt);
+    if (evt.bubbles && !evt.cancelBubble) {
+      if (this.parent && this.parent instanceof _SpatialEntity) {
+        this.parent.dispatchEvent(evt);
+      }
     }
-  };
-  setBackgroundStyle = async (style, backgroundColor = "#00000000") => {
-    document.documentElement.style.backgroundColor = backgroundColor;
-    await this.session.getCurrentWindowComponent().setStyle(style);
-  };
-};
-
-// src/core/component/SpatialWindowComponent.ts
-var SpatialWindowComponent = class extends SpatialComponent {
-  /**
-   * Loads a url page in the window
-   * @param url url to load
-   */
-  async loadURL(url) {
-    await WebSpatial.updateResource(this._resource, { url });
-  }
-  async setFromWindow(window2) {
-    if (window2._webSpatialID) {
-      await WebSpatial.updateResource(this._resource, {
-        windowID: window2._webSpatialID
-      });
-    } else {
-      await console.warn(
-        "failed to call setFromWindow, window provided is not valid"
+  }
+  onDestroy() {
+    SpatialWebEvent.removeEventReceiver(this.id);
+    this.children.forEach((child) => {
+      child.parent = null;
+    });
+    this.children = [];
+    if (this.parent) {
+      this.parent.children = this.parent.children.filter(
+        (child) => child.id !== this.id
       );
+      this.parent = null;
     }
   }
-  /**
-   * Sets the resolution of the window, the resulting dimensions when rendered will be equal to 1/1360 units
-   * eg. if the resolution is set to 1360x1360 it will be a 1x1 plane
-   * See 1360 in spatialViewUI.swift for how this ratio works
-   * @param width width in pixels
-   * @param height height in pixels
-   */
-  async setResolution(width, height) {
-    await WebSpatial.updateResource(this._resource, {
-      resolution: { x: width, y: height }
-    });
+  // onUpdate(properties: SpatialEntityProperties) {
+  //   this.position = properties.position
+  //   this.rotation = properties.rotation
+  //   this.scale = properties.scale
+  // }
+  async convertFromEntityToEntity(fromEntityId, toEntityId, position) {
+    return new ConvertFromEntityToEntityCommand(
+      fromEntityId,
+      toEntityId,
+      position
+    ).execute();
   }
-  /**
-   * [Experimental] Sets the anchor which the entity this is attached to will rotate around
-   * @param rotationAnchor
-   */
-  async setRotationAnchor(rotationAnchor) {
-    await WebSpatial.updateResource(this._resource, {
-      rotationAnchor
-    });
+  async convertFromEntityToScene(fromEntityId, position) {
+    return new ConvertFromEntityToSceneCommand(fromEntityId, position).execute();
   }
-  /**
-   * [Experimental] Sets the opacity of the window after apply material
-   * @param opacity
-   */
-  async setOpacity(opacity) {
-    await WebSpatial.updateResource(this._resource, {
-      opacity
-    });
+  async convertFromSceneToEntity(entityId, position) {
+    return new ConvertFromSceneToEntityCommand(entityId, position).execute();
   }
-  /**
-   * Sets the style that should be applied to the window
-   * @param options style options
-   */
-  async setStyle(styleParam) {
-    const currentWindowComponent = SpatialHelper.instance?.session.getCurrentWindowComponent();
-    const isSettingSelfStyle = currentWindowComponent?._resource.id == this._resource.id;
-    const { material, cornerRadius } = styleParam;
-    const options = {};
-    if (material?.type) {
-      options.backgroundMaterial = material.type;
-    }
-    if (cornerRadius !== void 0) {
-      if (typeof cornerRadius === "number") {
-        options.cornerRadius = {
-          topLeading: cornerRadius,
-          bottomLeading: cornerRadius,
-          topTrailing: cornerRadius,
-          bottomTrailing: cornerRadius
-        };
-      } else {
-        options.cornerRadius = { ...cornerRadius };
-      }
-    }
-    if (isSettingSelfStyle && document && document.readyState == "loading") {
-      var encoded = encodeURIComponent(JSON.stringify(options));
-      const a = document.createElement(`a`);
-      a.href = "forcestyle://mystyle.css?style=" + encoded;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-    } else {
-      await WebSpatial.updateResource(this._resource, { style: options });
+};
+
+// src/reality/entity/SpatialModelEntity.ts
+var SpatialModelEntity = class extends SpatialEntity {
+  constructor(id, options, userData) {
+    super(id, userData);
+    this.id = id;
+    this.options = options;
+    this.userData = userData;
+  }
+};
+
+// src/reality/component/SpatialComponent.ts
+init_SpatialWebEvent();
+var SpatialComponent = class extends SpatialObject {
+  constructor(id) {
+    super(id);
+    SpatialWebEvent.addEventReceiver(id, this.onReceiveEvent);
+  }
+  onReceiveEvent = (data) => {
+    const { type } = data;
+    if (type === "objectdestroy" /* objectdestroy */) {
+      this.isDestroyed = true;
     }
+  };
+};
+
+// src/reality/component/ModelComponent.ts
+var ModelComponent = class extends SpatialComponent {
+  constructor(id, options) {
+    super(id);
+    this.options = options;
   }
-  /**
-   * Modifies the amount the spatial window can be scrolled
-   * Should only be used internally
-   * See https://developer.apple.com/documentation/uikit/1624475-uiedgeinsetsmake?language=objc
-   * @param insets margin to modify scroll distances by
-   */
-  async setScrollEdgeInsets(insets) {
-    await WebSpatial.updateResource(this._resource, {
-      setScrollEdgeInsets: insets
-    });
+};
+
+// src/reality/material/SpatialUnlitMaterial.ts
+init_JSBCommand();
+
+// src/reality/material/SpatialMaterial.ts
+var SpatialMaterial = class extends SpatialObject {
+  constructor(id, type) {
+    super(id);
+    this.id = id;
+    this.type = type;
+    this.type = type;
   }
-  /**
-   * Enable/Disable scrolling in the window (defaults to enabled), if disabled, scrolling will be applied to the root page
-   * @param enabled value to set
-   */
-  async setScrollEnabled(enabled) {
-    await WebSpatial.updateResource(this._resource, { scrollEnabled: enabled });
+};
+
+// src/reality/material/SpatialUnlitMaterial.ts
+var SpatialUnlitMaterial = class extends SpatialMaterial {
+  constructor(id, options) {
+    super(id, "unlit");
+    this.id = id;
+    this.options = options;
   }
-  /**
-   * Defaults to false. If set to true, scrolling the parent page will also scroll this window with it like other dom elements
-   * @param scrollWithParent value to set
-   */
-  async setScrollWithParent(scrollWithParent) {
-    await WebSpatial.updateResource(this._resource, {
-      scrollWithParent
-    });
+  updateProperties(properties) {
+    return new UpdateUnlitMaterialProperties(this, properties).execute();
   }
 };
 
-// src/core/component/EventSpatialComponent.ts
-var EventSpatialComponent = class extends SpatialComponent {
-  // Class implementation goes here
-  constructor(_resource) {
-    super(_resource);
-    WebSpatial.registerEventReceiver(_resource.id, (data) => {
-      this.onRecvEvent(data);
-    });
-  }
-  async onDestroy() {
-    WebSpatial.unregisterEventReceiver(this._resource.id);
+// src/reality/resource/SpatialModelAsset.ts
+var SpatialModelAsset = class extends SpatialObject {
+  constructor(id, options) {
+    super(id);
+    this.id = id;
+    this.options = options;
   }
 };
 
-// src/core/component/SpatialInputComponent.ts
-var SpatialInputComponent = class extends EventSpatialComponent {
-  onRecvEvent(data) {
-    this.onTranslate(data);
+// src/reality/realityCreator.ts
+async function createSpatialEntity(userData) {
+  const result = await new CreateSpatialEntityCommand(userData?.name).execute();
+  if (!result.success) {
+    throw new Error("createSpatialEntity failed:" + result?.errorMessage);
+  } else {
+    const { id } = result.data;
+    return new SpatialEntity(id, userData);
   }
-  /**
-   * Callback fired when a translate event occurs
-   * @param data translate event data
-   */
-  onTranslate(data) {
+}
+async function createSpatialGeometry(ctor, options) {
+  const result = await new CreateSpatialGeometryCommand(
+    ctor.type,
+    options
+  ).execute();
+  if (!result.success) {
+    throw new Error("createSpatialGeometry failed:" + result?.errorMessage);
+  } else {
+    const { id } = result.data;
+    return new ctor(id, options);
+  }
+}
+async function createSpatialUnlitMaterial(options) {
+  const result = await new CreateSpatialUnlitMaterialCommand(options).execute();
+  if (!result.success) {
+    throw new Error("createSpatialUnlitMaterial failed:" + result?.errorMessage);
+  } else {
+    const { id } = result.data;
+    return new SpatialUnlitMaterial(id, options);
+  }
+}
+async function createModelComponent(options) {
+  const result = await new CreateModelComponentCommand(options).execute();
+  if (!result.success) {
+    throw new Error("createModelComponent failed:" + result?.errorMessage);
+  } else {
+    const { id } = result.data;
+    return new ModelComponent(id, options);
+  }
+}
+async function createSpatialModelEntity(options, userData) {
+  const result = await new CreateSpatialModelEntityCommand(options).execute();
+  if (!result.success) {
+    throw new Error("createSpatialModelEntity failed:" + result?.errorMessage);
+  } else {
+    const { id } = result.data;
+    return new SpatialModelEntity(id, options, userData);
   }
+}
+async function createModelAsset(options) {
+  const result = await new CreateModelAssetCommand(options).execute();
+  if (!result.success) {
+    throw new Error("createModelAsset failed:" + result?.errorMessage);
+  } else {
+    const { id } = result.data;
+    return new SpatialModelAsset(id, options);
+  }
+}
+
+// src/reality/geometry/SpatialGeometry.ts
+var SpatialGeometry = class extends SpatialObject {
+  constructor(id, options) {
+    super(id);
+    this.id = id;
+    this.options = options;
+  }
+  static type;
+};
+
+// src/reality/geometry/SpatialBoxGeometry.ts
+var SpatialBoxGeometry = class extends SpatialGeometry {
+  constructor(id, options) {
+    super(id, options);
+    this.id = id;
+    this.options = options;
+  }
+  static type = "BoxGeometry";
+};
+
+// src/reality/geometry/SpatialSphereGeometry.ts
+var SpatialSphereGeometry = class extends SpatialGeometry {
+  constructor(id, options) {
+    super(id, options);
+    this.id = id;
+    this.options = options;
+  }
+  static type = "SphereGeometry";
 };
 
-// src/core/component/SpatialModelComponent.ts
-var SpatialModelComponent = class extends SpatialComponent {
-  cachedMaterials = new Array();
+// src/reality/geometry/SpatialCylinderGeometry.ts
+var SpatialCylinderGeometry = class extends SpatialGeometry {
+  constructor(id, options) {
+    super(id, options);
+    this.id = id;
+    this.options = options;
+  }
+  static type = "CylinderGeometry";
+};
+
+// src/reality/geometry/SpatialPlaneGeometry.ts
+var SpatialPlaneGeometry = class extends SpatialGeometry {
+  constructor(id, options) {
+    super(id, options);
+    this.id = id;
+    this.options = options;
+  }
+  static type = "PlaneGeometry";
+};
+
+// src/reality/geometry/SpatialConeGeometry.ts
+var SpatialConeGeometry = class extends SpatialGeometry {
+  constructor(id, options) {
+    super(id, options);
+    this.id = id;
+    this.options = options;
+  }
+  static type = "ConeGeometry";
+};
+
+// src/SpatialSession.ts
+var SpatialSession = class {
   /**
-   * Sets the mesh to be displayed by the component
-   * @param mesh mesh to set
+   * Gets the singleton instance of the spatial scene.
+   * The spatial scene is the root container for all spatial elements.
+   * @returns The SpatialScene singleton instance
    */
-  async setMesh(mesh) {
-    await WebSpatial.updateResource(this._resource, {
-      meshResource: mesh._resource.id
-    });
+  getSpatialScene() {
+    return SpatialScene.getInstance();
   }
   /**
-   * Sets the materials that should be applied to the mesh
-   * @param materials array of materials to set
+   * Creates a new 2D element that can be spatialized in the 3D environment.
+   * 2D elements represent HTML content that can be positioned in 3D space.
+   * @returns Promise resolving to a new Spatialized2DElement instance
    */
-  async setMaterials(materials) {
-    this.cachedMaterials = materials;
-    await WebSpatial.updateResource(this._resource, {
-      materials: materials.map((m) => {
-        m._addToComponent(this);
-        return m._resource.id;
-      })
-    });
+  createSpatialized2DElement() {
+    return createSpatialized2DElement();
   }
-  /** @hidden */
-  async _syncMaterials() {
-    await this.setMaterials(this.cachedMaterials);
-  }
-};
-
-// src/core/component/SpatialViewComponent.ts
-var SpatialViewComponent = class extends SpatialComponent {
   /**
-   * Sets the resolution of the spatial view in dom pixels
+   * Creates a new static 3D element with an optional model URL.
+   * Static 3D elements represent pre-built 3D models that can be loaded from a URL.
+   * @param modelURL Optional URL to the 3D model to load
+   * @returns Promise resolving to a new SpatializedStatic3DElement instance
    */
-  async setResolution(width, height) {
-    await WebSpatial.updateResource(this._resource, {
-      resolution: { x: width, y: height }
-    });
+  createSpatializedStatic3DElement(modelURL = "") {
+    return createSpatializedStatic3DElement(modelURL);
   }
   /**
-   * Sets if content of the spatialView should be within a portal
-   * If true, volume will be behind the page, if false, it will be in front of the page
+   * Initializes the spatial scene with custom configuration.
+   * This is a reference to the initScene function from scene-polyfill.
    */
-  async setIsPortal(isPortal) {
-    await WebSpatial.updateResource(this._resource, {
-      isPortal
-    });
-  }
-};
-
-// src/core/component/SpatialModel3DComponent.ts
-var SpatialModel3DComponent = class extends EventSpatialComponent {
-  onRecvEvent(data) {
-    const { eventType, value, error } = data;
-    switch (eventType) {
-      case "phase":
-        if (value === "success") {
-          this.onSuccess?.();
-        } else {
-          this.onFailure?.(error);
-        }
-        break;
-      case "dragstart":
-        this._onDragStart?.(value);
-        break;
-      case "dragend":
-        this._onDragEnd?.(value);
-        break;
-      case "drag":
-        this._onDrag?.(value);
-        break;
-      case "tap":
-        this._onTap?.();
-        break;
-      case "doubletap":
-        this._onDoubleTap?.();
-        break;
-      case "longpress":
-        this._onLongPress?.();
-        break;
-      default:
-        break;
-    }
+  initScene = initScene;
+  /**
+   * Creates a new dynamic 3D element that can be manipulated at runtime.
+   * Dynamic 3D elements allow for programmatic creation and modification of 3D content.
+   * @returns Promise resolving to a new SpatializedDynamic3DElement instance
+   */
+  createSpatializedDynamic3DElement() {
+    return createSpatializedDynamic3DElement();
   }
   /**
-   * Sets the resolution of the spatial view in dom pixels
+   * Creates a new spatial entity with an optional name.
+   * Entities are the basic building blocks for creating custom 3D content.
+   * @param name Optional name for the entity
+   * @returns Promise resolving to a new SpatialEntity instance
    */
-  async setResolution(width, height) {
-    await WebSpatial.updateResource(this._resource, {
-      resolution: { x: width, y: height }
-    });
+  createEntity(userData) {
+    return createSpatialEntity(userData);
   }
-  async setRotationAnchor(rotationAnchor) {
-    await WebSpatial.updateResource(this._resource, {
-      rotationAnchor
-    });
+  /**
+   * Creates a box geometry with optional configuration.
+   * @param options Configuration options for the box geometry
+   * @returns Promise resolving to a new SpatialBoxGeometry instance
+   */
+  createBoxGeometry(options = {}) {
+    return createSpatialGeometry(SpatialBoxGeometry, options);
   }
   /**
-   * Sets the opacity of the model
-   * @param opacity
+   * Creates a plane geometry with optional configuration.
+   * @param options Configuration options for the plane geometry
+   * @returns Promise resolving to a new SpatialPlaneGeometry instance
    */
-  async setOpacity(opacity) {
-    await WebSpatial.updateResource(this._resource, {
-      opacity
-    });
+  createPlaneGeometry(options = {}) {
+    return createSpatialGeometry(SpatialPlaneGeometry, options);
   }
   /**
-   * Sets how the model fill the rect
-   * @param contentMode
+   * Creates a sphere geometry with optional configuration.
+   * @param options Configuration options for the sphere geometry
+   * @returns Promise resolving to a new SpatialSphereGeometry instance
    */
-  async setContentMode(contentMode) {
-    await WebSpatial.updateResource(this._resource, {
-      contentMode
-    });
+  createSphereGeometry(options = {}) {
+    return createSpatialGeometry(SpatialSphereGeometry, options);
   }
   /**
-   * Constrains this model dimensions to the specified aspect ratio.
-   * with a value of 0, the model will use the original aspect ratio.
-   *
-   * @param aspectRatio number
+   * Creates a cone geometry with the specified configuration.
+   * @param options Configuration options for the cone geometry
+   * @returns Promise resolving to a new SpatialConeGeometry instance
    */
-  async setAspectRatio(aspectRatio) {
-    await WebSpatial.updateResource(this._resource, {
-      aspectRatio
-    });
+  createConeGeometry(options) {
+    return createSpatialGeometry(SpatialConeGeometry, options);
   }
   /**
-   * Defaults to false. If set to true, scrolling the parent page will also scroll this window with it like other dom elements
-   * @param scrollWithParent value to set
+   * Creates a cylinder geometry with the specified configuration.
+   * @param options Configuration options for the cylinder geometry
+   * @returns Promise resolving to a new SpatialCylinderGeometry instance
    */
-  async setScrollWithParent(scrollWithParent) {
-    await WebSpatial.updateResource(this._resource, {
-      scrollWithParent
-    });
+  createCylinderGeometry(options) {
+    return createSpatialGeometry(SpatialCylinderGeometry, options);
   }
   /**
-   * Sets whether the model appear in original size or fit the rect
-   * @param resizable
+   * Creates a model component with the specified configuration.
+   * Model components are used to add 3D model rendering capabilities to entities.
+   * @param options Configuration options for the model component
+   * @returns Promise resolving to a new ModelComponent instance
    */
-  async setResizable(resizable) {
-    await WebSpatial.updateResource(this._resource, {
-      resizable
-    });
+  createModelComponent(options) {
+    return createModelComponent(options);
   }
   /**
-   * Callback fired when model load success
+   * Creates an unlit material with the specified configuration.
+   * Unlit materials don't respond to lighting in the scene.
+   * @param options Configuration options for the unlit material
+   * @returns Promise resolving to a new SpatialUnlitMaterial instance
    */
-  onSuccess;
+  createUnlitMaterial(options) {
+    return createSpatialUnlitMaterial(options);
+  }
   /**
-   * Callback fired when model load failure
-   * @param errorReason
+   * Creates a model asset with the specified configuration.
+   * Model assets represent 3D model resources that can be used by entities.
+   * @param options Configuration options for the model asset
+   * @returns Promise resolving to a new SpatialModelAsset instance
    */
-  onFailure;
+  createModelAsset(options) {
+    return createModelAsset(options);
+  }
   /**
-   * Callback fired when model was dragged at the beginning
-   * @param dragEvent
+   * Creates a spatial model entity with the specified configuration.
+   * This is a convenience method for creating an entity with a model component.
+   * @param options Configuration options for the spatial model entity
+   * @returns Promise resolving to a new SpatialModelEntity instance
    */
-  _onDragStart;
-  set onDragStart(callback) {
-    if (this._onDragStart !== callback) {
-      this._onDragStart = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDragEvent: this.enableDragEvent
-      });
-    }
+  createSpatialModelEntity(options, userData) {
+    return createSpatialModelEntity(options, userData);
   }
+};
+
+// src/Spatial.ts
+init_SpatialWebEvent();
+var Spatial = class {
   /**
-   * Callback fired when model was dragged
-   * @param dragEvent
+   * Requests a spatial session object from the browser.
+   * This is the primary method to initialize spatial functionality.
+   * @returns The SpatialSession instance or null if not available in the current browser
+   * [TODO] discuss implications of this not being async
    */
-  _onDrag;
-  set onDrag(callback) {
-    if (this._onDrag !== callback) {
-      this._onDrag = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDragEvent: this.enableDragEvent
-      });
+  requestSession() {
+    if (this.runInSpatialWeb()) {
+      SpatialWebEvent.init();
+      return new SpatialSession();
+    } else {
+      return null;
     }
   }
   /**
-   * Callback fired when model was dragged at the ending
-   * @param dragEvent
+   * Checks if the current page is running in a spatial web environment.
+   * This method detects if the application is running in a WebSpatial-compatible browser.
+   * @returns True if running in a spatial web environment, false otherwise
    */
-  _onDragEnd;
-  set onDragEnd(callback) {
-    if (this._onDragEnd !== callback) {
-      this._onDragEnd = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDragEvent: this.enableDragEvent
-      });
+  runInSpatialWeb() {
+    if (navigator.userAgent.indexOf("WebSpatial/") > 0) {
+      return true;
     }
+    return false;
   }
-  get enableDragEvent() {
-    return void 0 !== this._onDrag || void 0 !== this._onDragStart || void 0 !== this._onDragEnd;
+  /** @deprecated
+   * Checks if WebSpatial is supported in the current environment.
+   * Verifies compatibility between native and client versions.
+   * @returns True if web spatial is supported by this webpage
+   */
+  isSupported() {
+    return true;
   }
-  /**
-   * Callback fired when model was tapped
+  /** @deprecated
+   * Gets the native WebSpatial version from the browser environment.
+   * The version format follows semantic versioning (x.x.x).
+   * @returns Native version string in format "x.x.x"
    */
-  _onTap;
-  set onTap(callback) {
-    if (this._onTap !== callback) {
-      this._onTap = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableTapEvent: void 0 !== callback
-      });
+  getNativeVersion() {
+    if (window.__WebSpatialData && window.__WebSpatialData.getNativeVersion) {
+      return window.__WebSpatialData.getNativeVersion();
     }
+    return window.WebSpatailNativeVersion === "PACKAGE_VERSION" ? this.getClientVersion() : window.WebSpatailNativeVersion;
   }
-  /** Callback fired when model was double tapped */
-  _onDoubleTap;
-  set onDoubleTap(callback) {
-    if (this._onDoubleTap !== callback) {
-      this._onDoubleTap = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableDoubleTapEvent: void 0 !== callback
-      });
-    }
+  /** @deprecated
+   * Gets the client SDK version.
+   * The version format follows semantic versioning (x.x.x).
+   * @returns Client SDK version string in format "x.x.x"
+   */
+  getClientVersion() {
+    return "1.0.5";
   }
-  /** Callback fired when model was long pressed */
-  _onLongPress;
-  set onLongPress(callback) {
-    if (this._onLongPress !== callback) {
-      this._onLongPress = callback;
-      WebSpatial.updateResource(this._resource, {
-        enableLongPressEvent: void 0 !== callback
-      });
-    }
+};
+
+// src/index.ts
+init_ssr_polyfill();
+
+// src/spatial-window-polyfill.ts
+init_utils();
+var spatial = new Spatial();
+var session = void 0;
+var SpatialGlobalCustomVars = {
+  backgroundMaterial: "--xr-background-material"
+};
+var htmlBackgroundMaterial = "";
+function setCurrentWindowStyle(backgroundMaterial) {
+  if (backgroundMaterial !== htmlBackgroundMaterial) {
+    session?.getSpatialScene()?.updateSpatialProperties({
+      material: 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) {
+    session?.getSpatialScene()?.updateSpatialProperties({
+      cornerRadius
+    });
+    htmlCornerRadius.topLeading = cornerRadius.topLeading;
+    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
+    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
+    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
+  }
+}
+function setOpacity(opacity) {
+  session?.getSpatialScene().updateSpatialProperties({
+    opacity
+  });
+}
+function checkOpacity() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+  setOpacity(opacity);
+}
+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();
+      }
+      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(checkCSSProperties);
+  headObserver.observe(document.head, { childList: true, subtree: true });
+}
+function checkCSSProperties() {
+  checkHtmlBackgroundMaterial();
+  checkCornerRadius();
+  checkOpacity();
+}
+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"]
+  });
+}
+async function spatialWindowPolyfill() {
+  if (!spatial.runInSpatialWeb()) {
+    return;
+  }
+  session = await spatial.requestSession();
+  if (document.readyState === "complete") {
+    checkCSSProperties();
+  } else {
+    window.addEventListener("load", () => {
+      checkCSSProperties();
+    });
+  }
+  hijackDocumentElementStyle();
+  monitorExternalStyleChange();
+  monitorHTMLAttributeChange();
+}
+
+// src/index.ts
+if (!isSSREnv() && navigator.userAgent.indexOf("WebSpatial/") > 0) {
+  injectSceneHook();
+  spatialWindowPolyfill();
+}
 export {
+  BaseplateVisibilityValues,
+  CubeInfo,
+  ModelComponent,
   Spatial,
+  SpatialBoxGeometry,
   SpatialComponent,
+  SpatialConeGeometry,
+  SpatialCylinderGeometry,
   SpatialEntity,
-  SpatialHelper,
-  SpatialInputComponent,
-  SpatialMeshResource,
-  SpatialModel3DComponent,
-  SpatialModelComponent,
-  SpatialPhysicallyBasedMaterialResource,
+  SpatialGeometry,
+  SpatialMaterial,
+  SpatialModelAsset,
+  SpatialModelEntity,
+  SpatialObject,
+  SpatialPlaneGeometry,
+  SpatialScene,
+  SpatialSceneState,
+  SpatialSceneValues,
   SpatialSession,
-  SpatialTransform,
-  SpatialViewComponent,
-  SpatialWindowComponent,
-  SpatialWindowContainer,
-  Vec3,
-  Vec4
+  SpatialSphereGeometry,
+  SpatialUnlitMaterial,
+  Spatialized2DElement,
+  SpatializedDynamic3DElement,
+  SpatializedElement,
+  SpatializedElementType,
+  SpatializedStatic3DElement,
+  WorldAlignmentValues,
+  WorldScalingValues,
+  isSSREnv,
+  isValidBaseplateVisibilityType,
+  isValidSceneUnit,
+  isValidSpatialSceneType,
+  isValidWorldAlignmentType,
+  isValidWorldScalingType
 };
 //# sourceMappingURL=index.js.map