@netless/window-manager 1.0.0-canary.29 → 1.0.0-canary.31

package/dist/index.es.js

@@ -20,7 +20,7 @@ var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
 import { debounce, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, isBoolean, isNumber, throttle, isEqual, omitBy, isUndefined, isInteger, orderBy, isEmpty, omit, 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 { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, toJS, WhiteVersion, autorun, 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, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
@@ -42,6 +42,7 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["RootDirRemoved"] = "RootDirRemoved";
   Events2["Refresh"] = "Refresh";
   Events2["InitMainViewCamera"] = "InitMainViewCamera";
+  Events2["InvokeAttributesUpdateCallback"] = "InvokeAttributesUpdateCallback";
   return Events2;
 })(Events || {});
 const MagixEventName = "__WindowManger";
@@ -494,6 +495,10 @@ class AppListeners {
             this.setAppFocusViewIndexHandler(data.payload);
             break;
           }
+          case Events.InvokeAttributesUpdateCallback: {
+            this.manager.attributesUpdateCallback(this.manager.attributes.apps);
+            break;
+          }
         }
       }
     };
@@ -997,7 +1002,7 @@ const serializeRoomMembers = (members) => {
     var _a;
     return __spreadValues({
       uid: ((_a = member.payload) == null ? void 0 : _a.uid) || ""
-    }, member);
+    }, toJS(member));
   });
 };
 const createInvisiblePlugin = async (room) => {
@@ -1163,7 +1168,7 @@ class AppContext {
     return this.manager.room;
   }
   get members() {
-    return this.manager.members;
+    return this.manager.members$.value;
   }
   get currentMember() {
     const self2 = findMemberByUid(this.room, this.manager.uid);
@@ -1244,7 +1249,6 @@ class CameraSynchronizer {
       }
     };
     this.onRemoteUpdate = throttle((camera, size2) => {
-      var _a;
       this.remoteCamera = camera;
       this.remoteSize = size2;
       if (this.remoteSize && this.rect) {
@@ -1261,7 +1265,7 @@ class CameraSynchronizer {
         if (camera.centerY !== null) {
           config.centerY = camera.centerY;
         }
-        (_a = this.view) == null ? void 0 : _a.moveCamera(config);
+        this.moveCamera(config);
       }
     }, 10);
   }
@@ -1269,15 +1273,13 @@ class CameraSynchronizer {
     this.view = view;
   }
   onRemoteSizeUpdate(size2) {
-    var _a;
     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;
-      (_a = this.view) == null ? void 0 : _a.moveCamera({
-        scale: nextScale,
-        animationMode: AnimationMode.Continuous
+      this.moveCamera({
+        scale: nextScale
       });
     }
   }
@@ -1285,6 +1287,10 @@ class CameraSynchronizer {
     this.saveCamera(camera);
     this.remoteCamera = camera;
   }
+  moveCamera(camera) {
+    var _a;
+    (_a = this.view) == null ? void 0 : _a.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: AnimationMode.Continuous }));
+  }
 }
 class ViewSync {
   constructor(context) {
@@ -1440,7 +1446,7 @@ class AttributesDelegate {
       attrNames.push("scenes");
     }
     const options = pick(params.options, attrNames);
-    const attrs = { kind: params.kind, options, isDynamicPPT };
+    const attrs = { kind: params.kind, options, isDynamicPPT, setup: false };
     if (typeof params.src === "string") {
       attrs.src = params.src;
     }
@@ -1718,6 +1724,10 @@ class AppProxy {
     this.onFocus = () => {
       this.setScenePath();
     };
+    this.setupDone = () => {
+      this.store.updateAppAttributes(this.id, "setup", true);
+      this.manager.dispatchInternalEvent(Events.InvokeAttributesUpdateCallback);
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -1740,9 +1750,6 @@ class AppProxy {
       notifyPageStateChange: this.notifyPageStateChange
     });
     this.sideEffectManager.add(() => () => this._pageState.destroy());
-    this.sideEffectManager.add(() => emitter.on("roomMembersChange", (members) => {
-      this.appEmitter.emit("roomMembersChange", members);
-    }));
     this.camera$.setValue(toJS(this.appAttributes.camera));
     this.size$.setValue(toJS(this.appAttributes.size));
     this.addCameraReaction();
@@ -1802,6 +1809,9 @@ class AppProxy {
             }
           });
         }
+      }),
+      this.manager.members$.reaction((members) => {
+        this.appEmitter.emit("roomMembersChange", members);
       })
     ]);
   }
@@ -1909,6 +1919,9 @@ class AppProxy {
           this.appResult = result;
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.fixMobileSize();
+          if (this.isAddApp) {
+            this.setupDone();
+          }
         }, SETUP_APP_DELAY);
       });
       const box = (_a = this.boxManager) == null ? void 0 : _a.createBox({
@@ -2484,6 +2497,7 @@ class AppManager {
     this.appCreateQueue = new AppCreateQueue();
     this.sceneIndex$ = new Val(void 0);
     this.focused$ = new Val(void 0);
+    this.members$ = new Val([]);
     this.sideEffectManager = new SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
@@ -2731,7 +2745,7 @@ class AppManager {
         appProxy.appEmitter.emit("roomStateChange", state);
       });
       if (state.roomMembers) {
-        emitter.emit("roomMembersChange", this.members);
+        this.members$.setValue(serializeRoomMembers(state.roomMembers));
       }
       emitter.emit("observerIdChange", this.displayer.observerId);
       if (state.memberState) {
@@ -2809,6 +2823,7 @@ class AppManager {
     appRegister.setSyncRegisterApp((payload) => {
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
     });
+    this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
   }
   async onRootDirRemoved(needClose = true) {
     await this.setMainViewScenePath(INIT_DIR);
@@ -2846,9 +2861,6 @@ class AppManager {
     var _a;
     return ((_a = this.room) == null ? void 0 : _a.uid) || "";
   }
-  get members() {
-    return serializeRoomMembers(this.displayer.state.roomMembers);
-  }
   getMainViewSceneDir() {
     const scenePath = this.store.getMainViewScenePath();
     if (scenePath) {
@@ -2924,13 +2936,17 @@ class AppManager {
         this.appCreateQueue.emitReady();
       }
       const appsWithCreatedAt = appIds.map((appId) => {
-        return {
-          id: appId,
-          createdAt: apps[appId].createdAt
-        };
+        if (apps[appId].setup) {
+          return {
+            id: appId,
+            createdAt: apps[appId].createdAt
+          };
+        } else {
+          return {};
+        }
       });
       for (const { id: id2 } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
-        if (!this.appProxies.has(id2) && !this.appStatus.has(id2)) {
+        if (id2 && !this.appProxies.has(id2) && !this.appStatus.has(id2)) {
           const app = apps[id2];
           try {
             const appAttributes = this.attributes[id2];
@@ -2973,11 +2989,11 @@ class AppManager {
     mainView.disableCameraTransform = disableCameraTransform;
     wait(30).then(() => {
       mainView.divElement = divElement;
+      emitter.emit("mainViewMounted");
     });
     if (!mainView.focusScenePath) {
       this.setMainViewFocusPath();
     }
-    emitter.emit("mainViewMounted");
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -3162,6 +3178,7 @@ class AppManager {
     this.sideEffectManager.flushAll();
     this.sceneIndex$.destroy();
     this.focused$.destroy();
+    this.members$.destroy();
   }
 }
 /*! *****************************************************************************
@@ -4006,7 +4023,7 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var shadowStyles = /* @__PURE__ */ (() => '.tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.telebox-body-wrap {\n  color: #191919;\n  color: var(--tele-box-color, #191919);\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background-color: #f9f9f9;\n  background-color: var(--tele-manager-container-background, #f9f9f9);\n}\n.telebox-box-stage {\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n  background-color: #fff;\n  background-color: var(--tele-manager-stage-background, #fff);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  color: #191919;\n  color: var(--tele-box-footer-color, #191919);\n  background-color: #fff;\n  background-color: var(--tele-box-footer-background, #fff);\n}\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-color-dark, #e9e9e9);\n}\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-manager-container-background-dark, #25282e);\n}\n.telebox-color-scheme-dark .telebox-box-stage {\n  background-color: #272a30;\n  background-color: var(--tele-manager-stage-background-dark, #272a30);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}\n.telebox-color-scheme-dark .telebox-footer-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-footer-color-dark, #e9e9e9);\n  background-color: #383b42;\n  background-color: var(--tele-box-footer-background-dark, #383b42);\n}')();
+var shadowStyles = /* @__PURE__ */ (() => '.tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.telebox-body-wrap {\n  color: #191919;\n  color: var(--tele-boxColor, #191919);\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background-color: #f9f9f9;\n  background-color: var(--tele-boxContainerBackground, #f9f9f9);\n}\n.telebox-box-stage {\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n  background-color: #fff;\n  background-color: var(--tele-boxStageBackground, #fff);\n  boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  boxShadow: var(--tele-boxStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  color: #191919;\n  color: var(--tele-boxFooterColor, #191919);\n  background-color: #fff;\n  background-color: var(--tele-boxFooterBackground, #fff);\n}\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-boxColor, #e9e9e9);\n}\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-boxContainerBackground, #25282e);\n}\n.telebox-color-scheme-dark .telebox-box-stage {\n  background-color: #272a30;\n  background-color: var(--tele-boxStageBackground, #272a30);\n  boxShadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  boxShadow: var(--tele-boxStageShadow, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}\n.telebox-color-scheme-dark .telebox-footer-wrap {\n  color: #e9e9e9;\n  color: var(--tele-boxFooterColor, #e9e9e9);\n  background-color: #383b42;\n  background-color: var(--tele-boxFooterBackground, #383b42);\n}')();
 var TELE_BOX_COLOR_SCHEME = /* @__PURE__ */ ((TELE_BOX_COLOR_SCHEME2) => {
   TELE_BOX_COLOR_SCHEME2["Light"] = "light";
   TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
@@ -4165,9 +4182,9 @@ class DefaultTitleBar {
           }
         });
       }), "render-state-btns");
-      this.sideEffect.addEventListener($buttonsContainer, "pointerup", (ev) => {
+      this.sideEffect.addEventListener($buttonsContainer, "click", (ev) => {
         var _a;
-        if (!ev.isPrimary || this.readonly$.value) {
+        if (this.readonly$.value) {
           return;
         }
         const target = ev.target;
@@ -4891,7 +4908,8 @@ class TeleBoxCollector {
     darkMode$,
     namespace = "telebox",
     styles: styles2 = {},
-    root$
+    root,
+    onClick
   }) {
     this._sideEffect = new SideEffectManager();
     this.namespace = namespace;
@@ -4906,10 +4924,6 @@ class TeleBoxCollector {
       $collector: el$
     };
     withValueEnhancer(this, valConfig, valManager);
-    const propsValConfig = {
-      root: root$
-    };
-    withReadonlyValueEnhancer(this, propsValConfig);
     const myReadonlyValConfig = {
       rect: rect$,
       visible: visible$
@@ -4918,9 +4932,13 @@ class TeleBoxCollector {
     el$.value.className = this.wrapClassName("collector");
     el$.value.style.backgroundImage = `url('${collectorSVG}')`;
     this._sideEffect.addDisposer(el$.subscribe(($collector) => {
-      this._sideEffect.addEventListener($collector, "pointerup", (ev) => {
-        if (ev.isPrimary && !readonly$.value) {
-          minimized$.setValue(false);
+      this._sideEffect.add(() => {
+        root.appendChild($collector);
+        return () => $collector.remove();
+      }, "telebox-collector-mount");
+      this._sideEffect.addEventListener($collector, "click", () => {
+        if (!readonly$.value) {
+          onClick == null ? void 0 : onClick();
         }
       }, {}, "telebox-collector-click");
       this._sideEffect.addDisposer([
@@ -4942,13 +4960,8 @@ class TeleBoxCollector {
             }
           });
         }),
-        root$.subscribe((root) => {
-          if (root) {
-            root.appendChild($collector);
-          }
-        }),
-        combine([minimized$, root$]).subscribe(([minimized, root]) => {
-          if (minimized && root) {
+        minimized$.subscribe((minimized) => {
+          if (minimized) {
             const { x: x2, y: y2, width, height } = $collector.getBoundingClientRect();
             const rootRect = root.getBoundingClientRect();
             rect$.setValue({
@@ -5077,6 +5090,7 @@ const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
 class TeleBoxManager {
   constructor({
     root = null,
+    fullscreen = false,
     prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
     minimized = false,
     maximized = false,
@@ -5088,7 +5102,8 @@ class TeleBoxManager {
     containerStyle = "",
     stageStyle = "",
     defaultBoxBodyStyle = null,
-    defaultBoxStageStyle = null
+    defaultBoxStageStyle = null,
+    theme = {}
   } = {}) {
     this.events = new Emittery();
     this._sideEffect = new SideEffectManager();
@@ -5097,14 +5112,19 @@ class TeleBoxManager {
     this._sideEffect.addDisposer(() => valManager.destroy());
     const root$ = new Val(root);
     const readonly$ = new Val(readonly);
-    const minimized$ = new Val(minimized);
-    const maximized$ = new Val(maximized);
     const fence$ = new Val(fence);
     const containerStyle$ = new Val(containerStyle);
     const stageStyle$ = new Val(stageStyle);
     const stageRatio$ = new Val(stageRatio);
     const defaultBoxBodyStyle$ = new Val(defaultBoxBodyStyle);
     const defaultBoxStageStyle$ = new Val(defaultBoxStageStyle);
+    const fullscreen$ = new Val(fullscreen);
+    const input_minimized$ = new Val(minimized);
+    const input_maximized$ = new Val(maximized);
+    const maximized$ = combine([input_maximized$, fullscreen$], ([maximized2, fullscreen2]) => fullscreen2 ? true : maximized2);
+    const minimized$ = combine([input_minimized$, fullscreen$], ([minimized2, fullscreen2]) => fullscreen2 ? false : minimized2);
+    this.setMaximized = (maximized2, skipUpdate) => input_maximized$.setValue(maximized2, skipUpdate);
+    this.setMinimized = (minimized2, skipUpdate) => input_minimized$.setValue(minimized2, skipUpdate);
     const rootRect$ = new Val({
       x: 0,
       y: 0,
@@ -5162,27 +5182,21 @@ class TeleBoxManager {
     }));
     const darkMode$ = combine([prefersDark$, prefersColorScheme$], ([prefersDark, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark : prefersColorScheme2 === "dark");
     const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
-    this.collector = collector != null ? collector : new TeleBoxCollector({
-      minimized$,
-      readonly$,
-      darkMode$,
-      namespace,
-      root$
-    });
     const readonlyValConfig = {
       darkMode: darkMode$,
       state: state$,
       root: root$,
       rootRect: rootRect$,
-      stageRect: stageRect$
+      stageRect: stageRect$,
+      minimized: minimized$,
+      maximized: maximized$
     };
     withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
     const valConfig = {
+      fullscreen: fullscreen$,
       prefersColorScheme: prefersColorScheme$,
       readonly: readonly$,
       fence: fence$,
-      minimized: minimized$,
-      maximized: maximized$,
       stageRatio: stageRatio$,
       containerStyle: containerStyle$,
       stageStyle: stageStyle$,
@@ -5218,6 +5232,7 @@ class TeleBoxManager {
     this._sideEffect.addEventListener(window, "pointerdown", checkFocusBox, true);
     this.$container = document.createElement("div");
     this.$container.className = this.wrapClassName("manager-container");
+    this.setTheme(theme);
     this.$stage = document.createElement("div");
     this.$stage.className = this.wrapClassName("manager-stage");
     this.$container.appendChild(this.$stage);
@@ -5226,11 +5241,17 @@ class TeleBoxManager {
         this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
         this.$container.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
       }),
+      fullscreen$.subscribe((fullscreen2) => {
+        this.$container.classList.toggle(this.wrapClassName("is-fullscreen"), Boolean(fullscreen2));
+      }),
+      combine([this.boxes$, fullscreen$], ([boxes, fullscreen2]) => fullscreen2 === "no-titlebar" || fullscreen2 === true && boxes.length <= 1).subscribe((hideSingleTabTitlebar) => {
+        this.$container.classList.toggle(this.wrapClassName("hide-fullscreen-titlebar"), hideSingleTabTitlebar);
+      }),
       maximized$.subscribe((maximized2) => {
-        this.$container.classList.toggle("is-maximized", maximized2);
+        this.$container.classList.toggle(this.wrapClassName("is-maximized"), maximized2);
       }),
       minimized$.subscribe((minimized2) => {
-        this.$container.classList.toggle("is-minimized", minimized2);
+        this.$container.classList.toggle(this.wrapClassName("is-minimized"), minimized2);
       }),
       containerStyle$.subscribe((containerStyle2) => {
         this.$container.style.cssText = containerStyle2;
@@ -5252,6 +5273,14 @@ class TeleBoxManager {
         }
       })
     ]);
+    this.collector = collector != null ? collector : new TeleBoxCollector({
+      minimized$,
+      readonly$,
+      darkMode$,
+      namespace,
+      root: this.$container,
+      onClick: () => input_minimized$.setValue(false)
+    });
     this.titleBar = new MaxTitleBar({
       namespace: this.namespace,
       title$: derive(this.topBox$, (topBox) => (topBox == null ? void 0 : topBox.title) || ""),
@@ -5264,11 +5293,11 @@ class TeleBoxManager {
       onEvent: (event) => {
         switch (event.type) {
           case TELE_BOX_DELEGATE_EVENT.Maximize: {
-            maximized$.setValue(!maximized$.value);
+            this.setMaximized(!maximized$.value);
             break;
           }
           case TELE_BOX_DELEGATE_EVENT.Minimize: {
-            minimized$.setValue(true);
+            this.setMinimized(true);
             break;
           }
           case TELE_BOX_EVENT.Close: {
@@ -5441,6 +5470,12 @@ class TeleBoxManager {
     }
     return deletedBoxes;
   }
+  setTheme(theme) {
+    Object.keys(theme).forEach((key) => {
+      var _a;
+      this.$container.style.setProperty(`--tele-${key}`, (_a = theme[key]) != null ? _a : null);
+    });
+  }
   mount(root) {
     this._root$.setValue(root);
   }
@@ -5772,6 +5807,9 @@ class BoxManager {
     if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageStyle) {
       initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
     }
+    if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.fullscreen) {
+      initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
+    }
     const manager = new TeleBoxManager(initManagerState);
     if (this.teleBoxManager) {
       this.teleBoxManager.destroy();
@@ -6482,16 +6520,16 @@ class Cursor {
     this.cursorManager = cursorManager;
     this.wrapper = wrapper;
     this.move = (position) => {
-      var _a;
+      var _a, _b;
       if (position.type === "main") {
-        const rect = this.cursorManager.wrapperRect;
+        const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
         if (this.component && rect) {
           this.autoHidden();
           this.moveCursor(position, rect, this.manager.mainView);
         }
       } else {
         const focusView = this.cursorManager.focusView;
-        const viewRect = (_a = focusView == null ? void 0 : focusView.divElement) == null ? void 0 : _a.getBoundingClientRect();
+        const viewRect = (_b = focusView == null ? void 0 : focusView.divElement) == null ? void 0 : _b.getBoundingClientRect();
         const viewCamera = focusView == null ? void 0 : focusView.camera;
         if (focusView && viewRect && viewCamera && this.component) {
           this.autoHidden();
@@ -6691,7 +6729,7 @@ class CursorManager {
           return;
       }
       this.updateCursor(this.getType(event), event.clientX, event.clientY);
-    }, 16);
+    }, 48);
     this.getPoint = (view, clientX, clientY) => {
       var _a2;
       const rect = (_a2 = view == null ? void 0 : view.divElement) == null ? void 0 : _a2.getBoundingClientRect();
@@ -6752,6 +6790,7 @@ class CursorManager {
         wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
       };
     });
+    this.updateContainerRect();
   }
   setMainViewDivElement(div) {
     this.mainViewElement = div;
@@ -6781,7 +6820,7 @@ class CursorManager {
   }
   updateContainerRect() {
     var _a, _b;
-    this.wrapperRect = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    this.wrapperRect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     this.playgroundRect = (_b = WindowManager.playground) == null ? void 0 : _b.getBoundingClientRect();
   }
   deleteCursor(uid) {
@@ -16532,15 +16571,15 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.29";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.27", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.31";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.29", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "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.27", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "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.29", "emittery": "^0.11.0", "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", "@playwright/test": "^1.23.0", "@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/node": "^18.0.0", "@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", "vite-plugin-dts": "^1.2.0", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     var _a;
@@ -16596,7 +16635,8 @@ const _WindowManager = class extends InvisiblePlugin {
       prefersColorScheme: params.prefersColorScheme,
       stageRatio: _WindowManager.containerSizeRatio,
       containerStyle: params.containerStyle,
-      stageStyle: params.stageStyle
+      stageStyle: params.stageStyle,
+      fullscreen: params.fullscreen
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {