@netless/window-manager 0.4.30 → 0.4.33

package/dist/typings.d.ts

@@ -1,5 +1,5 @@
 import type Emittery from "emittery";
-import type { AnimationMode, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View } from "white-web-sdk";
+import type { AnimationMode, ApplianceNames, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View } from "white-web-sdk";
 import type { AppContext } from "./App";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
@@ -69,6 +69,7 @@ export declare type RegisterParams<AppOptions = any, SetupResult = any, Attribut
     name?: string;
 };
 export declare type AppListenerKeys = keyof AppEmitterEvent;
+export declare type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
 export type { AppContext } from "./App/AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };

package/docs/api.md

@@ -64,7 +64,7 @@ const manager = await WindowManager.mount(
 | disableCameraTransform | [optional] boolean                      |         | 禁用主白板的相机移动                   |
 | prefersColorScheme     | [optional] string                       | light   | auto, light, dark            |
 | debug                  | [optional] boolean                      | false   | 打印日志信息   
-
+| applianceIcons         | [optional] {ApplianceNames, string}     |         | 配置光标使用的教具图片           ｜
 
 <h3 id="register">WindowManager.register</h3>
 

package/docs/app-context.md

@@ -1,10 +1,11 @@
 ## AppContext
 
--   [api](#api)
+- [api](#api)
     - [view](#view)
     - [page](#page)
     - [storage](#storage)
--   [events](#events)
+- [events](#events)
+- [Advanced](#Advanced)
 
 <h2 id="api">API</h2>
 
@@ -16,6 +17,12 @@
     const appId = context.appId;
     ```
 
+- **context.isReplay**
+    
+    类型: `boolean`
+    
+    当前是否回放模式
+
 - **context.getDisplayer()**
 
     在默认情况下 `Displayer` 为白板的 `room` 实例
@@ -32,10 +39,10 @@
 
 - **context.getIsWritable()**
 
-    获取当前状态是否可写
+    获取当前状态是否可写\
+    可以通过监听 `writableChange` 事件获取可写状态的改变
 
     ```ts
-    // isWritable === (room.isWritable && box.readonly)
     const isWritable = context.getIsWritable();
     ```
 
@@ -50,46 +57,31 @@
     box.$footer;
     ```
 
-<h3 id="view">View</h3>
-
-`view` 可以理解为一块白板，可以从 `context` 中拿到这个实例并挂载到 `Dom` 中
-
-- **context.getView()**
+<h3 id="view">挂载白板</h3>
 
-    获取 `view` 实例
-
-    ```ts
-    const view = context.getView();
-    ```
+当应用想要一个可以涂画的白板，可以使用以下接口
 
 - **context.mountView()**
 
-    挂载 view 到指定 dom
+    挂载白板到指定 dom
 
     ```ts
     context.mountView(element);
     ```
 
-- **context.getScenes()**
-
-    `scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
-
-    ```ts
-    const scenes = context.getScenes();
-    ```
-
-- **context.setScenePath()**
-
-    切换当前 `view` 到指定的 `scenePath`
-
-    ```ts
-    context.setScenePath("/page/2");
-    ```
-
+**注意** 在调用 `manager` 的 `addApp` 时必须填写 `scenePath` 才可以使用 `view`
+```ts
+manager.addApp({
+    kind: "xxx",
+    options: { // 可选配置
+        scenePath: "/example-path"
+    }
+})
+```
 
 <h3 id="page">Page</h3>
 
-`Page` 是封装后 `scenes` 的一些概念
+白板有多页的概念, 可以通过以下接口添加，切换，以及删除
 
 - **context.addPage()**
 
@@ -116,10 +108,19 @@
     ```ts
     context.prevPage();
     ```
+- **context.removePage()**
+
+    删除一页
+
+    ```ts
+    context.removePage() // 默认删除当前页
+    context.removePage(1) // 也可以指定 index 删除
+    ```
 
 - **context.pageState**
 
-    获取当前所在的 `index` 和一共有多少页
+    获取当前所在的 `index` 和一共有多少页\
+    当想要监听 `pageState` 的变化时, 可以监听 `pageStateChange` 事件获取最新的 `pageState`
 
     ```ts
     context.pageState;
@@ -141,17 +142,97 @@
     context.storage
     ```
 
-- **createStorage()**
+- **context.createStorage(namespace)**
 
     同时你也可以创建多个 `storage` 实例
+    
+    返回: `Storage<State>`
 
     ```ts
-    const defaultState = { count: 0 } // 可选
-    const storage = context.createStorage("store1", defaultState);
+    type State = { count: number };
+    const defaultState = { count: 0 };
+    const storage = context.createStorage<State>("store1", defaultState);
     ```
 
+- **storage.state**
+
+  类型: `State`\
+  默认值: `defaultState`
+
+  在所有客户端之间同步的状态，调用 `storage.setState()` 来改变它。
+
+- **storage.ensureState(partialState)**
+
+  确保 `storage.state` 包含某些初始值，类似于执行了：
+
+  ```js
+  // 这段代码不能直接运行，因为 app.state 是只读的
+  storage.state = { ...partialState, ...storage.state };
+  ```
 
+  **partialState**
 
+  类型: `Partial<State>`
+
+  ```js
+  storage.state; // { a: 1 }
+  storage.ensureState({ a: 0, b: 0 });
+  storage.state; // { a: 1, b: 0 }
+  ```
+
+- **storage.setState(partialState)**
+
+  和 React 的 `setState` 类似，更新 `storage.state` 并同步到所有客户端。
+
+  当设置某个字段为 `undefined` 时，它会被从 `storage.state` 里删除。
+
+  > - 状态同步所需的时间和网络状态与数据大小有关，建议只在 state 里存储必须的数据。
+
+  **partialState**
+
+  类型: `Partial<State>`
+
+  ```js
+  storage.state; //=> { count: 0, a: 1 }
+  storage.setState({ count: storage.state.count + 1, b: 2 });
+  storage.state; //=> { count: 1, a: 1, b: 2 }
+  ```
+
+- **storage.addStateChangedListener(listener)**
+
+  它在有人调用 `storage.setState()` 后触发 (包含当前 `storage`)
+
+  返回: `() => void`
+
+  ```js
+  const disposer = storage.addStateChangedListener(diff => {
+    console.log("state changed", diff.oldValue, diff.newValue);
+    disposer(); // remove listener by calling disposer
+  });
+  ```
+
+- **context.dispatchMagixEvent(event, payload)**
+
+  向其他客户端广播事件消息
+
+  ```js
+  context.dispatchMagixEvent("click", { data: "data" });
+  ```
+
+- **context.addMagixEventListener(event, listener)**
+
+  当接收来自其他客户端的消息时(当其他客户端调用'context.dispatchMagixEvent()`时), 它会被触发
+
+  返回: `() => void` a disposer function.
+
+  ```js
+  const disposer = context.addMagixEventListener("click", ({ payload }) => {
+    console.log(payload.data);
+    disposer();
+  });
+
+  context.dispatchMagixEvent("click", { data: "data" });
+  ```
 
 <h2 id="events">events</h2>
 
@@ -203,3 +284,13 @@
         // { index: 0, length: 1 }
     });
     ```
+
+<h2 id="Advanced">Advanced</h2>
+
+- **context.getView()**
+
+    获取 `view` 实例
+
+    ```ts
+    const view = context.getView();
+    ```

package/docs/develop-app.md

@@ -49,7 +49,7 @@ const Counter: NetlessApp<{ count: number }> = {
         countDom.innerText = storage.state.count.toString();
         $content.appendChild(countDom);
 
-        // state 变化回调
+        // 监听 state 变化回调
         storage.addStateChangedListener(diff => {
             if (diff.count) {
                 // diff 会给出 newValue 和 oldValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.30",
+  "version": "0.4.33",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -45,6 +45,7 @@
     "@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",
@@ -59,7 +60,7 @@
     "svelte": "^3.42.4",
     "typescript": "^4.5.5",
     "vite": "^2.5.3",
-    "vitest": "^0.12.4",
+    "vitest": "^0.14.1",
     "white-web-sdk": "2.16.10"
   }
 }

package/pnpm-lock.yaml

@@ -16,6 +16,7 @@ specifiers:
   '@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
   emittery: ^0.9.2
@@ -36,7 +37,7 @@ specifiers:
   uuid: ^7.0.3
   video.js: '>=7'
   vite: ^2.5.3
-  vitest: ^0.12.4
+  vitest: ^0.14.1
   white-web-sdk: 2.16.10
 
 dependencies:
@@ -63,6 +64,7 @@ devDependencies:
   '@types/uuid': registry.npmmirror.com/@types/uuid/8.3.4
   '@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/4.33.0_bre6cjtjfaculj7kh43nxjxlbi
   '@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/4.33.0_hrkuebk64jiu2ut2d2sm4oylnu
+  '@vitest/ui': 0.14.1
   cypress: registry.npmmirror.com/cypress/8.7.0
   dotenv: registry.npmmirror.com/dotenv/10.0.0
   eslint: registry.npmmirror.com/eslint/7.32.0
@@ -77,7 +79,7 @@ devDependencies:
   svelte: registry.npmmirror.com/svelte/3.46.4
   typescript: registry.npmmirror.com/typescript/4.6.3
   vite: registry.npmmirror.com/vite/2.8.6_less@4.1.2
-  vitest: 0.12.4_jsdom@19.0.0+less@4.1.2
+  vitest: 0.14.1_nmqrau6oupbkt73pq2ukep6chi
   white-web-sdk: registry.npmmirror.com/white-web-sdk/2.16.10
 
 packages:
@@ -94,6 +96,10 @@ packages:
       vanilla-lazyload: 17.6.1
     dev: true
 
+  /@polka/url/1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: true
+
   /@tootallnate/once/2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -113,14 +119,20 @@ packages:
     resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
     dev: true
 
-  /@types/yauzl/2.9.2:
-    resolution: {integrity: sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==}
+  /@types/yauzl/2.10.0:
+    resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
       '@types/node': registry.npmmirror.com/@types/node/17.0.23
     dev: true
     optional: true
 
+  /@vitest/ui/0.14.1:
+    resolution: {integrity: sha512-rWhltzClVxTT9ktnS9DBQUe3RdRweP+XF1LspK5i3e+P66gn3rc2LChol3EYPYHJghL2Xsm91lvQO1pgE4vgHA==}
+    dependencies:
+      sirv: 2.0.2
+    dev: true
+
   /abab/2.0.5:
     resolution: {integrity: sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==}
     dev: true
@@ -188,7 +200,7 @@ packages:
     dev: true
 
   /check-error/1.0.2:
-    resolution: {integrity: sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=}
+    resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
     dev: true
 
   /colors/1.4.0:
@@ -236,6 +248,18 @@ packages:
       mimic-fn: 4.0.0
     dev: true
 
+  /debug/3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+    optional: true
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -547,11 +571,11 @@ packages:
     dev: true
 
   /get-func-name/2.0.0:
-    resolution: {integrity: sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=}
+    resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
     dev: true
 
-  /graceful-fs/4.2.9:
-    resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
+  /graceful-fs/4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
     optional: true
 
@@ -598,7 +622,7 @@ packages:
     dev: true
 
   /image-size/0.5.5:
-    resolution: {integrity: sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=}
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
     engines: {node: '>=0.10.0'}
     hasBin: true
     requiresBuild: true
@@ -711,10 +735,19 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /mrmime/1.0.1:
+    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
+  /ms/2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: true
+
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -727,7 +760,7 @@ packages:
     hasBin: true
     requiresBuild: true
     dependencies:
-      debug: registry.npmmirror.com/debug/3.2.7
+      debug: 3.2.7
       iconv-lite: registry.npmmirror.com/iconv-lite/0.4.24
       sax: registry.npmmirror.com/sax/1.2.4
     transitivePeerDependencies:
@@ -818,6 +851,15 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
+  /sirv/2.0.2:
+    resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.0
+    dev: true
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -847,6 +889,11 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /totalist/3.0.0:
+    resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tough-cookie/4.0.0:
     resolution: {integrity: sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==}
     engines: {node: '>=6'}
@@ -909,8 +956,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitest/0.12.4_jsdom@19.0.0+less@4.1.2:
-    resolution: {integrity: sha512-EDxdhlAt6vcu6y4VouAI60z78iCAVFnfBL4VlSQVQnGmOk5altOtIKvp3xfZ+cfo4iVHgqq1QNyf5qOFiL4leg==}
+  /vitest/0.14.1_nmqrau6oupbkt73pq2ukep6chi:
+    resolution: {integrity: sha512-2UUm6jYgkwh7Y3VKSRR8OuaNCm+iA5LPDnal7jyITN39maZK9L+JVxqjtQ39PSFo5Fl3/BgaJvER6GGHX9JLxg==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
@@ -930,7 +977,9 @@ packages:
     dependencies:
       '@types/chai': 4.3.1
       '@types/chai-subset': 1.3.3
+      '@vitest/ui': 0.14.1
       chai: 4.3.6
+      debug: 4.3.4
       jsdom: 19.0.0
       local-pkg: 0.4.1
       tinypool: 0.1.3
@@ -940,6 +989,7 @@ packages:
       - less
       - sass
       - stylus
+      - supports-color
     dev: true
 
   /w3c-hr-time/1.0.2:
@@ -2477,20 +2527,6 @@ packages:
     version: 1.11.0
     dev: true
 
-  registry.npmmirror.com/debug/3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz}
-    name: debug
-    version: 3.2.7
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: registry.npmmirror.com/ms/2.1.3
-    dev: true
-    optional: true
-
   registry.npmmirror.com/debug/3.2.7_supports-color@8.1.1:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz}
     id: registry.npmmirror.com/debug/3.2.7
@@ -2502,7 +2538,7 @@ packages:
       supports-color:
         optional: true
     dependencies:
-      ms: registry.npmmirror.com/ms/2.1.3
+      ms: 2.1.3
       supports-color: registry.npmmirror.com/supports-color/8.1.1
     dev: true
 
@@ -3086,7 +3122,7 @@ packages:
       get-stream: registry.npmmirror.com/get-stream/5.2.0
       yauzl: registry.npmmirror.com/yauzl/2.10.0
     optionalDependencies:
-      '@types/yauzl': 2.9.2
+      '@types/yauzl': 2.10.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3915,7 +3951,7 @@ packages:
     dependencies:
       universalify: registry.npmmirror.com/universalify/2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
     dev: true
 
   registry.npmmirror.com/jsprim/2.0.2:
@@ -3962,7 +3998,7 @@ packages:
       tslib: registry.npmmirror.com/tslib/2.3.1
     optionalDependencies:
       errno: 0.1.8
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       image-size: 0.5.5
       make-dir: 2.1.0
       mime: 1.6.0
@@ -4309,12 +4345,6 @@ packages:
     version: 2.1.2
     dev: true
 
-  registry.npmmirror.com/ms/2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz}
-    name: ms
-    version: 2.1.3
-    dev: true
-
   registry.npmmirror.com/mux.js/6.0.1:
     resolution: {integrity: sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/mux.js/-/mux.js-6.0.1.tgz}
     name: mux.js

package/src/App/AppProxy.ts

@@ -29,6 +29,7 @@ import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
 import { calculateNextIndex } from "../Page";
+import { boxEmitter } from "../BoxEmitter";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -342,7 +343,7 @@ export class AppProxy implements PageRemoveService {
                 }
                 case "focus": {
                     this.boxManager?.focusBox({ appId: this.id });
-                    emitter.emit("focus", { appId: this.id });
+                    boxEmitter.emit("focus", { appId: this.id });
                     break;
                 }
                 default: {