@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.9

package/dist/index.es.js

@@ -898,10 +898,12 @@ class Storage {
   }
 }
 class WhiteBoardView {
-  constructor(appContext, appProxy, removeViewWrapper) {
+  constructor(view, appContext, appProxy, removeViewWrapper, ensureSize) {
+    this.view = view;
     this.appContext = appContext;
     this.appProxy = appProxy;
     this.removeViewWrapper = removeViewWrapper;
+    this.ensureSize = ensureSize;
     this.nextPage = async () => {
       const nextIndex = this.pageState.index + 1;
       return this.jumpPage(nextIndex);
@@ -949,9 +951,6 @@ class WhiteBoardView {
       pageState$.setValue(pageState);
     });
   }
-  get view() {
-    return this.appContext.view;
-  }
   get pageState() {
     return this.pageState$.value;
   }
@@ -1042,13 +1041,15 @@ class AppContext {
         this._viewWrapper = void 0;
       };
       view.divElement = viewWrapper;
+      this.appProxy.fireMemberStateChange();
       if (this.isAddApp) {
-        this.initPageSize(size2);
+        this.ensurePageSize(size2);
       }
-      this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
       return this.whiteBoardView;
     };
-    this.initPageSize = (size2) => {
+    this.ensurePageSize = (size2) => {
+      var _a;
       if (!isNumber(size2))
         return;
       if (!this.appProxy.scenePath)
@@ -1059,11 +1060,8 @@ 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);
@@ -1110,11 +1108,14 @@ 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);
@@ -1225,21 +1226,6 @@ class CameraSynchronizer {
         delay(moveCamera, 50);
       }
     }, 50);
-    this.onLocalSizeUpdate = (size2) => {
-      if (this.rect && this.view) {
-        let scale2;
-        if (size2.width < size2.height) {
-          scale2 = this.rect.width / size2.width;
-        } else {
-          scale2 = this.rect.height / size2.height;
-        }
-        const nextScale = this.view.camera.scale / scale2;
-        this.view.moveCamera({
-          scale: nextScale,
-          animationMode: AnimationMode.Immediately
-        });
-      }
-    };
   }
   setRect(rect) {
     this.rect = rect;
@@ -1300,11 +1286,11 @@ class AppViewSync {
         }
       }));
     }
-    combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size2]) => {
+    this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size2]) => {
       if (camera && size2) {
         this.synchronizer.onRemoteUpdate(camera, size2);
       }
-    });
+    }));
   }
   destroy() {
     this.sem.flushAll();
@@ -1515,10 +1501,30 @@ class AppProxy {
     this.uid = this.manager.uid;
     this.status = "normal";
     this.sideEffectManager = new SideEffectManager();
-    this.camera$ = new Val(void 0);
-    this.size$ = new Val(void 0);
-    this.box$ = new Val(void 0);
-    this.view$ = new Val(void 0);
+    this.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.getAppInitState = (id2) => {
       var _a2, _b;
       const attrs = this.store.getAppState(id2);
@@ -1547,8 +1553,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) {
@@ -1556,23 +1561,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);
           }
         });
       });
@@ -1601,6 +1606,26 @@ class AppProxy {
       const nextCamera = __spreadValues(__spreadValues({}, this.camera$.value), camera);
       this.storeCamera(nextCamera);
     };
+    this.addCameraReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-camera`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
+      }, (camera) => {
+        if (camera && camera.id !== this.uid) {
+          this.camera$.setValue(toJS(camera));
+        }
+      })), "camera");
+    };
+    this.addSizeReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-size`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
+      }, (size2) => {
+        if (size2 && size2.id !== this.uid) {
+          this.size$.setValue(toJS(size2));
+        }
+      })), "size");
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -1628,31 +1653,9 @@ class AppProxy {
     }));
     this.camera$.setValue(toJS(this.appAttributes.camera));
     this.size$.setValue(toJS(this.appAttributes.size));
-    this.sideEffectManager.add(() => {
-      return this.manager.refresher.add(`${this.id}-camera`, () => {
-        return reaction(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
-        }, (camera) => {
-          if (camera && camera.id !== this.uid) {
-            this.camera$.setValue(toJS(camera));
-          }
-        });
-      });
-    });
-    this.sideEffectManager.add(() => {
-      return this.manager.refresher.add(`${this.id}-size`, () => {
-        return reaction(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
-        }, (size2) => {
-          if (size2 && size2.id !== this.uid) {
-            this.size$.setValue(toJS(size2));
-          }
-        });
-      });
-    });
-    combine([this.box$, this.view$]).subscribe(([box, view]) => {
+    this.addCameraReaction();
+    this.addSizeReaction();
+    this.sideEffectManager.add(() => combine([this.box$, this.view$]).subscribe(([box, view]) => {
       var _a2, _b;
       if (box && view) {
         if (!this.camera$.value) {
@@ -1662,6 +1665,7 @@ class AppProxy {
             scale: 1,
             id: this.uid
           });
+          this.camera$.setValue(toJS(this.appAttributes.camera));
         }
         if (!this.size$.value && box.contentStageRect) {
           this.storeSize({
@@ -1669,6 +1673,7 @@ class AppProxy {
             width: (_a2 = box.contentStageRect) == null ? void 0 : _a2.width,
             height: (_b = box.contentStageRect) == null ? void 0 : _b.height
           });
+          this.size$.setValue(toJS(this.appAttributes.size));
         }
         this.appViewSync = new AppViewSync(this);
         this.sideEffectManager.add(() => () => {
@@ -1676,20 +1681,8 @@ class AppProxy {
           return (_a3 = this.appViewSync) == null ? void 0 : _a3.destroy();
         });
       }
-    });
-    this.sideEffectManager.add(() => emitter.on("memberStateChange", (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.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -1717,7 +1710,7 @@ class AppProxy {
     }
   }
   get view() {
-    return this.manager.viewManager.getView(this.id);
+    return this.view$.value;
   }
   get viewIndex() {
     var _a;
@@ -1973,7 +1966,7 @@ class AppProxy {
     }
   }
   async destroy(needCloseBox, cleanAttrs, skipUpdate, error) {
-    var _a, _b, _c, _d;
+    var _a;
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
@@ -1998,13 +1991,10 @@ 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.camera$.destroy();
-    this.size$.destroy();
-    this.box$.destroy();
+    this.manager.refresher.remove(this.id);
+    this.manager.refresher.remove(this.stateKey);
+    this.manager.refresher.remove(`${this.id}-fullPath`);
+    this.valManager.destroy();
   }
   close() {
     return this.destroy(true, true, false);
@@ -2069,17 +2059,14 @@ class MainViewProxy {
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
     this.startListenWritableChange = () => {
-      this.sideEffectManager.add(() => {
-        return emitter.on("writableChange", (isWritable) => {
-          if (isWritable) {
-            this.ensureCameraAndSize();
-          }
-        });
-      });
+      this.sideEffectManager.add(() => emitter.on("writableChange", (isWritable) => {
+        if (isWritable) {
+          this.ensureCameraAndSize();
+        }
+      }));
     };
     this.addCameraReaction = () => {
-      var _a2;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(Fields.MainViewCamera, this.cameraReaction);
+      this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
@@ -2088,11 +2075,8 @@ class MainViewProxy {
         }
       }, { fireImmediately: true });
     };
-    this.sizeChangeHandler = debounce((size2) => {
-    }, 30);
     this.onUpdateContainerSizeRatio = () => {
       const size2 = this.store.getMainViewSize();
-      this.sizeChangeHandler(size2);
       if (size2.id === this.manager.uid) {
         this.setCameraAndSize();
       }
@@ -2122,23 +2106,19 @@ class MainViewProxy {
       this.ensureCameraAndSize();
       this.startListenWritableChange();
     });
-    this.sideEffectManager.add(() => {
-      return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-    });
-    this.sideEffectManager.add(() => {
-      return emitter.on("startReconnect", () => {
+    this.sideEffectManager.add(() => [
+      emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio),
+      emitter.on("startReconnect", () => {
         releaseView(this.mainView);
-      });
-    });
+      }),
+      emitter.on("playgroundSizeChange", (rect2) => {
+        this.synchronizer.setRect(rect2);
+      })
+    ]);
     const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     if (rect) {
       this.synchronizer.setRect(rect);
     }
-    this.sideEffectManager.add(() => {
-      return emitter.on("playgroundSizeChange", (rect2) => {
-        this.synchronizer.setRect(rect2);
-      });
-    });
   }
   ensureCameraAndSize() {
     if (!this.mainViewCamera || !this.mainViewSize) {
@@ -2161,7 +2141,6 @@ class MainViewProxy {
   start() {
     if (this.started)
       return;
-    this.sizeChangeHandler(this.mainViewSize);
     this.addCameraListener();
     this.addCameraReaction();
     this.started = true;
@@ -2255,10 +2234,9 @@ class MainViewProxy {
     this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   stop() {
-    var _a, _b;
     this.removeCameraListener();
-    (_a = this.manager.refresher) == null ? void 0 : _a.remove(Fields.MainViewCamera);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(Fields.MainViewSize);
+    this.manager.refresher.remove(Fields.MainViewCamera);
+    this.manager.refresher.remove(Fields.MainViewSize);
     this.started = false;
   }
   destroy() {
@@ -2336,6 +2314,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;
@@ -2503,21 +2483,21 @@ class AppManager {
       });
     };
     this.onMainViewIndexChange = (index2) => {
-      if (index2 !== void 0 && this._prevSceneIndex !== index2) {
+      if (index2 !== void 0 && this.sceneIndex$.value !== index2) {
         callbacks$1.emit("mainViewSceneIndexChange", index2);
         emitter.emit("changePageState");
         if (this.callbacksNode) {
           this.updateSceneState(this.callbacksNode);
         }
-        this._prevSceneIndex = index2;
+        this.sceneIndex$.setValue(index2);
       }
     };
     this.onFocusChange = (focused) => {
       var _a;
-      if (this._prevFocused !== focused) {
+      if (this.focused$.value !== focused) {
         callbacks$1.emit("focusedChange", focused);
-        emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-        this._prevFocused = focused;
+        emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+        this.focused$.setValue(focused);
         if (focused !== void 0) {
           (_a = this.boxManager) == null ? void 0 : _a.focusBox({ appId: focused });
           setTimeout(() => {
@@ -2603,12 +2583,9 @@ class AppManager {
         appProxy.emitAppIsWritableChange();
       });
       if (isWritable === true) {
-        this.mainView.disableCameraTransform = false;
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
-      } else {
-        this.mainView.disableCameraTransform = true;
       }
       emitter.emit("writableChange", isWritable);
     };
@@ -2713,7 +2690,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);
@@ -2723,32 +2700,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);
@@ -2760,9 +2737,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,
@@ -3011,8 +2988,8 @@ class AppManager {
     }
     callbacks$1.clearListeners();
     this.sideEffectManager.flushAll();
-    this._prevFocused = void 0;
-    this._prevSceneIndex = void 0;
+    this.sceneIndex$.destroy();
+    this.focused$.destroy();
   }
 }
 /*! *****************************************************************************
@@ -4016,10 +3993,10 @@ class Y$3 {
     this._sideEffect.addDisposer(re2.reaction((e3, t3) => {
       le2.setValue({ width: Math.max(a2, e3.width), height: Math.max(n2, e3.height) }, t3);
     }));
-    const de2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), ce2 = combine([le2, O2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), me2 = combine([de2, O2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), ue2 = new Val(R2), ge2 = combine([ue2, F2], ([e3, t3]) => e3 != null ? e3 : t3), xe2 = new Val(null), pe2 = new Val(P2.value, { compare: shallowequal }), fe2 = new Val(_2), $e2 = new A$2({ namespace: i2, root$: xe2, rootRect$: pe2, ratio$: combine([fe2, j2], ([e3, t3]) => e3 != null ? e3 : t3), highlightStage$: ge2 });
+    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: pe2, contentStageRect: $e2.stageRect$ };
+    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;
@@ -4028,7 +4005,7 @@ class Y$3 {
       e3 > 0 && this.transform(me2.value.x, me2.value.y, ce2.value.width, ce2.value.height, true);
     })), this._sideEffect.addDisposer(T2.subscribe((e3) => {
       e3 && this.move(me2.value.x, me2.value.y, true);
-    })), this.$box = this.render(), xe2.setValue(this.$content.parentElement);
+    })), 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);
@@ -4162,7 +4139,7 @@ class Y$3 {
     r2.className = this.wrapClassName("content") + " tele-fancy-scrollbar", this.$content = r2, this._sideEffect.add(() => {
       const e3 = new W$3(() => {
         const e4 = r2.getBoundingClientRect();
-        this._contentRect$.setValue({ x: e4.x, y: e4.y, width: e4.width, height: e4.height });
+        this._contentRect$.setValue({ x: 0, y: 0, width: e4.width, height: e4.height });
       });
       return e3.observe(r2), () => e3.disconnect();
     }), this._sideEffect.add(() => {
@@ -4214,13 +4191,13 @@ 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: g2, height: x2 } = this.pxIntrinsicSize;
+      let { x: m3, y: u3 } = this.pxIntrinsicCoord, { width: g2, height: p2 } = this.pxIntrinsicSize;
       switch (a2) {
         case N$3.North:
-          u3 = o2 + c2, x2 = h - c2;
+          u3 = o2 + c2, p2 = h - c2;
           break;
         case N$3.South:
-          x2 = h + c2;
+          p2 = h + c2;
           break;
         case N$3.West:
           m3 = n2 + s3, g2 = r2 - s3;
@@ -4229,21 +4206,21 @@ class Y$3 {
           g2 = r2 + s3;
           break;
         case N$3.NorthWest:
-          m3 = n2 + s3, u3 = o2 + c2, g2 = r2 - s3, x2 = h - c2;
+          m3 = n2 + s3, u3 = o2 + c2, g2 = r2 - s3, p2 = h - c2;
           break;
         case N$3.NorthEast:
-          u3 = o2 + c2, g2 = r2 + s3, x2 = h - c2;
+          u3 = o2 + c2, g2 = r2 + s3, p2 = h - c2;
           break;
         case N$3.SouthEast:
-          g2 = r2 + s3, x2 = h + c2;
+          g2 = r2 + s3, p2 = h + c2;
           break;
         case N$3.SouthWest:
-          m3 = n2 + s3, g2 = r2 - s3, x2 = h + c2;
+          m3 = n2 + s3, g2 = r2 - s3, p2 = h + c2;
           break;
         default:
           return void this.move(n2 + s3, o2 + c2);
       }
-      this.transform(m3, u3, g2, x2);
+      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) => {
@@ -4379,7 +4356,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");
@@ -4594,7 +4571,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);
@@ -4695,9 +4671,6 @@ class BoxManager {
       })
     ]);
   }
-  get mainView() {
-    return this.context.getMainView();
-  }
   get canOperate() {
     return this.context.canOperate();
   }
@@ -4754,7 +4727,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) {
@@ -15495,14 +15469,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.6";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.13", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.9";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.14", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.13", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.14", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     var _a;
@@ -15559,7 +15533,8 @@ const _WindowManager = class extends InvisiblePlugin {
       collectorContainer: params.collectorContainer,
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
-      stageRatio: params.containerSizeRatio
+      stageRatio: params.containerSizeRatio,
+      highlightStage: params.highlightStage
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -15779,6 +15754,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;