@netless/window-manager 1.0.0-canary.3 → 1.0.0-canary.30

package/dist/index.es.js

@@ -19,12 +19,12 @@ var __spreadValues = (a2, b2) => {
 var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
-import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, isNumber, pick, throttle, delay, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
-import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin, ViewMode } from "white-web-sdk";
+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, 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, ValManager, combine, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
-import { ResizeObserver as ResizeObserver$2 } from "@juggle/resize-observer";
+import { Val, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
+import { ResizeObserver as ResizeObserver$3 } from "@juggle/resize-observer";
 import p$1 from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
   Events2["AppMove"] = "AppMove";
@@ -33,18 +33,16 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["AppBoxStateChange"] = "AppBoxStateChange";
   Events2["GetAttributes"] = "GetAttributes";
   Events2["UpdateWindowManagerWrapper"] = "UpdateWindowManagerWrapper";
-  Events2["InitReplay"] = "InitReplay";
   Events2["WindowCreated"] = "WindowCreated";
   Events2["SetMainViewScenePath"] = "SetMainViewScenePath";
   Events2["SetMainViewSceneIndex"] = "SetMainViewSceneIndex";
   Events2["SetAppFocusIndex"] = "SetAppFocusIndex";
   Events2["SwitchViewsToFreedom"] = "SwitchViewsToFreedom";
-  Events2["MoveCamera"] = "MoveCamera";
-  Events2["MoveCameraToContain"] = "MoveCameraToContain";
   Events2["CursorMove"] = "CursorMove";
   Events2["RootDirRemoved"] = "RootDirRemoved";
   Events2["Refresh"] = "Refresh";
   Events2["InitMainViewCamera"] = "InitMainViewCamera";
+  Events2["InvokeAttributesUpdateCallback"] = "InvokeAttributesUpdateCallback";
   return Events2;
 })(Events || {});
 const MagixEventName = "__WindowManger";
@@ -54,6 +52,11 @@ var AppAttributes = /* @__PURE__ */ ((AppAttributes2) => {
   AppAttributes2["Position"] = "position";
   AppAttributes2["SceneIndex"] = "SceneIndex";
   AppAttributes2["ZIndex"] = "zIndex";
+  AppAttributes2["Visible"] = "visible";
+  AppAttributes2["Ratio"] = "ratio";
+  AppAttributes2["StageRatio"] = "stageRatio";
+  AppAttributes2["Draggable"] = "draggable";
+  AppAttributes2["Resizable"] = "resizable";
   return AppAttributes2;
 })(AppAttributes || {});
 var AppEvents = /* @__PURE__ */ ((AppEvents2) => {
@@ -350,11 +353,19 @@ const genAppId = async (kind2) => {
   return `${kind2}-${v4().replace("-", "").slice(0, 8)}`;
 };
 const setViewFocusScenePath = (view, focusScenePath) => {
+  if (view.didRelease) {
+    return;
+  }
   if (view.focusScenePath !== focusScenePath) {
     view.focusScenePath = focusScenePath;
     return view;
   }
 };
+const releaseView = (view) => {
+  if (!view.didRelease) {
+    view.release();
+  }
+};
 const setScenePath = (room, scenePath) => {
   if (room && room.isWritable) {
     if (room.state.sceneState.scenePath !== scenePath) {
@@ -464,14 +475,6 @@ class AppListeners {
             this.setMainViewScenePathHandler(data.payload);
             break;
           }
-          case Events.MoveCamera: {
-            this.moveCameraHandler(data.payload);
-            break;
-          }
-          case Events.MoveCameraToContain: {
-            this.moveCameraToContainHandler(data.payload);
-            break;
-          }
           case Events.CursorMove: {
             this.cursorMoveHandler(data.payload);
             break;
@@ -492,6 +495,10 @@ class AppListeners {
             this.setAppFocusViewIndexHandler(data.payload);
             break;
           }
+          case Events.InvokeAttributesUpdateCallback: {
+            this.manager.attributesUpdateCallback(this.manager.attributes.apps);
+            break;
+          }
         }
       }
     };
@@ -511,14 +518,6 @@ class AppListeners {
       setViewFocusScenePath(this.manager.mainView, nextScenePath);
       callbacks$1.emit("mainViewScenePathChange", nextScenePath);
     };
-    this.moveCameraHandler = (payload) => {
-      if (isEqual(omit(payload, ["animationMode"]), __spreadValues({}, this.manager.mainView.camera)))
-        return;
-      this.manager.mainView.moveCamera(payload);
-    };
-    this.moveCameraToContainHandler = (payload) => {
-      this.manager.mainView.moveCameraToContain(payload);
-    };
     this.cursorMoveHandler = (payload) => {
       emitter.emit("cursorMove", payload);
     };
@@ -893,10 +892,11 @@ class Storage {
   }
 }
 class WhiteBoardView {
-  constructor(appContext, appProxy, removeViewWrapper) {
+  constructor(view, appContext, appProxy, ensureSize) {
+    this.view = view;
     this.appContext = appContext;
     this.appProxy = appProxy;
-    this.removeViewWrapper = removeViewWrapper;
+    this.ensureSize = ensureSize;
     this.nextPage = async () => {
       const nextIndex = this.pageState.index + 1;
       return this.jumpPage(nextIndex);
@@ -939,24 +939,48 @@ class WhiteBoardView {
       return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
     const pageState$ = new Val(appProxy.pageState);
+    const baseRect$ = new Val(appProxy.size$.value);
+    const pickCamera = (camera) => pick(camera, ["centerX", "centerY", "scale"]);
+    const camera$ = new Val(pickCamera(this.view.camera));
+    this.baseRect$ = baseRect$;
     this.pageState$ = pageState$;
-    appProxy.appEmitter.on("pageStateChange", (pageState) => {
-      pageState$.setValue(pageState);
-    });
+    this.baseCamera$ = camera$;
+    this.appProxy.sideEffectManager.add(() => [
+      appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
+      appProxy.camera$.subscribe((camera) => {
+        if (camera) {
+          camera$.setValue(pickCamera(camera));
+        }
+      }),
+      appProxy.size$.subscribe((size2) => {
+        if (size2) {
+          baseRect$.setValue(pick(size2, ["width", "height"]));
+        }
+      })
+    ]);
+    view.disableCameraTransform = true;
   }
   get pageState() {
     return this.pageState$.value;
   }
-  destroy() {
-    this.removeViewWrapper();
+  moveCamera(camera) {
+    this.appProxy.moveCamera(camera);
+  }
+  setBaseRect(rect) {
+    this.appProxy.updateSize(rect.width, rect.height);
   }
 }
-const setupWrapper = (root) => {
+const log = (...args) => {
+  if (WindowManager.debug) {
+    console.log(`[WindowManager]:`, ...args);
+  }
+};
+const setupWrapper = (root, target) => {
   const playground = document.createElement("div");
   playground.className = "netless-window-manager-playground";
   const mainViewElement = document.createElement("div");
   mainViewElement.className = "netless-window-manager-main-view";
-  playground.appendChild(mainViewElement);
+  target.appendChild(mainViewElement);
   root.appendChild(playground);
   return { playground, mainViewElement };
 };
@@ -978,13 +1002,25 @@ const serializeRoomMembers = (members) => {
     var _a;
     return __spreadValues({
       uid: ((_a = member.payload) == null ? void 0 : _a.uid) || ""
-    }, member);
+    }, toJS(member));
   });
 };
+const createInvisiblePlugin = async (room) => {
+  try {
+    const manager = await room.createInvisiblePlugin(WindowManager, {});
+    return manager;
+  } catch (error) {
+    if (error.message === `invisible plugin "WindowManager" exits`) {
+      await wait(200);
+      return room.getInvisiblePlugin(WindowManager.kind);
+    } else {
+      log("createInvisiblePlugin failed", error);
+    }
+  }
+};
 class AppContext {
-  constructor(manager, boxManager, appId, appProxy, appOptions) {
+  constructor(manager, appId, appProxy, appOptions) {
     this.manager = manager;
-    this.boxManager = boxManager;
     this.appId = appId;
     this.appProxy = appProxy;
     this.appOptions = appOptions;
@@ -1012,8 +1048,7 @@ class AppContext {
         return appAttr == null ? void 0 : appAttr.options["scenes"];
       }
     };
-    this.createWhiteBoardView = (size2) => {
-      var _a;
+    this.createWhiteBoardView = (params) => {
       if (this.whiteBoardView) {
         return this.whiteBoardView;
       }
@@ -1021,21 +1056,39 @@ class AppContext {
       if (!view) {
         view = this.appProxy.createAppDir();
       }
+      if (params) {
+        if (isBoolean(params.syncCamera)) {
+          this.appProxy.syncCamera$.setValue(params.syncCamera);
+        }
+      }
       const viewWrapper = document.createElement("div");
+      this._viewWrapper = viewWrapper;
       viewWrapper.className = "window-manager-view-wrapper";
-      (_a = this.box.$content.parentElement) == null ? void 0 : _a.appendChild(viewWrapper);
-      const removeViewWrapper = () => {
-        var _a2;
-        (_a2 = this.box.$content.parentElement) == null ? void 0 : _a2.removeChild(viewWrapper);
-      };
+      this.box.$main.appendChild(viewWrapper);
       view.divElement = viewWrapper;
+      this.appProxy.fireMemberStateChange();
       if (this.isAddApp) {
-        this.initPageSize(size2);
-      }
-      this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+        this.ensurePageSize(params == null ? void 0 : params.size);
+      }
+      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
+      this.appProxy.sideEffectManager.add(() => [
+        this.box._stageRect$.subscribe((rect) => {
+          viewWrapper.style.left = `${rect.x}px`;
+          viewWrapper.style.top = `${rect.y}px`;
+          viewWrapper.style.width = `${rect.width}px`;
+          viewWrapper.style.height = `${rect.height}px`;
+        }),
+        () => {
+          return () => {
+            this.whiteBoardView = void 0;
+          };
+        }
+      ]);
+      this.appProxy.whiteBoardViewCreated$.setValue(true);
       return this.whiteBoardView;
     };
-    this.initPageSize = (size2) => {
+    this.ensurePageSize = (size2) => {
+      var _a;
       if (!isNumber(size2))
         return;
       if (!this.appProxy.scenePath)
@@ -1046,14 +1099,11 @@ class AppContext {
         throw Error(`[WindowManager]: size ${size2} muse be in range [1, ${MAX_PAGE_SIZE}]`);
       }
       const needInsert = size2 - this.appProxy.pageState.length;
-      const startPageNumber = this.appProxy.pageState.length;
-      const scenes = new Array(needInsert).fill({}).map((_2, index2) => {
-        return { name: `${startPageNumber + index2 + 1}` };
-      });
-      putScenes(this.room, this.appProxy.scenePath, scenes);
+      const scenes = new Array(needInsert).fill({});
+      (_a = this.room) == null ? void 0 : _a.putScenes(this.appProxy.scenePath, scenes);
     };
     this.getInitScenePath = () => {
-      return this.manager.getAppInitPath(this.appId);
+      return this.appProxy.scenePath;
     };
     this.setAttributes = (attributes) => {
       this.manager.safeSetAttributes({ [this.appId]: attributes });
@@ -1097,14 +1147,17 @@ class AppContext {
   get displayer() {
     return this.manager.displayer;
   }
+  get destroyed() {
+    return this.appProxy.status === "destroyed";
+  }
   get view() {
     return this.appProxy.view;
   }
   get isWritable() {
-    return this.manager.canOperate;
+    return this.manager.canOperate && !this.destroyed;
   }
   get box() {
-    const box = this.boxManager.getBox(this.appId);
+    const box = this.appProxy.box$.value;
     if (box) {
       return box;
     } else {
@@ -1115,9 +1168,9 @@ class AppContext {
     return this.manager.room;
   }
   get members() {
-    return this.manager.members;
+    return this.manager.members$.value;
   }
-  get memberState() {
+  get currentMember() {
     const self2 = findMemberByUid(this.room, this.manager.uid);
     if (!self2) {
       throw new Error(`Member ${this.manager.uid} not found.`);
@@ -1186,6 +1239,151 @@ class AppPageStateImpl {
     (_a = this.sceneNode) == null ? void 0 : _a.dispose();
   }
 }
+class CameraSynchronizer {
+  constructor(saveCamera) {
+    this.saveCamera = saveCamera;
+    this.setRect = (rect) => {
+      this.rect = rect;
+      if (this.remoteCamera && this.remoteSize) {
+        this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+      }
+    };
+    this.onRemoteUpdate = throttle((camera, size2) => {
+      this.remoteCamera = camera;
+      this.remoteSize = size2;
+      if (this.remoteSize && this.rect) {
+        const wScale = this.rect.width / size2.width;
+        const hScale = this.rect.height / size2.height;
+        const nextScale = camera.scale * Math.min(wScale, hScale);
+        const config = {
+          scale: nextScale,
+          animationMode: AnimationMode.Continuous
+        };
+        if (camera.centerX !== null) {
+          config.centerX = camera.centerX;
+        }
+        if (camera.centerY !== null) {
+          config.centerY = camera.centerY;
+        }
+        this.moveCamera(config);
+      }
+    }, 10);
+  }
+  setView(view) {
+    this.view = view;
+  }
+  onRemoteSizeUpdate(size2) {
+    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;
+      this.moveCamera({
+        scale: nextScale
+      });
+    }
+  }
+  onLocalCameraUpdate(camera) {
+    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) {
+    this.context = context;
+    this.sem = new SideEffectManager();
+    this.bindView = (view) => {
+      if (!view)
+        return;
+      this.synchronizer.setView(view);
+      this.sem.flush("view");
+      this.sem.add(() => {
+        view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        return () => view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+      }, "view");
+    };
+    this.onCameraUpdatedByDevice = (camera) => {
+      if (!camera)
+        return;
+      this.synchronizer.onLocalCameraUpdate(__spreadProps(__spreadValues({}, camera), { id: this.context.uid }));
+      const stage = this.context.stageRect$.value;
+      if (stage) {
+        const size2 = { width: stage.width, height: stage.height, id: this.context.uid };
+        if (!isEqual(size2, this.context.size$.value)) {
+          this.context.storeSize(size2);
+        }
+      }
+    };
+    this.synchronizer = new CameraSynchronizer((camera) => {
+      this.context.camera$.setValue(camera, true);
+      const notStoreCamera = this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
+      if (notStoreCamera) {
+        return;
+      } else {
+        this.context.storeCamera(camera);
+      }
+    });
+    this.bindView(this.context.view$.value);
+    this.sem.add(() => [
+      this.context.view$.subscribe((view) => {
+        const currentCamera = this.context.camera$.value;
+        if (currentCamera && this.context.size$.value) {
+          view == null ? void 0 : view.moveCamera({
+            scale: 1,
+            animationMode: AnimationMode.Immediately
+          });
+          this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+        }
+        this.bindView(view);
+      }),
+      this.context.camera$.subscribe((camera, skipUpdate) => {
+        const size2 = this.context.size$.value;
+        if (camera && size2 && !skipUpdate) {
+          this.synchronizer.onRemoteUpdate(camera, size2);
+        }
+      }),
+      this.context.size$.subscribe((size2) => {
+        if (size2) {
+          this.synchronizer.onRemoteSizeUpdate(size2);
+        }
+      }),
+      this.context.stageRect$.reaction((rect) => {
+        if (rect) {
+          this.synchronizer.setRect(rect);
+        }
+      })
+    ]);
+    const camera$size$ = combine([this.context.camera$, this.context.size$]);
+    camera$size$.reaction(([camera, size2]) => {
+      if (camera && size2) {
+        this.synchronizer.onRemoteUpdate(camera, size2);
+        camera$size$.destroy();
+      }
+    });
+  }
+  destroy() {
+    this.sem.flushAll();
+  }
+}
+const boxEmitter = new Emittery();
+const calculateNextIndex = (index2, pageState) => {
+  let nextIndex = 0;
+  const maxIndex = pageState.length - 1;
+  if (index2 === pageState.index) {
+    if (index2 === maxIndex) {
+      nextIndex = index2 - 1;
+    } else {
+      nextIndex = pageState.index + 1;
+    }
+  } else {
+    nextIndex = pageState.index;
+  }
+  return nextIndex;
+};
 var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["Apps"] = "apps";
   Fields2["Focus"] = "focus";
@@ -1199,6 +1397,8 @@ var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["CursorState"] = "cursorState";
   Fields2["FullPath"] = "fullPath";
   Fields2["Registered"] = "registered";
+  Fields2["Camera"] = "camera";
+  Fields2["Size"] = "size";
   return Fields2;
 })(Fields || {});
 class AttributesDelegate {
@@ -1246,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;
     }
@@ -1263,6 +1463,9 @@ class AttributesDelegate {
       this.context.safeUpdateAttributes(["apps", appId, "state", stateName], state);
     }
   }
+  updateAppAttributes(appId, key, value) {
+    this.context.safeUpdateAttributes(["apps", appId, key], value);
+  }
   cleanAppAttributes(id2) {
     this.context.safeUpdateAttributes(["apps", id2], void 0);
     this.context.safeSetAttributes({ [id2]: void 0 });
@@ -1354,26 +1557,6 @@ const store = new AttributesDelegate({
     throw new Error("safeUpdateAttributes not implemented");
   }
 });
-const log = (...args) => {
-  if (WindowManager.debug) {
-    console.log(`[WindowManager]:`, ...args);
-  }
-};
-const calculateNextIndex = (index2, pageState) => {
-  let nextIndex = 0;
-  const maxIndex = pageState.length - 1;
-  if (index2 === pageState.index) {
-    if (index2 === maxIndex) {
-      nextIndex = index2 - 1;
-    } else {
-      nextIndex = pageState.index + 1;
-    }
-  } else {
-    nextIndex = pageState.index;
-  }
-  return nextIndex;
-};
-const boxEmitter = new Emittery();
 class AppProxy {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -1383,65 +1566,100 @@ class AppProxy {
     this.appProxies = this.manager.appProxies;
     this.viewManager = this.manager.viewManager;
     this.store = this.manager.store;
+    this.uid = this.manager.uid;
     this.status = "normal";
     this.sideEffectManager = new SideEffectManager();
+    this.valManager = new ValManager();
+    this.fullPath$ = this.valManager.attach(new Val(void 0));
+    this.camera$ = this.valManager.attach(new Val(void 0));
+    this.size$ = this.valManager.attach(new Val(void 0));
+    this.box$ = this.valManager.attach(new Val(void 0));
+    this.view$ = this.valManager.attach(new Val(void 0));
+    this.syncCamera$ = this.valManager.attach(new Val(true));
+    this.whiteBoardViewCreated$ = this.valManager.attach(new Val(false));
+    this.fireMemberStateChange = () => {
+      if (this.manager.room) {
+        this.onMemberStateChange(this.manager.room.state.memberState);
+      }
+    };
+    this.onMemberStateChange = (memberState) => {
+      var _a2, _b;
+      const needPointerEventsNone = memberState.currentApplianceName === "clicker";
+      if (needPointerEventsNone) {
+        if ((_a2 = this.appContext) == null ? void 0 : _a2._viewWrapper) {
+          this.appContext._viewWrapper.style.pointerEvents = "none";
+        }
+      } else {
+        if ((_b = this.appContext) == null ? void 0 : _b._viewWrapper) {
+          this.appContext._viewWrapper.style.pointerEvents = "auto";
+        }
+      }
+    };
+    this.computedInitialRect = (boxRect) => {
+      var _a2;
+      const managerRect = (_a2 = this.manager.boxManager) == null ? void 0 : _a2.stageRect;
+      if (managerRect) {
+        const { width, height } = managerRect;
+        const boxRatio = boxRect.height / boxRect.width;
+        if (height < 480) {
+          return {
+            width: 480 / boxRatio,
+            height: 480
+          };
+        } else {
+          return {
+            width: width * 0.65,
+            height: height * 0.65
+          };
+        }
+      }
+    };
     this.getAppInitState = (id2) => {
       var _a2, _b;
       const attrs = this.store.getAppState(id2);
       if (!attrs)
         return;
-      const position = attrs == null ? void 0 : attrs[AppAttributes.Position];
       const focus = this.store.focus;
-      const size2 = attrs == null ? void 0 : attrs[AppAttributes.Size];
-      const sceneIndex = attrs == null ? void 0 : attrs[AppAttributes.SceneIndex];
       const maximized = (_a2 = this.attributes) == null ? void 0 : _a2["maximized"];
       const minimized = (_b = this.attributes) == null ? void 0 : _b["minimized"];
-      const zIndex = attrs == null ? void 0 : attrs.zIndex;
-      let payload = { maximized, minimized, zIndex };
-      if (position) {
-        payload = __spreadProps(__spreadValues({}, payload), { id: id2, x: position.x, y: position.y });
-      }
+      let payload = { maximized, minimized, id: id2 };
+      const state = omitBy(attrs, isUndefined);
       if (focus === id2) {
         payload = __spreadProps(__spreadValues({}, payload), { focus: true });
       }
-      if (size2) {
-        payload = __spreadProps(__spreadValues({}, payload), { width: size2.width, height: size2.height });
-      }
-      if (sceneIndex) {
-        payload = __spreadProps(__spreadValues({}, payload), { sceneIndex });
-      }
-      return payload;
+      return Object.assign(payload, state);
     };
     this.appAttributesUpdateListener = (appId2) => {
-      var _a2, _b, _c;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(appId2, () => {
-        return autorun(() => {
-          const attrs = this.manager.attributes[appId2];
-          if (attrs) {
-            this.appEmitter.emit("attributesUpdate", attrs);
-          }
-        });
-      });
-      (_b = this.manager.refresher) == null ? void 0 : _b.add(this.stateKey, () => {
-        return autorun(() => {
-          var _a3, _b2, _c2;
-          const appState = (_a3 = this.appAttributes) == null ? void 0 : _a3.state;
-          if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b2 = this.box) == null ? void 0 : _b2.zIndex)) {
-            (_c2 = this.boxManager) == null ? void 0 : _c2.setZIndex(appId2, appState.zIndex);
-          }
-        });
-      });
-      (_c = this.manager.refresher) == null ? void 0 : _c.add(`${appId2}-fullPath`, () => {
-        return autorun(() => {
-          var _a3;
-          const fullPath = (_a3 = this.appAttributes) == null ? void 0 : _a3.fullPath;
-          this.setFocusScenePathHandler(fullPath);
-          if (this._prevFullPath !== fullPath) {
-            this.notifyPageStateChange();
-            this._prevFullPath = fullPath;
-          }
-        });
-      });
+      this.sideEffectManager.add(() => [
+        this.manager.refresher.add(appId2, () => {
+          return autorun(() => {
+            const attrs = this.manager.attributes[appId2];
+            if (attrs) {
+              this.appEmitter.emit("attributesUpdate", attrs);
+            }
+          });
+        }),
+        this.manager.refresher.add(this.stateKey, () => {
+          return autorun(() => {
+            var _a2, _b, _c;
+            const appState = (_a2 = this.appAttributes) == null ? void 0 : _a2.state;
+            if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b = this.box) == null ? void 0 : _b.zIndex)) {
+              (_c = this.boxManager) == null ? void 0 : _c.setZIndex(appId2, appState.zIndex);
+            }
+          });
+        }),
+        this.manager.refresher.add(`${appId2}-fullPath`, () => {
+          return autorun(() => {
+            var _a2;
+            const fullPath = (_a2 = this.appAttributes) == null ? void 0 : _a2.fullPath;
+            this.setFocusScenePathHandler(fullPath);
+            if (this.fullPath$.value !== fullPath) {
+              this.notifyPageStateChange();
+              this.fullPath$.setValue(fullPath);
+            }
+          });
+        })
+      ]);
     };
     this.setFocusScenePathHandler = debounce((fullPath) => {
       var _a2;
@@ -1454,6 +1672,62 @@ class AppProxy {
         this.appEmitter.emit("pageStateChange", this.pageState);
       }
     }, 50);
+    this.storeCamera = (camera) => {
+      this.store.updateAppAttributes(this.id, Fields.Camera, camera);
+    };
+    this.storeSize = (size2) => {
+      this.store.updateAppAttributes(this.id, Fields.Size, size2);
+    };
+    this.updateSize = (width, height) => {
+      const iSize = {
+        id: this.manager.uid,
+        width,
+        height
+      };
+      this.store.updateAppAttributes(this.id, Fields.Size, iSize);
+      this.size$.setValue(iSize);
+    };
+    this.moveCamera = (camera) => {
+      if (!this.camera$.value) {
+        return;
+      }
+      const nextCamera = __spreadProps(__spreadValues(__spreadValues({}, this.camera$.value), camera), { id: this.uid });
+      this.storeCamera(nextCamera);
+      this.camera$.setValue(nextCamera);
+    };
+    this.addCameraReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-camera`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
+      }, (camera) => {
+        if (camera) {
+          const rawCamera = toJS(camera);
+          if (!isEqual(rawCamera, this.camera$.value)) {
+            this.camera$.setValue(rawCamera);
+          }
+        }
+      })), "camera");
+    };
+    this.addSizeReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-size`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
+      }, (size2) => {
+        if (size2) {
+          const rawSize = toJS(size2);
+          if (!isEqual(rawSize, this.size$.value)) {
+            this.size$.setValue(rawSize);
+          }
+        }
+      })), "size");
+    };
+    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`;
@@ -1475,14 +1749,71 @@ class AppProxy {
       view: this.view,
       notifyPageStateChange: this.notifyPageStateChange
     });
-    this.sideEffectManager.add(() => {
-      return () => this._pageState.destroy();
-    });
-    this.sideEffectManager.add(() => {
-      return emitter.on("roomMembersChange", (members) => {
+    this.sideEffectManager.add(() => () => this._pageState.destroy());
+    this.camera$.setValue(toJS(this.appAttributes.camera));
+    this.size$.setValue(toJS(this.appAttributes.size));
+    this.addCameraReaction();
+    this.addSizeReaction();
+    this.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
+    this.sideEffectManager.add(() => [
+      this.syncCamera$.reaction((syncCamera) => {
+        if (!syncCamera) {
+          if (this.viewSync) {
+            this.viewSync.destroy();
+            this.viewSync = void 0;
+            this.sideEffectManager.flush("camera");
+            this.sideEffectManager.flush("size");
+          }
+        }
+      }),
+      this.whiteBoardViewCreated$.reaction((created) => {
+        if (created && this.box) {
+          if (!this.syncCamera$.value)
+            return;
+          combine([this.box$, this.view$]).subscribe(([box, view]) => {
+            if (box && view) {
+              if (!this.camera$.value) {
+                this.storeCamera({
+                  centerX: null,
+                  centerY: null,
+                  scale: 1,
+                  id: this.uid
+                });
+                this.camera$.setValue(toJS(this.appAttributes.camera));
+              }
+              if (!this.size$.value && box.stageRect) {
+                const initialRect = this.computedInitialRect(box.stageRect);
+                const width = (initialRect == null ? void 0 : initialRect.width) || box.stageRect.width;
+                const height = (initialRect == null ? void 0 : initialRect.height) || box.stageRect.height;
+                this.storeSize({
+                  id: this.uid,
+                  width,
+                  height
+                });
+                this.size$.setValue(toJS(this.appAttributes.size));
+              }
+              this.viewSync = new ViewSync({
+                uid: this.uid,
+                view$: this.view$,
+                camera$: this.camera$,
+                size$: this.size$,
+                stageRect$: box._stageRect$,
+                storeCamera: this.storeCamera,
+                storeSize: this.storeSize
+              });
+              this.sideEffectManager.add(() => () => {
+                var _a2;
+                return (_a2 = this.viewSync) == null ? void 0 : _a2.destroy();
+              });
+              this.whiteBoardViewCreated$.destroy();
+            }
+          });
+        }
+      }),
+      this.manager.members$.reaction((members) => {
         this.appEmitter.emit("roomMembersChange", members);
-      });
-    });
+      })
+    ]);
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -1510,7 +1841,7 @@ class AppProxy {
     }
   }
   get view() {
-    return this.manager.viewManager.getView(this.id);
+    return this.view$.value;
   }
   get viewIndex() {
     var _a;
@@ -1540,7 +1871,7 @@ class AppProxy {
     return fullPath;
   }
   setFullPath(path) {
-    this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
+    this.store.updateAppAttributes(this.id, Fields.FullPath, path);
   }
   async baseInsertApp(skipUpdate = false) {
     var _a;
@@ -1562,8 +1893,7 @@ class AppProxy {
     };
   }
   get box() {
-    var _a;
-    return (_a = this.boxManager) == null ? void 0 : _a.getBox(this.id);
+    return this.box$.value;
   }
   async setupApp(appId, skipUpdate, app, options, appOptions) {
     var _a;
@@ -1571,7 +1901,7 @@ class AppProxy {
     if (!this.boxManager) {
       throw new BoxManagerNotFoundError();
     }
-    const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+    const context = new AppContext(this.manager, appId, this, appOptions);
     this.appContext = context;
     try {
       emitter.once(`${appId}${Events.WindowCreated}`).then(async () => {
@@ -1589,17 +1919,27 @@ class AppProxy {
           this.appResult = result;
           appRegister.notifyApp(this.kind, "created", { appId, result });
           this.fixMobileSize();
+          this.setupDone();
         }, SETUP_APP_DELAY);
       });
-      (_a = this.boxManager) == null ? void 0 : _a.createBox({
+      const box = (_a = this.boxManager) == null ? void 0 : _a.createBox({
         appId,
         app,
         options,
         canOperate: this.manager.canOperate,
         smartPosition: this.isAddApp
       });
+      const registerParams = appRegister.registered.get(this.kind);
+      if (registerParams == null ? void 0 : registerParams.contentStyles) {
+        box == null ? void 0 : box.mountUserStyles(registerParams.contentStyles);
+      }
+      this.box$.setValue(box);
       if (this.isAddApp && this.box) {
         this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+        this.store.updateAppState(appId, AppAttributes.Size, {
+          width: this.box.intrinsicWidth,
+          height: this.box.intrinsicHeight
+        });
         this.boxManager.focusBox({ appId }, false);
       }
     } catch (error) {
@@ -1611,12 +1951,14 @@ class AppProxy {
     var _a, _b;
     const box = (_a = this.boxManager) == null ? void 0 : _a.getBox(this.id);
     if (box) {
-      (_b = this.boxManager) == null ? void 0 : _b.resizeBox({
-        appId: this.id,
-        width: box.intrinsicWidth + 1e-3,
-        height: box.intrinsicHeight + 1e-3,
-        skipUpdate: true
-      });
+      if (!box.minimized) {
+        (_b = this.boxManager) == null ? void 0 : _b.resizeBox({
+          appId: this.id,
+          width: box.intrinsicWidth + 1e-3,
+          height: box.intrinsicHeight + 1e-3,
+          skipUpdate: true
+        });
+      }
     }
   }
   async onSeek(time2) {
@@ -1718,6 +2060,8 @@ class AppProxy {
     }
   }
   setViewFocusScenePath() {
+    if (this.status === "destroyed")
+      return;
     const fullPath = this.getFullScenePath();
     if (fullPath && this.view) {
       setViewFocusScenePath(this.view, fullPath);
@@ -1726,6 +2070,7 @@ class AppProxy {
   }
   createView() {
     const view = this.viewManager.createView(this.id);
+    this.view$.setValue(view);
     this.setViewFocusScenePath();
     return view;
   }
@@ -1761,21 +2106,24 @@ class AppProxy {
       const fullPath = this._pageState.getFullPath(index2);
       if (fullPath) {
         this.setFullPath(fullPath);
+        setScenePath(this.manager.room, fullPath);
       }
     }
   }
   async destroy(needCloseBox, cleanAttrs, skipUpdate, error) {
-    var _a, _b, _c, _d;
+    var _a;
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
     try {
       await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
+      callbacks$1.emit("appClose", { appId: this.id, kind: this.kind, error });
       await this.appEmitter.emit("destroy", { error });
     } catch (error2) {
       console.error("[WindowManager]: notifyApp error", error2.message, error2.stack);
     }
     this.appEmitter.clearListeners();
+    this.sideEffectManager.flushAll();
     emitter.emit(`destroy-${this.id}`, { error });
     if (needCloseBox) {
       (_a = this.boxManager) == null ? void 0 : _a.closeBox(this.id, skipUpdate);
@@ -1789,11 +2137,7 @@ class AppProxy {
     this.appProxies.delete(this.id);
     this.viewManager.destroyView(this.id);
     this.manager.appStatus.delete(this.id);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(this.id);
-    (_c = this.manager.refresher) == null ? void 0 : _c.remove(this.stateKey);
-    (_d = this.manager.refresher) == null ? void 0 : _d.remove(`${this.id}-fullPath`);
-    this._prevFullPath = void 0;
-    this.sideEffectManager.flushAll();
+    this.valManager.destroy();
   }
   close() {
     return this.destroy(true, true, false);
@@ -1849,102 +2193,84 @@ const setDefaultCameraBound = (view) => {
     minContentMode: () => 0.1
   });
 };
-class CameraSynchronizer {
-  constructor(saveCamera) {
-    this.saveCamera = saveCamera;
-    this.onRemoteUpdate = throttle((camera, size2) => {
-      this.remoteCamera = camera;
-      this.remoteSize = size2;
-      if (this.remoteSize && this.rect) {
-        let scale2;
-        if (size2.width < size2.height) {
-          scale2 = this.rect.width / size2.width;
-        } else {
-          scale2 = this.rect.height / size2.height;
-        }
-        const nextScale = camera.scale * scale2;
-        const moveCamera = () => {
-          var _a;
-          return (_a = this.view) == null ? void 0 : _a.moveCamera({
-            centerX: camera.centerX,
-            centerY: camera.centerY,
-            scale: nextScale,
-            animationMode: AnimationMode.Immediately
-          });
-        };
-        delay(moveCamera, 10);
-      }
-    }, 50);
-  }
-  setRect(rect) {
-    this.rect = rect;
-    if (this.remoteCamera && this.remoteSize) {
-      this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
-    }
-  }
-  setView(view) {
-    this.view = view;
-  }
-  onLocalCameraUpdate(camera) {
-    this.saveCamera(camera);
-  }
-  onLocalSizeUpdate(size2) {
-    if (this.rect && this.view) {
-      const scale2 = this.rect.width / size2.width;
-      const nextScale = this.view.camera.scale * scale2;
-      this.view.moveCamera({
-        scale: nextScale,
-        animationMode: AnimationMode.Immediately
-      });
-    }
-  }
-}
 class MainViewProxy {
   constructor(manager) {
-    var _a;
     this.manager = manager;
     this.started = false;
     this.mainViewIsAddListener = false;
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
-    this.startListenWritableChange = () => {
-      this.sideEffectManager.add(() => {
-        return emitter.on("writableChange", (isWritable) => {
-          if (isWritable) {
-            this.ensureCameraAndSize();
-          }
+    this.camera$ = new Val(void 0);
+    this.size$ = new Val(void 0);
+    this.view$ = new Val(void 0);
+    this.createViewSync = () => {
+      var _a;
+      if (this.manager.boxManager && !this.viewSync) {
+        this.viewSync = new ViewSync({
+          uid: this.manager.uid,
+          view$: this.view$,
+          camera$: this.camera$,
+          size$: this.size$,
+          stageRect$: (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect$,
+          viewMode$: this.manager.windowManger.viewMode$,
+          storeCamera: this.storeCamera,
+          storeSize: this.storeSize
         });
-      });
+      }
+    };
+    this.startListenWritableChange = () => {
+      this.sideEffectManager.add(() => emitter.on("writableChange", (isWritable) => {
+        if (isWritable) {
+          this.ensureCameraAndSize();
+        }
+      }));
     };
     this.addCameraReaction = () => {
-      var _a2;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(Fields.MainViewCamera, this.cameraReaction);
+      this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
+      this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
+    };
+    this.storeCurrentCamera = () => {
+      const iCamera = this.view.camera;
+      this.storeCamera(__spreadValues({
+        id: this.manager.uid
+      }, iCamera));
+    };
+    this.storeCurrentSize = () => {
+      var _a;
+      const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+      if (rect) {
+        this.storeSize({
+          id: this.manager.uid,
+          width: rect.width,
+          height: rect.height
+        });
+      }
+    };
+    this.storeCamera = (camera) => {
+      this.store.setMainViewCamera(camera);
+    };
+    this.storeSize = (size2) => {
+      this.store.setMainViewSize(size2);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
-        if (camera && camera.id !== this.manager.uid) {
-          this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
+        if (camera) {
+          const rawCamera = toJS(camera);
+          if (!isEqual(rawCamera, this.camera$.value)) {
+            this.camera$.setValue(rawCamera);
+          }
         }
       }, { fireImmediately: true });
     };
-    this.sizeChangeHandler = debounce((size2) => {
-      if (size2) {
-        this.synchronizer.onLocalSizeUpdate(size2);
-      }
-    }, 30);
-    this.onUpdateContainerSizeRatio = () => {
-      const size2 = this.store.getMainViewSize();
-      this.sizeChangeHandler(size2);
-      if (size2.id === this.manager.uid) {
-        this.setCameraAndSize();
-      }
-    };
-    this.onCameraUpdatedByDevice = (camera) => {
-      this.synchronizer.onLocalCameraUpdate(camera);
-      const size2 = this.getStageSize();
-      if (size2 && !isEqual(size2, this.mainViewSize)) {
-        this.setMainViewSize(size2);
-      }
+    this.sizeReaction = () => {
+      return reaction(() => this.mainViewSize, (size2) => {
+        if (size2) {
+          const rawSize = toJS(size2);
+          if (!isEqual(rawSize, this.size$.value)) {
+            this.size$.setValue(rawSize);
+          }
+        }
+      }, { fireImmediately: true });
     };
     this.mainViewClickListener = () => {
       this.mainViewClickHandler();
@@ -1955,40 +2281,43 @@ class MainViewProxy {
     this.onCameraOrSizeUpdated = () => {
       callbacks$1.emit("cameraStateChange", this.cameraState);
     };
-    this.synchronizer = new CameraSynchronizer((camera) => this.store.setMainViewCamera(__spreadProps(__spreadValues({}, camera), { id: this.manager.uid })));
     this.mainView = this.createMainView();
-    this.moveCameraSizeByAttributes();
     emitter.once("mainViewMounted").then(() => {
       this.addMainViewListener();
       this.start();
       this.ensureCameraAndSize();
       this.startListenWritableChange();
     });
-    this.sideEffectManager.add(() => {
-      return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-    });
-    this.sideEffectManager.add(() => {
-      return emitter.on("startReconnect", () => {
-        if (!this.mainView.didRelease) {
-          this.mainView.release();
+    this.sideEffectManager.add(() => [
+      emitter.on("startReconnect", () => {
+        releaseView(this.mainView);
+      })
+    ]);
+    this.createViewSync();
+    this.sideEffectManager.add(() => emitter.on("focusedChange", ({ focused }) => {
+      if (focused === void 0) {
+        const scenePath = this.store.getMainViewScenePath();
+        if (scenePath) {
+          setScenePath(this.manager.room, scenePath);
         }
-      });
-    });
-    const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
-    if (rect) {
-      this.synchronizer.setRect(rect);
-    }
-    this.sideEffectManager.add(() => {
-      return emitter.on("playgroundSizeChange", (rect2) => {
-        this.synchronizer.setRect(rect2);
-        this.synchronizer.onLocalSizeUpdate(rect2);
-      });
-    });
+      }
+    }));
   }
   ensureCameraAndSize() {
+    var _a;
     if (!this.mainViewCamera || !this.mainViewSize) {
       this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
-      this.setCameraAndSize();
+      this.storeCamera(__spreadValues({
+        id: this.manager.uid
+      }, this.view.camera));
+      const stageRect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+      if (stageRect && !this.mainViewSize) {
+        this.storeSize({
+          id: this.manager.uid,
+          width: stageRect.width,
+          height: stageRect.height
+        });
+      }
     }
   }
   get mainViewCamera() {
@@ -2000,25 +2329,13 @@ class MainViewProxy {
   get didRelease() {
     return get(this.view, ["didRelease"]);
   }
-  moveCameraSizeByAttributes() {
-    this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
-  }
   start() {
     if (this.started)
       return;
-    this.sizeChangeHandler(this.mainViewSize);
     this.addCameraListener();
     this.addCameraReaction();
     this.started = true;
   }
-  setCameraAndSize() {
-    const stageSize = this.getStageSize();
-    if (stageSize) {
-      const camera = __spreadProps(__spreadValues({}, this.mainView.camera), { id: this.manager.uid });
-      const size2 = __spreadProps(__spreadValues({}, stageSize), { id: this.manager.uid });
-      this.store.setMainViewCameraAndSize(camera, size2);
-    }
-  }
   get view() {
     return this.mainView;
   }
@@ -2031,7 +2348,7 @@ class MainViewProxy {
     if (mainViewScenePath) {
       setViewFocusScenePath(mainView, mainViewScenePath);
     }
-    this.synchronizer.setView(mainView);
+    this.view$.setValue(mainView);
     return mainView;
   }
   onReconnect() {
@@ -2050,24 +2367,17 @@ class MainViewProxy {
   rebind() {
     const divElement = this.mainView.divElement;
     const disableCameraTransform = this.mainView.disableCameraTransform;
+    const camera = __spreadValues({}, this.mainView.camera);
     this.stop();
-    if (!this.didRelease) {
-      this.mainView.release();
-    }
+    releaseView(this.mainView);
     this.removeMainViewListener();
     this.mainView = this.createMainView();
     this.mainView.disableCameraTransform = disableCameraTransform;
     this.mainView.divElement = divElement;
+    this.mainView.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: AnimationMode.Immediately }));
     this.addMainViewListener();
     this.start();
   }
-  getStageSize() {
-    var _a;
-    const stage = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
-    if (stage) {
-      return { width: stage.width, height: stage.height };
-    }
-  }
   addMainViewListener() {
     if (this.mainViewIsAddListener)
       return;
@@ -2092,23 +2402,23 @@ class MainViewProxy {
     (_a = this.manager.boxManager) == null ? void 0 : _a.blurAllBox();
   }
   addCameraListener() {
-    this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
     this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
     this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   removeCameraListener() {
-    this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
     this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
     this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   stop() {
-    var _a, _b;
     this.removeCameraListener();
-    (_a = this.manager.refresher) == null ? void 0 : _a.remove(Fields.MainViewCamera);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(Fields.MainViewSize);
+    this.manager.refresher.remove(Fields.MainViewCamera);
+    this.manager.refresher.remove(Fields.MainViewSize);
     this.started = false;
   }
   destroy() {
+    this.camera$.destroy();
+    this.size$.destroy();
+    this.view$.destroy();
     this.removeMainViewListener();
     this.stop();
     this.sideEffectManager.flushAll();
@@ -2183,6 +2493,9 @@ class AppManager {
     this.mainViewScenesLength = 0;
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
+    this.sceneIndex$ = new Val(void 0);
+    this.focused$ = new Val(void 0);
+    this.members$ = new Val([]);
     this.sideEffectManager = new SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
@@ -2202,7 +2515,7 @@ class AppManager {
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
         if (sceneName) {
-          this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+          await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
         }
         await this.setMainViewSceneIndex(nextIndex);
       } else {
@@ -2334,8 +2647,7 @@ class AppManager {
       this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
     };
     this.addAppsChangeListener = () => {
-      var _a;
-      (_a = this.refresher) == null ? void 0 : _a.add("apps", () => {
+      this.refresher.add("apps", () => {
         return safeListenPropsUpdated(() => this.attributes.apps, () => {
           this.attributesUpdateCallback(this.attributes.apps);
         });
@@ -2350,26 +2662,27 @@ class AppManager {
       });
     };
     this.onMainViewIndexChange = (index2) => {
-      if (index2 !== void 0 && this._prevSceneIndex !== index2) {
+      if (index2 !== void 0 && this.sceneIndex$.value !== index2) {
         callbacks$1.emit("mainViewSceneIndexChange", index2);
         emitter.emit("changePageState");
         if (this.callbacksNode) {
           this.updateSceneState(this.callbacksNode);
         }
-        this._prevSceneIndex = index2;
+        this.sceneIndex$.setValue(index2);
       }
     };
     this.onFocusChange = (focused) => {
       var _a;
-      if (this._prevFocused !== focused) {
+      if (this.focused$.value !== focused) {
         callbacks$1.emit("focusedChange", focused);
-        emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-        this._prevFocused = focused;
+        emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+        this.focused$.setValue(focused);
         if (focused !== void 0) {
           (_a = this.boxManager) == null ? void 0 : _a.focusBox({ appId: focused });
           setTimeout(() => {
             const appProxy = this.appProxies.get(focused);
             if (appProxy) {
+              appProxy.onFocus();
               appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
             }
           }, 0);
@@ -2411,7 +2724,7 @@ class AppManager {
       }
     };
     this.closeAll = async () => {
-      for (const [_2, appProxy] of this.appProxies.entries()) {
+      for (const [_, appProxy] of this.appProxies.entries()) {
         await appProxy.destroy(true, false, true);
       }
     };
@@ -2430,14 +2743,17 @@ 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) {
+        emitter.emit("memberStateChange", toJS(state.memberState));
+      }
     };
     this.displayerWritableListener = (isReadonly) => {
       var _a, _b;
       const isWritable = !isReadonly;
-      const isManualWritable = this.windowManger.readonly === void 0 || this.windowManger.readonly === false;
+      const isManualWritable = this.windowManger.readonly === void 0 || !this.windowManger.readonly;
       if (this.windowManger.readonly === void 0) {
         (_a = this.boxManager) == null ? void 0 : _a.setReadonly(isReadonly);
       } else {
@@ -2446,13 +2762,10 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.emitAppIsWritableChange();
       });
-      if (isWritable === true) {
-        this.mainView.disableCameraTransform = false;
+      if (isWritable) {
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
-      } else {
-        this.mainView.disableCameraTransform = true;
       }
       emitter.emit("writableChange", isWritable);
     };
@@ -2508,9 +2821,10 @@ class AppManager {
     appRegister.setSyncRegisterApp((payload) => {
       this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
     });
+    this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
   }
   async onRootDirRemoved(needClose = true) {
-    this.setMainViewScenePath(INIT_DIR);
+    await this.setMainViewScenePath(INIT_DIR);
     this.createRootDirScenesCallback();
     for (const [id2, appProxy] of this.appProxies.entries()) {
       if (appProxy.view) {
@@ -2518,7 +2832,7 @@ class AppManager {
       }
     }
     this.mainViewProxy.rebind();
-    emitter.emit("rootDirRemoved");
+    await emitter.emit("rootDirRemoved");
     this.updateRootDirRemoving(false);
   }
   get eventName() {
@@ -2545,9 +2859,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) {
@@ -2557,7 +2868,7 @@ class AppManager {
     }
   }
   async onCreated() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
     await this.attributesUpdateCallback(this.attributes.apps);
     emitter.emit("updateManagerRect");
     boxEmitter.on("move", this.onBoxMove);
@@ -2567,32 +2878,32 @@ class AppManager {
     boxEmitter.on("boxStateChange", this.onBoxStateChange);
     this.addAppsChangeListener();
     this.addAppCloseListener();
-    (_a = this.refresher) == null ? void 0 : _a.add("maximized", () => {
+    this.refresher.add("maximized", () => {
       return autorun(() => {
         var _a2;
         const maximized = this.attributes.maximized;
         (_a2 = this.boxManager) == null ? void 0 : _a2.setMaximized(Boolean(maximized));
       });
     });
-    (_b = this.refresher) == null ? void 0 : _b.add("minimized", () => {
+    this.refresher.add("minimized", () => {
       return autorun(() => {
         const minimized = this.attributes.minimized;
         this.onMinimized(minimized);
       });
     });
-    (_c = this.refresher) == null ? void 0 : _c.add("mainViewIndex", () => {
+    this.refresher.add("mainViewIndex", () => {
       return autorun(() => {
         const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
         this.onMainViewIndexChange(mainSceneIndex);
       });
     });
-    (_d = this.refresher) == null ? void 0 : _d.add("focusedChange", () => {
+    this.refresher.add("focusedChange", () => {
       return autorun(() => {
         const focused = get(this.attributes, "focus");
         this.onFocusChange(focused);
       });
     });
-    (_e = this.refresher) == null ? void 0 : _e.add("registeredChange", () => {
+    this.refresher.add("registeredChange", () => {
       return autorun(() => {
         const registered = get(this.attributes, Fields.Registered);
         this.onRegisteredChange(registered);
@@ -2604,9 +2915,9 @@ class AppManager {
         return;
       this.resetScenePath(mainScenePath);
     }
-    this.displayerWritableListener(!((_f = this.room) == null ? void 0 : _f.isWritable));
+    this.displayerWritableListener(!((_a = this.room) == null ? void 0 : _a.isWritable));
     this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-    this._prevFocused = this.attributes.focus;
+    this.focused$.setValue(this.attributes.focus);
     this.sideEffectManager.add(() => {
       const redoUndo = new RedoUndo({
         mainView: () => this.mainViewProxy.view,
@@ -2623,13 +2934,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];
@@ -2657,6 +2972,7 @@ class AppManager {
   }
   setBoxManager(boxManager) {
     this.boxManager = boxManager;
+    this.mainViewProxy.createViewSync();
   }
   resetMaximized() {
     var _a;
@@ -2669,11 +2985,13 @@ class AppManager {
   bindMainView(divElement, disableCameraTransform) {
     const mainView = this.mainViewProxy.view;
     mainView.disableCameraTransform = disableCameraTransform;
-    mainView.divElement = divElement;
+    wait(30).then(() => {
+      mainView.divElement = divElement;
+      emitter.emit("mainViewMounted");
+    });
     if (!mainView.focusScenePath) {
       this.setMainViewFocusPath();
     }
-    emitter.emit("mainViewMounted");
   }
   setMainViewFocusPath(scenePath) {
     var _a;
@@ -2824,6 +3142,7 @@ class AppManager {
     }
   }
   async onReconnected() {
+    this.attributesUpdateCallback(this.attributes.apps);
     const appProxies = Array.from(this.appProxies.values());
     const reconnected = appProxies.map((appProxy) => {
       return appProxy.onReconnected();
@@ -2855,8 +3174,9 @@ class AppManager {
     }
     callbacks$1.clearListeners();
     this.sideEffectManager.flushAll();
-    this._prevFocused = void 0;
-    this._prevSceneIndex = void 0;
+    this.sceneIndex$.destroy();
+    this.focused$.destroy();
+    this.members$.destroy();
   }
 }
 /*! *****************************************************************************
@@ -3020,7 +3340,7 @@ var startLoop = function() {
   if (!isProcessing)
     onNextFrame(processFrame);
 };
-var clamp$1 = function(min, max) {
+var clamp$2 = function(min, max) {
   return function(v2) {
     return Math.max(Math.min(v2, max), min);
   };
@@ -3038,7 +3358,7 @@ var number = {
     return v2;
   }
 };
-var alpha = __assign(__assign({}, number), { transform: clamp$1(0, 1) });
+var alpha = __assign(__assign({}, number), { transform: clamp$2(0, 1) });
 var scale = __assign(__assign({}, number), { default: 1 });
 var createUnitType = function(unit) {
   return {
@@ -3062,7 +3382,7 @@ var progressPercentage = __assign(__assign({}, percent), { parse: function(v2) {
 var getValueFromFunctionString = function(value) {
   return value.substring(value.indexOf("(") + 1, value.lastIndexOf(")"));
 };
-var clampRgbUnit = clamp$1(0, 255);
+var clampRgbUnit = clamp$2(0, 255);
 var isRgba = function(v2) {
   return v2.red !== void 0;
 };
@@ -3701,190 +4021,423 @@ var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
   }
   return true;
 };
-var e$2 = Object.defineProperty, t$3 = Object.defineProperties, i$1 = Object.getOwnPropertyDescriptors, s$2 = Object.getOwnPropertySymbols, a$1 = Object.prototype.hasOwnProperty, o$2 = Object.prototype.propertyIsEnumerable, r$4 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, n$3 = (e2, t2) => {
-  for (var i2 in t2 || (t2 = {}))
-    a$1.call(t2, i2) && r$4(e2, i2, t2[i2]);
-  if (s$2)
-    for (var i2 of s$2(t2))
-      o$2.call(t2, i2) && r$4(e2, i2, t2[i2]);
-  return e2;
-};
-var v$3, w$2, C$3, y$2, E$3, z$2, B$2, _, N$3, M$3;
-(w$2 = v$3 || (v$3 = {})).Light = "light", w$2.Dark = "dark", w$2.Auto = "auto", (y$2 = C$3 || (C$3 = {})).Normal = "normal", y$2.Minimized = "minimized", y$2.Maximized = "maximized", (z$2 = E$3 || (E$3 = {})).DarkMode = "dark_mode", z$2.PrefersColorScheme = "prefers_color_scheme", z$2.Close = "close", z$2.Focus = "focus", z$2.Blur = "blur", z$2.IntrinsicMove = "intrinsic_move", z$2.IntrinsicResize = "intrinsic_resize", z$2.ZIndex = "z_index", z$2.State = "state", z$2.Minimized = "minimized", z$2.Maximized = "maximized", z$2.Readonly = "readonly", z$2.Destroyed = "destroyed", (_ = B$2 || (B$2 = {})).Close = "close", _.Maximize = "maximize", _.Minimize = "minimize", (M$3 = N$3 || (N$3 = {})).North = "n", M$3.South = "s", M$3.West = "w", M$3.East = "e", M$3.NorthWest = "nw", M$3.NorthEast = "ne", M$3.SouthEast = "se", M$3.SouthWest = "sw";
-function I$3(e2, t2, i2) {
-  return Math.min(Math.max(e2, t2), i2);
-}
-function k$1(e2) {
-  e2.stopPropagation(), e2.cancelable && e2.preventDefault();
-}
-function R$3(e2) {
-  return e2.touches ? e2.touches[0] : e2;
-}
-let D$2 = 1;
-function L$3() {
-  return "New Box " + D$2++;
+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 TELE_BOX_COLOR_SCHEME = /* @__PURE__ */ ((TELE_BOX_COLOR_SCHEME2) => {
+  TELE_BOX_COLOR_SCHEME2["Light"] = "light";
+  TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
+  TELE_BOX_COLOR_SCHEME2["Auto"] = "auto";
+  return TELE_BOX_COLOR_SCHEME2;
+})(TELE_BOX_COLOR_SCHEME || {});
+var TELE_BOX_STATE = /* @__PURE__ */ ((TELE_BOX_STATE2) => {
+  TELE_BOX_STATE2["Normal"] = "normal";
+  TELE_BOX_STATE2["Minimized"] = "minimized";
+  TELE_BOX_STATE2["Maximized"] = "maximized";
+  return TELE_BOX_STATE2;
+})(TELE_BOX_STATE || {});
+var TELE_BOX_EVENT = /* @__PURE__ */ ((TELE_BOX_EVENT2) => {
+  TELE_BOX_EVENT2["DarkMode"] = "dark_mode";
+  TELE_BOX_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
+  TELE_BOX_EVENT2["Close"] = "close";
+  TELE_BOX_EVENT2["Focus"] = "focus";
+  TELE_BOX_EVENT2["Blur"] = "blur";
+  TELE_BOX_EVENT2["IntrinsicMove"] = "intrinsic_move";
+  TELE_BOX_EVENT2["IntrinsicResize"] = "intrinsic_resize";
+  TELE_BOX_EVENT2["ZIndex"] = "z_index";
+  TELE_BOX_EVENT2["State"] = "state";
+  TELE_BOX_EVENT2["Minimized"] = "minimized";
+  TELE_BOX_EVENT2["Maximized"] = "maximized";
+  TELE_BOX_EVENT2["Readonly"] = "readonly";
+  TELE_BOX_EVENT2["Destroyed"] = "destroyed";
+  return TELE_BOX_EVENT2;
+})(TELE_BOX_EVENT || {});
+var TELE_BOX_DELEGATE_EVENT = /* @__PURE__ */ ((TELE_BOX_DELEGATE_EVENT2) => {
+  TELE_BOX_DELEGATE_EVENT2["Close"] = "close";
+  TELE_BOX_DELEGATE_EVENT2["Maximize"] = "maximize";
+  TELE_BOX_DELEGATE_EVENT2["Minimize"] = "minimize";
+  return TELE_BOX_DELEGATE_EVENT2;
+})(TELE_BOX_DELEGATE_EVENT || {});
+var TELE_BOX_RESIZE_HANDLE = /* @__PURE__ */ ((TELE_BOX_RESIZE_HANDLE2) => {
+  TELE_BOX_RESIZE_HANDLE2["North"] = "n";
+  TELE_BOX_RESIZE_HANDLE2["South"] = "s";
+  TELE_BOX_RESIZE_HANDLE2["West"] = "w";
+  TELE_BOX_RESIZE_HANDLE2["East"] = "e";
+  TELE_BOX_RESIZE_HANDLE2["NorthWest"] = "nw";
+  TELE_BOX_RESIZE_HANDLE2["NorthEast"] = "ne";
+  TELE_BOX_RESIZE_HANDLE2["SouthEast"] = "se";
+  TELE_BOX_RESIZE_HANDLE2["SouthWest"] = "sw";
+  return TELE_BOX_RESIZE_HANDLE2;
+})(TELE_BOX_RESIZE_HANDLE || {});
+const TeleBoxDragHandleType = "dh";
+function clamp$1(value, min, max) {
+  return Math.min(Math.max(value, min), max);
 }
-function T$3(e2) {
-  return Boolean(e2);
+function preventEvent$1(ev) {
+  ev.stopPropagation();
+  if (ev.cancelable) {
+    ev.preventDefault();
+  }
 }
-function V$3(e2) {
-  return !e2;
+let defaultBoxCount = 1;
+function getBoxDefaultName() {
+  return `New Box ${defaultBoxCount++}`;
 }
-class H$3 {
-  constructor({ readonly$: e2, state$: t2, title$: i2, buttons: s2, onEvent: a2, onDragStart: o2, namespace: r2 = "telebox" }) {
-    this.sideEffect = new SideEffectManager(), this.lastTitleBarClick = { timestamp: 0, clientX: -100, clientY: -100 }, this.handleTitleBarClick = (e3) => {
-      var t3;
-      if (this.readonly$.value)
-        return;
-      if (e3.button !== 0)
-        return;
-      if ((t3 = e3.target.dataset) == null ? void 0 : t3.teleTitleBarNoDblClick)
+class DefaultTitleBar {
+  constructor({
+    readonly$,
+    state$,
+    title$,
+    buttons,
+    onEvent,
+    onDragStart,
+    namespace = "telebox"
+  }) {
+    this.sideEffect = new SideEffectManager();
+    this.lastTitleBarClick = {
+      timestamp: 0,
+      clientX: -100,
+      clientY: -100
+    };
+    this.handleTitleBarClick = (ev) => {
+      var _a;
+      if (!ev.isPrimary || this.readonly$.value) {
         return;
-      k$1(e3);
-      const i3 = Date.now();
-      i3 - this.lastTitleBarClick.timestamp <= 500 ? Math.abs(e3.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(e3.clientY - this.lastTitleBarClick.clientY) <= 5 && this.onEvent && this.onEvent({ type: B$2.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarClick.timestamp = i3, this.lastTitleBarClick.clientX = e3.clientX, this.lastTitleBarClick.clientY = e3.clientY;
-    }, this.lastTitleBarTouch = { timestamp: 0, clientX: -100, clientY: -100 }, this.handleTitleBarTouch = (e3) => {
-      var t3;
-      if (this.readonly$.value)
+      }
+      if (ev.button !== 0) {
         return;
-      if ((t3 = e3.target.dataset) == null ? void 0 : t3.teleTitleBarNoDblClick)
+      }
+      if ((_a = ev.target.dataset) == null ? void 0 : _a.teleTitleBarNoDblClick) {
         return;
-      k$1(e3);
-      const i3 = Date.now(), { clientX: s3 = this.lastTitleBarTouch.clientX + 100, clientY: a3 = this.lastTitleBarTouch.clientY + 100 } = e3.touches[0] || {};
-      i3 - this.lastTitleBarTouch.timestamp <= 500 ? Math.abs(s3 - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(a3 - this.lastTitleBarTouch.clientY) <= 10 && this.onEvent && this.onEvent({ type: B$2.Maximize }) : this.onDragStart && this.onDragStart(e3), this.lastTitleBarTouch.timestamp = i3, this.lastTitleBarTouch.clientX = s3, this.lastTitleBarTouch.clientY = a3;
-    }, this.readonly$ = e2, this.state$ = t2, this.title$ = i2, this.onEvent = a2, this.onDragStart = o2, this.namespace = r2, this.buttons = s2 || [{ type: B$2.Minimize, iconClassName: this.wrapClassName("titlebar-icon-minimize") }, { type: B$2.Maximize, iconClassName: this.wrapClassName("titlebar-icon-maximize"), isActive: (e3) => e3 === C$3.Maximized }, { type: B$2.Close, iconClassName: this.wrapClassName("titlebar-icon-close") }], this.$dragArea = this.renderDragArea();
+      }
+      preventEvent$1(ev);
+      const now = Date.now();
+      if (now - this.lastTitleBarClick.timestamp <= 500) {
+        if (Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5) {
+          if (this.onEvent) {
+            this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+          }
+        }
+      } else if (this.onDragStart) {
+        this.onDragStart(ev);
+      }
+      this.lastTitleBarClick.timestamp = now;
+      this.lastTitleBarClick.clientX = ev.clientX;
+      this.lastTitleBarClick.clientY = ev.clientY;
+    };
+    this.readonly$ = readonly$;
+    this.state$ = state$;
+    this.title$ = title$;
+    this.onEvent = onEvent;
+    this.onDragStart = onDragStart;
+    this.namespace = namespace;
+    this.buttons = buttons || [
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Minimize,
+        iconClassName: this.wrapClassName("titlebar-icon-minimize")
+      },
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Maximize,
+        iconClassName: this.wrapClassName("titlebar-icon-maximize"),
+        isActive: (state) => state === TELE_BOX_STATE.Maximized
+      },
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Close,
+        iconClassName: this.wrapClassName("titlebar-icon-close")
+      }
+    ];
+    this.$dragArea = this.renderDragArea();
   }
   render() {
     if (!this.$titleBar) {
-      this.$titleBar = document.createElement("div"), this.$titleBar.className = this.wrapClassName("titlebar");
-      const e2 = document.createElement("div");
-      e2.className = this.wrapClassName("title-area"), e2.dataset.teleBoxHandle = "dh";
-      const t2 = document.createElement("h1");
-      t2.className = this.wrapClassName("title"), t2.dataset.teleBoxHandle = "dh", e2.appendChild(t2), e2.appendChild(this.$dragArea);
-      const i2 = document.createElement("div");
-      i2.className = this.wrapClassName("titlebar-btns"), this.buttons.forEach(({ iconClassName: e3 }, t3) => {
-        const s2 = String(t3), a2 = document.createElement("button");
-        a2.className = `${this.wrapClassName("titlebar-btn")} ${e3}`, a2.dataset.teleTitleBarBtnIndex = s2, a2.dataset.teleTitleBarNoDblClick = "true", i2.appendChild(a2);
-      }), this.sideEffect.addDisposer(this.title$.subscribe((e3) => {
-        t2.textContent = e3, t2.title = e3;
-      }), "render-title"), this.sideEffect.addDisposer(this.state$.subscribe((e3) => {
-        this.buttons.forEach((t3, s2) => {
-          var a2;
-          t3.isActive && ((a2 = i2.children[s2]) == null || a2.classList.toggle("is-active", t3.isActive(e3)));
+      this.$titleBar = document.createElement("div");
+      this.$titleBar.className = this.wrapClassName("titlebar");
+      const $titleArea = document.createElement("div");
+      $titleArea.className = this.wrapClassName("title-area");
+      $titleArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+      const $title = document.createElement("h1");
+      $title.className = this.wrapClassName("title");
+      $title.dataset.teleBoxHandle = TeleBoxDragHandleType;
+      $titleArea.appendChild($title);
+      $titleArea.appendChild(this.$dragArea);
+      const $buttonsContainer = document.createElement("div");
+      $buttonsContainer.className = this.wrapClassName("titlebar-btns");
+      this.buttons.forEach(({ iconClassName }, i2) => {
+        const teleTitleBarBtnIndex = String(i2);
+        const $btn = document.createElement("button");
+        $btn.className = `${this.wrapClassName("titlebar-btn")} ${iconClassName}`;
+        $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
+        $btn.dataset.teleTitleBarNoDblClick = "true";
+        $buttonsContainer.appendChild($btn);
+      });
+      this.sideEffect.addDisposer(this.title$.subscribe((title) => {
+        $title.textContent = title;
+        $title.title = title;
+      }), "render-title");
+      this.sideEffect.addDisposer(this.state$.subscribe((state) => {
+        this.buttons.forEach((btn, i2) => {
+          var _a;
+          if (btn.isActive) {
+            (_a = $buttonsContainer.children[i2]) == null ? void 0 : _a.classList.toggle("is-active", btn.isActive(state));
+          }
         });
-      }), "render-state-btns"), this.sideEffect.addEventListener(i2, "click", (e3) => {
-        var t3;
-        if (this.readonly$.value)
+      }), "render-state-btns");
+      this.sideEffect.addEventListener($buttonsContainer, "pointerup", (ev) => {
+        var _a;
+        if (!ev.isPrimary || this.readonly$.value) {
           return;
-        const i3 = e3.target, s2 = Number((t3 = i3.dataset) == null ? void 0 : t3.teleTitleBarBtnIndex);
-        if (!Number.isNaN(s2) && s2 < this.buttons.length) {
-          k$1(e3);
-          const t4 = this.buttons[s2];
-          this.onEvent && this.onEvent({ type: t4.type, value: t4.value });
         }
-      }, {}, "render-btns-container-click"), this.$titleBar.appendChild(e2), this.$titleBar.appendChild(i2);
+        const target = ev.target;
+        const teleTitleBarBtnIndex = Number((_a = target.dataset) == null ? void 0 : _a.teleTitleBarBtnIndex);
+        if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
+          preventEvent$1(ev);
+          const btn = this.buttons[teleTitleBarBtnIndex];
+          if (this.onEvent) {
+            this.onEvent({
+              type: btn.type,
+              value: btn.value
+            });
+          }
+        }
+      }, {}, "render-btns-container-click");
+      this.$titleBar.appendChild($titleArea);
+      this.$titleBar.appendChild($buttonsContainer);
     }
     return this.$titleBar;
   }
   renderDragArea() {
-    const e2 = document.createElement("div");
-    return e2.className = this.wrapClassName("drag-area"), e2.dataset.teleBoxHandle = "dh", this.sideEffect.addEventListener(e2, "mousedown", this.handleTitleBarClick), this.sideEffect.addEventListener(e2, "touchstart", this.handleTitleBarTouch, { passive: true }), e2;
+    const $dragArea = document.createElement("div");
+    $dragArea.className = this.wrapClassName("drag-area");
+    $dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+    this.sideEffect.addEventListener($dragArea, "pointerdown", this.handleTitleBarClick);
+    return $dragArea;
   }
   dragHandle() {
     return this.$titleBar;
   }
-  wrapClassName(e2) {
-    return `${this.namespace}-${e2}`;
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
   }
   destroy() {
-    this.sideEffect.flushAll(), this.$titleBar && (this.$titleBar = void 0, this.onDragStart = void 0, this.onEvent = void 0);
-  }
-}
-class A$2 {
-  constructor({ namespace: e2, rootRect$: t2, ratio$: i2, highlightStage$: s2, root$: a2 }) {
-    this._sideEffect = new SideEffectManager(), this.namespace = e2, this.highlightStage$ = s2, this.stageRect$ = combine([t2, i2], ([e3, t3]) => {
-      if (t3 <= 0 || e3.width <= 0 || e3.height <= 0)
-        return e3;
-      const i3 = e3.width * t3;
-      if (i3 === e3.height)
-        return e3;
-      if (i3 < e3.height)
-        return { x: 0, y: (e3.height - i3) / 2, width: e3.width, height: i3 };
-      const s3 = e3.height / t3;
-      return { x: (e3.width - s3) / 2, y: 0, width: s3, height: e3.height };
-    }, { compare: shallowequal }), this._sideEffect.addDisposer(combine([a2, s2]).subscribe(([e3, t3]) => {
-      var i3;
-      e3 && t3 ? e3.appendChild(this.render()) : ((i3 = this.$boxStage) == null ? void 0 : i3.parentNode) && this.$boxStage.remove();
-    }));
+    this.sideEffect.flushAll();
+    if (this.$titleBar) {
+      this.$titleBar = void 0;
+      this.onDragStart = void 0;
+      this.onEvent = void 0;
+    }
   }
-  render() {
-    if (this.$boxStage)
-      return this.$boxStage;
-    const e2 = document.createElement("div");
-    e2.className = this.wrapClassName("box-stage-container");
-    const t2 = document.createElement("div");
-    t2.className = this.wrapClassName("box-stage-mask");
-    const i2 = document.createElement("div");
-    i2.className = this.wrapClassName("box-stage-mask");
-    const s2 = document.createElement("div");
-    s2.className = this.wrapClassName("box-stage-frame");
-    const [a2, o2, r2, n2] = ["M0 8V0h8v2H2v6H0Z", "M8 8V0H0v2h6v6h2Z", "M0 0v8h8V6H2V0H0Z", "M8 0v8H0V6h6V0h2Z"].map((e3, t3) => {
-      const i3 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      i3.setAttribute("viewBox", "0 0 8 8"), i3.setAttribute("class", `${this.wrapClassName("box-stage-frame-corner")} is-${t3}`);
-      const s3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
-      return s3.setAttribute("d", e3), s3.setAttribute("fill", "#3381FF"), i3.appendChild(s3), i3;
-    });
-    return s2.appendChild(a2), s2.appendChild(r2), s2.appendChild(o2), s2.appendChild(n2), e2.appendChild(t2), e2.appendChild(s2), e2.appendChild(i2), this._sideEffect.addDisposer(this.highlightStage$.subscribe((t3) => {
-      e2.classList.toggle("is-active", t3);
-    })), this._sideEffect.addDisposer(combine([this.highlightStage$, this.stageRect$]).subscribe(([s3, a3]) => {
-      s3 && (a3.x > 0 ? (e2.style.flexDirection = "row", t2.style.width = `${a3.x}px`, t2.style.height = "", i2.style.width = `${a3.x}px`, i2.style.height = "") : a3.y > 0 && (e2.style.flexDirection = "column", t2.style.width = "", t2.style.height = `${a3.y}px`, i2.style.width = "", i2.style.height = `${a3.y}px`));
-    })), this.$boxStage = e2, e2;
+}
+function calcStageRect([rootRect, ratio]) {
+  if (ratio <= 0 || rootRect.width <= 0 || rootRect.height <= 0) {
+    return rootRect;
   }
-  destroy() {
-    this._sideEffect.flushAll();
+  const preferredHeight = rootRect.width * ratio;
+  if (preferredHeight === rootRect.height) {
+    return rootRect;
   }
-  wrapClassName(e2) {
-    return `${this.namespace}-${e2}`;
-  }
-}
-const W$3 = window.ResizeObserver || ResizeObserver$2;
-class Y$3 {
-  constructor({ id: e2 = genUID(), title: t2 = L$3(), namespace: i2 = "telebox", visible: s2 = true, width: a2 = 0.5, height: o2 = 0.5, minWidth: r2 = 0, minHeight: n2 = 0, x: l2 = 0.1, y: $ = 0.1, resizable: b2 = true, draggable: v2 = true, ratio: w2 = -1, focus: y2 = false, zIndex: z2 = 100, titleBar: B2, content: _2, footer: N2, styles: M2, highlightStage: S2 = null, darkMode$: k2, fence$: R2, minimized$: D2, maximized$: T2, readonly$: V2, root$: W2, rootRect$: Y2, managerStageRect$: X2, stageRatio$: P2, collectorRect$: O2, managerHighlightStage$: j2 }) {
-    this.events = new Emittery(), this._delegateEvents = new Emittery(), this.handleTrackStart = (e3) => {
-      var t3;
-      return (t3 = this._handleTrackStart) == null ? void 0 : t3.call(this, e3);
-    }, this._sideEffect = new SideEffectManager(), this.id = e2, this.namespace = i2;
-    const Z2 = new ValManager();
-    this._sideEffect.addDisposer(() => Z2.destroy());
-    const F2 = new Val(t2), G2 = new Val(s2), J2 = new Val(b2), q2 = new Val(v2), Q2 = new Val(w2), K2 = new Val(z2), U2 = new Val(y2), ee2 = new Val(_2), te2 = new Val(N2), ie2 = new Val(M2), se2 = combine([D2, T2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal), ae2 = new Val({ width: I$3(r2, 0, 1), height: I$3(n2, 0, 1) }, { compare: shallowequal }), oe2 = combine([ae2, X2], ([e3, t3]) => ({ width: e3.width * t3.width, height: e3.height * t3.height }), { compare: shallowequal }), re2 = new Val({ width: a2, height: o2 }, { compare: shallowequal });
-    this._sideEffect.addDisposer(ae2.reaction((e3, t3) => {
-      re2.setValue({ width: Math.max(a2, e3.width), height: Math.max(o2, e3.height) }, t3);
+  if (preferredHeight < rootRect.height) {
+    return {
+      x: 0,
+      y: (rootRect.height - preferredHeight) / 2,
+      width: rootRect.width,
+      height: preferredHeight
+    };
+  }
+  const preferredWidth = rootRect.height / ratio;
+  return {
+    x: (rootRect.width - preferredWidth) / 2,
+    y: 0,
+    width: preferredWidth,
+    height: rootRect.height
+  };
+}
+const ResizeObserver$1$1 = window.ResizeObserver || ResizeObserver$3;
+class TeleBox {
+  constructor({
+    id: id2 = genUID(),
+    title = getBoxDefaultName(),
+    namespace = "telebox",
+    visible = true,
+    width = 0.5,
+    height = 0.5,
+    minWidth = 0,
+    minHeight = 0,
+    x: x2 = 0.1,
+    y: y2 = 0.1,
+    resizable = true,
+    draggable = true,
+    boxRatio = -1,
+    focus = false,
+    zIndex = 100,
+    stageRatio = null,
+    enableShadowDOM = true,
+    titleBar,
+    content,
+    stage,
+    footer,
+    styles: styles2,
+    userStyles,
+    bodyStyle = null,
+    stageStyle = null,
+    darkMode$,
+    fence$,
+    minimized$,
+    maximized$,
+    readonly$,
+    root,
+    rootRect$,
+    managerStageRect$,
+    managerStageRatio$,
+    defaultBoxBodyStyle$,
+    defaultBoxStageStyle$,
+    collectorRect$
+  }) {
+    this.events = new Emittery();
+    this._delegateEvents = new Emittery();
+    this.handleTrackStart = (ev) => {
+      var _a;
+      return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, ev);
+    };
+    this._sideEffect = new SideEffectManager();
+    this.id = id2;
+    this.namespace = namespace;
+    this.enableShadowDOM = enableShadowDOM;
+    const valManager = new ValManager();
+    this._sideEffect.addDisposer(() => valManager.destroy());
+    const title$ = new Val(title);
+    const visible$ = new Val(visible);
+    const resizable$ = new Val(resizable);
+    const draggable$ = new Val(draggable);
+    const boxRatio$ = new Val(boxRatio);
+    const zIndex$ = new Val(zIndex);
+    const focus$ = new Val(focus);
+    const state$ = combine([minimized$, maximized$], ([minimized, maximized]) => minimized ? TELE_BOX_STATE.Minimized : maximized ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    const minSize$ = new Val({
+      width: clamp$1(minWidth, 0, 1),
+      height: clamp$1(minHeight, 0, 1)
+    }, { compare: shallowequal });
+    const pxMinSize$ = combine([minSize$, managerStageRect$], ([minSize, managerStageRect]) => ({
+      width: minSize.width * managerStageRect.width,
+      height: minSize.height * managerStageRect.height
+    }), { compare: shallowequal });
+    const intrinsicSize$ = new Val({ width, height }, { compare: shallowequal });
+    this._sideEffect.addDisposer(minSize$.reaction((minSize, skipUpdate) => {
+      intrinsicSize$.setValue({
+        width: Math.max(width, minSize.width),
+        height: Math.max(height, minSize.height)
+      }, skipUpdate);
+    }));
+    const intrinsicCoord$ = new Val({ x: x2, y: y2 }, { compare: shallowequal });
+    const pxIntrinsicSize$ = combine([intrinsicSize$, managerStageRect$], ([size2, managerStageRect]) => ({
+      width: managerStageRect.width * size2.width,
+      height: managerStageRect.height * size2.height
+    }), { compare: shallowequal });
+    const pxIntrinsicCoord$ = combine([intrinsicCoord$, managerStageRect$], ([intrinsicCoord, managerStageRect]) => ({
+      x: intrinsicCoord.x * managerStageRect.width,
+      y: intrinsicCoord.y * managerStageRect.height
+    }), { compare: shallowequal });
+    const bodyStyle$ = new Val(bodyStyle);
+    const stageStyle$ = new Val(stageStyle);
+    const contentRoot$ = new Val(null);
+    const bodyRect$ = new Val(managerStageRect$.value, {
+      compare: shallowequal
+    });
+    const stageRatio$ = new Val(stageRatio);
+    const finalStageRatio$ = combine([stageRatio$, managerStageRatio$], ([stageRatio2, managerStageRatio]) => stageRatio2 != null ? stageRatio2 : managerStageRatio);
+    const stageRect$ = combine([bodyRect$, finalStageRatio$], calcStageRect, { compare: shallowequal });
+    const propsValConfig = {
+      darkMode: darkMode$,
+      fence: fence$,
+      minimized: minimized$,
+      maximized: maximized$,
+      readonly: readonly$,
+      rootRect: rootRect$,
+      managerStageRect: managerStageRect$,
+      managerStageRatio: managerStageRatio$,
+      defaultBoxBodyStyle: defaultBoxBodyStyle$,
+      defaultBoxStageStyle: defaultBoxStageStyle$,
+      collectorRect: collectorRect$
+    };
+    withReadonlyValueEnhancer(this, propsValConfig);
+    const myReadonlyValConfig = {
+      zIndex: zIndex$,
+      focus: focus$,
+      state: state$,
+      minSize: minSize$,
+      pxMinSize: pxMinSize$,
+      intrinsicSize: intrinsicSize$,
+      intrinsicCoord: intrinsicCoord$,
+      pxIntrinsicSize: pxIntrinsicSize$,
+      pxIntrinsicCoord: pxIntrinsicCoord$,
+      bodyRect: bodyRect$,
+      stageRect: stageRect$
+    };
+    withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
+    const valConfig = {
+      title: title$,
+      visible: visible$,
+      resizable: resizable$,
+      draggable: draggable$,
+      boxRatio: boxRatio$,
+      stageRatio: stageRatio$,
+      bodyStyle: bodyStyle$,
+      stageStyle: stageStyle$
+    };
+    withValueEnhancer(this, valConfig, valManager);
+    this.titleBar = titleBar || new DefaultTitleBar({
+      readonly$,
+      state$,
+      title$,
+      namespace: this.namespace,
+      onDragStart: (event) => {
+        var _a;
+        return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
+      },
+      onEvent: (event) => this._delegateEvents.emit(event.type)
+    });
+    this._sideEffect.addDisposer(boxRatio$.subscribe((boxRatio2) => {
+      if (boxRatio2 > 0) {
+        this.transform(pxIntrinsicCoord$.value.x, pxIntrinsicCoord$.value.y, pxIntrinsicSize$.value.width, pxIntrinsicSize$.value.height);
+      }
+    }));
+    this._sideEffect.addDisposer(fence$.subscribe((fence) => {
+      if (fence) {
+        this.move(pxIntrinsicCoord$.value.x, pxIntrinsicCoord$.value.y);
+      }
     }));
-    const ne2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), he2 = combine([re2, X2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), le2 = combine([ne2, X2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), de2 = new Val(S2), ce2 = combine([T2, de2, j2], ([e3, t3, i3]) => t3 === null ? i3 && e3 : t3), me2 = new Val(null), ue2 = new Val(Y2.value, { compare: shallowequal }), xe2 = new A$2({ namespace: i2, root$: me2, rootRect$: ue2, ratio$: P2, highlightStage$: ce2 });
-    this._sideEffect.addDisposer(() => xe2.destroy());
-    withReadonlyValueEnhancer(this, { darkMode: k2, fence: R2, minimized: D2, maximized: T2, readonly: V2, rootRect: Y2, managerStageRect: X2, collectorRect: O2 });
-    const ge2 = { zIndex: K2, focus: U2, $userContent: ee2, $userFooter: te2, $userStyles: ie2, state: se2, minSize: ae2, pxMinSize: oe2, intrinsicSize: re2, intrinsicCoord: ne2, pxIntrinsicSize: he2, pxIntrinsicCoord: le2, highlightStage: ce2, boxHighlightStage: de2, contentRect: ue2, contentStageRect: xe2.stageRect$ };
-    withReadonlyValueEnhancer(this, ge2, Z2);
-    withValueEnhancer(this, { title: F2, visible: G2, resizable: J2, draggable: q2, ratio: Q2 }, Z2), this.titleBar = B2 || new H$3({ readonly$: V2, state$: se2, title$: F2, namespace: this.namespace, onDragStart: (e3) => {
-      var t3;
-      return (t3 = this._handleTrackStart) == null ? void 0 : t3.call(this, e3);
-    }, onEvent: (e3) => this._delegateEvents.emit(e3.type) }), this._sideEffect.addDisposer(Q2.subscribe((e3) => {
-      e3 > 0 && this.transform(le2.value.x, le2.value.y, he2.value.width, he2.value.height, true);
-    })), this._sideEffect.addDisposer(R2.subscribe((e3) => {
-      e3 && this.move(le2.value.x, le2.value.y, true);
-    })), this.$box = this.render(), me2.setValue(this.$content.parentElement);
-    const pe2 = (e3, t3) => {
-      this._sideEffect.addDisposer(e3.reaction((e4, i3) => {
-        i3 || this.events.emit(t3, e4);
+    this.$box = this._render();
+    contentRoot$.setValue(this.$content.parentElement);
+    content && this.mountContent(content);
+    stage && this.mountStage(stage);
+    footer && this.mountFooter(footer);
+    styles2 && this.mountStyles(styles2);
+    userStyles && this.mountUserStyles(userStyles);
+    root.appendChild(this.$box);
+    const watchValEvent = (val, event) => {
+      this._sideEffect.addDisposer(val.reaction((v2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(event, v2);
+        }
       }));
     };
-    pe2(k2, E$3.DarkMode), pe2(V2, E$3.Readonly), pe2(K2, E$3.ZIndex), pe2(D2, E$3.Minimized), pe2(T2, E$3.Maximized), pe2(se2, E$3.State), pe2(re2, E$3.IntrinsicResize), pe2(ne2, E$3.IntrinsicMove), this._sideEffect.addDisposer([G2.reaction((e3, t3) => {
-      t3 || e3 || this.events.emit(E$3.Close);
-    }), U2.reaction((e3, t3) => {
-      t3 || this.events.emit(e3 ? E$3.Focus : E$3.Blur);
-    }), W2.subscribe((e3) => {
-      e3 ? e3.appendChild(this.$box) : this.$box.parentNode && this.$box.remove();
-    })]);
+    watchValEvent(darkMode$, TELE_BOX_EVENT.DarkMode);
+    watchValEvent(readonly$, TELE_BOX_EVENT.Readonly);
+    watchValEvent(zIndex$, TELE_BOX_EVENT.ZIndex);
+    watchValEvent(minimized$, TELE_BOX_EVENT.Minimized);
+    watchValEvent(maximized$, TELE_BOX_EVENT.Maximized);
+    watchValEvent(state$, TELE_BOX_EVENT.State);
+    watchValEvent(intrinsicSize$, TELE_BOX_EVENT.IntrinsicResize);
+    watchValEvent(intrinsicCoord$, TELE_BOX_EVENT.IntrinsicMove);
+    this._sideEffect.addDisposer([
+      visible$.reaction((visible2, skipUpdate) => {
+        if (!skipUpdate && !visible2) {
+          this.events.emit(TELE_BOX_EVENT.Close);
+        }
+      }),
+      focus$.reaction((focus2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur);
+        }
+      })
+    ]);
   }
   get minWidth() {
     return this._minSize$.value.width;
@@ -3892,14 +4445,17 @@ class Y$3 {
   get minHeight() {
     return this._minSize$.value.height;
   }
-  setMinWidth(e2, t2 = false) {
-    this._minSize$.setValue({ width: e2, height: this.minHeight }, t2);
+  setMinWidth(minWidth, skipUpdate = false) {
+    this._minSize$.setValue({ width: minWidth, height: this.minHeight }, skipUpdate);
   }
-  setMinHeight(e2, t2 = false) {
-    this._minSize$.setValue({ width: this.minWidth, height: e2 }, t2);
+  setMinHeight(minHeight, skipUpdate = false) {
+    this._minSize$.setValue({ width: this.minWidth, height: minHeight }, skipUpdate);
   }
-  resize(e2, t2, i2 = false) {
-    this._intrinsicSize$.setValue({ width: Math.max(e2, this.minWidth), height: Math.max(t2, this.minHeight) }, i2);
+  resize(width, height, skipUpdate = false) {
+    this._intrinsicSize$.setValue({
+      width: Math.max(width, this.minWidth),
+      height: Math.max(height, this.minHeight)
+    }, skipUpdate);
   }
   get intrinsicX() {
     return this._intrinsicCoord$.value.x;
@@ -3913,361 +4469,853 @@ class Y$3 {
   get intrinsicHeight() {
     return this._intrinsicSize$.value.height;
   }
-  move(e2, t2, i2 = false) {
-    let s2, a2;
-    const o2 = this.managerStageRect, r2 = this.pxIntrinsicSize;
-    if (this.fence)
-      s2 = I$3(e2, o2.x, o2.x + o2.width - r2.width), a2 = I$3(t2, o2.y, o2.y + o2.height - r2.height);
-    else {
-      const i3 = this.rootRect;
-      s2 = I$3(e2, i3.x - r2.width + 20, i3.x + i3.width - 20), a2 = I$3(t2, i3.y, i3.y + i3.height - 20);
-    }
-    this._intrinsicCoord$.setValue({ x: (s2 - o2.x) / o2.width, y: (a2 - o2.y) / o2.height }, i2);
+  move(x2, y2, skipUpdate = false) {
+    let safeX;
+    let safeY;
+    const managerStageRect = this.managerStageRect;
+    const pxIntrinsicSize = this.pxIntrinsicSize;
+    if (this.fence) {
+      safeX = clamp$1(x2, 0, managerStageRect.width - pxIntrinsicSize.width);
+      safeY = clamp$1(y2, 0, managerStageRect.height - pxIntrinsicSize.height);
+    } else {
+      safeX = clamp$1(x2, -(pxIntrinsicSize.width - 120), 0 + managerStageRect.width - 20);
+      safeY = clamp$1(y2, 0, 0 + managerStageRect.height - 20);
+    }
+    this._intrinsicCoord$.setValue({
+      x: safeX / managerStageRect.width,
+      y: safeY / managerStageRect.height
+    }, skipUpdate);
+  }
+  transform(x2, y2, width, height, skipUpdate = false) {
+    const managerStageRect = this.managerStageRect;
+    width = Math.max(width, this.pxMinSize.width);
+    height = Math.max(height, this.pxMinSize.height);
+    if (this.boxRatio > 0) {
+      const newHeight = this.boxRatio * width;
+      if (y2 !== this.pxIntrinsicCoord.y) {
+        y2 -= newHeight - height;
+      }
+      height = newHeight;
+    }
+    if (y2 < 0) {
+      y2 = 0;
+      height = this.pxIntrinsicSize.height;
+    }
+    this.move(x2, y2, skipUpdate);
+    this._intrinsicSize$.setValue({
+      width: width / managerStageRect.width,
+      height: height / managerStageRect.height
+    }, skipUpdate);
+  }
+  mountContent(content) {
+    var _a;
+    (_a = this.$authorContent) == null ? void 0 : _a.remove();
+    this.$authorContent = content;
+    this.$content.appendChild(content);
   }
-  transform(e2, t2, i2, s2, a2 = false) {
-    const o2 = this.managerStageRect, r2 = this.rootRect;
-    if (i2 = Math.max(i2, this.pxMinSize.width), s2 = Math.max(s2, this.pxMinSize.height), this.ratio > 0) {
-      const e3 = this.ratio * i2;
-      t2 !== this.pxIntrinsicCoord.y && (t2 -= e3 - s2), s2 = e3;
+  unmountContent() {
+    if (this.$authorContent) {
+      this.$authorContent.remove();
+      this.$authorContent = void 0;
     }
-    t2 < r2.y && (t2 = r2.y, s2 = this.pxIntrinsicSize.height), this.move(e2, t2, a2), this._intrinsicSize$.setValue({ width: i2 / o2.width, height: s2 / o2.height }, a2);
   }
-  mountContent(e2) {
-    this._$userContent$.setValue(e2);
+  mountStage(stage) {
+    var _a;
+    (_a = this.$authorStage) == null ? void 0 : _a.remove();
+    this.$authorStage = stage;
+    if (!this.$stage) {
+      this.$stage = this._renderStage();
+    }
+    this.$stage.appendChild(stage);
+    if (!this.$stage.parentElement) {
+      this.$body.appendChild(this.$stage);
+    }
   }
-  unmountContent() {
-    this._$userContent$.setValue(void 0);
+  unmountStage() {
+    var _a;
+    if (this.$authorStage) {
+      this.$authorStage.remove();
+      this.$authorStage = void 0;
+    }
+    (_a = this.$stage) == null ? void 0 : _a.remove();
   }
-  mountFooter(e2) {
-    this._$userFooter$.setValue(e2);
+  mountFooter(footer) {
+    var _a;
+    (_a = this.$authorFooter) == null ? void 0 : _a.remove();
+    this.$authorFooter = footer;
+    this.$footer.appendChild(footer);
   }
   unmountFooter() {
-    this._$userFooter$.setValue(void 0);
-  }
-  getUserStyles() {
-    return this.$userStyles;
+    if (this.$authorFooter) {
+      this.$authorFooter.remove();
+      this.$authorFooter = void 0;
+    }
   }
-  mountStyles(e2) {
-    let t2;
-    typeof e2 == "string" ? (t2 = document.createElement("style"), t2.textContent = e2) : t2 = e2, this._$userStyles$.setValue(t2);
+  mountStyles(styles2) {
+    this.$styles.textContent = styles2;
   }
   unmountStyles() {
-    this._$userStyles$.setValue(void 0);
+    this.$styles.textContent = "";
   }
-  setHighlightStage(e2) {
-    this._boxHighlightStage$.setValue(e2);
+  mountUserStyles(styles2) {
+    this.$userStyles.textContent = styles2;
   }
-  render() {
-    if (this.$box)
+  unmountUserStyles() {
+    this.$userStyles.textContent = "";
+  }
+  _render() {
+    if (this.$box) {
       return this.$box;
-    this.$box = document.createElement("div"), this.$box.classList.add(this.wrapClassName("box"));
-    const e2 = (e3, t3, i3, s3 = T$3) => this._sideEffect.add(() => {
-      const a3 = this.wrapClassName(i3);
-      return t3.subscribe((t4) => {
-        e3.classList.toggle(a3, s3(t4));
+    }
+    const bindBoxStates = (el, disposerID) => {
+      return this._sideEffect.addDisposer([
+        this._readonly$.subscribe((readonly) => el.classList.toggle(this.wrapClassName("readonly"), readonly)),
+        this._draggable$.subscribe((draggable) => el.classList.toggle(this.wrapClassName("no-drag"), !draggable)),
+        this._resizable$.subscribe((resizable) => el.classList.toggle(this.wrapClassName("no-resize"), !resizable)),
+        this._focus$.subscribe((focus) => el.classList.toggle(this.wrapClassName("blur"), !focus)),
+        this._darkMode$.subscribe((darkMode) => {
+          el.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+          el.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+        })
+      ], disposerID);
+    };
+    this.$box = document.createElement("div");
+    this.$box.classList.add(this.wrapClassName("box"));
+    bindBoxStates(this.$box, "bind-box-state");
+    this._sideEffect.add(() => {
+      const minimizedClassName = this.wrapClassName("minimized");
+      const maximizedClassName = this.wrapClassName("maximized");
+      const MAXIMIZED_TIMER_ID = "box-maximized-timer";
+      return this._state$.subscribe((state) => {
+        this.$box.classList.toggle(minimizedClassName, state === TELE_BOX_STATE.Minimized);
+        if (state === TELE_BOX_STATE.Maximized) {
+          this._sideEffect.flush(MAXIMIZED_TIMER_ID);
+          this.$box.classList.toggle(maximizedClassName, true);
+        } else {
+          this._sideEffect.setTimeout(() => {
+            this.$box.classList.toggle(maximizedClassName, false);
+          }, 0, MAXIMIZED_TIMER_ID);
+        }
       });
     });
-    e2(this.$box, this._readonly$, "readonly"), e2(this.$box, this._draggable$, "no-drag", V$3), e2(this.$box, this._resizable$, "no-resize", V$3), e2(this.$box, this._focus$, "blur", V$3), e2(this.$box, this._darkMode$, "color-scheme-dark"), e2(this.$box, this._darkMode$, "color-scheme-light", V$3), this._sideEffect.add(() => {
-      const e3 = this.wrapClassName("minimized"), t3 = this.wrapClassName("maximized"), i3 = "box-maximized-timer";
-      return this._state$.subscribe((s3) => {
-        this.$box.classList.toggle(e3, s3 === C$3.Minimized), s3 === C$3.Maximized ? (this._sideEffect.flush(i3), this.$box.classList.toggle(t3, true)) : this._sideEffect.setTimeout(() => {
-          this.$box.classList.toggle(t3, false);
-        }, 0, i3);
-      });
-    }), this._sideEffect.addDisposer(this._visible$.subscribe((e3) => {
-      this.$box.style.display = e3 ? "block" : "none";
-    })), this._sideEffect.addDisposer(this._zIndex$.subscribe((e3) => {
-      this.$box.style.zIndex = String(e3);
-    })), this.$box.dataset.teleBoxID = this.id;
-    const t2 = index(this.$box), i2 = combine([this._maximized$, this._minimized$, this._pxIntrinsicSize$, this._pxIntrinsicCoord$, this._collectorRect$], ([e3, t3, i3, s3, a3]) => {
-      const o3 = e3 ? { x: 0, y: 0, width: "100%", height: "100%", scaleX: 1, scaleY: 1 } : { x: s3.x, y: s3.y, width: i3.width + "px", height: i3.height + "px", scaleX: 1, scaleY: 1 };
-      if (t3 && a3) {
-        const { width: t4, height: s4 } = e3 ? this.rootRect : i3;
-        o3.x = a3.x - t4 / 2 + a3.width / 2, o3.y = a3.y - s4 / 2 + a3.height / 2, o3.scaleX = a3.width / t4, o3.scaleY = a3.height / s4;
-      }
-      return o3;
-    }, { compare: shallowequal }), s2 = i2.value;
-    this.$box.style.width = s2.width, this.$box.style.height = s2.height, this.$box.style.transform = `translate(${s2.x - 10}px,${s2.y - 10}px)`, this._sideEffect.addDisposer(i2.subscribe((e3) => {
-      t2.set(e3);
+    this._sideEffect.addDisposer(this._visible$.subscribe((visible) => {
+      this.$box.style.display = visible ? "block" : "none";
     }));
-    const a2 = document.createElement("div");
-    a2.className = this.wrapClassName("box-main"), this.$box.appendChild(a2);
-    const o2 = document.createElement("div");
-    o2.className = this.wrapClassName("titlebar-wrap"), o2.appendChild(this.titleBar.render()), this.$titleBar = o2;
-    const r2 = document.createElement("div");
-    r2.className = this.wrapClassName("content-wrap");
-    const n2 = document.createElement("div");
-    n2.className = this.wrapClassName("content") + " tele-fancy-scrollbar", this.$content = n2, this._sideEffect.add(() => {
-      const e3 = new W$3(() => {
-        const e4 = n2.getBoundingClientRect();
-        this._contentRect$.setValue({ x: e4.x, y: e4.y, width: e4.width, height: e4.height });
-      });
-      return e3.observe(n2), () => e3.disconnect();
-    }), this._sideEffect.add(() => {
-      let e3;
-      return this._$userStyles$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && r2.appendChild(t3);
-      });
-    }), this._sideEffect.add(() => {
-      let e3;
-      return this._$userContent$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && n2.appendChild(t3);
+    this._sideEffect.addDisposer(this._zIndex$.subscribe((zIndex) => {
+      this.$box.style.zIndex = String(zIndex);
+    }));
+    this.$box.dataset.teleBoxID = this.id;
+    const boxStyler = index(this.$box);
+    const boxStyles$ = combine([
+      this._maximized$,
+      this._minimized$,
+      this._pxIntrinsicSize$,
+      this._pxIntrinsicCoord$,
+      this._collectorRect$,
+      this._rootRect$,
+      this._managerStageRect$
+    ], ([
+      maximized,
+      minimized,
+      pxIntrinsicSize,
+      pxIntrinsicCoord,
+      collectorRect,
+      rootRect,
+      managerStageRect
+    ]) => {
+      const styles2 = maximized ? {
+        x: -managerStageRect.x,
+        y: -managerStageRect.y,
+        width: rootRect.width,
+        height: rootRect.height,
+        scaleX: 1,
+        scaleY: 1
+      } : {
+        x: pxIntrinsicCoord.x,
+        y: pxIntrinsicCoord.y,
+        width: pxIntrinsicSize.width,
+        height: pxIntrinsicSize.height,
+        scaleX: 1,
+        scaleY: 1
+      };
+      if (minimized && collectorRect) {
+        const { width: boxWidth, height: boxHeight } = maximized ? this.rootRect : pxIntrinsicSize;
+        styles2.x = collectorRect.x - boxWidth / 2 + collectorRect.width / 2 - managerStageRect.x;
+        styles2.y = collectorRect.y - boxHeight / 2 + collectorRect.height / 2 - managerStageRect.y;
+        styles2.scaleX = collectorRect.width / boxWidth;
+        styles2.scaleY = collectorRect.height / boxHeight;
+      }
+      return styles2;
+    }, { compare: shallowequal });
+    const boxStyles = boxStyles$.value;
+    this.$box.style.width = boxStyles.width + "px";
+    this.$box.style.height = boxStyles.height + "px";
+    this.$box.style.transform = `translate(${boxStyles.x - 10}px,${boxStyles.y - 10}px)`;
+    this._sideEffect.addDisposer(boxStyles$.subscribe((styles2) => {
+      boxStyler.set(styles2);
+    }));
+    const $boxMain = document.createElement("div");
+    $boxMain.className = this.wrapClassName("box-main");
+    this.$box.appendChild($boxMain);
+    const $titleBar = document.createElement("div");
+    $titleBar.className = this.wrapClassName("titlebar-wrap");
+    $titleBar.appendChild(this.titleBar.render());
+    this.$titleBar = $titleBar;
+    const $body = document.createElement("div");
+    $body.className = this.wrapClassName("body-wrap");
+    this.$body = $body;
+    const $styles = document.createElement("style");
+    this.$styles = $styles;
+    $body.appendChild($styles);
+    const $userStyles = document.createElement("style");
+    this.$userStyles = $userStyles;
+    $body.appendChild($userStyles);
+    const $content = document.createElement("div");
+    $content.className = this.wrapClassName("content") + " tele-fancy-scrollbar";
+    this.$content = $content;
+    this._sideEffect.addDisposer(combine([this._bodyStyle$, this._defaultBoxBodyStyle$], ([bodyStyle, defaultBoxBodyStyle]) => bodyStyle != null ? bodyStyle : defaultBoxBodyStyle).subscribe((style2) => $content.style.cssText = style2 || ""));
+    $body.appendChild($content);
+    const $footer = document.createElement("div");
+    $footer.className = this.wrapClassName("footer-wrap");
+    this.$footer = $footer;
+    $boxMain.appendChild($titleBar);
+    const $main = document.createElement("div");
+    $main.className = this.wrapClassName("main");
+    this.$main = $main;
+    $boxMain.appendChild($main);
+    const $quarantineOuter = document.createElement("div");
+    $quarantineOuter.className = this.wrapClassName("quarantine-outer");
+    $main.appendChild($quarantineOuter);
+    const $quarantine = document.createElement("div");
+    $quarantine.className = this.wrapClassName("quarantine");
+    $quarantine.appendChild($body);
+    $quarantine.appendChild($footer);
+    if (this.enableShadowDOM) {
+      bindBoxStates($quarantine, "bind-quarantine-state");
+      const $shadowStyle = document.createElement("style");
+      $shadowStyle.textContent = shadowStyles;
+      $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
+      const shadow = $quarantineOuter.attachShadow({ mode: "open" });
+      shadow.appendChild($quarantine);
+    } else {
+      $quarantineOuter.appendChild($quarantine);
+    }
+    this._renderResizeHandlers();
+    const updateBodyRect = () => {
+      const rect = $body.getBoundingClientRect();
+      this._bodyRect$.setValue({
+        x: 0,
+        y: 0,
+        width: rect.width,
+        height: rect.height
       });
-    }), r2.appendChild(n2);
-    const h = document.createElement("div");
-    return h.className = this.wrapClassName("footer-wrap"), this.$footer = h, this._sideEffect.add(() => {
-      let e3;
-      return this._$userFooter$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && h.appendChild(t3);
+    };
+    this._sideEffect.add(() => {
+      const observer = new ResizeObserver$1$1(() => {
+        if (!this.minimized) {
+          updateBodyRect();
+        }
       });
-    }), a2.appendChild(o2), a2.appendChild(r2), a2.appendChild(h), this._renderResizeHandlers(), this.$box;
+      observer.observe($body);
+      return () => observer.disconnect();
+    });
+    this._sideEffect.addDisposer(this._minimized$.reaction((minimized) => {
+      if (!minimized) {
+        this._sideEffect.setTimeout(updateBodyRect, 400, "minimized-content-rect-fix");
+      }
+    }));
+    return this.$box;
+  }
+  _renderStage() {
+    const $stage = document.createElement("div");
+    $stage.className = this.wrapClassName("box-stage");
+    const updateStageRect = (stageRect) => {
+      $stage.style.top = stageRect.y + "px";
+      $stage.style.left = stageRect.x + "px";
+      $stage.style.width = stageRect.width + "px";
+      $stage.style.height = stageRect.height + "px";
+    };
+    this._sideEffect.addDisposer([
+      combine([this._stageStyle$, this._defaultBoxStageStyle$], ([stageStyle, defaultBoxStageStyle]) => stageStyle != null ? stageStyle : defaultBoxStageStyle).subscribe((styles2) => {
+        $stage.style.cssText = styles2 || "";
+        updateStageRect(this._stageRect$.value);
+      }),
+      this._stageRect$.subscribe(updateStageRect)
+    ], "box-stage-styles");
+    return $stage;
   }
   _renderResizeHandlers() {
-    const e2 = document.createElement("div");
-    e2.className = this.wrapClassName("resize-handles"), Object.values(N$3).forEach((t3) => {
-      const i3 = document.createElement("div");
-      i3.className = this.wrapClassName(t3) + " " + this.wrapClassName("resize-handle"), i3.dataset.teleBoxHandle = t3, e2.appendChild(i3);
-    }), this.$box.appendChild(e2);
-    const t2 = "handle-tracking-listener", i2 = this.wrapClassName("transforming");
-    let s2, a2, o2 = 0, r2 = 0, n2 = 0, h = 0, l2 = 0, d2 = 0;
-    const c = (e3) => {
-      if (this.state !== C$3.Normal)
+    const $resizeHandles = document.createElement("div");
+    $resizeHandles.className = this.wrapClassName("resize-handles");
+    Object.values(TELE_BOX_RESIZE_HANDLE).forEach((handleType) => {
+      const $handle = document.createElement("div");
+      $handle.className = this.wrapClassName(handleType) + " " + this.wrapClassName("resize-handle");
+      $handle.dataset.teleBoxHandle = handleType;
+      $resizeHandles.appendChild($handle);
+    });
+    this.$box.appendChild($resizeHandles);
+    const TRACKING_DISPOSER_ID = "handle-tracking-listener";
+    const transformingClassName = this.wrapClassName("transforming");
+    let $trackMask;
+    let trackStartX = 0;
+    let trackStartY = 0;
+    let trackStartWidth = 0;
+    let trackStartHeight = 0;
+    let trackStartPageX = 0;
+    let trackStartPageY = 0;
+    let trackingHandle;
+    const handleTracking = (ev) => {
+      if (!ev.isPrimary || this.state !== TELE_BOX_STATE.Normal) {
         return;
-      k$1(e3);
-      let { pageX: t3, pageY: i3 } = R$3(e3);
-      i3 < this.rootRect.y && (i3 = this.rootRect.y);
-      const s3 = t3 - l2, c2 = i3 - d2;
-      let { x: m3, y: u3 } = this.pxIntrinsicCoord, { width: x2, height: g2 } = this.pxIntrinsicSize;
-      switch (a2) {
-        case N$3.North:
-          u3 = r2 + c2, g2 = h - c2;
+      }
+      preventEvent$1(ev);
+      let { pageX, pageY } = ev;
+      if (pageY < 0) {
+        pageY = 0;
+      }
+      const offsetX = pageX - trackStartPageX;
+      const offsetY = pageY - trackStartPageY;
+      let { x: newX, y: newY } = this.pxIntrinsicCoord;
+      let { width: newWidth, height: newHeight } = this.pxIntrinsicSize;
+      switch (trackingHandle) {
+        case TELE_BOX_RESIZE_HANDLE.North: {
+          newY = trackStartY + offsetY;
+          newHeight = trackStartHeight - offsetY;
           break;
-        case N$3.South:
-          g2 = h + c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.South: {
+          newHeight = trackStartHeight + offsetY;
           break;
-        case N$3.West:
-          m3 = o2 + s3, x2 = n2 - s3;
+        }
+        case TELE_BOX_RESIZE_HANDLE.West: {
+          newX = trackStartX + offsetX;
+          newWidth = trackStartWidth - offsetX;
           break;
-        case N$3.East:
-          x2 = n2 + s3;
+        }
+        case TELE_BOX_RESIZE_HANDLE.East: {
+          newWidth = trackStartWidth + offsetX;
           break;
-        case N$3.NorthWest:
-          m3 = o2 + s3, u3 = r2 + c2, x2 = n2 - s3, g2 = h - c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthWest: {
+          newX = trackStartX + offsetX;
+          newY = trackStartY + offsetY;
+          newWidth = trackStartWidth - offsetX;
+          newHeight = trackStartHeight - offsetY;
           break;
-        case N$3.NorthEast:
-          u3 = r2 + c2, x2 = n2 + s3, g2 = h - c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthEast: {
+          newY = trackStartY + offsetY;
+          newWidth = trackStartWidth + offsetX;
+          newHeight = trackStartHeight - offsetY;
           break;
-        case N$3.SouthEast:
-          x2 = n2 + s3, g2 = h + c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthEast: {
+          newWidth = trackStartWidth + offsetX;
+          newHeight = trackStartHeight + offsetY;
           break;
-        case N$3.SouthWest:
-          m3 = o2 + s3, x2 = n2 - s3, g2 = h + c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthWest: {
+          newX = trackStartX + offsetX;
+          newWidth = trackStartWidth - offsetX;
+          newHeight = trackStartHeight + offsetY;
           break;
-        default:
-          return void this.move(o2 + s3, r2 + c2);
-      }
-      this.transform(m3, u3, x2, g2);
-    }, m2 = (e3) => {
-      a2 = void 0, s2 && (k$1(e3), this.$box.classList.toggle(i2, false), this._sideEffect.flush(t2), s2.remove());
-    }, u2 = (e3) => {
-      var u3;
-      if (this.readonly)
+        }
+        default: {
+          this.move(trackStartX + offsetX, trackStartY + offsetY);
+          return;
+        }
+      }
+      this.transform(newX, newY, newWidth, newHeight);
+    };
+    const handleTrackEnd = (ev) => {
+      if (!ev.isPrimary) {
+        return;
+      }
+      trackingHandle = void 0;
+      if (!$trackMask) {
+        return;
+      }
+      preventEvent$1(ev);
+      this.$box.classList.toggle(transformingClassName, false);
+      this._sideEffect.flush(TRACKING_DISPOSER_ID);
+      $trackMask.remove();
+    };
+    const handleTrackStart = (ev) => {
+      var _a;
+      if (!ev.isPrimary || this.readonly) {
         return;
-      if (e3.button != null && e3.button !== 0)
+      }
+      if (ev.button != null && ev.button !== 0) {
         return;
-      if (!this.draggable || a2 || this.state !== C$3.Normal)
+      }
+      if (!this.draggable || trackingHandle || this.state !== TELE_BOX_STATE.Normal) {
         return;
-      const x2 = e3.target;
-      if ((u3 = x2.dataset) == null ? void 0 : u3.teleBoxHandle) {
-        k$1(e3), { x: o2, y: r2 } = this.pxIntrinsicCoord, { width: n2, height: h } = this.pxIntrinsicSize, { pageX: l2, pageY: d2 } = R$3(e3), a2 = x2.dataset.teleBoxHandle, s2 || (s2 = document.createElement("div"));
-        const u4 = a2 ? this.wrapClassName(`cursor-${a2}`) : "";
-        s2.className = this.wrapClassName("track-mask" + (u4 ? ` ${u4}` : "")), this.$box.appendChild(s2), this.$box.classList.add(i2), this._sideEffect.add(() => (window.addEventListener("mousemove", c), window.addEventListener("touchmove", c, { passive: false }), window.addEventListener("mouseup", m2), window.addEventListener("touchend", m2, { passive: false }), window.addEventListener("touchcancel", m2, { passive: false }), () => {
-          window.removeEventListener("mousemove", c), window.removeEventListener("touchmove", c), window.removeEventListener("mouseup", m2), window.removeEventListener("touchend", m2), window.removeEventListener("touchcancel", m2);
-        }), t2);
+      }
+      const target = ev.target;
+      if ((_a = target.dataset) == null ? void 0 : _a.teleBoxHandle) {
+        preventEvent$1(ev);
+        ({ x: trackStartX, y: trackStartY } = this.pxIntrinsicCoord);
+        ({ width: trackStartWidth, height: trackStartHeight } = this.pxIntrinsicSize);
+        ({ pageX: trackStartPageX, pageY: trackStartPageY } = ev);
+        trackingHandle = target.dataset.teleBoxHandle;
+        if (!$trackMask) {
+          $trackMask = document.createElement("div");
+        }
+        const cursor = trackingHandle ? this.wrapClassName(`cursor-${trackingHandle}`) : "";
+        $trackMask.className = this.wrapClassName(`track-mask${cursor ? ` ${cursor}` : ""}`);
+        this.$box.appendChild($trackMask);
+        this.$box.classList.add(transformingClassName);
+        this._sideEffect.add(() => {
+          window.addEventListener("pointermove", handleTracking, {
+            passive: false
+          });
+          window.addEventListener("pointerup", handleTrackEnd, {
+            passive: false
+          });
+          window.addEventListener("pointercancel", handleTrackEnd, {
+            passive: false
+          });
+          return () => {
+            window.removeEventListener("pointermove", handleTracking);
+            window.removeEventListener("pointerup", handleTrackEnd);
+            window.removeEventListener("pointercancel", handleTrackEnd);
+          };
+        }, TRACKING_DISPOSER_ID);
       }
     };
-    this._handleTrackStart = u2, this._sideEffect.addEventListener(e2, "mousedown", u2, {}, "box-resizeHandles-mousedown"), this._sideEffect.addEventListener(e2, "touchstart", u2, { passive: false }, "box-resizeHandles-touchstart");
+    this._handleTrackStart = handleTrackStart;
+    this._sideEffect.addEventListener($resizeHandles, "pointerdown", handleTrackStart, {}, "box-resizeHandles-pointerdown");
   }
   async destroy() {
-    this.$box.remove(), this._sideEffect.flushAll(), this._sideEffect.flushAll(), await this.events.emit(E$3.Destroyed), this.events.clearListeners(), this._delegateEvents.clearListeners();
-  }
-  wrapClassName(e2) {
-    return `${this.namespace}-${e2}`;
-  }
-}
-var X$3, P$3;
-class O$3 {
-  constructor({ minimized$: e2, readonly$: t2, darkMode$: i2, rootRect$: s2, namespace: a2 = "telebox", styles: o2 = {}, root$: r2 }) {
-    this._sideEffect = new SideEffectManager(), this.namespace = a2;
-    const n2 = new ValManager();
-    this._sideEffect.addDisposer(() => n2.destroy());
-    const h = new Val(void 0), l2 = derive(e2), d2 = new Val(o2), m2 = new Val(document.createElement("button"));
-    withValueEnhancer(this, { styles: d2, $collector: m2 }, n2);
-    withReadonlyValueEnhancer(this, { root: r2 });
-    withReadonlyValueEnhancer(this, { rect: h, visible: l2 }, n2), m2.value.className = this.wrapClassName("collector"), m2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(m2.subscribe((a3) => {
-      this._sideEffect.addEventListener(a3, "click", () => {
-        t2.value || e2.setValue(false);
-      }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([l2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("collector-visible"), e3);
-      }), t2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("collector-readonly"), e3);
-      }), i2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("color-scheme-dark"), e3), a3.classList.toggle(this.wrapClassName("color-scheme-light"), !e3);
-      }), d2.subscribe((e3) => {
-        Object.keys(e3).forEach((t3) => {
-          const i3 = e3[t3];
-          i3 != null && (a3.style[t3] = i3);
-        });
-      }), r2.subscribe((e3) => {
-        e3 && e3.appendChild(a3);
-      }), combine([e2, s2, r2]).subscribe(([e3, t3, i3]) => {
-        if (e3 && i3) {
-          const { x: e4, y: i4, width: s3, height: o3 } = a3.getBoundingClientRect();
-          h.setValue({ x: e4 - t3.x, y: i4 - t3.y, width: s3, height: o3 });
-        }
-      })], "telebox-collector-el");
+    this.$box.remove();
+    this._sideEffect.flushAll();
+    this._sideEffect.flushAll();
+    await this.events.emit(TELE_BOX_EVENT.Destroyed);
+    this.events.clearListeners();
+    this._delegateEvents.clearListeners();
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+}
+var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
+class TeleBoxCollector {
+  constructor({
+    minimized$,
+    readonly$,
+    darkMode$,
+    namespace = "telebox",
+    styles: styles2 = {},
+    root$
+  }) {
+    this._sideEffect = new SideEffectManager();
+    this.namespace = namespace;
+    const valManager = new ValManager();
+    this._sideEffect.addDisposer(() => valManager.destroy());
+    const rect$ = new Val(void 0);
+    const visible$ = derive(minimized$);
+    const styles$ = new Val(styles2);
+    const el$ = new Val(document.createElement("button"));
+    const valConfig = {
+      styles: styles$,
+      $collector: el$
+    };
+    withValueEnhancer(this, valConfig, valManager);
+    const propsValConfig = {
+      root: root$
+    };
+    withReadonlyValueEnhancer(this, propsValConfig);
+    const myReadonlyValConfig = {
+      rect: rect$,
+      visible: visible$
+    };
+    withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
+    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);
+        }
+      }, {}, "telebox-collector-click");
+      this._sideEffect.addDisposer([
+        visible$.subscribe((visible) => {
+          $collector.classList.toggle(this.wrapClassName("collector-visible"), visible);
+        }),
+        readonly$.subscribe((readonly) => {
+          $collector.classList.toggle(this.wrapClassName("collector-readonly"), readonly);
+        }),
+        darkMode$.subscribe((darkMode) => {
+          $collector.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+          $collector.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+        }),
+        styles$.subscribe((styles22) => {
+          Object.keys(styles22).forEach((key) => {
+            const value = styles22[key];
+            if (value != null) {
+              $collector.style[key] = value;
+            }
+          });
+        }),
+        root$.subscribe((root) => {
+          if (root) {
+            root.appendChild($collector);
+          }
+        }),
+        combine([minimized$, root$]).subscribe(([minimized, root]) => {
+          if (minimized && root) {
+            const { x: x2, y: y2, width, height } = $collector.getBoundingClientRect();
+            const rootRect = root.getBoundingClientRect();
+            rect$.setValue({
+              x: x2 - rootRect.x,
+              y: y2 - rootRect.y,
+              width,
+              height
+            });
+          }
+        })
+      ], "telebox-collector-el");
     }));
   }
   destroy() {
     this._sideEffect.flushAll();
   }
-  wrapClassName(e2) {
-    return `${this.namespace}-${e2}`;
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
   }
 }
-(P$3 = X$3 || (X$3 = {})).Focused = "focused", P$3.Blurred = "blurred", P$3.Created = "created", P$3.Removed = "removed", P$3.State = "state", P$3.Maximized = "maximized", P$3.Minimized = "minimized", P$3.IntrinsicMove = "intrinsic_move", P$3.IntrinsicResize = "intrinsic_resize", P$3.ZIndex = "z_index", P$3.PrefersColorScheme = "prefers_color_scheme", P$3.DarkMode = "dark_mode";
-class j$1 extends H$3 {
-  constructor(e2) {
-    super(e2), this.boxes$ = e2.boxes$, this.rootRect$ = e2.rootRect$, this.darkMode$ = e2.darkMode$, this.sideEffect.addDisposer(e2.root$.subscribe((e3) => {
-      var t2;
-      e3 ? e3.appendChild(this.render()) : ((t2 = this.$titleBar) == null ? void 0 : t2.parentNode) && this.$titleBar.remove();
-    }));
+var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
+  TELE_BOX_MANAGER_EVENT2["Focused"] = "focused";
+  TELE_BOX_MANAGER_EVENT2["Blurred"] = "blurred";
+  TELE_BOX_MANAGER_EVENT2["Created"] = "created";
+  TELE_BOX_MANAGER_EVENT2["Removed"] = "removed";
+  TELE_BOX_MANAGER_EVENT2["State"] = "state";
+  TELE_BOX_MANAGER_EVENT2["Maximized"] = "maximized";
+  TELE_BOX_MANAGER_EVENT2["Minimized"] = "minimized";
+  TELE_BOX_MANAGER_EVENT2["IntrinsicMove"] = "intrinsic_move";
+  TELE_BOX_MANAGER_EVENT2["IntrinsicResize"] = "intrinsic_resize";
+  TELE_BOX_MANAGER_EVENT2["ZIndex"] = "z_index";
+  TELE_BOX_MANAGER_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
+  TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
+  return TELE_BOX_MANAGER_EVENT2;
+})(TELE_BOX_MANAGER_EVENT || {});
+class MaxTitleBar extends DefaultTitleBar {
+  constructor(config) {
+    super(config);
+    this.boxes$ = config.boxes$;
+    this.rootRect$ = config.rootRect$;
+    this.darkMode$ = config.darkMode$;
+    config.root.appendChild(this.render());
   }
-  focusBox(e2) {
-    var t2;
-    if (!this.focusedBox || this.focusedBox !== e2) {
-      if (this.$titles && this.state$.value === C$3.Maximized) {
-        const { children: i2 } = this.$titles.firstElementChild;
-        for (let s2 = i2.length - 1; s2 >= 0; s2 -= 1) {
-          const a2 = i2[s2], o2 = (t2 = a2.dataset) == null ? void 0 : t2.teleBoxID;
-          o2 && (e2 && o2 === e2.id ? a2.classList.toggle(this.wrapClassName("titles-tab-focus"), true) : this.focusedBox && o2 === this.focusedBox.id && a2.classList.toggle(this.wrapClassName("titles-tab-focus"), false));
+  focusBox(box) {
+    var _a;
+    if (this.focusedBox && this.focusedBox === box) {
+      return;
+    }
+    if (this.$titles && this.state$.value === TELE_BOX_STATE.Maximized) {
+      const { children: children2 } = this.$titles.firstElementChild;
+      for (let i2 = children2.length - 1; i2 >= 0; i2 -= 1) {
+        const $tab = children2[i2];
+        const id2 = (_a = $tab.dataset) == null ? void 0 : _a.teleBoxID;
+        if (id2) {
+          if (box && id2 === box.id) {
+            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), true);
+          } else if (this.focusedBox && id2 === this.focusedBox.id) {
+            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+          }
         }
       }
-      this.focusedBox = e2;
     }
+    this.focusedBox = box;
   }
   render() {
-    if (this.$titleBar)
+    if (this.$titleBar) {
       return this.$titleBar;
-    const e2 = super.render();
-    e2.classList.add(this.wrapClassName("max-titlebar")), this.sideEffect.addDisposer([this.state$.subscribe((t3) => {
-      e2.classList.toggle(this.wrapClassName("max-titlebar-maximized"), t3 === C$3.Maximized);
-    }), this.readonly$.subscribe((t3) => {
-      e2.classList.toggle(this.wrapClassName("readonly"), t3);
-    }), this.darkMode$.subscribe((t3) => {
-      e2.classList.toggle(this.wrapClassName("color-scheme-dark"), t3), e2.classList.toggle(this.wrapClassName("color-scheme-light"), !t3);
-    }), combine([this.state$, this.boxes$]).subscribe(([t3, i2]) => {
-      t3 === C$3.Maximized && (e2.classList.toggle(this.wrapClassName("max-titlebar-single-title"), i2.length === 1), i2.length !== 1 && e2.replaceChild(this.renderTitles(), e2.firstElementChild));
-    })], "max-render");
-    const t2 = document.createElement("div");
-    return t2.classList.add(this.wrapClassName("titles-area")), e2.insertBefore(t2, e2.firstElementChild), e2;
+    }
+    const $titleBar = super.render();
+    $titleBar.classList.add(this.wrapClassName("max-titlebar"));
+    this.sideEffect.addDisposer([
+      this.state$.subscribe((state) => {
+        $titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), state === TELE_BOX_STATE.Maximized);
+      }),
+      this.readonly$.subscribe((readonly) => {
+        $titleBar.classList.toggle(this.wrapClassName("readonly"), readonly);
+      }),
+      combine([this.state$, this.boxes$]).subscribe(([state, titles]) => {
+        if (state === TELE_BOX_STATE.Maximized) {
+          $titleBar.classList.toggle(this.wrapClassName("max-titlebar-single-title"), titles.length === 1);
+          if (titles.length !== 1) {
+            $titleBar.replaceChild(this.renderTitles(), $titleBar.firstElementChild);
+          }
+        }
+      })
+    ], "max-render");
+    const $titlesArea = document.createElement("div");
+    $titlesArea.classList.add(this.wrapClassName("titles-area"));
+    $titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
+    return $titleBar;
   }
   destroy() {
-    super.destroy(), this.$titles = void 0, this.focusedBox = void 0;
+    super.destroy();
+    this.$titles = void 0;
+    this.focusedBox = void 0;
   }
   renderTitles() {
-    this.$titles = document.createElement("div"), this.$titles.className = this.wrapClassName("titles"), this.sideEffect.addEventListener(this.$titles, "wheel", (e3) => {
-      e3.currentTarget.scrollBy({ left: e3.deltaY > 0 ? 250 : -250, behavior: "smooth" });
+    this.$titles = document.createElement("div");
+    this.$titles.className = this.wrapClassName("titles");
+    this.sideEffect.addEventListener(this.$titles, "wheel", (ev) => {
+      ev.currentTarget.scrollBy({
+        left: ev.deltaY > 0 ? 250 : -250,
+        behavior: "smooth"
+      });
     }, { passive: false }, "max-render-wheel-titles");
-    const e2 = document.createElement("div");
-    e2.className = this.wrapClassName("titles-content"), this.$titles.appendChild(e2);
-    const t2 = this.boxes$.value.map((t3) => {
-      const i2 = document.createElement("button");
-      return i2.className = this.wrapClassName("titles-tab"), i2.textContent = t3.title, i2.dataset.teleBoxID = t3.id, i2.dataset.teleTitleBarNoDblClick = "true", this.focusedBox && t3.id === this.focusedBox.id && i2.classList.add(this.wrapClassName("titles-tab-focus")), e2.appendChild(i2), t3._title$.reaction((e3) => i2.textContent = e3);
+    const $content = document.createElement("div");
+    $content.className = this.wrapClassName("titles-content");
+    this.$titles.appendChild($content);
+    const disposers = this.boxes$.value.map((box) => {
+      const $tab = document.createElement("button");
+      $tab.className = this.wrapClassName("titles-tab");
+      $tab.textContent = box.title;
+      $tab.dataset.teleBoxID = box.id;
+      $tab.dataset.teleTitleBarNoDblClick = "true";
+      if (this.focusedBox && box.id === this.focusedBox.id) {
+        $tab.classList.add(this.wrapClassName("titles-tab-focus"));
+      }
+      $content.appendChild($tab);
+      return box._title$.reaction((title) => $tab.textContent = title);
     });
-    return this.sideEffect.addDisposer(() => t2.forEach((e3) => e3()), "max-render-tab-titles"), this.$titles;
+    this.sideEffect.addDisposer(() => disposers.forEach((disposer) => disposer()), "max-render-tab-titles");
+    return this.$titles;
   }
 }
-const Z$3 = window.ResizeObserver || ResizeObserver$2;
-class F$3 {
-  constructor({ root: e2 = null, prefersColorScheme: t2 = v$3.Light, minimized: i2 = false, maximized: s2 = false, fence: a2 = false, collector: o2, namespace: r2 = "telebox", readonly: n2 = false, stageRatio: l2 = -1, highlightStage: m2 = true } = {}) {
-    this.events = new Emittery(), this._sideEffect = new SideEffectManager(), this.namespace = r2;
-    const b2 = new ValManager();
-    this._sideEffect.addDisposer(() => b2.destroy());
-    const w2 = new Val(e2), y2 = new Val(n2), z2 = new Val(i2), _2 = new Val(s2), N2 = new Val(a2), M2 = new Val(l2), S2 = new Val(m2), I2 = new Val({ x: 0, y: 0, width: window.innerWidth, height: window.innerHeight }, { compare: shallowequal });
-    this._sideEffect.addDisposer(w2.subscribe((e3) => {
+const ResizeObserver$2 = window.ResizeObserver || ResizeObserver$3;
+class TeleBoxManager {
+  constructor({
+    root = null,
+    prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
+    minimized = false,
+    maximized = false,
+    fence = true,
+    collector,
+    namespace = "telebox",
+    readonly = false,
+    stageRatio = -1,
+    containerStyle = "",
+    stageStyle = "",
+    defaultBoxBodyStyle = null,
+    defaultBoxStageStyle = null
+  } = {}) {
+    this.events = new Emittery();
+    this._sideEffect = new SideEffectManager();
+    this.namespace = namespace;
+    const valManager = new ValManager();
+    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 rootRect$ = new Val({
+      x: 0,
+      y: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    }, { compare: shallowequal });
+    this._sideEffect.addDisposer(root$.subscribe((root2) => {
       this._sideEffect.add(() => {
-        if (!e3)
-          return () => {
-          };
-        const t3 = new Z$3(() => {
-          const t4 = e3.getBoundingClientRect();
-          I2.setValue({ x: t4.x, y: t4.y, width: t4.width, height: t4.height });
+        if (!root2) {
+          return () => void 0;
+        }
+        const observer = new ResizeObserver$2(() => {
+          const rect = root2.getBoundingClientRect();
+          rootRect$.setValue({
+            x: 0,
+            y: 0,
+            width: rect.width,
+            height: rect.height
+          });
         });
-        return t3.observe(e3), () => t3.disconnect();
+        observer.observe(root2);
+        return () => observer.disconnect();
       }, "calc-root-rect");
-    })), this.boxes$ = new Val([]), this.topBox$ = new Val(void 0), this._sideEffect.addDisposer(this.boxes$.subscribe((e3) => {
-      if (e3.length > 0) {
-        const t3 = e3.reduce((e4, t4) => e4.zIndex > t4.zIndex ? e4 : t4);
-        this.topBox$.setValue(t3);
-      } else
-        this.topBox$.setValue(void 0);
     }));
-    const k2 = window.matchMedia("(prefers-color-scheme: dark)"), R2 = new Val(false);
-    k2 && (R2.setValue(k2.matches), this._sideEffect.add(() => {
-      const e3 = (e4) => {
-        R2.setValue(e4.matches);
-      };
-      return k2.addEventListener("change", e3), () => k2.removeEventListener("change", e3);
+    const stageRect$ = combine([rootRect$, stageRatio$], calcStageRect, {
+      compare: shallowequal
+    });
+    this.boxes$ = new Val([]);
+    this.topBox$ = new Val(void 0);
+    this._sideEffect.addDisposer(this.boxes$.subscribe((boxes) => {
+      if (boxes.length > 0) {
+        const topBox = boxes.reduce((topBox2, box) => topBox2.zIndex > box.zIndex ? topBox2 : box);
+        this.topBox$.setValue(topBox);
+      } else {
+        this.topBox$.setValue(void 0);
+      }
     }));
-    const D2 = new Val(t2);
-    this._sideEffect.addDisposer(D2.reaction((e3, t3) => {
-      t3 || this.events.emit(X$3.PrefersColorScheme, e3);
+    const prefersDarkMatch = window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDark$ = new Val(false);
+    if (prefersDarkMatch) {
+      prefersDark$.setValue(prefersDarkMatch.matches);
+      this._sideEffect.add(() => {
+        const handler = (evt) => {
+          prefersDark$.setValue(evt.matches);
+        };
+        prefersDarkMatch.addEventListener("change", handler);
+        return () => prefersDarkMatch.removeEventListener("change", handler);
+      });
+    }
+    const prefersColorScheme$ = new Val(prefersColorScheme);
+    this._sideEffect.addDisposer(prefersColorScheme$.reaction((prefersColorScheme2, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.PrefersColorScheme, prefersColorScheme2);
+      }
     }));
-    const L2 = combine([R2, D2], ([e3, t3]) => t3 === "auto" ? e3 : t3 === "dark"), T2 = combine([z2, _2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal);
-    this.collector = o2 != null ? o2 : new O$3({ minimized$: z2, readonly$: y2, darkMode$: L2, namespace: r2, root$: w2, rootRect$: I2 });
-    const V2 = new A$2({ namespace: r2, rootRect$: I2, ratio$: M2, root$: w2, highlightStage$: combine([S2, _2, z2], ([e3, t3, i3]) => e3 && (i3 || !t3)) });
-    this._sideEffect.addDisposer(() => V2.destroy());
-    const H2 = { darkMode: L2, state: T2, root: w2, rootRect: I2, stageRect: V2.stageRect$ };
-    withReadonlyValueEnhancer(this, H2, b2);
-    withValueEnhancer(this, { prefersColorScheme: D2, readonly: y2, fence: N2, minimized: z2, maximized: _2, stageRatio: M2, highlightStage: S2 }, b2);
-    const W2 = this.wrapClassName("titlebar-icon-close"), Y2 = (e3) => {
-      var t3;
-      if (y2.value)
+    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$
+    };
+    withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
+    const valConfig = {
+      prefersColorScheme: prefersColorScheme$,
+      readonly: readonly$,
+      fence: fence$,
+      minimized: minimized$,
+      maximized: maximized$,
+      stageRatio: stageRatio$,
+      containerStyle: containerStyle$,
+      stageStyle: stageStyle$,
+      defaultBoxBodyStyle: defaultBoxBodyStyle$,
+      defaultBoxStageStyle: defaultBoxStageStyle$
+    };
+    withValueEnhancer(this, valConfig, valManager);
+    const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
+    const checkFocusBox = (ev) => {
+      var _a;
+      if (!ev.isPrimary || readonly$.value) {
+        return;
+      }
+      const target = ev.target;
+      if (!target.tagName) {
         return;
-      const i3 = e3.target;
-      if (i3.tagName)
-        for (let s3 = i3; s3; s3 = s3.parentElement) {
-          if (s3.classList && s3.classList.contains(W2))
+      }
+      for (let el = target; el; el = el.parentElement) {
+        if (el.classList && el.classList.contains(closeBtnClassName)) {
+          return;
+        }
+        const id2 = (_a = el.dataset) == null ? void 0 : _a.teleBoxID;
+        if (id2) {
+          const box = this.getBox(id2);
+          if (box) {
+            this.focusBox(box);
+            this.makeBoxTop(box);
             return;
-          const e4 = (t3 = s3.dataset) == null ? void 0 : t3.teleBoxID;
-          if (e4) {
-            const t4 = this.getBox(e4);
-            if (t4)
-              return this.focusBox(t4), void this.makeBoxTop(t4);
           }
         }
+      }
     };
-    this._sideEffect.addEventListener(window, "mousedown", Y2, true), this._sideEffect.addEventListener(window, "touchstart", Y2, true), this.titleBar = new j$1({ namespace: this.namespace, title$: derive(this.topBox$, (e3) => (e3 == null ? void 0 : e3.title) || ""), boxes$: this.boxes$, darkMode$: L2, readonly$: y2, state$: T2, root$: w2, rootRect$: I2, onEvent: (e3) => {
-      switch (e3.type) {
-        case B$2.Maximize:
-          _2.setValue(!_2.value);
-          break;
-        case B$2.Minimize:
-          z2.setValue(true);
-          break;
-        case E$3.Close:
-          this.removeTopBox(), this.focusTopBox();
-      }
-    } }), this._sideEffect.addDisposer([T2.reaction((e3, t3) => {
-      t3 || this.events.emit(X$3.State, e3);
-    }), _2.reaction((e3, t3) => {
-      t3 || this.events.emit(X$3.Maximized, e3);
-    }), z2.reaction((e3, t3) => {
-      t3 || this.events.emit(X$3.Minimized, e3);
-    }), L2.reaction((e3, t3) => {
-      t3 || this.events.emit(X$3.DarkMode, e3);
-    })]);
+    this._sideEffect.addEventListener(window, "pointerdown", checkFocusBox, true);
+    this.$container = document.createElement("div");
+    this.$container.className = this.wrapClassName("manager-container");
+    this.$stage = document.createElement("div");
+    this.$stage.className = this.wrapClassName("manager-stage");
+    this.$container.appendChild(this.$stage);
+    this._sideEffect.addDisposer([
+      darkMode$.subscribe((darkMode) => {
+        this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+        this.$container.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+      }),
+      maximized$.subscribe((maximized2) => {
+        this.$container.classList.toggle("is-maximized", maximized2);
+      }),
+      minimized$.subscribe((minimized2) => {
+        this.$container.classList.toggle("is-minimized", minimized2);
+      }),
+      containerStyle$.subscribe((containerStyle2) => {
+        this.$container.style.cssText = containerStyle2;
+      }),
+      stageStyle$.subscribe((stageStyle2) => {
+        this.$stage.style.cssText = stageStyle2;
+        this.$stage.style.width = stageRect$.value.width + "px";
+        this.$stage.style.height = stageRect$.value.height + "px";
+      }),
+      stageRect$.subscribe((stageRect) => {
+        this.$stage.style.width = stageRect.width + "px";
+        this.$stage.style.height = stageRect.height + "px";
+      }),
+      root$.subscribe((root2) => {
+        if (root2) {
+          root2.appendChild(this.$container);
+        } else if (this.$container.parentElement) {
+          this.$container.remove();
+        }
+      })
+    ]);
+    this.titleBar = new MaxTitleBar({
+      namespace: this.namespace,
+      title$: derive(this.topBox$, (topBox) => (topBox == null ? void 0 : topBox.title) || ""),
+      boxes$: this.boxes$,
+      darkMode$,
+      readonly$,
+      state$,
+      rootRect$,
+      root: this.$container,
+      onEvent: (event) => {
+        switch (event.type) {
+          case TELE_BOX_DELEGATE_EVENT.Maximize: {
+            maximized$.setValue(!maximized$.value);
+            break;
+          }
+          case TELE_BOX_DELEGATE_EVENT.Minimize: {
+            minimized$.setValue(true);
+            break;
+          }
+          case TELE_BOX_EVENT.Close: {
+            this.removeTopBox();
+            this.focusTopBox();
+            break;
+          }
+        }
+      }
+    });
+    this._sideEffect.addDisposer([
+      state$.reaction((state, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
+        }
+      }),
+      maximized$.reaction((maximized2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
+        }
+      }),
+      minimized$.reaction((minimized2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
+        }
+      }),
+      darkMode$.reaction((darkMode, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+        }
+      })
+    ]);
   }
   get boxes() {
     return this.boxes$.value;
@@ -4275,149 +5323,305 @@ class F$3 {
   get topBox() {
     return this.topBox$.value;
   }
-  setState(e2, t2 = false) {
-    switch (e2) {
-      case C$3.Maximized:
-        this.setMinimized(false, t2), this.setMaximized(true, t2);
+  setState(state, skipUpdate = false) {
+    switch (state) {
+      case TELE_BOX_STATE.Maximized: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(true, skipUpdate);
         break;
-      case C$3.Minimized:
-        this.setMinimized(true, t2), this.setMaximized(false, t2);
+      }
+      case TELE_BOX_STATE.Minimized: {
+        this.setMinimized(true, skipUpdate);
+        this.setMaximized(false, skipUpdate);
         break;
-      default:
-        this.setMinimized(false, t2), this.setMaximized(false, t2);
+      }
+      default: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
     }
     return this;
   }
-  create(e2 = {}, s2 = true) {
-    const a2 = new Y$3((o2 = n$3(n$3({ zIndex: this.topBox ? this.topBox.zIndex + 1 : 100 }, e2), s2 ? this.smartPosition(e2) : {}), r2 = { namespace: this.namespace, root$: this._root$, darkMode$: this._darkMode$, maximized$: this._maximized$, minimized$: this._minimized$, fence$: this._fence$, rootRect$: this._rootRect$, managerStageRect$: this._stageRect$, stageRatio$: this._stageRatio$, readonly$: this._readonly$, collectorRect$: this.collector._rect$, managerHighlightStage$: this._highlightStage$ }, t$3(o2, i$1(r2))));
-    var o2, r2;
-    return a2.focus && (this.focusBox(a2), s2 && this.makeBoxTop(a2)), this.boxes$.setValue([...this.boxes, a2]), this._sideEffect.addDisposer([a2._delegateEvents.on(B$2.Maximize, () => {
-      this.setMaximized(!this.maximized);
-    }), a2._delegateEvents.on(B$2.Minimize, () => {
-      this.setMinimized(true);
-    }), a2._delegateEvents.on(B$2.Close, () => {
-      this.remove(a2), this.focusTopBox();
-    }), a2._intrinsicCoord$.reaction((e3, t2) => {
-      t2 || this.events.emit(X$3.IntrinsicMove, a2);
-    }), a2._intrinsicSize$.reaction((e3, t2) => {
-      t2 || this.events.emit(X$3.IntrinsicResize, a2);
-    }), a2._zIndex$.reaction((e3, t2) => {
-      if (this.boxes.length > 0) {
-        const e4 = this.boxes.reduce((e5, t3) => e5.zIndex > t3.zIndex ? e5 : t3);
-        this.topBox$.setValue(e4);
-      }
-      t2 || this.events.emit(X$3.ZIndex, a2);
-    })]), this.events.emit(X$3.Created, a2), a2;
-  }
-  query(e2) {
-    return e2 ? this.boxes.filter(this.teleBoxMatcher(e2)) : [...this.boxes];
-  }
-  queryOne(e2) {
-    return e2 ? this.boxes.find(this.teleBoxMatcher(e2)) : this.boxes[0];
-  }
-  update(e2, t2, i2 = false) {
-    const s2 = this.boxes.find((t3) => t3.id === e2);
-    if (s2)
-      return this.updateBox(s2, t2, i2);
+  create(config = {}, smartPosition = true) {
+    const box = new TeleBox(__spreadProps(__spreadValues(__spreadValues({
+      zIndex: this.topBox ? this.topBox.zIndex + 1 : 100
+    }, config), smartPosition ? this.smartPosition(config) : {}), {
+      namespace: this.namespace,
+      root: this.$stage,
+      darkMode$: this._darkMode$,
+      maximized$: this._maximized$,
+      minimized$: this._minimized$,
+      fence$: this._fence$,
+      rootRect$: this._rootRect$,
+      managerStageRect$: this._stageRect$,
+      managerStageRatio$: this._stageRatio$,
+      readonly$: this._readonly$,
+      collectorRect$: this.collector._rect$,
+      defaultBoxBodyStyle$: this._defaultBoxBodyStyle$,
+      defaultBoxStageStyle$: this._defaultBoxStageStyle$
+    }));
+    if (box.focus) {
+      this.focusBox(box);
+      if (smartPosition) {
+        this.makeBoxTop(box);
+      }
+    }
+    this.boxes$.setValue([...this.boxes, box]);
+    this._sideEffect.addDisposer([
+      box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
+        this.setMaximized(!this.maximized);
+      }),
+      box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
+        this.setMinimized(true);
+      }),
+      box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+        this.remove(box);
+        this.focusTopBox();
+      }),
+      box._intrinsicCoord$.reaction((_, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+        }
+      }),
+      box._intrinsicSize$.reaction((_, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+        }
+      }),
+      box._zIndex$.reaction((_, skipUpdate) => {
+        if (this.boxes.length > 0) {
+          const topBox = this.boxes.reduce((topBox2, box2) => topBox2.zIndex > box2.zIndex ? topBox2 : box2);
+          this.topBox$.setValue(topBox);
+        }
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+        }
+      })
+    ]);
+    this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
+    return box;
+  }
+  query(config) {
+    return config ? this.boxes.filter(this.teleBoxMatcher(config)) : [...this.boxes];
+  }
+  queryOne(config) {
+    return config ? this.boxes.find(this.teleBoxMatcher(config)) : this.boxes[0];
+  }
+  update(boxID, config, skipUpdate = false) {
+    const box = this.boxes.find((box2) => box2.id === boxID);
+    if (box) {
+      return this.updateBox(box, config, skipUpdate);
+    }
   }
-  updateAll(e2, t2 = false) {
-    this.boxes.forEach((i2) => {
-      this.updateBox(i2, e2, t2);
+  updateAll(config, skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      this.updateBox(box, config, skipUpdate);
     });
   }
-  remove(e2, t2 = false) {
-    const i2 = this.getBoxIndex(e2);
-    if (i2 >= 0) {
-      const e3 = this.boxes.slice(), s2 = e3.splice(i2, 1);
-      return this.boxes$.setValue(e3), s2.forEach((e4) => e4.destroy()), t2 || (this.boxes.length <= 0 && (this.setMaximized(false), this.setMinimized(false)), this.events.emit(X$3.Removed, s2)), s2[0];
+  remove(boxOrID, skipUpdate = false) {
+    const index2 = this.getBoxIndex(boxOrID);
+    if (index2 >= 0) {
+      const boxes = this.boxes.slice();
+      const deletedBoxes = boxes.splice(index2, 1);
+      this.boxes$.setValue(boxes);
+      deletedBoxes.forEach((box) => box.destroy());
+      if (!skipUpdate) {
+        if (this.boxes.length <= 0) {
+          this.setMaximized(false);
+          this.setMinimized(false);
+        }
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+      }
+      return deletedBoxes[0];
     }
+    return;
   }
   removeTopBox() {
-    if (this.topBox)
+    if (this.topBox) {
       return this.remove(this.topBox);
+    }
+    return;
   }
-  removeAll(e2 = false) {
-    const t2 = this.boxes$.value;
-    return this.boxes$.setValue([]), t2.forEach((e3) => e3.destroy()), e2 || (this.boxes.length <= 0 && (this.setMaximized(false), this.setMinimized(false)), this.events.emit(X$3.Removed, t2)), t2;
+  removeAll(skipUpdate = false) {
+    const deletedBoxes = this.boxes$.value;
+    this.boxes$.setValue([]);
+    deletedBoxes.forEach((box) => box.destroy());
+    if (!skipUpdate) {
+      if (this.boxes.length <= 0) {
+        this.setMaximized(false);
+        this.setMinimized(false);
+      }
+      this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+    }
+    return deletedBoxes;
   }
-  mount(e2) {
-    this._root$.setValue(e2);
+  mount(root) {
+    this._root$.setValue(root);
   }
   unmount() {
     this._root$.setValue(null);
   }
-  destroy(e2 = false) {
-    this.events.clearListeners(), this._sideEffect.flushAll(), this.removeAll(e2), this.collector.destroy(), this.titleBar.destroy();
+  destroy(skipUpdate = false) {
+    this.events.clearListeners();
+    this._sideEffect.flushAll();
+    this.removeAll(skipUpdate);
+    this.collector.destroy();
+    this.titleBar.destroy();
   }
-  wrapClassName(e2) {
-    return `${this.namespace}-${e2}`;
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
   }
-  focusBox(e2, t2 = false) {
-    const i2 = this.getBox(e2);
-    i2 && (this.boxes.forEach((e3) => {
-      if (i2 === e3) {
-        let e4 = false;
-        i2.focus || (e4 = true, i2._focus$.setValue(true, t2)), e4 && !t2 && this.events.emit(X$3.Focused, i2);
-      } else
-        e3.focus && this.blurBox(e3, t2);
-    }), this.titleBar.focusBox(i2));
+  focusBox(boxOrID, skipUpdate = false) {
+    const targetBox = this.getBox(boxOrID);
+    if (targetBox) {
+      this.boxes.forEach((box) => {
+        if (targetBox === box) {
+          let focusChanged = false;
+          if (!targetBox.focus) {
+            focusChanged = true;
+            targetBox._focus$.setValue(true, skipUpdate);
+          }
+          if (focusChanged && !skipUpdate) {
+            this.events.emit(TELE_BOX_MANAGER_EVENT.Focused, targetBox);
+          }
+        } else if (box.focus) {
+          this.blurBox(box, skipUpdate);
+        }
+      });
+      this.titleBar.focusBox(targetBox);
+    }
   }
   focusTopBox() {
-    if (this.topBox && !this.topBox.focus)
+    if (this.topBox && !this.topBox.focus) {
       return this.focusBox(this.topBox);
+    }
   }
-  blurBox(e2, t2 = false) {
-    const i2 = this.getBox(e2);
-    i2 && (i2.focus && (i2._focus$.setValue(false, t2), t2 || this.events.emit(X$3.Blurred, i2)), this.titleBar.focusedBox === i2 && this.titleBar.focusBox());
-  }
-  blurAll(e2 = false) {
-    this.boxes.forEach((t2) => {
-      t2.focus && (t2._focus$.setValue(false, e2), e2 || this.events.emit(X$3.Blurred, t2));
-    }), this.titleBar.focusedBox && this.titleBar.focusBox();
+  blurBox(boxOrID, skipUpdate = false) {
+    const targetBox = this.getBox(boxOrID);
+    if (targetBox) {
+      if (targetBox.focus) {
+        targetBox._focus$.setValue(false, skipUpdate);
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
+        }
+      }
+      if (this.titleBar.focusedBox === targetBox) {
+        this.titleBar.focusBox();
+      }
+    }
   }
-  teleBoxMatcher(e2) {
-    const t2 = Object.keys(e2);
-    return (i2) => t2.every((t3) => e2[t3] === i2[t3]);
+  blurAll(skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      if (box.focus) {
+        box._focus$.setValue(false, skipUpdate);
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
+        }
+      }
+    });
+    if (this.titleBar.focusedBox) {
+      this.titleBar.focusBox();
+    }
   }
-  updateBox(e2, t2, i2 = false) {
-    var s2, a2, o2, r2, n2, h;
-    t2.x == null && t2.y == null || e2._intrinsicCoord$.setValue({ x: (s2 = t2.x) != null ? s2 : e2.intrinsicX, y: (a2 = t2.y) != null ? a2 : e2.intrinsicY }, i2), t2.width == null && t2.height == null || e2._intrinsicSize$.setValue({ width: (o2 = t2.width) != null ? o2 : e2.intrinsicWidth, height: (r2 = t2.height) != null ? r2 : e2.intrinsicHeight }, i2), t2.title != null && e2._title$.setValue(t2.title), t2.visible != null && e2._visible$.setValue(t2.visible, i2), t2.resizable != null && e2._resizable$.setValue(t2.resizable, i2), t2.draggable != null && e2._draggable$.setValue(t2.draggable, i2), t2.ratio != null && e2._ratio$.setValue(t2.ratio, i2), t2.zIndex != null && e2._zIndex$.setValue(t2.zIndex, i2), t2.content != null && e2.mountContent(t2.content), t2.footer != null && e2.mountFooter(t2.footer), t2.minHeight == null && t2.minWidth == null || e2._minSize$.setValue({ width: (n2 = t2.minWidth) != null ? n2 : e2.minWidth, height: (h = t2.minHeight) != null ? h : e2.minHeight }, i2);
+  teleBoxMatcher(config) {
+    const keys = Object.keys(config);
+    return (box) => keys.every((key) => config[key] === box[key]);
   }
-  smartPosition(e2) {
-    let { x: t2, y: i2 } = e2;
-    const { width: s2 = 0.5, height: a2 = 0.5 } = e2, o2 = this.stageRect, r2 = this.topBox;
-    if (t2 == null) {
-      let e3 = o2.x + 20;
-      if (r2) {
-        const t3 = r2.pxIntrinsicCoord.x + 20;
-        t3 + s2 * o2.width <= o2.x + o2.width && (e3 = t3);
+  updateBox(box, config, skipUpdate = false) {
+    var _a, _b, _c, _d, _e, _f;
+    if (config.x != null || config.y != null) {
+      box._intrinsicCoord$.setValue({
+        x: (_a = config.x) != null ? _a : box.intrinsicX,
+        y: (_b = config.y) != null ? _b : box.intrinsicY
+      }, skipUpdate);
+    }
+    if (config.width != null || config.height != null) {
+      box._intrinsicSize$.setValue({
+        width: (_c = config.width) != null ? _c : box.intrinsicWidth,
+        height: (_d = config.height) != null ? _d : box.intrinsicHeight
+      }, skipUpdate);
+    }
+    if (config.title != null) {
+      box._title$.setValue(config.title);
+    }
+    if (config.visible != null) {
+      box._visible$.setValue(config.visible, skipUpdate);
+    }
+    if (config.resizable != null) {
+      box._resizable$.setValue(config.resizable, skipUpdate);
+    }
+    if (config.draggable != null) {
+      box._draggable$.setValue(config.draggable, skipUpdate);
+    }
+    if (config.boxRatio != null) {
+      box._boxRatio$.setValue(config.boxRatio, skipUpdate);
+    }
+    if (config.zIndex != null) {
+      box._zIndex$.setValue(config.zIndex, skipUpdate);
+    }
+    if (config.stageRatio !== void 0) {
+      box.setStageRatio(config.stageRatio, skipUpdate);
+    }
+    if (config.content != null) {
+      box.mountContent(config.content);
+    }
+    if (config.footer != null) {
+      box.mountFooter(config.footer);
+    }
+    if (config.minHeight != null || config.minWidth != null) {
+      box._minSize$.setValue({
+        width: (_e = config.minWidth) != null ? _e : box.minWidth,
+        height: (_f = config.minHeight) != null ? _f : box.minHeight
+      }, skipUpdate);
+    }
+  }
+  smartPosition(rect) {
+    let { x: x2, y: y2 } = rect;
+    const { width = 0.5, height = 0.5 } = rect;
+    const stageRect = this.stageRect;
+    const topBox = this.topBox;
+    if (x2 == null) {
+      let pxX = 20;
+      if (topBox) {
+        const pxPreferredX = topBox.pxIntrinsicCoord.x + 20;
+        const pxIntrinsicWidth = width * stageRect.width;
+        if (pxPreferredX + pxIntrinsicWidth <= stageRect.width) {
+          pxX = pxPreferredX;
+        }
       }
-      t2 = (e3 - o2.x) / o2.width;
+      x2 = pxX / stageRect.width;
     }
-    if (i2 == null) {
-      let e3 = o2.y + 20;
-      if (r2) {
-        const t3 = r2.pxIntrinsicCoord.y + 20;
-        t3 + a2 * o2.height <= o2.y + o2.height && (e3 = t3);
+    if (y2 == null) {
+      let pxY = 20;
+      if (topBox) {
+        const pxPreferredY = topBox.pxIntrinsicCoord.y + 20;
+        const pxIntrinsicHeight = height * stageRect.height;
+        if (pxPreferredY + pxIntrinsicHeight <= stageRect.height) {
+          pxY = pxPreferredY;
+        }
       }
-      i2 = (e3 - o2.y) / o2.height;
+      y2 = pxY / stageRect.height;
     }
-    return { x: t2, y: i2, width: s2, height: a2 };
+    return { x: x2, y: y2, width, height };
   }
-  makeBoxTop(e2, t2 = false) {
-    this.topBox && e2 !== this.topBox && e2._zIndex$.setValue(this.topBox.zIndex + 1, t2);
+  makeBoxTop(box, skipUpdate = false) {
+    if (this.topBox) {
+      if (box !== this.topBox) {
+        box._zIndex$.setValue(this.topBox.zIndex + 1, skipUpdate);
+      }
+    }
   }
-  getBoxIndex(e2) {
-    return typeof e2 == "string" ? this.boxes.findIndex((t2) => t2.id === e2) : this.boxes.findIndex((t2) => t2 === e2);
+  getBoxIndex(boxOrID) {
+    return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
   }
-  getBox(e2) {
-    return typeof e2 == "string" ? this.boxes.find((t2) => t2.id === e2) : e2;
+  getBox(boxOrID) {
+    return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
   }
 }
 const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) => {
   return new BoxManager({
     safeSetAttributes: (attributes) => manager.safeSetAttributes(attributes),
-    getMainView: () => manager.mainView,
     updateAppState: (...args) => {
       var _a;
       return (_a = manager.appManager) == null ? void 0 : _a.store.updateAppState(...args);
@@ -4447,17 +5651,17 @@ class BoxManager {
     const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
     this.sideEffectManager.add(() => [
-      this.teleBoxManager._state$.reaction((state) => {
+      this.teleBoxManager.onValChanged("state", (state) => {
         callbacks2.emit("boxStateChange", state);
         emitter2.emit("boxStateChange", state);
       }),
-      this.teleBoxManager._darkMode$.reaction((darkMode) => {
+      this.teleBoxManager.onValChanged("darkMode", (darkMode) => {
         callbacks2.emit("darkModeChange", darkMode);
       }),
-      this.teleBoxManager._prefersColorScheme$.reaction((colorScheme) => {
+      this.teleBoxManager.onValChanged("prefersColorScheme", (colorScheme) => {
         callbacks2.emit("prefersColorSchemeChange", colorScheme);
       }),
-      this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+      this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
         if (skipUpdate) {
           return;
         }
@@ -4473,7 +5677,7 @@ class BoxManager {
           }
         }
       }),
-      this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+      this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
         if (skipUpdate) {
           return;
         }
@@ -4485,7 +5689,11 @@ class BoxManager {
         });
       }),
       this.teleBoxManager.events.on("intrinsic_move", debounce((box) => {
-        boxEmitter2.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+        boxEmitter2.emit("move", {
+          appId: box.id,
+          x: box.intrinsicX,
+          y: box.intrinsicY
+        });
       }, 50)),
       this.teleBoxManager.events.on("intrinsic_resize", debounce((box) => {
         boxEmitter2.emit("resize", {
@@ -4506,21 +5714,11 @@ class BoxManager {
       this.teleBoxManager.events.on("z_index", (box) => {
         this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
       }),
-      this.teleBoxManager._stageRect$.subscribe((stage) => {
-        emitter2.emit("playgroundSizeChange", stage);
-        this.context.notifyContainerRectUpdate(stage);
-      }),
-      emitter2.on("writableChange", (isWritable) => {
-        this.teleBoxManager.setHighlightStage(isWritable);
-      }),
       emitter2.on("containerSizeRatioUpdate", (ratio) => {
         this.teleBoxManager._stageRatio$.setValue(ratio);
       })
     ]);
   }
-  get mainView() {
-    return this.context.getMainView();
-  }
   get canOperate() {
     return this.context.canOperate();
   }
@@ -4545,11 +5743,14 @@ class BoxManager {
   get stageRect() {
     return this.teleBoxManager.stageRect;
   }
+  get stageRect$() {
+    return this.teleBoxManager._stageRect$;
+  }
   createBox(params) {
     var _a, _b, _c;
     if (!this.teleBoxManager)
       return;
-    let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = (_a = params.app.config) != null ? _a : {};
+    let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT, enableShadowDOM = true } = (_a = params.app.config) != null ? _a : {};
     const { width, height } = (_b = params.app.config) != null ? _b : {};
     const title = ((_c = params.options) == null ? void 0 : _c.title) || params.appId;
     const rect = this.teleBoxManager.rootRect;
@@ -4565,10 +5766,12 @@ class BoxManager {
       minHeight: minheight,
       width,
       height,
-      id: params.appId
+      id: params.appId,
+      enableShadowDOM
     };
-    this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+    const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
     this.context.emitter.emit(`${params.appId}${Events.WindowCreated}`);
+    return box;
   }
   setupBoxManager(createTeleBoxManagerConfig) {
     const root = WindowManager.playground;
@@ -4578,7 +5781,13 @@ class BoxManager {
       fence: false,
       prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme
     };
-    const manager = new F$3(initManagerState);
+    if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.containerStyle) {
+      initManagerState.containerStyle = createTeleBoxManagerConfig.containerStyle;
+    }
+    if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageStyle) {
+      initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
+    }
+    const manager = new TeleBoxManager(initManagerState);
     if (this.teleBoxManager) {
       this.teleBoxManager.destroy();
     }
@@ -4614,13 +5823,15 @@ class BoxManager {
       return;
     const box = this.getBox(state.id);
     if (box) {
-      this.teleBoxManager.update(box.id, {
-        x: state.x,
-        y: state.y,
-        width: state.width || 0.5,
-        height: state.height || 0.5,
-        zIndex: state.zIndex
-      }, true);
+      if (state.size) {
+        box._intrinsicSize$.setValue(state.size, true);
+      }
+      if (state.position) {
+        box._intrinsicCoord$.setValue(state.position, true);
+      }
+      if (state.zIndex) {
+        box._zIndex$.setValue(state.zIndex, true);
+      }
       setTimeout(() => {
         if (state.focus) {
           this.teleBoxManager.focusBox(box.id, true);
@@ -4636,13 +5847,19 @@ class BoxManager {
     }
   }
   moveBox({ appId, x: x2, y: y2 }) {
-    this.teleBoxManager.update(appId, { x: x2, y: y2 }, true);
+    const box = this.getBox(appId);
+    if (box) {
+      box._intrinsicCoord$.setValue({ x: x2, y: y2 }, true);
+    }
   }
   focusBox({ appId }, skipUpdate = true) {
     this.teleBoxManager.focusBox(appId, skipUpdate);
   }
   resizeBox({ appId, width, height, skipUpdate }) {
-    this.teleBoxManager.update(appId, { width, height }, skipUpdate);
+    const box = this.getBox(appId);
+    if (box) {
+      box._intrinsicSize$.setValue({ width, height }, skipUpdate);
+    }
   }
   setBoxMinSize(params) {
     this.teleBoxManager.update(params.appId, {
@@ -5312,11 +6529,14 @@ class Cursor {
       let translateX = point.x - 2;
       let translateY = point.y - 18;
       if (type === "app") {
-        const wrapperRect = this.cursorManager.wrapperRect;
+        const wrapperRect = this.cursorManager.playgroundRect;
         if (wrapperRect) {
           translateX = translateX + rect.x - wrapperRect.x;
           translateY = translateY + rect.y - wrapperRect.y;
         }
+      } else {
+        translateX = translateX + rect.x;
+        translateY = translateY + rect.y;
       }
       if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
         (_a = this.component) == null ? void 0 : _a.$set({ visible: false, x: translateX, y: translateY });
@@ -5547,7 +6767,6 @@ class CursorManager {
         wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
       };
     });
-    this.wrapperRect = wrapper.getBoundingClientRect();
   }
   setMainViewDivElement(div) {
     this.mainViewElement = div;
@@ -5577,8 +6796,8 @@ class CursorManager {
   }
   updateContainerRect() {
     var _a, _b;
-    this.containerRect = (_a = WindowManager.container) == null ? void 0 : _a.getBoundingClientRect();
-    this.wrapperRect = (_b = WindowManager.playground) == null ? void 0 : _b.getBoundingClientRect();
+    this.wrapperRect = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    this.playgroundRect = (_b = WindowManager.playground) == null ? void 0 : _b.getBoundingClientRect();
   }
   deleteCursor(uid) {
     this.store.cleanCursor(uid);
@@ -5632,18 +6851,22 @@ class ReconnectRefresher {
     this.reactors = /* @__PURE__ */ new Map();
     this.disposers = /* @__PURE__ */ new Map();
     this.onPhaseChanged = (phase) => {
-      var _a;
+      var _a, _b;
       if (phase === RoomPhase.Reconnecting) {
         this.ctx.emitter.emit("startReconnect");
       }
       if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-        (_a = this.room) == null ? void 0 : _a.dispatchMagixEvent(EnsureReconnectEvent, {});
+        if ((_a = this.room) == null ? void 0 : _a.isWritable) {
+          (_b = this.room) == null ? void 0 : _b.dispatchMagixEvent(EnsureReconnectEvent, {});
+        } else {
+          this.onReconnected();
+        }
       }
       this.phase = phase;
     };
     this.onReconnected = debounce(() => {
       this._onReconnected();
-    }, 3e3);
+    }, 1e3);
     this._onReconnected = () => {
       log("onReconnected refresh reactors");
       this.releaseDisposers();
@@ -5691,6 +6914,7 @@ class ReconnectRefresher {
       this.reactors.set(id2, func);
       this.disposers.set(id2, func());
     }
+    return () => this.remove(id2);
   }
   remove(id2) {
     if (this.reactors.has(id2)) {
@@ -5762,6 +6986,9 @@ const replaceRoomFunction = (room, manager) => {
     room.lockImage = (...args) => manager.lockImage(...args);
     room.lockImages = (...args) => manager.lockImages(...args);
     delegateRemoveScenes(room, manager);
+    if (!room.dynamicPpt.slideStateAdapter.pptHandler) {
+      room.dynamicPpt.slideStateAdapter.pptHandler = manager.createPPTHandler();
+    }
   }
 };
 const delegateRemoveScenes = (room, manager) => {
@@ -15309,6 +16536,10 @@ const BuiltinApps = {
   DocsViewer: NetlessAppDocsViewer.kind,
   MediaPlayer: K.kind
 };
+const BuiltinAppsMap = {
+  [BuiltinApps.DocsViewer]: NetlessAppDocsViewer,
+  [BuiltinApps.MediaPlayer]: K
+};
 var videoJs = "";
 var style$1 = "";
 var style = "";
@@ -15316,20 +16547,20 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.3";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.9", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.30";
+    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.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.9", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.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" } };
   }
   static async mount(params) {
     var _a;
     const room = params.room;
     _WindowManager.container = params.container;
-    const containerSizeRatio = params.containerSizeRatio;
     const debug = params.debug;
     const cursor = params.cursor;
     _WindowManager.params = params;
@@ -15366,21 +16597,21 @@ const _WindowManager = class extends InvisiblePlugin {
     if (!manager) {
       throw new Error("[WindowManager]: create manager failed");
     }
-    if (containerSizeRatio) {
-      _WindowManager.containerSizeRatio = containerSizeRatio;
+    if (params.containerSizeRatio) {
+      _WindowManager.containerSizeRatio = params.containerSizeRatio;
     }
+    manager.containerSizeRatio = _WindowManager.containerSizeRatio;
     await manager.ensureAttributes();
     manager.appManager = new AppManager(manager);
     manager._pageState = new PageStateImpl(manager.appManager);
     manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
-    if (containerSizeRatio) {
-      manager.containerSizeRatio = containerSizeRatio;
-    }
     manager.boxManager = createBoxManager(manager, callbacks$1, emitter, boxEmitter, {
       collectorContainer: params.collectorContainer,
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
-      stageRatio: params.containerSizeRatio
+      stageRatio: _WindowManager.containerSizeRatio,
+      containerStyle: params.containerStyle,
+      stageStyle: params.stageStyle
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -15407,22 +16638,22 @@ const _WindowManager = class extends InvisiblePlugin {
           } catch (error) {
             throw new Error("[WindowManger]: room must be switched to be writable");
           }
-          manager = await room.createInvisiblePlugin(_WindowManager, {});
-          manager.ensureAttributes();
+          manager = await createInvisiblePlugin(room);
+          manager == null ? void 0 : manager.ensureAttributes();
           await wait(500);
           await room.setWritable(false);
         } else {
-          manager = await room.createInvisiblePlugin(_WindowManager, {});
+          manager = await createInvisiblePlugin(room);
         }
       }
     }
     return manager;
   }
-  static initContainer(container, overwriteStyles) {
+  static initContainer(container, target, overwriteStyles) {
     if (!_WindowManager.container) {
       _WindowManager.container = container;
     }
-    const { playground, mainViewElement } = setupWrapper(container);
+    const { playground, mainViewElement } = setupWrapper(container, target);
     _WindowManager.playground = playground;
     if (overwriteStyles) {
       const style2 = document.createElement("style");
@@ -15435,7 +16666,7 @@ const _WindowManager = class extends InvisiblePlugin {
     return appRegister.registered;
   }
   bindContainer(container) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (isRoom(this.displayer) && this.room.phase !== RoomPhase.Connected) {
       throw new BindContainerRoomPhaseInvalidError();
     }
@@ -15444,23 +16675,24 @@ const _WindowManager = class extends InvisiblePlugin {
         container.appendChild(_WindowManager.container.firstChild);
       }
     } else {
-      if (_WindowManager.params) {
+      const teleboxContainer = (_a = this.boxManager) == null ? void 0 : _a.teleBoxManager.$stage;
+      if (_WindowManager.params && teleboxContainer) {
         const params = _WindowManager.params;
-        const mainViewElement = _WindowManager.initContainer(container, params.overwriteStyles);
+        const mainViewElement = _WindowManager.initContainer(container, teleboxContainer, params.overwriteStyles);
         if (this.boxManager && _WindowManager.playground) {
           this.boxManager.setRoot(_WindowManager.playground);
         }
         this.bindMainView(mainViewElement, params.disableCameraTransform);
         if (_WindowManager.playground) {
-          (_a = this.cursorManager) == null ? void 0 : _a.setupWrapper(_WindowManager.playground);
+          (_b = this.cursorManager) == null ? void 0 : _b.setupWrapper(_WindowManager.playground);
         }
       }
     }
     emitter.emit("updateManagerRect");
-    (_b = this.appManager) == null ? void 0 : _b.refresh();
-    (_c = this.appManager) == null ? void 0 : _c.resetMaximized();
-    (_d = this.appManager) == null ? void 0 : _d.resetMinimized();
-    (_e = this.appManager) == null ? void 0 : _e.displayerWritableListener(!this.room.isWritable);
+    (_c = this.appManager) == null ? void 0 : _c.refresh();
+    (_d = this.appManager) == null ? void 0 : _d.resetMaximized();
+    (_e = this.appManager) == null ? void 0 : _e.resetMinimized();
+    (_f = this.appManager) == null ? void 0 : _f.displayerWritableListener(!this.room.isWritable);
     _WindowManager.container = container;
   }
   bindCollectorContainer(container) {
@@ -15600,6 +16832,17 @@ const _WindowManager = class extends InvisiblePlugin {
       return false;
     }
   }
+  async jumpPage(index2) {
+    if (!this.appManager) {
+      return false;
+    }
+    if (index2 < 0 || index2 >= this.pageState.length) {
+      console.warn(`[WindowManager]: index ${index2} out of range`);
+      return false;
+    }
+    await this.appManager.setMainViewSceneIndex(index2);
+    return true;
+  }
   async addPage(params) {
     if (this.appManager) {
       const after = params == null ? void 0 : params.after;
@@ -15650,17 +16893,20 @@ const _WindowManager = class extends InvisiblePlugin {
     addEmitterOnceListener(`destroy-${kind2}`, listener);
   }
   setViewMode(mode) {
-    var _a, _b, _c;
+    var _a;
+    log("setViewMode", mode);
+    const mainViewProxy = (_a = this.appManager) == null ? void 0 : _a.mainViewProxy;
     if (mode === ViewMode.Broadcaster) {
       if (this.canOperate) {
-        (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.setCameraAndSize();
+        mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
       }
-      (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.start();
+      mainViewProxy == null ? void 0 : mainViewProxy.start();
     }
     if (mode === ViewMode.Freedom) {
-      (_c = this.appManager) == null ? void 0 : _c.mainViewProxy.stop();
+      mainViewProxy == null ? void 0 : mainViewProxy.stop();
     }
     this.viewMode = mode;
+    this.viewMode$.setValue(mode);
   }
   setBoxState(boxState) {
     if (!this.canOperate)
@@ -15705,6 +16951,20 @@ const _WindowManager = class extends InvisiblePlugin {
       throw new AppManagerNotInitError();
     }
   }
+  get baseCamera$() {
+    if (this.appManager) {
+      return this.appManager.mainViewProxy.camera$;
+    } else {
+      throw new AppManagerNotInitError();
+    }
+  }
+  get baseSize$() {
+    if (this.appManager) {
+      return this.appManager.mainViewProxy.size$;
+    } else {
+      throw new AppManagerNotInitError();
+    }
+  }
   get cameraState() {
     if (this.appManager) {
       return this.appManager.mainViewProxy.cameraState;
@@ -15798,26 +17058,31 @@ const _WindowManager = class extends InvisiblePlugin {
     return (_a = this.appManager) == null ? void 0 : _a.closeApp(appId);
   }
   moveCamera(camera) {
-    var _a;
-    const pureCamera = omit(camera, ["animationMode"]);
     const mainViewCamera = __spreadValues({}, this.mainView.camera);
-    if (isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
+    const nextCamera = __spreadValues(__spreadValues({}, mainViewCamera), camera);
+    if (isEqual(nextCamera, mainViewCamera))
       return;
-    this.mainView.moveCamera(camera);
-    (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCamera, camera);
-    setTimeout(() => {
-      var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.setCameraAndSize();
-    }, 500);
+    if (!this.appManager)
+      return;
+    this.appManager.mainViewProxy.storeCamera(__spreadValues({
+      id: this.appManager.uid
+    }, nextCamera));
   }
   moveCameraToContain(rectangle) {
-    var _a;
-    this.mainView.moveCameraToContain(rectangle);
-    (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
-    setTimeout(() => {
-      var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.setCameraAndSize();
-    }, 500);
+    if (!this.appManager)
+      return;
+    const mainViewSize = this.appManager.mainViewProxy.size$.value;
+    if (mainViewSize) {
+      const wScale = mainViewSize.width / rectangle.width;
+      const hScale = mainViewSize.height / rectangle.height;
+      const nextScale = Math.min(wScale, hScale);
+      this.appManager.mainViewProxy.storeCamera({
+        id: this.appManager.uid,
+        scale: nextScale,
+        centerX: rectangle.originX,
+        centerY: rectangle.originY
+      });
+    }
   }
   convertToPointInWorld(point) {
     return this.mainView.convertToPointInWorld(point);
@@ -15928,12 +17193,12 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.Refresh);
   }
   _refresh() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.rebind();
     if (_WindowManager.container) {
       this.bindContainer(_WindowManager.container);
     }
-    (_c = (_b = this.appManager) == null ? void 0 : _b.refresher) == null ? void 0 : _c.refresh();
+    (_b = this.appManager) == null ? void 0 : _b.refresher.refresh();
   }
   setContainerSizeRatio(ratio) {
     if (!isNumber(ratio)) {
@@ -15943,6 +17208,34 @@ const _WindowManager = class extends InvisiblePlugin {
     this.containerSizeRatio = ratio;
     emitter.emit("containerSizeRatioUpdate", ratio);
   }
+  setContainerStyle(style2) {
+    var _a;
+    (_a = this.boxManager) == null ? void 0 : _a.teleBoxManager.setContainerStyle(style2);
+  }
+  setStageStyle(style2) {
+    var _a;
+    (_a = this.boxManager) == null ? void 0 : _a.teleBoxManager.setStageStyle(style2);
+  }
+  createPPTHandler() {
+    return {
+      onPageJumpTo: (_pptUUID, index2) => {
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = this.appManager) == null ? void 0 : _a.focusApp) == null ? void 0 : _b.appContext) == null ? void 0 : _c.whiteBoardView) == null ? void 0 : _d.jumpPage(index2);
+      },
+      onPageToNext: () => {
+        var _a, _b, _c, _d;
+        if (this.focused) {
+          (_d = (_c = (_b = (_a = this.appManager) == null ? void 0 : _a.focusApp) == null ? void 0 : _b.appContext) == null ? void 0 : _c.whiteBoardView) == null ? void 0 : _d.nextPage();
+        }
+      },
+      onPageToPrev: () => {
+        var _a, _b, _c, _d;
+        if (this.focused) {
+          (_d = (_c = (_b = (_a = this.appManager) == null ? void 0 : _a.focusApp) == null ? void 0 : _b.appContext) == null ? void 0 : _c.whiteBoardView) == null ? void 0 : _d.prevPage();
+        }
+      }
+    };
+  }
   isDynamicPPT(scenes) {
     var _a, _b;
     const sceneSrc = (_b = (_a = scenes[0]) == null ? void 0 : _a.ppt) == null ? void 0 : _b.src;
@@ -15977,4 +17270,4 @@ WindowManager.debug = false;
 WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
 WindowManager.isCreated = false;
 setupBuiltin();
-export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotFoundError, BoxNotCreatedError, BuiltinApps, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };
+export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotFoundError, BoxNotCreatedError, BuiltinApps, BuiltinAppsMap, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };