@netless/window-manager 0.4.62 → 0.4.63

package/dist/index.mjs

@@ -142,7 +142,7 @@ class AppCreateQueue {
     }
   }
 }
-const emitter = new Emittery();
+const internalEmitter = new Emittery();
 const DatabaseName = "__WindowManagerAppCache";
 let db$1;
 let store$1;
@@ -324,9 +324,9 @@ class AppRegister {
       return app;
     });
     if (params.addHooks) {
-      const emitter2 = this.createKindEmitter(params.kind);
-      if (emitter2) {
-        params.addHooks(emitter2);
+      const emitter = this.createKindEmitter(params.kind);
+      if (emitter) {
+        params.addHooks(emitter);
       }
     }
   }
@@ -341,13 +341,13 @@ class AppRegister {
     }
   }
   async notifyApp(kind2, event, payload) {
-    const emitter2 = this.kindEmitters.get(kind2);
-    await (emitter2 == null ? void 0 : emitter2.emit(event, payload));
+    const emitter = this.kindEmitters.get(kind2);
+    await (emitter == null ? void 0 : emitter.emit(event, payload));
   }
   createKindEmitter(kind2) {
     if (!this.kindEmitters.has(kind2)) {
-      const emitter2 = new Emittery();
-      this.kindEmitters.set(kind2, emitter2);
+      const emitter = new Emittery();
+      this.kindEmitters.set(kind2, emitter);
     }
     return this.kindEmitters.get(kind2);
   }
@@ -394,7 +394,7 @@ const removeScenes = (room, scenePath, index2) => {
   }
 };
 const addEmitterOnceListener = (event, listener) => {
-  emitter.once(event).then(listener);
+  internalEmitter.once(event).then(listener);
 };
 debounce((callbacks2, mode) => {
   callbacks2.emit("mainViewModeChange", mode);
@@ -538,12 +538,12 @@ class AppListeners {
       this.manager.mainView.moveCameraToContain(payload);
     };
     this.cursorMoveHandler = (payload) => {
-      emitter.emit("cursorMove", payload);
+      internalEmitter.emit("cursorMove", payload);
     };
     this.rootDirRemovedHandler = () => {
       this.manager.createRootDirScenesCallback();
       this.manager.mainViewProxy.rebind();
-      emitter.emit("rootDirRemoved");
+      internalEmitter.emit("rootDirRemoved");
     };
     this.refreshHandler = () => {
       this.manager.windowManger._refresh();
@@ -669,13 +669,6 @@ const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
 };
 const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 onObjectByEvent(UpdateEventKind.Inserted);
-const plainObjectKeys = Object.keys;
-function isRef(e2) {
-  return Boolean(has(e2, "__isRef"));
-}
-function makeRef(v2) {
-  return { k: genUID(), v: v2, __isRef: true };
-}
 class StorageEvent {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set();
@@ -693,6 +686,13 @@ class StorageEvent {
     this.listeners.delete(listener);
   }
 }
+const plainObjectKeys = Object.keys;
+function isRef(e2) {
+  return Boolean(has(e2, "__isRef"));
+}
+function makeRef(v2) {
+  return { k: genUID(), v: v2, __isRef: true };
+}
 const STORAGE_NS = "_WM-STORAGE_";
 class Storage {
   constructor(context, id2, defaultState) {
@@ -1468,7 +1468,7 @@ class AppProxy {
     } else {
       throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
     }
-    emitter.emit("updateManagerRect");
+    internalEmitter.emit("updateManagerRect");
     return {
       appId: this.id,
       app: appImpl
@@ -1487,7 +1487,7 @@ class AppProxy {
     const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
     this.appContext = context;
     try {
-      emitter.once(`${appId}${Events.WindowCreated}`).then(async () => {
+      internalEmitter.once(`${appId}${Events.WindowCreated}`).then(async () => {
         var _a2;
         let boxInitState;
         if (!skipUpdate) {
@@ -1703,7 +1703,7 @@ class AppProxy {
       console.error("[WindowManager]: notifyApp error", error2.message, error2.stack);
     }
     this.appEmitter.clearListeners();
-    emitter.emit(`destroy-${this.id}`, { error });
+    internalEmitter.emit(`destroy-${this.id}`, { error });
     if (needCloseBox) {
       (_a = this.boxManager) == null ? void 0 : _a.closeBox(this.id, skipUpdate);
     }
@@ -1786,7 +1786,7 @@ class MainViewProxy {
     this.sideEffectManager = new SideEffectManager();
     this.startListenWritableChange = () => {
       this.sideEffectManager.add(() => {
-        return emitter.on("writableChange", (isWritable) => {
+        return internalEmitter.on("writableChange", (isWritable) => {
           if (isWritable) {
             this.ensureCameraAndSize();
           }
@@ -1847,7 +1847,7 @@ class MainViewProxy {
     };
     this.mainView = this.createMainView();
     this.moveCameraSizeByAttributes();
-    emitter.once("mainViewMounted").then(() => {
+    internalEmitter.once("mainViewMounted").then(() => {
       this.addMainViewListener();
       this.start();
       this.ensureCameraAndSize();
@@ -1857,13 +1857,13 @@ class MainViewProxy {
       this.sizeChangeHandler(this.mainViewSize);
     };
     this.sideEffectManager.add(() => {
-      return emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+      return internalEmitter.on("playgroundSizeChange", playgroundSizeChangeListener);
     });
     this.sideEffectManager.add(() => {
-      return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
+      return internalEmitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
     });
     this.sideEffectManager.add(() => {
-      return emitter.on("startReconnect", () => {
+      return internalEmitter.on("startReconnect", () => {
         if (!this.didRelease) {
           this.mainView.release();
         }
@@ -2060,13 +2060,13 @@ class RedoUndo {
         this.disposeViewCallbacks(view);
       }
     };
-    emitter.on("focusedChange", (changed) => {
+    internalEmitter.on("focusedChange", (changed) => {
       this.disposePrevFocusViewRedoUndoListeners(changed.prev);
       setTimeout(() => {
         this.addRedoUndoListeners(changed.focused);
       }, 0);
     });
-    emitter.on("rootDirRemoved", () => {
+    internalEmitter.on("rootDirRemoved", () => {
       this.disposePrevFocusViewRedoUndoListeners(context.focus());
       this.addRedoUndoListeners(context.focus());
     });
@@ -2138,7 +2138,7 @@ class AppManager {
         onAddScene: this.onSceneChange,
         onRemoveScene: async (node, name) => {
           await this.onSceneChange(node);
-          emitter.emit("rootDirSceneRemoved", name);
+          internalEmitter.emit("rootDirSceneRemoved", name);
         }
       });
       if (this.callbacksNode) {
@@ -2161,7 +2161,7 @@ class AppManager {
         }
       }, 100);
       return new Promise((resolve, reject) => {
-        emitter.once("rootDirSceneRemoved").then((name) => {
+        internalEmitter.once("rootDirSceneRemoved").then((name) => {
           if (name === scene) {
             resolve(true);
           }
@@ -2186,7 +2186,7 @@ class AppManager {
     this.emitMainViewScenesChange = (length) => {
       return Promise.all([
         callbacks$1.emit("mainViewScenesLengthChange", length),
-        emitter.emit("changePageState")
+        internalEmitter.emit("changePageState")
       ]);
     };
     this.updateSceneState = (node) => {
@@ -2255,7 +2255,7 @@ class AppManager {
     this.onMainViewIndexChange = (index2) => {
       if (index2 !== void 0 && this._prevSceneIndex !== index2) {
         callbacks$1.emit("mainViewSceneIndexChange", index2);
-        emitter.emit("changePageState");
+        internalEmitter.emit("changePageState");
         if (this.callbacksNode) {
           this.updateSceneState(this.callbacksNode);
         }
@@ -2266,7 +2266,7 @@ class AppManager {
       var _a;
       if (this._prevFocused !== focused) {
         callbacks$1.emit("focusedChange", focused);
-        emitter.emit("focusedChange", { focused, prev: this._prevFocused });
+        internalEmitter.emit("focusedChange", { focused, prev: this._prevFocused });
         this._prevFocused = focused;
         if (focused !== void 0) {
           (_a = this.boxManager) == null ? void 0 : _a.focusBox({ appId: focused });
@@ -2280,6 +2280,7 @@ class AppManager {
       }
     };
     this.attributesUpdateCallback = debounce((apps) => this._attributesUpdateCallback(apps), 100);
+    this._appIds = [];
     this.onRegisteredChange = (registered) => {
       if (!registered)
         return;
@@ -2332,7 +2333,7 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.appEmitter.emit("roomStateChange", state);
       });
-      emitter.emit("observerIdChange", this.displayer.observerId);
+      internalEmitter.emit("observerIdChange", this.displayer.observerId);
     };
     this.displayerWritableListener = (isReadonly) => {
       var _a, _b;
@@ -2346,7 +2347,7 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.emitAppIsWritableChange();
       });
-      emitter.emit("writableChange", isWritable);
+      internalEmitter.emit("writableChange", isWritable);
     };
     this.updateSceneIndex = () => {
       const scenePath = this.store.getMainViewScenePath();
@@ -2376,7 +2377,7 @@ class AppManager {
     this.appListeners.addListeners();
     this.refresher = reconnectRefresher;
     this.refresher.setRoom(this.room);
-    this.refresher.setContext({ emitter });
+    this.refresher.setContext({ emitter: internalEmitter });
     this.sideEffectManager.add(() => {
       return () => {
         var _a, _b, _c;
@@ -2388,14 +2389,14 @@ class AppManager {
         (_c = this.callbacksNode) == null ? void 0 : _c.dispose();
       };
     });
-    emitter.once("onCreated").then(() => this.onCreated());
-    emitter.on("onReconnected", () => this.onReconnected());
+    internalEmitter.once("onCreated").then(() => this.onCreated());
+    internalEmitter.on("onReconnected", () => this.onReconnected());
     if (isPlayer(this.displayer)) {
-      emitter.on("seekStart", this.onPlayerSeekStart);
-      emitter.on("seek", this.onPlayerSeekDone);
+      internalEmitter.on("seekStart", this.onPlayerSeekStart);
+      internalEmitter.on("seek", this.onPlayerSeekDone);
     }
-    emitter.on("removeScenes", this.onRemoveScenes);
-    emitter.on("setReadonly", this.onReadonlyChanged);
+    internalEmitter.on("removeScenes", this.onRemoveScenes);
+    internalEmitter.on("setReadonly", this.onReadonlyChanged);
     this.createRootDirScenesCallback();
     appRegister.setSyncRegisterApp((payload) => {
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
@@ -2410,7 +2411,7 @@ class AppManager {
       }
     }
     this.mainViewProxy.rebind();
-    emitter.emit("rootDirRemoved");
+    internalEmitter.emit("rootDirRemoved");
     this.updateRootDirRemoving(false);
   }
   get eventName() {
@@ -2448,7 +2449,7 @@ class AppManager {
   async onCreated() {
     var _a, _b, _c, _d, _e, _f;
     await this.attributesUpdateCallback(this.attributes.apps);
-    emitter.emit("updateManagerRect");
+    internalEmitter.emit("updateManagerRect");
     boxEmitter.on("move", this.onBoxMove);
     boxEmitter.on("resize", this.onBoxResize);
     boxEmitter.on("focus", this.onBoxFocus);
@@ -2505,19 +2506,27 @@ class AppManager {
       return () => redoUndo.destroy();
     });
   }
+  notifyAppsChange(appIds) {
+    if (this._appIds.length !== appIds.length || !this._appIds.every((id2) => appIds.includes(id2))) {
+      this._appIds = appIds;
+      callbacks$1.emit("appsChange", appIds);
+    }
+  }
   async _attributesUpdateCallback(apps) {
     if (apps && WindowManager.container) {
       const appIds = Object.keys(apps);
       if (appIds.length === 0) {
         this.appCreateQueue.emitReady();
       }
-      const appsWithCreatedAt = appIds.map((appId) => {
+      const appsWithCreatedAt = orderBy(appIds.map((appId) => {
         return {
           id: appId,
           createdAt: apps[appId].createdAt
         };
-      });
-      for (const { id: id2 } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
+      }), "createdAt", "asc");
+      const orderedAppIds = appsWithCreatedAt.map(({ id: id2 }) => id2);
+      this.notifyAppsChange(orderedAppIds);
+      for (const id2 of orderedAppIds) {
         if (!this.appProxies.has(id2) && !this.appStatus.has(id2)) {
           const app = apps[id2];
           try {
@@ -2562,7 +2571,7 @@ class AppManager {
     if (!mainView.focusScenePath) {
       this.setMainViewFocusPath();
     }
-    emitter.emit("mainViewMounted");
+    internalEmitter.emit("mainViewMounted");
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -2741,7 +2750,7 @@ class AppManager {
     this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
     this.appListeners.removeListeners();
     boxEmitter.clearListeners();
-    emitter.clearListeners();
+    internalEmitter.clearListeners();
     if (this.appProxies.size) {
       this.appProxies.forEach((appProxy) => {
         appProxy.destroy(true, false, true);
@@ -2803,11 +2812,11 @@ const createInvisiblePlugin = async (room) => {
 };
 const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
 class ContainerResizeObserver {
-  constructor(emitter2) {
-    this.emitter = emitter2;
+  constructor(emitter) {
+    this.emitter = emitter;
   }
-  static create(container, sizer, wrapper, emitter2) {
-    const containerResizeObserver = new ContainerResizeObserver(emitter2);
+  static create(container, sizer, wrapper, emitter) {
+    const containerResizeObserver = new ContainerResizeObserver(emitter);
     containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
     return containerResizeObserver;
   }
@@ -3245,24 +3254,24 @@ var eventemitter3 = { exports: {} };
     this.context = context;
     this.once = once || false;
   }
-  function addListener(emitter2, event, fn, context, once) {
+  function addListener(emitter, event, fn, context, once) {
     if (typeof fn !== "function") {
       throw new TypeError("The listener must be a function");
     }
-    var listener = new EE(fn, context || emitter2, once), evt = prefix ? prefix + event : event;
-    if (!emitter2._events[evt])
-      emitter2._events[evt] = listener, emitter2._eventsCount++;
-    else if (!emitter2._events[evt].fn)
-      emitter2._events[evt].push(listener);
+    var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
+    if (!emitter._events[evt])
+      emitter._events[evt] = listener, emitter._eventsCount++;
+    else if (!emitter._events[evt].fn)
+      emitter._events[evt].push(listener);
     else
-      emitter2._events[evt] = [emitter2._events[evt], listener];
-    return emitter2;
+      emitter._events[evt] = [emitter._events[evt], listener];
+    return emitter;
   }
-  function clearEvent(emitter2, evt) {
-    if (--emitter2._eventsCount === 0)
-      emitter2._events = new Events2();
+  function clearEvent(emitter, evt) {
+    if (--emitter._eventsCount === 0)
+      emitter._events = new Events2();
     else
-      delete emitter2._events[evt];
+      delete emitter._events[evt];
   }
   function EventEmitter2() {
     this._events = new Events2();
@@ -6182,7 +6191,7 @@ class TeleBoxManager {
     return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
   }
 }
-const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) => {
+const createBoxManager = (manager, callbacks2, emitter, boxEmitter2, options) => {
   return new BoxManager({
     safeSetAttributes: (attributes) => manager.safeSetAttributes(attributes),
     getMainView: () => manager.mainView,
@@ -6204,7 +6213,7 @@ const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) =
       return (_a = manager.appManager) == null ? void 0 : _a.store.setAppFocus(appId, true);
     },
     callbacks: callbacks2,
-    emitter: emitter2,
+    emitter,
     boxEmitter: boxEmitter2
   }, options);
 };
@@ -6212,11 +6221,11 @@ class BoxManager {
   constructor(context, createTeleBoxManagerConfig) {
     this.context = context;
     this.createTeleBoxManagerConfig = createTeleBoxManagerConfig;
-    const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
+    const { emitter, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
     this.teleBoxManager._state$.reaction((state) => {
       callbacks2.emit("boxStateChange", state);
-      emitter2.emit("boxStateChange", state);
+      emitter.emit("boxStateChange", state);
     });
     this.teleBoxManager._darkMode$.reaction((darkMode) => {
       callbacks2.emit("darkModeChange", darkMode);
@@ -6277,8 +6286,8 @@ class BoxManager {
     this.teleBoxManager.events.on("z_index", (box) => {
       this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
     });
-    emitter2.on("playgroundSizeChange", () => this.updateManagerRect());
-    emitter2.on("updateManagerRect", () => this.updateManagerRect());
+    emitter.on("playgroundSizeChange", () => this.updateManagerRect());
+    emitter.on("updateManagerRect", () => this.updateManagerRect());
   }
   get mainView() {
     return this.context.getMainView();
@@ -7356,10 +7365,10 @@ class CursorManager {
       this.setupWrapper(wrapper);
     }
     this.sideEffectManager.add(() => {
-      return emitter.on("cursorMove", this.onCursorMove);
+      return internalEmitter.on("cursorMove", this.onCursorMove);
     });
     this.sideEffectManager.add(() => {
-      return emitter.on("playgroundSizeChange", () => this.updateContainerRect());
+      return internalEmitter.on("playgroundSizeChange", () => this.updateContainerRect());
     });
     if (applianceIcons) {
       this.applianceIcons = __spreadValues(__spreadValues({}, ApplianceMap), applianceIcons);
@@ -7458,17 +7467,15 @@ class CursorManager {
 class PageStateImpl {
   constructor(manager) {
     this.manager = manager;
-    emitter.on("changePageState", () => {
+    internalEmitter.on("changePageState", () => {
       callbacks$1.emit("pageStateChange", this.toObject());
     });
   }
   get index() {
-    var _a;
-    return ((_a = this.manager) == null ? void 0 : _a.store.getMainViewSceneIndex()) || 0;
+    return this.manager.store.getMainViewSceneIndex() || 0;
   }
   get length() {
-    var _a;
-    return ((_a = this.manager) == null ? void 0 : _a.mainViewScenesLength) || 0;
+    return this.manager.mainViewScenesLength || 0;
   }
   toObject() {
     const index2 = this.index >= this.length ? this.length - 1 : this.index;
@@ -7629,16 +7636,16 @@ const delegateRemoveScenes = (room, manager) => {
       (_a = manager.appManager) == null ? void 0 : _a.updateRootDirRemoving(true);
     }
     const result = originRemoveScenes.call(room, scenePath);
-    emitter.emit("removeScenes", { scenePath, index: index2 });
+    internalEmitter.emit("removeScenes", { scenePath, index: index2 });
     return result;
   };
 };
 const delegateSeekToProgressTime = (player) => {
   const originSeek = player.seekToProgressTime;
   async function newSeek(time2) {
-    await emitter.emit("seekStart");
+    await internalEmitter.emit("seekStart");
     const seekResult = await originSeek.call(player, time2);
-    emitter.emit("seek", time2);
+    internalEmitter.emit("seek", time2);
     return seekResult;
   }
   player.seekToProgressTime = newSeek;
@@ -17453,11 +17460,11 @@ IframeBridge.hiddenClass = "netless-iframe-brdige-hidden";
 IframeBridge.emitter = new Emittery();
 IframeBridge.displayer = null;
 IframeBridge.alreadyCreate = false;
-const reconnectRefresher = new ReconnectRefresher({ emitter });
+const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.62";
+    this.version = "0.4.63";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.16", "@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", "jspdf": "^2.5.1", "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.43" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
@@ -17510,6 +17517,7 @@ const _WindowManager = class extends InvisiblePlugin {
       _WindowManager.containerSizeRatio = containerSizeRatio;
     }
     await manager.ensureAttributes();
+    manager._fullscreen = params.fullscreen;
     manager.appManager = new AppManager(manager);
     manager._pageState = new PageStateImpl(manager.appManager);
     manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
@@ -17520,7 +17528,7 @@ const _WindowManager = class extends InvisiblePlugin {
       manager.bindContainer(params.container);
     }
     replaceRoomFunction(room, manager);
-    emitter.emit("onCreated");
+    internalEmitter.emit("onCreated");
     _WindowManager.isCreated = true;
     try {
       await initDb();
@@ -17551,7 +17559,12 @@ const _WindowManager = class extends InvisiblePlugin {
     }
     return manager;
   }
-  static initContainer(manager, container, chessboard, overwriteStyles) {
+  static initContainer(manager, container, params) {
+    const {
+      chessboard,
+      overwriteStyles,
+      fullscreen
+    } = params;
     if (!_WindowManager.container) {
       _WindowManager.container = container;
     }
@@ -17560,13 +17573,17 @@ const _WindowManager = class extends InvisiblePlugin {
     if (chessboard) {
       sizer.classList.add("netless-window-manager-chess-sizer");
     }
+    if (fullscreen) {
+      sizer.classList.add("netless-window-manager-fullscreen");
+    }
     if (overwriteStyles) {
       const style2 = document.createElement("style");
       style2.textContent = overwriteStyles;
       playground.appendChild(style2);
     }
-    manager.containerResizeObserver = ContainerResizeObserver.create(playground, sizer, wrapper, emitter);
+    manager.containerResizeObserver = ContainerResizeObserver.create(playground, sizer, wrapper, internalEmitter);
     _WindowManager.wrapper = wrapper;
+    _WindowManager.sizer = sizer;
     return mainViewElement;
   }
   static get registered() {
@@ -17584,11 +17601,11 @@ const _WindowManager = class extends InvisiblePlugin {
     } else {
       if (_WindowManager.params) {
         const params = _WindowManager.params;
-        const mainViewElement = _WindowManager.initContainer(this, container, params.chessboard, params.overwriteStyles);
+        const mainViewElement = _WindowManager.initContainer(this, container, params);
         if (this.boxManager) {
           this.boxManager.destroy();
         }
-        const boxManager = createBoxManager(this, callbacks$1, emitter, boxEmitter, {
+        const boxManager = createBoxManager(this, callbacks$1, internalEmitter, boxEmitter, {
           collectorContainer: params.collectorContainer,
           collectorStyles: params.collectorStyles,
           prefersColorScheme: params.prefersColorScheme
@@ -17601,7 +17618,7 @@ const _WindowManager = class extends InvisiblePlugin {
         }
       }
     }
-    emitter.emit("updateManagerRect");
+    internalEmitter.emit("updateManagerRect");
     (_c = this.appManager) == null ? void 0 : _c.refresh();
     (_d = this.appManager) == null ? void 0 : _d.resetMaximized();
     (_e = this.appManager) == null ? void 0 : _e.resetMinimized();
@@ -17627,7 +17644,7 @@ const _WindowManager = class extends InvisiblePlugin {
     if (this.appManager) {
       if (this.appManager.rootDirRemoving) {
         return new Promise((resolve, reject) => {
-          emitter.once("rootDirRemoved").then(async () => {
+          internalEmitter.once("rootDirRemoved").then(async () => {
             try {
               const appId = await this._addApp(params);
               resolve(appId);
@@ -17797,7 +17814,7 @@ const _WindowManager = class extends InvisiblePlugin {
     var _a;
     this.readonly = readonly;
     (_a = this.boxManager) == null ? void 0 : _a.setReadonly(readonly);
-    emitter.emit("setReadonly", readonly);
+    internalEmitter.emit("setReadonly", readonly);
   }
   switchMainViewToWriter() {
     var _a;
@@ -17849,6 +17866,14 @@ const _WindowManager = class extends InvisiblePlugin {
       return;
     (_a = this.boxManager) == null ? void 0 : _a.setMinimized(minimized, false);
   }
+  setFullscreen(fullscreen) {
+    var _a;
+    if (this._fullscreen !== fullscreen) {
+      this._fullscreen = fullscreen;
+      (_a = _WindowManager.sizer) == null ? void 0 : _a.classList.toggle("netless-window-manager-fullscreen", fullscreen);
+      callbacks$1.emit("fullscreenChange", fullscreen);
+    }
+  }
   get mainView() {
     if (this.appManager) {
       return this.appManager.mainViewProxy.view;
@@ -17943,6 +17968,9 @@ const _WindowManager = class extends InvisiblePlugin {
       throw new AppManagerNotInitError();
     }
   }
+  get fullscreen() {
+    return Boolean(this._fullscreen);
+  }
   queryAll() {
     var _a;
     return Array.from(((_a = this.appManager) == null ? void 0 : _a.appProxies.values()) || []);
@@ -18004,6 +18032,7 @@ const _WindowManager = class extends InvisiblePlugin {
     (_c = this.cursorManager) == null ? void 0 : _c.destroy();
     _WindowManager.container = void 0;
     _WindowManager.wrapper = void 0;
+    _WindowManager.sizer = void 0;
     _WindowManager.isCreated = false;
     if (_WindowManager.playground) {
       (_d = _WindowManager.playground.parentNode) == null ? void 0 : _d.removeChild(_WindowManager.playground);
@@ -18112,7 +18141,7 @@ const _WindowManager = class extends InvisiblePlugin {
     }
     _WindowManager.containerSizeRatio = ratio;
     this.containerSizeRatio = ratio;
-    emitter.emit("containerSizeRatioUpdate", ratio);
+    internalEmitter.emit("containerSizeRatioUpdate", ratio);
   }
   isDynamicPPT(scenes) {
     var _a, _b;