@netless/window-manager 1.0.0-canary.0 → 1.0.0-canary.11

package/dist/index.es.js

@@ -19,10 +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, pick, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNumber, isNull } from "lodash";
-import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, isPlayer, isRoom, WhiteVersion, ApplianceNames, RoomPhase, InvisiblePlugin, ViewMode } from "white-web-sdk";
+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, 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) => {
@@ -77,6 +78,7 @@ const DEFAULT_CONTAINER_RATIO = 9 / 16;
 const ROOT_DIR = "/";
 const INIT_DIR = "/init";
 const SETUP_APP_DELAY = 50;
+const MAX_PAGE_SIZE = 500;
 const callbacks$1 = new Emittery();
 class AppCreateQueue {
   constructor() {
@@ -353,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) {
@@ -688,7 +695,7 @@ class Storage {
     this.id = id2 || null;
     this._state = {};
     const rawState = this._getRawState(this._state);
-    if (this._context.getIsWritable()) {
+    if (this._context.isWritable) {
       if (this.id === null) {
         if (context.isAddApp && defaultState) {
           this.setState(defaultState);
@@ -748,7 +755,7 @@ class Storage {
       console.error(new Error(`Cannot call setState on destroyed Storage "${this.id}".`));
       return;
     }
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
       return;
     }
@@ -788,7 +795,7 @@ class Storage {
       console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
       return;
     }
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
       return;
     }
@@ -798,7 +805,7 @@ class Storage {
     if (this.id === null) {
       throw new Error(`Cannot delete main Storage`);
     }
-    if (!this._context.getIsWritable()) {
+    if (!this._context.isWritable) {
       console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
       return;
     }
@@ -890,6 +897,104 @@ class Storage {
     }
   }
 }
+class WhiteBoardView {
+  constructor(view, appContext, appProxy, removeViewWrapper, ensureSize) {
+    this.view = view;
+    this.appContext = appContext;
+    this.appProxy = appProxy;
+    this.removeViewWrapper = removeViewWrapper;
+    this.ensureSize = ensureSize;
+    this.nextPage = async () => {
+      const nextIndex = this.pageState.index + 1;
+      return this.jumpPage(nextIndex);
+    };
+    this.prevPage = async () => {
+      const nextIndex = this.pageState.index - 1;
+      return this.jumpPage(nextIndex);
+    };
+    this.jumpPage = async (index2) => {
+      if (index2 < 0 || index2 >= this.pageState.length) {
+        console.warn(`[WindowManager]: index ${index2} out of range`);
+        return false;
+      }
+      this.appProxy.setSceneIndex(index2);
+      return true;
+    };
+    this.addPage = async (params) => {
+      const after = params == null ? void 0 : params.after;
+      const scene = params == null ? void 0 : params.scene;
+      const scenePath = this.appProxy.scenePath;
+      if (!scenePath)
+        return;
+      if (after) {
+        const nextIndex = this.pageState.index + 1;
+        putScenes(this.appContext.room, scenePath, [scene || {}], nextIndex);
+      } else {
+        putScenes(this.appContext.room, scenePath, [scene || {}]);
+      }
+    };
+    this.removePage = async (index2) => {
+      const needRemoveIndex = index2 === void 0 ? this.pageState.index : index2;
+      if (this.pageState.length === 1) {
+        console.warn(`[WindowManager]: can not remove the last page`);
+        return false;
+      }
+      if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
+        console.warn(`[WindowManager]: page index ${index2} out of range`);
+        return false;
+      }
+      return this.appProxy.removeSceneByIndex(needRemoveIndex);
+    };
+    const pageState$ = new Val(appProxy.pageState);
+    this.pageState$ = pageState$;
+    appProxy.appEmitter.on("pageStateChange", (pageState) => {
+      pageState$.setValue(pageState);
+    });
+  }
+  get pageState() {
+    return this.pageState$.value;
+  }
+  moveCamera(camera) {
+    this.appProxy.moveCamera(camera);
+  }
+  setRect(rect) {
+    this.appProxy.updateSize(rect.width, rect.height);
+  }
+  destroy() {
+    this.pageState$.destroy();
+    this.removeViewWrapper();
+  }
+}
+const setupWrapper = (root) => {
+  const playground = document.createElement("div");
+  playground.className = "netless-window-manager-playground";
+  const mainViewElement = document.createElement("div");
+  mainViewElement.className = "netless-window-manager-main-view";
+  playground.appendChild(mainViewElement);
+  root.appendChild(playground);
+  return { playground, mainViewElement };
+};
+const checkVersion = () => {
+  const version = getVersionNumber(WhiteVersion);
+  if (version < getVersionNumber(REQUIRE_VERSION)) {
+    throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
+  }
+};
+const findMemberByUid = (room, uid) => {
+  const roomMembers = room == null ? void 0 : room.state.roomMembers;
+  return roomMembers == null ? void 0 : roomMembers.find((member) => {
+    var _a;
+    return ((_a = member.payload) == null ? void 0 : _a.uid) === uid;
+  });
+};
+const serializeRoomMembers = (members) => {
+  return members.map((member) => {
+    var _a;
+    return __spreadValues({
+      uid: ((_a = member.payload) == null ? void 0 : _a.uid) || ""
+    }, member);
+  });
+};
 class AppContext {
   constructor(manager, boxManager, appId, appProxy, appOptions) {
     this.manager = manager;
@@ -910,9 +1015,6 @@ class AppContext {
     };
     this.store = this.manager.store;
     this.isReplay = this.manager.isReplay;
-    this.getDisplayer = () => {
-      return this.manager.displayer;
-    };
     this.getAttributes = () => {
       return this.appProxy.attributes;
     };
@@ -924,36 +1026,50 @@ class AppContext {
         return appAttr == null ? void 0 : appAttr.options["scenes"];
       }
     };
-    this.getView = () => {
-      return this.appProxy.view;
+    this.createWhiteBoardView = (size2) => {
+      var _a;
+      if (this.whiteBoardView) {
+        return this.whiteBoardView;
+      }
+      let view = this.view;
+      if (!view) {
+        view = this.appProxy.createAppDir();
+      }
+      const viewWrapper = document.createElement("div");
+      this._viewWrapper = viewWrapper;
+      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);
+        this._viewWrapper = void 0;
+      };
+      view.divElement = viewWrapper;
+      this.appProxy.fireMemberStateChange();
+      if (this.isAddApp) {
+        this.ensurePageSize(size2);
+      }
+      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
+      return this.whiteBoardView;
     };
-    this.mountView = (dom) => {
-      const view = this.getView();
-      if (view) {
-        view.divElement = dom;
-        setTimeout(() => {
-          var _a;
-          (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
-        }, 1e3);
+    this.ensurePageSize = (size2) => {
+      var _a;
+      if (!isNumber(size2))
+        return;
+      if (!this.appProxy.scenePath)
+        return;
+      if (this.appProxy.pageState.length >= size2)
+        return;
+      if (size2 <= 0 || size2 >= MAX_PAGE_SIZE) {
+        throw Error(`[WindowManager]: size ${size2} muse be in range [1, ${MAX_PAGE_SIZE}]`);
       }
+      const needInsert = size2 - this.appProxy.pageState.length;
+      const scenes = new Array(needInsert).fill({});
+      (_a = this.room) == null ? void 0 : _a.putScenes(this.appProxy.scenePath, scenes);
     };
     this.getInitScenePath = () => {
       return this.manager.getAppInitPath(this.appId);
     };
-    this.getIsWritable = () => {
-      return this.manager.canOperate;
-    };
-    this.getBox = () => {
-      const box = this.boxManager.getBox(this.appId);
-      if (box) {
-        return box;
-      } else {
-        throw new BoxNotCreatedError();
-      }
-    };
-    this.getRoom = () => {
-      return this.manager.room;
-    };
     this.setAttributes = (attributes) => {
       this.manager.safeSetAttributes({ [this.appId]: attributes });
     };
@@ -967,7 +1083,7 @@ class AppContext {
       if (!this.appProxy.box)
         return;
       this.appProxy.setFullPath(scenePath);
-      (_a = this.getRoom()) == null ? void 0 : _a.setScenePath(scenePath);
+      (_a = this.room) == null ? void 0 : _a.setScenePath(scenePath);
     };
     this.getAppOptions = () => {
       return typeof this.appOptions === "function" ? this.appOptions() : this.appOptions;
@@ -990,92 +1106,96 @@ class AppContext {
       return () => this.manager.displayer.removeMagixEventListener(appScopeEvent, handler);
     };
     this.removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(this.manager.displayer);
-    this.nextPage = async () => {
-      const nextIndex = this.pageState.index + 1;
-      if (nextIndex > this.pageState.length - 1) {
-        console.warn("[WindowManager] nextPage: index out of range");
-        return false;
-      }
-      this.appProxy.setSceneIndex(nextIndex);
-      return true;
-    };
-    this.prevPage = async () => {
-      const nextIndex = this.pageState.index - 1;
-      if (nextIndex < 0) {
-        console.warn("[WindowManager] prevPage: index out of range");
-        return false;
-      }
-      this.appProxy.setSceneIndex(nextIndex);
-      return true;
-    };
-    this.addPage = async (params) => {
-      const after = params == null ? void 0 : params.after;
-      const scene = params == null ? void 0 : params.scene;
-      const scenePath = this.appProxy.scenePath;
-      if (!scenePath)
-        return;
-      if (after) {
-        const nextIndex = this.pageState.index + 1;
-        putScenes(this.manager.room, scenePath, [scene || {}], nextIndex);
-      } else {
-        putScenes(this.manager.room, scenePath, [scene || {}]);
-      }
-    };
-    this.removePage = async (index2) => {
-      const needRemoveIndex = index2 === void 0 ? this.pageState.index : index2;
-      if (this.pageState.length === 1) {
-        console.warn(`[WindowManager]: can not remove the last page`);
-        return false;
-      }
-      if (needRemoveIndex < 0 || needRemoveIndex >= this.pageState.length) {
-        console.warn(`[WindowManager]: page index ${index2} out of range`);
-        return false;
-      }
-      return this.appProxy.removeSceneByIndex(needRemoveIndex);
-    };
     this.emitter = appProxy.appEmitter;
     this.isAddApp = appProxy.isAddApp;
   }
+  get displayer() {
+    return this.manager.displayer;
+  }
+  get destroyed() {
+    return this.appProxy.status === "destroyed";
+  }
+  get view() {
+    return this.appProxy.view;
+  }
+  get isWritable() {
+    return this.manager.canOperate && !this.destroyed;
+  }
+  get box() {
+    const box = this.boxManager.getBox(this.appId);
+    if (box) {
+      return box;
+    } else {
+      throw new BoxNotCreatedError();
+    }
+  }
+  get room() {
+    return this.manager.room;
+  }
+  get members() {
+    return this.manager.members;
+  }
+  get memberState() {
+    const self2 = findMemberByUid(this.room, this.manager.uid);
+    if (!self2) {
+      throw new Error(`Member ${this.manager.uid} not found.`);
+    }
+    return __spreadValues({
+      uid: this.manager.uid
+    }, self2);
+  }
   get storage() {
     if (!this._storage) {
       this._storage = new Storage(this);
     }
     return this._storage;
   }
-  get pageState() {
-    return this.appProxy.pageState;
-  }
 }
 class AppPageStateImpl {
   constructor(params) {
     this.params = params;
     this.sceneNode = null;
-    this.onSceneChange = (node) => {
-      this.sceneNode = node;
+    this.createSceneNode = (scenePath2) => {
+      this.scenePath = scenePath2;
+      if (this.sceneNode) {
+        this.sceneNode.dispose();
+      }
+      this.sceneNode = this.params.displayer.createScenesCallback(scenePath2, {
+        onAddScene: this.onSceneChange,
+        onRemoveScene: this.onSceneChange
+      });
+      return this.sceneNode;
+    };
+    this.onSceneChange = () => {
       this.params.notifyPageStateChange();
     };
     const { displayer, scenePath } = this.params;
+    this.view = this.params.view;
     if (scenePath) {
+      this.scenePath = scenePath;
       this.sceneNode = displayer.createScenesCallback(scenePath, {
         onAddScene: this.onSceneChange,
         onRemoveScene: this.onSceneChange
       });
     }
   }
+  setView(view) {
+    this.view = view;
+  }
   getFullPath(index2) {
     var _a;
     const scenes = (_a = this.sceneNode) == null ? void 0 : _a.scenes;
-    if (this.params.scenePath && scenes) {
+    if (this.scenePath && scenes) {
       const name = scenes[index2];
       if (name) {
-        return `${this.params.scenePath}/${name}`;
+        return `${this.scenePath}/${name}`;
       }
     }
   }
   toObject() {
     var _a, _b;
     return {
-      index: ((_a = this.params.view) == null ? void 0 : _a.focusSceneIndex) || 0,
+      index: ((_a = this.view) == null ? void 0 : _a.focusSceneIndex) || 0,
       length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0
     };
   }
@@ -1084,6 +1204,135 @@ class AppPageStateImpl {
     (_a = this.sceneNode) == null ? void 0 : _a.dispose();
   }
 }
+class CameraSynchronizer {
+  constructor(saveCamera) {
+    this.saveCamera = saveCamera;
+    this.setRect = debounce((rect) => {
+      this.rect = rect;
+      if (this.remoteCamera && this.remoteSize) {
+        this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+      }
+    }, 50);
+    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;
+          (_a = this.view) == null ? void 0 : _a.moveCamera({
+            centerX: camera.centerX,
+            centerY: camera.centerY,
+            scale: nextScale,
+            animationMode: AnimationMode.Immediately
+          });
+        };
+        delay(moveCamera, 50);
+      }
+    }, 50);
+  }
+  setView(view) {
+    this.view = view;
+  }
+  onRemoteSizeUpdate(size2) {
+    if (this.rect) {
+      const nextScale = this.rect.width / size2.width;
+      const moveCamera = () => {
+        var _a;
+        (_a = this.view) == null ? void 0 : _a.moveCamera({
+          scale: nextScale,
+          animationMode: AnimationMode.Immediately
+        });
+      };
+      delay(moveCamera, 50);
+    }
+  }
+  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);
+      }
+    }));
+    this.sem.add(() => this.appProxy.size$.subscribe((size2) => {
+      if (size2) {
+        this.synchronizer.onRemoteSizeUpdate(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);
+        }
+      }));
+    }
+    this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size2]) => {
+      if (camera && size2) {
+        this.synchronizer.onRemoteUpdate(camera, size2);
+      }
+    }));
+  }
+  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";
@@ -1097,6 +1346,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 {
@@ -1161,6 +1412,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 });
@@ -1257,21 +1511,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;
@@ -1281,7 +1520,52 @@ 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.valManager = new ValManager();
+    this.fullPath$ = this.valManager.attach(new Val(void 0));
+    this.camera$ = this.valManager.attach(new Val(void 0));
+    this.size$ = this.valManager.attach(new Val(void 0));
+    this.box$ = this.valManager.attach(new Val(void 0));
+    this.view$ = this.valManager.attach(new Val(void 0));
+    this.fireMemberStateChange = () => {
+      if (this.manager.room) {
+        this.onMemberStateChange(this.manager.room.state.memberState);
+      }
+    };
+    this.onMemberStateChange = (memberState) => {
+      var _a2, _b;
+      const needPointerEventsNone = memberState.currentApplianceName === "clicker";
+      if (needPointerEventsNone) {
+        if ((_a2 = this.appContext) == null ? void 0 : _a2._viewWrapper) {
+          this.appContext._viewWrapper.style.pointerEvents = "none";
+        }
+      } else {
+        if ((_b = this.appContext) == null ? void 0 : _b._viewWrapper) {
+          this.appContext._viewWrapper.style.pointerEvents = "auto";
+        }
+      }
+    };
+    this.computedInitialRect = (boxRect) => {
+      var _a2;
+      const managerRect = (_a2 = this.manager.boxManager) == null ? void 0 : _a2.stageRect;
+      if (managerRect) {
+        const { width, height } = managerRect;
+        const boxRatio = boxRect.height / boxRect.width;
+        if (height < 480) {
+          return {
+            width: 480 / boxRatio,
+            height: 480
+          };
+        } else {
+          return {
+            width: width * 0.65,
+            height: height * 0.65
+          };
+        }
+      }
+    };
     this.getAppInitState = (id2) => {
       var _a2, _b;
       const attrs = this.store.getAppState(id2);
@@ -1310,8 +1594,7 @@ class AppProxy {
       return payload;
     };
     this.appAttributesUpdateListener = (appId2) => {
-      var _a2, _b, _c;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(appId2, () => {
+      this.manager.refresher.add(appId2, () => {
         return autorun(() => {
           const attrs = this.manager.attributes[appId2];
           if (attrs) {
@@ -1319,23 +1602,23 @@ class AppProxy {
           }
         });
       });
-      (_b = this.manager.refresher) == null ? void 0 : _b.add(this.stateKey, () => {
+      this.manager.refresher.add(this.stateKey, () => {
         return autorun(() => {
-          var _a3, _b2, _c2;
-          const appState = (_a3 = this.appAttributes) == null ? void 0 : _a3.state;
-          if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b2 = this.box) == null ? void 0 : _b2.zIndex)) {
-            (_c2 = this.boxManager) == null ? void 0 : _c2.setZIndex(appId2, appState.zIndex);
+          var _a2, _b, _c;
+          const appState = (_a2 = this.appAttributes) == null ? void 0 : _a2.state;
+          if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b = this.box) == null ? void 0 : _b.zIndex)) {
+            (_c = this.boxManager) == null ? void 0 : _c.setZIndex(appId2, appState.zIndex);
           }
         });
       });
-      (_c = this.manager.refresher) == null ? void 0 : _c.add(`${appId2}-fullPath`, () => {
+      this.manager.refresher.add(`${appId2}-fullPath`, () => {
         return autorun(() => {
-          var _a3;
-          const fullPath = (_a3 = this.appAttributes) == null ? void 0 : _a3.fullPath;
+          var _a2;
+          const fullPath = (_a2 = this.appAttributes) == null ? void 0 : _a2.fullPath;
           this.setFocusScenePathHandler(fullPath);
-          if (this._prevFullPath !== fullPath) {
+          if (this.fullPath$.value !== fullPath) {
             this.notifyPageStateChange();
-            this._prevFullPath = fullPath;
+            this.fullPath$.setValue(fullPath);
           }
         });
       });
@@ -1347,10 +1630,61 @@ class AppProxy {
       }
     }, 50);
     this.notifyPageStateChange = debounce(() => {
-      this.appEmitter.emit("pageStateChange", this.pageState);
+      if (this.pageState) {
+        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.updateSize = (width, height) => {
+      const iSize = {
+        id: this.manager.uid,
+        width,
+        height
+      };
+      this.store.updateAppAttributes(this.id, Fields.Size, iSize);
+      this.size$.setValue(iSize);
+    };
+    this.moveCamera = (camera) => {
+      if (!this.camera$.value) {
+        return;
+      }
+      const nextCamera = __spreadValues(__spreadValues({}, this.camera$.value), camera);
+      this.storeCamera(nextCamera);
+    };
+    this.addCameraReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-camera`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
+      }, (camera) => {
+        if (camera && camera.id !== this.uid) {
+          const rawCamera = toJS(camera);
+          if (rawCamera !== this.camera$.value) {
+            this.camera$.setValue(rawCamera);
+          }
+        }
+      })), "camera");
+    };
+    this.addSizeReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-size`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
+      }, (size2) => {
+        if (size2 && size2.id !== this.uid) {
+          const rawSize = toJS(size2);
+          if (this.size$.value !== rawSize) {
+            this.size$.setValue(rawSize);
+          }
+        }
+      })), "size");
+    };
     this.kind = params.kind;
     this.id = appId;
+    this.appScenePath = `/${this.id}-app-dir`;
     this.stateKey = `${this.id}_state`;
     this.appProxies.set(this.id, this);
     this.appEmitter = new Emittery();
@@ -1360,12 +1694,66 @@ class AppProxy {
     if ((_a = this.params.options) == null ? void 0 : _a.scenePath) {
       this.createView();
     }
+    if (!this.scenePath) {
+      this.scenePath = this.appScenePath;
+    }
     this._pageState = new AppPageStateImpl({
       displayer: this.manager.displayer,
       scenePath: this.scenePath,
       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.addCameraReaction();
+    this.addSizeReaction();
+    this.sideEffectManager.add(() => combine([this.box$, this.view$]).subscribe(([box, view]) => {
+      if (box && view) {
+        if (!this.camera$.value) {
+          this.storeCamera({
+            centerX: 0,
+            centerY: 0,
+            scale: 1,
+            id: this.uid
+          });
+          this.camera$.setValue(toJS(this.appAttributes.camera));
+        }
+        if (!this.size$.value && box.contentStageRect) {
+          const initialRect = this.computedInitialRect(box.contentStageRect);
+          const width = (initialRect == null ? void 0 : initialRect.width) || box.contentStageRect.width;
+          const height = (initialRect == null ? void 0 : initialRect.height) || box.contentStageRect.height;
+          this.storeSize({
+            id: this.uid,
+            width,
+            height
+          });
+          this.size$.setValue(toJS(this.appAttributes.size));
+        }
+        this.appViewSync = new AppViewSync(this);
+        this.sideEffectManager.add(() => () => {
+          var _a2;
+          return (_a2 = this.appViewSync) == null ? void 0 : _a2.destroy();
+        });
+      }
+    }));
+    this.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
+  }
+  createAppDir() {
+    const scenePath = this.scenePath || this.appScenePath;
+    const sceneNode = this._pageState.createSceneNode(scenePath);
+    if (!sceneNode) {
+      putScenes(this.manager.room, scenePath, [{ name: "1" }]);
+      this._pageState.createSceneNode(scenePath);
+      this.setSceneIndex(0);
+    }
+    this.scenes = entireScenes(this.manager.displayer)[scenePath];
+    const view = this.createView();
+    this._pageState.setView(view);
+    return view;
   }
   initScenes() {
     var _a;
@@ -1380,7 +1768,7 @@ class AppProxy {
     }
   }
   get view() {
-    return this.manager.viewManager.getView(this.id);
+    return this.view$.value;
   }
   get viewIndex() {
     var _a;
@@ -1410,7 +1798,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;
@@ -1432,8 +1820,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;
@@ -1461,13 +1848,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);
@@ -1594,8 +1982,9 @@ class AppProxy {
     }
     return fullPath;
   }
-  async createView() {
-    const view = await this.viewManager.createView(this.id);
+  createView() {
+    const view = this.viewManager.createView(this.id);
+    this.view$.setValue(view);
     this.setViewFocusScenePath();
     return view;
   }
@@ -1604,7 +1993,7 @@ class AppProxy {
   }
   async removeSceneByIndex(index2) {
     const scenePath = this._pageState.getFullPath(index2);
-    if (scenePath) {
+    if (scenePath && this.pageState) {
       const nextIndex = calculateNextIndex(index2, this.pageState);
       this.setSceneIndexWithoutSync(nextIndex);
       this.manager.dispatchInternalEvent(Events.SetAppFocusIndex, {
@@ -1635,7 +2024,7 @@ class AppProxy {
     }
   }
   async destroy(needCloseBox, cleanAttrs, skipUpdate, error) {
-    var _a, _b, _c, _d;
+    var _a;
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
@@ -1646,6 +2035,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);
@@ -1657,13 +2047,12 @@ class AppProxy {
       }
     }
     this.appProxies.delete(this.id);
-    this._pageState.destroy();
     this.viewManager.destroyView(this.id);
     this.manager.appStatus.delete(this.id);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(this.id);
-    (_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.manager.refresher.remove(this.id);
+    this.manager.refresher.remove(this.stateKey);
+    this.manager.refresher.remove(`${this.id}-fullPath`);
+    this.valManager.destroy();
   }
   close() {
     return this.destroy(true, true, false);
@@ -1719,56 +2108,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;
@@ -1778,17 +2117,14 @@ class MainViewProxy {
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
     this.startListenWritableChange = () => {
-      this.sideEffectManager.add(() => {
-        return emitter.on("writableChange", (isWritable) => {
-          if (isWritable) {
-            this.ensureCameraAndSize();
-          }
-        });
-      });
+      this.sideEffectManager.add(() => emitter.on("writableChange", (isWritable) => {
+        if (isWritable) {
+          this.ensureCameraAndSize();
+        }
+      }));
     };
     this.addCameraReaction = () => {
-      var _a2;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(Fields.MainViewCamera, this.cameraReaction);
+      this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
@@ -1797,14 +2133,8 @@ class MainViewProxy {
         }
       }, { fireImmediately: true });
     };
-    this.sizeChangeHandler = debounce((size2) => {
-      if (size2) {
-        this.synchronizer.onLocalSizeUpdate(size2);
-      }
-    }, 30);
     this.onUpdateContainerSizeRatio = () => {
       const size2 = this.store.getMainViewSize();
-      this.sizeChangeHandler(size2);
       if (size2.id === this.manager.uid) {
         this.setCameraAndSize();
       }
@@ -1834,26 +2164,19 @@ class MainViewProxy {
       this.ensureCameraAndSize();
       this.startListenWritableChange();
     });
-    this.sideEffectManager.add(() => {
-      return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-    });
-    this.sideEffectManager.add(() => {
-      return emitter.on("startReconnect", () => {
-        if (!this.mainView.didRelease) {
-          this.mainView.release();
-        }
-      });
-    });
-    const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    this.sideEffectManager.add(() => [
+      emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio),
+      emitter.on("startReconnect", () => {
+        releaseView(this.mainView);
+      }),
+      emitter.on("playgroundSizeChange", (rect2) => {
+        this.synchronizer.setRect(rect2);
+      })
+    ]);
+    const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     if (rect) {
       this.synchronizer.setRect(rect);
     }
-    this.sideEffectManager.add(() => {
-      return emitter.on("playgroundSizeChange", (rect2) => {
-        this.synchronizer.setRect(rect2);
-        this.synchronizer.onLocalSizeUpdate(rect2);
-      });
-    });
   }
   ensureCameraAndSize() {
     if (!this.mainViewCamera || !this.mainViewSize) {
@@ -1876,7 +2199,6 @@ class MainViewProxy {
   start() {
     if (this.started)
       return;
-    this.sizeChangeHandler(this.mainViewSize);
     this.addCameraListener();
     this.addCameraReaction();
     this.started = true;
@@ -1921,9 +2243,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;
@@ -1933,7 +2253,7 @@ class MainViewProxy {
   }
   getStageSize() {
     var _a;
-    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     if (stage) {
       return { width: stage.width, height: stage.height };
     }
@@ -1972,10 +2292,9 @@ class MainViewProxy {
     this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   stop() {
-    var _a, _b;
     this.removeCameraListener();
-    (_a = this.manager.refresher) == null ? void 0 : _a.remove(Fields.MainViewCamera);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(Fields.MainViewSize);
+    this.manager.refresher.remove(Fields.MainViewCamera);
+    this.manager.refresher.remove(Fields.MainViewSize);
     this.started = false;
   }
   destroy() {
@@ -2053,6 +2372,8 @@ class AppManager {
     this.mainViewScenesLength = 0;
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
+    this.sceneIndex$ = new Val(void 0);
+    this.focused$ = new Val(void 0);
     this.sideEffectManager = new SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
@@ -2220,21 +2541,21 @@ class AppManager {
       });
     };
     this.onMainViewIndexChange = (index2) => {
-      if (index2 !== void 0 && this._prevSceneIndex !== index2) {
+      if (index2 !== void 0 && this.sceneIndex$.value !== index2) {
         callbacks$1.emit("mainViewSceneIndexChange", index2);
         emitter.emit("changePageState");
         if (this.callbacksNode) {
           this.updateSceneState(this.callbacksNode);
         }
-        this._prevSceneIndex = index2;
+        this.sceneIndex$.setValue(index2);
       }
     };
     this.onFocusChange = (focused) => {
       var _a;
-      if (this._prevFocused !== focused) {
+      if (this.focused$.value !== focused) {
         callbacks$1.emit("focusedChange", focused);
-        emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-        this._prevFocused = focused;
+        emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+        this.focused$.setValue(focused);
         if (focused !== void 0) {
           (_a = this.boxManager) == null ? void 0 : _a.focusBox({ appId: focused });
           setTimeout(() => {
@@ -2299,7 +2620,13 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.appEmitter.emit("roomStateChange", state);
       });
+      if (state.roomMembers) {
+        emitter.emit("roomMembersChange", this.members);
+      }
       emitter.emit("observerIdChange", this.displayer.observerId);
+      if (state.memberState) {
+        emitter.emit("memberStateChange", toJS(state.memberState));
+      }
     };
     this.displayerWritableListener = (isReadonly) => {
       var _a, _b;
@@ -2314,12 +2641,9 @@ class AppManager {
         appProxy.emitAppIsWritableChange();
       });
       if (isWritable === true) {
-        this.mainView.disableCameraTransform = false;
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
-      } else {
-        this.mainView.disableCameraTransform = true;
       }
       emitter.emit("writableChange", isWritable);
     };
@@ -2412,6 +2736,9 @@ class AppManager {
     var _a;
     return ((_a = this.room) == null ? void 0 : _a.uid) || "";
   }
+  get members() {
+    return serializeRoomMembers(this.displayer.state.roomMembers);
+  }
   getMainViewSceneDir() {
     const scenePath = this.store.getMainViewScenePath();
     if (scenePath) {
@@ -2421,7 +2748,7 @@ class AppManager {
     }
   }
   async onCreated() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
     await this.attributesUpdateCallback(this.attributes.apps);
     emitter.emit("updateManagerRect");
     boxEmitter.on("move", this.onBoxMove);
@@ -2431,32 +2758,32 @@ class AppManager {
     boxEmitter.on("boxStateChange", this.onBoxStateChange);
     this.addAppsChangeListener();
     this.addAppCloseListener();
-    (_a = this.refresher) == null ? void 0 : _a.add("maximized", () => {
+    this.refresher.add("maximized", () => {
       return autorun(() => {
         var _a2;
         const maximized = this.attributes.maximized;
         (_a2 = this.boxManager) == null ? void 0 : _a2.setMaximized(Boolean(maximized));
       });
     });
-    (_b = this.refresher) == null ? void 0 : _b.add("minimized", () => {
+    this.refresher.add("minimized", () => {
       return autorun(() => {
         const minimized = this.attributes.minimized;
         this.onMinimized(minimized);
       });
     });
-    (_c = this.refresher) == null ? void 0 : _c.add("mainViewIndex", () => {
+    this.refresher.add("mainViewIndex", () => {
       return autorun(() => {
         const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
         this.onMainViewIndexChange(mainSceneIndex);
       });
     });
-    (_d = this.refresher) == null ? void 0 : _d.add("focusedChange", () => {
+    this.refresher.add("focusedChange", () => {
       return autorun(() => {
         const focused = get(this.attributes, "focus");
         this.onFocusChange(focused);
       });
     });
-    (_e = this.refresher) == null ? void 0 : _e.add("registeredChange", () => {
+    this.refresher.add("registeredChange", () => {
       return autorun(() => {
         const registered = get(this.attributes, Fields.Registered);
         this.onRegisteredChange(registered);
@@ -2468,9 +2795,9 @@ class AppManager {
         return;
       this.resetScenePath(mainScenePath);
     }
-    this.displayerWritableListener(!((_f = this.room) == null ? void 0 : _f.isWritable));
+    this.displayerWritableListener(!((_a = this.room) == null ? void 0 : _a.isWritable));
     this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-    this._prevFocused = this.attributes.focus;
+    this.focused$.setValue(this.attributes.focus);
     this.sideEffectManager.add(() => {
       const redoUndo = new RedoUndo({
         mainView: () => this.mainViewProxy.view,
@@ -2719,32 +3046,10 @@ class AppManager {
     }
     callbacks$1.clearListeners();
     this.sideEffectManager.flushAll();
-    this._prevFocused = void 0;
-    this._prevSceneIndex = void 0;
+    this.sceneIndex$.destroy();
+    this.focused$.destroy();
   }
 }
-const setupWrapper = (root) => {
-  const playground = document.createElement("div");
-  playground.className = "netless-window-manager-playground";
-  const mainViewElement = document.createElement("div");
-  mainViewElement.className = "netless-window-manager-main-view";
-  playground.appendChild(mainViewElement);
-  root.appendChild(playground);
-  return { playground, mainViewElement };
-};
-const checkVersion = () => {
-  const version = getVersionNumber(WhiteVersion);
-  if (version < getVersionNumber(REQUIRE_VERSION)) {
-    throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
-  }
-};
-const findMemberByUid = (room, uid) => {
-  const roomMembers = room == null ? void 0 : room.state.roomMembers;
-  return roomMembers == null ? void 0 : roomMembers.find((member) => {
-    var _a;
-    return ((_a = member.payload) == null ? void 0 : _a.uid) === uid;
-  });
-};
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -3587,289 +3892,16 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a2, b2) => {
-  for (var prop in b2 || (b2 = {}))
-    if (__hasOwnProp$1.call(b2, prop))
-      __defNormalProp$1(a2, prop, b2[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b2)) {
-      if (__propIsEnum$1.call(b2, prop))
-        __defNormalProp$1(a2, prop, b2[prop]);
-    }
-  return a2;
-};
-var __spreadProps$1 = (a2, b2) => __defProps$1(a2, __getOwnPropDescs$1(b2));
-var __publicField = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Subscribers {
-  constructor(beforeSubscribe) {
-    __publicField(this, "_subscribers");
-    __publicField(this, "_bSub");
-    __publicField(this, "_bSubDisposer");
-    this._bSub = beforeSubscribe;
-  }
-  get size() {
-    return this._subscribers ? this._subscribers.size : 0;
-  }
-  invoke(newValue, meta) {
-    if (this._subscribers) {
-      this._subscribers.forEach((subscriber) => subscriber(newValue, meta));
-    }
-  }
-  add(subscribe) {
-    if (this._bSub && (!this._subscribers || this._subscribers.size <= 0)) {
-      this._bSubDisposer = this._bSub();
-    }
-    if (!this._subscribers) {
-      this._subscribers = /* @__PURE__ */ new Set();
-    }
-    this._subscribers.add(subscribe);
-  }
-  remove(subscriber) {
-    if (this._subscribers) {
-      this._subscribers.delete(subscriber);
-    }
-    if (this._subscribers && this._subscribers.size <= 0) {
-      if (this._bSubDisposer) {
-        const _bSubDisposer = this._bSubDisposer;
-        this._bSubDisposer = null;
-        _bSubDisposer();
-      }
-    }
-  }
-  clear() {
-    if (this._subscribers) {
-      this._subscribers.clear();
-    }
-    if (this._bSubDisposer) {
-      const _bSubDisposer = this._bSubDisposer;
-      this._bSubDisposer = null;
-      _bSubDisposer();
-    }
-  }
-  destroy() {
-    this.clear();
-  }
-}
-class ReadonlyVal {
-  constructor(value, config) {
-    __publicField(this, "_subscribers");
-    __publicField(this, "_value");
-    this._value = value;
-    let beforeSubscribe;
-    if (config) {
-      if (config.compare) {
-        this.compare = config.compare;
-      }
-      if (config.beforeSubscribe) {
-        const _beforeSubscribe = config.beforeSubscribe;
-        const _setValue = this._setValue.bind(this);
-        beforeSubscribe = () => _beforeSubscribe(_setValue);
-      }
-    }
-    this._subscribers = new Subscribers(beforeSubscribe);
-  }
-  _setValue(value, meta) {
-    if (!this.compare(value, this._value)) {
-      this._value = value;
-      this._subscribers.invoke(value, meta);
-    }
-  }
-  get value() {
-    return this._value;
-  }
-  reaction(subscriber) {
-    this._subscribers.add(subscriber);
-    return () => {
-      this._subscribers.remove(subscriber);
-    };
-  }
-  subscribe(subscriber, meta) {
-    const disposer = this.reaction(subscriber);
-    subscriber(this._value, meta);
-    return disposer;
-  }
-  destroy() {
-    this._subscribers.destroy();
-  }
-  unsubscribe(subscriber) {
-    this._subscribers.remove(subscriber);
-  }
-  compare(newValue, oldValue) {
-    return newValue === oldValue;
-  }
-}
-class Val extends ReadonlyVal {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "setValue", this._setValue);
-  }
-}
-class DerivedVal extends ReadonlyVal {
-  constructor(val, transform, config = {}) {
-    super(transform(val.value), __spreadProps$1(__spreadValues$1({}, config), {
-      beforeSubscribe: (setValue) => {
-        const disposer = val.subscribe((newValue, meta) => setValue(transform(newValue), meta));
-        if (config.beforeSubscribe) {
-          const beforeSubscribeDisposer = config.beforeSubscribe(setValue);
-          if (beforeSubscribeDisposer) {
-            return () => {
-              disposer();
-              beforeSubscribeDisposer();
-            };
-          }
-        }
-        return disposer;
-      }
-    }));
-    __publicField(this, "_srcValue");
-    this._srcValue = () => transform(val.value);
-  }
-  get value() {
-    if (this._subscribers.size <= 0) {
-      const value = this._srcValue();
-      return this.compare(value, this._value) ? this._value : value;
-    }
-    return this._value;
-  }
-}
-function derive(val, transform = (value) => value, config = {}) {
-  return new DerivedVal(val, transform, config);
-}
-class CombinedVal extends ReadonlyVal {
-  constructor(valInputs, transform, config = {}) {
-    super(transform(getValues(valInputs)), __spreadProps$1(__spreadValues$1({}, config), {
-      beforeSubscribe: (setValue) => {
-        let lastValueInputs = getValues(valInputs);
-        setValue(transform(lastValueInputs));
-        const disposers = valInputs.map((val, i2) => val.reaction((value, meta) => {
-          lastValueInputs = lastValueInputs.slice();
-          lastValueInputs[i2] = value;
-          setValue(transform(lastValueInputs), meta);
-        }));
-        const disposer = () => disposers.forEach((disposer2) => disposer2());
-        if (config.beforeSubscribe) {
-          const beforeSubscribeDisposer = config.beforeSubscribe(setValue);
-          if (beforeSubscribeDisposer) {
-            return () => {
-              disposer();
-              beforeSubscribeDisposer();
-            };
-          }
-        }
-        return disposer;
-      }
-    }));
-    __publicField(this, "_srcValue");
-    this._srcValue = () => transform(getValues(valInputs));
-  }
-  get value() {
-    if (this._subscribers.size <= 0) {
-      const value = this._srcValue();
-      return this.compare(value, this._value) ? this._value : value;
-    }
-    return this._value;
-  }
-}
-function getValues(valInputs) {
-  return valInputs.map(getValue);
-}
-function getValue(val) {
-  return val.value;
-}
-function combine(valInputs, transform = (value) => value, config = {}) {
-  return new CombinedVal(valInputs, transform, config);
-}
-function withReadonlyValueEnhancer(instance2, config, valManager) {
-  Object.keys(config).forEach((key) => {
-    bindInstance$1(instance2, key, config[key]);
-    if (valManager) {
-      valManager.attach(config[key]);
-    }
-  });
-}
-function bindInstance$1(instance2, key, val) {
-  Object.defineProperties(instance2, {
-    [key]: {
-      get() {
-        return val.value;
-      }
-    },
-    [`_${key}$`]: {
-      value: val
-    }
-  });
-  return instance2;
-}
-function withValueEnhancer(instance2, config, valManager) {
-  Object.keys(config).forEach((key) => {
-    bindInstance(instance2, key, config[key]);
-    if (valManager) {
-      valManager.attach(config[key]);
-    }
-  });
-}
-function bindInstance(instance2, key, val) {
-  Object.defineProperties(instance2, {
-    [key]: {
-      get() {
-        return val.value;
-      },
-      set(value) {
-        val.setValue(value);
-      }
-    },
-    [`_${key}$`]: {
-      value: val
-    },
-    [`set${capitalize(key)}`]: {
-      value: (value, meta) => val.setValue(value, meta)
-    }
-  });
-  return instance2;
-}
-function capitalize(str) {
-  return str[0].toUpperCase() + str.slice(1);
-}
-class ValManager {
-  constructor() {
-    __publicField(this, "vals", /* @__PURE__ */ new Set());
-  }
-  attach(val) {
-    this.vals.add(val);
-    return val;
-  }
-  detach(val) {
-    this.vals.delete(val);
-    return val;
-  }
-  destroy() {
-    this.vals.forEach(destroyVal);
-    this.vals.clear();
-  }
-}
-function destroyVal(val) {
-  val.destroy();
-}
-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);
 }
@@ -3890,7 +3922,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)
@@ -3901,7 +3933,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)
@@ -3910,8 +3942,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) {
@@ -3987,13 +4019,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`));
@@ -4008,40 +4040,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), pe2 = new Val(null), xe2 = new Val(P2.value, { compare: shallowequal }), fe2 = new Val(_2), $e2 = new A$2({ namespace: i2, root$: pe2, rootRect$: xe2, 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: xe2, 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(), pe2.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();
     })]);
   }
@@ -4074,22 +4106,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);
@@ -4097,6 +4129,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);
   }
@@ -4139,47 +4177,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();
-        this._contentRect$.setValue({ x: e4.x, y: e4.y, width: e4.width, height: e4.height });
+        const e4 = r2.getBoundingClientRect();
+        this._contentRect$.setValue({ x: 0, y: 0, 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);
       });
-    }), r2.appendChild(n2);
+    }), 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();
+      });
+    }), 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");
@@ -4188,7 +4241,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;
@@ -4196,36 +4249,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: p2 } = this.pxIntrinsicSize;
       switch (a2) {
         case N$3.North:
-          u3 = r2 + c2, g2 = h - c2;
+          u3 = o2 + c2, p2 = h - c2;
           break;
         case N$3.South:
-          g2 = h + c2;
+          p2 = 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, p2 = h - c2;
           break;
         case N$3.NorthEast:
-          u3 = r2 + c2, x2 = n2 + s3, g2 = h - c2;
+          u3 = o2 + c2, g2 = r2 + s3, p2 = h - c2;
           break;
         case N$3.SouthEast:
-          x2 = n2 + s3, g2 = h + c2;
+          g2 = r2 + s3, p2 = h + c2;
           break;
         case N$3.SouthWest:
-          m3 = o2 + s3, x2 = n2 - s3, g2 = h + c2;
+          m3 = n2 + s3, g2 = r2 - s3, p2 = 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, p2);
     }, m2 = (e3) => {
       a2 = void 0, s2 && (k$1(e3), this.$box.classList.toggle(i2, false), this._sideEffect.flush(t2), s2.remove());
     }, u2 = (e3) => {
@@ -4236,9 +4289,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);
@@ -4256,14 +4309,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) => {
@@ -4277,12 +4330,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");
     }));
@@ -4308,8 +4361,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;
@@ -4349,11 +4402,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)
@@ -4361,7 +4414,7 @@ class F$3 {
           };
         const t3 = new Z$3(() => {
           const t4 = e3.getBoundingClientRect();
-          I2.setValue({ x: t4.x, y: t4.y, width: t4.width, height: t4.height });
+          I2.setValue({ x: 0, y: 0, width: t4.width, height: t4.height });
         });
         return t3.observe(e3), () => t3.disconnect();
       }, "calc-root-rect");
@@ -4383,13 +4436,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)
@@ -4409,10 +4462,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:
@@ -4420,7 +4473,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);
@@ -4448,13 +4501,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);
@@ -4539,27 +4592,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 };
   }
@@ -4576,7 +4629,6 @@ class F$3 {
 const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) => {
   return new BoxManager({
     safeSetAttributes: (attributes) => manager.safeSetAttributes(attributes),
-    getMainView: () => manager.mainView,
     updateAppState: (...args) => {
       var _a;
       return (_a = manager.appManager) == null ? void 0 : _a.store.updateAppState(...args);
@@ -4677,9 +4729,6 @@ class BoxManager {
       })
     ]);
   }
-  get mainView() {
-    return this.context.getMainView();
-  }
   get canOperate() {
     return this.context.canOperate();
   }
@@ -4701,6 +4750,9 @@ class BoxManager {
   get boxSize() {
     return this.teleBoxManager.boxes.length;
   }
+  get stageRect() {
+    return this.teleBoxManager.stageRect;
+  }
   createBox(params) {
     var _a, _b, _c;
     if (!this.teleBoxManager)
@@ -4723,16 +4775,18 @@ 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;
     const initManagerState = {
-      stageRatio: 3 / 4,
+      stageRatio: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageRatio,
       root,
       fence: false,
-      prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme
+      prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme,
+      highlightStage: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.highlightStage
     };
     const manager = new F$3(initManagerState);
     if (this.teleBoxManager) {
@@ -4847,6 +4901,9 @@ class BoxManager {
   setRoot(root) {
     this.teleBoxManager._root$.setValue(root);
   }
+  setCollector(collector) {
+    this.teleBoxManager.collector.set$collector(collector);
+  }
   destroy() {
     this.sideEffectManager.flushAll();
     this.teleBoxManager.destroy();
@@ -5844,6 +5901,7 @@ class ReconnectRefresher {
       this.reactors.set(id2, func);
       this.disposers.set(id2, func());
     }
+    return () => this.remove(id2);
   }
   remove(id2) {
     if (this.reactors.has(id2)) {
@@ -15469,14 +15527,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.0";
-    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", "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.11";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.15", "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", "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.15", "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;
@@ -15533,7 +15591,8 @@ const _WindowManager = class extends InvisiblePlugin {
       collectorContainer: params.collectorContainer,
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
-      stageRatio: params.containerSizeRatio
+      stageRatio: containerSizeRatio,
+      highlightStage: params.highlightStage
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -15618,7 +15677,7 @@ const _WindowManager = class extends InvisiblePlugin {
   }
   bindCollectorContainer(container) {
     if (_WindowManager.isCreated && this.boxManager) {
-      this.boxManager.teleBoxManager.collector.set$collector(container);
+      this.boxManager.setCollector(container);
     } else {
       if (_WindowManager.params) {
         _WindowManager.params.collectorContainer = container;
@@ -15753,6 +15812,17 @@ const _WindowManager = class extends InvisiblePlugin {
       return false;
     }
   }
+  async jumpPage(index2) {
+    if (!this.appManager) {
+      return false;
+    }
+    if (index2 < 0 || index2 >= this.pageState.length) {
+      console.warn(`[WindowManager]: index ${index2} out of range`);
+      return false;
+    }
+    await this.appManager.setMainViewSceneIndex(index2);
+    return true;
+  }
   async addPage(params) {
     if (this.appManager) {
       const after = params == null ? void 0 : params.after;