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

package/dist/index.es.js

@@ -24,7 +24,7 @@ import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reactio
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
 import { Val, combine, ValManager, withReadonlyValueEnhancer, withValueEnhancer, derive } from "value-enhancer";
-import { ResizeObserver as ResizeObserver$2 } from "@juggle/resize-observer";
+import { ResizeObserver as ResizeObserver$3 } from "@juggle/resize-observer";
 import p$1 from "video.js";
 var Events = /* @__PURE__ */ ((Events2) => {
   Events2["AppMove"] = "AppMove";
@@ -352,6 +352,9 @@ 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;
@@ -931,17 +934,25 @@ 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$;
-    this.appProxy.sideEffectManager.add(() => appProxy.appEmitter.on("pageStateChange", (pageState) => {
-      pageState$.setValue(pageState);
-    }));
-    const camera$ = new Val(pick(this.view.camera, ["centerX", "centerY", "scale"]));
     this.baseCamera$ = camera$;
-    this.appProxy.sideEffectManager.add(() => appProxy.camera$.subscribe((camera) => {
-      if (camera) {
-        camera$.setValue(pick(camera, ["centerX", "centerY", "scale"]));
-      }
-    }));
+    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() {
@@ -959,12 +970,12 @@ const log = (...args) => {
     console.log(`[WindowManager]:`, ...args);
   }
 };
-const setupWrapper = (root) => {
+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 };
 };
@@ -1033,7 +1044,6 @@ class AppContext {
       }
     };
     this.createWhiteBoardView = (params) => {
-      var _a;
       if (this.whiteBoardView) {
         return this.whiteBoardView;
       }
@@ -1049,7 +1059,7 @@ class AppContext {
       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);
+      this.box.$main.appendChild(viewWrapper);
       view.divElement = viewWrapper;
       this.appProxy.fireMemberStateChange();
       if (this.isAddApp) {
@@ -1057,7 +1067,7 @@ class AppContext {
       }
       this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
       this.appProxy.sideEffectManager.add(() => [
-        this.box._contentStageRect$.subscribe((rect) => {
+        this.box._stageRect$.subscribe((rect) => {
           viewWrapper.style.left = `${rect.x}px`;
           viewWrapper.style.top = `${rect.y}px`;
           viewWrapper.style.width = `${rect.width}px`;
@@ -1238,13 +1248,9 @@ class CameraSynchronizer {
       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 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
@@ -1768,10 +1774,10 @@ class AppProxy {
                 });
                 this.camera$.setValue(toJS(this.appAttributes.camera));
               }
-              if (!this.size$.value && box.contentStageRect) {
-                const initialRect = this.computedInitialRect(box.contentStageRect);
-                const width = (initialRect == null ? void 0 : initialRect.width) || box.contentStageRect.width;
-                const height = (initialRect == null ? void 0 : initialRect.height) || box.contentStageRect.height;
+              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,
@@ -1784,7 +1790,7 @@ class AppProxy {
                 view$: this.view$,
                 camera$: this.camera$,
                 size$: this.size$,
-                stageRect$: box._contentStageRect$,
+                stageRect$: box._stageRect$,
                 storeCamera: this.storeCamera,
                 storeSize: this.storeSize
               });
@@ -1912,6 +1918,10 @@ class AppProxy {
         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);
@@ -2039,6 +2049,8 @@ class AppProxy {
     }
   }
   setViewFocusScenePath() {
+    if (this.status === "destroyed")
+      return;
     const fullPath = this.getFullScenePath();
     if (fullPath && this.view) {
       setViewFocusScenePath(this.view, fullPath);
@@ -2094,6 +2106,7 @@ class AppProxy {
     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);
@@ -2699,7 +2712,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);
       }
     };
@@ -3312,7 +3325,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);
   };
@@ -3330,7 +3343,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 {
@@ -3354,7 +3367,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;
 };
@@ -3993,190 +4006,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, n$3 = Object.prototype.propertyIsEnumerable, o$2 = (t2, i2, s2) => i2 in t2 ? e$2(t2, i2, { enumerable: true, configurable: true, writable: true, value: s2 }) : t2[i2] = s2, r$4 = (e2, t2) => {
-  for (var i2 in t2 || (t2 = {}))
-    a$1.call(t2, i2) && o$2(e2, i2, t2[i2]);
-  if (s$2)
-    for (var i2 of s$2(t2))
-      n$3.call(t2, i2) && o$2(e2, i2, t2[i2]);
-  return e2;
-};
-var v$3, w$2, C$3, y$2, E$3, z$2, _, B$2, N$3, S$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 = _ || (_ = {})).Close = "close", B$2.Maximize = "maximize", B$2.Minimize = "minimize", (S$3 = N$3 || (N$3 = {})).North = "n", S$3.South = "s", S$3.West = "w", S$3.East = "e", S$3.NorthWest = "nw", S$3.NorthEast = "ne", S$3.SouthEast = "se", S$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: n2, namespace: o2 = "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: _.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: _.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 = n2, this.namespace = o2, this.buttons = s2 || [{ type: _.Minimize, iconClassName: this.wrapClassName("titlebar-icon-minimize") }, { type: _.Maximize, iconClassName: this.wrapClassName("titlebar-icon-maximize"), isActive: (e3) => e3 === C$3.Maximized }, { type: _.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, n2, o2, r2] = ["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(o2), s2.appendChild(n2), s2.appendChild(r2), 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: n2 = 0.5, minWidth: o2 = 0, minHeight: r2 = 0, x: l2 = 0.1, y: $ = 0.1, resizable: b2 = true, draggable: v2 = true, ratio: w2 = -1, focus: y2 = false, zIndex: z2 = 100, stageRatio: _2 = null, titleBar: B2, content: N2, stage: S2, footer: M2, styles: k2, highlightStage: R2 = null, darkMode$: D2, fence$: T2, minimized$: V2, maximized$: W2, readonly$: Y2, root$: X2, rootRect$: P2, managerStageRect$: O2, managerStageRatio$: j2, collectorRect$: Z2, managerHighlightStage$: F2 }) {
-    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 G2 = new ValManager();
-    this._sideEffect.addDisposer(() => G2.destroy());
-    const J2 = new Val(t2), q2 = new Val(s2), Q2 = new Val(b2), K2 = new Val(v2), U2 = new Val(w2), ee2 = new Val(z2), te2 = new Val(y2), ie2 = new Val(N2), se2 = new Val(S2), ae2 = new Val(M2), ne2 = new Val(k2), oe2 = combine([V2, W2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal), re2 = new Val({ width: I$3(o2, 0, 1), height: I$3(r2, 0, 1) }, { compare: shallowequal }), he2 = combine([re2, O2], ([e3, t3]) => ({ width: e3.width * t3.width, height: e3.height * t3.height }), { compare: shallowequal }), le2 = new Val({ width: a2, height: n2 }, { compare: shallowequal });
-    this._sideEffect.addDisposer(re2.reaction((e3, t3) => {
-      le2.setValue({ width: Math.max(a2, e3.width), height: Math.max(n2, 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 de2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), ce2 = combine([le2, O2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), me2 = combine([de2, O2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), ue2 = new Val(R2), ge2 = combine([ue2, F2], ([e3, t3]) => e3 != null ? e3 : t3), pe2 = new Val(null), xe2 = new Val(P2.value, { compare: shallowequal }), fe2 = new Val(_2), $e2 = new A$2({ namespace: i2, root$: pe2, rootRect$: xe2, ratio$: combine([fe2, j2], ([e3, t3]) => e3 != null ? e3 : t3), highlightStage$: ge2 });
-    this._sideEffect.addDisposer(() => $e2.destroy());
-    withReadonlyValueEnhancer(this, { darkMode: D2, fence: T2, minimized: V2, maximized: W2, readonly: Y2, rootRect: P2, managerStageRect: O2, collectorRect: Z2 });
-    const be2 = { zIndex: ee2, focus: te2, $userContent: ie2, $userStage: se2, $userFooter: ae2, $userStyles: ne2, state: oe2, minSize: re2, pxMinSize: he2, intrinsicSize: le2, intrinsicCoord: de2, pxIntrinsicSize: ce2, pxIntrinsicCoord: me2, highlightStage: ge2, boxHighlightStage: ue2, contentRect: xe2, contentStageRect: $e2.stageRect$ };
-    withReadonlyValueEnhancer(this, be2, G2);
-    withValueEnhancer(this, { title: J2, visible: q2, resizable: Q2, draggable: K2, ratio: U2, stageRatio: fe2 }, G2), this.titleBar = B2 || new H$3({ readonly$: Y2, state$: oe2, title$: J2, 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(U2.subscribe((e3) => {
-      e3 > 0 && this.transform(me2.value.x, me2.value.y, ce2.value.width, ce2.value.height, true);
-    })), this._sideEffect.addDisposer(T2.subscribe((e3) => {
-      e3 && this.move(me2.value.x, me2.value.y, true);
-    })), this.$box = this.render(), pe2.setValue(this.$content.parentElement);
-    const ve2 = (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);
+        }
       }));
     };
-    ve2(D2, E$3.DarkMode), ve2(Y2, E$3.Readonly), ve2(ee2, E$3.ZIndex), ve2(V2, E$3.Minimized), ve2(W2, E$3.Maximized), ve2(oe2, E$3.State), ve2(le2, E$3.IntrinsicResize), ve2(de2, E$3.IntrinsicMove), this._sideEffect.addDisposer([q2.reaction((e3, t3) => {
-      t3 || e3 || this.events.emit(E$3.Close);
-    }), te2.reaction((e3, t3) => {
-      t3 || this.events.emit(e3 ? E$3.Focus : E$3.Blur);
-    }), X2.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;
@@ -4184,14 +4430,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;
@@ -4205,388 +4454,853 @@ class Y$3 {
   get intrinsicHeight() {
     return this._intrinsicSize$.value.height;
   }
-  move(e2, t2, i2 = false) {
-    let s2, a2;
-    const n2 = this.managerStageRect, o2 = this.pxIntrinsicSize;
-    if (this.fence)
-      s2 = I$3(e2, n2.x, n2.x + n2.width - o2.width), a2 = I$3(t2, n2.y, n2.y + n2.height - o2.height);
-    else {
-      const i3 = this.rootRect;
-      s2 = I$3(e2, 0 - o2.width + 20, 0 + i3.width - 20), a2 = I$3(t2, 0, 0 + i3.height - 20);
-    }
-    this._intrinsicCoord$.setValue({ x: (s2 - n2.x) / n2.width, y: (a2 - n2.y) / n2.height }, i2);
-  }
-  transform(e2, t2, i2, s2, a2 = false) {
-    const n2 = this.managerStageRect, o2 = 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;
-    }
-    t2 < o2.y && (t2 = o2.y, s2 = this.pxIntrinsicSize.height), this.move(e2, t2, a2), this._intrinsicSize$.setValue({ width: i2 / n2.width, height: s2 / n2.height }, a2);
-  }
-  mountContent(e2) {
-    this._$userContent$.setValue(e2);
+  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);
   }
   unmountContent() {
-    this._$userContent$.setValue(void 0);
+    if (this.$authorContent) {
+      this.$authorContent.remove();
+      this.$authorContent = void 0;
+    }
   }
-  mountStage(e2) {
-    this._$userStage$.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);
+    }
   }
   unmountStage() {
-    this._$userStage$.setValue(void 0);
+    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 n3 = 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;
-        n3.x = a3.x - t4 / 2 + a3.width / 2, n3.y = a3.y - s4 / 2 + a3.height / 2, n3.scaleX = a3.width / t4, n3.scaleY = a3.height / s4;
-      }
-      return n3;
-    }, { 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";
+    }));
+    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 a2 = document.createElement("div");
-    a2.className = this.wrapClassName("box-main"), this.$box.appendChild(a2);
-    const n2 = document.createElement("div");
-    n2.className = this.wrapClassName("titlebar-wrap"), n2.appendChild(this.titleBar.render()), this.$titleBar = n2;
-    const o2 = document.createElement("div");
-    o2.className = this.wrapClassName("content-wrap");
-    const r2 = document.createElement("div");
-    r2.className = this.wrapClassName("content") + " tele-fancy-scrollbar", this.$content = r2;
-    const h = () => {
-      const e3 = r2.getBoundingClientRect();
-      this._contentRect$.setValue({ x: 0, y: 0, width: e3.width, height: e3.height });
+    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
+      });
     };
     this._sideEffect.add(() => {
-      const e3 = new W$3(() => {
-        this.minimized || h();
-      });
-      return e3.observe(r2), () => e3.disconnect();
-    }), this._sideEffect.addDisposer(this._minimized$.reaction((e3) => {
-      e3 || this._sideEffect.setTimeout(h, 400, "minimized-content-rect-fix");
-    })), this._sideEffect.add(() => {
-      let e3;
-      return this._$userStyles$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && o2.appendChild(t3);
-      });
-    }), this._sideEffect.add(() => {
-      let e3;
-      return this._$userContent$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && r2.appendChild(t3);
-      });
-    }), this._sideEffect.add(() => {
-      let e3;
-      return this._$userStage$.subscribe((t3) => {
-        var i3;
-        if (e3 && e3.remove(), e3 = t3, t3) {
-          if (!this.$stage) {
-            const e4 = document.createElement("div");
-            this.$stage = e4, e4.className = this.wrapClassName("content-stage"), this._sideEffect.addDisposer(this._contentStageRect$.subscribe((t4) => {
-              e4.style.top = t4.y + "px", e4.style.left = t4.x + "px", e4.style.width = t4.width + "px", e4.style.height = t4.height + "px";
-            }), "content-stage-rect"), r2.appendChild(e4);
-          }
-          this.$stage.parentElement || r2.appendChild(this.$stage), this.$stage.appendChild(t3);
-        } else
-          ((i3 = this.$stage) == null ? void 0 : i3.parentElement) && this.$stage.remove();
-      });
-    }), o2.appendChild(r2);
-    const c = document.createElement("div");
-    return c.className = this.wrapClassName("footer-wrap"), this.$footer = c, this._sideEffect.add(() => {
-      let e3;
-      return this._$userFooter$.subscribe((t3) => {
-        e3 && e3.remove(), e3 = t3, t3 && c.appendChild(t3);
+      const observer = new ResizeObserver$1$1(() => {
+        if (!this.minimized) {
+          updateBodyRect();
+        }
       });
-    }), a2.appendChild(n2), a2.appendChild(o2), a2.appendChild(c), 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, n2 = 0, o2 = 0, r2 = 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: g2, height: p2 } = this.pxIntrinsicSize;
-      switch (a2) {
-        case N$3.North:
-          u3 = o2 + c2, p2 = 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:
-          p2 = h + c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.South: {
+          newHeight = trackStartHeight + offsetY;
           break;
-        case N$3.West:
-          m3 = n2 + s3, g2 = r2 - s3;
+        }
+        case TELE_BOX_RESIZE_HANDLE.West: {
+          newX = trackStartX + offsetX;
+          newWidth = trackStartWidth - offsetX;
           break;
-        case N$3.East:
-          g2 = r2 + s3;
+        }
+        case TELE_BOX_RESIZE_HANDLE.East: {
+          newWidth = trackStartWidth + offsetX;
           break;
-        case N$3.NorthWest:
-          m3 = n2 + s3, u3 = o2 + c2, g2 = r2 - s3, p2 = 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 = o2 + c2, g2 = r2 + s3, p2 = h - c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthEast: {
+          newY = trackStartY + offsetY;
+          newWidth = trackStartWidth + offsetX;
+          newHeight = trackStartHeight - offsetY;
           break;
-        case N$3.SouthEast:
-          g2 = r2 + s3, p2 = h + c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthEast: {
+          newWidth = trackStartWidth + offsetX;
+          newHeight = trackStartHeight + offsetY;
           break;
-        case N$3.SouthWest:
-          m3 = n2 + s3, g2 = r2 - s3, p2 = h + c2;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthWest: {
+          newX = trackStartX + offsetX;
+          newWidth = trackStartWidth - offsetX;
+          newHeight = trackStartHeight + offsetY;
           break;
-        default:
-          return void this.move(n2 + s3, o2 + c2);
-      }
-      this.transform(m3, u3, g2, p2);
-    }, 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;
-      if (e3.button != null && e3.button !== 0)
+      }
+      trackingHandle = void 0;
+      if (!$trackMask) {
         return;
-      if (!this.draggable || a2 || this.state !== C$3.Normal)
+      }
+      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 (ev.button != null && ev.button !== 0) {
         return;
-      const g2 = e3.target;
-      if ((u3 = g2.dataset) == null ? void 0 : u3.teleBoxHandle) {
-        k$1(e3), { x: n2, y: o2 } = this.pxIntrinsicCoord, { width: r2, height: h } = this.pxIntrinsicSize, { pageX: l2, pageY: d2 } = R$3(e3), a2 = g2.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);
+      }
+      if (!this.draggable || trackingHandle || this.state !== TELE_BOX_STATE.Normal) {
+        return;
+      }
+      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, namespace: s2 = "telebox", styles: a2 = {}, root$: n2 }) {
-    this._sideEffect = new SideEffectManager(), this.namespace = s2;
-    const o2 = new ValManager();
-    this._sideEffect.addDisposer(() => o2.destroy());
-    const r2 = new Val(void 0), h = derive(e2), l2 = new Val(a2), d2 = new Val(document.createElement("button"));
-    withValueEnhancer(this, { styles: l2, $collector: d2 }, o2);
-    withReadonlyValueEnhancer(this, { root: n2 });
-    withReadonlyValueEnhancer(this, { rect: r2, visible: h }, o2), d2.value.className = this.wrapClassName("collector"), d2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(d2.subscribe((s3) => {
-      this._sideEffect.addEventListener(s3, "click", () => {
-        t2.value || e2.setValue(false);
-      }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([h.subscribe((e3) => {
-        s3.classList.toggle(this.wrapClassName("collector-visible"), e3);
-      }), t2.subscribe((e3) => {
-        s3.classList.toggle(this.wrapClassName("collector-readonly"), e3);
-      }), i2.subscribe((e3) => {
-        s3.classList.toggle(this.wrapClassName("color-scheme-dark"), e3), s3.classList.toggle(this.wrapClassName("color-scheme-light"), !e3);
-      }), l2.subscribe((e3) => {
-        Object.keys(e3).forEach((t3) => {
-          const i3 = e3[t3];
-          i3 != null && (s3.style[t3] = i3);
-        });
-      }), n2.subscribe((e3) => {
-        e3 && e3.appendChild(s3);
-      }), combine([e2, n2]).subscribe(([e3, t3]) => {
-        if (e3 && t3) {
-          const { x: e4, y: i3, width: a3, height: n3 } = s3.getBoundingClientRect(), o3 = t3.getBoundingClientRect();
-          r2.setValue({ x: e4 - o3.x, y: i3 - o3.y, width: a3, height: n3 });
-        }
-      })], "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], n2 = (t2 = a2.dataset) == null ? void 0 : t2.teleBoxID;
-          n2 && (e2 && n2 === e2.id ? a2.classList.toggle(this.wrapClassName("titles-tab-focus"), true) : this.focusedBox && n2 === 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: n2, namespace: o2 = "telebox", readonly: r2 = false, stageRatio: l2 = -1, highlightStage: m2 = true } = {}) {
-    this.events = new Emittery(), this._sideEffect = new SideEffectManager(), this.namespace = o2;
-    const b2 = new ValManager();
-    this._sideEffect.addDisposer(() => b2.destroy());
-    const w2 = new Val(e2), y2 = new Val(r2), z2 = new Val(i2), B2 = new Val(s2), N2 = new Val(a2), S2 = new Val(l2), M2 = 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: 0, y: 0, 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, B2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal);
-    this.collector = n2 != null ? n2 : new O$3({ minimized$: z2, readonly$: y2, darkMode$: L2, namespace: o2, root$: w2 });
-    const V2 = new A$2({ namespace: o2, rootRect$: I2, ratio$: S2, root$: w2, highlightStage$: combine([M2, B2, 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: B2, stageRatio: S2, highlightStage: M2 }, 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 _.Maximize:
-          B2.setValue(!B2.value);
-          break;
-        case _.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);
-    }), B2.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;
@@ -4594,143 +5308,300 @@ 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((n2 = r$4(r$4({ zIndex: this.topBox ? this.topBox.zIndex + 1 : 100 }, e2), s2 ? this.smartPosition(e2) : {}), o2 = { namespace: this.namespace, root$: this._root$, 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$, managerHighlightStage$: this._highlightStage$ }, t$3(n2, i$1(o2))));
-    var n2, o2;
-    return a2.focus && (this.focusBox(a2), s2 && this.makeBoxTop(a2)), this.boxes$.setValue([...this.boxes, a2]), this._sideEffect.addDisposer([a2._delegateEvents.on(_.Maximize, () => {
-      this.setMaximized(!this.maximized);
-    }), a2._delegateEvents.on(_.Minimize, () => {
-      this.setMinimized(true);
-    }), a2._delegateEvents.on(_.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];
   }
-  updateAll(e2, t2 = false) {
-    this.boxes.forEach((i2) => {
-      this.updateBox(i2, e2, t2);
+  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(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();
-  }
-  teleBoxMatcher(e2) {
-    const t2 = Object.keys(e2);
-    return (i2) => t2.every((t3) => e2[t3] === i2[t3]);
-  }
-  updateBox(e2, t2, i2 = false) {
-    var s2, a2, n2, o2, r2, 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: (n2 = t2.width) != null ? n2 : e2.intrinsicWidth, height: (o2 = t2.height) != null ? o2 : 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.stageRatio !== void 0 && e2.setStageRatio(t2.stageRatio, 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: (r2 = t2.minWidth) != null ? r2 : e2.minWidth, height: (h = t2.minHeight) != null ? h : e2.minHeight }, i2);
+  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();
+      }
+    }
   }
-  smartPosition(e2) {
-    let { x: t2, y: i2 } = e2;
-    const { width: s2 = 0.5, height: a2 = 0.5 } = e2, n2 = this.stageRect, o2 = this.topBox;
-    if (t2 == null) {
-      let e3 = n2.x + 20;
-      if (o2) {
-        const t3 = o2.pxIntrinsicCoord.x + 20;
-        t3 + s2 * n2.width <= n2.x + n2.width && (e3 = 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);
+        }
       }
-      t2 = (e3 - n2.x) / n2.width;
+    });
+    if (this.titleBar.focusedBox) {
+      this.titleBar.focusBox();
+    }
+  }
+  teleBoxMatcher(config) {
+    const keys = Object.keys(config);
+    return (box) => keys.every((key) => config[key] === box[key]);
+  }
+  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;
+        }
+      }
+      x2 = pxX / stageRect.width;
     }
-    if (i2 == null) {
-      let e3 = n2.y + 20;
-      if (o2) {
-        const t3 = o2.pxIntrinsicCoord.y + 20;
-        t3 + a2 * n2.height <= n2.y + n2.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 - n2.y) / n2.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) => {
@@ -4761,15 +5632,6 @@ const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) =
 class BoxManager {
   constructor(context, createTeleBoxManagerConfig) {
     this.context = context;
-    this.mainViewElement$ = new Val(void 0);
-    this.updateStyle = (element2, rect) => {
-      if (!element2)
-        return;
-      element2.style.width = rect.width + "px";
-      element2.style.height = rect.height + "px";
-      element2.style.left = rect.x + "px";
-      element2.style.top = rect.y + "px";
-    };
     this.sideEffectManager = new SideEffectManager();
     const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
@@ -4837,14 +5699,6 @@ class BoxManager {
       this.teleBoxManager.events.on("z_index", (box) => {
         this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
       }),
-      this.teleBoxManager._stageRect$.subscribe((stage) => {
-        this.updateStyle(this.mainViewElement$.value, 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);
       })
@@ -4881,7 +5735,7 @@ class BoxManager {
     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;
@@ -4897,7 +5751,8 @@ class BoxManager {
       minHeight: minheight,
       width,
       height,
-      id: params.appId
+      id: params.appId,
+      enableShadowDOM
     };
     const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
     this.context.emitter.emit(`${params.appId}${Events.WindowCreated}`);
@@ -4909,10 +5764,15 @@ class BoxManager {
       stageRatio: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageRatio,
       root,
       fence: false,
-      prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme,
-      highlightStage: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.highlightStage
+      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();
     }
@@ -4944,18 +5804,19 @@ class BoxManager {
     return this.teleBoxManager.topBox;
   }
   updateBoxState(state) {
-    var _a, _b, _c, _d;
     if (!state)
       return;
     const box = this.getBox(state.id);
     if (box) {
-      this.teleBoxManager.update(box.id, {
-        x: (_a = state.position) == null ? void 0 : _a.x,
-        y: (_b = state.position) == null ? void 0 : _b.y,
-        width: ((_c = state.size) == null ? void 0 : _c.width) || 0.5,
-        height: ((_d = state.size) == null ? void 0 : _d.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);
@@ -4971,13 +5832,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, {
@@ -15654,6 +16521,10 @@ const BuiltinApps = {
   DocsViewer: NetlessAppDocsViewer.kind,
   MediaPlayer: K.kind
 };
+const BuiltinAppsMap = {
+  [BuiltinApps.DocsViewer]: NetlessAppDocsViewer,
+  [BuiltinApps.MediaPlayer]: K
+};
 var videoJs = "";
 var style$1 = "";
 var style = "";
@@ -15661,15 +16532,15 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.26";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.18", "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", "@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.29";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.27", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.3.0", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@playwright/test": "^1.23.0", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/node": "^18.0.0", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vite-plugin-dts": "^1.2.0", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
     this.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.18", "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", "@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;
@@ -15724,7 +16595,8 @@ const _WindowManager = class extends InvisiblePlugin {
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
       stageRatio: _WindowManager.containerSizeRatio,
-      highlightStage: params.highlightStage
+      containerStyle: params.containerStyle,
+      stageStyle: params.stageStyle
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -15762,11 +16634,11 @@ const _WindowManager = class extends InvisiblePlugin {
     }
     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");
@@ -15779,7 +16651,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();
     }
@@ -15788,24 +16660,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.boxManager.mainViewElement$.setValue(mainViewElement);
         }
         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) {
@@ -16321,6 +17193,14 @@ 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) => {
@@ -16375,4 +17255,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 };