@netless/telebox-insider 0.3.0-beta.6 → 0.3.0-beta.8

package/dist/telebox-insider.es.js

@@ -1,31 +1,12 @@
-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));
-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$4 = '.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}';
+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;
   }
@@ -211,8 +192,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)
@@ -221,7 +202,7 @@ var __assign$1 = function() {
     }
     return t2;
   };
-  return __assign$1.apply(this, arguments);
+  return __assign.apply(this, arguments);
 };
 function __rest(s2, e2) {
   var t2 = {};
@@ -252,8 +233,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);
@@ -358,32 +339,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);
@@ -541,7 +496,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 = {};
@@ -624,7 +579,7 @@ var testPrefix = function(key) {
         return;
       }
       camelCache.set(key, prefixedPropertyName);
-      setDashPrefix(key, "" + (noPrefix ? "" : "-") + camelToDash(prefixedPropertyName));
+      setDashPrefix(key, (noPrefix ? "" : "-") + camelToDash(prefixedPropertyName));
     }
   }
 };
@@ -663,7 +618,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,
@@ -882,7 +837,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));
@@ -1072,7 +1027,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;
@@ -1120,9 +1075,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);
@@ -1137,7 +1092,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);
     };
   }
@@ -1155,7 +1110,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);
     };
   }
@@ -1196,21 +1151,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$3 = '.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}';
-var TELE_BOX_COLOR_SCHEME;
-(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";
-})(TELE_BOX_COLOR_SCHEME || (TELE_BOX_COLOR_SCHEME = {}));
-var TELE_BOX_STATE;
-(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";
-})(TELE_BOX_STATE || (TELE_BOX_STATE = {}));
-var TELE_BOX_EVENT;
-(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";
@@ -1229,15 +1183,15 @@ var TELE_BOX_EVENT;
   TELE_BOX_EVENT2["Destroyed"] = "destroyed";
   TELE_BOX_EVENT2["BoxStatus"] = "box_status";
   TELE_BOX_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
-})(TELE_BOX_EVENT || (TELE_BOX_EVENT = {}));
-var TELE_BOX_DELEGATE_EVENT;
-(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";
-})(TELE_BOX_DELEGATE_EVENT || (TELE_BOX_DELEGATE_EVENT = {}));
-var TELE_BOX_RESIZE_HANDLE;
-(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";
@@ -1246,7 +1200,8 @@ var TELE_BOX_RESIZE_HANDLE;
   TELE_BOX_RESIZE_HANDLE2["NorthEast"] = "ne";
   TELE_BOX_RESIZE_HANDLE2["SouthEast"] = "se";
   TELE_BOX_RESIZE_HANDLE2["SouthWest"] = "sw";
-})(TELE_BOX_RESIZE_HANDLE || (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);
@@ -1385,7 +1340,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)
+          );
         }
       });
     }
@@ -1396,7 +1354,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)
+            );
           }
         });
       }
@@ -1428,7 +1389,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) {
@@ -1437,24 +1400,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);
     }
@@ -1464,8 +1433,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() {
@@ -1536,34 +1514,49 @@ 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(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) {
@@ -1603,7 +1596,9 @@ class TeleBox {
     const focus$ = createVal(focus);
     focus$.reaction((focus2, _, skipUpdate) => {
       if (!skipUpdate) {
-        this.events.emit(focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur);
+        this.events.emit(
+          focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur
+        );
       }
     });
     const minimized$ = createVal(minimized);
@@ -1618,98 +1613,125 @@ class TeleBox {
         this.events.emit(TELE_BOX_EVENT.Maximized, maximized2);
       }
     });
-    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);
+    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(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(TELE_BOX_EVENT.IntrinsicResize, size);
       }
     });
-    const size$ = combine([intrinsicSize$, maximized$, boxStatus$], ([intrinsicSize, maximized2, boxStatus2]) => {
-      if (maximized2 || boxStatus2 === 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(TELE_BOX_EVENT.Resize, size);
       }
     });
-    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);
+    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(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(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) {
+    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 === 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(TELE_BOX_EVENT.Move, coord);
@@ -1746,7 +1768,10 @@ class TeleBox {
               break;
             }
             default: {
-              console.error("Unsupported titleBar event:", event);
+              console.error(
+                "Unsupported titleBar event:",
+                event
+              );
               break;
             }
           }
@@ -1793,7 +1818,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();
   }
@@ -1860,11 +1891,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() {
@@ -1925,14 +1962,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) {
@@ -2008,33 +2051,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 === TELE_BOX_STATE.Minimized);
+        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";
@@ -2042,25 +2104,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 === 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) => {
+    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 });
@@ -2155,44 +2221,94 @@ class TeleBox {
       const offsetY = (pageY - trackStartPageY) / this.containerRect.height;
       switch (trackingHandle) {
         case TELE_BOX_RESIZE_HANDLE.North: {
-          this.transform(this.x, trackStartY + offsetY, this.width, trackStartHeight - offsetY);
+          this.transform(
+            this.x,
+            trackStartY + offsetY,
+            this.width,
+            trackStartHeight - offsetY
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.South: {
-          this.transform(this.x, this.y, this.width, trackStartHeight + offsetY);
+          this.transform(
+            this.x,
+            this.y,
+            this.width,
+            trackStartHeight + offsetY
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.West: {
-          this.transform(trackStartX + offsetX, this.y, trackStartWidth - offsetX, this.height);
+          this.transform(
+            trackStartX + offsetX,
+            this.y,
+            trackStartWidth - offsetX,
+            this.height
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.East: {
-          this.transform(this.x, this.y, trackStartWidth + offsetX, this.height);
+          this.transform(
+            this.x,
+            this.y,
+            trackStartWidth + offsetX,
+            this.height
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.NorthWest: {
-          this.transform(trackStartX + offsetX, trackStartY + offsetY, trackStartWidth - offsetX, trackStartHeight - offsetY);
+          this.transform(
+            trackStartX + offsetX,
+            trackStartY + offsetY,
+            trackStartWidth - offsetX,
+            trackStartHeight - offsetY
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.NorthEast: {
-          this.transform(this.x, trackStartY + offsetY, trackStartWidth + offsetX, trackStartHeight - offsetY);
+          this.transform(
+            this.x,
+            trackStartY + offsetY,
+            trackStartWidth + offsetX,
+            trackStartHeight - offsetY
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.SouthEast: {
-          this.transform(this.x, this.y, trackStartWidth + offsetX, trackStartHeight + offsetY);
+          this.transform(
+            this.x,
+            this.y,
+            trackStartWidth + offsetX,
+            trackStartHeight + offsetY
+          );
           break;
         }
         case TELE_BOX_RESIZE_HANDLE.SouthWest: {
-          this.transform(trackStartX + offsetX, this.y, trackStartWidth - offsetX, trackStartHeight + offsetY);
+          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;
         }
@@ -2232,7 +2348,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(() => {
@@ -2252,14 +2370,29 @@ 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();
@@ -2276,7 +2409,7 @@ class TeleBox {
 function noop() {
   return;
 }
-var style$2 = ".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: 1000;\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}\n\n.telebox-collector-shadow {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  pointer-events: none;\n}";
+var style$2 = "";
 var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
 class TeleBoxCollector {
   constructor({
@@ -2344,7 +2477,10 @@ class TeleBoxCollector {
     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;
@@ -2353,7 +2489,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;
@@ -2362,8 +2501,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;
@@ -2386,14 +2531,25 @@ 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);
@@ -2402,7 +2558,10 @@ class TeleBoxCollector {
   }
   destroy() {
     if (this.$collector) {
-      this.$collector.removeEventListener("click", this.handleCollectorClick);
+      this.$collector.removeEventListener(
+        "click",
+        this.handleCollectorClick
+      );
       this.$collector.remove();
       this.$collector = void 0;
     }
@@ -2412,8 +2571,7 @@ class TeleBoxCollector {
     return `${this.namespace}-${className}`;
   }
 }
-var TELE_BOX_MANAGER_EVENT;
-(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";
@@ -2431,8 +2589,9 @@ var TELE_BOX_MANAGER_EVENT;
   TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
   TELE_BOX_MANAGER_EVENT2["BoxStatus"] = "box_status";
   TELE_BOX_MANAGER_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
-})(TELE_BOX_MANAGER_EVENT || (TELE_BOX_MANAGER_EVENT = {}));
-var style$1 = ".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: 1000;\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);
@@ -2478,9 +2637,15 @@ class MaxTitleBar extends DefaultTitleBar {
           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
+              );
             }
           }
         }
@@ -2490,9 +2655,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
+              );
             }
           }
         }
@@ -2513,36 +2684,54 @@ class MaxTitleBar extends DefaultTitleBar {
       this.setBoxStatus(TELE_BOX_STATE.Maximized);
     }
     if (this.$titleBar) {
-      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), this.state === 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 === 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 === 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
+        );
       }
     }
   }
@@ -2552,9 +2741,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 === 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);
@@ -2569,23 +2768,33 @@ class MaxTitleBar extends DefaultTitleBar {
   }
   updateTitles() {
     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);
+      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);
@@ -2603,7 +2812,7 @@ class MaxTitleBar extends DefaultTitleBar {
     return this.$titles;
   }
 }
-var style = ".telebox-app-menu-app-menu-badge {\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n  width: auto;\n  height: 12px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: #fff;\n  background-color: red;\n  border-radius: 6px;\n  padding: 0 4px;\n  font-size: 12px;\n  line-height: 12px;\n  text-align: center;\n  transform: scale(0.7);\n}\n\n.telebox-app-menu-app-menu-tooltip {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  transform: translateY(-50px);\n  width: 100px;\n  height: auto;\n  display: flex;\n  flex-flow: column nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  box-shadow: 0 2px 6px #2f419226;\n  border-radius: 4px;\n  padding: 3px 0;\n  background-color: #fff;\n  pointer-events: none;\n}\n\n.telebox-app-menu-app-menu-item {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 5px 0 15px;\n  box-sizing: border-box;\n  width: 100%;\n  pointer-events: auto;\n  color: #999;\n}\n.telebox-app-menu-app-menu-item:hover {\n  background-color: #f0f0f0;\n}\n.telebox-app-menu-app-menu-item.show-all, .telebox-app-menu-app-menu-item.hidden-all {\n  padding-left: 20px;\n  pointer-events: none;\n  background-size: 15%;\n  background-position-y: center;\n  background-position-x: 2px;\n  background-repeat: no-repeat;\n}\n.telebox-app-menu-app-menu-item.active {\n  color: #333;\n  pointer-events: auto;\n}\n.telebox-app-menu-app-menu-item.hidden-all {\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);\n}\n.telebox-app-menu-app-menu-item.show-all {\n  border-top: 1px solid #ccc;\n  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);\n}\n\n.telebox-app-menu-app-menu-item-title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  line-height: 20px;\n  text-align: left;\n  height: 20px;\n  pointer-events: none;\n}";
+var style = "";
 class AppMenu {
   constructor(props) {
     this.namespace = "telebox-app-menu";
@@ -2654,7 +2863,7 @@ class AppMenu {
   }
   get boxesStatus() {
     var _a;
-    return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || new Map();
+    return ((_a = this.getBoxesStatus) == null ? void 0 : _a.call(this)) || /* @__PURE__ */ new Map();
   }
   get minimizedBoxesStatus() {
     const arr = [];
@@ -2668,6 +2877,13 @@ class AppMenu {
   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"));
@@ -2761,8 +2977,8 @@ class TeleBoxManager {
       }
       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) {
@@ -2777,12 +2993,20 @@ 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(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) {
@@ -2796,12 +3020,17 @@ 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(TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
       }
     });
-    const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : 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) {
@@ -2814,19 +3043,26 @@ 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$;
@@ -2844,10 +3080,12 @@ class TeleBoxManager {
         }, "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);
@@ -2872,7 +3110,9 @@ class TeleBoxManager {
         collectorRect$.setValue(collectorRect);
       }
     };
-    const collectorRect$ = createVal(minimized$.value ? this._calcCollectorRect() : void 0);
+    const collectorRect$ = createVal(
+      minimized$.value ? this._calcCollectorRect() : void 0
+    );
     collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
       this.boxes.forEach((box) => {
         box.setCollectorRect(collectorRect, skipUpdate);
@@ -2884,7 +3124,9 @@ class TeleBoxManager {
       if (minimized2) {
         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(TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
       }
@@ -2934,8 +3176,18 @@ class TeleBoxManager {
         }
       }
     };
-    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,
@@ -3031,7 +3283,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);
     });
@@ -3113,10 +3367,13 @@ class TeleBoxManager {
   get lastNotMinimizedBoxesStatus() {
     return this.lastNotMinimizedBoxesStatus$;
   }
-  async setBoxesStatus(boxesStatus, skipUpdate = false) {
+  setBoxesStatus(boxesStatus, skipUpdate = false) {
     this.boxesStatus$ = boxesStatus;
     this.effectBoxesStatusChange(skipUpdate);
   }
+  getBoxesStatus() {
+    return this.boxesStatus$;
+  }
   effectBoxStatusChange() {
     if (!this.useBoxesStatus) {
       return;
@@ -3222,7 +3479,7 @@ class TeleBoxManager {
     return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
   }
   getMinimizedBoxesStatus() {
-    const minimizedBoxes = new Map();
+    const minimizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Minimized) {
         minimizedBoxes.set(boxId, boxStatus);
@@ -3231,7 +3488,7 @@ class TeleBoxManager {
     return minimizedBoxes;
   }
   getNotMinimizedBoxesStatus() {
-    const notMinimizedBoxes = new Map();
+    const notMinimizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus !== TELE_BOX_STATE.Minimized) {
         notMinimizedBoxes.set(boxId, boxStatus);
@@ -3240,7 +3497,7 @@ class TeleBoxManager {
     return notMinimizedBoxes;
   }
   getAllMaximizedBoxesStatus() {
-    const maximizedBoxes = new Map();
+    const maximizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Maximized) {
         maximizedBoxes.set(boxId, boxStatus);
@@ -3249,7 +3506,7 @@ class TeleBoxManager {
     return maximizedBoxes;
   }
   getAllNormalBoxesStatus() {
-    const normalBoxes = new Map();
+    const normalBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Normal) {
         normalBoxes.set(boxId, boxStatus);
@@ -3362,9 +3619,9 @@ class TeleBoxManager {
   create(config = {}, smartPosition = true) {
     var _a;
     console.log("create===>", config, (_a = this.topBox) == null ? void 0 : _a.zIndex);
-    const box = new TeleBox(__spreadProps(__spreadValues({
-      zIndex: this.getMaxNormalBoxZIndex() + 1
-    }, 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,
@@ -3374,7 +3631,7 @@ 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) {
@@ -3590,7 +3847,10 @@ class TeleBoxManager {
             targetBox.setFocus(true, skipUpdate);
           }
           if (focusChanged && !skipUpdate) {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.Focused, targetBox);
+            this.events.emit(
+              TELE_BOX_MANAGER_EVENT.Focused,
+              targetBox
+            );
           }
         } else if (box.focus) {
           this.blurBox(box, skipUpdate);
@@ -3641,10 +3901,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);
@@ -3715,7 +3983,7 @@ class TeleBoxManager {
       }
       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.useBoxesStatus && this.topBox) {