@netless/window-manager 0.4.73-beta.0 → 0.4.73

package/dist/index.mjs

@@ -22,7 +22,6 @@ import Emittery from "emittery";
 import { debounce as debounce$1, isEqual, omit, isObject as isObject$1, has, get, size as size$1, mapValues, noop as noop$2, pick, isEmpty, isInteger, orderBy, isFunction, isNumber, isNull } from "lodash";
 import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, autorun, toJS, listenDisposed, unlistenDisposed, ViewMode, AnimationMode, isPlayer, isRoom, WhiteVersion, ApplianceNames, RoomPhase, PlayerPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
-import { genUID as genUID$1, SideEffectManager as SideEffectManager$1 } from "side-effect-manager";
 import { ResizeObserver as ResizeObserver$3 } from "@juggle/resize-observer";
 import videojs from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
@@ -624,6 +623,61 @@ class BindContainerRoomPhaseInvalidError extends Error {
     this.message = "[WindowManager]: room phase only Connected can be bindContainer";
   }
 }
+const e$2 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s$2 = e$2.length, t$3 = Array(20), r$4 = () => {
+  for (let r2 = 0; r2 < 20; r2++)
+    t$3[r2] = e$2.charAt(Math.random() * s$2);
+  return t$3.join("");
+};
+class o$1 {
+  constructor() {
+    this.disposers = /* @__PURE__ */ new Map();
+  }
+  add(e2, s2 = r$4()) {
+    return this.flush(s2), this.disposers.set(s2, e2()), s2;
+  }
+  addDisposer(e2, s2 = r$4()) {
+    return this.flush(s2), this.disposers.set(s2, e2), s2;
+  }
+  addEventListener(e2, s2, t2, o2, i2 = r$4()) {
+    return this.add(() => (e2.addEventListener(s2, t2, o2), () => e2.removeEventListener(s2, t2, o2)), i2), i2;
+  }
+  setTimeout(e2, s2, t2 = r$4()) {
+    return this.add(() => {
+      const r2 = window.setTimeout(() => {
+        this.remove(t2), e2();
+      }, s2);
+      return () => window.clearTimeout(r2);
+    }, t2);
+  }
+  setInterval(e2, s2, t2 = r$4()) {
+    return this.add(() => {
+      const t3 = window.setInterval(e2, s2);
+      return () => window.clearInterval(t3);
+    }, t2);
+  }
+  remove(e2) {
+    const s2 = this.disposers.get(e2);
+    return this.disposers.delete(e2), s2;
+  }
+  flush(e2) {
+    const s2 = this.remove(e2);
+    if (s2)
+      try {
+        s2();
+      } catch (t2) {
+        console.error(t2);
+      }
+  }
+  flushAll() {
+    this.disposers.forEach((e2) => {
+      try {
+        e2();
+      } catch (s2) {
+        console.error(s2);
+      }
+    }), this.disposers.clear();
+  }
+}
 const onObjectByEvent = (event) => {
   return (object, func) => {
     if (object === void 0)
@@ -691,12 +745,12 @@ function isRef(e2) {
   return Boolean(has(e2, "__isRef"));
 }
 function makeRef(v2) {
-  return { k: genUID$1(), v: v2, __isRef: true };
+  return { k: r$4(), v: v2, __isRef: true };
 }
 const STORAGE_NS = "_WM-STORAGE_";
 class Storage {
   constructor(context, id2, defaultState) {
-    this._sideEffect = new SideEffectManager$1();
+    this._sideEffect = new o$1();
     this._destroyed = false;
     this._refMap = /* @__PURE__ */ new WeakMap();
     this._lastValue = /* @__PURE__ */ new Map();
@@ -954,9 +1008,7 @@ class AppContext {
         setTimeout(() => {
           var _a;
           (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
-          if (WindowManager.supportTeachingAidsPlugin) {
-            callbacks$1.emit("onAppViewMounted", { appId: this.appId, view });
-          }
+          callbacks$1.emit("onAppViewMounted", { appId: this.appId, view });
         }, 1e3);
       }
     };
@@ -1080,7 +1132,12 @@ class AppContext {
     return this.appProxy.kind;
   }
   dispatchAppEvent(type, value) {
-    internalEmitter.emit(`custom-${this.kind}`, { kind: this.kind, appId: this.appId, type, value });
+    internalEmitter.emit(`custom-${this.kind}`, {
+      kind: this.kind,
+      appId: this.appId,
+      type,
+      value
+    });
   }
 }
 class AppPageStateImpl {
@@ -1400,9 +1457,7 @@ class AppProxy {
       var _a2;
       if (this.view && fullPath && fullPath !== ((_a2 = this.view) == null ? void 0 : _a2.focusScenePath)) {
         setViewFocusScenePath(this.view, fullPath);
-        if (WindowManager.supportTeachingAidsPlugin) {
-          callbacks$1.emit("onAppScenePathChange", { appId: this.id, view: this.view });
-        }
+        callbacks$1.emit("onAppScenePathChange", { appId: this.id, view: this.view });
       }
     }, 50);
     this.notifyPageStateChange = debounce$1(() => {
@@ -1520,9 +1575,7 @@ class AppProxy {
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.afterSetupApp(boxInitState);
           this.fixMobileSize();
-          if (WindowManager.supportTeachingAidsPlugin) {
-            callbacks$1.emit("onAppSetup", appId);
-          }
+          callbacks$1.emit("onAppSetup", appId);
         }, SETUP_APP_DELAY);
       });
       (_a = this.boxManager) == null ? void 0 : _a.createBox({
@@ -1803,7 +1856,7 @@ class MainViewProxy {
     this.mainViewIsAddListener = false;
     this.store = this.manager.store;
     this.viewMode = this.manager.windowManger.viewMode;
-    this.sideEffectManager = new SideEffectManager$1();
+    this.sideEffectManager = new o$1();
     this.syncCamera = () => {
       if (!this.polling || this.viewMode !== ViewMode.Broadcaster)
         return;
@@ -1978,9 +2031,7 @@ class MainViewProxy {
     this.mainView.divElement = divElement;
     this.addMainViewListener();
     this.start();
-    if (WindowManager.supportTeachingAidsPlugin) {
-      callbacks$1.emit("onMainViewRebind", this.mainView);
-    }
+    callbacks$1.emit("onMainViewRebind", this.mainView);
   }
   addMainViewListener() {
     if (this.mainViewIsAddListener)
@@ -2127,7 +2178,7 @@ class AppManager {
     this.mainViewScenesLength = 0;
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
-    this.sideEffectManager = new SideEffectManager$1();
+    this.sideEffectManager = new o$1();
     this.sceneState = null;
     this.rootDirRemoving = false;
     this.onRemoveScenes = async (params) => {
@@ -2255,9 +2306,7 @@ class AppManager {
         x: payload.x,
         y: payload.y
       });
-      if (WindowManager.supportTeachingAidsPlugin) {
-        callbacks$1.emit("onBoxMove", payload);
-      }
+      callbacks$1.emit("onBoxMove", payload);
     };
     this.onBoxResize = (payload) => {
       if (payload.width && payload.height) {
@@ -2266,31 +2315,23 @@ class AppManager {
           width: payload.width,
           height: payload.height
         });
-        if (WindowManager.supportTeachingAidsPlugin) {
-          callbacks$1.emit("onBoxResize", payload);
-        }
+        callbacks$1.emit("onBoxResize", payload);
       }
     };
     this.onBoxFocus = (payload) => {
       this.windowManger.safeSetAttributes({ focus: payload.appId });
-      if (WindowManager.supportTeachingAidsPlugin) {
-        callbacks$1.emit("onBoxFocus", payload);
-      }
+      callbacks$1.emit("onBoxFocus", payload);
     };
     this.onBoxClose = (payload) => {
       const appProxy = this.appProxies.get(payload.appId);
       if (appProxy) {
         appProxy.destroy(false, true, true, payload.error);
       }
-      if (WindowManager.supportTeachingAidsPlugin) {
-        callbacks$1.emit("onBoxClose", payload);
-      }
+      callbacks$1.emit("onBoxClose", payload);
     };
     this.onBoxStateChange = (payload) => {
       this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
-      if (WindowManager.supportTeachingAidsPlugin) {
-        callbacks$1.emit("onBoxStateChange", payload);
-      }
+      callbacks$1.emit("onBoxStateChange", payload);
     };
     this.addAppsChangeListener = () => {
       this.refresher.add("apps", () => {
@@ -2624,9 +2665,7 @@ class AppManager {
       this.setMainViewFocusPath();
     }
     internalEmitter.emit("mainViewMounted");
-    if (WindowManager.supportTeachingAidsPlugin) {
-      callbacks$1.emit("onMainViewMounted", mainView);
-    }
+    callbacks$1.emit("onMainViewMounted", mainView);
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -2853,16 +2892,59 @@ const findMemberByUid = (room, uid) => {
   return result;
 };
 const createInvisiblePlugin = async (room) => {
-  try {
-    const manager = await room.createInvisiblePlugin(WindowManager, {});
+  let manager = room.getInvisiblePlugin(WindowManager.kind);
+  if (manager)
     return manager;
-  } catch (error) {
-    if (error.message === `invisible plugin "WindowManager" exits`) {
-      await wait(200);
-      return room.getInvisiblePlugin(WindowManager.kind);
-    } else {
-      log("createInvisiblePlugin failed", error);
+  let resolve;
+  const promise = new Promise((r2) => {
+    WindowManager._resolve = resolve = r2;
+  });
+  let wasReadonly = false;
+  const canOperate = isRoomTokenWritable(room);
+  if (!room.isWritable && canOperate) {
+    wasReadonly = true;
+    await pRetry(async (count) => {
+      log(`switching to writable (x${count})`);
+      await room.setWritable(true);
+    }, { retries: 10, maxTimeout: 5e3 });
+  }
+  if (room.isWritable) {
+    log("creating InvisiblePlugin...");
+    room.createInvisiblePlugin(WindowManager, {}).catch(console.warn);
+  } else {
+    if (canOperate)
+      console.warn("[WindowManager]: failed to switch to writable");
+    console.warn("[WindowManager]: waiting for others to create the plugin...");
+  }
+  const timeout = setTimeout(() => {
+    console.warn("[WindowManager]: no one called createInvisiblePlugin() after 20 seconds");
+  }, 2e4);
+  const abort = setTimeout(() => {
+    throw new Error("[WindowManager]: no one called createInvisiblePlugin() after 60 seconds");
+  }, 6e4);
+  const interval = setInterval(() => {
+    manager = room.getInvisiblePlugin(WindowManager.kind);
+    if (manager) {
+      clearTimeout(abort);
+      clearTimeout(timeout);
+      clearInterval(interval);
+      resolve(manager);
+      if (wasReadonly && room.isWritable) {
+        setTimeout(() => room.setWritable(false).catch(console.warn), 500);
+      }
     }
+  }, 200);
+  return promise;
+};
+const isRoomTokenWritable = (room) => {
+  try {
+    const str = atob(room.roomToken.slice("NETLESSROOM_".length));
+    const index2 = str.indexOf("&role=");
+    const role = +str[index2 + "&role=".length];
+    return role < 2;
+  } catch (error) {
+    console.error(error);
+    return false;
   }
 };
 const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
@@ -6798,8 +6880,8 @@ function create_if_block(ctx) {
   let t1;
   let t2;
   let div1_class_value;
-  let if_block0 = ctx[17] && create_if_block_2(ctx);
-  let if_block1 = ctx[18] && create_if_block_1(ctx);
+  let if_block0 = ctx[18] && create_if_block_2(ctx);
+  let if_block1 = ctx[19] && create_if_block_1(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6808,7 +6890,7 @@ function create_if_block(ctx) {
         if_block0.c();
       t0 = space();
       span = element("span");
-      t1 = text$1(ctx[0]);
+      t1 = text$1(ctx[1]);
       t2 = space();
       if (if_block1)
         if_block1.c();
@@ -6816,11 +6898,11 @@ function create_if_block(ctx) {
       set_style(span, "white-space", "nowrap");
       set_style(span, "text-overflow", "ellipsis");
       set_style(span, "max-width", "80px");
-      attr(div0, "class", ctx[8]);
-      set_style(div0, "background-color", ctx[2]);
-      set_style(div0, "color", ctx[9]);
-      set_style(div0, "opacity", ctx[11]);
-      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-name " + ctx[15] + " " + ctx[14]);
+      attr(div0, "class", ctx[9]);
+      set_style(div0, "background-color", ctx[3]);
+      set_style(div0, "color", ctx[10]);
+      set_style(div0, "opacity", ctx[12]);
+      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-name " + ctx[16] + " " + ctx[15]);
     },
     m(target, anchor) {
       insert(target, div1, anchor);
@@ -6835,7 +6917,7 @@ function create_if_block(ctx) {
         if_block1.m(div0, null);
     },
     p(ctx2, dirty) {
-      if (ctx2[17]) {
+      if (ctx2[18]) {
         if (if_block0) {
           if_block0.p(ctx2, dirty);
         } else {
@@ -6847,9 +6929,9 @@ function create_if_block(ctx) {
         if_block0.d(1);
         if_block0 = null;
       }
-      if (dirty & 1)
-        set_data(t1, ctx2[0]);
-      if (ctx2[18]) {
+      if (dirty & 2)
+        set_data(t1, ctx2[1]);
+      if (ctx2[19]) {
         if (if_block1) {
           if_block1.p(ctx2, dirty);
         } else {
@@ -6861,19 +6943,19 @@ function create_if_block(ctx) {
         if_block1.d(1);
         if_block1 = null;
       }
-      if (dirty & 256) {
-        attr(div0, "class", ctx2[8]);
+      if (dirty & 512) {
+        attr(div0, "class", ctx2[9]);
       }
-      if (dirty & 4) {
-        set_style(div0, "background-color", ctx2[2]);
+      if (dirty & 8) {
+        set_style(div0, "background-color", ctx2[3]);
       }
-      if (dirty & 512) {
-        set_style(div0, "color", ctx2[9]);
+      if (dirty & 1024) {
+        set_style(div0, "color", ctx2[10]);
       }
-      if (dirty & 2048) {
-        set_style(div0, "opacity", ctx2[11]);
+      if (dirty & 4096) {
+        set_style(div0, "opacity", ctx2[12]);
       }
-      if (dirty & 49152 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-name " + ctx2[15] + " " + ctx2[14])) {
+      if (dirty & 98304 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-name " + ctx2[16] + " " + ctx2[15])) {
         attr(div1, "class", div1_class_value);
       }
     },
@@ -6894,8 +6976,8 @@ function create_if_block_2(ctx) {
     c() {
       img = element("img");
       attr(img, "class", "netless-window-manager-cursor-selector-avatar");
-      attr(img, "style", ctx[19]());
-      if (!src_url_equal(img.src, img_src_value = ctx[7]))
+      attr(img, "style", ctx[20]());
+      if (!src_url_equal(img.src, img_src_value = ctx[8]))
         attr(img, "src", img_src_value);
       attr(img, "alt", "avatar");
     },
@@ -6903,7 +6985,7 @@ function create_if_block_2(ctx) {
       insert(target, img, anchor);
     },
     p(ctx2, dirty) {
-      if (dirty & 128 && !src_url_equal(img.src, img_src_value = ctx2[7])) {
+      if (dirty & 256 && !src_url_equal(img.src, img_src_value = ctx2[8])) {
         attr(img, "src", img_src_value);
       }
     },
@@ -6919,19 +7001,19 @@ function create_if_block_1(ctx) {
   return {
     c() {
       span = element("span");
-      t2 = text$1(ctx[1]);
+      t2 = text$1(ctx[2]);
       attr(span, "class", "netless-window-manager-cursor-tag-name");
-      set_style(span, "background-color", ctx[10]);
+      set_style(span, "background-color", ctx[11]);
     },
     m(target, anchor) {
       insert(target, span, anchor);
       append(span, t2);
     },
     p(ctx2, dirty) {
-      if (dirty & 2)
-        set_data(t2, ctx2[1]);
-      if (dirty & 1024) {
-        set_style(span, "background-color", ctx2[10]);
+      if (dirty & 4)
+        set_data(t2, ctx2[2]);
+      if (dirty & 2048) {
+        set_style(span, "background-color", ctx2[11]);
       }
     },
     d(detaching) {
@@ -6948,7 +7030,7 @@ function create_fragment(ctx) {
   let img_class_value;
   let img_src_value;
   let div1_class_value;
-  let if_block = !ctx[13] && create_if_block(ctx);
+  let if_block = !ctx[14] && create_if_block(ctx);
   return {
     c() {
       div1 = element("div");
@@ -6957,14 +7039,15 @@ function create_fragment(ctx) {
       t2 = space();
       div0 = element("div");
       img = element("img");
-      attr(img, "class", img_class_value = "netless-window-manager-cursor-" + ctx[3] + "-image " + ctx[14]);
-      if (!src_url_equal(img.src, img_src_value = ctx[6]))
+      attr(img, "class", img_class_value = "netless-window-manager-cursor-" + ctx[4] + "-image " + ctx[15]);
+      if (!src_url_equal(img.src, img_src_value = ctx[7]))
         attr(img, "src", img_src_value);
-      attr(img, "alt", ctx[3]);
+      attr(img, "alt", ctx[4]);
       attr(div0, "class", "cursor-image-wrapper");
-      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-mid" + (ctx[12] ? " netless-window-manager-cursor-custom" : ""));
-      set_style(div1, "transform", "translateX(" + ctx[4] + "px) translateY(" + ctx[5] + "px)");
-      set_style(div1, "display", ctx[16]);
+      attr(div1, "class", div1_class_value = "netless-window-manager-cursor-mid" + (ctx[13] ? " netless-window-manager-cursor-custom" : ""));
+      set_style(div1, "transform", "translateX(" + ctx[5] + "px) translateY(" + ctx[6] + "px)");
+      set_style(div1, "display", ctx[17]);
+      attr(div1, "data-cursor-uid", ctx[0]);
     },
     m(target, anchor) {
       insert(target, div1, anchor);
@@ -6975,7 +7058,7 @@ function create_fragment(ctx) {
       append(div0, img);
     },
     p(ctx2, [dirty]) {
-      if (!ctx2[13]) {
+      if (!ctx2[14]) {
         if (if_block) {
           if_block.p(ctx2, dirty);
         } else {
@@ -6987,23 +7070,26 @@ function create_fragment(ctx) {
         if_block.d(1);
         if_block = null;
       }
-      if (dirty & 16392 && img_class_value !== (img_class_value = "netless-window-manager-cursor-" + ctx2[3] + "-image " + ctx2[14])) {
+      if (dirty & 32784 && img_class_value !== (img_class_value = "netless-window-manager-cursor-" + ctx2[4] + "-image " + ctx2[15])) {
         attr(img, "class", img_class_value);
       }
-      if (dirty & 64 && !src_url_equal(img.src, img_src_value = ctx2[6])) {
+      if (dirty & 128 && !src_url_equal(img.src, img_src_value = ctx2[7])) {
         attr(img, "src", img_src_value);
       }
-      if (dirty & 8) {
-        attr(img, "alt", ctx2[3]);
+      if (dirty & 16) {
+        attr(img, "alt", ctx2[4]);
       }
-      if (dirty & 4096 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-mid" + (ctx2[12] ? " netless-window-manager-cursor-custom" : ""))) {
+      if (dirty & 8192 && div1_class_value !== (div1_class_value = "netless-window-manager-cursor-mid" + (ctx2[13] ? " netless-window-manager-cursor-custom" : ""))) {
         attr(div1, "class", div1_class_value);
       }
-      if (dirty & 48) {
-        set_style(div1, "transform", "translateX(" + ctx2[4] + "px) translateY(" + ctx2[5] + "px)");
+      if (dirty & 96) {
+        set_style(div1, "transform", "translateX(" + ctx2[5] + "px) translateY(" + ctx2[6] + "px)");
+      }
+      if (dirty & 131072) {
+        set_style(div1, "display", ctx2[17]);
       }
-      if (dirty & 65536) {
-        set_style(div1, "display", ctx2[16]);
+      if (dirty & 1) {
+        attr(div1, "data-cursor-uid", ctx2[0]);
       }
     },
     i: noop,
@@ -7025,6 +7111,7 @@ function instance($$self, $$props, $$invalidate) {
   let isLaserPointerPencilEraser;
   let offset;
   let pencilEraserSize3ImageOffset;
+  let { uid } = $$props;
   let { cursorName } = $$props;
   let { tagName } = $$props;
   let { backgroundColor } = $$props;
@@ -7050,64 +7137,67 @@ function instance($$self, $$props, $$invalidate) {
     }).map(([key, v2]) => `${key}: ${v2}`).join(";");
   };
   $$self.$$set = ($$props2) => {
+    if ("uid" in $$props2)
+      $$invalidate(0, uid = $$props2.uid);
     if ("cursorName" in $$props2)
-      $$invalidate(0, cursorName = $$props2.cursorName);
+      $$invalidate(1, cursorName = $$props2.cursorName);
     if ("tagName" in $$props2)
-      $$invalidate(1, tagName = $$props2.tagName);
+      $$invalidate(2, tagName = $$props2.tagName);
     if ("backgroundColor" in $$props2)
-      $$invalidate(2, backgroundColor = $$props2.backgroundColor);
+      $$invalidate(3, backgroundColor = $$props2.backgroundColor);
     if ("appliance" in $$props2)
-      $$invalidate(3, appliance = $$props2.appliance);
+      $$invalidate(4, appliance = $$props2.appliance);
     if ("x" in $$props2)
-      $$invalidate(4, x2 = $$props2.x);
+      $$invalidate(5, x2 = $$props2.x);
     if ("y" in $$props2)
-      $$invalidate(5, y2 = $$props2.y);
+      $$invalidate(6, y2 = $$props2.y);
     if ("src" in $$props2)
-      $$invalidate(6, src = $$props2.src);
+      $$invalidate(7, src = $$props2.src);
     if ("visible" in $$props2)
-      $$invalidate(20, visible = $$props2.visible);
+      $$invalidate(21, visible = $$props2.visible);
     if ("avatar" in $$props2)
-      $$invalidate(7, avatar = $$props2.avatar);
+      $$invalidate(8, avatar = $$props2.avatar);
     if ("theme" in $$props2)
-      $$invalidate(8, theme = $$props2.theme);
+      $$invalidate(9, theme = $$props2.theme);
     if ("color" in $$props2)
-      $$invalidate(9, color2 = $$props2.color);
+      $$invalidate(10, color2 = $$props2.color);
     if ("cursorTagBackgroundColor" in $$props2)
-      $$invalidate(10, cursorTagBackgroundColor = $$props2.cursorTagBackgroundColor);
+      $$invalidate(11, cursorTagBackgroundColor = $$props2.cursorTagBackgroundColor);
     if ("opacity" in $$props2)
-      $$invalidate(11, opacity = $$props2.opacity);
+      $$invalidate(12, opacity = $$props2.opacity);
     if ("pencilEraserSize" in $$props2)
-      $$invalidate(21, pencilEraserSize = $$props2.pencilEraserSize);
+      $$invalidate(22, pencilEraserSize = $$props2.pencilEraserSize);
     if ("custom" in $$props2)
-      $$invalidate(12, custom = $$props2.custom);
+      $$invalidate(13, custom = $$props2.custom);
   };
   $$self.$$.update = () => {
-    if ($$self.$$.dirty & 1) {
+    if ($$self.$$.dirty & 2) {
       hasName = !isEmpty(cursorName);
     }
-    if ($$self.$$.dirty & 2) {
-      $$invalidate(18, hasTagName = !isEmpty(tagName));
+    if ($$self.$$.dirty & 4) {
+      $$invalidate(19, hasTagName = !isEmpty(tagName));
     }
-    if ($$self.$$.dirty & 128) {
-      $$invalidate(17, hasAvatar = !isEmpty(avatar));
+    if ($$self.$$.dirty & 256) {
+      $$invalidate(18, hasAvatar = !isEmpty(avatar));
     }
-    if ($$self.$$.dirty & 1048576) {
-      $$invalidate(16, display = visible ? "initial" : "none");
+    if ($$self.$$.dirty & 2097152) {
+      $$invalidate(17, display = visible ? "" : "none");
     }
-    if ($$self.$$.dirty & 8) {
-      $$invalidate(13, isLaserPointer = appliance === ApplianceNames.laserPointer);
+    if ($$self.$$.dirty & 16) {
+      $$invalidate(14, isLaserPointer = appliance === ApplianceNames.laserPointer);
     }
-    if ($$self.$$.dirty & 8200) {
-      $$invalidate(22, isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser);
+    if ($$self.$$.dirty & 16400) {
+      $$invalidate(23, isLaserPointerPencilEraser = isLaserPointer || appliance === ApplianceNames.pencilEraser);
     }
-    if ($$self.$$.dirty & 4194304) {
-      $$invalidate(15, offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "");
+    if ($$self.$$.dirty & 8388608) {
+      $$invalidate(16, offset = isLaserPointerPencilEraser ? "netless-window-manager-laserPointer-pencilEraser-offset" : "");
     }
-    if ($$self.$$.dirty & 2097152) {
-      $$invalidate(14, pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "");
+    if ($$self.$$.dirty & 4194304) {
+      $$invalidate(15, pencilEraserSize3ImageOffset = pencilEraserSize === 3 ? "netless-window-manager-pencilEraser-3-offset" : "");
     }
   };
   return [
+    uid,
     cursorName,
     tagName,
     backgroundColor,
@@ -7137,21 +7227,22 @@ class Cursor$1 extends SvelteComponent {
   constructor(options2) {
     super();
     init(this, options2, instance, create_fragment, safe_not_equal, {
-      cursorName: 0,
-      tagName: 1,
-      backgroundColor: 2,
-      appliance: 3,
-      x: 4,
-      y: 5,
-      src: 6,
-      visible: 20,
-      avatar: 7,
-      theme: 8,
-      color: 9,
-      cursorTagBackgroundColor: 10,
-      opacity: 11,
-      pencilEraserSize: 21,
-      custom: 12
+      uid: 0,
+      cursorName: 1,
+      tagName: 2,
+      backgroundColor: 3,
+      appliance: 4,
+      x: 5,
+      y: 6,
+      src: 7,
+      visible: 21,
+      avatar: 8,
+      theme: 9,
+      color: 10,
+      cursorTagBackgroundColor: 11,
+      opacity: 12,
+      pencilEraserSize: 22,
+      custom: 13
     });
   }
 }
@@ -7348,6 +7439,7 @@ class Cursor {
   initProps() {
     var _a;
     return {
+      uid: this.memberId,
       x: 0,
       y: 0,
       appliance: this.memberApplianceName,
@@ -7459,7 +7551,7 @@ class CursorManager {
     this.enableCursor = enableCursor;
     this.cursorInstances = /* @__PURE__ */ new Map();
     this.userApplianceIcons = {};
-    this.sideEffectManager = new SideEffectManager$1();
+    this.sideEffectManager = new o$1();
     this.store = this.manager.store;
     this.leaveFlag = true;
     this._style = "default";
@@ -7495,7 +7587,7 @@ class CursorManager {
       const now2 = Date.now();
       if (now2 - this.mouseMoveTimer > 48) {
         this.mouseMoveTimer = now2;
-        if (WindowManager.supportTeachingAidsPlugin && isRoom(WindowManager.displayer) && WindowManager.displayer.disableDeviceInputs) {
+        if (WindowManager.supportAppliancePlugin && isRoom(WindowManager.displayer) && WindowManager.displayer.disableDeviceInputs) {
           if (this.leaveFlag) {
             this.manager.dispatchInternalEvent(Events.CursorMove, {
               uid: this.manager.uid,
@@ -17970,7 +18062,7 @@ const _IframeBridge = class {
     this.allowAppliances = ["clicker"];
     this.bridgeDisposer = noop$2;
     this.rootRect = null;
-    this.sideEffectManager = new SideEffectManager$1();
+    this.sideEffectManager = new o$1();
     this.execListenIframe = debounce$1((options2) => {
       this.listenIframe(options2);
     }, 50);
@@ -18140,7 +18232,9 @@ const _IframeBridge = class {
     const room = this.displayer;
     const scenes = room.entireScenes()[this.attributes.displaySceneDir];
     if (!scenes || scenes.length !== page) {
-      const genScenes = times(page, (index2) => ({ name: String(index2 + 1) }));
+      const genScenes = times(page, (index2) => ({
+        name: String(index2 + 1)
+      }));
       room.putScenes(this.attributes.displaySceneDir, genScenes);
       this.manager.setMainViewScenePath(this.attributes.displaySceneDir);
     }
@@ -18429,19 +18523,23 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.73-beta.0";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.28", "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.17", "@netless/app-media-player": "0.1.0-beta.6", "@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.version = "0.4.73";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.28", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.17", "@netless/app-media-player": "0.1.0-beta.6", "@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", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
+    this._cursorUIDs = [];
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.28", "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.17", "@netless/app-media-player": "0.1.0-beta.6", "@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" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.28", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.17", "@netless/app-media-player": "0.1.0-beta.6", "@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", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
+  }
+  static onCreate(manager) {
+    _WindowManager._resolve(manager);
   }
   static async mount(params) {
     const room = params.room;
     _WindowManager.container = params.container;
-    _WindowManager.supportTeachingAidsPlugin = params.supportTeachingAidsPlugin;
+    _WindowManager.supportAppliancePlugin = params.supportAppliancePlugin;
     const containerSizeRatio = params.containerSizeRatio;
     const debug2 = params.debug;
     const cursor = params.cursor;
@@ -18508,26 +18606,8 @@ const _WindowManager = class extends InvisiblePlugin {
     }
     return manager;
   }
-  static async initManager(room) {
-    let manager = room.getInvisiblePlugin(_WindowManager.kind);
-    if (!manager) {
-      if (isRoom(room)) {
-        if (room.isWritable === false) {
-          try {
-            await room.setWritable(true);
-          } catch (error) {
-            throw new Error("[WindowManger]: room must be switched to be writable");
-          }
-          manager = await createInvisiblePlugin(room);
-          manager == null ? void 0 : manager.ensureAttributes();
-          await wait(500);
-          await room.setWritable(false);
-        } else {
-          manager = await createInvisiblePlugin(room);
-        }
-      }
-    }
-    return manager;
+  static initManager(room) {
+    return createInvisiblePlugin(room);
   }
   static initContainer(manager, container, params) {
     const { chessboard, overwriteStyles, fullscreen } = params;
@@ -18847,6 +18927,27 @@ const _WindowManager = class extends InvisiblePlugin {
       callbacks$1.emit("fullscreenChange", fullscreen);
     }
   }
+  get cursorUIDs() {
+    return this._cursorUIDs;
+  }
+  setCursorUIDs(cursorUIDs) {
+    var _a, _b;
+    this._cursorUIDs = cursorUIDs || [];
+    if (this._cursorUIDs.length === 0) {
+      (_a = this._cursorUIDsStyleDOM) == null ? void 0 : _a.remove();
+    } else {
+      if (!this._cursorUIDsStyleDOM) {
+        this._cursorUIDsStyleDOM = document.createElement("style");
+      }
+      (_b = _WindowManager.playground) == null ? void 0 : _b.appendChild(this._cursorUIDsStyleDOM);
+      let style2 = "[data-cursor-uid] { display: none }";
+      for (const uid of this._cursorUIDs) {
+        style2 += `
+[data-cursor-uid="${uid}"] { display: flex }`;
+      }
+      this._cursorUIDsStyleDOM.textContent = style2;
+    }
+  }
   get mainView() {
     if (this.appManager) {
       return this.appManager.mainViewProxy.view;
@@ -19178,6 +19279,7 @@ WindowManager.kind = "WindowManager";
 WindowManager.debug = false;
 WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
 WindowManager.isCreated = false;
+WindowManager._resolve = (_manager) => void 0;
 setupBuiltin();
 export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotFoundError, BoxNotCreatedError, BuiltinApps, DomEvents, IframeBridge, IframeEvents, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };
 //# sourceMappingURL=index.mjs.map