@netless/telebox-insider 0.2.32-beta.1 → 0.3.0-beta.0

package/dist/telebox-insider.cjs.js

@@ -1230,6 +1230,8 @@ exports.TELE_BOX_EVENT = void 0;
   TELE_BOX_EVENT2["Maximized"] = "maximized";
   TELE_BOX_EVENT2["Readonly"] = "readonly";
   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) {
@@ -1282,7 +1284,8 @@ class DefaultTitleBar {
     onEvent,
     onDragStart,
     namespace = "telebox",
-    state = exports.TELE_BOX_STATE.Normal
+    state = exports.TELE_BOX_STATE.Normal,
+    boxStatus
   } = {}) {
     this.$btns = [];
     this.sideEffect = new o();
@@ -1355,6 +1358,7 @@ class DefaultTitleBar {
     this.namespace = namespace;
     this.title = title;
     this.state = state;
+    this.boxStatus = boxStatus;
     this.buttons = buttons || [
       {
         type: exports.TELE_BOX_DELEGATE_EVENT.Minimize,
@@ -1389,6 +1393,18 @@ class DefaultTitleBar {
       });
     }
   }
+  setBoxStatus(boxStatus) {
+    if (this.boxStatus !== boxStatus) {
+      this.boxStatus = boxStatus;
+      if (boxStatus) {
+        this.buttons.forEach((btn, i2) => {
+          if (btn.isActive) {
+            this.$btns[i2].classList.toggle("is-active", btn.isActive(boxStatus));
+          }
+        });
+      }
+    }
+  }
   setReadonly(readonly) {
     if (this.readonly !== readonly) {
       this.readonly = readonly;
@@ -1419,7 +1435,7 @@ class DefaultTitleBar {
         $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
         $btn.dataset.teleTitleBarNoDblClick = "true";
         if (isActive) {
-          $btn.classList.toggle("is-active", isActive(this.state));
+          $btn.classList.toggle("is-active", isActive(this.boxStatus || this.state));
         }
         this.$btns.push($btn);
         $buttonsContainer.appendChild($btn);
@@ -1505,7 +1521,9 @@ class TeleBox {
       width: window.innerWidth,
       height: window.innerHeight
     },
-    collectorRect
+    collectorRect,
+    boxStatus,
+    lastNotMinimizedBoxStatus
   } = {}) {
     this._renderSideEffect = new o();
     this.handleTrackStart = (ev) => {
@@ -1519,6 +1537,8 @@ class TeleBox {
     this.namespace = namespace;
     this.events = new EventEmitter();
     this._delegateEvents = new EventEmitter();
+    const boxStatus$ = createVal(boxStatus);
+    const lastNotMinimizedBoxStatus$ = createVal(lastNotMinimizedBoxStatus);
     const prefersColorScheme$ = createVal(prefersColorScheme);
     prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
       if (!skipUpdate) {
@@ -1601,7 +1621,7 @@ class TeleBox {
         this.events.emit(exports.TELE_BOX_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$, boxStatus$], ([minimized2, maximized2, boxStatus2]) => minimized2 ? exports.TELE_BOX_STATE.Minimized : maximized2 ? exports.TELE_BOX_STATE.Maximized : !boxStatus2 ? exports.TELE_BOX_STATE.Normal : boxStatus2);
     state$.reaction((state, _, skipUpdate) => {
       if (!skipUpdate) {
         this.events.emit(exports.TELE_BOX_EVENT.State, state);
@@ -1626,8 +1646,8 @@ class TeleBox {
         this.events.emit(exports.TELE_BOX_EVENT.IntrinsicResize, size);
       }
     });
-    const size$ = combine([intrinsicSize$, maximized$], ([intrinsicSize, maximized2]) => {
-      if (maximized2) {
+    const size$ = combine([intrinsicSize$, maximized$, boxStatus$], ([intrinsicSize, maximized2, boxStatus2]) => {
+      if (maximized2 || boxStatus2 === exports.TELE_BOX_STATE.Maximized) {
         return { width: 1, height: 1 };
       }
       return intrinsicSize;
@@ -1637,8 +1657,8 @@ class TeleBox {
         this.events.emit(exports.TELE_BOX_EVENT.Resize, size);
       }
     });
-    const visualSize$ = combine([size$, minimized$, containerRect$, collectorRect$], ([size, minimized2, containerRect2, collectorRect2]) => {
-      if (minimized2 && collectorRect2) {
+    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
@@ -1663,17 +1683,21 @@ class TeleBox {
       containerRect$,
       collectorRect$,
       minimized$,
-      maximized$
+      maximized$,
+      boxStatus$,
+      lastNotMinimizedBoxStatus$
     ], ([
       intrinsicCoord,
       intrinsicSize,
       containerRect2,
       collectorRect2,
       minimized2,
-      maximized2
+      maximized2,
+      boxStatus2,
+      lastNotMinimizedBoxStatus2
     ]) => {
-      if (minimized2 && collectorRect2) {
-        if (maximized2) {
+      if ((minimized2 || boxStatus2 === exports.TELE_BOX_STATE.Minimized) && collectorRect2) {
+        if (maximized2 || lastNotMinimizedBoxStatus2 === exports.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
@@ -1684,7 +1708,7 @@ class TeleBox {
           y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - intrinsicSize.height / 2
         };
       }
-      if (maximized2) {
+      if (maximized2 || boxStatus2 === exports.TELE_BOX_STATE.Maximized) {
         return { x: 0, y: 0 };
       }
       return intrinsicCoord;
@@ -1698,6 +1722,7 @@ class TeleBox {
       readonly: readonly$.value,
       title: title$.value,
       namespace: this.namespace,
+      boxStatus: boxStatus$.value,
       onDragStart: (event) => {
         var _a;
         return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
@@ -1708,11 +1733,15 @@ class TeleBox {
         } else {
           switch (event.type) {
             case exports.TELE_BOX_DELEGATE_EVENT.Maximize: {
-              maximized$.setValue(!maximized$.value);
+              if (!boxStatus$.value) {
+                maximized$.setValue(!maximized$.value);
+              }
               break;
             }
             case exports.TELE_BOX_DELEGATE_EVENT.Minimize: {
-              minimized$.setValue(true);
+              if (!boxStatus$.value) {
+                minimized$.setValue(true);
+              }
               break;
             }
             case exports.TELE_BOX_DELEGATE_EVENT.Close: {
@@ -1730,6 +1759,9 @@ class TeleBox {
     readonly$.reaction((readonly2) => {
       this.titleBar.setReadonly(readonly2);
     });
+    boxStatus$.reaction((boxStatus2) => {
+      this.titleBar.setBoxStatus(boxStatus2);
+    });
     const $userContent$ = createVal(content);
     const $userFooter$ = createVal(footer);
     const $userStyles$ = createVal(styles);
@@ -1761,11 +1793,22 @@ class TeleBox {
     this._visualSize$ = visualSize$;
     this._coord$ = coord$;
     this._intrinsicCoord$ = intrinsicCoord$;
+    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.$box = this.render();
   }
+  get boxStatus() {
+    return this._boxStatus$.value;
+  }
+  set boxStatus(boxStatus) {
+    this._boxStatus$.setValue(boxStatus);
+  }
+  get lastNotMinimizedBoxStatus() {
+    return this._lastNotMinimizedBoxStatus$.value;
+  }
   get darkMode() {
     return this._darkMode$.value;
   }
@@ -1792,6 +1835,27 @@ 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) {
+        this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
+      }
+    } else {
+      this.setLastNotMinimizedBoxStatus(void 0, skipUpdate);
+    }
+    this._boxStatus$.setValue(boxStatus, skipUpdate);
+    if (!skipUpdate) {
+      this.events.emit(exports.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 });
+    }
+    return this;
+  }
   get minWidth() {
     return this._minSize$.value.width;
   }
@@ -1986,17 +2050,18 @@ class TeleBox {
       this._size$,
       this._minimized$,
       this._containerRect$,
-      this._collectorRect$
-    ], ([coord, size, minimized, containerRect, collectorRect]) => {
+      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 && collectorRect ? 1 : 0),
-        height: absoluteHeight + (minimized && collectorRect ? 1 : 0),
+        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 && collectorRect ? collectorRect.width / absoluteWidth : 1,
-        scaleY: minimized && collectorRect ? collectorRect.height / absoluteHeight : 1
+        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) => {
       boxStyler.set(styles);
@@ -2343,6 +2408,8 @@ exports.TELE_BOX_MANAGER_EVENT = void 0;
   TELE_BOX_MANAGER_EVENT2["ZIndex"] = "z_index";
   TELE_BOX_MANAGER_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
   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}";
 class MaxTitleBar extends DefaultTitleBar {
@@ -2352,22 +2419,50 @@ class MaxTitleBar extends DefaultTitleBar {
     this.focusedBox = config.focusedBox;
     this.containerRect = config.containerRect;
     this.darkMode = config.darkMode;
+    this.boxesStatus = config.boxesStatus;
+  }
+  hasMaximizedBoxInStatus() {
+    if (!this.boxesStatus || this.boxesStatus.size === 0) {
+      return false;
+    }
+    const hasMaximizedBox = [...this.boxesStatus.values()].find((state) => state === exports.TELE_BOX_STATE.Maximized);
+    return !!hasMaximizedBox;
+  }
+  get MaximizedBoxes() {
+    if (!this.boxesStatus || this.boxesStatus.size === 0) {
+      return [];
+    }
+    return this.boxes.filter((box) => this.boxesStatus && this.boxesStatus.get(box.id) === exports.TELE_BOX_STATE.Maximized);
   }
   focusBox(box) {
-    var _a;
+    var _a, _b;
     if (this.focusedBox && this.focusedBox === box) {
       return;
     }
-    if (this.$titles && this.state === exports.TELE_BOX_STATE.Maximized) {
+    if (this.$titles) {
       const { children } = this.$titles.firstElementChild;
-      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);
-          } else if (this.focusedBox && id === this.focusedBox.id) {
-            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+      if (this.state === exports.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);
+            } else if (this.focusedBox && id === this.focusedBox.id) {
+              $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+            }
+          }
+        }
+      } else if (this.hasMaximizedBoxInStatus()) {
+        for (let i2 = children.length - 1; i2 >= 0; i2 -= 1) {
+          const $tab = children[i2];
+          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);
+            } else if (this.focusedBox && id === this.focusedBox.id) {
+              $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+            }
           }
         }
       }
@@ -2382,17 +2477,27 @@ class MaxTitleBar extends DefaultTitleBar {
       this.$titleBar.style.width = width + "px";
     }
   }
+  setBoxesStatus(boxesStatus) {
+    this.boxesStatus = boxesStatus;
+    if (this.hasMaximizedBoxInStatus()) {
+      this.setBoxStatus(exports.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.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.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), this.state === exports.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.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), state === exports.TELE_BOX_STATE.Maximized && this.boxes.length > 0 || this.hasMaximizedBoxInStatus());
     }
     this.updateTitles();
   }
@@ -2433,9 +2538,9 @@ class MaxTitleBar extends DefaultTitleBar {
     this.focusedBox = void 0;
   }
   updateTitles() {
-    if (this.$titleBar && this.state === exports.TELE_BOX_STATE.Maximized) {
-      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-single-title"), this.boxes.length === 1);
-      if (this.boxes.length === 1) {
+    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.boxes.length === 1 || this.hasMaximizedBoxInStatus() && this.MaximizedBoxes.length === 1) {
         this.setTitle(this.boxes[0].title);
       } else {
         this.$titleBar.replaceChild(this.renderTitles(), this.$titleBar.firstElementChild);
@@ -2454,7 +2559,7 @@ class MaxTitleBar extends DefaultTitleBar {
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("titles-content");
     this.$titles.appendChild($content);
-    this.boxes.forEach((box) => {
+    (this.hasMaximizedBoxInStatus() ? this.MaximizedBoxes : this.boxes).forEach((box) => {
       const $tab = document.createElement("button");
       $tab.className = this.wrapClassName("titles-tab");
       $tab.textContent = box.title;
@@ -2493,11 +2598,18 @@ class TeleBoxManager {
     this.boxes$ = createVal([]);
     this.topBox$ = this.boxes$.derive((boxes) => {
       if (boxes.length > 0) {
-        const topBox = boxes.reduce((topBox2, box) => topBox2.zIndex > box.zIndex ? topBox2 : box);
+        const topBox = boxes.reduce((topBox2, box) => {
+          if (box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized) {
+            return topBox2;
+          }
+          return topBox2.zIndex > box.zIndex ? topBox2 : box;
+        });
         return topBox;
       }
       return;
     });
+    this.boxesStatus$ = new Map();
+    this.lastNotMinimizedBoxesStatus$ = new Map();
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
     const prefersDark$ = createVal(false);
     if (prefersDark) {
@@ -2565,6 +2677,16 @@ class TeleBoxManager {
         this._sideEffect.add(() => {
           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);
+                  }
+                });
+              }
               minimized$.setValue(false);
             }
           };
@@ -2580,7 +2702,7 @@ class TeleBoxManager {
       var _a;
       (_a = collector$.value) == null ? void 0 : _a.setDarkMode(darkMode);
     });
-    const calcCollectorRect = () => {
+    this._calcCollectorRect = () => {
       var _a;
       if ((_a = collector$.value) == null ? void 0 : _a.$collector) {
         const { x, y, width, height } = collector$.value.$collector.getBoundingClientRect();
@@ -2594,7 +2716,7 @@ class TeleBoxManager {
       }
       return;
     };
-    const collectorRect$ = createVal(minimized$.value ? calcCollectorRect() : void 0);
+    const collectorRect$ = createVal(minimized$.value ? this._calcCollectorRect() : void 0);
     collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
       this.boxes.forEach((box) => {
         box.setCollectorRect(collectorRect, skipUpdate);
@@ -2605,7 +2727,7 @@ class TeleBoxManager {
       (_a = collector$.value) == null ? void 0 : _a.setVisible(minimized2);
       if (minimized2) {
         if ((_b = collector$.value) == null ? void 0 : _b.$collector) {
-          collectorRect$.setValue(calcCollectorRect());
+          collectorRect$.setValue(this._calcCollectorRect());
         }
       }
       this.boxes.forEach((box) => box.setMinimized(minimized2, skipUpdate));
@@ -2632,7 +2754,9 @@ class TeleBoxManager {
           const box = this.getBox(id);
           if (box) {
             this.focusBox(box);
-            this.makeBoxTop(box);
+            if (box.boxStatus && box.boxStatus !== exports.TELE_BOX_STATE.Maximized || !box.boxStatus) {
+              this.makeBoxTop(box);
+            }
             return;
           }
         }
@@ -2647,19 +2771,36 @@ class TeleBoxManager {
       state: state$.value,
       boxes: this.boxes$.value,
       containerRect: containerRect$.value,
+      boxesStatus: this.boxesStatus$,
       onEvent: (event) => {
+        var _a, _b, _c;
         switch (event.type) {
           case exports.TELE_BOX_DELEGATE_EVENT.Maximize: {
-            maximized$.setValue(!maximized$.value);
+            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();
+            } else {
+              maximized$.setValue(!maximized$.value);
+            }
             break;
           }
           case exports.TELE_BOX_DELEGATE_EVENT.Minimize: {
-            minimized$.setValue(true);
+            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();
+            } else {
+              minimized$.setValue(true);
+            }
             break;
           }
           case exports.TELE_BOX_EVENT.Close: {
-            this.removeTopBox();
-            this.focusTopBox();
+            if (this.hasBoxesStatus() && ((_c = this.maxTitleBar.focusedBox) == null ? void 0 : _c.id)) {
+              this.remove(this.maxTitleBar.focusedBox.id);
+              this.makeMaximizedTopBoxFocus();
+            } else {
+              this.removeTopBox();
+              this.focusTopBox();
+            }
             break;
           }
         }
@@ -2718,6 +2859,89 @@ 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) {
+        this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
+      } else if (oldBoxStatus === exports.TELE_BOX_STATE.Minimized && boxStatus !== exports.TELE_BOX_STATE.Minimized) {
+        this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
+      }
+    } else {
+      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 });
+    }
+  }
+  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.boxes.forEach((box) => {
+      var _a2;
+      const boxStatus = 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;
+        }
+        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());
+      }
+    } else {
+      (_d = this.collector) == null ? void 0 : _d.setVisible(false);
+    }
+    if (topBox && topBoxId !== topBox.id) {
+      this.makeBoxTop(topBox, skipUpdate);
+      this.focusTopBox();
+      this.topBox$.setValue(topBox);
+    }
+    if (this.maxTitleBar) {
+      this.maxTitleBar.setBoxesStatus(boxesStatus);
+    }
+  }
+  hasBoxesStatus() {
+    return this.boxesStatus$.size > 0;
+  }
+  hasMinimizedBox() {
+    return this.boxes.some((box) => box.boxStatus && box.boxStatus === exports.TELE_BOX_STATE.Minimized);
+  }
+  setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
+    const boxesStatus = this.lastNotMinimizedBoxesStatus$;
+    if (lastNotMinimizedBoxStatus) {
+      boxesStatus.set(boxId, lastNotMinimizedBoxStatus);
+    } else {
+      boxesStatus.delete(boxId);
+    }
+    this.setLastNotMinimizedBoxesStatus(boxesStatus, skipUpdate);
+    if (!skipUpdate) {
+      this.events.emit(exports.TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus: lastNotMinimizedBoxStatus });
+    }
+  }
+  setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus, skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      const boxStatus = 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);
+  }
   create(config = {}, smartPosition = true) {
     const box = new TeleBox(__spreadProps(__spreadValues({
       zIndex: this.topBox ? this.topBox.zIndex + 1 : 100
@@ -2740,11 +2964,38 @@ class TeleBoxManager {
       }
     }
     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, () => {
-      this.setMaximized(!this.maximized);
+      if (box.boxStatus) {
+        if (box.boxStatus === exports.TELE_BOX_STATE.Maximized) {
+          this.setBoxStatus(box.id, exports.TELE_BOX_STATE.Normal);
+        } else {
+          this.boxes.forEach((box2) => {
+            if (box2.boxStatus !== exports.TELE_BOX_STATE.Maximized) {
+              this.setBoxStatus(box2.id, exports.TELE_BOX_STATE.Maximized);
+            }
+          });
+        }
+        this.makeMaximizedTopBoxFocus();
+      } else {
+        this.setMaximized(!this.maximized);
+      }
     });
     box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize, () => {
-      this.setMinimized(true);
+      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();
+        }
+      } else {
+        this.setMinimized(true);
+      }
     });
     box._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Close, () => {
       this.remove(box);
@@ -2777,7 +3028,12 @@ class TeleBoxManager {
     });
     box._zIndex$.reaction((_, __, skipUpdate) => {
       if (this.boxes.length > 0) {
-        const topBox = this.boxes.reduce((topBox2, box2) => topBox2.zIndex > box2.zIndex ? topBox2 : box2);
+        const topBox = this.boxes.reduce((topBox2, box2) => {
+          if (box2.boxStatus && box2.boxStatus === exports.TELE_BOX_STATE.Minimized) {
+            return topBox2;
+          }
+          return topBox2.zIndex > box2.zIndex ? topBox2 : box2;
+        });
         this.topBox$.setValue(topBox);
       }
       if (!skipUpdate) {
@@ -2805,12 +3061,17 @@ class TeleBoxManager {
     });
   }
   remove(boxOrID, skipUpdate = false) {
+    const box = this.getBox(boxOrID);
+    if (box) {
+      this.setBoxStatus(box.id, void 0, skipUpdate);
+      this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
+    }
     const index2 = this.getBoxIndex(boxOrID);
     if (index2 >= 0) {
       const boxes = this.boxes.slice();
       const deletedBoxes = boxes.splice(index2, 1);
       this.boxes$.setValue(boxes);
-      deletedBoxes.forEach((box) => box.destroy());
+      deletedBoxes.forEach((box2) => box2.destroy());
       if (!skipUpdate) {
         if (this.boxes.length <= 0) {
           this.setMaximized(false);
@@ -2832,6 +3093,8 @@ class TeleBoxManager {
     const deletedBoxes = this.boxes$.value;
     this.boxes$.setValue([]);
     deletedBoxes.forEach((box) => box.destroy());
+    this.boxesStatus$.clear();
+    this.lastNotMinimizedBoxesStatus$.clear();
     if (!skipUpdate) {
       if (this.boxes.length <= 0) {
         this.setMaximized(false);
@@ -2872,7 +3135,11 @@ class TeleBoxManager {
           this.blurBox(box, skipUpdate);
         }
       });
-      this.maxTitleBar.focusBox(targetBox);
+      if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
+        this.makeMaximizedBoxFocus(targetBox);
+      } else {
+        this.maxTitleBar.focusBox(targetBox);
+      }
     }
   }
   focusTopBox() {
@@ -2890,7 +3157,11 @@ class TeleBoxManager {
         }
       }
       if (this.maxTitleBar.focusedBox === targetBox) {
-        this.maxTitleBar.focusBox();
+        if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
+          this.makeMaximizedTopBoxFocus();
+        } else {
+          this.maxTitleBar.focusBox();
+        }
       }
     }
   }
@@ -2904,7 +3175,11 @@ class TeleBoxManager {
       }
     });
     if (this.maxTitleBar.focusedBox) {
-      this.maxTitleBar.focusBox();
+      if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
+        this.makeMaximizedBoxBlur();
+      } else {
+        this.maxTitleBar.focusBox();
+      }
     }
   }
   teleBoxMatcher(config) {
@@ -2949,6 +3224,12 @@ 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);
+    }
   }
   smartPosition(config = {}) {
     let { x, y } = config;
@@ -2978,10 +3259,62 @@ class TeleBoxManager {
   makeBoxTop(box, skipUpdate = false) {
     if (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);
+      }
+    }
+  }
+  makeMaximizedTopBoxFocus() {
+    let maximizedBox;
+    if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
+      maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
+        if (!topBox) {
+          return currentBox;
+        }
+        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);
+        }
+      });
+    }
+  }
+  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);
     }
   }
+  makeMaximizedBoxBlur() {
+    this.maxTitleBar.focusBox();
+  }
   getBoxIndex(boxOrID) {
     return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
   }