kitchen-simulator 4.0.0-queuedEvents → 4.0.0

package/lib/index.js

@@ -6,129 +6,609 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 exports.renderKitchenSimulator = renderKitchenSimulator;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
-var _client = require("react-dom/client");
 var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _client = require("react-dom/client");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var ROOT_KEY = '__kitchenSimulatorRoot__';
+var API_KEY = '__kitchenSimulatorApi__';
+function nextFrame() {
+  return new Promise(function (resolve) {
+    return requestAnimationFrame(resolve);
+  });
+}
+
+/**
+ * Track 3D asset network activity (gltf/glb/bin/textures/hdr/etc)
+ * Ref-counted global install so multiple instances don't clobber each other.
+ */
+function installGltfTracker() {
+  if (typeof window === 'undefined') {
+    var _subscribe = function _subscribe() {
+      return function () {};
+    };
+    return {
+      getInFlight: function getInFlight() {
+        return 0;
+      },
+      waitForIdle: function () {
+        var _waitForIdle = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          return _regenerator["default"].wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", true);
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function waitForIdle() {
+          return _waitForIdle.apply(this, arguments);
+        }
+        return waitForIdle;
+      }(),
+      uninstall: function uninstall() {},
+      subscribe: _subscribe
+    };
+  }
+  var GLOBAL_KEY = '__kitchenSimulatorGltfTracker__';
+  if (!window[GLOBAL_KEY]) {
+    window[GLOBAL_KEY] = {
+      refCount: 0,
+      inFlight: 0,
+      listeners: new Set(),
+      installed: false,
+      originalFetch: null,
+      originalOpen: null,
+      originalSend: null
+    };
+  }
+  var g = window[GLOBAL_KEY];
+  var is3dAssetUrl = function is3dAssetUrl(url) {
+    try {
+      var _url$toString, _url$toString2;
+      var s = typeof url === 'string' ? url : (_url$toString = url === null || url === void 0 || (_url$toString2 = url.toString) === null || _url$toString2 === void 0 ? void 0 : _url$toString2.call(url)) !== null && _url$toString !== void 0 ? _url$toString : '';
+      var u = s.toLowerCase().split('?')[0]; // ignore cache params
+      return u.endsWith('.gltf') || u.endsWith('.glb') || u.endsWith('.bin') || u.endsWith('.ktx2') || u.endsWith('.hdr') || u.endsWith('.exr') || u.endsWith('.png') || u.endsWith('.jpg') || u.endsWith('.jpeg') || u.endsWith('.webp');
+    } catch (_unused) {
+      return false;
+    }
+  };
+  var notify = function notify() {
+    var _iterator = _createForOfIteratorHelper(g.listeners),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var fn = _step.value;
+        fn(g.inFlight);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  var subscribe = function subscribe(fn) {
+    g.listeners.add(fn);
+    fn(g.inFlight); // sync emit on subscribe
+    return function () {
+      return g.listeners["delete"](fn);
+    };
+  };
+  var installIfNeeded = function installIfNeeded() {
+    var _XHR$prototype, _XHR$prototype2;
+    if (g.installed) return;
+
+    // ---- XHR hook ----
+    var XHR = window.XMLHttpRequest;
+    if (XHR !== null && XHR !== void 0 && (_XHR$prototype = XHR.prototype) !== null && _XHR$prototype !== void 0 && _XHR$prototype.open && XHR !== null && XHR !== void 0 && (_XHR$prototype2 = XHR.prototype) !== null && _XHR$prototype2 !== void 0 && _XHR$prototype2.send) {
+      g.originalOpen = XHR.prototype.open;
+      g.originalSend = XHR.prototype.send;
+      XHR.prototype.open = function (method, url) {
+        var _g$originalOpen;
+        this.__is3dAssetRequest = is3dAssetUrl(url);
+        for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+          rest[_key - 2] = arguments[_key];
+        }
+        return (_g$originalOpen = g.originalOpen).call.apply(_g$originalOpen, [this, method, url].concat(rest));
+      };
+      XHR.prototype.send = function () {
+        var _this = this;
+        if (this.__is3dAssetRequest) {
+          g.inFlight += 1;
+          notify();
+          var _done = function done() {
+            g.inFlight -= 1;
+            if (g.inFlight < 0) g.inFlight = 0;
+            notify();
+            _this.removeEventListener('loadend', _done);
+          };
+          this.addEventListener('loadend', _done);
+        }
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return g.originalSend.apply(this, args);
+      };
+    }
+
+    // ---- fetch hook ----
+    g.originalFetch = window.fetch;
+    if (typeof g.originalFetch === 'function') {
+      window.fetch = /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var _len3,
+          args,
+          _key3,
+          url,
+          track,
+          _args2 = arguments;
+        return _regenerator["default"].wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              for (_len3 = _args2.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = _args2[_key3];
+              }
+              url = args === null || args === void 0 ? void 0 : args[0];
+              track = is3dAssetUrl(url);
+              if (track) {
+                _context2.next = 1;
+                break;
+              }
+              return _context2.abrupt("return", g.originalFetch.apply(this, args));
+            case 1:
+              g.inFlight += 1;
+              notify();
+              _context2.prev = 2;
+              _context2.next = 3;
+              return g.originalFetch.apply(this, args);
+            case 3:
+              return _context2.abrupt("return", _context2.sent);
+            case 4:
+              _context2.prev = 4;
+              g.inFlight -= 1;
+              if (g.inFlight < 0) g.inFlight = 0;
+              notify();
+              return _context2.finish(4);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this, [[2,, 4, 5]]);
+      }));
+    }
+    g.installed = true;
+  };
+
+  // “No grace” but stable: idle must remain idle for 2 RAF frames
+  function waitStableIdle2Frames() {
+    return _waitStableIdle2Frames.apply(this, arguments);
+  }
+  function _waitStableIdle2Frames() {
+    _waitStableIdle2Frames = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+      return _regenerator["default"].wrap(function (_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.next = 1;
+            return nextFrame();
+          case 1:
+            if (!(g.inFlight !== 0)) {
+              _context5.next = 2;
+              break;
+            }
+            return _context5.abrupt("return", false);
+          case 2:
+            _context5.next = 3;
+            return nextFrame();
+          case 3:
+            return _context5.abrupt("return", g.inFlight === 0);
+          case 4:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return _waitStableIdle2Frames.apply(this, arguments);
+  }
+  var waitForIdle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+      var _ref3,
+        _ref3$timeoutMs,
+        timeoutMs,
+        start,
+        _args4 = arguments;
+      return _regenerator["default"].wrap(function (_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _ref3 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref3$timeoutMs = _ref3.timeoutMs, timeoutMs = _ref3$timeoutMs === void 0 ? 30000 : _ref3$timeoutMs;
+            start = Date.now();
+            _context4.next = 1;
+            return waitStableIdle2Frames();
+          case 1:
+            if (!_context4.sent) {
+              _context4.next = 2;
+              break;
+            }
+            return _context4.abrupt("return", true);
+          case 2:
+            return _context4.abrupt("return", new Promise(function (resolve, reject) {
+              var unsub = null;
+              var onChange = /*#__PURE__*/function () {
+                var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(count) {
+                  var stable;
+                  return _regenerator["default"].wrap(function (_context3) {
+                    while (1) switch (_context3.prev = _context3.next) {
+                      case 0:
+                        if (!(count !== 0)) {
+                          _context3.next = 1;
+                          break;
+                        }
+                        if (Date.now() - start > timeoutMs) {
+                          if (unsub) unsub();
+                          reject(new Error('3D assets did not become idle within timeout'));
+                        }
+                        return _context3.abrupt("return");
+                      case 1:
+                        _context3.next = 2;
+                        return waitStableIdle2Frames();
+                      case 2:
+                        stable = _context3.sent;
+                        if (!stable) {
+                          _context3.next = 3;
+                          break;
+                        }
+                        if (unsub) unsub();
+                        resolve(true);
+                        return _context3.abrupt("return");
+                      case 3:
+                        if (Date.now() - start > timeoutMs) {
+                          if (unsub) unsub();
+                          reject(new Error('3D assets did not become idle within timeout'));
+                        }
+                      case 4:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }, _callee3);
+                }));
+                return function onChange(_x) {
+                  return _ref4.apply(this, arguments);
+                };
+              }();
+              unsub = subscribe(onChange);
+            }));
+          case 3:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function waitForIdle() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var uninstall = function uninstall() {
+    var _XHR$prototype3, _XHR$prototype4;
+    g.refCount -= 1;
+    if (g.refCount > 0) return;
+    var XHR = window.XMLHttpRequest;
+    if (XHR !== null && XHR !== void 0 && (_XHR$prototype3 = XHR.prototype) !== null && _XHR$prototype3 !== void 0 && _XHR$prototype3.open && g.originalOpen) XHR.prototype.open = g.originalOpen;
+    if (XHR !== null && XHR !== void 0 && (_XHR$prototype4 = XHR.prototype) !== null && _XHR$prototype4 !== void 0 && _XHR$prototype4.send && g.originalSend) XHR.prototype.send = g.originalSend;
+    if (typeof g.originalFetch === 'function') window.fetch = g.originalFetch;
+    g.listeners.clear();
+    g.inFlight = 0;
+    g.installed = false;
+    g.originalFetch = null;
+    g.originalOpen = null;
+    g.originalSend = null;
+  };
+  g.refCount += 1;
+  installIfNeeded();
+  return {
+    getInFlight: function getInFlight() {
+      return g.inFlight;
+    },
+    waitForIdle: waitForIdle,
+    uninstall: uninstall,
+    subscribe: subscribe
+  };
+}
 function renderKitchenSimulator(container) {
+  var _props$framesPerEvent, _props$waitForGltfIdl, _props$gltfTimeoutMs;
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var apiRef = null;
-  var idSeq = 0;
+  if (!container) throw new Error('renderKitchenSimulator: container is required');
+
+  // ✅ Reuse existing API
+  if (container[API_KEY]) {
+    var _container$API_KEY$__, _container$API_KEY;
+    (_container$API_KEY$__ = (_container$API_KEY = container[API_KEY]).__render) === null || _container$API_KEY$__ === void 0 || _container$API_KEY$__.call(_container$API_KEY, props);
+    return container[API_KEY];
+  }
+
+  // ✅ Reuse root
+  var root = container[ROOT_KEY];
+  if (!root) {
+    root = (0, _client.createRoot)(container);
+    container[ROOT_KEY] = root;
+  }
+  var setExternalEventFn = null;
+  var destroyed = false;
+  var queue = [];
+  var pendingMarkers = new Set();
+  var MARKER = Symbol('marker');
+  var gltfTracker = installGltfTracker();
+
+  // FAST defaults (safe)
+  var defaultFramesPerEvent = (_props$framesPerEvent = props.framesPerEvent) !== null && _props$framesPerEvent !== void 0 ? _props$framesPerEvent : 1;
+  var waitForAssets = (_props$waitForGltfIdl = props.waitForGltfIdleAfterEachEvent) !== null && _props$waitForGltfIdl !== void 0 ? _props$waitForGltfIdl : true;
+  var defaultTimeout = (_props$gltfTimeoutMs = props.gltfTimeoutMs) !== null && _props$gltfTimeoutMs !== void 0 ? _props$gltfTimeoutMs : 30000;
+
+  // If you want ultra-fast UI responsiveness, you can disable waiting per-event
+  // and only wait on “important” events, see comment in settle() below.
+
+  var draining = false;
+  function isSyncScene(ev) {
+    var _ev$payload;
+    return (ev === null || ev === void 0 ? void 0 : ev.type) === 'EXTERNAL_EVENT_SYNC_SCENE' || (ev === null || ev === void 0 || (_ev$payload = ev.payload) === null || _ev$payload === void 0 ? void 0 : _ev$payload.mode) === 'sync-scene' || (ev === null || ev === void 0 ? void 0 : ev.__sync) === true;
+  }
+  function settle(_x2) {
+    return _settle.apply(this, arguments);
+  }
+  function _settle() {
+    _settle = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7(ev) {
+      var _ev$framesPerEvent, _ev$waitForGltfIdleAf;
+      var frames, i, shouldWait, _ev$gltfTimeoutMs, timeoutMs;
+      return _regenerator["default"].wrap(function (_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            frames = (_ev$framesPerEvent = ev === null || ev === void 0 ? void 0 : ev.framesPerEvent) !== null && _ev$framesPerEvent !== void 0 ? _ev$framesPerEvent : defaultFramesPerEvent; // (1) allow react/reducers to run (fixes “must zoom to see updates”)
+            i = 0;
+          case 1:
+            if (!(i < frames)) {
+              _context7.next = 3;
+              break;
+            }
+            _context7.next = 2;
+            return nextFrame();
+          case 2:
+            i += 1;
+            _context7.next = 1;
+            break;
+          case 3:
+            // (2) optionally wait for assets
+            // fastest safe approach: keep ON for events that add/replace/load models
+            // You can override per-event via ev.waitForGltfIdleAfterEachEvent = false
+            shouldWait = (_ev$waitForGltfIdleAf = ev === null || ev === void 0 ? void 0 : ev.waitForGltfIdleAfterEachEvent) !== null && _ev$waitForGltfIdleAf !== void 0 ? _ev$waitForGltfIdleAf : waitForAssets;
+            if (!shouldWait) {
+              _context7.next = 4;
+              break;
+            }
+            timeoutMs = (_ev$gltfTimeoutMs = ev === null || ev === void 0 ? void 0 : ev.gltfTimeoutMs) !== null && _ev$gltfTimeoutMs !== void 0 ? _ev$gltfTimeoutMs : defaultTimeout;
+            _context7.next = 4;
+            return gltfTracker.waitForIdle({
+              timeoutMs: timeoutMs
+            });
+          case 4:
+            _context7.next = 5;
+            return nextFrame();
+          case 5:
+            if (!isSyncScene(ev)) {
+              _context7.next = 6;
+              break;
+            }
+            _context7.next = 6;
+            return nextFrame();
+          case 6:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    }));
+    return _settle.apply(this, arguments);
+  }
+  function drain() {
+    return _drain.apply(this, arguments);
+  }
+  function _drain() {
+    _drain = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+      var item;
+      return _regenerator["default"].wrap(function (_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            if (!(draining || destroyed)) {
+              _context8.next = 1;
+              break;
+            }
+            return _context8.abrupt("return");
+          case 1:
+            draining = true;
+            _context8.prev = 2;
+          case 3:
+            if (!(!destroyed && queue.length)) {
+              _context8.next = 8;
+              break;
+            }
+            if (setExternalEventFn) {
+              _context8.next = 5;
+              break;
+            }
+            _context8.next = 4;
+            return nextFrame();
+          case 4:
+            return _context8.abrupt("continue", 3);
+          case 5:
+            item = queue.shift();
+            if (!(item && item.__marker === MARKER)) {
+              _context8.next = 6;
+              break;
+            }
+            pendingMarkers["delete"](item.token);
+            return _context8.abrupt("continue", 3);
+          case 6:
+            setExternalEventFn(item);
+            _context8.next = 7;
+            return settle(item);
+          case 7:
+            _context8.next = 3;
+            break;
+          case 8:
+            _context8.prev = 8;
+            draining = false;
+            return _context8.finish(8);
+          case 9:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8, null, [[2,, 8, 9]]);
+    }));
+    return _drain.apply(this, arguments);
+  }
   var Wrapper = /*#__PURE__*/function (_React$Component) {
     function Wrapper(p) {
-      var _this;
+      var _this2;
       (0, _classCallCheck2["default"])(this, Wrapper);
-      _this = _callSuper(this, Wrapper, [p]);
-      (0, _defineProperty2["default"])(_this, "onExternalEventProcessed", function (eventId) {
-        // only resolve the current one
-        if (eventId === _this._currentId) {
-          var _this$_currentResolve, _this2;
-          (_this$_currentResolve = (_this2 = _this)._currentResolve) === null || _this$_currentResolve === void 0 || _this$_currentResolve.call(_this2);
-          _this._currentResolve = null;
-          _this._currentId = null;
-          _this.processing = false;
-          _this.processNext();
-        }
-      });
-      _this.state = {
-        externalEvent: null
-      };
-      _this.queue = [];
-      _this.processing = false;
-      apiRef = {
-        enqueueExternalEvent: function enqueueExternalEvent(ev) {
-          return _this.enqueue(ev);
-        }
+      _this2 = _callSuper(this, Wrapper, [p]);
+      _this2.state = {
+        externalEvent: p.externalEvent || null
       };
-      return _this;
+      _this2._mounted = false;
+      return _this2;
     }
     (0, _inherits2["default"])(Wrapper, _React$Component);
     return (0, _createClass2["default"])(Wrapper, [{
-      key: "enqueue",
-      value: function enqueue(ev) {
-        if (!ev) return Promise.resolve();
-        var id = ++idSeq;
-        var resolve;
-        var promise = new Promise(function (res) {
-          return resolve = res;
-        });
-        this.queue.push({
-          id: id,
-          ev: ev,
-          resolve: resolve
-        });
-        if (!this.processing) this.processNext();
-        return promise;
-      }
-    }, {
-      key: "processNext",
-      value: function processNext() {
+      key: "componentDidMount",
+      value: function componentDidMount() {
         var _this3 = this;
-        var next = this.queue.shift();
-        if (!next) {
-          this.processing = false;
-          return;
-        }
-        this.processing = true;
-
-        // IMPORTANT: set an ID so LiteRenderer can ack it
-        var payload = _objectSpread(_objectSpread({}, next.ev), {}, {
-          __eventId: next.id
-        });
-
-        // Clear then set (edge trigger), but no timers needed.
-        this.setState({
-          externalEvent: null
-        }, function () {
-          _this3._currentResolve = next.resolve;
-          _this3._currentId = next.id;
+        this._mounted = true;
+        setExternalEventFn = function setExternalEventFn(newEvent) {
+          if (!_this3._mounted) return;
           _this3.setState({
-            externalEvent: payload
+            externalEvent: newEvent
           });
-        });
+        };
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this._mounted = false;
+        setExternalEventFn = null;
       }
     }, {
       key: "render",
       value: function render() {
         return /*#__PURE__*/_react["default"].createElement(_LiteRenderer["default"], (0, _extends2["default"])({}, this.props, {
-          externalEvent: this.state.externalEvent,
-          onExternalEventProcessed: this.onExternalEventProcessed
+          externalEvent: this.state.externalEvent
         }));
       }
     }]);
   }(_react["default"].Component);
-  var root = container[ROOT_KEY];
-  if (!root) {
-    root = (0, _client.createRoot)(container);
-    container[ROOT_KEY] = root;
-  }
-  root.render(/*#__PURE__*/_react["default"].createElement(Wrapper, props));
-  return {
-    enqueueExternalEvent: function enqueueExternalEvent(ev) {
-      var _apiRef$enqueueExtern, _apiRef, _apiRef$enqueueExtern2;
-      return (_apiRef$enqueueExtern = (_apiRef = apiRef) === null || _apiRef === void 0 || (_apiRef$enqueueExtern2 = _apiRef.enqueueExternalEvent) === null || _apiRef$enqueueExtern2 === void 0 ? void 0 : _apiRef$enqueueExtern2.call(_apiRef, ev)) !== null && _apiRef$enqueueExtern !== void 0 ? _apiRef$enqueueExtern : Promise.resolve();
+  var api = {
+    __render: function __render(nextProps) {
+      root.render(/*#__PURE__*/_react["default"].createElement(Wrapper, nextProps));
+    },
+    // ✅ host can query current inFlight
+    getGltfInFlight: function getGltfInFlight() {
+      return gltfTracker.getInFlight();
     },
-    updateExternalEvent: function updateExternalEvent(ev) {
-      var _apiRef2, _apiRef2$enqueueExter;
-      (_apiRef2 = apiRef) === null || _apiRef2 === void 0 || (_apiRef2$enqueueExter = _apiRef2.enqueueExternalEvent) === null || _apiRef2$enqueueExter === void 0 || _apiRef2$enqueueExter.call(_apiRef2, ev);
+    // ✅ host can subscribe to inFlight changes (loader)
+    subscribeGltfInFlight: function subscribeGltfInFlight(cb) {
+      return gltfTracker.subscribe(cb);
+    },
+    sendExternalEvents: function sendExternalEvents(eventOrEvents) {
+      var events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
+      var _iterator2 = _createForOfIteratorHelper(events),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var e = _step2.value;
+          queue.push(e);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var token = Symbol('batch');
+      pendingMarkers.add(token);
+      queue.push({
+        __marker: MARKER,
+        token: token
+      });
+      drain();
+
+      // resolve when marker cleared
+      return new Promise(function (resolve) {
+        var check = /*#__PURE__*/function () {
+          var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+            return _regenerator["default"].wrap(function (_context6) {
+              while (1) switch (_context6.prev = _context6.next) {
+                case 0:
+                  if (destroyed) {
+                    _context6.next = 3;
+                    break;
+                  }
+                  if (!pendingMarkers.has(token)) {
+                    _context6.next = 2;
+                    break;
+                  }
+                  _context6.next = 1;
+                  return nextFrame();
+                case 1:
+                  return _context6.abrupt("continue", 0);
+                case 2:
+                  resolve(true);
+                  return _context6.abrupt("return");
+                case 3:
+                  resolve(false);
+                case 4:
+                case "end":
+                  return _context6.stop();
+              }
+            }, _callee6);
+          }));
+          return function check() {
+            return _ref5.apply(this, arguments);
+          };
+        }();
+        check();
+      });
+    },
+    updateExternalEvent: function updateExternalEvent(e) {
+      return api.sendExternalEvents(e);
+    },
+    clearQueue: function clearQueue() {
+      queue.length = 0;
+      pendingMarkers.clear();
     },
     unmount: function unmount() {
-      var _container$ROOT_KEY, _container$ROOT_KEY$u;
-      (_container$ROOT_KEY = container[ROOT_KEY]) === null || _container$ROOT_KEY === void 0 || (_container$ROOT_KEY$u = _container$ROOT_KEY.unmount) === null || _container$ROOT_KEY$u === void 0 || _container$ROOT_KEY$u.call(_container$ROOT_KEY);
-      container[ROOT_KEY] = null;
-      apiRef = null;
+      destroyed = true;
+      api.clearQueue();
+      gltfTracker.uninstall();
+      var doUnmount = function doUnmount() {
+        try {
+          root.unmount();
+        } finally {
+          container[ROOT_KEY] = null;
+          container[API_KEY] = null;
+        }
+      };
+      if (typeof queueMicrotask === 'function') queueMicrotask(doUnmount);else setTimeout(doUnmount, 0);
     }
   };
+  api.__render(props);
+  container[API_KEY] = api;
+  return api;
 }
 var _default = exports["default"] = renderKitchenSimulator;