@netless/telebox-insider 0.3.0-beta.1 → 0.3.0-beta.10

package/dist/telebox-insider.cjs.js

@@ -1,34 +1,14 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-Object.defineProperty(exports, "__esModule", { value: true });
-exports[Symbol.toStringTag] = "Module";
-var fancyScrollbar = ".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}";
-var style$3 = '.telebox-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;\n}\n\n.telebox-box-main {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: #f9f9fc;\n  box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);\n  border-radius: 6px;\n  border: 1px solid #e3e3ec;\n}\n\n.telebox-titlebar-wrap {\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.telebox-content-wrap {\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n\n.telebox-resize-handle {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: absolute;\n  z-index: 2147483647;\n}\n\n.telebox-n {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -5px;\n  cursor: n-resize;\n}\n\n.telebox-s {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  bottom: -5px;\n  cursor: s-resize;\n}\n\n.telebox-w {\n  width: 5px;\n  height: 100%;\n  left: -5px;\n  top: 0;\n  cursor: w-resize;\n}\n\n.telebox-e {\n  width: 5px;\n  height: 100%;\n  right: -5px;\n  top: 0;\n  cursor: e-resize;\n}\n\n.telebox-nw {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  left: -5px;\n  cursor: nw-resize;\n}\n\n.telebox-ne {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  right: -5px;\n  cursor: ne-resize;\n}\n\n.telebox-se {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  right: -5px;\n  cursor: se-resize;\n}\n\n.telebox-sw {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  left: -5px;\n  cursor: sw-resize;\n}\n\n.telebox-track-mask {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 2147483647;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.0001);\n  cursor: move;\n}\n\n.telebox-cursor-n {\n  cursor: n-resize;\n}\n\n.telebox-cursor-s {\n  cursor: s-resize;\n}\n\n.telebox-cursor-w {\n  cursor: w-resize;\n}\n\n.telebox-cursor-e {\n  cursor: e-resize;\n}\n\n.telebox-cursor-nw {\n  cursor: nw-resize;\n}\n\n.telebox-cursor-ne {\n  cursor: ne-resize;\n}\n\n.telebox-cursor-se {\n  cursor: se-resize;\n}\n\n.telebox-cursor-sw {\n  cursor: sw-resize;\n}\n\n.telebox-maximized .telebox-resize-handles,\n.telebox-no-resize .telebox-resize-handles {\n  display: none;\n}\n\n.telebox-maximized {\n  box-shadow: none;\n  transition: none;\n}\n\n.telebox-minimized {\n  transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n}\n\n.telebox-transforming {\n  will-change: transform;\n  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0);\n}\n\n.telebox-readonly .telebox-resize-handle {\n  cursor: initial !important;\n  pointer-events: none !important;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-box-main {\n  color: #e9e9e9;\n  background: #212126;\n  border-color: #43434d;\n}';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var fancyScrollbar = "";
+var style$4 = "";
 var eventemitter3 = { exports: {} };
 (function(module) {
   var has = Object.prototype.hasOwnProperty, prefix = "~";
   function Events() {
   }
   if (Object.create) {
-    Events.prototype = Object.create(null);
+    Events.prototype = /* @__PURE__ */ Object.create(null);
     if (!new Events().__proto__)
       prefix = false;
   }
@@ -214,8 +194,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var __assign$1 = function() {
-  __assign$1 = Object.assign || function __assign2(t2) {
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t2) {
     for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
       s2 = arguments[i2];
       for (var p in s2)
@@ -224,7 +204,7 @@ var __assign$1 = function() {
     }
     return t2;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign.apply(this, arguments);
 };
 function __rest(s2, e2) {
   var t2 = {};
@@ -255,8 +235,8 @@ var createStep = function(setRunNextFrame) {
   var numThisFrame = 0;
   var isProcessing2 = false;
   var i2 = 0;
-  var cancelled = new WeakSet();
-  var toKeepAlive = new WeakSet();
+  var cancelled = /* @__PURE__ */ new WeakSet();
+  var toKeepAlive = /* @__PURE__ */ new WeakSet();
   var renderStep = {
     cancel: function(process) {
       var indexOfCallback = processToRunNextFrame.indexOf(process);
@@ -361,32 +341,6 @@ var startLoop = function() {
   if (!isProcessing)
     onNextFrame(processFrame);
 };
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function() {
-  __assign = Object.assign || function __assign2(t2) {
-    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
-      s2 = arguments[i2];
-      for (var p in s2)
-        if (Object.prototype.hasOwnProperty.call(s2, p))
-          t2[p] = s2[p];
-    }
-    return t2;
-  };
-  return __assign.apply(this, arguments);
-};
 var clamp$1 = function(min, max) {
   return function(v) {
     return Math.max(Math.min(v, max), min);
@@ -544,7 +498,7 @@ var color = {
   }
 };
 var createStyler = function(_a) {
-  var onRead2 = _a.onRead, onRender2 = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
+  var onRead2 = _a.onRead, onRender2 = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? /* @__PURE__ */ new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
   return function(_a2) {
     if (_a2 === void 0) {
       _a2 = {};
@@ -627,7 +581,7 @@ var testPrefix = function(key) {
         return;
       }
       camelCache.set(key, prefixedPropertyName);
-      setDashPrefix(key, "" + (noPrefix ? "" : "-") + camelToDash(prefixedPropertyName));
+      setDashPrefix(key, (noPrefix ? "" : "-") + camelToDash(prefixedPropertyName));
     }
   }
 };
@@ -666,7 +620,7 @@ var transformOriginProps = /* @__PURE__ */ new Set(["originX", "originY", "origi
 function isTransformOriginProp(key) {
   return transformOriginProps.has(key);
 }
-var int = /* @__PURE__ */ __assign$1(/* @__PURE__ */ __assign$1({}, number), { transform: Math.round });
+var int = /* @__PURE__ */ __assign(/* @__PURE__ */ __assign({}, number), { transform: Math.round });
 var valueTypes = {
   color,
   backgroundColor: color,
@@ -885,7 +839,7 @@ function createCssStyler(element, _a) {
     _a = {};
   }
   var enableHardwareAcceleration = _a.enableHardwareAcceleration, allowTransformNone = _a.allowTransformNone, props = __rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
-  return cssStyler(__assign$1({ element, buildStyles: createStyleBuilder({
+  return cssStyler(__assign({ element, buildStyles: createStyleBuilder({
     enableHardwareAcceleration,
     allowTransformNone
   }), preparseOutput: true }, props));
@@ -1075,7 +1029,7 @@ const e$1 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop
 };
 class o {
   constructor() {
-    this.disposers = new Map();
+    this.disposers = /* @__PURE__ */ new Map();
   }
   add(e2, s2 = r$1()) {
     return this.flush(s2), this.disposers.set(s2, e2()), s2;
@@ -1123,9 +1077,9 @@ class o {
     }), this.disposers.clear();
   }
 }
-var e = Object.defineProperty, s = (typeof require != "undefined" && require, (s2, r2, t2) => (((s3, r3, t3) => {
+var e = Object.defineProperty, s = ("undefined" != typeof require && require, (s2, r2, t2) => (((s3, r3, t3) => {
   r3 in s3 ? e(s3, r3, { enumerable: true, configurable: true, writable: true, value: t3 }) : s3[r3] = t3;
-})(s2, typeof r2 != "symbol" ? r2 + "" : r2, t2), t2));
+})(s2, "symbol" != typeof r2 ? r2 + "" : r2, t2), t2));
 class r {
   constructor(e2, r2) {
     s(this, "_value"), s(this, "_beforeDestroys"), s(this, "_subscribers"), this._value = e2, r2 && (this.compare = r2);
@@ -1140,7 +1094,7 @@ class r {
     }
   }
   reaction(e2) {
-    return this._subscribers || (this._subscribers = new Set()), this._subscribers.add(e2), () => {
+    return this._subscribers || (this._subscribers = /* @__PURE__ */ new Set()), this._subscribers.add(e2), () => {
       this._subscribers && this._subscribers.delete(e2);
     };
   }
@@ -1158,7 +1112,7 @@ class r {
     this._beforeDestroys && (this._beforeDestroys.forEach((e2) => e2()), this._beforeDestroys.clear()), this._subscribers && this._subscribers.clear();
   }
   addBeforeDestroy(e2) {
-    return this._beforeDestroys || (this._beforeDestroys = new Set()), this._beforeDestroys.add(e2), () => {
+    return this._beforeDestroys || (this._beforeDestroys = /* @__PURE__ */ new Set()), this._beforeDestroys.add(e2), () => {
       this._beforeDestroys && this._beforeDestroys.delete(e2);
     };
   }
@@ -1199,21 +1153,20 @@ function c(e2) {
   };
   return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r(e3, t2)) };
 }
-var style$2 = '.telebox-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  box-sizing: border-box;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  background: #fff;\n  user-select: none;\n  border-bottom: 1px solid #eeeef7;\n  touch-action: manipulation;\n}\n\n.telebox-title-area {\n  padding-left: 16px;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n.telebox-title {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  overflow: hidden;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: PingFangSC-Regular, PingFang SC;\n  white-space: nowrap;\n  word-break: keep-all;\n  text-overflow: ellipsis;\n  color: #191919;\n}\n\n.telebox-drag-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: auto;\n  z-index: 10;\n}\n\n.telebox-titlebar-btns {\n  position: absolute;\n  right: 16px;\n  white-space: nowrap;\n  word-break: keep-all;\n  margin-left: auto;\n  font-size: 0;\n  z-index: 10;\n}\n\n.telebox-titlebar-btn {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  outline: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n\n.telebox-titlebar-btn ~ .telebox-titlebar-btn {\n  margin-left: 10px;\n}\n\n.telebox-titlebar-btn-icon {\n  width: 22px;\n  height: 22px;\n}\n\n.telebox-readonly .telebox-titlebar-btn {\n  cursor: not-allowed;\n}\n\n.telebox-titlebar-icon-minimize {\n  background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n}\n\n.telebox-titlebar-icon-maximize {\n  background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");\n}\n\n.telebox-titlebar-icon-maximize.is-active {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");\n}\n\n.telebox-titlebar-icon-close {\n  background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-title {\n  color: #e9e9e9;\n}\n\n.telebox-color-scheme-dark .telebox-titlebar {\n  color: #e9e9e9;\n  background: #43434d;\n  border-bottom: none;\n}';
-exports.TELE_BOX_COLOR_SCHEME = void 0;
-(function(TELE_BOX_COLOR_SCHEME2) {
+var style$3 = "";
+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";
-})(exports.TELE_BOX_COLOR_SCHEME || (exports.TELE_BOX_COLOR_SCHEME = {}));
-exports.TELE_BOX_STATE = void 0;
-(function(TELE_BOX_STATE2) {
+  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";
-})(exports.TELE_BOX_STATE || (exports.TELE_BOX_STATE = {}));
-exports.TELE_BOX_EVENT = void 0;
-(function(TELE_BOX_EVENT2) {
+  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";
@@ -1232,15 +1185,15 @@ exports.TELE_BOX_EVENT = void 0;
   TELE_BOX_EVENT2["Destroyed"] = "destroyed";
   TELE_BOX_EVENT2["BoxStatus"] = "box_status";
   TELE_BOX_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
-})(exports.TELE_BOX_EVENT || (exports.TELE_BOX_EVENT = {}));
-exports.TELE_BOX_DELEGATE_EVENT = void 0;
-(function(TELE_BOX_DELEGATE_EVENT2) {
+  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";
-})(exports.TELE_BOX_DELEGATE_EVENT || (exports.TELE_BOX_DELEGATE_EVENT = {}));
-exports.TELE_BOX_RESIZE_HANDLE = void 0;
-(function(TELE_BOX_RESIZE_HANDLE2) {
+  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";
@@ -1249,7 +1202,8 @@ exports.TELE_BOX_RESIZE_HANDLE = void 0;
   TELE_BOX_RESIZE_HANDLE2["NorthEast"] = "ne";
   TELE_BOX_RESIZE_HANDLE2["SouthEast"] = "se";
   TELE_BOX_RESIZE_HANDLE2["SouthWest"] = "sw";
-})(exports.TELE_BOX_RESIZE_HANDLE || (exports.TELE_BOX_RESIZE_HANDLE = {}));
+  return TELE_BOX_RESIZE_HANDLE2;
+})(TELE_BOX_RESIZE_HANDLE || {});
 const TeleBoxDragHandleType = "dh";
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -1284,7 +1238,7 @@ class DefaultTitleBar {
     onEvent,
     onDragStart,
     namespace = "telebox",
-    state = exports.TELE_BOX_STATE.Normal,
+    state = TELE_BOX_STATE.Normal,
     boxStatus
   } = {}) {
     this.$btns = [];
@@ -1310,7 +1264,7 @@ class DefaultTitleBar {
       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: exports.TELE_BOX_DELEGATE_EVENT.Maximize });
+            this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
           }
         }
       } else if (this.onDragStart) {
@@ -1342,7 +1296,7 @@ class DefaultTitleBar {
       if (now - this.lastTitleBarTouch.timestamp <= 500) {
         if (Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10) {
           if (this.onEvent) {
-            this.onEvent({ type: exports.TELE_BOX_DELEGATE_EVENT.Maximize });
+            this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
           }
         }
       } else if (this.onDragStart) {
@@ -1361,16 +1315,16 @@ class DefaultTitleBar {
     this.boxStatus = boxStatus;
     this.buttons = buttons || [
       {
-        type: exports.TELE_BOX_DELEGATE_EVENT.Minimize,
+        type: TELE_BOX_DELEGATE_EVENT.Minimize,
         iconClassName: this.wrapClassName("titlebar-icon-minimize")
       },
       {
-        type: exports.TELE_BOX_DELEGATE_EVENT.Maximize,
+        type: TELE_BOX_DELEGATE_EVENT.Maximize,
         iconClassName: this.wrapClassName("titlebar-icon-maximize"),
-        isActive: (state2) => state2 === exports.TELE_BOX_STATE.Maximized
+        isActive: (state2) => state2 === TELE_BOX_STATE.Maximized
       },
       {
-        type: exports.TELE_BOX_DELEGATE_EVENT.Close,
+        type: TELE_BOX_DELEGATE_EVENT.Close,
         iconClassName: this.wrapClassName("titlebar-icon-close")
       }
     ];
@@ -1388,7 +1342,10 @@ class DefaultTitleBar {
       this.state = state;
       this.buttons.forEach((btn, i2) => {
         if (btn.isActive) {
-          this.$btns[i2].classList.toggle("is-active", btn.isActive(state));
+          this.$btns[i2].classList.toggle(
+            "is-active",
+            btn.isActive(state)
+          );
         }
       });
     }
@@ -1399,7 +1356,10 @@ class DefaultTitleBar {
       if (boxStatus) {
         this.buttons.forEach((btn, i2) => {
           if (btn.isActive) {
-            this.$btns[i2].classList.toggle("is-active", btn.isActive(boxStatus));
+            this.$btns[i2].classList.toggle(
+              "is-active",
+              btn.isActive(boxStatus)
+            );
           }
         });
       }
@@ -1431,7 +1391,9 @@ class DefaultTitleBar {
       this.buttons.forEach(({ iconClassName, isActive }, i2) => {
         const teleTitleBarBtnIndex = String(i2);
         const $btn = document.createElement("button");
-        $btn.className = `${this.wrapClassName("titlebar-btn")} ${iconClassName}`;
+        $btn.className = `${this.wrapClassName(
+          "titlebar-btn"
+        )} ${iconClassName}`;
         $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
         $btn.dataset.teleTitleBarNoDblClick = "true";
         if (isActive) {
@@ -1440,24 +1402,30 @@ class DefaultTitleBar {
         this.$btns.push($btn);
         $buttonsContainer.appendChild($btn);
       });
-      this.sideEffect.addEventListener($buttonsContainer, "click", (ev) => {
-        var _a;
-        if (this.readonly) {
-          return;
-        }
-        const target = ev.target;
-        const teleTitleBarBtnIndex = Number((_a = target.dataset) == null ? void 0 : _a.teleTitleBarBtnIndex);
-        if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
-          preventEvent(ev);
-          const btn = this.buttons[teleTitleBarBtnIndex];
-          if (this.onEvent) {
-            this.onEvent({
-              type: btn.type,
-              value: btn.value
-            });
+      this.sideEffect.addEventListener(
+        $buttonsContainer,
+        "click",
+        (ev) => {
+          var _a;
+          if (this.readonly) {
+            return;
+          }
+          const target = ev.target;
+          const teleTitleBarBtnIndex = Number(
+            (_a = target.dataset) == null ? void 0 : _a.teleTitleBarBtnIndex
+          );
+          if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
+            preventEvent(ev);
+            const btn = this.buttons[teleTitleBarBtnIndex];
+            if (this.onEvent) {
+              this.onEvent({
+                type: btn.type,
+                value: btn.value
+              });
+            }
           }
         }
-      });
+      );
       this.$titleBar.appendChild($titleArea);
       this.$titleBar.appendChild($buttonsContainer);
     }
@@ -1467,8 +1435,17 @@ class DefaultTitleBar {
     const $dragArea = document.createElement("div");
     $dragArea.className = this.wrapClassName("drag-area");
     $dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
-    this.sideEffect.addEventListener($dragArea, "mousedown", this.handleTitleBarClick);
-    this.sideEffect.addEventListener($dragArea, "touchstart", this.handleTitleBarTouch, { passive: true });
+    this.sideEffect.addEventListener(
+      $dragArea,
+      "mousedown",
+      this.handleTitleBarClick
+    );
+    this.sideEffect.addEventListener(
+      $dragArea,
+      "touchstart",
+      this.handleTitleBarTouch,
+      { passive: true }
+    );
     return $dragArea;
   }
   dragHandle() {
@@ -1492,7 +1469,7 @@ class TeleBox {
   constructor({
     id = genUniqueKey(),
     title = getBoxDefaultName(),
-    prefersColorScheme = exports.TELE_BOX_COLOR_SCHEME.Light,
+    prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
     darkMode,
     visible = true,
     width = 0.5,
@@ -1539,38 +1516,53 @@ class TeleBox {
     this._delegateEvents = new EventEmitter();
     const boxStatus$ = createVal(boxStatus);
     const lastNotMinimizedBoxStatus$ = createVal(lastNotMinimizedBoxStatus);
-    const prefersColorScheme$ = createVal(prefersColorScheme);
+    const prefersColorScheme$ = createVal(
+      prefersColorScheme
+    );
     prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.PrefersColorScheme, prefersColorScheme2);
+        this.events.emit(
+          TELE_BOX_EVENT.PrefersColorScheme,
+          prefersColorScheme2
+        );
       }
     });
     const darkMode$ = createVal(Boolean(darkMode));
     if (darkMode == null) {
-      prefersColorScheme$.subscribe((prefersColorScheme2, _, skipUpdate) => {
-        this._sideEffect.add(() => {
-          if (prefersColorScheme2 === "auto") {
-            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-            if (prefersDark) {
-              darkMode$.setValue(prefersDark.matches, skipUpdate);
-              const handler = (evt) => {
-                darkMode$.setValue(evt.matches, skipUpdate);
-              };
-              prefersDark.addListener(handler);
-              return () => prefersDark.removeListener(handler);
+      prefersColorScheme$.subscribe(
+        (prefersColorScheme2, _, skipUpdate) => {
+          this._sideEffect.add(() => {
+            if (prefersColorScheme2 === "auto") {
+              const prefersDark = window.matchMedia(
+                "(prefers-color-scheme: dark)"
+              );
+              if (prefersDark) {
+                darkMode$.setValue(
+                  prefersDark.matches,
+                  skipUpdate
+                );
+                const handler = (evt) => {
+                  darkMode$.setValue(evt.matches, skipUpdate);
+                };
+                prefersDark.addListener(handler);
+                return () => prefersDark.removeListener(handler);
+              } else {
+                return noop;
+              }
             } else {
+              darkMode$.setValue(
+                prefersColorScheme2 === "dark",
+                skipUpdate
+              );
               return noop;
             }
-          } else {
-            darkMode$.setValue(prefersColorScheme2 === "dark", skipUpdate);
-            return noop;
-          }
-        }, "prefers-color-scheme");
-      });
+          }, "prefers-color-scheme");
+        }
+      );
     }
     darkMode$.reaction((darkMode2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.DarkMode, darkMode2);
+        this.events.emit(TELE_BOX_EVENT.DarkMode, darkMode2);
       }
     });
     const containerRect$ = createVal(containerRect, shallowequal);
@@ -1584,13 +1576,13 @@ class TeleBox {
     const visible$ = createVal(visible);
     visible$.reaction((visible2, _, skipUpdate) => {
       if (!skipUpdate && !visible2) {
-        this.events.emit(exports.TELE_BOX_EVENT.Close);
+        this.events.emit(TELE_BOX_EVENT.Close);
       }
     });
     const readonly$ = createVal(readonly);
     readonly$.reaction((readonly2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.Readonly, readonly2);
+        this.events.emit(TELE_BOX_EVENT.Readonly, readonly2);
       }
     });
     const resizable$ = createVal(resizable);
@@ -1600,122 +1592,151 @@ class TeleBox {
     const zIndex$ = createVal(zIndex);
     zIndex$.reaction((zIndex2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.ZIndex, zIndex2);
+        this.events.emit(TELE_BOX_EVENT.ZIndex, zIndex2);
       }
     });
     const focus$ = createVal(focus);
     focus$.reaction((focus2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(focus2 ? exports.TELE_BOX_EVENT.Focus : exports.TELE_BOX_EVENT.Blur);
+        this.events.emit(
+          focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur
+        );
       }
     });
     const minimized$ = createVal(minimized);
     minimized$.reaction((minimized2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.Minimized, minimized2);
+        this.events.emit(TELE_BOX_EVENT.Minimized, minimized2);
       }
     });
     const maximized$ = createVal(maximized);
     maximized$.reaction((maximized2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.Maximized, maximized2);
+        this.events.emit(TELE_BOX_EVENT.Maximized, maximized2);
       }
     });
-    const state$ = combine([minimized$, maximized$, boxStatus$], ([minimized2, maximized2, boxStatus2]) => minimized2 ? exports.TELE_BOX_STATE.Minimized : maximized2 ? exports.TELE_BOX_STATE.Maximized : !boxStatus2 ? exports.TELE_BOX_STATE.Normal : boxStatus2);
+    const state$ = combine(
+      [minimized$, maximized$, boxStatus$],
+      ([minimized2, maximized2, boxStatus2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : !boxStatus2 ? TELE_BOX_STATE.Normal : boxStatus2
+    );
     state$.reaction((state, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.State, state);
+        this.events.emit(TELE_BOX_EVENT.State, state);
       }
     });
-    const minSize$ = createVal({
-      width: clamp(minWidth, 0, 1),
-      height: clamp(minHeight, 0, 1)
-    }, shallowequal);
-    const intrinsicSize$ = createVal({
-      width: clamp(width, minSize$.value.width, 1),
-      height: clamp(height, minSize$.value.height, 1)
-    }, shallowequal);
+    const minSize$ = createVal(
+      {
+        width: clamp(minWidth, 0, 1),
+        height: clamp(minHeight, 0, 1)
+      },
+      shallowequal
+    );
+    const intrinsicSize$ = createVal(
+      {
+        width: clamp(width, minSize$.value.width, 1),
+        height: clamp(height, minSize$.value.height, 1)
+      },
+      shallowequal
+    );
     minSize$.reaction((minSize, _, skipUpdate) => {
-      intrinsicSize$.setValue({
-        width: clamp(width, minSize.width, 1),
-        height: clamp(height, minSize.height, 1)
-      }, skipUpdate);
+      intrinsicSize$.setValue(
+        {
+          width: clamp(width, minSize.width, 1),
+          height: clamp(height, minSize.height, 1)
+        },
+        skipUpdate
+      );
     });
     intrinsicSize$.reaction((size, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.IntrinsicResize, size);
+        this.events.emit(TELE_BOX_EVENT.IntrinsicResize, size);
       }
     });
-    const size$ = combine([intrinsicSize$, maximized$, boxStatus$], ([intrinsicSize, maximized2, boxStatus2]) => {
-      if (maximized2 || boxStatus2 === exports.TELE_BOX_STATE.Maximized) {
-        return { width: 1, height: 1 };
-      }
-      return intrinsicSize;
-    }, shallowequal);
+    const size$ = combine(
+      [intrinsicSize$, maximized$, boxStatus$],
+      ([intrinsicSize, maximized2, boxStatus2]) => {
+        if (maximized2 || boxStatus2 === TELE_BOX_STATE.Maximized) {
+          return { width: 1, height: 1 };
+        }
+        return intrinsicSize;
+      },
+      shallowequal
+    );
     size$.reaction((size, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.Resize, size);
+        this.events.emit(TELE_BOX_EVENT.Resize, size);
       }
     });
-    const visualSize$ = combine([size$, minimized$, containerRect$, collectorRect$, boxStatus$], ([size, minimized2, containerRect2, collectorRect2, boxStatus2]) => {
-      if ((minimized2 || boxStatus2 === exports.TELE_BOX_STATE.Minimized) && collectorRect2) {
-        return {
-          width: collectorRect2.width / size.width / containerRect2.width,
-          height: collectorRect2.height / size.height / containerRect2.height
-        };
-      }
-      return size;
-    }, shallowequal);
+    const visualSize$ = combine(
+      [size$, minimized$, containerRect$, collectorRect$, boxStatus$],
+      ([size, minimized2, containerRect2, collectorRect2, boxStatus2]) => {
+        if ((minimized2 || boxStatus2 === TELE_BOX_STATE.Minimized) && collectorRect2) {
+          return {
+            width: collectorRect2.width / size.width / containerRect2.width,
+            height: collectorRect2.height / size.height / containerRect2.height
+          };
+        }
+        return size;
+      },
+      shallowequal
+    );
     visualSize$.reaction((size, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.VisualResize, size);
+        this.events.emit(TELE_BOX_EVENT.VisualResize, size);
       }
     });
-    const intrinsicCoord$ = createVal({ x: clamp(x, 0, 1), y: clamp(y, 0, 1) }, shallowequal);
+    const intrinsicCoord$ = createVal(
+      { x: clamp(x, 0, 1), y: clamp(y, 0, 1) },
+      shallowequal
+    );
     intrinsicCoord$.reaction((coord, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.IntrinsicMove, coord);
-      }
-    });
-    const coord$ = combine([
-      intrinsicCoord$,
-      intrinsicSize$,
-      containerRect$,
-      collectorRect$,
-      minimized$,
-      maximized$,
-      boxStatus$,
-      lastNotMinimizedBoxStatus$
-    ], ([
-      intrinsicCoord,
-      intrinsicSize,
-      containerRect2,
-      collectorRect2,
-      minimized2,
-      maximized2,
-      boxStatus2,
-      lastNotMinimizedBoxStatus2
-    ]) => {
-      if ((minimized2 || boxStatus2 === exports.TELE_BOX_STATE.Minimized) && collectorRect2) {
-        if (maximized2 || lastNotMinimizedBoxStatus2 === exports.TELE_BOX_STATE.Maximized) {
+        this.events.emit(TELE_BOX_EVENT.IntrinsicMove, coord);
+      }
+    });
+    const coord$ = combine(
+      [
+        intrinsicCoord$,
+        intrinsicSize$,
+        containerRect$,
+        collectorRect$,
+        minimized$,
+        maximized$,
+        boxStatus$,
+        lastNotMinimizedBoxStatus$
+      ],
+      ([
+        intrinsicCoord,
+        intrinsicSize,
+        containerRect2,
+        collectorRect2,
+        minimized2,
+        maximized2,
+        boxStatus2,
+        lastNotMinimizedBoxStatus2
+      ]) => {
+        if ((minimized2 || boxStatus2 === TELE_BOX_STATE.Minimized) && collectorRect2) {
+          if (maximized2 || lastNotMinimizedBoxStatus2 === TELE_BOX_STATE.Maximized) {
+            return {
+              x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - 1 / 2,
+              y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - 1 / 2
+            };
+          }
           return {
-            x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - 1 / 2,
-            y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - 1 / 2
+            x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - intrinsicSize.width / 2,
+            y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - intrinsicSize.height / 2
           };
         }
-        return {
-          x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - intrinsicSize.width / 2,
-          y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - intrinsicSize.height / 2
-        };
-      }
-      if (maximized2 || boxStatus2 === exports.TELE_BOX_STATE.Maximized) {
-        return { x: 0, y: 0 };
-      }
-      return intrinsicCoord;
-    }, shallowequal);
+        if (maximized2 || boxStatus2 === TELE_BOX_STATE.Maximized) {
+          return { x: 0, y: 0 };
+        }
+        return intrinsicCoord;
+      },
+      shallowequal
+    );
     coord$.reaction((coord, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_EVENT.Move, coord);
+        this.events.emit(TELE_BOX_EVENT.Move, coord);
       }
     });
     this.titleBar = titleBar || new DefaultTitleBar({
@@ -1732,24 +1753,27 @@ class TeleBox {
           this._delegateEvents.emit(event.type);
         } else {
           switch (event.type) {
-            case exports.TELE_BOX_DELEGATE_EVENT.Maximize: {
+            case TELE_BOX_DELEGATE_EVENT.Maximize: {
               if (!boxStatus$.value) {
                 maximized$.setValue(!maximized$.value);
               }
               break;
             }
-            case exports.TELE_BOX_DELEGATE_EVENT.Minimize: {
+            case TELE_BOX_DELEGATE_EVENT.Minimize: {
               if (!boxStatus$.value) {
                 minimized$.setValue(true);
               }
               break;
             }
-            case exports.TELE_BOX_DELEGATE_EVENT.Close: {
+            case TELE_BOX_DELEGATE_EVENT.Close: {
               visible$.setValue(false);
               break;
             }
             default: {
-              console.error("Unsupported titleBar event:", event);
+              console.error(
+                "Unsupported titleBar event:",
+                event
+              );
               break;
             }
           }
@@ -1796,7 +1820,13 @@ class TeleBox {
     this._boxStatus$ = boxStatus$;
     this._lastNotMinimizedBoxStatus$ = lastNotMinimizedBoxStatus$;
     if (this.fixRatio) {
-      this.transform(coord$.value.x, coord$.value.y, size$.value.width, size$.value.height, true);
+      this.transform(
+        coord$.value.x,
+        coord$.value.y,
+        size$.value.width,
+        size$.value.height,
+        true
+      );
     }
     this.$box = this.render();
   }
@@ -1817,12 +1847,12 @@ class TeleBox {
   }
   setState(state, skipUpdate = false) {
     switch (state) {
-      case exports.TELE_BOX_STATE.Maximized: {
+      case TELE_BOX_STATE.Maximized: {
         this.setMinimized(false, skipUpdate);
         this.setMaximized(true, skipUpdate);
         break;
       }
-      case exports.TELE_BOX_STATE.Minimized: {
+      case TELE_BOX_STATE.Minimized: {
         this.setMinimized(true, skipUpdate);
         this.setMaximized(false, skipUpdate);
         break;
@@ -1836,8 +1866,8 @@ class TeleBox {
     return this;
   }
   setBoxStatus(boxStatus, skipUpdate = false) {
-    if (boxStatus === exports.TELE_BOX_STATE.Minimized) {
-      if (this._boxStatus$.value && this._boxStatus$.value !== exports.TELE_BOX_STATE.Minimized) {
+    if (boxStatus === TELE_BOX_STATE.Minimized) {
+      if (this._boxStatus$.value && this._boxStatus$.value !== TELE_BOX_STATE.Minimized) {
         this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
       }
     } else {
@@ -1845,14 +1875,14 @@ class TeleBox {
     }
     this._boxStatus$.setValue(boxStatus, skipUpdate);
     if (!skipUpdate) {
-      this.events.emit(exports.TELE_BOX_EVENT.BoxStatus, { id: this.id, boxStatus });
+      this.events.emit(TELE_BOX_EVENT.BoxStatus, { id: this.id, boxStatus });
     }
     return this;
   }
   setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate = false) {
     this._lastNotMinimizedBoxStatus$.setValue(lastNotMinimizedBoxStatus, skipUpdate);
     if (!skipUpdate) {
-      this.events.emit(exports.TELE_BOX_EVENT.LastNotMinimizedBoxStatus, { id: this.id, lastNotMinimizedBoxStatus });
+      this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, { id: this.id, lastNotMinimizedBoxStatus });
     }
     return this;
   }
@@ -1863,11 +1893,17 @@ class TeleBox {
     return this._minSize$.value.height;
   }
   setMinWidth(minWidth, skipUpdate = false) {
-    this._minSize$.setValue({ width: minWidth, height: this.minHeight }, skipUpdate);
+    this._minSize$.setValue(
+      { width: minWidth, height: this.minHeight },
+      skipUpdate
+    );
     return this;
   }
   setMinHeight(minHeight, skipUpdate = false) {
-    this._minSize$.setValue({ width: this.minWidth, height: minHeight }, skipUpdate);
+    this._minSize$.setValue(
+      { width: this.minWidth, height: minHeight },
+      skipUpdate
+    );
     return this;
   }
   get intrinsicWidth() {
@@ -1928,14 +1964,20 @@ class TeleBox {
         height = this.intrinsicHeight;
       }
     }
-    this._intrinsicCoord$.setValue({
-      x: width >= this.minWidth ? x : this.intrinsicX,
-      y: height >= this.minHeight ? y : this.intrinsicY
-    }, skipUpdate);
-    this._intrinsicSize$.setValue({
-      width: clamp(width, this.minWidth, 1),
-      height: clamp(height, this.minHeight, 1)
-    }, skipUpdate);
+    this._intrinsicCoord$.setValue(
+      {
+        x: width >= this.minWidth ? x : this.intrinsicX,
+        y: height >= this.minHeight ? y : this.intrinsicY
+      },
+      skipUpdate
+    );
+    this._intrinsicSize$.setValue(
+      {
+        width: clamp(width, this.minWidth, 1),
+        height: clamp(height, this.minHeight, 1)
+      },
+      skipUpdate
+    );
     return this;
   }
   mount(container) {
@@ -2011,33 +2053,52 @@ class TeleBox {
     bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
     bindClassName(this.$box, this._focus$, "blur", isFalsy);
     bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
-    bindClassName(this.$box, this._darkMode$, "color-scheme-light", isFalsy);
+    bindClassName(
+      this.$box,
+      this._darkMode$,
+      "color-scheme-light",
+      isFalsy
+    );
     this._renderSideEffect.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 === exports.TELE_BOX_STATE.Minimized);
-        if (state === exports.TELE_BOX_STATE.Maximized) {
+        this.$box.classList.toggle(
+          minimizedClassName,
+          state === TELE_BOX_STATE.Minimized
+        );
+        if (state === TELE_BOX_STATE.Maximized) {
           this._renderSideEffect.flush(MAXIMIZED_TIMER_ID);
           this.$box.classList.toggle(maximizedClassName, true);
         } else {
-          this._renderSideEffect.setTimeout(() => {
-            this.$box.classList.toggle(maximizedClassName, false);
-          }, 0, MAXIMIZED_TIMER_ID);
+          this._renderSideEffect.setTimeout(
+            () => {
+              this.$box.classList.toggle(
+                maximizedClassName,
+                false
+              );
+            },
+            0,
+            MAXIMIZED_TIMER_ID
+          );
         }
       });
     });
-    this._renderSideEffect.add(() => this._visible$.subscribe((visible) => {
-      if (visible) {
-        this.$box.style.removeProperty("display");
-      } else {
-        this.$box.style.display = "none";
-      }
-    }));
-    this._renderSideEffect.add(() => this._zIndex$.subscribe((zIndex) => {
-      this.$box.style.zIndex = String(zIndex);
-    }));
+    this._renderSideEffect.add(
+      () => this._visible$.subscribe((visible) => {
+        if (visible) {
+          this.$box.style.removeProperty("display");
+        } else {
+          this.$box.style.display = "none";
+        }
+      })
+    );
+    this._renderSideEffect.add(
+      () => this._zIndex$.subscribe((zIndex) => {
+        this.$box.style.zIndex = String(zIndex);
+      })
+    );
     const boxStyler = index(this.$box);
     this.$box.dataset.teleBoxID = this.id;
     this.$box.style.width = this.absoluteWidth + "px";
@@ -2045,25 +2106,29 @@ class TeleBox {
     const translateX = this.x * this.containerRect.width + this.containerRect.x;
     const translateY = this.y * this.containerRect.height + this.containerRect.y;
     this.$box.style.transform = `translate(${translateX - 10}px,${translateY - 10}px)`;
-    this._valSideEffectBinder.combine([
-      this._coord$,
-      this._size$,
-      this._minimized$,
-      this._containerRect$,
-      this._collectorRect$,
-      this._boxStatus$
-    ], ([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
-      const absoluteWidth = size.width * containerRect.width;
-      const absoluteHeight = size.height * containerRect.height;
-      return {
-        width: absoluteWidth + ((minimized || boxStatus === exports.TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
-        height: absoluteHeight + ((minimized || boxStatus === exports.TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
-        x: coord.x * containerRect.width,
-        y: coord.y * containerRect.height,
-        scaleX: (minimized || boxStatus === exports.TELE_BOX_STATE.Minimized) && collectorRect ? collectorRect.width / absoluteWidth : 1,
-        scaleY: (minimized || boxStatus === exports.TELE_BOX_STATE.Minimized) && collectorRect ? collectorRect.height / absoluteHeight : 1
-      };
-    }, shallowequal).subscribe((styles) => {
+    this._valSideEffectBinder.combine(
+      [
+        this._coord$,
+        this._size$,
+        this._minimized$,
+        this._containerRect$,
+        this._collectorRect$,
+        this._boxStatus$
+      ],
+      ([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
+        const absoluteWidth = size.width * containerRect.width;
+        const absoluteHeight = size.height * containerRect.height;
+        return {
+          width: absoluteWidth + ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
+          height: absoluteHeight + ((minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? 1 : 0),
+          x: coord.x * containerRect.width,
+          y: coord.y * containerRect.height,
+          scaleX: (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? collectorRect.width / absoluteWidth : 1,
+          scaleY: (minimized || boxStatus === TELE_BOX_STATE.Minimized) && collectorRect ? collectorRect.height / absoluteHeight : 1
+        };
+      },
+      shallowequal
+    ).subscribe((styles) => {
       boxStyler.set(styles);
     });
     boxStyler.set({ x: translateX, y: translateY });
@@ -2128,7 +2193,7 @@ class TeleBox {
   _renderResizeHandlers() {
     const $resizeHandles = document.createElement("div");
     $resizeHandles.className = this.wrapClassName("resize-handles");
-    Object.values(exports.TELE_BOX_RESIZE_HANDLE).forEach((handleType) => {
+    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;
@@ -2146,7 +2211,7 @@ class TeleBox {
     let trackStartPageY = 0;
     let trackingHandle;
     const handleTracking = (ev) => {
-      if (this.state !== exports.TELE_BOX_STATE.Normal) {
+      if (this.state !== TELE_BOX_STATE.Normal) {
         return;
       }
       preventEvent(ev);
@@ -2157,45 +2222,95 @@ class TeleBox {
       const offsetX = (pageX - trackStartPageX) / this.containerRect.width;
       const offsetY = (pageY - trackStartPageY) / this.containerRect.height;
       switch (trackingHandle) {
-        case exports.TELE_BOX_RESIZE_HANDLE.North: {
-          this.transform(this.x, trackStartY + offsetY, this.width, trackStartHeight - offsetY);
+        case TELE_BOX_RESIZE_HANDLE.North: {
+          this.transform(
+            this.x,
+            trackStartY + offsetY,
+            this.width,
+            trackStartHeight - offsetY
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.South: {
-          this.transform(this.x, this.y, this.width, trackStartHeight + offsetY);
+        case TELE_BOX_RESIZE_HANDLE.South: {
+          this.transform(
+            this.x,
+            this.y,
+            this.width,
+            trackStartHeight + offsetY
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.West: {
-          this.transform(trackStartX + offsetX, this.y, trackStartWidth - offsetX, this.height);
+        case TELE_BOX_RESIZE_HANDLE.West: {
+          this.transform(
+            trackStartX + offsetX,
+            this.y,
+            trackStartWidth - offsetX,
+            this.height
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.East: {
-          this.transform(this.x, this.y, trackStartWidth + offsetX, this.height);
+        case TELE_BOX_RESIZE_HANDLE.East: {
+          this.transform(
+            this.x,
+            this.y,
+            trackStartWidth + offsetX,
+            this.height
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.NorthWest: {
-          this.transform(trackStartX + offsetX, trackStartY + offsetY, trackStartWidth - offsetX, trackStartHeight - offsetY);
+        case TELE_BOX_RESIZE_HANDLE.NorthWest: {
+          this.transform(
+            trackStartX + offsetX,
+            trackStartY + offsetY,
+            trackStartWidth - offsetX,
+            trackStartHeight - offsetY
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.NorthEast: {
-          this.transform(this.x, trackStartY + offsetY, trackStartWidth + offsetX, trackStartHeight - offsetY);
+        case TELE_BOX_RESIZE_HANDLE.NorthEast: {
+          this.transform(
+            this.x,
+            trackStartY + offsetY,
+            trackStartWidth + offsetX,
+            trackStartHeight - offsetY
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.SouthEast: {
-          this.transform(this.x, this.y, trackStartWidth + offsetX, trackStartHeight + offsetY);
+        case TELE_BOX_RESIZE_HANDLE.SouthEast: {
+          this.transform(
+            this.x,
+            this.y,
+            trackStartWidth + offsetX,
+            trackStartHeight + offsetY
+          );
           break;
         }
-        case exports.TELE_BOX_RESIZE_HANDLE.SouthWest: {
-          this.transform(trackStartX + offsetX, this.y, trackStartWidth - offsetX, trackStartHeight + offsetY);
+        case TELE_BOX_RESIZE_HANDLE.SouthWest: {
+          this.transform(
+            trackStartX + offsetX,
+            this.y,
+            trackStartWidth - offsetX,
+            trackStartHeight + offsetY
+          );
           break;
         }
         default: {
           if (this.fence) {
-            this.move(clamp(trackStartX + offsetX, 0, 1 - this.width), clamp(trackStartY + offsetY, 0, 1 - this.height));
+            this.move(
+              clamp(trackStartX + offsetX, 0, 1 - this.width),
+              clamp(trackStartY + offsetY, 0, 1 - this.height)
+            );
           } else {
             const xOverflowOffset = 20 / this.containerRect.width;
             const yOverflowOffset = 20 / this.containerRect.height;
-            this.move(clamp(trackStartX + offsetX, xOverflowOffset - this.width, 1 - xOverflowOffset), clamp(trackStartY + offsetY, 0, 1 - yOverflowOffset));
+            this.move(
+              clamp(
+                trackStartX + offsetX,
+                xOverflowOffset - this.width,
+                1 - xOverflowOffset
+              ),
+              clamp(trackStartY + offsetY, 0, 1 - yOverflowOffset)
+            );
           }
           break;
         }
@@ -2219,7 +2334,7 @@ class TeleBox {
       if (ev.button != null && ev.button !== 0) {
         return;
       }
-      if (!this.draggable || trackingHandle || this.state !== exports.TELE_BOX_STATE.Normal) {
+      if (!this.draggable || trackingHandle || this.state !== TELE_BOX_STATE.Normal) {
         return;
       }
       const target = ev.target;
@@ -2235,7 +2350,9 @@ class TeleBox {
           $trackMask = document.createElement("div");
         }
         const cursor = trackingHandle ? this.wrapClassName(`cursor-${trackingHandle}`) : "";
-        $trackMask.className = this.wrapClassName(`track-mask${cursor ? ` ${cursor}` : ""}`);
+        $trackMask.className = this.wrapClassName(
+          `track-mask${cursor ? ` ${cursor}` : ""}`
+        );
         this.$box.appendChild($trackMask);
         this.$box.classList.add(transformingClassName);
         this._sideEffect.add(() => {
@@ -2255,18 +2372,33 @@ class TeleBox {
             window.removeEventListener("touchmove", handleTracking);
             window.removeEventListener("mouseup", handleTrackEnd);
             window.removeEventListener("touchend", handleTrackEnd);
-            window.removeEventListener("touchcancel", handleTrackEnd);
+            window.removeEventListener(
+              "touchcancel",
+              handleTrackEnd
+            );
           };
         }, TRACKING_DISPOSER_ID);
       }
     };
     this._handleTrackStart = handleTrackStart;
-    this._sideEffect.addEventListener($resizeHandles, "mousedown", handleTrackStart, {}, "box-resizeHandles-mousedown");
-    this._sideEffect.addEventListener($resizeHandles, "touchstart", handleTrackStart, { passive: false }, "box-resizeHandles-touchstart");
+    this._sideEffect.addEventListener(
+      $resizeHandles,
+      "mousedown",
+      handleTrackStart,
+      {},
+      "box-resizeHandles-mousedown"
+    );
+    this._sideEffect.addEventListener(
+      $resizeHandles,
+      "touchstart",
+      handleTrackStart,
+      { passive: false },
+      "box-resizeHandles-touchstart"
+    );
   }
   destroy() {
     this.$box.remove();
-    this.events.emit(exports.TELE_BOX_EVENT.Destroyed);
+    this.events.emit(TELE_BOX_EVENT.Destroyed);
     this._sideEffect.flushAll();
     this._renderSideEffect.flushAll();
     this.events.removeAllListeners();
@@ -2279,7 +2411,7 @@ class TeleBox {
 function noop() {
   return;
 }
-var style$1 = ".telebox-collector {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  visibility: hidden;\n  display: block;\n  position: absolute;\n  z-index: 200;\n  width: 40px;\n  height: 40px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  font-size: 0;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);\n  cursor: pointer;\n  user-select: none;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-size: 18px 16px;\n  background-position: center;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.telebox-collector-visible {\n  visibility: visible;\n  pointer-events: initial;\n}\n\n.telebox-collector-readonly {\n  cursor: not-allowed;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark.telebox-collector {\n  background-color: #43434d;\n}";
+var style$2 = "";
 var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
 class TeleBoxCollector {
   constructor({
@@ -2288,8 +2420,10 @@ class TeleBoxCollector {
     darkMode = false,
     namespace = "telebox",
     styles = {},
-    onClick
-  } = {}) {
+    onClick,
+    getBoxesStatus
+  }) {
+    this.$appMenuContainer = document.createElement("div");
     this.handleCollectorClick = () => {
       if (!this._readonly && this.onClick) {
         this.onClick();
@@ -2301,6 +2435,11 @@ class TeleBoxCollector {
     this.namespace = namespace;
     this.styles = styles;
     this.onClick = onClick;
+    this.getBoxesStatus = getBoxesStatus;
+  }
+  get boxesStatus() {
+    var _a;
+    return (_a = this.getBoxesStatus) == null ? void 0 : _a.call(this);
   }
   get visible() {
     return this._visible;
@@ -2321,11 +2460,29 @@ class TeleBoxCollector {
     }
     return this;
   }
+  hasMinimizedBox() {
+    const boxesStatus = this.boxesStatus;
+    if (boxesStatus) {
+      for (const status of boxesStatus.values()) {
+        if (status === TELE_BOX_STATE.Minimized) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  updateBoxesStatus() {
+    const hasMinimizedBox = this.hasMinimizedBox();
+    this.setVisible(hasMinimizedBox);
+  }
   setVisible(visible) {
     if (this._visible !== visible) {
       this._visible = visible;
       if (this.$collector) {
-        this.$collector.classList.toggle(this.wrapClassName("collector-visible"), visible);
+        this.$collector.classList.toggle(
+          this.wrapClassName("collector-visible"),
+          visible
+        );
       }
     }
     return this;
@@ -2334,7 +2491,10 @@ class TeleBoxCollector {
     if (this._readonly !== readonly) {
       this._readonly = readonly;
       if (this.$collector) {
-        this.$collector.classList.toggle(this.wrapClassName("collector-readonly"), readonly);
+        this.$collector.classList.toggle(
+          this.wrapClassName("collector-readonly"),
+          readonly
+        );
       }
     }
     return this;
@@ -2343,8 +2503,14 @@ class TeleBoxCollector {
     if (this._darkMode !== darkMode) {
       this._darkMode = darkMode;
       if (this.$collector) {
-        this.$collector.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
-        this.$collector.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+        this.$collector.classList.toggle(
+          this.wrapClassName("color-scheme-dark"),
+          darkMode
+        );
+        this.$collector.classList.toggle(
+          this.wrapClassName("color-scheme-light"),
+          !darkMode
+        );
       }
     }
     return this;
@@ -2367,21 +2533,37 @@ class TeleBoxCollector {
       this.$collector = document.createElement("button");
       this.$collector.className = this.wrapClassName("collector");
       this.$collector.style.backgroundImage = `url('${collectorSVG}')`;
-      this.$collector.addEventListener("click", this.handleCollectorClick);
+      this.$collector.addEventListener(
+        "click",
+        this.handleCollectorClick
+      );
       if (this._visible) {
-        this.$collector.classList.add(this.wrapClassName("collector-visible"));
+        this.$collector.classList.add(
+          this.wrapClassName("collector-visible")
+        );
       }
       if (this._readonly) {
-        this.$collector.classList.add(this.wrapClassName("collector-readonly"));
-      }
-      this.$collector.classList.add(this.wrapClassName(this._darkMode ? "color-scheme-dark" : "color-scheme-light"));
+        this.$collector.classList.add(
+          this.wrapClassName("collector-readonly")
+        );
+      }
+      this.$collector.classList.add(
+        this.wrapClassName(
+          this._darkMode ? "color-scheme-dark" : "color-scheme-light"
+        )
+      );
+      this.$appMenuContainer.classList.add(this.wrapClassName("collector-shadow"));
+      this.$collector.append(this.$appMenuContainer);
       this.setStyles(this.styles);
     }
     return this.$collector;
   }
   destroy() {
     if (this.$collector) {
-      this.$collector.removeEventListener("click", this.handleCollectorClick);
+      this.$collector.removeEventListener(
+        "click",
+        this.handleCollectorClick
+      );
       this.$collector.remove();
       this.$collector = void 0;
     }
@@ -2391,8 +2573,7 @@ class TeleBoxCollector {
     return `${this.namespace}-${className}`;
   }
 }
-exports.TELE_BOX_MANAGER_EVENT = void 0;
-(function(TELE_BOX_MANAGER_EVENT2) {
+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";
@@ -2410,8 +2591,9 @@ exports.TELE_BOX_MANAGER_EVENT = void 0;
   TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
   TELE_BOX_MANAGER_EVENT2["BoxStatus"] = "box_status";
   TELE_BOX_MANAGER_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
-})(exports.TELE_BOX_MANAGER_EVENT || (exports.TELE_BOX_MANAGER_EVENT = {}));
-var style = ".telebox-max-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 50000;\n}\n.telebox-max-titlebar .telebox-title {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n  display: block;\n}\n.telebox-max-titlebar-maximized {\n  display: flex;\n}\n.telebox-titles {\n  height: 100%;\n  margin: 0;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  overflow-x: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.telebox-titles::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.telebox-titles::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.telebox-titles::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.telebox-titles:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n}\n.telebox-titles::-webkit-scrollbar-thumb:hover {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:active {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.telebox-titles::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-titles-content {\n  height: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: 0;\n}\n.telebox-titles-tab {\n  height: 100%;\n  overflow: hidden;\n  max-width: 182px;\n  min-width: 50px;\n  padding: 0 26px 0 16px;\n  outline: none;\n  font-size: 13px;\n  font-family: PingFangSC-Regular, PingFang SC;\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-break: keep-all;\n  border: none;\n  border-right: 1px solid #e5e5f0;\n  color: #7b88a0;\n  background: transparent;\n  cursor: pointer;\n  user-select: none;\n}\n.telebox-titles-tab-focus {\n  color: #357bf6;\n}\n.telebox-readonly .telebox-titles-tab {\n  cursor: not-allowed;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark.telebox-titlebar {\n  color: #e9e9e9;\n  background: #43434d;\n  border-bottom: none;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n  border-right-color: #7b88a0;\n}\n.telebox-color-scheme-dark .telebox-title {\n  color: #e9e9e9;\n}";
+  return TELE_BOX_MANAGER_EVENT2;
+})(TELE_BOX_MANAGER_EVENT || {});
+var style$1 = "";
 class MaxTitleBar extends DefaultTitleBar {
   constructor(config) {
     super(config);
@@ -2419,20 +2601,30 @@ class MaxTitleBar extends DefaultTitleBar {
     this.focusedBox = config.focusedBox;
     this.containerRect = config.containerRect;
     this.darkMode = config.darkMode;
-    this.boxesStatus = config.boxesStatus;
+    this.getBoxesStatus = config.getBoxesStatus;
+  }
+  get boxesStatus() {
+    var _a;
+    return (_a = this.getBoxesStatus) == null ? void 0 : _a.call(this);
   }
   hasMaximizedBoxInStatus() {
-    if (!this.boxesStatus || this.boxesStatus.size === 0) {
-      return false;
+    if (this.getBoxesStatus) {
+      const boxesStatus = this.getBoxesStatus();
+      if (boxesStatus.size) {
+        const hasMaximizedBox = [...boxesStatus.values()].find((state) => state === TELE_BOX_STATE.Maximized);
+        return !!hasMaximizedBox;
+      }
     }
-    const hasMaximizedBox = [...this.boxesStatus.values()].find((state) => state === exports.TELE_BOX_STATE.Maximized);
-    return !!hasMaximizedBox;
+    return false;
   }
   get MaximizedBoxes() {
-    if (!this.boxesStatus || this.boxesStatus.size === 0) {
-      return [];
+    if (this.getBoxesStatus) {
+      const boxesStatus = this.getBoxesStatus();
+      if (boxesStatus) {
+        return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+      }
     }
-    return this.boxes.filter((box) => this.boxesStatus && this.boxesStatus.get(box.id) === exports.TELE_BOX_STATE.Maximized);
+    return [];
   }
   focusBox(box) {
     var _a, _b;
@@ -2441,15 +2633,21 @@ class MaxTitleBar extends DefaultTitleBar {
     }
     if (this.$titles) {
       const { children } = this.$titles.firstElementChild;
-      if (this.state === exports.TELE_BOX_STATE.Maximized && !this.hasMaximizedBoxInStatus()) {
+      if (this.state === TELE_BOX_STATE.Maximized && !this.hasMaximizedBoxInStatus()) {
         for (let i2 = children.length - 1; i2 >= 0; i2 -= 1) {
           const $tab = children[i2];
           const id = (_a = $tab.dataset) == null ? void 0 : _a.teleBoxID;
           if (id) {
             if (box && id === box.id) {
-              $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), true);
+              $tab.classList.toggle(
+                this.wrapClassName("titles-tab-focus"),
+                true
+              );
             } else if (this.focusedBox && id === this.focusedBox.id) {
-              $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+              $tab.classList.toggle(
+                this.wrapClassName("titles-tab-focus"),
+                false
+              );
             }
           }
         }
@@ -2459,9 +2657,15 @@ class MaxTitleBar extends DefaultTitleBar {
           const id = (_b = $tab.dataset) == null ? void 0 : _b.teleBoxID;
           if (id) {
             if (box && id === box.id) {
-              $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), true);
+              $tab.classList.toggle(
+                this.wrapClassName("titles-tab-focus"),
+                true
+              );
             } else if (this.focusedBox && id === this.focusedBox.id) {
-              $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+              $tab.classList.toggle(
+                this.wrapClassName("titles-tab-focus"),
+                false
+              );
             }
           }
         }
@@ -2477,42 +2681,59 @@ class MaxTitleBar extends DefaultTitleBar {
       this.$titleBar.style.width = width + "px";
     }
   }
-  setBoxesStatus(boxesStatus) {
-    this.boxesStatus = boxesStatus;
+  updateBoxesStatus() {
     if (this.hasMaximizedBoxInStatus()) {
-      this.setBoxStatus(exports.TELE_BOX_STATE.Maximized);
+      this.setBoxStatus(TELE_BOX_STATE.Maximized);
     }
     if (this.$titleBar) {
-      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), this.state === exports.TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus());
+      this.$titleBar.classList.toggle(
+        this.wrapClassName("max-titlebar-maximized"),
+        this.state === TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus()
+      );
     }
     this.updateTitles();
   }
   setBoxes(boxes) {
     this.boxes = boxes;
     if (this.$titleBar) {
-      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), this.state === exports.TELE_BOX_STATE.Maximized && boxes.length > 0 || this.hasMaximizedBoxInStatus());
+      this.$titleBar.classList.toggle(
+        this.wrapClassName("max-titlebar-maximized"),
+        this.state === TELE_BOX_STATE.Maximized && boxes.length > 0 || this.hasMaximizedBoxInStatus()
+      );
     }
     this.updateTitles();
   }
   setState(state) {
     super.setState(state);
     if (this.$titleBar) {
-      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), state === exports.TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus());
+      this.$titleBar.classList.toggle(
+        this.wrapClassName("max-titlebar-maximized"),
+        state === TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus()
+      );
     }
     this.updateTitles();
   }
   setReadonly(readonly) {
     super.setReadonly(readonly);
     if (this.$titleBar) {
-      this.$titleBar.classList.toggle(this.wrapClassName("readonly"), this.readonly);
+      this.$titleBar.classList.toggle(
+        this.wrapClassName("readonly"),
+        this.readonly
+      );
     }
   }
   setDarkMode(darkMode) {
     if (darkMode !== this.darkMode) {
       this.darkMode = darkMode;
       if (this.$titleBar) {
-        this.$titleBar.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
-        this.$titleBar.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+        this.$titleBar.classList.toggle(
+          this.wrapClassName("color-scheme-dark"),
+          darkMode
+        );
+        this.$titleBar.classList.toggle(
+          this.wrapClassName("color-scheme-light"),
+          !darkMode
+        );
       }
     }
   }
@@ -2522,9 +2743,19 @@ class MaxTitleBar extends DefaultTitleBar {
     $titleBar.style.transform = `translate(${x}px, ${y}px)`;
     $titleBar.style.width = width + "px";
     $titleBar.classList.add(this.wrapClassName("max-titlebar"));
-    $titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), this.state === exports.TELE_BOX_STATE.Maximized && this.boxes.length > 0);
-    $titleBar.classList.toggle(this.wrapClassName("readonly"), this.readonly);
-    $titleBar.classList.add(this.wrapClassName(this.darkMode ? "color-scheme-dark" : "color-scheme-light"));
+    $titleBar.classList.toggle(
+      this.wrapClassName("max-titlebar-maximized"),
+      this.state === TELE_BOX_STATE.Maximized && this.boxes.length > 0
+    );
+    $titleBar.classList.toggle(
+      this.wrapClassName("readonly"),
+      this.readonly
+    );
+    $titleBar.classList.add(
+      this.wrapClassName(
+        this.darkMode ? "color-scheme-dark" : "color-scheme-light"
+      )
+    );
     const $titlesArea = document.createElement("div");
     $titlesArea.classList.add(this.wrapClassName("titles-area"));
     $titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
@@ -2538,24 +2769,34 @@ class MaxTitleBar extends DefaultTitleBar {
     this.focusedBox = void 0;
   }
   updateTitles() {
-    if (this.$titleBar && (this.state === exports.TELE_BOX_STATE.Maximized || this.hasMaximizedBoxInStatus())) {
-      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-single-title"), this.boxes.length === 1 || this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1);
+    if (this.$titleBar && (this.state === TELE_BOX_STATE.Maximized || this.hasMaximizedBoxInStatus())) {
+      this.$titleBar.classList.toggle(
+        this.wrapClassName("max-titlebar-single-title"),
+        this.boxes.length === 1 || this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1
+      );
       if (this.boxes.length === 1 || this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1) {
         this.setTitle(this.boxes[0].title);
       } else {
-        this.$titleBar.replaceChild(this.renderTitles(), this.$titleBar.firstElementChild);
+        this.$titleBar.replaceChild(
+          this.renderTitles(),
+          this.$titleBar.firstElementChild
+        );
       }
     }
   }
   renderTitles() {
     this.$titles = document.createElement("div");
     this.$titles.className = this.wrapClassName("titles");
-    this.$titles.addEventListener("wheel", (ev) => {
-      ev.currentTarget.scrollBy({
-        left: ev.deltaY > 0 ? 250 : -250,
-        behavior: "smooth"
-      });
-    }, { passive: false });
+    this.$titles.addEventListener(
+      "wheel",
+      (ev) => {
+        ev.currentTarget.scrollBy({
+          left: ev.deltaY > 0 ? 250 : -250,
+          behavior: "smooth"
+        });
+      },
+      { passive: false }
+    );
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("titles-content");
     this.$titles.appendChild($content);
@@ -2573,10 +2814,130 @@ class MaxTitleBar extends DefaultTitleBar {
     return this.$titles;
   }
 }
+var style = "";
+class AppMenu {
+  constructor(props) {
+    this.namespace = "telebox-app-menu";
+    this.badge = document.createElement("div");
+    this.menuView = document.createElement("div");
+    this.containerClickHandler = () => {
+      if (this.manager.readonly) {
+        return;
+      }
+      const isShowMenuView = getComputedStyle(this.menuView).display === "flex";
+      if (isShowMenuView) {
+        this.menuView.style.display = "none";
+      } else {
+        this.menuView.style.display = "flex";
+      }
+    };
+    this.menuViewClickHandler = (e2) => {
+      e2.stopPropagation();
+      e2.stopImmediatePropagation();
+      const target = e2.target;
+      const id = target.getAttribute(`data-${this.c("app-id")}`);
+      if (id) {
+        const lastNotMinimizedBoxStatus = this.manager.getLastNotMinimizedBoxStatus(id) || TELE_BOX_STATE.Normal;
+        const zIndex = (lastNotMinimizedBoxStatus === TELE_BOX_STATE.Maximized ? this.manager.getMaxMaximizedBoxZIndex() : this.manager.getMaxNormalBoxZIndex()) + 1;
+        this.manager.setBox(id, {
+          status: lastNotMinimizedBoxStatus,
+          zIndex
+        }, false, () => {
+          this.manager.focusBox(id);
+        });
+        return;
+      }
+    };
+    this.updatePrefersColorSchemeHandler = () => {
+      this.container.classList.remove(this.theme);
+      this.theme = this.manager.prefersColorScheme;
+      this.container.classList.add(this.theme);
+    };
+    this.appMenuChange = () => {
+      const minimizedBoxesStatus = this.manager.getMinimizedBoxesStatus();
+      this.render(minimizedBoxesStatus);
+    };
+    this.container = props.container;
+    this.manager = props.manager;
+    this.theme = props.theme;
+    this.getBoxesStatus = props.getBoxesStatus;
+    this.init();
+  }
+  get boxesStatus() {
+    var _a;
+    return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || /* @__PURE__ */ new Map();
+  }
+  get minimizedBoxesStatus() {
+    const arr = [];
+    this.boxesStatus.forEach((status) => {
+      if (status === TELE_BOX_STATE.Minimized) {
+        arr.push(status);
+      }
+    });
+    return arr;
+  }
+  c(className) {
+    return `${this.namespace}-${className}`;
+  }
+  setContainer(container) {
+    if (this.container) {
+      this.container.remove();
+    }
+    this.container = container;
+    this.init();
+  }
+  createDefaultAppMenu() {
+    this.badge.classList.add(this.c("app-menu-badge"));
+    this.menuView.classList.add(this.c("app-menu-tooltip"));
+    this.container.classList.add(this.c("app-menu-container"), this.theme);
+    this.menuView.addEventListener("click", this.menuViewClickHandler);
+    this.container.append(this.badge, this.menuView);
+  }
+  async init() {
+    this.createDefaultAppMenu();
+    this.appMenuChange();
+  }
+  createMinimizedItem(appId) {
+    const appItem = document.createElement("div");
+    appItem.classList.add(this.c("app-menu-item"));
+    appItem.setAttribute(`data-${this.c("app-id")}`, appId);
+    const titleDiv = document.createElement("div");
+    titleDiv.classList.add(this.c("app-menu-item-title"));
+    const app = this.manager.getBox(appId);
+    titleDiv.innerText = (app == null ? void 0 : app.title) || appId;
+    appItem.appendChild(titleDiv);
+    return appItem;
+  }
+  renderMenuView(minimizedBoxesStatus) {
+    const items = [];
+    minimizedBoxesStatus.forEach((_, appId) => {
+      items.push(this.createMinimizedItem(appId));
+    });
+    this.menuView.append(...items);
+  }
+  render(minimizedBoxesStatus) {
+    this.menuView.style.display = "none";
+    this.badge.innerText = "";
+    this.menuView.innerHTML = "";
+    if (minimizedBoxesStatus.size === 0) {
+      this.container.style.display = "none";
+    } else {
+      this.badge.innerText = minimizedBoxesStatus.size.toString();
+      this.renderMenuView(minimizedBoxesStatus);
+      this.container.style.display = "block";
+    }
+  }
+  destroy() {
+    this.badge.remove();
+    this.menuView.removeEventListener("click", this.menuViewClickHandler);
+    this.menuView.remove();
+    this.container.remove();
+  }
+}
 class TeleBoxManager {
   constructor({
     root = document.body,
-    prefersColorScheme = exports.TELE_BOX_COLOR_SCHEME.Light,
+    prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
     minimized = false,
     maximized = false,
     fence = true,
@@ -2588,28 +2949,35 @@ class TeleBoxManager {
     },
     collector,
     namespace = "telebox",
-    readonly = false
+    readonly = false,
+    useBoxesStatus = false
   } = {}) {
     this.events = new EventEmitter();
     this._sideEffect = new o();
+    this.useBoxesStatus = useBoxesStatus;
     const { combine, createVal } = c(this._sideEffect);
     this.root = root;
     this.namespace = namespace;
     this.boxes$ = createVal([]);
     this.topBox$ = this.boxes$.derive((boxes) => {
       if (boxes.length > 0) {
+        let currentTopBox = void 0;
         const topBox = boxes.reduce((topBox2, box) => {
-          if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized) {
+          if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
+            return topBox2;
+          }
+          if (!topBox2) {
+            topBox2 = box;
             return topBox2;
           }
           return topBox2.zIndex > box.zIndex ? topBox2 : box;
-        });
+        }, currentTopBox);
         return topBox;
       }
       return;
     });
-    this.boxesStatus$ = new Map();
-    this.lastNotMinimizedBoxesStatus$ = new Map();
+    this.boxesStatus$ = /* @__PURE__ */ new Map();
+    this.lastNotMinimizedBoxesStatus$ = /* @__PURE__ */ new Map();
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
     const prefersDark$ = createVal(false);
     if (prefersDark) {
@@ -2624,16 +2992,24 @@ class TeleBoxManager {
     }
     const prefersColorScheme$ = createVal(prefersColorScheme);
     prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
-      this.boxes.forEach((box) => box.setPrefersColorScheme(prefersColorScheme2, skipUpdate));
+      this.boxes.forEach(
+        (box) => box.setPrefersColorScheme(prefersColorScheme2, skipUpdate)
+      );
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.PrefersColorScheme, prefersColorScheme2);
+        this.events.emit(
+          TELE_BOX_MANAGER_EVENT.PrefersColorScheme,
+          prefersColorScheme2
+        );
       }
     });
-    this._darkMode$ = combine([prefersDark$, prefersColorScheme$], ([prefersDark2, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark2 : prefersColorScheme2 === "dark");
+    this._darkMode$ = combine(
+      [prefersDark$, prefersColorScheme$],
+      ([prefersDark2, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark2 : prefersColorScheme2 === "dark"
+    );
     this._darkMode$.reaction((darkMode, _, skipUpdate) => {
       this.boxes.forEach((box) => box.setDarkMode(darkMode, skipUpdate));
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
       }
     });
     const readonly$ = createVal(readonly);
@@ -2643,16 +3019,21 @@ class TeleBoxManager {
     const minimized$ = createVal(minimized);
     const maximized$ = createVal(maximized);
     maximized$.reaction((maximized2, _, skipUpdate) => {
-      this.boxes.forEach((box) => box.setMaximized(maximized2, skipUpdate));
+      this.boxes.forEach(
+        (box) => box.setMaximized(maximized2, skipUpdate)
+      );
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
       }
     });
-    const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? exports.TELE_BOX_STATE.Minimized : maximized2 ? exports.TELE_BOX_STATE.Maximized : exports.TELE_BOX_STATE.Normal);
+    const state$ = combine(
+      [minimized$, maximized$],
+      ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal
+    );
     state$.reaction((state, _, skipUpdate) => {
       this.maxTitleBar.setState(state);
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.State, state);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
       }
     });
     const fence$ = createVal(fence);
@@ -2661,43 +3042,49 @@ class TeleBoxManager {
     });
     const containerRect$ = createVal(containerRect, shallowequal);
     containerRect$.reaction((containerRect2, _, skipUpdate) => {
-      this.boxes.forEach((box) => box.setContainerRect(containerRect2, skipUpdate));
+      this.boxes.forEach(
+        (box) => box.setContainerRect(containerRect2, skipUpdate)
+      );
       this.maxTitleBar.setContainerRect(containerRect2);
     });
-    const collector$ = createVal(collector === null ? null : collector || new TeleBoxCollector({
-      visible: minimized,
-      readonly,
-      namespace
-    }).mount(root));
+    const collector$ = createVal(
+      collector === null ? null : collector || new TeleBoxCollector({
+        visible: minimized,
+        readonly,
+        namespace
+      }).mount(root)
+    );
     collector$.subscribe((collector2) => {
       if (collector2) {
         collector2.setVisible(minimized$.value);
         collector2.setReadonly(readonly$.value);
         collector2.setDarkMode(this._darkMode$.value);
+        if (this.useBoxesStatus && this.appMenu) {
+          this.appMenu.setContainer(collector2.$appMenuContainer);
+        }
         this._sideEffect.add(() => {
+          collector2.getBoxesStatus = () => {
+            return this.boxesStatus$;
+          };
           collector2.onClick = () => {
             if (!readonly$.value) {
-              if (this.hasMinimizedBox()) {
-                this.getAllMinimizedBoxes().forEach((box) => {
-                  const lastNotMinimizedBoxStatus = box.lastNotMinimizedBoxStatus;
-                  if (lastNotMinimizedBoxStatus) {
-                    this.setBoxStatus(box.id, lastNotMinimizedBoxStatus);
-                  } else {
-                    this.setBoxStatus(box.id, exports.TELE_BOX_STATE.Normal);
-                  }
-                });
+              if (!this.useBoxesStatus) {
+                minimized$.setValue(false);
+              } else if (this.useBoxesStatus && this.appMenu) {
+                this.appMenu.containerClickHandler();
               }
-              minimized$.setValue(false);
             }
           };
           return () => collector2.destroy();
         }, "collect-onClick");
       }
     });
-    readonly$.subscribe((readonly2) => {
-      var _a;
-      return (_a = collector$.value) == null ? void 0 : _a.setReadonly(readonly2);
-    });
+    readonly$.subscribe(
+      (readonly2) => {
+        var _a;
+        return (_a = collector$.value) == null ? void 0 : _a.setReadonly(readonly2);
+      }
+    );
     this._darkMode$.subscribe((darkMode) => {
       var _a;
       (_a = collector$.value) == null ? void 0 : _a.setDarkMode(darkMode);
@@ -2716,23 +3103,31 @@ class TeleBoxManager {
       }
       return;
     };
-    const collectorRect$ = createVal(minimized$.value ? this._calcCollectorRect() : void 0);
+    this._setCollectorRect = (collectorRect) => {
+      var _a;
+      if ((_a = collector$.value) == null ? void 0 : _a.$collector) {
+        collectorRect$.setValue(collectorRect);
+      }
+    };
+    const collectorRect$ = createVal(
+      minimized$.value ? this._calcCollectorRect() : void 0
+    );
     collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
       this.boxes.forEach((box) => {
         box.setCollectorRect(collectorRect, skipUpdate);
       });
     });
     minimized$.subscribe((minimized2, _, skipUpdate) => {
-      var _a, _b;
+      var _a;
       (_a = collector$.value) == null ? void 0 : _a.setVisible(minimized2);
       if (minimized2) {
-        if ((_b = collector$.value) == null ? void 0 : _b.$collector) {
-          collectorRect$.setValue(this._calcCollectorRect());
-        }
+        this._setCollectorRect(this._calcCollectorRect());
       }
-      this.boxes.forEach((box) => box.setMinimized(minimized2, skipUpdate));
+      this.boxes.forEach(
+        (box) => box.setMinimized(minimized2, skipUpdate)
+      );
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
       }
     });
     const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
@@ -2753,17 +3148,44 @@ class TeleBoxManager {
         if (id) {
           const box = this.getBox(id);
           if (box) {
-            this.focusBox(box);
-            if (box.boxStatus && box.boxStatus !== exports.TELE_BOX_STATE.Maximized || !box.boxStatus) {
+            if (!this.useBoxesStatus) {
               this.makeBoxTop(box);
+            } else {
+              if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
+                const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
+                if (maxNormalBoxZIndex > box.zIndex) {
+                  this.setBox(box, {
+                    zIndex: maxNormalBoxZIndex + 1
+                  }, false);
+                }
+              } else if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
+                const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
+                if (maxMaximizedBoxZIndex > box.zIndex) {
+                  this.setBox(box, {
+                    zIndex: maxMaximizedBoxZIndex + 1
+                  }, false);
+                }
+                this.makeMaximizedTopBoxFocus();
+              }
             }
+            this.focusBox(box);
             return;
           }
         }
       }
     };
-    this._sideEffect.addEventListener(window, "mousedown", checkFocusBox, true);
-    this._sideEffect.addEventListener(window, "touchstart", checkFocusBox, true);
+    this._sideEffect.addEventListener(
+      window,
+      "mousedown",
+      checkFocusBox,
+      true
+    );
+    this._sideEffect.addEventListener(
+      window,
+      "touchstart",
+      checkFocusBox,
+      true
+    );
     this.maxTitleBar = new MaxTitleBar({
       darkMode: this.darkMode,
       readonly: readonly$.value,
@@ -2771,32 +3193,85 @@ class TeleBoxManager {
       state: state$.value,
       boxes: this.boxes$.value,
       containerRect: containerRect$.value,
-      boxesStatus: this.boxesStatus$,
+      getBoxesStatus: () => {
+        return this.boxesStatus$;
+      },
       onEvent: (event) => {
-        var _a, _b, _c;
         switch (event.type) {
-          case exports.TELE_BOX_DELEGATE_EVENT.Maximize: {
-            if (this.hasBoxesStatus() && ((_a = this.maxTitleBar.focusedBox) == null ? void 0 : _a.id)) {
-              this.setBoxStatus(this.maxTitleBar.focusedBox.id, exports.TELE_BOX_STATE.Normal);
-              this.makeMaximizedTopBoxFocus();
+          case TELE_BOX_DELEGATE_EVENT.Maximize: {
+            if (this.hasBoxesStatus()) {
+              let targetBox = this.maxTitleBar.focusedBox;
+              if (!targetBox) {
+                targetBox = this.getMaximizedTopBox();
+              }
+              if (targetBox == null ? void 0 : targetBox.id) {
+                const box = this.getBox(targetBox.id);
+                if (box) {
+                  this.setBox(box, {
+                    status: TELE_BOX_STATE.Normal,
+                    zIndex: this.getMaxNormalBoxZIndex() + 1
+                  }, false, () => {
+                    this.makeMaximizedTopBoxFocus();
+                  });
+                }
+              }
             } else {
               maximized$.setValue(!maximized$.value);
             }
             break;
           }
-          case exports.TELE_BOX_DELEGATE_EVENT.Minimize: {
-            if (this.hasBoxesStatus() && ((_b = this.maxTitleBar.focusedBox) == null ? void 0 : _b.id)) {
-              this.setBoxStatus(this.maxTitleBar.focusedBox.id, exports.TELE_BOX_STATE.Minimized);
-              this.makeMaximizedTopBoxFocus();
+          case TELE_BOX_DELEGATE_EVENT.Minimize: {
+            if (this.hasBoxesStatus()) {
+              let targetBox = this.maxTitleBar.focusedBox;
+              if (!targetBox) {
+                targetBox = this.getMaximizedTopBox();
+              }
+              if (targetBox == null ? void 0 : targetBox.id) {
+                const box = this.getBox(targetBox.id);
+                if (box) {
+                  let isFocusChanged = false;
+                  if (box.focus) {
+                    this.blurBox(box);
+                    isFocusChanged = true;
+                  }
+                  this.setBox(box, {
+                    status: TELE_BOX_STATE.Minimized,
+                    zIndex: -1
+                  }, false);
+                  if (isFocusChanged) {
+                    this.focusTopBox();
+                  } else {
+                    this.makeMaximizedTopBoxFocus();
+                  }
+                }
+              }
             } else {
               minimized$.setValue(true);
             }
             break;
           }
-          case exports.TELE_BOX_EVENT.Close: {
-            if (this.hasBoxesStatus() && ((_c = this.maxTitleBar.focusedBox) == null ? void 0 : _c.id)) {
-              this.remove(this.maxTitleBar.focusedBox.id);
-              this.makeMaximizedTopBoxFocus();
+          case TELE_BOX_EVENT.Close: {
+            if (this.hasBoxesStatus()) {
+              let targetBox = this.maxTitleBar.focusedBox;
+              if (!targetBox) {
+                targetBox = this.getMaximizedTopBox();
+              }
+              if (targetBox == null ? void 0 : targetBox.id) {
+                const box = this.getBox(targetBox.id);
+                if (box) {
+                  let isFocusChanged = false;
+                  if (box.focus) {
+                    this.blurBox(box);
+                    isFocusChanged = true;
+                  }
+                  this.remove(box, false);
+                  if (isFocusChanged) {
+                    this.focusTopBox();
+                  } else {
+                    this.makeMaximizedTopBoxFocus();
+                  }
+                }
+              }
             } else {
               this.removeTopBox();
               this.focusTopBox();
@@ -2806,7 +3281,9 @@ class TeleBoxManager {
         }
       }
     });
-    readonly$.subscribe((readonly2) => this.maxTitleBar.setReadonly(readonly2));
+    readonly$.subscribe(
+      (readonly2) => this.maxTitleBar.setReadonly(readonly2)
+    );
     this._darkMode$.subscribe((darkMode) => {
       this.maxTitleBar.setDarkMode(darkMode);
     });
@@ -2826,6 +3303,9 @@ class TeleBoxManager {
     i(this, valConfig);
     this._state$ = state$;
     this.root.appendChild(this.maxTitleBar.render());
+    if (useBoxesStatus) {
+      this.appMenu = this.createMinimizedAppMenu();
+    }
   }
   get boxes() {
     return this.boxes$.value;
@@ -2841,12 +3321,12 @@ class TeleBoxManager {
   }
   setState(state, skipUpdate = false) {
     switch (state) {
-      case exports.TELE_BOX_STATE.Maximized: {
+      case TELE_BOX_STATE.Maximized: {
         this.setMinimized(false, skipUpdate);
         this.setMaximized(true, skipUpdate);
         break;
       }
-      case exports.TELE_BOX_STATE.Minimized: {
+      case TELE_BOX_STATE.Minimized: {
         this.setMinimized(true, skipUpdate);
         this.setMaximized(false, skipUpdate);
         break;
@@ -2860,92 +3340,270 @@ class TeleBoxManager {
     return this;
   }
   setBoxStatus(boxId, boxStatus, skipUpdate = false) {
-    const boxesStatus = this.boxesStatus$;
     if (boxStatus) {
-      const oldBoxStatus = boxesStatus.get(boxId);
-      boxesStatus.set(boxId, boxStatus);
-      if (boxStatus === exports.TELE_BOX_STATE.Minimized && oldBoxStatus !== exports.TELE_BOX_STATE.Minimized) {
+      const oldBoxStatus = this.boxesStatus$.get(boxId);
+      this.boxesStatus$.set(boxId, boxStatus);
+      if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
         this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
-      } else if (oldBoxStatus === exports.TELE_BOX_STATE.Minimized && boxStatus !== exports.TELE_BOX_STATE.Minimized) {
+      } else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
         this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
       }
     } else {
-      boxesStatus.delete(boxId);
+      this.boxesStatus$.delete(boxId);
       this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
     }
-    this.setBoxesStatus(boxesStatus, skipUpdate);
     if (!skipUpdate) {
-      this.events.emit(exports.TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
+      this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
     }
   }
+  getBoxStatus(boxId) {
+    return this.boxesStatus$.get(boxId);
+  }
+  get boxesStatus() {
+    return this.boxesStatus$;
+  }
+  get lastNotMinimizedBoxesStatus() {
+    return this.lastNotMinimizedBoxesStatus$;
+  }
   setBoxesStatus(boxesStatus, skipUpdate = false) {
-    var _a, _b, _c, _d;
-    let topBox;
-    const topBoxId = (_a = this.topBox) == null ? void 0 : _a.id;
-    let hasMinimizedBox = false;
+    this.boxesStatus$ = boxesStatus;
+    this.effectBoxesStatusChange(skipUpdate);
+  }
+  getBoxesStatus() {
+    return this.boxesStatus$;
+  }
+  effectBoxStatusChange() {
+    if (!this.useBoxesStatus) {
+      return;
+    }
+    if (this.collector) {
+      this.collector.updateBoxesStatus();
+      if (this.hasMinimizedBox()) {
+        this._setCollectorRect(this._calcCollectorRect());
+      }
+    }
+    if (this.appMenu) {
+      this.appMenu.appMenuChange();
+    }
+    if (this.maxTitleBar) {
+      this.maxTitleBar.updateBoxesStatus();
+    }
+  }
+  effectBoxesStatusTimerFunc(skipUpdate) {
+    if (!this.useBoxesStatus) {
+      return;
+    }
+    let newTopBox;
+    const curTopBox = this.topBox;
     this.boxes.forEach((box) => {
-      var _a2;
-      const boxStatus = boxesStatus.get(box.id);
+      var _a;
+      const boxStatus = this.boxesStatus$.get(box.id);
       if (boxStatus) {
-        if (boxStatus !== exports.TELE_BOX_STATE.Minimized && box.zIndex > ((_a2 = topBox == null ? void 0 : topBox.zIndex) != null ? _a2 : 0)) {
-          topBox = box;
+        if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
+          newTopBox = box;
         }
         box.setBoxStatus(boxStatus, skipUpdate);
-        if (boxStatus === exports.TELE_BOX_STATE.Minimized) {
-          hasMinimizedBox = true;
-        }
       }
     });
-    if (hasMinimizedBox) {
-      (_b = this.collector) == null ? void 0 : _b.setVisible(true);
-      if ((_c = this.collector) == null ? void 0 : _c.$collector) {
-        this.setCollectorRect(this._calcCollectorRect());
+    this.effectBoxStatusChange();
+    if (newTopBox && curTopBox !== newTopBox) {
+      this.topBox$.setValue(newTopBox);
+    }
+    if (!newTopBox && curTopBox) {
+      this.topBox$.setValue(void 0);
+    }
+  }
+  async effectBoxesStatusChange(skipUpdate = false) {
+    var _a, _b;
+    if (!this.useBoxesStatus) {
+      if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
+        clearTimeout(this.effectBoxesStatusTimer.timer);
+        if (this.effectBoxesStatusTimer.resolve) {
+          this.effectBoxesStatusTimer.resolve(!!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate));
+        }
       }
-    } else {
-      (_d = this.collector) == null ? void 0 : _d.setVisible(false);
+      this.effectBoxesStatusTimer = void 0;
+      return;
     }
-    if (topBox && topBoxId !== topBox.id) {
-      this.makeBoxTop(topBox, skipUpdate);
-      this.focusTopBox();
-      this.topBox$.setValue(topBox);
+    if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
+      if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
+        clearTimeout(this.effectBoxesStatusTimer.timer);
+        if (this.effectBoxesStatusTimer.resolve) {
+          this.effectBoxesStatusTimer.resolve(!!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate));
+        }
+        this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
+      } else {
+        return;
+      }
     }
-    if (this.maxTitleBar) {
-      this.maxTitleBar.setBoxesStatus(boxesStatus);
+    if (!this.effectBoxesStatusTimer) {
+      this.effectBoxesStatusTimer = {
+        skipUpdate,
+        timer: void 0,
+        resolve: void 0
+      };
+    }
+    if (this.effectBoxesStatusTimer) {
+      const _skipUpdate = await new Promise((resolve) => {
+        this.effectBoxesStatusTimer.resolve = resolve;
+        this.effectBoxesStatusTimer.timer = setTimeout(() => {
+          if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
+            this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer.skipUpdate);
+          }
+        }, 100);
+      });
+      this.effectBoxesStatusTimerFunc(_skipUpdate);
+      this.effectBoxesStatusTimer = void 0;
     }
   }
   hasBoxesStatus() {
+    if (!this.useBoxesStatus) {
+      return false;
+    }
     return this.boxesStatus$.size > 0;
   }
   hasMinimizedBox() {
-    return this.boxes.some((box) => box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized);
+    if (!this.useBoxesStatus) {
+      return false;
+    }
+    return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
+  }
+  getMinimizedBoxesStatus() {
+    const minimizedBoxes = /* @__PURE__ */ new Map();
+    this.boxesStatus$.forEach((boxStatus, boxId) => {
+      if (boxStatus === TELE_BOX_STATE.Minimized) {
+        minimizedBoxes.set(boxId, boxStatus);
+      }
+    });
+    return minimizedBoxes;
+  }
+  getNotMinimizedBoxesStatus() {
+    const notMinimizedBoxes = /* @__PURE__ */ new Map();
+    this.boxesStatus$.forEach((boxStatus, boxId) => {
+      if (boxStatus !== TELE_BOX_STATE.Minimized) {
+        notMinimizedBoxes.set(boxId, boxStatus);
+      }
+    });
+    return notMinimizedBoxes;
+  }
+  getAllMaximizedBoxesStatus() {
+    const maximizedBoxes = /* @__PURE__ */ new Map();
+    this.boxesStatus$.forEach((boxStatus, boxId) => {
+      if (boxStatus === TELE_BOX_STATE.Maximized) {
+        maximizedBoxes.set(boxId, boxStatus);
+      }
+    });
+    return maximizedBoxes;
+  }
+  getAllNormalBoxesStatus() {
+    const normalBoxes = /* @__PURE__ */ new Map();
+    this.boxesStatus$.forEach((boxStatus, boxId) => {
+      if (boxStatus === TELE_BOX_STATE.Normal) {
+        normalBoxes.set(boxId, boxStatus);
+      }
+    });
+    return normalBoxes;
+  }
+  getLastNotMinimizedBoxStatus(boxId) {
+    return this.lastNotMinimizedBoxesStatus$.get(boxId);
   }
   setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
-    const boxesStatus = this.lastNotMinimizedBoxesStatus$;
     if (lastNotMinimizedBoxStatus) {
-      boxesStatus.set(boxId, lastNotMinimizedBoxStatus);
+      this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
     } else {
-      boxesStatus.delete(boxId);
+      this.lastNotMinimizedBoxesStatus$.delete(boxId);
     }
-    this.setLastNotMinimizedBoxesStatus(boxesStatus, skipUpdate);
     if (!skipUpdate) {
-      this.events.emit(exports.TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus: lastNotMinimizedBoxStatus });
+      this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus: lastNotMinimizedBoxStatus });
     }
   }
   setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus, skipUpdate = false) {
+    this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
+    this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
+  }
+  async effectLastNotMinimizedBoxStatusChange(skipUpdate = false) {
+    var _a, _b;
+    if (!this.useBoxesStatus) {
+      if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
+        clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
+        if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
+          this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate));
+        }
+      }
+      this.effectLastNotMinimizedBoxStatusTimer = void 0;
+      return;
+    }
+    if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
+      clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
+      if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
+        if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
+          this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate));
+        }
+        this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
+      } else {
+        return;
+      }
+    }
+    if (!this.effectLastNotMinimizedBoxStatusTimer) {
+      this.effectLastNotMinimizedBoxStatusTimer = {
+        skipUpdate,
+        timer: void 0,
+        resolve: void 0
+      };
+    }
+    if (this.effectLastNotMinimizedBoxStatusTimer) {
+      const _skipUpdate = await new Promise((resolve) => {
+        this.effectLastNotMinimizedBoxStatusTimer.resolve = resolve;
+        this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(() => {
+          if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
+            this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate);
+          }
+        }, 100);
+      });
+      this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
+      this.effectLastNotMinimizedBoxStatusTimer = void 0;
+    }
+  }
+  effectLastNotMinimizedBoxStatusFunc(skipUpdate = false) {
+    if (!this.useBoxesStatus) {
+      return;
+    }
     this.boxes.forEach((box) => {
-      const boxStatus = lastNotMinimizedBoxesStatus.get(box.id);
+      const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
       if (boxStatus) {
         box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
       }
     });
   }
-  getAllMinimizedBoxes() {
-    return this.boxes.filter((box) => box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized);
+  getUnabledBoxesStatusZIndex() {
+    return this.topBox ? this.topBox.zIndex : 99;
+  }
+  getMaxMaximizedBoxZIndex() {
+    if (!this.useBoxesStatus) {
+      return this.getUnabledBoxesStatusZIndex();
+    }
+    return this.boxes.reduce((maxZIndex, box) => {
+      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
+        return Math.max(maxZIndex, box.zIndex);
+      }
+      return maxZIndex;
+    }, 99);
+  }
+  getMaxNormalBoxZIndex() {
+    if (!this.useBoxesStatus) {
+      return this.getUnabledBoxesStatusZIndex();
+    }
+    return this.boxes.reduce((maxZIndex, box) => {
+      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
+        return Math.max(maxZIndex, box.zIndex);
+      }
+      return maxZIndex;
+    }, 299);
   }
   create(config = {}, smartPosition = true) {
-    const box = new TeleBox(__spreadProps(__spreadValues({
-      zIndex: this.topBox ? this.topBox.zIndex + 1 : 100
-    }, smartPosition ? this.smartPosition(config) : config), {
+    const box = new TeleBox({
+      zIndex: this.getMaxNormalBoxZIndex() + 1,
+      ...smartPosition ? this.smartPosition(config) : config,
       darkMode: this.darkMode,
       prefersColorScheme: this.prefersColorScheme,
       maximized: this.maximized,
@@ -2955,92 +3613,110 @@ class TeleBoxManager {
       containerRect: this.containerRect,
       readonly: this.readonly,
       collectorRect: this.collectorRect
-    }));
+    });
     box.mount(this.root);
+    this.boxes$.setValue([...this.boxes, box]);
+    if (box.boxStatus && this.useBoxesStatus) {
+      this.setBox(box, {
+        status: box.boxStatus,
+        lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
+      }, true);
+    }
     if (box.focus) {
       this.focusBox(box);
       if (smartPosition) {
         this.makeBoxTop(box);
       }
     }
-    this.boxes$.setValue([...this.boxes, box]);
-    if (box.boxStatus) {
-      this.setBoxStatus(box.id, box.boxStatus, true);
-    }
-    if (box._lastNotMinimizedBoxStatus$.value) {
-      this.setLastNotMinimizedBoxStatus(box.id, box._lastNotMinimizedBoxStatus$.value, true);
-    }
-    box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Maximize, () => {
-      if (box.boxStatus) {
-        if (box.boxStatus === exports.TELE_BOX_STATE.Maximized) {
-          this.setBoxStatus(box.id, exports.TELE_BOX_STATE.Normal);
+    box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
+      if (this.useBoxesStatus && box.boxStatus) {
+        if (box.boxStatus === TELE_BOX_STATE.Maximized) {
+          this.setBox(box.id, {
+            status: TELE_BOX_STATE.Normal,
+            zIndex: this.getMaxNormalBoxZIndex() + 1
+          }, false);
         } else {
-          this.boxes.forEach((box2) => {
-            if (box2.boxStatus === exports.TELE_BOX_STATE.Normal) {
-              this.setBoxStatus(box2.id, exports.TELE_BOX_STATE.Maximized);
+          [...this.boxes].filter((box2) => box2.boxStatus === TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
+            if (box2.boxStatus === TELE_BOX_STATE.Normal) {
+              this.setBox(box2.id, {
+                status: TELE_BOX_STATE.Maximized,
+                zIndex: this.getMaxMaximizedBoxZIndex() + 1
+              }, false);
             }
           });
+          this.makeMaximizedTopBoxFocus();
         }
-        this.makeMaximizedTopBoxFocus();
       } else {
         this.setMaximized(!this.maximized);
       }
     });
-    box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize, () => {
-      if (box.boxStatus) {
-        const oldBoxStatus = box.boxStatus;
-        this.setBoxStatus(box.id, exports.TELE_BOX_STATE.Minimized);
-        if (oldBoxStatus === exports.TELE_BOX_STATE.Maximized) {
-          this.makeMaximizedTopBoxFocus();
+    box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
+      if (box.boxStatus && this.useBoxesStatus) {
+        if (box.focus) {
+          this.blurBox(box);
         }
+        this.setBox(box, {
+          status: TELE_BOX_STATE.Minimized,
+          zIndex: -1
+        }, false, () => {
+          this.focusTopBox();
+        });
       } else {
         this.setMinimized(true);
       }
     });
-    box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Close, () => {
+    box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+      if (this.useBoxesStatus && box.focus) {
+        this.blurBox(box);
+      }
       this.remove(box);
       this.focusTopBox();
     });
     box._coord$.reaction((_, __, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Move, box);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
       }
     });
     box._size$.reaction((_, __, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Resize, box);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
       }
     });
     box._intrinsicCoord$.reaction((_, __, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
       }
     });
     box._intrinsicSize$.reaction((_, __, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
       }
     });
     box._visualSize$.reaction((_, __, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.VisualResize, box);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
       }
     });
     box._zIndex$.reaction((_, __, skipUpdate) => {
       if (this.boxes.length > 0) {
+        let currentTopBox = void 0;
         const topBox = this.boxes.reduce((topBox2, box2) => {
-          if (box2.boxStatus && box2.boxStatus === exports.TELE_BOX_STATE.Minimized) {
+          if (box2.boxStatus && box2.boxStatus === TELE_BOX_STATE.Minimized) {
+            return topBox2;
+          }
+          if (!topBox2) {
+            topBox2 = box2;
             return topBox2;
           }
           return topBox2.zIndex > box2.zIndex ? topBox2 : box2;
-        });
+        }, currentTopBox);
         this.topBox$.setValue(topBox);
       }
       if (!skipUpdate) {
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.ZIndex, box);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
       }
     });
-    this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Created, box);
+    this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
     return box;
   }
   query(config) {
@@ -3060,24 +3736,45 @@ class TeleBoxManager {
       this.updateBox(box, config, skipUpdate);
     });
   }
-  remove(boxOrID, skipUpdate = false) {
+  setBox(boxOrID, options, skipUpdate = false, effectFunc) {
     const box = this.getBox(boxOrID);
     if (box) {
-      this.setBoxStatus(box.id, void 0, skipUpdate);
-      this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
+      const { status, zIndex, lastNotMinimizedBoxStatus } = options;
+      if (status) {
+        this.setBoxStatus(box.id, status, skipUpdate);
+        box.setBoxStatus(status, skipUpdate);
+        this.effectBoxStatusChange();
+      }
+      if (zIndex) {
+        box.setZIndex(zIndex, skipUpdate);
+      }
+      if (lastNotMinimizedBoxStatus) {
+        this.setLastNotMinimizedBoxStatus(box.id, lastNotMinimizedBoxStatus, skipUpdate);
+        box.setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate);
+      }
+      effectFunc && effectFunc();
     }
+  }
+  remove(boxOrID, skipUpdate = false, effectFunc) {
+    const box = this.getBox(boxOrID);
     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((box2) => box2.destroy());
+      if (box && this.useBoxesStatus) {
+        this.setBoxStatus(box.id, void 0, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
+        this.effectBoxStatusChange();
+        effectFunc && effectFunc();
+      }
       if (!skipUpdate) {
         if (this.boxes.length <= 0) {
           this.setMaximized(false);
           this.setMinimized(false);
         }
-        this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
       }
       return deletedBoxes[0];
     }
@@ -3100,7 +3797,7 @@ class TeleBoxManager {
         this.setMaximized(false);
         this.setMinimized(false);
       }
-      this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+      this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
     }
     return deletedBoxes;
   }
@@ -3129,16 +3826,19 @@ class TeleBoxManager {
             targetBox.setFocus(true, skipUpdate);
           }
           if (focusChanged && !skipUpdate) {
-            this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Focused, targetBox);
+            this.events.emit(
+              TELE_BOX_MANAGER_EVENT.Focused,
+              targetBox
+            );
           }
         } else if (box.focus) {
           this.blurBox(box, skipUpdate);
         }
       });
-      if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
-        this.makeMaximizedBoxFocus(targetBox);
-      } else {
+      if (!this.useBoxesStatus) {
         this.maxTitleBar.focusBox(targetBox);
+      } else if (this.useBoxesStatus && this.maxTitleBar.hasMaximizedBoxInStatus()) {
+        this.makeMaximizedTopBoxFocus();
       }
     }
   }
@@ -3153,15 +3853,11 @@ class TeleBoxManager {
       if (targetBox.focus) {
         targetBox.setFocus(false, skipUpdate);
         if (!skipUpdate) {
-          this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
         }
       }
       if (this.maxTitleBar.focusedBox === targetBox) {
-        if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
-          this.makeMaximizedTopBoxFocus();
-        } else {
-          this.maxTitleBar.focusBox();
-        }
+        this.maxTitleBar.focusBox();
       }
     }
   }
@@ -3170,16 +3866,12 @@ class TeleBoxManager {
       if (box.focus) {
         box.setFocus(false, skipUpdate);
         if (!skipUpdate) {
-          this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred, box);
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
         }
       }
     });
     if (this.maxTitleBar.focusedBox) {
-      if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
-        this.makeMaximizedBoxBlur();
-      } else {
-        this.maxTitleBar.focusBox();
-      }
+      this.maxTitleBar.focusBox();
     }
   }
   teleBoxMatcher(config) {
@@ -3188,10 +3880,18 @@ class TeleBoxManager {
   }
   updateBox(box, config, skipUpdate = false) {
     if (config.x != null || config.y != null) {
-      box.move(config.x == null ? box.intrinsicX : config.x, config.y == null ? box.intrinsicY : config.y, skipUpdate);
+      box.move(
+        config.x == null ? box.intrinsicX : config.x,
+        config.y == null ? box.intrinsicY : config.y,
+        skipUpdate
+      );
     }
     if (config.width != null || config.height != null) {
-      box.resize(config.width == null ? box.intrinsicWidth : config.width, config.height == null ? box.intrinsicHeight : config.height, skipUpdate);
+      box.resize(
+        config.width == null ? box.intrinsicWidth : config.width,
+        config.height == null ? box.intrinsicHeight : config.height,
+        skipUpdate
+      );
     }
     if (config.title != null) {
       box.setTitle(config.title);
@@ -3224,11 +3924,11 @@ class TeleBoxManager {
     if (config.footer != null) {
       box.mountFooter(config.footer);
     }
-    if (config.boxStatus) {
-      this.setBoxStatus(box.id, config.boxStatus, skipUpdate);
-    }
-    if (config.lastNotMinimizedBoxStatus) {
-      this.setLastNotMinimizedBoxStatus(box.id, config.lastNotMinimizedBoxStatus, skipUpdate);
+    if (this.useBoxesStatus && (config.boxStatus || config.lastNotMinimizedBoxStatus)) {
+      this.setBox(box, {
+        status: config.boxStatus,
+        lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
+      }, skipUpdate);
     }
   }
   smartPosition(config = {}) {
@@ -3241,6 +3941,10 @@ class TeleBoxManager {
         if (vx > this.containerRect.width - width * this.containerRect.width) {
           vx = 20;
         }
+      } else if (this.hasMinimizedBox()) {
+        vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxX, box) => {
+          return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
+        }, vx);
       }
       x = vx / this.containerRect.width;
     }
@@ -3251,22 +3955,27 @@ class TeleBoxManager {
         if (vy > this.containerRect.height - height * this.containerRect.height) {
           vy = 20;
         }
+      } else if (this.hasMinimizedBox()) {
+        vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxY, box) => {
+          return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
+        }, vy);
       }
       y = vy / this.containerRect.height;
     }
-    return __spreadProps(__spreadValues({}, config), { x, y, width, height });
+    return { ...config, x, y, width, height };
   }
   makeBoxTop(box, skipUpdate = false) {
-    if (this.topBox) {
+    if (!this.useBoxesStatus && this.topBox) {
       if (box !== this.topBox) {
-        const currentBoxZIndex = box.zIndex;
-        const addZIndex = this.topBox.zIndex + 1 - box.zIndex;
         box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
-        this.makeTopBoxEffect(box.id, addZIndex, currentBoxZIndex, skipUpdate);
       }
-    }
+    } else if (this.useBoxesStatus)
+      ;
   }
-  makeMaximizedTopBoxFocus() {
+  getMaximizedTopBox() {
+    if (!this.useBoxesStatus) {
+      return void 0;
+    }
     let maximizedBox;
     if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
       maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
@@ -3275,45 +3984,15 @@ class TeleBoxManager {
         }
         return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
       });
-      if (maximizedBox) {
-        this.maxTitleBar.focusBox(maximizedBox);
-      }
-    }
-  }
-  makeTopBoxEffect(boxId, addZIndex, currentZIndex, skipUpdate = false) {
-    if (this.hasBoxesStatus() && this.hasMinimizedBox()) {
-      this.boxes.forEach((b) => {
-        if (b.boxStatus && b.id !== boxId && b.zIndex >= currentZIndex) {
-          b.setZIndex(b.zIndex + addZIndex, skipUpdate);
-        }
-      });
     }
+    return maximizedBox;
   }
-  makeMaximizedBoxFocus(maximizedBox, skipUpdate = false) {
-    if (this.maxTitleBar.hasMaximizedBoxInStatus() && this.maxTitleBar.MaximizedBoxes.find((box) => box.id === maximizedBox.id)) {
-      const currentZIndex = maximizedBox.zIndex;
-      const currentMaximizedTopBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, box) => {
-        if (!topBox) {
-          return box;
-        }
-        return topBox.zIndex > box.zIndex ? topBox : box;
-      });
-      if (currentMaximizedTopBox !== maximizedBox) {
-        const addZIndex = currentMaximizedTopBox.zIndex - currentZIndex + 1;
-        this.boxes.forEach((box) => {
-          if (this.maxTitleBar.MaximizedBoxes.find((b) => b.id === box.id && b.id !== maximizedBox.id)) {
-            return;
-          }
-          if (box.zIndex >= currentZIndex) {
-            box.setZIndex(box.zIndex + addZIndex, skipUpdate);
-          }
-        });
-      }
-      this.maxTitleBar.focusBox(maximizedBox);
+  makeMaximizedTopBoxFocus() {
+    if (!this.useBoxesStatus) {
+      return;
     }
-  }
-  makeMaximizedBoxBlur() {
-    this.maxTitleBar.focusBox();
+    const maximizedBox = this.getMaximizedTopBox();
+    this.maxTitleBar.focusBox(maximizedBox);
   }
   getBoxIndex(boxOrID) {
     return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
@@ -3321,8 +4000,28 @@ class TeleBoxManager {
   getBox(boxOrID) {
     return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
   }
+  createMinimizedAppMenu() {
+    var _a, _b;
+    if ((_a = this.collector) == null ? void 0 : _a.$appMenuContainer) {
+      return new AppMenu({
+        manager: this,
+        container: (_b = this.collector) == null ? void 0 : _b.$appMenuContainer,
+        theme: this.prefersColorScheme ? "dark" : "light",
+        getBoxesStatus: () => {
+          return this.boxesStatus$;
+        }
+      });
+    }
+    return;
+  }
 }
 exports.DefaultTitleBar = DefaultTitleBar;
+exports.TELE_BOX_COLOR_SCHEME = TELE_BOX_COLOR_SCHEME;
+exports.TELE_BOX_DELEGATE_EVENT = TELE_BOX_DELEGATE_EVENT;
+exports.TELE_BOX_EVENT = TELE_BOX_EVENT;
+exports.TELE_BOX_MANAGER_EVENT = TELE_BOX_MANAGER_EVENT;
+exports.TELE_BOX_RESIZE_HANDLE = TELE_BOX_RESIZE_HANDLE;
+exports.TELE_BOX_STATE = TELE_BOX_STATE;
 exports.TeleBox = TeleBox;
 exports.TeleBoxCollector = TeleBoxCollector;
 exports.TeleBoxDragHandleType = TeleBoxDragHandleType;