@netless/window-manager 1.0.0-canary.2 → 1.0.0-canary.5

package/dist/index.es.js

@@ -19,11 +19,11 @@ var __spreadValues = (a2, b2) => {
 var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
-import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, isNumber, pick, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
+import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, isNumber, throttle, delay, pick, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
 import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin, ViewMode } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
-import { Val, ValManager, combine, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
+import { Val, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
 import { ResizeObserver as ResizeObserver$2 } from "@juggle/resize-observer";
 import p$1 from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
@@ -355,6 +355,11 @@ const setViewFocusScenePath = (view, focusScenePath) => {
     return view;
   }
 };
+const releaseView = (view) => {
+  if (!view.didRelease) {
+    view.release();
+  }
+};
 const setScenePath = (room, scenePath) => {
   if (room && room.isWritable) {
     if (room.state.sceneState.scenePath !== scenePath) {
@@ -893,9 +898,10 @@ class Storage {
   }
 }
 class WhiteBoardView {
-  constructor(appContext, appProxy) {
+  constructor(appContext, appProxy, removeViewWrapper) {
     this.appContext = appContext;
     this.appProxy = appProxy;
+    this.removeViewWrapper = removeViewWrapper;
     this.nextPage = async () => {
       const nextIndex = this.pageState.index + 1;
       return this.jumpPage(nextIndex);
@@ -943,9 +949,18 @@ class WhiteBoardView {
       pageState$.setValue(pageState);
     });
   }
+  get view() {
+    return this.appContext.view;
+  }
   get pageState() {
     return this.pageState$.value;
   }
+  moveCamera(camera) {
+    this.appProxy.moveCamera(camera);
+  }
+  destroy() {
+    this.removeViewWrapper();
+  }
 }
 const setupWrapper = (root) => {
   const playground = document.createElement("div");
@@ -1009,6 +1024,7 @@ class AppContext {
       }
     };
     this.createWhiteBoardView = (size2) => {
+      var _a;
       if (this.whiteBoardView) {
         return this.whiteBoardView;
       }
@@ -1016,9 +1032,18 @@ class AppContext {
       if (!view) {
         view = this.appProxy.createAppDir();
       }
-      view.divElement = this.box.$content;
-      this.initPageSize(size2);
-      this.whiteBoardView = new WhiteBoardView(this, this.appProxy);
+      const viewWrapper = document.createElement("div");
+      viewWrapper.className = "window-manager-view-wrapper";
+      (_a = this.box.$content.parentElement) == null ? void 0 : _a.appendChild(viewWrapper);
+      const removeViewWrapper = () => {
+        var _a2;
+        (_a2 = this.box.$content.parentElement) == null ? void 0 : _a2.removeChild(viewWrapper);
+      };
+      view.divElement = viewWrapper;
+      if (this.isAddApp) {
+        this.initPageSize(size2);
+      }
+      this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
       return this.whiteBoardView;
     };
     this.initPageSize = (size2) => {
@@ -1172,6 +1197,134 @@ class AppPageStateImpl {
     (_a = this.sceneNode) == null ? void 0 : _a.dispose();
   }
 }
+class CameraSynchronizer {
+  constructor(saveCamera) {
+    this.saveCamera = saveCamera;
+    this.onRemoteUpdate = throttle((camera, size2) => {
+      this.remoteCamera = camera;
+      this.remoteSize = size2;
+      if (this.remoteSize && this.rect) {
+        let scale2;
+        if (size2.width < size2.height) {
+          scale2 = this.rect.width / size2.width;
+        } else {
+          scale2 = this.rect.height / size2.height;
+        }
+        const nextScale = camera.scale * scale2;
+        const moveCamera = () => {
+          var _a;
+          return (_a = this.view) == null ? void 0 : _a.moveCamera({
+            centerX: camera.centerX,
+            centerY: camera.centerY,
+            scale: nextScale,
+            animationMode: AnimationMode.Immediately
+          });
+        };
+        delay(moveCamera, 50);
+      }
+    }, 50);
+    this.onLocalSizeUpdate = (size2) => {
+      if (this.rect && this.view) {
+        let scale2;
+        if (size2.width < size2.height) {
+          scale2 = this.rect.width / size2.width;
+        } else {
+          scale2 = this.rect.height / size2.height;
+        }
+        const nextScale = this.view.camera.scale / scale2;
+        this.view.moveCamera({
+          scale: nextScale,
+          animationMode: AnimationMode.Immediately
+        });
+      }
+    };
+  }
+  setRect(rect) {
+    this.rect = rect;
+    if (this.remoteCamera && this.remoteSize) {
+      this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+    }
+  }
+  setView(view) {
+    this.view = view;
+  }
+  onLocalCameraUpdate(camera) {
+    this.saveCamera(camera);
+    this.remoteCamera = camera;
+  }
+}
+class AppViewSync {
+  constructor(appProxy) {
+    this.appProxy = appProxy;
+    this.sem = new SideEffectManager();
+    this.bindView = (view) => {
+      if (!view)
+        return;
+      this.synchronizer.setView(view);
+      this.sem.add(() => {
+        view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        return () => view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+      });
+    };
+    this.onCameraUpdatedByDevice = (camera) => {
+      var _a;
+      this.synchronizer.onLocalCameraUpdate(camera);
+      const stage = (_a = this.appProxy.box) == null ? void 0 : _a.contentStageRect;
+      if (stage) {
+        const size2 = { width: stage.width, height: stage.height, id: this.appProxy.uid };
+        if (!isEqual(size2, this.appProxy.size$.value)) {
+          this.appProxy.storeSize(size2);
+        }
+      }
+    };
+    this.synchronizer = new CameraSynchronizer((camera) => {
+      this.appProxy.storeCamera(__spreadValues({
+        id: this.appProxy.uid
+      }, camera));
+    });
+    this.bindView(appProxy.view);
+    this.sem.add(() => this.appProxy.camera$.subscribe((camera) => {
+      const size2 = this.appProxy.size$.value;
+      if (camera && size2) {
+        this.synchronizer.onRemoteUpdate(camera, size2);
+      }
+    }));
+    const box = this.appProxy.box;
+    if (box && box.contentStageRect) {
+      this.synchronizer.setRect(box.contentStageRect);
+      this.sem.add(() => box._contentStageRect$.subscribe((rect) => {
+        if (rect) {
+          this.synchronizer.setRect(rect);
+        }
+      }));
+      if (!this.appProxy.size$.value) {
+        this.appProxy.storeSize({
+          id: this.appProxy.uid,
+          width: box.contentStageRect.width,
+          height: box.contentStageRect.height
+        });
+      }
+    }
+  }
+  destroy() {
+    this.sem.flushAll();
+  }
+}
+const boxEmitter = new Emittery();
+const calculateNextIndex = (index2, pageState) => {
+  let nextIndex = 0;
+  const maxIndex = pageState.length - 1;
+  if (index2 === pageState.index) {
+    if (index2 === maxIndex) {
+      nextIndex = index2 - 1;
+    } else {
+      nextIndex = pageState.index + 1;
+    }
+  } else {
+    nextIndex = pageState.index;
+  }
+  return nextIndex;
+};
 var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["Apps"] = "apps";
   Fields2["Focus"] = "focus";
@@ -1185,6 +1338,8 @@ var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["CursorState"] = "cursorState";
   Fields2["FullPath"] = "fullPath";
   Fields2["Registered"] = "registered";
+  Fields2["Camera"] = "camera";
+  Fields2["Size"] = "size";
   return Fields2;
 })(Fields || {});
 class AttributesDelegate {
@@ -1249,6 +1404,9 @@ class AttributesDelegate {
       this.context.safeUpdateAttributes(["apps", appId, "state", stateName], state);
     }
   }
+  updateAppAttributes(appId, key, value) {
+    this.context.safeUpdateAttributes(["apps", appId, key], value);
+  }
   cleanAppAttributes(id2) {
     this.context.safeUpdateAttributes(["apps", id2], void 0);
     this.context.safeSetAttributes({ [id2]: void 0 });
@@ -1345,21 +1503,6 @@ const log = (...args) => {
     console.log(`[WindowManager]:`, ...args);
   }
 };
-const calculateNextIndex = (index2, pageState) => {
-  let nextIndex = 0;
-  const maxIndex = pageState.length - 1;
-  if (index2 === pageState.index) {
-    if (index2 === maxIndex) {
-      nextIndex = index2 - 1;
-    } else {
-      nextIndex = pageState.index + 1;
-    }
-  } else {
-    nextIndex = pageState.index;
-  }
-  return nextIndex;
-};
-const boxEmitter = new Emittery();
 class AppProxy {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -1369,8 +1512,13 @@ class AppProxy {
     this.appProxies = this.manager.appProxies;
     this.viewManager = this.manager.viewManager;
     this.store = this.manager.store;
+    this.uid = this.manager.uid;
     this.status = "normal";
     this.sideEffectManager = new SideEffectManager();
+    this.camera$ = new Val(void 0);
+    this.size$ = new Val(void 0);
+    this.box$ = new Val(void 0);
+    this.view$ = new Val(void 0);
     this.getAppInitState = (id2) => {
       var _a2, _b;
       const attrs = this.store.getAppState(id2);
@@ -1440,6 +1588,19 @@ class AppProxy {
         this.appEmitter.emit("pageStateChange", this.pageState);
       }
     }, 50);
+    this.storeCamera = (camera) => {
+      this.store.updateAppAttributes(this.id, Fields.Camera, camera);
+    };
+    this.storeSize = (size2) => {
+      this.store.updateAppAttributes(this.id, Fields.Size, size2);
+    };
+    this.moveCamera = (camera) => {
+      if (!this.camera$.value) {
+        return;
+      }
+      const nextCamera = __spreadValues(__spreadValues({}, this.camera$.value), camera);
+      this.storeCamera(nextCamera);
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -1461,14 +1622,43 @@ class AppProxy {
       view: this.view,
       notifyPageStateChange: this.notifyPageStateChange
     });
+    this.sideEffectManager.add(() => () => this._pageState.destroy());
+    this.sideEffectManager.add(() => emitter.on("roomMembersChange", (members) => {
+      this.appEmitter.emit("roomMembersChange", members);
+    }));
+    this.camera$.setValue(toJS(this.appAttributes.camera));
+    this.size$.setValue(toJS(this.appAttributes.size));
     this.sideEffectManager.add(() => {
-      return () => this._pageState.destroy();
+      return this.manager.refresher.add(`${this.id}-camera`, () => {
+        return reaction(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
+        }, (camera) => {
+          if (camera && camera.id !== this.uid) {
+            this.camera$.setValue(toJS(camera));
+          }
+        });
+      });
     });
     this.sideEffectManager.add(() => {
-      return emitter.on("roomMembersChange", (members) => {
-        this.appEmitter.emit("roomMembersChange", members);
+      return this.manager.refresher.add(`${this.id}-size`, () => {
+        return reaction(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
+        }, (size2) => {
+          if (size2 && size2.id !== this.uid) {
+            this.size$.setValue(toJS(size2));
+          }
+        });
       });
     });
+    combine([this.box$, this.view$]).subscribe(([box, view]) => {
+      if (box && view) {
+        const appViewSync = new AppViewSync(this);
+        this.appViewSync = appViewSync;
+        this.sideEffectManager.add(() => () => appViewSync.destroy());
+      }
+    });
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -1526,7 +1716,7 @@ class AppProxy {
     return fullPath;
   }
   setFullPath(path) {
-    this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
+    this.store.updateAppAttributes(this.id, Fields.FullPath, path);
   }
   async baseInsertApp(skipUpdate = false) {
     var _a;
@@ -1548,8 +1738,7 @@ class AppProxy {
     };
   }
   get box() {
-    var _a;
-    return (_a = this.boxManager) == null ? void 0 : _a.getBox(this.id);
+    return this.box$.value;
   }
   async setupApp(appId, skipUpdate, app, options, appOptions) {
     var _a;
@@ -1577,13 +1766,14 @@ class AppProxy {
           this.fixMobileSize();
         }, SETUP_APP_DELAY);
       });
-      (_a = this.boxManager) == null ? void 0 : _a.createBox({
+      const box = (_a = this.boxManager) == null ? void 0 : _a.createBox({
         appId,
         app,
         options,
         canOperate: this.manager.canOperate,
         smartPosition: this.isAddApp
       });
+      this.box$.setValue(box);
       if (this.isAddApp && this.box) {
         this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
         this.boxManager.focusBox({ appId }, false);
@@ -1712,6 +1902,7 @@ class AppProxy {
   }
   createView() {
     const view = this.viewManager.createView(this.id);
+    this.view$.setValue(view);
     this.setViewFocusScenePath();
     return view;
   }
@@ -1762,6 +1953,7 @@ class AppProxy {
       console.error("[WindowManager]: notifyApp error", error2.message, error2.stack);
     }
     this.appEmitter.clearListeners();
+    this.sideEffectManager.flushAll();
     emitter.emit(`destroy-${this.id}`, { error });
     if (needCloseBox) {
       (_a = this.boxManager) == null ? void 0 : _a.closeBox(this.id, skipUpdate);
@@ -1779,7 +1971,9 @@ class AppProxy {
     (_c = this.manager.refresher) == null ? void 0 : _c.remove(this.stateKey);
     (_d = this.manager.refresher) == null ? void 0 : _d.remove(`${this.id}-fullPath`);
     this._prevFullPath = void 0;
-    this.sideEffectManager.flushAll();
+    this.camera$.destroy();
+    this.size$.destroy();
+    this.box$.destroy();
   }
   close() {
     return this.destroy(true, true, false);
@@ -1835,56 +2029,6 @@ const setDefaultCameraBound = (view) => {
     minContentMode: () => 0.1
   });
 };
-class CameraSynchronizer {
-  constructor(saveCamera) {
-    this.saveCamera = saveCamera;
-    this.onRemoteUpdate = throttle((camera, size2) => {
-      this.remoteCamera = camera;
-      this.remoteSize = size2;
-      if (this.remoteSize && this.rect) {
-        let scale2;
-        if (size2.width < size2.height) {
-          scale2 = this.rect.width / size2.width;
-        } else {
-          scale2 = this.rect.height / size2.height;
-        }
-        const nextScale = camera.scale * scale2;
-        const moveCamera = () => {
-          var _a;
-          return (_a = this.view) == null ? void 0 : _a.moveCamera({
-            centerX: camera.centerX,
-            centerY: camera.centerY,
-            scale: nextScale,
-            animationMode: AnimationMode.Immediately
-          });
-        };
-        delay(moveCamera, 10);
-      }
-    }, 50);
-  }
-  setRect(rect) {
-    this.rect = rect;
-    if (this.remoteCamera && this.remoteSize) {
-      this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
-    }
-  }
-  setView(view) {
-    this.view = view;
-  }
-  onLocalCameraUpdate(camera) {
-    this.saveCamera(camera);
-  }
-  onLocalSizeUpdate(size2) {
-    if (this.rect && this.view) {
-      const scale2 = this.rect.width / size2.width;
-      const nextScale = this.view.camera.scale * scale2;
-      this.view.moveCamera({
-        scale: nextScale,
-        animationMode: AnimationMode.Immediately
-      });
-    }
-  }
-}
 class MainViewProxy {
   constructor(manager) {
     var _a;
@@ -1914,9 +2058,6 @@ class MainViewProxy {
       }, { fireImmediately: true });
     };
     this.sizeChangeHandler = debounce((size2) => {
-      if (size2) {
-        this.synchronizer.onLocalSizeUpdate(size2);
-      }
     }, 30);
     this.onUpdateContainerSizeRatio = () => {
       const size2 = this.store.getMainViewSize();
@@ -1955,9 +2096,7 @@ class MainViewProxy {
     });
     this.sideEffectManager.add(() => {
       return emitter.on("startReconnect", () => {
-        if (!this.mainView.didRelease) {
-          this.mainView.release();
-        }
+        releaseView(this.mainView);
       });
     });
     const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
@@ -1967,7 +2106,6 @@ class MainViewProxy {
     this.sideEffectManager.add(() => {
       return emitter.on("playgroundSizeChange", (rect2) => {
         this.synchronizer.setRect(rect2);
-        this.synchronizer.onLocalSizeUpdate(rect2);
       });
     });
   }
@@ -2037,9 +2175,7 @@ class MainViewProxy {
     const divElement = this.mainView.divElement;
     const disableCameraTransform = this.mainView.disableCameraTransform;
     this.stop();
-    if (!this.didRelease) {
-      this.mainView.release();
-    }
+    releaseView(this.mainView);
     this.removeMainViewListener();
     this.mainView = this.createMainView();
     this.mainView.disableCameraTransform = disableCameraTransform;
@@ -3687,16 +3823,16 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var e$2 = Object.defineProperty, t$3 = Object.defineProperties, i$1 = Object.getOwnPropertyDescriptors, s$2 = Object.getOwnPropertySymbols, a$1 = Object.prototype.hasOwnProperty, o$2 = Object.prototype.propertyIsEnumerable, r$4 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, n$3 = (e2, t2) => {
+var e$2 = Object.defineProperty, t$3 = Object.defineProperties, i$1 = Object.getOwnPropertyDescriptors, s$2 = Object.getOwnPropertySymbols, a$1 = Object.prototype.hasOwnProperty, n$3 = Object.prototype.propertyIsEnumerable, o$2 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, r$4 = (e2, t2) => {
   for (var i2 in t2 || (t2 = {}))
-    a$1.call(t2, i2) && r$4(e2, i2, t2[i2]);
+    a$1.call(t2, i2) && o$2(e2, i2, t2[i2]);
   if (s$2)
     for (var i2 of s$2(t2))
-      o$2.call(t2, i2) && r$4(e2, i2, t2[i2]);
+      n$3.call(t2, i2) && o$2(e2, i2, t2[i2]);
   return e2;
 };
-var v$3, w$2, C$3, y$2, E$3, z$2, B$2, _, N$3, M$3;
-(w$2 = v$3 || (v$3 = {})).Light = "light", w$2.Dark = "dark", w$2.Auto = "auto", (y$2 = C$3 || (C$3 = {})).Normal = "normal", y$2.Minimized = "minimized", y$2.Maximized = "maximized", (z$2 = E$3 || (E$3 = {})).DarkMode = "dark_mode", z$2.PrefersColorScheme = "prefers_color_scheme", z$2.Close = "close", z$2.Focus = "focus", z$2.Blur = "blur", z$2.IntrinsicMove = "intrinsic_move", z$2.IntrinsicResize = "intrinsic_resize", z$2.ZIndex = "z_index", z$2.State = "state", z$2.Minimized = "minimized", z$2.Maximized = "maximized", z$2.Readonly = "readonly", z$2.Destroyed = "destroyed", (_ = B$2 || (B$2 = {})).Close = "close", _.Maximize = "maximize", _.Minimize = "minimize", (M$3 = N$3 || (N$3 = {})).North = "n", M$3.South = "s", M$3.West = "w", M$3.East = "e", M$3.NorthWest = "nw", M$3.NorthEast = "ne", M$3.SouthEast = "se", M$3.SouthWest = "sw";
+var v$3, w$2, C$3, y$2, E$3, z$2, _, B$2, N$3, S$3;
+(w$2 = v$3 || (v$3 = {})).Light = "light", w$2.Dark = "dark", w$2.Auto = "auto", (y$2 = C$3 || (C$3 = {})).Normal = "normal", y$2.Minimized = "minimized", y$2.Maximized = "maximized", (z$2 = E$3 || (E$3 = {})).DarkMode = "dark_mode", z$2.PrefersColorScheme = "prefers_color_scheme", z$2.Close = "close", z$2.Focus = "focus", z$2.Blur = "blur", z$2.IntrinsicMove = "intrinsic_move", z$2.IntrinsicResize = "intrinsic_resize", z$2.ZIndex = "z_index", z$2.State = "state", z$2.Minimized = "minimized", z$2.Maximized = "maximized", z$2.Readonly = "readonly", z$2.Destroyed = "destroyed", (B$2 = _ || (_ = {})).Close = "close", B$2.Maximize = "maximize", B$2.Minimize = "minimize", (S$3 = N$3 || (N$3 = {})).North = "n", S$3.South = "s", S$3.West = "w", S$3.East = "e", S$3.NorthWest = "nw", S$3.NorthEast = "ne", S$3.SouthEast = "se", S$3.SouthWest = "sw";
 function I$3(e2, t2, i2) {
   return Math.min(Math.max(e2, t2), i2);
 }
@@ -3717,7 +3853,7 @@ function V$3(e2) {
   return !e2;
 }
 class H$3 {
-  constructor({ readonly$: e2, state$: t2, title$: i2, buttons: s2, onEvent: a2, onDragStart: o2, namespace: r2 = "telebox" }) {
+  constructor({ readonly$: e2, state$: t2, title$: i2, buttons: s2, onEvent: a2, onDragStart: n2, namespace: o2 = "telebox" }) {
     this.sideEffect = new SideEffectManager(), this.lastTitleBarClick = { timestamp: 0, clientX: -100, clientY: -100 }, this.handleTitleBarClick = (e3) => {
       var t3;
       if (this.readonly$.value)
@@ -3728,7 +3864,7 @@ class H$3 {
         return;
       k$1(e3);
       const i3 = Date.now();
-      i3 - this.lastTitleBarClick.timestamp <= 500 ? Math.abs(e3.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(e3.clientY - this.lastTitleBarClick.clientY) <= 5 && this.onEvent && this.onEvent({ type: B$2.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarClick.timestamp = i3, this.lastTitleBarClick.clientX = e3.clientX, this.lastTitleBarClick.clientY = e3.clientY;
+      i3 - this.lastTitleBarClick.timestamp <= 500 ? Math.abs(e3.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(e3.clientY - this.lastTitleBarClick.clientY) <= 5 && this.onEvent && this.onEvent({ type: _.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarClick.timestamp = i3, this.lastTitleBarClick.clientX = e3.clientX, this.lastTitleBarClick.clientY = e3.clientY;
     }, this.lastTitleBarTouch = { timestamp: 0, clientX: -100, clientY: -100 }, this.handleTitleBarTouch = (e3) => {
       var t3;
       if (this.readonly$.value)
@@ -3737,8 +3873,8 @@ class H$3 {
         return;
       k$1(e3);
       const i3 = Date.now(), { clientX: s3 = this.lastTitleBarTouch.clientX + 100, clientY: a3 = this.lastTitleBarTouch.clientY + 100 } = e3.touches[0] || {};
-      i3 - this.lastTitleBarTouch.timestamp <= 500 ? Math.abs(s3 - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(a3 - this.lastTitleBarTouch.clientY) <= 10 && this.onEvent && this.onEvent({ type: B$2.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarTouch.timestamp = i3, this.lastTitleBarTouch.clientX = s3, this.lastTitleBarTouch.clientY = a3;
-    }, this.readonly$ = e2, this.state$ = t2, this.title$ = i2, this.onEvent = a2, this.onDragStart = o2, this.namespace = r2, this.buttons = s2 || [{ type: B$2.Minimize, iconClassName: this.wrapClassName("titlebar-icon-minimize") }, { type: B$2.Maximize, iconClassName: this.wrapClassName("titlebar-icon-maximize"), isActive: (e3) => e3 === C$3.Maximized }, { type: B$2.Close, iconClassName: this.wrapClassName("titlebar-icon-close") }], this.$dragArea = this.renderDragArea();
+      i3 - this.lastTitleBarTouch.timestamp <= 500 ? Math.abs(s3 - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(a3 - this.lastTitleBarTouch.clientY) <= 10 && this.onEvent && this.onEvent({ type: _.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarTouch.timestamp = i3, this.lastTitleBarTouch.clientX = s3, this.lastTitleBarTouch.clientY = a3;
+    }, this.readonly$ = e2, this.state$ = t2, this.title$ = i2, this.onEvent = a2, this.onDragStart = n2, this.namespace = o2, this.buttons = s2 || [{ type: _.Minimize, iconClassName: this.wrapClassName("titlebar-icon-minimize") }, { type: _.Maximize, iconClassName: this.wrapClassName("titlebar-icon-maximize"), isActive: (e3) => e3 === C$3.Maximized }, { type: _.Close, iconClassName: this.wrapClassName("titlebar-icon-close") }], this.$dragArea = this.renderDragArea();
   }
   render() {
     if (!this.$titleBar) {
@@ -3814,13 +3950,13 @@ class A$2 {
     i2.className = this.wrapClassName("box-stage-mask");
     const s2 = document.createElement("div");
     s2.className = this.wrapClassName("box-stage-frame");
-    const [a2, o2, r2, n2] = ["M0 8V0h8v2H2v6H0Z", "M8 8V0H0v2h6v6h2Z", "M0 0v8h8V6H2V0H0Z", "M8 0v8H0V6h6V0h2Z"].map((e3, t3) => {
+    const [a2, n2, o2, r2] = ["M0 8V0h8v2H2v6H0Z", "M8 8V0H0v2h6v6h2Z", "M0 0v8h8V6H2V0H0Z", "M8 0v8H0V6h6V0h2Z"].map((e3, t3) => {
       const i3 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       i3.setAttribute("viewBox", "0 0 8 8"), i3.setAttribute("class", `${this.wrapClassName("box-stage-frame-corner")} is-${t3}`);
       const s3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
       return s3.setAttribute("d", e3), s3.setAttribute("fill", "#3381FF"), i3.appendChild(s3), i3;
     });
-    return s2.appendChild(a2), s2.appendChild(r2), s2.appendChild(o2), s2.appendChild(n2), e2.appendChild(t2), e2.appendChild(s2), e2.appendChild(i2), this._sideEffect.addDisposer(this.highlightStage$.subscribe((t3) => {
+    return s2.appendChild(a2), s2.appendChild(o2), s2.appendChild(n2), s2.appendChild(r2), e2.appendChild(t2), e2.appendChild(s2), e2.appendChild(i2), this._sideEffect.addDisposer(this.highlightStage$.subscribe((t3) => {
       e2.classList.toggle("is-active", t3);
     })), this._sideEffect.addDisposer(combine([this.highlightStage$, this.stageRect$]).subscribe(([s3, a3]) => {
       s3 && (a3.x > 0 ? (e2.style.flexDirection = "row", t2.style.width = `${a3.x}px`, t2.style.height = "", i2.style.width = `${a3.x}px`, i2.style.height = "") : a3.y > 0 && (e2.style.flexDirection = "column", t2.style.width = "", t2.style.height = `${a3.y}px`, i2.style.width = "", i2.style.height = `${a3.y}px`));
@@ -3835,40 +3971,40 @@ class A$2 {
 }
 const W$3 = window.ResizeObserver || ResizeObserver$2;
 class Y$3 {
-  constructor({ id: e2 = genUID(), title: t2 = L$3(), namespace: i2 = "telebox", visible: s2 = true, width: a2 = 0.5, height: o2 = 0.5, minWidth: r2 = 0, minHeight: n2 = 0, x: l2 = 0.1, y: $ = 0.1, resizable: b2 = true, draggable: v2 = true, ratio: w2 = -1, focus: y2 = false, zIndex: z2 = 100, titleBar: B2, content: _2, footer: N2, styles: M2, highlightStage: S2 = null, darkMode$: k2, fence$: R2, minimized$: D2, maximized$: T2, readonly$: V2, root$: W2, rootRect$: Y2, managerStageRect$: X2, stageRatio$: P2, collectorRect$: O2, managerHighlightStage$: j2 }) {
+  constructor({ id: e2 = genUID(), title: t2 = L$3(), namespace: i2 = "telebox", visible: s2 = true, width: a2 = 0.5, height: n2 = 0.5, minWidth: o2 = 0, minHeight: r2 = 0, x: l2 = 0.1, y: $ = 0.1, resizable: b2 = true, draggable: v2 = true, ratio: w2 = -1, focus: y2 = false, zIndex: z2 = 100, stageRatio: _2 = null, titleBar: B2, content: N2, stage: S2, footer: M2, styles: k2, highlightStage: R2 = null, darkMode$: D2, fence$: T2, minimized$: V2, maximized$: W2, readonly$: Y2, root$: X2, rootRect$: P2, managerStageRect$: O2, managerStageRatio$: j2, collectorRect$: Z2, managerHighlightStage$: F2 }) {
     this.events = new Emittery(), this._delegateEvents = new Emittery(), this.handleTrackStart = (e3) => {
       var t3;
       return (t3 = this._handleTrackStart) == null ? void 0 : t3.call(this, e3);
     }, this._sideEffect = new SideEffectManager(), this.id = e2, this.namespace = i2;
-    const Z2 = new ValManager();
-    this._sideEffect.addDisposer(() => Z2.destroy());
-    const F2 = new Val(t2), G2 = new Val(s2), J2 = new Val(b2), q2 = new Val(v2), Q2 = new Val(w2), K2 = new Val(z2), U2 = new Val(y2), ee2 = new Val(_2), te2 = new Val(N2), ie2 = new Val(M2), se2 = combine([D2, T2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal), ae2 = new Val({ width: I$3(r2, 0, 1), height: I$3(n2, 0, 1) }, { compare: shallowequal }), oe2 = combine([ae2, X2], ([e3, t3]) => ({ width: e3.width * t3.width, height: e3.height * t3.height }), { compare: shallowequal }), re2 = new Val({ width: a2, height: o2 }, { compare: shallowequal });
-    this._sideEffect.addDisposer(ae2.reaction((e3, t3) => {
-      re2.setValue({ width: Math.max(a2, e3.width), height: Math.max(o2, e3.height) }, t3);
+    const G2 = new ValManager();
+    this._sideEffect.addDisposer(() => G2.destroy());
+    const J2 = new Val(t2), q2 = new Val(s2), Q2 = new Val(b2), K2 = new Val(v2), U2 = new Val(w2), ee2 = new Val(z2), te2 = new Val(y2), ie2 = new Val(N2), se2 = new Val(S2), ae2 = new Val(M2), ne2 = new Val(k2), oe2 = combine([V2, W2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal), re2 = new Val({ width: I$3(o2, 0, 1), height: I$3(r2, 0, 1) }, { compare: shallowequal }), he2 = combine([re2, O2], ([e3, t3]) => ({ width: e3.width * t3.width, height: e3.height * t3.height }), { compare: shallowequal }), le2 = new Val({ width: a2, height: n2 }, { compare: shallowequal });
+    this._sideEffect.addDisposer(re2.reaction((e3, t3) => {
+      le2.setValue({ width: Math.max(a2, e3.width), height: Math.max(n2, e3.height) }, t3);
     }));
-    const ne2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), he2 = combine([re2, X2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), le2 = combine([ne2, X2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), de2 = new Val(S2), ce2 = combine([T2, de2, j2], ([e3, t3, i3]) => t3 === null ? i3 && e3 : t3), me2 = new Val(null), ue2 = new Val(Y2.value, { compare: shallowequal }), xe2 = new A$2({ namespace: i2, root$: me2, rootRect$: ue2, ratio$: P2, highlightStage$: ce2 });
-    this._sideEffect.addDisposer(() => xe2.destroy());
-    withReadonlyValueEnhancer(this, { darkMode: k2, fence: R2, minimized: D2, maximized: T2, readonly: V2, rootRect: Y2, managerStageRect: X2, collectorRect: O2 });
-    const ge2 = { zIndex: K2, focus: U2, $userContent: ee2, $userFooter: te2, $userStyles: ie2, state: se2, minSize: ae2, pxMinSize: oe2, intrinsicSize: re2, intrinsicCoord: ne2, pxIntrinsicSize: he2, pxIntrinsicCoord: le2, highlightStage: ce2, boxHighlightStage: de2, contentRect: ue2, contentStageRect: xe2.stageRect$ };
-    withReadonlyValueEnhancer(this, ge2, Z2);
-    withValueEnhancer(this, { title: F2, visible: G2, resizable: J2, draggable: q2, ratio: Q2 }, Z2), this.titleBar = B2 || new H$3({ readonly$: V2, state$: se2, title$: F2, namespace: this.namespace, onDragStart: (e3) => {
+    const de2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), ce2 = combine([le2, O2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), me2 = combine([de2, O2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), ue2 = new Val(R2), ge2 = combine([ue2, F2], ([e3, t3]) => e3 != null ? e3 : t3), xe2 = new Val(null), pe2 = new Val(P2.value, { compare: shallowequal }), fe2 = new Val(_2), $e2 = new A$2({ namespace: i2, root$: xe2, rootRect$: pe2, ratio$: combine([fe2, j2], ([e3, t3]) => e3 != null ? e3 : t3), highlightStage$: ge2 });
+    this._sideEffect.addDisposer(() => $e2.destroy());
+    withReadonlyValueEnhancer(this, { darkMode: D2, fence: T2, minimized: V2, maximized: W2, readonly: Y2, rootRect: P2, managerStageRect: O2, collectorRect: Z2 });
+    const be2 = { zIndex: ee2, focus: te2, $userContent: ie2, $userStage: se2, $userFooter: ae2, $userStyles: ne2, state: oe2, minSize: re2, pxMinSize: he2, intrinsicSize: le2, intrinsicCoord: de2, pxIntrinsicSize: ce2, pxIntrinsicCoord: me2, highlightStage: ge2, boxHighlightStage: ue2, contentRect: pe2, contentStageRect: $e2.stageRect$ };
+    withReadonlyValueEnhancer(this, be2, G2);
+    withValueEnhancer(this, { title: J2, visible: q2, resizable: Q2, draggable: K2, ratio: U2, stageRatio: fe2 }, G2), this.titleBar = B2 || new H$3({ readonly$: Y2, state$: oe2, title$: J2, namespace: this.namespace, onDragStart: (e3) => {
       var t3;
       return (t3 = this._handleTrackStart) == null ? void 0 : t3.call(this, e3);
-    }, onEvent: (e3) => this._delegateEvents.emit(e3.type) }), this._sideEffect.addDisposer(Q2.subscribe((e3) => {
-      e3 > 0 && this.transform(le2.value.x, le2.value.y, he2.value.width, he2.value.height, true);
-    })), this._sideEffect.addDisposer(R2.subscribe((e3) => {
-      e3 && this.move(le2.value.x, le2.value.y, true);
-    })), this.$box = this.render(), me2.setValue(this.$content.parentElement);
-    const pe2 = (e3, t3) => {
+    }, onEvent: (e3) => this._delegateEvents.emit(e3.type) }), this._sideEffect.addDisposer(U2.subscribe((e3) => {
+      e3 > 0 && this.transform(me2.value.x, me2.value.y, ce2.value.width, ce2.value.height, true);
+    })), this._sideEffect.addDisposer(T2.subscribe((e3) => {
+      e3 && this.move(me2.value.x, me2.value.y, true);
+    })), this.$box = this.render(), xe2.setValue(this.$content.parentElement);
+    const ve2 = (e3, t3) => {
       this._sideEffect.addDisposer(e3.reaction((e4, i3) => {
         i3 || this.events.emit(t3, e4);
       }));
     };
-    pe2(k2, E$3.DarkMode), pe2(V2, E$3.Readonly), pe2(K2, E$3.ZIndex), pe2(D2, E$3.Minimized), pe2(T2, E$3.Maximized), pe2(se2, E$3.State), pe2(re2, E$3.IntrinsicResize), pe2(ne2, E$3.IntrinsicMove), this._sideEffect.addDisposer([G2.reaction((e3, t3) => {
+    ve2(D2, E$3.DarkMode), ve2(Y2, E$3.Readonly), ve2(ee2, E$3.ZIndex), ve2(V2, E$3.Minimized), ve2(W2, E$3.Maximized), ve2(oe2, E$3.State), ve2(le2, E$3.IntrinsicResize), ve2(de2, E$3.IntrinsicMove), this._sideEffect.addDisposer([q2.reaction((e3, t3) => {
       t3 || e3 || this.events.emit(E$3.Close);
-    }), U2.reaction((e3, t3) => {
+    }), te2.reaction((e3, t3) => {
       t3 || this.events.emit(e3 ? E$3.Focus : E$3.Blur);
-    }), W2.subscribe((e3) => {
+    }), X2.subscribe((e3) => {
       e3 ? e3.appendChild(this.$box) : this.$box.parentNode && this.$box.remove();
     })]);
   }
@@ -3901,22 +4037,22 @@ class Y$3 {
   }
   move(e2, t2, i2 = false) {
     let s2, a2;
-    const o2 = this.managerStageRect, r2 = this.pxIntrinsicSize;
+    const n2 = this.managerStageRect, o2 = this.pxIntrinsicSize;
     if (this.fence)
-      s2 = I$3(e2, o2.x, o2.x + o2.width - r2.width), a2 = I$3(t2, o2.y, o2.y + o2.height - r2.height);
+      s2 = I$3(e2, n2.x, n2.x + n2.width - o2.width), a2 = I$3(t2, n2.y, n2.y + n2.height - o2.height);
     else {
       const i3 = this.rootRect;
-      s2 = I$3(e2, i3.x - r2.width + 20, i3.x + i3.width - 20), a2 = I$3(t2, i3.y, i3.y + i3.height - 20);
+      s2 = I$3(e2, 0 - o2.width + 20, 0 + i3.width - 20), a2 = I$3(t2, 0, 0 + i3.height - 20);
     }
-    this._intrinsicCoord$.setValue({ x: (s2 - o2.x) / o2.width, y: (a2 - o2.y) / o2.height }, i2);
+    this._intrinsicCoord$.setValue({ x: (s2 - n2.x) / n2.width, y: (a2 - n2.y) / n2.height }, i2);
   }
   transform(e2, t2, i2, s2, a2 = false) {
-    const o2 = this.managerStageRect, r2 = this.rootRect;
+    const n2 = this.managerStageRect, o2 = this.rootRect;
     if (i2 = Math.max(i2, this.pxMinSize.width), s2 = Math.max(s2, this.pxMinSize.height), this.ratio > 0) {
       const e3 = this.ratio * i2;
       t2 !== this.pxIntrinsicCoord.y && (t2 -= e3 - s2), s2 = e3;
     }
-    t2 < r2.y && (t2 = r2.y, s2 = this.pxIntrinsicSize.height), this.move(e2, t2, a2), this._intrinsicSize$.setValue({ width: i2 / o2.width, height: s2 / o2.height }, a2);
+    t2 < o2.y && (t2 = o2.y, s2 = this.pxIntrinsicSize.height), this.move(e2, t2, a2), this._intrinsicSize$.setValue({ width: i2 / n2.width, height: s2 / n2.height }, a2);
   }
   mountContent(e2) {
     this._$userContent$.setValue(e2);
@@ -3924,6 +4060,12 @@ class Y$3 {
   unmountContent() {
     this._$userContent$.setValue(void 0);
   }
+  mountStage(e2) {
+    this._$userStage$.setValue(e2);
+  }
+  unmountStage() {
+    this._$userStage$.setValue(void 0);
+  }
   mountFooter(e2) {
     this._$userFooter$.setValue(e2);
   }
@@ -3966,47 +4108,62 @@ class Y$3 {
       this.$box.style.zIndex = String(e3);
     })), this.$box.dataset.teleBoxID = this.id;
     const t2 = index(this.$box), i2 = combine([this._maximized$, this._minimized$, this._pxIntrinsicSize$, this._pxIntrinsicCoord$, this._collectorRect$], ([e3, t3, i3, s3, a3]) => {
-      const o3 = e3 ? { x: 0, y: 0, width: "100%", height: "100%", scaleX: 1, scaleY: 1 } : { x: s3.x, y: s3.y, width: i3.width + "px", height: i3.height + "px", scaleX: 1, scaleY: 1 };
+      const n3 = e3 ? { x: 0, y: 0, width: "100%", height: "100%", scaleX: 1, scaleY: 1 } : { x: s3.x, y: s3.y, width: i3.width + "px", height: i3.height + "px", scaleX: 1, scaleY: 1 };
       if (t3 && a3) {
         const { width: t4, height: s4 } = e3 ? this.rootRect : i3;
-        o3.x = a3.x - t4 / 2 + a3.width / 2, o3.y = a3.y - s4 / 2 + a3.height / 2, o3.scaleX = a3.width / t4, o3.scaleY = a3.height / s4;
+        n3.x = a3.x - t4 / 2 + a3.width / 2, n3.y = a3.y - s4 / 2 + a3.height / 2, n3.scaleX = a3.width / t4, n3.scaleY = a3.height / s4;
       }
-      return o3;
+      return n3;
     }, { compare: shallowequal }), s2 = i2.value;
     this.$box.style.width = s2.width, this.$box.style.height = s2.height, this.$box.style.transform = `translate(${s2.x - 10}px,${s2.y - 10}px)`, this._sideEffect.addDisposer(i2.subscribe((e3) => {
       t2.set(e3);
     }));
     const a2 = document.createElement("div");
     a2.className = this.wrapClassName("box-main"), this.$box.appendChild(a2);
+    const n2 = document.createElement("div");
+    n2.className = this.wrapClassName("titlebar-wrap"), n2.appendChild(this.titleBar.render()), this.$titleBar = n2;
     const o2 = document.createElement("div");
-    o2.className = this.wrapClassName("titlebar-wrap"), o2.appendChild(this.titleBar.render()), this.$titleBar = o2;
+    o2.className = this.wrapClassName("content-wrap");
     const r2 = document.createElement("div");
-    r2.className = this.wrapClassName("content-wrap");
-    const n2 = document.createElement("div");
-    n2.className = this.wrapClassName("content") + " tele-fancy-scrollbar", this.$content = n2, this._sideEffect.add(() => {
+    r2.className = this.wrapClassName("content") + " tele-fancy-scrollbar", this.$content = r2, this._sideEffect.add(() => {
       const e3 = new W$3(() => {
-        const e4 = n2.getBoundingClientRect();
+        const e4 = r2.getBoundingClientRect();
         this._contentRect$.setValue({ x: e4.x, y: e4.y, width: e4.width, height: e4.height });
       });
-      return e3.observe(n2), () => e3.disconnect();
+      return e3.observe(r2), () => e3.disconnect();
     }), this._sideEffect.add(() => {
       let e3;
       return this._$userStyles$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && r2.appendChild(t3);
+        e3 && e3.remove(), e3 = t3, t3 && o2.appendChild(t3);
       });
     }), this._sideEffect.add(() => {
       let e3;
       return this._$userContent$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && n2.appendChild(t3);
+        e3 && e3.remove(), e3 = t3, t3 && r2.appendChild(t3);
+      });
+    }), this._sideEffect.add(() => {
+      let e3;
+      return this._$userStage$.subscribe((t3) => {
+        var i3;
+        if (e3 && e3.remove(), e3 = t3, t3) {
+          if (!this.$stage) {
+            const e4 = document.createElement("div");
+            this.$stage = e4, e4.className = this.wrapClassName("content-stage"), this._sideEffect.addDisposer(this._contentStageRect$.subscribe((t4) => {
+              t4 && (e4.style.top = t4.y + "px", e4.style.left = t4.x + "px", e4.style.width = t4.width + "px", e4.style.height = t4.height + "px");
+            }), "content-stage-rect"), r2.appendChild(e4);
+          }
+          this.$stage.parentElement || r2.appendChild(this.$stage), this.$stage.appendChild(t3);
+        } else
+          ((i3 = this.$stage) == null ? void 0 : i3.parentElement) && this.$stage.remove();
       });
-    }), r2.appendChild(n2);
+    }), o2.appendChild(r2);
     const h = document.createElement("div");
     return h.className = this.wrapClassName("footer-wrap"), this.$footer = h, this._sideEffect.add(() => {
       let e3;
       return this._$userFooter$.subscribe((t3) => {
         e3 && e3.remove(), e3 = t3, t3 && h.appendChild(t3);
       });
-    }), a2.appendChild(o2), a2.appendChild(r2), a2.appendChild(h), this._renderResizeHandlers(), this.$box;
+    }), a2.appendChild(n2), a2.appendChild(o2), a2.appendChild(h), this._renderResizeHandlers(), this.$box;
   }
   _renderResizeHandlers() {
     const e2 = document.createElement("div");
@@ -4015,7 +4172,7 @@ class Y$3 {
       i3.className = this.wrapClassName(t3) + " " + this.wrapClassName("resize-handle"), i3.dataset.teleBoxHandle = t3, e2.appendChild(i3);
     }), this.$box.appendChild(e2);
     const t2 = "handle-tracking-listener", i2 = this.wrapClassName("transforming");
-    let s2, a2, o2 = 0, r2 = 0, n2 = 0, h = 0, l2 = 0, d2 = 0;
+    let s2, a2, n2 = 0, o2 = 0, r2 = 0, h = 0, l2 = 0, d2 = 0;
     const c = (e3) => {
       if (this.state !== C$3.Normal)
         return;
@@ -4023,36 +4180,36 @@ class Y$3 {
       let { pageX: t3, pageY: i3 } = R$3(e3);
       i3 < this.rootRect.y && (i3 = this.rootRect.y);
       const s3 = t3 - l2, c2 = i3 - d2;
-      let { x: m3, y: u3 } = this.pxIntrinsicCoord, { width: x2, height: g2 } = this.pxIntrinsicSize;
+      let { x: m3, y: u3 } = this.pxIntrinsicCoord, { width: g2, height: x2 } = this.pxIntrinsicSize;
       switch (a2) {
         case N$3.North:
-          u3 = r2 + c2, g2 = h - c2;
+          u3 = o2 + c2, x2 = h - c2;
           break;
         case N$3.South:
-          g2 = h + c2;
+          x2 = h + c2;
           break;
         case N$3.West:
-          m3 = o2 + s3, x2 = n2 - s3;
+          m3 = n2 + s3, g2 = r2 - s3;
           break;
         case N$3.East:
-          x2 = n2 + s3;
+          g2 = r2 + s3;
           break;
         case N$3.NorthWest:
-          m3 = o2 + s3, u3 = r2 + c2, x2 = n2 - s3, g2 = h - c2;
+          m3 = n2 + s3, u3 = o2 + c2, g2 = r2 - s3, x2 = h - c2;
           break;
         case N$3.NorthEast:
-          u3 = r2 + c2, x2 = n2 + s3, g2 = h - c2;
+          u3 = o2 + c2, g2 = r2 + s3, x2 = h - c2;
           break;
         case N$3.SouthEast:
-          x2 = n2 + s3, g2 = h + c2;
+          g2 = r2 + s3, x2 = h + c2;
           break;
         case N$3.SouthWest:
-          m3 = o2 + s3, x2 = n2 - s3, g2 = h + c2;
+          m3 = n2 + s3, g2 = r2 - s3, x2 = h + c2;
           break;
         default:
-          return void this.move(o2 + s3, r2 + c2);
+          return void this.move(n2 + s3, o2 + c2);
       }
-      this.transform(m3, u3, x2, g2);
+      this.transform(m3, u3, g2, x2);
     }, m2 = (e3) => {
       a2 = void 0, s2 && (k$1(e3), this.$box.classList.toggle(i2, false), this._sideEffect.flush(t2), s2.remove());
     }, u2 = (e3) => {
@@ -4063,9 +4220,9 @@ class Y$3 {
         return;
       if (!this.draggable || a2 || this.state !== C$3.Normal)
         return;
-      const x2 = e3.target;
-      if ((u3 = x2.dataset) == null ? void 0 : u3.teleBoxHandle) {
-        k$1(e3), { x: o2, y: r2 } = this.pxIntrinsicCoord, { width: n2, height: h } = this.pxIntrinsicSize, { pageX: l2, pageY: d2 } = R$3(e3), a2 = x2.dataset.teleBoxHandle, s2 || (s2 = document.createElement("div"));
+      const g2 = e3.target;
+      if ((u3 = g2.dataset) == null ? void 0 : u3.teleBoxHandle) {
+        k$1(e3), { x: n2, y: o2 } = this.pxIntrinsicCoord, { width: r2, height: h } = this.pxIntrinsicSize, { pageX: l2, pageY: d2 } = R$3(e3), a2 = g2.dataset.teleBoxHandle, s2 || (s2 = document.createElement("div"));
         const u4 = a2 ? this.wrapClassName(`cursor-${a2}`) : "";
         s2.className = this.wrapClassName("track-mask" + (u4 ? ` ${u4}` : "")), this.$box.appendChild(s2), this.$box.classList.add(i2), this._sideEffect.add(() => (window.addEventListener("mousemove", c), window.addEventListener("touchmove", c, { passive: false }), window.addEventListener("mouseup", m2), window.addEventListener("touchend", m2, { passive: false }), window.addEventListener("touchcancel", m2, { passive: false }), () => {
           window.removeEventListener("mousemove", c), window.removeEventListener("touchmove", c), window.removeEventListener("mouseup", m2), window.removeEventListener("touchend", m2), window.removeEventListener("touchcancel", m2);
@@ -4083,14 +4240,14 @@ class Y$3 {
 }
 var X$3, P$3;
 class O$3 {
-  constructor({ minimized$: e2, readonly$: t2, darkMode$: i2, rootRect$: s2, namespace: a2 = "telebox", styles: o2 = {}, root$: r2 }) {
+  constructor({ minimized$: e2, readonly$: t2, darkMode$: i2, rootRect$: s2, namespace: a2 = "telebox", styles: n2 = {}, root$: o2 }) {
     this._sideEffect = new SideEffectManager(), this.namespace = a2;
-    const n2 = new ValManager();
-    this._sideEffect.addDisposer(() => n2.destroy());
-    const h = new Val(void 0), l2 = derive(e2), d2 = new Val(o2), m2 = new Val(document.createElement("button"));
-    withValueEnhancer(this, { styles: d2, $collector: m2 }, n2);
-    withReadonlyValueEnhancer(this, { root: r2 });
-    withReadonlyValueEnhancer(this, { rect: h, visible: l2 }, n2), m2.value.className = this.wrapClassName("collector"), m2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(m2.subscribe((a3) => {
+    const r2 = new ValManager();
+    this._sideEffect.addDisposer(() => r2.destroy());
+    const h = new Val(void 0), l2 = derive(e2), d2 = new Val(n2), m2 = new Val(document.createElement("button"));
+    withValueEnhancer(this, { styles: d2, $collector: m2 }, r2);
+    withReadonlyValueEnhancer(this, { root: o2 });
+    withReadonlyValueEnhancer(this, { rect: h, visible: l2 }, r2), m2.value.className = this.wrapClassName("collector"), m2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(m2.subscribe((a3) => {
       this._sideEffect.addEventListener(a3, "click", () => {
         t2.value || e2.setValue(false);
       }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([l2.subscribe((e3) => {
@@ -4104,12 +4261,12 @@ class O$3 {
           const i3 = e3[t3];
           i3 != null && (a3.style[t3] = i3);
         });
-      }), r2.subscribe((e3) => {
+      }), o2.subscribe((e3) => {
         e3 && e3.appendChild(a3);
-      }), combine([e2, s2, r2]).subscribe(([e3, t3, i3]) => {
+      }), combine([e2, s2, o2]).subscribe(([e3, t3, i3]) => {
         if (e3 && i3) {
-          const { x: e4, y: i4, width: s3, height: o3 } = a3.getBoundingClientRect();
-          h.setValue({ x: e4 - t3.x, y: i4 - t3.y, width: s3, height: o3 });
+          const { x: e4, y: i4, width: s3, height: n3 } = a3.getBoundingClientRect();
+          h.setValue({ x: e4 - t3.x, y: i4 - t3.y, width: s3, height: n3 });
         }
       })], "telebox-collector-el");
     }));
@@ -4135,8 +4292,8 @@ class j$1 extends H$3 {
       if (this.$titles && this.state$.value === C$3.Maximized) {
         const { children: i2 } = this.$titles.firstElementChild;
         for (let s2 = i2.length - 1; s2 >= 0; s2 -= 1) {
-          const a2 = i2[s2], o2 = (t2 = a2.dataset) == null ? void 0 : t2.teleBoxID;
-          o2 && (e2 && o2 === e2.id ? a2.classList.toggle(this.wrapClassName("titles-tab-focus"), true) : this.focusedBox && o2 === this.focusedBox.id && a2.classList.toggle(this.wrapClassName("titles-tab-focus"), false));
+          const a2 = i2[s2], n2 = (t2 = a2.dataset) == null ? void 0 : t2.teleBoxID;
+          n2 && (e2 && n2 === e2.id ? a2.classList.toggle(this.wrapClassName("titles-tab-focus"), true) : this.focusedBox && n2 === this.focusedBox.id && a2.classList.toggle(this.wrapClassName("titles-tab-focus"), false));
         }
       }
       this.focusedBox = e2;
@@ -4176,11 +4333,11 @@ class j$1 extends H$3 {
 }
 const Z$3 = window.ResizeObserver || ResizeObserver$2;
 class F$3 {
-  constructor({ root: e2 = null, prefersColorScheme: t2 = v$3.Light, minimized: i2 = false, maximized: s2 = false, fence: a2 = false, collector: o2, namespace: r2 = "telebox", readonly: n2 = false, stageRatio: l2 = -1, highlightStage: m2 = true } = {}) {
-    this.events = new Emittery(), this._sideEffect = new SideEffectManager(), this.namespace = r2;
+  constructor({ root: e2 = null, prefersColorScheme: t2 = v$3.Light, minimized: i2 = false, maximized: s2 = false, fence: a2 = false, collector: n2, namespace: o2 = "telebox", readonly: r2 = false, stageRatio: l2 = -1, highlightStage: m2 = true } = {}) {
+    this.events = new Emittery(), this._sideEffect = new SideEffectManager(), this.namespace = o2;
     const b2 = new ValManager();
     this._sideEffect.addDisposer(() => b2.destroy());
-    const w2 = new Val(e2), y2 = new Val(n2), z2 = new Val(i2), _2 = new Val(s2), N2 = new Val(a2), M2 = new Val(l2), S2 = new Val(m2), I2 = new Val({ x: 0, y: 0, width: window.innerWidth, height: window.innerHeight }, { compare: shallowequal });
+    const w2 = new Val(e2), y2 = new Val(r2), z2 = new Val(i2), B2 = new Val(s2), N2 = new Val(a2), S2 = new Val(l2), M2 = new Val(m2), I2 = new Val({ x: 0, y: 0, width: window.innerWidth, height: window.innerHeight }, { compare: shallowequal });
     this._sideEffect.addDisposer(w2.subscribe((e3) => {
       this._sideEffect.add(() => {
         if (!e3)
@@ -4210,13 +4367,13 @@ class F$3 {
     this._sideEffect.addDisposer(D2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.PrefersColorScheme, e3);
     }));
-    const L2 = combine([R2, D2], ([e3, t3]) => t3 === "auto" ? e3 : t3 === "dark"), T2 = combine([z2, _2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal);
-    this.collector = o2 != null ? o2 : new O$3({ minimized$: z2, readonly$: y2, darkMode$: L2, namespace: r2, root$: w2, rootRect$: I2 });
-    const V2 = new A$2({ namespace: r2, rootRect$: I2, ratio$: M2, root$: w2, highlightStage$: combine([S2, _2, z2], ([e3, t3, i3]) => e3 && (i3 || !t3)) });
+    const L2 = combine([R2, D2], ([e3, t3]) => t3 === "auto" ? e3 : t3 === "dark"), T2 = combine([z2, B2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal);
+    this.collector = n2 != null ? n2 : new O$3({ minimized$: z2, readonly$: y2, darkMode$: L2, namespace: o2, root$: w2, rootRect$: I2 });
+    const V2 = new A$2({ namespace: o2, rootRect$: I2, ratio$: S2, root$: w2, highlightStage$: combine([M2, B2, z2], ([e3, t3, i3]) => e3 && (i3 || !t3)) });
     this._sideEffect.addDisposer(() => V2.destroy());
     const H2 = { darkMode: L2, state: T2, root: w2, rootRect: I2, stageRect: V2.stageRect$ };
     withReadonlyValueEnhancer(this, H2, b2);
-    withValueEnhancer(this, { prefersColorScheme: D2, readonly: y2, fence: N2, minimized: z2, maximized: _2, stageRatio: M2, highlightStage: S2 }, b2);
+    withValueEnhancer(this, { prefersColorScheme: D2, readonly: y2, fence: N2, minimized: z2, maximized: B2, stageRatio: S2, highlightStage: M2 }, b2);
     const W2 = this.wrapClassName("titlebar-icon-close"), Y2 = (e3) => {
       var t3;
       if (y2.value)
@@ -4236,10 +4393,10 @@ class F$3 {
     };
     this._sideEffect.addEventListener(window, "mousedown", Y2, true), this._sideEffect.addEventListener(window, "touchstart", Y2, true), this.titleBar = new j$1({ namespace: this.namespace, title$: derive(this.topBox$, (e3) => (e3 == null ? void 0 : e3.title) || ""), boxes$: this.boxes$, darkMode$: L2, readonly$: y2, state$: T2, root$: w2, rootRect$: I2, onEvent: (e3) => {
       switch (e3.type) {
-        case B$2.Maximize:
-          _2.setValue(!_2.value);
+        case _.Maximize:
+          B2.setValue(!B2.value);
           break;
-        case B$2.Minimize:
+        case _.Minimize:
           z2.setValue(true);
           break;
         case E$3.Close:
@@ -4247,7 +4404,7 @@ class F$3 {
       }
     } }), this._sideEffect.addDisposer([T2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.State, e3);
-    }), _2.reaction((e3, t3) => {
+    }), B2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.Maximized, e3);
     }), z2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.Minimized, e3);
@@ -4275,13 +4432,13 @@ class F$3 {
     return this;
   }
   create(e2 = {}, s2 = true) {
-    const a2 = new Y$3((o2 = n$3(n$3({ zIndex: this.topBox ? this.topBox.zIndex + 1 : 100 }, e2), s2 ? this.smartPosition(e2) : {}), r2 = { namespace: this.namespace, root$: this._root$, darkMode$: this._darkMode$, maximized$: this._maximized$, minimized$: this._minimized$, fence$: this._fence$, rootRect$: this._rootRect$, managerStageRect$: this._stageRect$, stageRatio$: this._stageRatio$, readonly$: this._readonly$, collectorRect$: this.collector._rect$, managerHighlightStage$: this._highlightStage$ }, t$3(o2, i$1(r2))));
-    var o2, r2;
-    return a2.focus && (this.focusBox(a2), s2 && this.makeBoxTop(a2)), this.boxes$.setValue([...this.boxes, a2]), this._sideEffect.addDisposer([a2._delegateEvents.on(B$2.Maximize, () => {
+    const a2 = new Y$3((n2 = r$4(r$4({ zIndex: this.topBox ? this.topBox.zIndex + 1 : 100 }, e2), s2 ? this.smartPosition(e2) : {}), o2 = { namespace: this.namespace, root$: this._root$, darkMode$: this._darkMode$, maximized$: this._maximized$, minimized$: this._minimized$, fence$: this._fence$, rootRect$: this._rootRect$, managerStageRect$: this._stageRect$, managerStageRatio$: this._stageRatio$, readonly$: this._readonly$, collectorRect$: this.collector._rect$, managerHighlightStage$: this._highlightStage$ }, t$3(n2, i$1(o2))));
+    var n2, o2;
+    return a2.focus && (this.focusBox(a2), s2 && this.makeBoxTop(a2)), this.boxes$.setValue([...this.boxes, a2]), this._sideEffect.addDisposer([a2._delegateEvents.on(_.Maximize, () => {
       this.setMaximized(!this.maximized);
-    }), a2._delegateEvents.on(B$2.Minimize, () => {
+    }), a2._delegateEvents.on(_.Minimize, () => {
       this.setMinimized(true);
-    }), a2._delegateEvents.on(B$2.Close, () => {
+    }), a2._delegateEvents.on(_.Close, () => {
       this.remove(a2), this.focusTopBox();
     }), a2._intrinsicCoord$.reaction((e3, t2) => {
       t2 || this.events.emit(X$3.IntrinsicMove, a2);
@@ -4366,27 +4523,27 @@ class F$3 {
     return (i2) => t2.every((t3) => e2[t3] === i2[t3]);
   }
   updateBox(e2, t2, i2 = false) {
-    var s2, a2, o2, r2, n2, h;
-    t2.x == null && t2.y == null || e2._intrinsicCoord$.setValue({ x: (s2 = t2.x) != null ? s2 : e2.intrinsicX, y: (a2 = t2.y) != null ? a2 : e2.intrinsicY }, i2), t2.width == null && t2.height == null || e2._intrinsicSize$.setValue({ width: (o2 = t2.width) != null ? o2 : e2.intrinsicWidth, height: (r2 = t2.height) != null ? r2 : e2.intrinsicHeight }, i2), t2.title != null && e2._title$.setValue(t2.title), t2.visible != null && e2._visible$.setValue(t2.visible, i2), t2.resizable != null && e2._resizable$.setValue(t2.resizable, i2), t2.draggable != null && e2._draggable$.setValue(t2.draggable, i2), t2.ratio != null && e2._ratio$.setValue(t2.ratio, i2), t2.zIndex != null && e2._zIndex$.setValue(t2.zIndex, i2), t2.content != null && e2.mountContent(t2.content), t2.footer != null && e2.mountFooter(t2.footer), t2.minHeight == null && t2.minWidth == null || e2._minSize$.setValue({ width: (n2 = t2.minWidth) != null ? n2 : e2.minWidth, height: (h = t2.minHeight) != null ? h : e2.minHeight }, i2);
+    var s2, a2, n2, o2, r2, h;
+    t2.x == null && t2.y == null || e2._intrinsicCoord$.setValue({ x: (s2 = t2.x) != null ? s2 : e2.intrinsicX, y: (a2 = t2.y) != null ? a2 : e2.intrinsicY }, i2), t2.width == null && t2.height == null || e2._intrinsicSize$.setValue({ width: (n2 = t2.width) != null ? n2 : e2.intrinsicWidth, height: (o2 = t2.height) != null ? o2 : e2.intrinsicHeight }, i2), t2.title != null && e2._title$.setValue(t2.title), t2.visible != null && e2._visible$.setValue(t2.visible, i2), t2.resizable != null && e2._resizable$.setValue(t2.resizable, i2), t2.draggable != null && e2._draggable$.setValue(t2.draggable, i2), t2.ratio != null && e2._ratio$.setValue(t2.ratio, i2), t2.zIndex != null && e2._zIndex$.setValue(t2.zIndex, i2), t2.stageRatio !== void 0 && e2.setStageRatio(t2.stageRatio, i2), t2.content != null && e2.mountContent(t2.content), t2.footer != null && e2.mountFooter(t2.footer), t2.minHeight == null && t2.minWidth == null || e2._minSize$.setValue({ width: (r2 = t2.minWidth) != null ? r2 : e2.minWidth, height: (h = t2.minHeight) != null ? h : e2.minHeight }, i2);
   }
   smartPosition(e2) {
     let { x: t2, y: i2 } = e2;
-    const { width: s2 = 0.5, height: a2 = 0.5 } = e2, o2 = this.stageRect, r2 = this.topBox;
+    const { width: s2 = 0.5, height: a2 = 0.5 } = e2, n2 = this.stageRect, o2 = this.topBox;
     if (t2 == null) {
-      let e3 = o2.x + 20;
-      if (r2) {
-        const t3 = r2.pxIntrinsicCoord.x + 20;
-        t3 + s2 * o2.width <= o2.x + o2.width && (e3 = t3);
+      let e3 = n2.x + 20;
+      if (o2) {
+        const t3 = o2.pxIntrinsicCoord.x + 20;
+        t3 + s2 * n2.width <= n2.x + n2.width && (e3 = t3);
       }
-      t2 = (e3 - o2.x) / o2.width;
+      t2 = (e3 - n2.x) / n2.width;
     }
     if (i2 == null) {
-      let e3 = o2.y + 20;
-      if (r2) {
-        const t3 = r2.pxIntrinsicCoord.y + 20;
-        t3 + a2 * o2.height <= o2.y + o2.height && (e3 = t3);
+      let e3 = n2.y + 20;
+      if (o2) {
+        const t3 = o2.pxIntrinsicCoord.y + 20;
+        t3 + a2 * n2.height <= n2.y + n2.height && (e3 = t3);
       }
-      i2 = (e3 - o2.y) / o2.height;
+      i2 = (e3 - n2.y) / n2.height;
     }
     return { x: t2, y: i2, width: s2, height: a2 };
   }
@@ -4553,8 +4710,9 @@ class BoxManager {
       height,
       id: params.appId
     };
-    this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+    const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
     this.context.emitter.emit(`${params.appId}${Events.WindowCreated}`);
+    return box;
   }
   setupBoxManager(createTeleBoxManagerConfig) {
     const root = WindowManager.playground;
@@ -5677,6 +5835,7 @@ class ReconnectRefresher {
       this.reactors.set(id2, func);
       this.disposers.set(id2, func());
     }
+    return () => this.remove(id2);
   }
   remove(id2) {
     if (this.reactors.has(id2)) {
@@ -15302,14 +15461,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.2";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.8", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.5";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.13", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.8", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.13", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     var _a;