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

package/dist/index.es.js

@@ -19,11 +19,11 @@ var __spreadValues = (a2, b2) => {
 var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
-import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, isNumber, pick, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
-import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin, ViewMode } from "white-web-sdk";
+import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, isNumber, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
+import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, ViewMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
-import { Val, ValManager, combine, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
+import { Val, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
 import { ResizeObserver as ResizeObserver$2 } from "@juggle/resize-observer";
 import p$1 from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
@@ -54,6 +54,11 @@ var AppAttributes = /* @__PURE__ */ ((AppAttributes2) => {
   AppAttributes2["Position"] = "position";
   AppAttributes2["SceneIndex"] = "SceneIndex";
   AppAttributes2["ZIndex"] = "zIndex";
+  AppAttributes2["Visible"] = "visible";
+  AppAttributes2["Ratio"] = "ratio";
+  AppAttributes2["StageRatio"] = "stageRatio";
+  AppAttributes2["Draggable"] = "draggable";
+  AppAttributes2["Resizable"] = "resizable";
   return AppAttributes2;
 })(AppAttributes || {});
 var AppEvents = /* @__PURE__ */ ((AppEvents2) => {
@@ -355,6 +360,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) {
@@ -651,6 +661,16 @@ const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
 };
 const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 onObjectByEvent(UpdateEventKind.Inserted);
+const createValSync = (expr, Val2, isAddApp) => {
+  let skipUpdate = false;
+  return reaction(expr, (val) => {
+    if (isAddApp && !skipUpdate) {
+      skipUpdate = true;
+    } else {
+      Val2.setValue(val);
+    }
+  }, { fireImmediately: true });
+};
 const plainObjectKeys = Object.keys;
 function isRef(e2) {
   return Boolean(has(e2, "__isRef"));
@@ -893,9 +913,11 @@ class Storage {
   }
 }
 class WhiteBoardView {
-  constructor(appContext, appProxy) {
+  constructor(view, appContext, appProxy, ensureSize) {
+    this.view = view;
     this.appContext = appContext;
     this.appProxy = appProxy;
+    this.ensureSize = ensureSize;
     this.nextPage = async () => {
       const nextIndex = this.pageState.index + 1;
       return this.jumpPage(nextIndex);
@@ -939,13 +961,27 @@ class WhiteBoardView {
     };
     const pageState$ = new Val(appProxy.pageState);
     this.pageState$ = pageState$;
-    appProxy.appEmitter.on("pageStateChange", (pageState) => {
+    this.appProxy.sideEffectManager.add(() => appProxy.appEmitter.on("pageStateChange", (pageState) => {
       pageState$.setValue(pageState);
-    });
+    }));
+    const camera$ = new Val(pick(this.view.camera, ["centerX", "centerY"]));
+    this.camera$ = camera$;
+    this.appProxy.sideEffectManager.add(() => appProxy.camera$.subscribe((camera) => {
+      if (camera) {
+        camera$.setValue(pick(camera, ["centerX", "centerY"]));
+      }
+    }));
+    view.disableCameraTransform = true;
   }
   get pageState() {
     return this.pageState$.value;
   }
+  moveCamera(camera) {
+    this.appProxy.moveCamera(camera);
+  }
+  setRect(rect) {
+    this.appProxy.updateSize(rect.width, rect.height);
+  }
 }
 const setupWrapper = (root) => {
   const playground = document.createElement("div");
@@ -978,9 +1014,8 @@ const serializeRoomMembers = (members) => {
   });
 };
 class AppContext {
-  constructor(manager, boxManager, appId, appProxy, appOptions) {
+  constructor(manager, appId, appProxy, appOptions) {
     this.manager = manager;
-    this.boxManager = boxManager;
     this.appId = appId;
     this.appProxy = appProxy;
     this.appOptions = appOptions;
@@ -1009,6 +1044,7 @@ class AppContext {
       }
     };
     this.createWhiteBoardView = (size2) => {
+      var _a;
       if (this.whiteBoardView) {
         return this.whiteBoardView;
       }
@@ -1016,12 +1052,25 @@ class AppContext {
       if (!view) {
         view = this.appProxy.createAppDir();
       }
-      view.divElement = this.box.$content;
-      this.initPageSize(size2);
-      this.whiteBoardView = new WhiteBoardView(this, this.appProxy);
+      const viewWrapper = document.createElement("div");
+      this._viewWrapper = viewWrapper;
+      viewWrapper.className = "window-manager-view-wrapper";
+      (_a = this.box.$content.parentElement) == null ? void 0 : _a.appendChild(viewWrapper);
+      view.divElement = viewWrapper;
+      this.appProxy.fireMemberStateChange();
+      if (this.isAddApp) {
+        this.ensurePageSize(size2);
+      }
+      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
+      this.appProxy.sideEffectManager.add(() => {
+        return () => {
+          this.whiteBoardView = void 0;
+        };
+      });
       return this.whiteBoardView;
     };
-    this.initPageSize = (size2) => {
+    this.ensurePageSize = (size2) => {
+      var _a;
       if (!isNumber(size2))
         return;
       if (!this.appProxy.scenePath)
@@ -1032,14 +1081,11 @@ class AppContext {
         throw Error(`[WindowManager]: size ${size2} muse be in range [1, ${MAX_PAGE_SIZE}]`);
       }
       const needInsert = size2 - this.appProxy.pageState.length;
-      const startPageNumber = this.appProxy.pageState.length;
-      const scenes = new Array(needInsert).fill({}).map((_2, index2) => {
-        return { name: `${startPageNumber + index2 + 1}` };
-      });
-      putScenes(this.room, this.appProxy.scenePath, scenes);
+      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);
+      return this.appProxy.scenePath;
     };
     this.setAttributes = (attributes) => {
       this.manager.safeSetAttributes({ [this.appId]: attributes });
@@ -1083,14 +1129,17 @@ class AppContext {
   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;
+    return this.manager.canOperate && !this.destroyed;
   }
   get box() {
-    const box = this.boxManager.getBox(this.appId);
+    const box = this.appProxy.box$.value;
     if (box) {
       return box;
     } else {
@@ -1172,6 +1221,160 @@ 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);
+      }
+    }, 10);
+    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;
+          const config = {
+            scale: nextScale,
+            animationMode: AnimationMode.Immediately
+          };
+          if (camera.centerX !== null) {
+            config.centerX = camera.centerX;
+          }
+          if (camera.centerY !== null) {
+            config.centerY = camera.centerY;
+          }
+          (_a = this.view) == null ? void 0 : _a.moveCamera(config);
+        };
+        moveCamera();
+        delay(moveCamera, 50);
+      }
+    }, 10);
+  }
+  setView(view) {
+    this.view = view;
+  }
+  onRemoteSizeUpdate(size2) {
+    this.remoteSize = size2;
+    const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size2, ["width", "height"]));
+    if (this.rect && this.remoteCamera && needMoveCamera) {
+      const scale2 = this.rect.width / size2.width;
+      const nextScale = this.remoteCamera.scale * scale2;
+      const moveCamera = () => {
+        var _a;
+        (_a = this.view) == null ? void 0 : _a.moveCamera({
+          scale: nextScale,
+          animationMode: AnimationMode.Immediately
+        });
+      };
+      moveCamera();
+      delay(moveCamera, 50);
+    }
+  }
+  onLocalCameraUpdate(camera) {
+    this.saveCamera(camera);
+    this.remoteCamera = camera;
+  }
+}
+class ViewSync {
+  constructor(context) {
+    this.context = context;
+    this.sem = new SideEffectManager();
+    this.bindView = (view) => {
+      if (!view)
+        return;
+      this.synchronizer.setView(view);
+      this.sem.flush("view");
+      this.sem.add(() => {
+        view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        return () => view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+      }, "view");
+    };
+    this.onCameraUpdatedByDevice = (camera) => {
+      if (!camera)
+        return;
+      this.synchronizer.onLocalCameraUpdate(Object.assign(camera, { id: this.context.uid }));
+      const stage = this.context.stageRect$.value;
+      if (stage) {
+        const size2 = { width: stage.width, height: stage.height, id: this.context.uid };
+        if (!isEqual(size2, this.context.size$.value)) {
+          this.context.storeSize(size2);
+        }
+      }
+    };
+    this.synchronizer = new CameraSynchronizer((camera) => {
+      this.context.camera$.setValue(camera, true);
+      const notStoreCamera = this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
+      if (notStoreCamera) {
+        return;
+      } else {
+        this.context.storeCamera(camera);
+      }
+    });
+    this.bindView(this.context.view$.value);
+    this.sem.add(() => this.context.view$.subscribe((view) => {
+      const currentCamera = this.context.camera$.value;
+      if (currentCamera && this.context.size$.value) {
+        view == null ? void 0 : view.moveCamera({
+          scale: 1,
+          animationMode: AnimationMode.Immediately
+        });
+        this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+      }
+      this.bindView(view);
+    }));
+    this.sem.add(() => this.context.camera$.subscribe((camera, skipUpdate) => {
+      const size2 = this.context.size$.value;
+      if (camera && size2 && !skipUpdate) {
+        this.synchronizer.onRemoteUpdate(camera, size2);
+      }
+    }));
+    this.sem.add(() => this.context.size$.subscribe((size2) => {
+      if (size2) {
+        this.synchronizer.onRemoteSizeUpdate(size2);
+      }
+    }));
+    this.sem.add(() => this.context.stageRect$.reaction((rect) => {
+      if (rect) {
+        this.synchronizer.setRect(rect);
+      }
+    }));
+    const camera$size$ = combine([this.context.camera$, this.context.size$]);
+    camera$size$.reaction(([camera, size2]) => {
+      if (camera && size2) {
+        this.synchronizer.onRemoteUpdate(camera, size2);
+        camera$size$.destroy();
+      }
+    });
+  }
+  destroy() {
+    this.sem.flushAll();
+  }
+}
+const boxEmitter = new Emittery();
+const calculateNextIndex = (index2, pageState) => {
+  let nextIndex = 0;
+  const maxIndex = pageState.length - 1;
+  if (index2 === pageState.index) {
+    if (index2 === maxIndex) {
+      nextIndex = index2 - 1;
+    } else {
+      nextIndex = pageState.index + 1;
+    }
+  } else {
+    nextIndex = pageState.index;
+  }
+  return nextIndex;
+};
 var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["Apps"] = "apps";
   Fields2["Focus"] = "focus";
@@ -1185,6 +1388,8 @@ var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["CursorState"] = "cursorState";
   Fields2["FullPath"] = "fullPath";
   Fields2["Registered"] = "registered";
+  Fields2["Camera"] = "camera";
+  Fields2["Size"] = "size";
   return Fields2;
 })(Fields || {});
 class AttributesDelegate {
@@ -1249,6 +1454,9 @@ class AttributesDelegate {
       this.context.safeUpdateAttributes(["apps", appId, "state", stateName], state);
     }
   }
+  updateAppAttributes(appId, key, value) {
+    this.context.safeUpdateAttributes(["apps", appId, key], value);
+  }
   cleanAppAttributes(id2) {
     this.context.safeUpdateAttributes(["apps", id2], void 0);
     this.context.safeSetAttributes({ [id2]: void 0 });
@@ -1345,21 +1553,6 @@ const log = (...args) => {
     console.log(`[WindowManager]:`, ...args);
   }
 };
-const calculateNextIndex = (index2, pageState) => {
-  let nextIndex = 0;
-  const maxIndex = pageState.length - 1;
-  if (index2 === pageState.index) {
-    if (index2 === maxIndex) {
-      nextIndex = index2 - 1;
-    } else {
-      nextIndex = pageState.index + 1;
-    }
-  } else {
-    nextIndex = pageState.index;
-  }
-  return nextIndex;
-};
-const boxEmitter = new Emittery();
 class AppProxy {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -1369,8 +1562,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);
@@ -1399,8 +1636,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) {
@@ -1408,23 +1644,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);
           }
         });
       });
@@ -1440,6 +1676,58 @@ class AppProxy {
         this.appEmitter.emit("pageStateChange", this.pageState);
       }
     }, 50);
+    this.storeCamera = (camera) => {
+      this.store.updateAppAttributes(this.id, Fields.Camera, camera);
+    };
+    this.storeSize = (size2) => {
+      this.store.updateAppAttributes(this.id, Fields.Size, size2);
+    };
+    this.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 = __spreadProps(__spreadValues(__spreadValues({}, this.camera$.value), camera), { id: this.uid });
+      this.storeCamera(nextCamera);
+      this.camera$.setValue(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) {
+          const rawCamera = toJS(camera);
+          if (!isEqual(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) {
+          const rawSize = toJS(size2);
+          if (!isEqual(rawSize, this.size$.value)) {
+            this.size$.setValue(rawSize);
+          }
+        }
+      })), "size");
+    };
+    this.onFocus = () => {
+      this.setScenePath();
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -1461,13 +1749,93 @@ class AppProxy {
       view: this.view,
       notifyPageStateChange: this.notifyPageStateChange
     });
-    this.sideEffectManager.add(() => {
-      return () => this._pageState.destroy();
-    });
-    this.sideEffectManager.add(() => {
-      return emitter.on("roomMembersChange", (members) => {
-        this.appEmitter.emit("roomMembersChange", members);
-      });
+    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: null,
+            centerY: null,
+            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.viewSync = new ViewSync({
+          uid: this.uid,
+          view$: this.view$,
+          camera$: this.camera$,
+          size$: this.size$,
+          stageRect$: box._contentStageRect$,
+          storeCamera: this.storeCamera,
+          storeSize: this.storeSize
+        });
+        this.sideEffectManager.add(() => () => {
+          var _a2;
+          return (_a2 = this.viewSync) == null ? void 0 : _a2.destroy();
+        });
+      }
+    }));
+    this.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
+    this.box$.subscribe((box) => {
+      if (!box)
+        return;
+      this.sideEffectManager.add(() => [
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.visible;
+        }, box._visible$, this.isAddApp),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.ratio;
+        }, box._ratio$, this.isAddApp),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.stageRatio;
+        }, box._stageRatio$, this.isAddApp),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.draggable;
+        }, box._draggable$, this.isAddApp),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.resizable;
+        }, box._resizable$, this.isAddApp),
+        box._visible$.subscribe((visible) => {
+          this.store.updateAppState(this.id, AppAttributes.Visible, visible);
+        }),
+        box._ratio$.subscribe((ratio) => {
+          this.store.updateAppState(this.id, AppAttributes.Ratio, ratio);
+        }),
+        box._stageRatio$.subscribe((stageRatio) => {
+          this.store.updateAppState(this.id, AppAttributes.StageRatio, stageRatio);
+        }),
+        box._draggable$.subscribe((draggable) => {
+          this.store.updateAppState(this.id, AppAttributes.Draggable, draggable);
+        }),
+        box._resizable$.subscribe((resizable) => {
+          console.log("resizable change", resizable);
+          this.store.updateAppState(this.id, AppAttributes.Resizable, resizable);
+        })
+      ]);
     });
   }
   createAppDir() {
@@ -1496,7 +1864,7 @@ class AppProxy {
     }
   }
   get view() {
-    return this.manager.viewManager.getView(this.id);
+    return this.view$.value;
   }
   get viewIndex() {
     var _a;
@@ -1526,7 +1894,7 @@ class AppProxy {
     return fullPath;
   }
   setFullPath(path) {
-    this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
+    this.store.updateAppAttributes(this.id, Fields.FullPath, path);
   }
   async baseInsertApp(skipUpdate = false) {
     var _a;
@@ -1548,8 +1916,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;
@@ -1557,7 +1924,7 @@ class AppProxy {
     if (!this.boxManager) {
       throw new BoxManagerNotFoundError();
     }
-    const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+    const context = new AppContext(this.manager, appId, this, appOptions);
     this.appContext = context;
     try {
       emitter.once(`${appId}${Events.WindowCreated}`).then(async () => {
@@ -1577,13 +1944,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);
@@ -1597,12 +1965,14 @@ class AppProxy {
     var _a, _b;
     const box = (_a = this.boxManager) == null ? void 0 : _a.getBox(this.id);
     if (box) {
-      (_b = this.boxManager) == null ? void 0 : _b.resizeBox({
-        appId: this.id,
-        width: box.intrinsicWidth + 1e-3,
-        height: box.intrinsicHeight + 1e-3,
-        skipUpdate: true
-      });
+      if (!box.minimized) {
+        (_b = this.boxManager) == null ? void 0 : _b.resizeBox({
+          appId: this.id,
+          width: box.intrinsicWidth + 1e-3,
+          height: box.intrinsicHeight + 1e-3,
+          skipUpdate: true
+        });
+      }
     }
   }
   async onSeek(time2) {
@@ -1712,6 +2082,7 @@ class AppProxy {
   }
   createView() {
     const view = this.viewManager.createView(this.id);
+    this.view$.setValue(view);
     this.setViewFocusScenePath();
     return view;
   }
@@ -1747,11 +2118,12 @@ class AppProxy {
       const fullPath = this._pageState.getFullPath(index2);
       if (fullPath) {
         this.setFullPath(fullPath);
+        setScenePath(this.manager.room, fullPath);
       }
     }
   }
   async destroy(needCloseBox, cleanAttrs, skipUpdate, error) {
-    var _a, _b, _c, _d;
+    var _a;
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
@@ -1762,6 +2134,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);
@@ -1775,11 +2148,12 @@ class AppProxy {
     this.appProxies.delete(this.id);
     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.sideEffectManager.flushAll();
+    this.manager.refresher.remove(this.id);
+    this.manager.refresher.remove(this.stateKey);
+    this.manager.refresher.remove(`${this.id}-fullPath`);
+    this.manager.refresher.remove(`${this.id}-camera`);
+    this.manager.refresher.remove(`${this.id}-size`);
+    this.valManager.destroy();
   }
   close() {
     return this.destroy(true, true, false);
@@ -1835,102 +2209,84 @@ 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;
     this.manager = manager;
     this.started = false;
     this.mainViewIsAddListener = false;
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
-    this.startListenWritableChange = () => {
-      this.sideEffectManager.add(() => {
-        return emitter.on("writableChange", (isWritable) => {
-          if (isWritable) {
-            this.ensureCameraAndSize();
-          }
+    this.camera$ = new Val(void 0);
+    this.size$ = new Val(void 0);
+    this.view$ = new Val(void 0);
+    this.createViewSync = () => {
+      var _a;
+      if (this.manager.boxManager && !this.viewSync) {
+        this.viewSync = new ViewSync({
+          uid: this.manager.uid,
+          view$: this.view$,
+          camera$: this.camera$,
+          size$: this.size$,
+          stageRect$: (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect$,
+          viewMode$: this.manager.windowManger.viewMode$,
+          storeCamera: this.storeCamera,
+          storeSize: this.storeSize
         });
-      });
+      }
+    };
+    this.startListenWritableChange = () => {
+      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.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
+    };
+    this.storeCurrentCamera = () => {
+      const iCamera = this.view.camera;
+      this.storeCamera(__spreadValues({
+        id: this.manager.uid
+      }, iCamera));
+    };
+    this.storeCurrentSize = () => {
+      var _a;
+      const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+      if (rect) {
+        this.storeSize({
+          id: this.manager.uid,
+          width: rect.width,
+          height: rect.height
+        });
+      }
+    };
+    this.storeCamera = (camera) => {
+      this.store.setMainViewCamera(camera);
+    };
+    this.storeSize = (size2) => {
+      this.store.setMainViewSize(size2);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
-        if (camera && camera.id !== this.manager.uid) {
-          this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
+        if (camera) {
+          const rawCamera = toJS(camera);
+          if (!isEqual(rawCamera, this.camera$.value)) {
+            this.camera$.setValue(rawCamera);
+          }
         }
       }, { 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();
-      }
-    };
-    this.onCameraUpdatedByDevice = (camera) => {
-      this.synchronizer.onLocalCameraUpdate(camera);
-      const size2 = this.getStageSize();
-      if (size2 && !isEqual(size2, this.mainViewSize)) {
-        this.setMainViewSize(size2);
-      }
+    this.sizeReaction = () => {
+      return reaction(() => this.mainViewSize, (size2) => {
+        if (size2) {
+          const rawSize = toJS(size2);
+          if (!isEqual(rawSize, this.size$.value)) {
+            this.size$.setValue(rawSize);
+          }
+        }
+      }, { fireImmediately: true });
     };
     this.mainViewClickListener = () => {
       this.mainViewClickHandler();
@@ -1941,40 +2297,43 @@ class MainViewProxy {
     this.onCameraOrSizeUpdated = () => {
       callbacks$1.emit("cameraStateChange", this.cameraState);
     };
-    this.synchronizer = new CameraSynchronizer((camera) => this.store.setMainViewCamera(__spreadProps(__spreadValues({}, camera), { id: this.manager.uid })));
     this.mainView = this.createMainView();
-    this.moveCameraSizeByAttributes();
     emitter.once("mainViewMounted").then(() => {
       this.addMainViewListener();
       this.start();
       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();
+    this.sideEffectManager.add(() => [
+      emitter.on("startReconnect", () => {
+        releaseView(this.mainView);
+      })
+    ]);
+    this.createViewSync();
+    this.sideEffectManager.add(() => emitter.on("focusedChange", ({ focused }) => {
+      if (focused === void 0) {
+        const scenePath = this.store.getMainViewScenePath();
+        if (scenePath) {
+          setScenePath(this.manager.room, scenePath);
         }
-      });
-    });
-    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() {
+    var _a;
     if (!this.mainViewCamera || !this.mainViewSize) {
       this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
-      this.setCameraAndSize();
+      this.storeCamera(__spreadValues({
+        id: this.manager.uid
+      }, this.view.camera));
+      const stageRect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+      if (stageRect && !this.mainViewSize) {
+        this.storeSize({
+          id: this.manager.uid,
+          width: stageRect.width,
+          height: stageRect.height
+        });
+      }
     }
   }
   get mainViewCamera() {
@@ -1986,25 +2345,13 @@ class MainViewProxy {
   get didRelease() {
     return get(this.view, ["didRelease"]);
   }
-  moveCameraSizeByAttributes() {
-    this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
-  }
   start() {
     if (this.started)
       return;
-    this.sizeChangeHandler(this.mainViewSize);
     this.addCameraListener();
     this.addCameraReaction();
     this.started = true;
   }
-  setCameraAndSize() {
-    const stageSize = this.getStageSize();
-    if (stageSize) {
-      const camera = __spreadProps(__spreadValues({}, this.mainView.camera), { id: this.manager.uid });
-      const size2 = __spreadProps(__spreadValues({}, stageSize), { id: this.manager.uid });
-      this.store.setMainViewCameraAndSize(camera, size2);
-    }
-  }
   get view() {
     return this.mainView;
   }
@@ -2017,7 +2364,7 @@ class MainViewProxy {
     if (mainViewScenePath) {
       setViewFocusScenePath(mainView, mainViewScenePath);
     }
-    this.synchronizer.setView(mainView);
+    this.view$.setValue(mainView);
     return mainView;
   }
   onReconnect() {
@@ -2037,9 +2384,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;
@@ -2047,13 +2392,6 @@ class MainViewProxy {
     this.addMainViewListener();
     this.start();
   }
-  getStageSize() {
-    var _a;
-    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
-    if (stage) {
-      return { width: stage.width, height: stage.height };
-    }
-  }
   addMainViewListener() {
     if (this.mainViewIsAddListener)
       return;
@@ -2078,23 +2416,23 @@ class MainViewProxy {
     (_a = this.manager.boxManager) == null ? void 0 : _a.blurAllBox();
   }
   addCameraListener() {
-    this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
     this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
     this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   removeCameraListener() {
-    this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
     this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
     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() {
+    this.camera$.destroy();
+    this.size$.destroy();
+    this.view$.destroy();
     this.removeMainViewListener();
     this.stop();
     this.sideEffectManager.flushAll();
@@ -2169,6 +2507,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;
@@ -2188,7 +2528,7 @@ class AppManager {
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
         if (sceneName) {
-          this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+          await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
         }
         await this.setMainViewSceneIndex(nextIndex);
       } else {
@@ -2336,26 +2676,27 @@ 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(() => {
             const appProxy = this.appProxies.get(focused);
             if (appProxy) {
+              appProxy.onFocus();
               appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
             }
           }, 0);
@@ -2419,11 +2760,14 @@ class AppManager {
         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;
       const isWritable = !isReadonly;
-      const isManualWritable = this.windowManger.readonly === void 0 || this.windowManger.readonly === false;
+      const isManualWritable = this.windowManger.readonly === void 0 || !this.windowManger.readonly;
       if (this.windowManger.readonly === void 0) {
         (_a = this.boxManager) == null ? void 0 : _a.setReadonly(isReadonly);
       } else {
@@ -2432,13 +2776,10 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.emitAppIsWritableChange();
       });
-      if (isWritable === true) {
-        this.mainView.disableCameraTransform = false;
+      if (isWritable) {
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
-      } else {
-        this.mainView.disableCameraTransform = true;
       }
       emitter.emit("writableChange", isWritable);
     };
@@ -2496,7 +2837,7 @@ class AppManager {
     });
   }
   async onRootDirRemoved(needClose = true) {
-    this.setMainViewScenePath(INIT_DIR);
+    await this.setMainViewScenePath(INIT_DIR);
     this.createRootDirScenesCallback();
     for (const [id2, appProxy] of this.appProxies.entries()) {
       if (appProxy.view) {
@@ -2504,7 +2845,7 @@ class AppManager {
       }
     }
     this.mainViewProxy.rebind();
-    emitter.emit("rootDirRemoved");
+    await emitter.emit("rootDirRemoved");
     this.updateRootDirRemoving(false);
   }
   get eventName() {
@@ -2543,7 +2884,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);
@@ -2553,32 +2894,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);
@@ -2590,9 +2931,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,
@@ -2643,6 +2984,7 @@ class AppManager {
   }
   setBoxManager(boxManager) {
     this.boxManager = boxManager;
+    this.mainViewProxy.createViewSync();
   }
   resetMaximized() {
     var _a;
@@ -2841,8 +3183,8 @@ class AppManager {
     }
     callbacks$1.clearListeners();
     this.sideEffectManager.flushAll();
-    this._prevFocused = void 0;
-    this._prevSceneIndex = void 0;
+    this.sceneIndex$.destroy();
+    this.focused$.destroy();
   }
 }
 /*! *****************************************************************************
@@ -3687,16 +4029,16 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var e$2 = Object.defineProperty, t$3 = Object.defineProperties, i$1 = Object.getOwnPropertyDescriptors, s$2 = Object.getOwnPropertySymbols, a$1 = Object.prototype.hasOwnProperty, o$2 = Object.prototype.propertyIsEnumerable, r$4 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, n$3 = (e2, t2) => {
+var e$2 = Object.defineProperty, t$3 = Object.defineProperties, i$1 = Object.getOwnPropertyDescriptors, s$2 = Object.getOwnPropertySymbols, a$1 = Object.prototype.hasOwnProperty, n$3 = Object.prototype.propertyIsEnumerable, o$2 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, r$4 = (e2, t2) => {
   for (var i2 in t2 || (t2 = {}))
-    a$1.call(t2, i2) && r$4(e2, i2, t2[i2]);
+    a$1.call(t2, i2) && o$2(e2, i2, t2[i2]);
   if (s$2)
     for (var i2 of s$2(t2))
-      o$2.call(t2, i2) && r$4(e2, i2, t2[i2]);
+      n$3.call(t2, i2) && o$2(e2, i2, t2[i2]);
   return e2;
 };
-var v$3, w$2, C$3, y$2, E$3, z$2, B$2, _, N$3, M$3;
-(w$2 = v$3 || (v$3 = {})).Light = "light", w$2.Dark = "dark", w$2.Auto = "auto", (y$2 = C$3 || (C$3 = {})).Normal = "normal", y$2.Minimized = "minimized", y$2.Maximized = "maximized", (z$2 = E$3 || (E$3 = {})).DarkMode = "dark_mode", z$2.PrefersColorScheme = "prefers_color_scheme", z$2.Close = "close", z$2.Focus = "focus", z$2.Blur = "blur", z$2.IntrinsicMove = "intrinsic_move", z$2.IntrinsicResize = "intrinsic_resize", z$2.ZIndex = "z_index", z$2.State = "state", z$2.Minimized = "minimized", z$2.Maximized = "maximized", z$2.Readonly = "readonly", z$2.Destroyed = "destroyed", (_ = B$2 || (B$2 = {})).Close = "close", _.Maximize = "maximize", _.Minimize = "minimize", (M$3 = N$3 || (N$3 = {})).North = "n", M$3.South = "s", M$3.West = "w", M$3.East = "e", M$3.NorthWest = "nw", M$3.NorthEast = "ne", M$3.SouthEast = "se", M$3.SouthWest = "sw";
+var v$3, w$2, C$3, y$2, E$3, z$2, _, B$2, N$3, S$3;
+(w$2 = v$3 || (v$3 = {})).Light = "light", w$2.Dark = "dark", w$2.Auto = "auto", (y$2 = C$3 || (C$3 = {})).Normal = "normal", y$2.Minimized = "minimized", y$2.Maximized = "maximized", (z$2 = E$3 || (E$3 = {})).DarkMode = "dark_mode", z$2.PrefersColorScheme = "prefers_color_scheme", z$2.Close = "close", z$2.Focus = "focus", z$2.Blur = "blur", z$2.IntrinsicMove = "intrinsic_move", z$2.IntrinsicResize = "intrinsic_resize", z$2.ZIndex = "z_index", z$2.State = "state", z$2.Minimized = "minimized", z$2.Maximized = "maximized", z$2.Readonly = "readonly", z$2.Destroyed = "destroyed", (B$2 = _ || (_ = {})).Close = "close", B$2.Maximize = "maximize", B$2.Minimize = "minimize", (S$3 = N$3 || (N$3 = {})).North = "n", S$3.South = "s", S$3.West = "w", S$3.East = "e", S$3.NorthWest = "nw", S$3.NorthEast = "ne", S$3.SouthEast = "se", S$3.SouthWest = "sw";
 function I$3(e2, t2, i2) {
   return Math.min(Math.max(e2, t2), i2);
 }
@@ -3717,7 +4059,7 @@ function V$3(e2) {
   return !e2;
 }
 class H$3 {
-  constructor({ readonly$: e2, state$: t2, title$: i2, buttons: s2, onEvent: a2, onDragStart: o2, namespace: r2 = "telebox" }) {
+  constructor({ readonly$: e2, state$: t2, title$: i2, buttons: s2, onEvent: a2, onDragStart: n2, namespace: o2 = "telebox" }) {
     this.sideEffect = new SideEffectManager(), this.lastTitleBarClick = { timestamp: 0, clientX: -100, clientY: -100 }, this.handleTitleBarClick = (e3) => {
       var t3;
       if (this.readonly$.value)
@@ -3728,7 +4070,7 @@ class H$3 {
         return;
       k$1(e3);
       const i3 = Date.now();
-      i3 - this.lastTitleBarClick.timestamp <= 500 ? Math.abs(e3.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(e3.clientY - this.lastTitleBarClick.clientY) <= 5 && this.onEvent && this.onEvent({ type: B$2.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarClick.timestamp = i3, this.lastTitleBarClick.clientX = e3.clientX, this.lastTitleBarClick.clientY = e3.clientY;
+      i3 - this.lastTitleBarClick.timestamp <= 500 ? Math.abs(e3.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(e3.clientY - this.lastTitleBarClick.clientY) <= 5 && this.onEvent && this.onEvent({ type: _.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarClick.timestamp = i3, this.lastTitleBarClick.clientX = e3.clientX, this.lastTitleBarClick.clientY = e3.clientY;
     }, this.lastTitleBarTouch = { timestamp: 0, clientX: -100, clientY: -100 }, this.handleTitleBarTouch = (e3) => {
       var t3;
       if (this.readonly$.value)
@@ -3737,8 +4079,8 @@ class H$3 {
         return;
       k$1(e3);
       const i3 = Date.now(), { clientX: s3 = this.lastTitleBarTouch.clientX + 100, clientY: a3 = this.lastTitleBarTouch.clientY + 100 } = e3.touches[0] || {};
-      i3 - this.lastTitleBarTouch.timestamp <= 500 ? Math.abs(s3 - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(a3 - this.lastTitleBarTouch.clientY) <= 10 && this.onEvent && this.onEvent({ type: B$2.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarTouch.timestamp = i3, this.lastTitleBarTouch.clientX = s3, this.lastTitleBarTouch.clientY = a3;
-    }, this.readonly$ = e2, this.state$ = t2, this.title$ = i2, this.onEvent = a2, this.onDragStart = o2, this.namespace = r2, this.buttons = s2 || [{ type: B$2.Minimize, iconClassName: this.wrapClassName("titlebar-icon-minimize") }, { type: B$2.Maximize, iconClassName: this.wrapClassName("titlebar-icon-maximize"), isActive: (e3) => e3 === C$3.Maximized }, { type: B$2.Close, iconClassName: this.wrapClassName("titlebar-icon-close") }], this.$dragArea = this.renderDragArea();
+      i3 - this.lastTitleBarTouch.timestamp <= 500 ? Math.abs(s3 - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(a3 - this.lastTitleBarTouch.clientY) <= 10 && this.onEvent && this.onEvent({ type: _.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarTouch.timestamp = i3, this.lastTitleBarTouch.clientX = s3, this.lastTitleBarTouch.clientY = a3;
+    }, this.readonly$ = e2, this.state$ = t2, this.title$ = i2, this.onEvent = a2, this.onDragStart = n2, this.namespace = o2, this.buttons = s2 || [{ type: _.Minimize, iconClassName: this.wrapClassName("titlebar-icon-minimize") }, { type: _.Maximize, iconClassName: this.wrapClassName("titlebar-icon-maximize"), isActive: (e3) => e3 === C$3.Maximized }, { type: _.Close, iconClassName: this.wrapClassName("titlebar-icon-close") }], this.$dragArea = this.renderDragArea();
   }
   render() {
     if (!this.$titleBar) {
@@ -3814,13 +4156,13 @@ class A$2 {
     i2.className = this.wrapClassName("box-stage-mask");
     const s2 = document.createElement("div");
     s2.className = this.wrapClassName("box-stage-frame");
-    const [a2, o2, r2, n2] = ["M0 8V0h8v2H2v6H0Z", "M8 8V0H0v2h6v6h2Z", "M0 0v8h8V6H2V0H0Z", "M8 0v8H0V6h6V0h2Z"].map((e3, t3) => {
+    const [a2, n2, o2, r2] = ["M0 8V0h8v2H2v6H0Z", "M8 8V0H0v2h6v6h2Z", "M0 0v8h8V6H2V0H0Z", "M8 0v8H0V6h6V0h2Z"].map((e3, t3) => {
       const i3 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
       i3.setAttribute("viewBox", "0 0 8 8"), i3.setAttribute("class", `${this.wrapClassName("box-stage-frame-corner")} is-${t3}`);
       const s3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
       return s3.setAttribute("d", e3), s3.setAttribute("fill", "#3381FF"), i3.appendChild(s3), i3;
     });
-    return s2.appendChild(a2), s2.appendChild(r2), s2.appendChild(o2), s2.appendChild(n2), e2.appendChild(t2), e2.appendChild(s2), e2.appendChild(i2), this._sideEffect.addDisposer(this.highlightStage$.subscribe((t3) => {
+    return s2.appendChild(a2), s2.appendChild(o2), s2.appendChild(n2), s2.appendChild(r2), e2.appendChild(t2), e2.appendChild(s2), e2.appendChild(i2), this._sideEffect.addDisposer(this.highlightStage$.subscribe((t3) => {
       e2.classList.toggle("is-active", t3);
     })), this._sideEffect.addDisposer(combine([this.highlightStage$, this.stageRect$]).subscribe(([s3, a3]) => {
       s3 && (a3.x > 0 ? (e2.style.flexDirection = "row", t2.style.width = `${a3.x}px`, t2.style.height = "", i2.style.width = `${a3.x}px`, i2.style.height = "") : a3.y > 0 && (e2.style.flexDirection = "column", t2.style.width = "", t2.style.height = `${a3.y}px`, i2.style.width = "", i2.style.height = `${a3.y}px`));
@@ -3835,40 +4177,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();
     })]);
   }
@@ -3901,22 +4243,22 @@ class Y$3 {
   }
   move(e2, t2, i2 = false) {
     let s2, a2;
-    const o2 = this.managerStageRect, r2 = this.pxIntrinsicSize;
+    const n2 = this.managerStageRect, o2 = this.pxIntrinsicSize;
     if (this.fence)
-      s2 = I$3(e2, o2.x, o2.x + o2.width - r2.width), a2 = I$3(t2, o2.y, o2.y + o2.height - r2.height);
+      s2 = I$3(e2, n2.x, n2.x + n2.width - o2.width), a2 = I$3(t2, n2.y, n2.y + n2.height - o2.height);
     else {
       const i3 = this.rootRect;
-      s2 = I$3(e2, i3.x - r2.width + 20, i3.x + i3.width - 20), a2 = I$3(t2, i3.y, i3.y + i3.height - 20);
+      s2 = I$3(e2, 0 - o2.width + 20, 0 + i3.width - 20), a2 = I$3(t2, 0, 0 + i3.height - 20);
     }
-    this._intrinsicCoord$.setValue({ x: (s2 - o2.x) / o2.width, y: (a2 - o2.y) / o2.height }, i2);
+    this._intrinsicCoord$.setValue({ x: (s2 - n2.x) / n2.width, y: (a2 - n2.y) / n2.height }, i2);
   }
   transform(e2, t2, i2, s2, a2 = false) {
-    const o2 = this.managerStageRect, r2 = this.rootRect;
+    const n2 = this.managerStageRect, o2 = this.rootRect;
     if (i2 = Math.max(i2, this.pxMinSize.width), s2 = Math.max(s2, this.pxMinSize.height), this.ratio > 0) {
       const e3 = this.ratio * i2;
       t2 !== this.pxIntrinsicCoord.y && (t2 -= e3 - s2), s2 = e3;
     }
-    t2 < r2.y && (t2 = r2.y, s2 = this.pxIntrinsicSize.height), this.move(e2, t2, a2), this._intrinsicSize$.setValue({ width: i2 / o2.width, height: s2 / o2.height }, a2);
+    t2 < o2.y && (t2 = o2.y, s2 = this.pxIntrinsicSize.height), this.move(e2, t2, a2), this._intrinsicSize$.setValue({ width: i2 / n2.width, height: s2 / n2.height }, a2);
   }
   mountContent(e2) {
     this._$userContent$.setValue(e2);
@@ -3924,6 +4266,12 @@ class Y$3 {
   unmountContent() {
     this._$userContent$.setValue(void 0);
   }
+  mountStage(e2) {
+    this._$userStage$.setValue(e2);
+  }
+  unmountStage() {
+    this._$userStage$.setValue(void 0);
+  }
   mountFooter(e2) {
     this._$userFooter$.setValue(e2);
   }
@@ -3966,47 +4314,68 @@ 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;
+    const h = () => {
+      const e3 = r2.getBoundingClientRect();
+      this._contentRect$.setValue({ x: 0, y: 0, width: e3.width, height: e3.height });
+    };
+    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 });
+        this.minimized || h();
       });
-      return e3.observe(n2), () => e3.disconnect();
-    }), this._sideEffect.add(() => {
+      return e3.observe(r2), () => e3.disconnect();
+    }), this._sideEffect.addDisposer(this._minimized$.reaction((e3) => {
+      e3 || this._sideEffect.setTimeout(h, 400, "minimized-content-rect-fix");
+    })), 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);
-    const h = document.createElement("div");
-    return h.className = this.wrapClassName("footer-wrap"), this.$footer = h, this._sideEffect.add(() => {
+    }), 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) => {
+              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 c = document.createElement("div");
+    return c.className = this.wrapClassName("footer-wrap"), this.$footer = c, this._sideEffect.add(() => {
       let e3;
       return this._$userFooter$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && h.appendChild(t3);
+        e3 && e3.remove(), e3 = t3, t3 && c.appendChild(t3);
       });
-    }), a2.appendChild(o2), a2.appendChild(r2), a2.appendChild(h), this._renderResizeHandlers(), this.$box;
+    }), a2.appendChild(n2), a2.appendChild(o2), a2.appendChild(c), this._renderResizeHandlers(), this.$box;
   }
   _renderResizeHandlers() {
     const e2 = document.createElement("div");
@@ -4015,7 +4384,7 @@ class Y$3 {
       i3.className = this.wrapClassName(t3) + " " + this.wrapClassName("resize-handle"), i3.dataset.teleBoxHandle = t3, e2.appendChild(i3);
     }), this.$box.appendChild(e2);
     const t2 = "handle-tracking-listener", i2 = this.wrapClassName("transforming");
-    let s2, a2, o2 = 0, r2 = 0, n2 = 0, h = 0, l2 = 0, d2 = 0;
+    let s2, a2, n2 = 0, o2 = 0, r2 = 0, h = 0, l2 = 0, d2 = 0;
     const c = (e3) => {
       if (this.state !== C$3.Normal)
         return;
@@ -4023,36 +4392,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) => {
@@ -4063,9 +4432,9 @@ class Y$3 {
         return;
       if (!this.draggable || a2 || this.state !== C$3.Normal)
         return;
-      const x2 = e3.target;
-      if ((u3 = x2.dataset) == null ? void 0 : u3.teleBoxHandle) {
-        k$1(e3), { x: o2, y: r2 } = this.pxIntrinsicCoord, { width: n2, height: h } = this.pxIntrinsicSize, { pageX: l2, pageY: d2 } = R$3(e3), a2 = x2.dataset.teleBoxHandle, s2 || (s2 = document.createElement("div"));
+      const g2 = e3.target;
+      if ((u3 = g2.dataset) == null ? void 0 : u3.teleBoxHandle) {
+        k$1(e3), { x: n2, y: o2 } = this.pxIntrinsicCoord, { width: r2, height: h } = this.pxIntrinsicSize, { pageX: l2, pageY: d2 } = R$3(e3), a2 = g2.dataset.teleBoxHandle, s2 || (s2 = document.createElement("div"));
         const u4 = a2 ? this.wrapClassName(`cursor-${a2}`) : "";
         s2.className = this.wrapClassName("track-mask" + (u4 ? ` ${u4}` : "")), this.$box.appendChild(s2), this.$box.classList.add(i2), this._sideEffect.add(() => (window.addEventListener("mousemove", c), window.addEventListener("touchmove", c, { passive: false }), window.addEventListener("mouseup", m2), window.addEventListener("touchend", m2, { passive: false }), window.addEventListener("touchcancel", m2, { passive: false }), () => {
           window.removeEventListener("mousemove", c), window.removeEventListener("touchmove", c), window.removeEventListener("mouseup", m2), window.removeEventListener("touchend", m2), window.removeEventListener("touchcancel", m2);
@@ -4083,33 +4452,33 @@ 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 }) {
-    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) => {
-      this._sideEffect.addEventListener(a3, "click", () => {
+  constructor({ minimized$: e2, readonly$: t2, darkMode$: i2, namespace: s2 = "telebox", styles: a2 = {}, root$: n2 }) {
+    this._sideEffect = new SideEffectManager(), this.namespace = s2;
+    const o2 = new ValManager();
+    this._sideEffect.addDisposer(() => o2.destroy());
+    const r2 = new Val(void 0), h = derive(e2), l2 = new Val(a2), d2 = new Val(document.createElement("button"));
+    withValueEnhancer(this, { styles: l2, $collector: d2 }, o2);
+    withReadonlyValueEnhancer(this, { root: n2 });
+    withReadonlyValueEnhancer(this, { rect: r2, visible: h }, o2), d2.value.className = this.wrapClassName("collector"), d2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(d2.subscribe((s3) => {
+      this._sideEffect.addEventListener(s3, "click", () => {
         t2.value || e2.setValue(false);
-      }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([l2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("collector-visible"), e3);
+      }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([h.subscribe((e3) => {
+        s3.classList.toggle(this.wrapClassName("collector-visible"), e3);
       }), t2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("collector-readonly"), e3);
+        s3.classList.toggle(this.wrapClassName("collector-readonly"), e3);
       }), i2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("color-scheme-dark"), e3), a3.classList.toggle(this.wrapClassName("color-scheme-light"), !e3);
-      }), d2.subscribe((e3) => {
+        s3.classList.toggle(this.wrapClassName("color-scheme-dark"), e3), s3.classList.toggle(this.wrapClassName("color-scheme-light"), !e3);
+      }), l2.subscribe((e3) => {
         Object.keys(e3).forEach((t3) => {
           const i3 = e3[t3];
-          i3 != null && (a3.style[t3] = i3);
+          i3 != null && (s3.style[t3] = i3);
         });
-      }), r2.subscribe((e3) => {
-        e3 && e3.appendChild(a3);
-      }), combine([e2, s2, r2]).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 });
+      }), n2.subscribe((e3) => {
+        e3 && e3.appendChild(s3);
+      }), combine([e2, n2]).subscribe(([e3, t3]) => {
+        if (e3 && t3) {
+          const { x: e4, y: i3, width: a3, height: n3 } = s3.getBoundingClientRect(), o3 = t3.getBoundingClientRect();
+          r2.setValue({ x: e4 - o3.x, y: i3 - o3.y, width: a3, height: n3 });
         }
       })], "telebox-collector-el");
     }));
@@ -4135,8 +4504,8 @@ class j$1 extends H$3 {
       if (this.$titles && this.state$.value === C$3.Maximized) {
         const { children: i2 } = this.$titles.firstElementChild;
         for (let s2 = i2.length - 1; s2 >= 0; s2 -= 1) {
-          const a2 = i2[s2], o2 = (t2 = a2.dataset) == null ? void 0 : t2.teleBoxID;
-          o2 && (e2 && o2 === e2.id ? a2.classList.toggle(this.wrapClassName("titles-tab-focus"), true) : this.focusedBox && o2 === this.focusedBox.id && a2.classList.toggle(this.wrapClassName("titles-tab-focus"), false));
+          const a2 = i2[s2], n2 = (t2 = a2.dataset) == null ? void 0 : t2.teleBoxID;
+          n2 && (e2 && n2 === e2.id ? a2.classList.toggle(this.wrapClassName("titles-tab-focus"), true) : this.focusedBox && n2 === this.focusedBox.id && a2.classList.toggle(this.wrapClassName("titles-tab-focus"), false));
         }
       }
       this.focusedBox = e2;
@@ -4176,11 +4545,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)
@@ -4188,7 +4557,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");
@@ -4210,13 +4579,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 });
+    const V2 = new A$2({ namespace: o2, rootRect$: I2, ratio$: S2, root$: w2, highlightStage$: combine([M2, B2, z2], ([e3, t3, i3]) => e3 && (i3 || !t3)) });
     this._sideEffect.addDisposer(() => V2.destroy());
     const H2 = { darkMode: L2, state: T2, root: w2, rootRect: I2, stageRect: V2.stageRect$ };
     withReadonlyValueEnhancer(this, H2, b2);
-    withValueEnhancer(this, { prefersColorScheme: D2, readonly: y2, fence: N2, minimized: z2, maximized: _2, stageRatio: M2, highlightStage: S2 }, b2);
+    withValueEnhancer(this, { prefersColorScheme: D2, readonly: y2, fence: N2, minimized: z2, maximized: B2, stageRatio: S2, highlightStage: M2 }, b2);
     const W2 = this.wrapClassName("titlebar-icon-close"), Y2 = (e3) => {
       var t3;
       if (y2.value)
@@ -4236,10 +4605,10 @@ class F$3 {
     };
     this._sideEffect.addEventListener(window, "mousedown", Y2, true), this._sideEffect.addEventListener(window, "touchstart", Y2, true), this.titleBar = new j$1({ namespace: this.namespace, title$: derive(this.topBox$, (e3) => (e3 == null ? void 0 : e3.title) || ""), boxes$: this.boxes$, darkMode$: L2, readonly$: y2, state$: T2, root$: w2, rootRect$: I2, onEvent: (e3) => {
       switch (e3.type) {
-        case B$2.Maximize:
-          _2.setValue(!_2.value);
+        case _.Maximize:
+          B2.setValue(!B2.value);
           break;
-        case B$2.Minimize:
+        case _.Minimize:
           z2.setValue(true);
           break;
         case E$3.Close:
@@ -4247,7 +4616,7 @@ class F$3 {
       }
     } }), this._sideEffect.addDisposer([T2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.State, e3);
-    }), _2.reaction((e3, t3) => {
+    }), B2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.Maximized, e3);
     }), z2.reaction((e3, t3) => {
       t3 || this.events.emit(X$3.Minimized, e3);
@@ -4275,13 +4644,13 @@ class F$3 {
     return this;
   }
   create(e2 = {}, s2 = true) {
-    const a2 = new Y$3((o2 = n$3(n$3({ zIndex: this.topBox ? this.topBox.zIndex + 1 : 100 }, e2), s2 ? this.smartPosition(e2) : {}), r2 = { namespace: this.namespace, root$: this._root$, darkMode$: this._darkMode$, maximized$: this._maximized$, minimized$: this._minimized$, fence$: this._fence$, rootRect$: this._rootRect$, managerStageRect$: this._stageRect$, stageRatio$: this._stageRatio$, readonly$: this._readonly$, collectorRect$: this.collector._rect$, managerHighlightStage$: this._highlightStage$ }, t$3(o2, i$1(r2))));
-    var o2, r2;
-    return a2.focus && (this.focusBox(a2), s2 && this.makeBoxTop(a2)), this.boxes$.setValue([...this.boxes, a2]), this._sideEffect.addDisposer([a2._delegateEvents.on(B$2.Maximize, () => {
+    const a2 = new Y$3((n2 = r$4(r$4({ zIndex: this.topBox ? this.topBox.zIndex + 1 : 100 }, e2), s2 ? this.smartPosition(e2) : {}), o2 = { namespace: this.namespace, root$: this._root$, darkMode$: this._darkMode$, maximized$: this._maximized$, minimized$: this._minimized$, fence$: this._fence$, rootRect$: this._rootRect$, managerStageRect$: this._stageRect$, managerStageRatio$: this._stageRatio$, readonly$: this._readonly$, collectorRect$: this.collector._rect$, managerHighlightStage$: this._highlightStage$ }, t$3(n2, i$1(o2))));
+    var n2, o2;
+    return a2.focus && (this.focusBox(a2), s2 && this.makeBoxTop(a2)), this.boxes$.setValue([...this.boxes, a2]), this._sideEffect.addDisposer([a2._delegateEvents.on(_.Maximize, () => {
       this.setMaximized(!this.maximized);
-    }), a2._delegateEvents.on(B$2.Minimize, () => {
+    }), a2._delegateEvents.on(_.Minimize, () => {
       this.setMinimized(true);
-    }), a2._delegateEvents.on(B$2.Close, () => {
+    }), a2._delegateEvents.on(_.Close, () => {
       this.remove(a2), this.focusTopBox();
     }), a2._intrinsicCoord$.reaction((e3, t2) => {
       t2 || this.events.emit(X$3.IntrinsicMove, a2);
@@ -4366,27 +4735,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 };
   }
@@ -4403,7 +4772,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);
@@ -4433,17 +4801,17 @@ class BoxManager {
     const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
     this.sideEffectManager.add(() => [
-      this.teleBoxManager._state$.reaction((state) => {
+      this.teleBoxManager.onValChanged("state", (state) => {
         callbacks2.emit("boxStateChange", state);
         emitter2.emit("boxStateChange", state);
       }),
-      this.teleBoxManager._darkMode$.reaction((darkMode) => {
+      this.teleBoxManager.onValChanged("darkMode", (darkMode) => {
         callbacks2.emit("darkModeChange", darkMode);
       }),
-      this.teleBoxManager._prefersColorScheme$.reaction((colorScheme) => {
+      this.teleBoxManager.onValChanged("prefersColorScheme", (colorScheme) => {
         callbacks2.emit("prefersColorSchemeChange", colorScheme);
       }),
-      this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+      this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
         if (skipUpdate) {
           return;
         }
@@ -4459,7 +4827,7 @@ class BoxManager {
           }
         }
       }),
-      this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+      this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
         if (skipUpdate) {
           return;
         }
@@ -4471,7 +4839,11 @@ class BoxManager {
         });
       }),
       this.teleBoxManager.events.on("intrinsic_move", debounce((box) => {
-        boxEmitter2.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+        boxEmitter2.emit("move", {
+          appId: box.id,
+          x: box.intrinsicX,
+          y: box.intrinsicY
+        });
       }, 50)),
       this.teleBoxManager.events.on("intrinsic_resize", debounce((box) => {
         boxEmitter2.emit("resize", {
@@ -4504,9 +4876,6 @@ class BoxManager {
       })
     ]);
   }
-  get mainView() {
-    return this.context.getMainView();
-  }
   get canOperate() {
     return this.context.canOperate();
   }
@@ -4531,6 +4900,9 @@ class BoxManager {
   get stageRect() {
     return this.teleBoxManager.stageRect;
   }
+  get stageRect$() {
+    return this.teleBoxManager._stageRect$;
+  }
   createBox(params) {
     var _a, _b, _c;
     if (!this.teleBoxManager)
@@ -4553,8 +4925,9 @@ class BoxManager {
       height,
       id: params.appId
     };
-    this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+    const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
     this.context.emitter.emit(`${params.appId}${Events.WindowCreated}`);
+    return box;
   }
   setupBoxManager(createTeleBoxManagerConfig) {
     const root = WindowManager.playground;
@@ -4562,7 +4935,8 @@ class BoxManager {
       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) {
@@ -5629,7 +6003,7 @@ class ReconnectRefresher {
     };
     this.onReconnected = debounce(() => {
       this._onReconnected();
-    }, 3e3);
+    }, 1e3);
     this._onReconnected = () => {
       log("onReconnected refresh reactors");
       this.releaseDisposers();
@@ -5677,6 +6051,7 @@ class ReconnectRefresher {
       this.reactors.set(id2, func);
       this.disposers.set(id2, func());
     }
+    return () => this.remove(id2);
   }
   remove(id2) {
     if (this.reactors.has(id2)) {
@@ -5748,6 +6123,9 @@ const replaceRoomFunction = (room, manager) => {
     room.lockImage = (...args) => manager.lockImage(...args);
     room.lockImages = (...args) => manager.lockImages(...args);
     delegateRemoveScenes(room, manager);
+    if (!room.dynamicPpt.slideStateAdapter.pptHandler) {
+      room.dynamicPpt.slideStateAdapter.pptHandler = manager.createPPTHandler();
+    }
   }
 };
 const delegateRemoveScenes = (room, manager) => {
@@ -15302,20 +15680,20 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.2";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.8", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.20";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.18", "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.3.0", "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.viewMode$ = new Val(ViewMode.Broadcaster);
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.8", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.18", "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.3.0", "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;
     const room = params.room;
     _WindowManager.container = params.container;
-    const containerSizeRatio = params.containerSizeRatio;
     const debug = params.debug;
     const cursor = params.cursor;
     _WindowManager.params = params;
@@ -15352,21 +15730,20 @@ const _WindowManager = class extends InvisiblePlugin {
     if (!manager) {
       throw new Error("[WindowManager]: create manager failed");
     }
-    if (containerSizeRatio) {
-      _WindowManager.containerSizeRatio = containerSizeRatio;
+    if (params.containerSizeRatio) {
+      _WindowManager.containerSizeRatio = params.containerSizeRatio;
     }
+    manager.containerSizeRatio = _WindowManager.containerSizeRatio;
     await manager.ensureAttributes();
     manager.appManager = new AppManager(manager);
     manager._pageState = new PageStateImpl(manager.appManager);
     manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
-    if (containerSizeRatio) {
-      manager.containerSizeRatio = containerSizeRatio;
-    }
     manager.boxManager = createBoxManager(manager, callbacks$1, emitter, boxEmitter, {
       collectorContainer: params.collectorContainer,
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
-      stageRatio: params.containerSizeRatio
+      stageRatio: _WindowManager.containerSizeRatio,
+      highlightStage: params.highlightStage
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -15586,6 +15963,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;
@@ -15636,17 +16024,20 @@ const _WindowManager = class extends InvisiblePlugin {
     addEmitterOnceListener(`destroy-${kind2}`, listener);
   }
   setViewMode(mode) {
-    var _a, _b, _c;
+    var _a;
+    log("setViewMode", mode);
+    const mainViewProxy = (_a = this.appManager) == null ? void 0 : _a.mainViewProxy;
     if (mode === ViewMode.Broadcaster) {
       if (this.canOperate) {
-        (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.setCameraAndSize();
+        mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
       }
-      (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.start();
+      mainViewProxy == null ? void 0 : mainViewProxy.start();
     }
     if (mode === ViewMode.Freedom) {
-      (_c = this.appManager) == null ? void 0 : _c.mainViewProxy.stop();
+      mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
     this.viewMode = mode;
+    this.viewMode$.setValue(mode);
   }
   setBoxState(boxState) {
     if (!this.canOperate)
@@ -15793,7 +16184,7 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCamera, camera);
     setTimeout(() => {
       var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.setCameraAndSize();
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
     }, 500);
   }
   moveCameraToContain(rectangle) {
@@ -15802,7 +16193,7 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
     setTimeout(() => {
       var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.setCameraAndSize();
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
     }, 500);
   }
   convertToPointInWorld(point) {
@@ -15914,12 +16305,12 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.Refresh);
   }
   _refresh() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.rebind();
     if (_WindowManager.container) {
       this.bindContainer(_WindowManager.container);
     }
-    (_c = (_b = this.appManager) == null ? void 0 : _b.refresher) == null ? void 0 : _c.refresh();
+    (_b = this.appManager) == null ? void 0 : _b.refresher.refresh();
   }
   setContainerSizeRatio(ratio) {
     if (!isNumber(ratio)) {
@@ -15929,6 +16320,26 @@ const _WindowManager = class extends InvisiblePlugin {
     this.containerSizeRatio = ratio;
     emitter.emit("containerSizeRatioUpdate", ratio);
   }
+  createPPTHandler() {
+    return {
+      onPageJumpTo: (_pptUUID, index2) => {
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = this.appManager) == null ? void 0 : _a.focusApp) == null ? void 0 : _b.appContext) == null ? void 0 : _c.whiteBoardView) == null ? void 0 : _d.jumpPage(index2);
+      },
+      onPageToNext: () => {
+        var _a, _b, _c, _d;
+        if (this.focused) {
+          (_d = (_c = (_b = (_a = this.appManager) == null ? void 0 : _a.focusApp) == null ? void 0 : _b.appContext) == null ? void 0 : _c.whiteBoardView) == null ? void 0 : _d.nextPage();
+        }
+      },
+      onPageToPrev: () => {
+        var _a, _b, _c, _d;
+        if (this.focused) {
+          (_d = (_c = (_b = (_a = this.appManager) == null ? void 0 : _a.focusApp) == null ? void 0 : _b.appContext) == null ? void 0 : _c.whiteBoardView) == null ? void 0 : _d.prevPage();
+        }
+      }
+    };
+  }
   isDynamicPPT(scenes) {
     var _a, _b;
     const sceneSrc = (_b = (_a = scenes[0]) == null ? void 0 : _a.ppt) == null ? void 0 : _b.src;