@netless/telebox-insider 0.3.0-beta.9 → 0.3.1-beta.0

package/dist/telebox-insider.es.js

@@ -1183,6 +1183,8 @@ var TELE_BOX_EVENT = /* @__PURE__ */ ((TELE_BOX_EVENT2) => {
   TELE_BOX_EVENT2["Destroyed"] = "destroyed";
   TELE_BOX_EVENT2["BoxStatus"] = "box_status";
   TELE_BOX_EVENT2["LastNotMinimizedBoxStatus"] = "last_not_minimized_box_status";
+  TELE_BOX_EVENT2["ForceTop"] = "force_top";
+  TELE_BOX_EVENT2["ForceNormal"] = "force_normal";
   return TELE_BOX_EVENT2;
 })(TELE_BOX_EVENT || {});
 var TELE_BOX_DELEGATE_EVENT = /* @__PURE__ */ ((TELE_BOX_DELEGATE_EVENT2) => {
@@ -1237,7 +1239,10 @@ class DefaultTitleBar {
     onDragStart,
     namespace = "telebox",
     state = TELE_BOX_STATE.Normal,
-    boxStatus
+    boxStatus,
+    forceTop = false,
+    forceNormal = false,
+    forceMaximized = false
   } = {}) {
     this.$btns = [];
     this.sideEffect = new o();
@@ -1261,7 +1266,7 @@ class DefaultTitleBar {
       const now = Date.now();
       if (now - this.lastTitleBarClick.timestamp <= 500) {
         if (Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5) {
-          if (this.onEvent) {
+          if (this.onEvent && !this.forceMaximized) {
             this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
           }
         }
@@ -1293,7 +1298,7 @@ class DefaultTitleBar {
       } = ev.touches[0] || {};
       if (now - this.lastTitleBarTouch.timestamp <= 500) {
         if (Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10) {
-          if (this.onEvent) {
+          if (this.onEvent && !this.forceMaximized) {
             this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
           }
         }
@@ -1311,21 +1316,37 @@ class DefaultTitleBar {
     this.title = title;
     this.state = state;
     this.boxStatus = boxStatus;
-    this.buttons = buttons || [
+    this.forceTop = forceTop;
+    this.forceNormal = forceNormal;
+    this.forceMaximized = forceMaximized;
+    this.buttons = buttons || (forceNormal ? [
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Close,
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-close"
+        )
+      }
+    ] : [
       {
         type: TELE_BOX_DELEGATE_EVENT.Minimize,
-        iconClassName: this.wrapClassName("titlebar-icon-minimize")
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-minimize"
+        )
       },
       {
         type: TELE_BOX_DELEGATE_EVENT.Maximize,
-        iconClassName: this.wrapClassName("titlebar-icon-maximize"),
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-maximize"
+        ),
         isActive: (state2) => state2 === TELE_BOX_STATE.Maximized
       },
       {
         type: TELE_BOX_DELEGATE_EVENT.Close,
-        iconClassName: this.wrapClassName("titlebar-icon-close")
+        iconClassName: this.wrapClassName(
+          "titlebar-icon-close"
+        )
       }
-    ];
+    ]);
     this.$dragArea = this.renderDragArea();
   }
   setTitle(title) {
@@ -1368,6 +1389,20 @@ class DefaultTitleBar {
       this.readonly = readonly;
     }
   }
+  setForceMaximized(forceMaximized) {
+    this.forceMaximized = forceMaximized;
+    this.$btns.forEach((button, index2) => {
+      var _a;
+      if (((_a = this.buttons[index2]) == null ? void 0 : _a.type) === TELE_BOX_DELEGATE_EVENT.Maximize) {
+        button.disabled = forceMaximized;
+        button.setAttribute("aria-disabled", String(forceMaximized));
+        button.classList.toggle(
+          this.wrapClassName("disabled"),
+          forceMaximized
+        );
+      }
+    });
+  }
   render() {
     if (!this.$titleBar) {
       this.$titleBar = document.createElement("div");
@@ -1395,7 +1430,10 @@ class DefaultTitleBar {
         $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
         $btn.dataset.teleTitleBarNoDblClick = "true";
         if (isActive) {
-          $btn.classList.toggle("is-active", isActive(this.boxStatus || this.state));
+          $btn.classList.toggle(
+            "is-active",
+            isActive(this.boxStatus || this.state)
+          );
         }
         this.$btns.push($btn);
         $buttonsContainer.appendChild($btn);
@@ -1415,6 +1453,9 @@ class DefaultTitleBar {
           if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
             preventEvent(ev);
             const btn = this.buttons[teleTitleBarBtnIndex];
+            if (this.forceMaximized && btn.type === TELE_BOX_DELEGATE_EVENT.Maximize) {
+              return;
+            }
             if (this.onEvent) {
               this.onEvent({
                 type: btn.type,
@@ -1426,6 +1467,7 @@ class DefaultTitleBar {
       );
       this.$titleBar.appendChild($titleArea);
       this.$titleBar.appendChild($buttonsContainer);
+      this.setForceMaximized(Boolean(this.forceMaximized));
     }
     return this.$titleBar;
   }
@@ -1498,7 +1540,11 @@ class TeleBox {
     },
     collectorRect,
     boxStatus,
-    lastNotMinimizedBoxStatus
+    lastNotMinimizedBoxStatus,
+    forceTop = false,
+    forceNormal = false,
+    forceMaximized = false,
+    isDragContent = false
   } = {}) {
     this._renderSideEffect = new o();
     this.handleTrackStart = (ev) => {
@@ -1512,7 +1558,9 @@ class TeleBox {
     this.namespace = namespace;
     this.events = new EventEmitter();
     this._delegateEvents = new EventEmitter();
-    const boxStatus$ = createVal(boxStatus);
+    const boxStatus$ = createVal(
+      boxStatus
+    );
     const lastNotMinimizedBoxStatus$ = createVal(lastNotMinimizedBoxStatus);
     const prefersColorScheme$ = createVal(
       prefersColorScheme
@@ -1565,6 +1613,23 @@ class TeleBox {
     });
     const containerRect$ = createVal(containerRect, shallowequal);
     const collectorRect$ = createVal(collectorRect, shallowequal);
+    const forceTop$ = createVal(forceTop);
+    forceTop$.reaction((forceTop2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.ForceTop, forceTop2 || false);
+      }
+    });
+    const forceNormal$ = createVal(forceNormal);
+    const forceMaximized$ = createVal(forceMaximized);
+    forceNormal$.reaction((forceNormal2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(
+          TELE_BOX_EVENT.ForceNormal,
+          forceNormal2 || false
+        );
+      }
+    });
+    const isDragContent$ = createVal(isDragContent);
     const title$ = createVal(title);
     title$.reaction((title2, _, skipUpdate) => {
       if (!skipUpdate) {
@@ -1742,6 +1807,9 @@ class TeleBox {
       title: title$.value,
       namespace: this.namespace,
       boxStatus: boxStatus$.value,
+      forceTop: forceTop$.value,
+      forceNormal: forceNormal$.value,
+      forceMaximized: forceMaximized$.value,
       onDragStart: (event) => {
         var _a;
         return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
@@ -1752,7 +1820,7 @@ class TeleBox {
         } else {
           switch (event.type) {
             case TELE_BOX_DELEGATE_EVENT.Maximize: {
-              if (!boxStatus$.value) {
+              if (!boxStatus$.value && !(forceMaximized$.value && maximized$.value)) {
                 maximized$.setValue(!maximized$.value);
               }
               break;
@@ -1781,6 +1849,9 @@ class TeleBox {
     readonly$.reaction((readonly2) => {
       this.titleBar.setReadonly(readonly2);
     });
+    forceMaximized$.reaction((forceMaximized2) => {
+      this.titleBar.setForceMaximized(forceMaximized2);
+    });
     boxStatus$.reaction((boxStatus2) => {
       this.titleBar.setBoxStatus(boxStatus2);
     });
@@ -1805,7 +1876,11 @@ class TeleBox {
       maximized: maximized$,
       $userContent: $userContent$,
       $userFooter: $userFooter$,
-      $userStyles: $userStyles$
+      $userStyles: $userStyles$,
+      forceTop: forceTop$,
+      forceNormal: forceNormal$,
+      forceMaximized: forceMaximized$,
+      isDragContent: isDragContent$
     };
     i(this, valConfig);
     this._state$ = state$;
@@ -1866,21 +1941,33 @@ class TeleBox {
   setBoxStatus(boxStatus, skipUpdate = false) {
     if (boxStatus === TELE_BOX_STATE.Minimized) {
       if (this._boxStatus$.value && this._boxStatus$.value !== TELE_BOX_STATE.Minimized) {
-        this.setLastNotMinimizedBoxStatus(this._boxStatus$.value, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          this._boxStatus$.value,
+          skipUpdate
+        );
       }
     } else {
       this.setLastNotMinimizedBoxStatus(void 0, skipUpdate);
     }
     this._boxStatus$.setValue(boxStatus, skipUpdate);
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_EVENT.BoxStatus, { id: this.id, boxStatus });
+      this.events.emit(TELE_BOX_EVENT.BoxStatus, {
+        id: this.id,
+        boxStatus
+      });
     }
     return this;
   }
   setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate = false) {
-    this._lastNotMinimizedBoxStatus$.setValue(lastNotMinimizedBoxStatus, skipUpdate);
+    this._lastNotMinimizedBoxStatus$.setValue(
+      lastNotMinimizedBoxStatus,
+      skipUpdate
+    );
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, { id: this.id, lastNotMinimizedBoxStatus });
+      this.events.emit(TELE_BOX_EVENT.LastNotMinimizedBoxStatus, {
+        id: this.id,
+        lastNotMinimizedBoxStatus
+      });
     }
     return this;
   }
@@ -2113,7 +2200,14 @@ class TeleBox {
         this._collectorRect$,
         this._boxStatus$
       ],
-      ([coord, size, minimized, containerRect, collectorRect, boxStatus]) => {
+      ([
+        coord,
+        size,
+        minimized,
+        containerRect,
+        collectorRect,
+        boxStatus
+      ]) => {
         const absoluteWidth = size.width * containerRect.width;
         const absoluteHeight = size.height * containerRect.height;
         return {
@@ -2142,6 +2236,9 @@ class TeleBox {
     const $content = document.createElement("div");
     $content.className = this.wrapClassName("content") + " tele-fancy-scrollbar";
     this.$content = $content;
+    if (this.isDragContent) {
+      this.$content.appendChild(this.titleBar.$dragArea);
+    }
     this._renderSideEffect.add(() => {
       let last$userStyles;
       return this._$userStyles$.subscribe(($userStyles) => {
@@ -2571,6 +2668,7 @@ class TeleBoxCollector {
     return `${this.namespace}-${className}`;
   }
 }
+TeleBoxCollector.kind = "TeleBoxCollector";
 var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
   TELE_BOX_MANAGER_EVENT2["Focused"] = "focused";
   TELE_BOX_MANAGER_EVENT2["Blurred"] = "blurred";
@@ -2619,7 +2717,7 @@ class MaxTitleBar extends DefaultTitleBar {
     if (this.getBoxesStatus) {
       const boxesStatus = this.getBoxesStatus();
       if (boxesStatus) {
-        return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized);
+        return this.boxes.filter((box) => boxesStatus && boxesStatus.get(box.id) === TELE_BOX_STATE.Maximized && !box.forceTop);
       }
     }
     return [];
@@ -2898,7 +2996,6 @@ class AppMenu {
   createMinimizedItem(appId) {
     const appItem = document.createElement("div");
     appItem.classList.add(this.c("app-menu-item"));
-    console.log("appId=====>", appId);
     appItem.setAttribute(`data-${this.c("app-id")}`, appId);
     const titleDiv = document.createElement("div");
     titleDiv.classList.add(this.c("app-menu-item-title"));
@@ -2949,6 +3046,7 @@ class TeleBoxManager {
     collector,
     namespace = "telebox",
     readonly = false,
+    forceMaximized = false,
     useBoxesStatus = false
   } = {}) {
     this.events = new EventEmitter();
@@ -2960,9 +3058,11 @@ class TeleBoxManager {
     this.boxes$ = createVal([]);
     this.topBox$ = this.boxes$.derive((boxes) => {
       if (boxes.length > 0) {
-        console.log("topBox===>topBox$===>000");
         let currentTopBox = void 0;
         const topBox = boxes.reduce((topBox2, box) => {
+          if (box.forceTop) {
+            return topBox2;
+          }
           if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
             return topBox2;
           }
@@ -2972,7 +3072,6 @@ class TeleBoxManager {
           }
           return topBox2.zIndex > box.zIndex ? topBox2 : box;
         }, currentTopBox);
-        console.log("topBox===>topBox$===>end", topBox == null ? void 0 : topBox.id);
         return topBox;
       }
       return;
@@ -3019,6 +3118,14 @@ class TeleBoxManager {
     });
     const minimized$ = createVal(minimized);
     const maximized$ = createVal(maximized);
+    const forceMaximized$ = createVal(forceMaximized);
+    forceMaximized$.reaction((forceMaximized2, _, skipUpdate) => {
+      var _a;
+      this.boxes.forEach(
+        (box) => box.setForceMaximized(forceMaximized2, skipUpdate)
+      );
+      (_a = this.maxTitleBar) == null ? void 0 : _a.setForceMaximized(forceMaximized2);
+    });
     maximized$.reaction((maximized2, _, skipUpdate) => {
       this.boxes.forEach(
         (box) => box.setMaximized(maximized2, skipUpdate)
@@ -3155,21 +3262,28 @@ class TeleBoxManager {
               if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
                 const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
                 if (maxNormalBoxZIndex > box.zIndex) {
-                  this.setBox(box, {
-                    zIndex: maxNormalBoxZIndex + 1
-                  }, false);
+                  this.setBox(
+                    box,
+                    {
+                      zIndex: maxNormalBoxZIndex + 1
+                    },
+                    false
+                  );
                 }
               } else if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
                 const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
                 if (maxMaximizedBoxZIndex > box.zIndex) {
-                  this.setBox(box, {
-                    zIndex: maxMaximizedBoxZIndex + 1
-                  }, false);
+                  this.setBox(
+                    box,
+                    {
+                      zIndex: maxMaximizedBoxZIndex + 1
+                    },
+                    false
+                  );
                 }
                 this.makeMaximizedTopBoxFocus();
               }
             }
-            console.log("checkFocusBox===>", box.id);
             this.focusBox(box);
             return;
           }
@@ -3193,6 +3307,7 @@ class TeleBoxManager {
       readonly: readonly$.value,
       namespace: this.namespace,
       state: state$.value,
+      forceMaximized: forceMaximized$.value,
       boxes: this.boxes$.value,
       containerRect: containerRect$.value,
       getBoxesStatus: () => {
@@ -3201,6 +3316,9 @@ class TeleBoxManager {
       onEvent: (event) => {
         switch (event.type) {
           case TELE_BOX_DELEGATE_EVENT.Maximize: {
+            if (forceMaximized$.value && this.state === TELE_BOX_STATE.Maximized) {
+              return;
+            }
             if (this.hasBoxesStatus()) {
               let targetBox = this.maxTitleBar.focusedBox;
               if (!targetBox) {
@@ -3209,12 +3327,17 @@ class TeleBoxManager {
               if (targetBox == null ? void 0 : targetBox.id) {
                 const box = this.getBox(targetBox.id);
                 if (box) {
-                  this.setBox(box, {
-                    status: TELE_BOX_STATE.Normal,
-                    zIndex: this.getMaxNormalBoxZIndex() + 1
-                  }, false, () => {
-                    this.makeMaximizedTopBoxFocus();
-                  });
+                  this.setBox(
+                    box,
+                    {
+                      status: TELE_BOX_STATE.Normal,
+                      zIndex: this.getMaxNormalBoxZIndex() + 1
+                    },
+                    false,
+                    () => {
+                      this.makeMaximizedTopBoxFocus();
+                    }
+                  );
                 }
               }
             } else {
@@ -3236,10 +3359,14 @@ class TeleBoxManager {
                     this.blurBox(box);
                     isFocusChanged = true;
                   }
-                  this.setBox(box, {
-                    status: TELE_BOX_STATE.Minimized,
-                    zIndex: -1
-                  }, false);
+                  this.setBox(
+                    box,
+                    {
+                      status: TELE_BOX_STATE.Minimized,
+                      zIndex: -1
+                    },
+                    false
+                  );
                   if (isFocusChanged) {
                     this.focusTopBox();
                   } else {
@@ -3300,7 +3427,8 @@ class TeleBoxManager {
       readonly: readonly$,
       fence: fence$,
       minimized: minimized$,
-      maximized: maximized$
+      maximized: maximized$,
+      forceMaximized: forceMaximized$
     };
     i(this, valConfig);
     this._state$ = state$;
@@ -3315,6 +3443,21 @@ class TeleBoxManager {
   get topBox() {
     return this.topBox$.value;
   }
+  get forceTopBoxes() {
+    return this.boxes.find((box) => box.forceTop);
+  }
+  get maxForceTopBox() {
+    return this.boxes.reduce((maxTopBox, box) => {
+      var _a;
+      if (box.forceTop && box.zIndex > ((_a = maxTopBox == null ? void 0 : maxTopBox.zIndex) != null ? _a : 0)) {
+        return box;
+      }
+      return maxTopBox;
+    }, void 0);
+  }
+  get forceNormalBoxes() {
+    return this.boxes.find((box) => box.forceNormal);
+  }
   get darkMode() {
     return this._darkMode$.value;
   }
@@ -3322,6 +3465,9 @@ class TeleBoxManager {
     return this._state$.value;
   }
   setState(state, skipUpdate = false) {
+    if (state === TELE_BOX_STATE.Normal && this.forceMaximized) {
+      return this;
+    }
     switch (state) {
       case TELE_BOX_STATE.Maximized: {
         this.setMinimized(false, skipUpdate);
@@ -3346,7 +3492,11 @@ class TeleBoxManager {
       const oldBoxStatus = this.boxesStatus$.get(boxId);
       this.boxesStatus$.set(boxId, boxStatus);
       if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
-        this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          boxId,
+          oldBoxStatus,
+          skipUpdate
+        );
       } else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
         this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
       }
@@ -3355,7 +3505,10 @@ class TeleBoxManager {
       this.setLastNotMinimizedBoxStatus(boxId, void 0, skipUpdate);
     }
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus });
+      this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, {
+        id: boxId,
+        boxStatus
+      });
     }
   }
   getBoxStatus(boxId) {
@@ -3401,14 +3554,13 @@ class TeleBoxManager {
       var _a;
       const boxStatus = this.boxesStatus$.get(box.id);
       if (boxStatus) {
-        if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
+        if (boxStatus !== TELE_BOX_STATE.Minimized && !this.isForceTop(box) && box.zIndex > ((_a = newTopBox == null ? void 0 : newTopBox.zIndex) != null ? _a : 0)) {
           newTopBox = box;
         }
         box.setBoxStatus(boxStatus, skipUpdate);
       }
     });
     this.effectBoxStatusChange();
-    console.log("effectBoxesStatusTimerFunc===>newTopBox", newTopBox, curTopBox);
     if (newTopBox && curTopBox !== newTopBox) {
       this.topBox$.setValue(newTopBox);
     }
@@ -3417,12 +3569,14 @@ class TeleBoxManager {
     }
   }
   async effectBoxesStatusChange(skipUpdate = false) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     if (!this.useBoxesStatus) {
       if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
         clearTimeout(this.effectBoxesStatusTimer.timer);
         if (this.effectBoxesStatusTimer.resolve) {
-          this.effectBoxesStatusTimer.resolve(!!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate));
+          this.effectBoxesStatusTimer.resolve(
+            !!((_a = this.effectBoxesStatusTimer) == null ? void 0 : _a.skipUpdate)
+          );
         }
       }
       this.effectBoxesStatusTimer = void 0;
@@ -3432,11 +3586,11 @@ class TeleBoxManager {
       if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
         clearTimeout(this.effectBoxesStatusTimer.timer);
         if (this.effectBoxesStatusTimer.resolve) {
-          console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
-          this.effectBoxesStatusTimer.resolve(!!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate));
+          this.effectBoxesStatusTimer.resolve(
+            !!((_b = this.effectBoxesStatusTimer) == null ? void 0 : _b.skipUpdate)
+          );
         }
         this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
-        console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
       } else {
         return;
       }
@@ -3452,17 +3606,15 @@ class TeleBoxManager {
       const _skipUpdate = await new Promise((resolve) => {
         this.effectBoxesStatusTimer.resolve = resolve;
         this.effectBoxesStatusTimer.timer = setTimeout(() => {
-          var _a2, _b2;
           if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
-            console.log("effectBoxStatusTimerFunc===>000", skipUpdate, { id: (_a2 = this.topBox$.value) == null ? void 0 : _a2.id, zIndex: (_b2 = this.topBox$.value) == null ? void 0 : _b2.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
-            this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer.skipUpdate);
+            this.effectBoxesStatusTimer.resolve(
+              this.effectBoxesStatusTimer.skipUpdate
+            );
           }
         }, 100);
       });
-      console.log("effectBoxStatusTimerFunc===>000==>00", skipUpdate, { id: (_c = this.topBox$.value) == null ? void 0 : _c.id, zIndex: (_d = this.topBox$.value) == null ? void 0 : _d.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
       this.effectBoxesStatusTimerFunc(_skipUpdate);
       this.effectBoxesStatusTimer = void 0;
-      console.log("effectBoxStatusTimerFunc===>000==>11", skipUpdate, { id: (_e = this.topBox$.value) == null ? void 0 : _e.id, zIndex: (_f = this.topBox$.value) == null ? void 0 : _f.zIndex }, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex })));
     }
   }
   hasBoxesStatus() {
@@ -3475,13 +3627,18 @@ class TeleBoxManager {
     if (!this.useBoxesStatus) {
       return false;
     }
-    return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
+    return this.boxes.some(
+      (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized
+    );
   }
   getMinimizedBoxesStatus() {
     const minimizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Minimized) {
-        minimizedBoxes.set(boxId, boxStatus);
+        minimizedBoxes.set(
+          boxId,
+          boxStatus
+        );
       }
     });
     return minimizedBoxes;
@@ -3499,7 +3656,10 @@ class TeleBoxManager {
     const maximizedBoxes = /* @__PURE__ */ new Map();
     this.boxesStatus$.forEach((boxStatus, boxId) => {
       if (boxStatus === TELE_BOX_STATE.Maximized) {
-        maximizedBoxes.set(boxId, boxStatus);
+        maximizedBoxes.set(
+          boxId,
+          boxStatus
+        );
       }
     });
     return maximizedBoxes;
@@ -3518,12 +3678,18 @@ class TeleBoxManager {
   }
   setLastNotMinimizedBoxStatus(boxId, lastNotMinimizedBoxStatus, skipUpdate = false) {
     if (lastNotMinimizedBoxStatus) {
-      this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
+      this.lastNotMinimizedBoxesStatus$.set(
+        boxId,
+        lastNotMinimizedBoxStatus
+      );
     } else {
       this.lastNotMinimizedBoxesStatus$.delete(boxId);
     }
     if (!skipUpdate) {
-      this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus: lastNotMinimizedBoxStatus });
+      this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, {
+        id: boxId,
+        boxStatus: lastNotMinimizedBoxStatus
+      });
     }
   }
   setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus, skipUpdate = false) {
@@ -3536,7 +3702,9 @@ class TeleBoxManager {
       if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
         clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
         if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-          this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate));
+          this.effectLastNotMinimizedBoxStatusTimer.resolve(
+            !!((_a = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _a.skipUpdate)
+          );
         }
       }
       this.effectLastNotMinimizedBoxStatusTimer = void 0;
@@ -3546,11 +3714,11 @@ class TeleBoxManager {
       clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
       if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
         if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-          console.log("effectLastNotMinimizedBoxStatusFunc===>1111", skipUpdate);
-          this.effectLastNotMinimizedBoxStatusTimer.resolve(!!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate));
+          this.effectLastNotMinimizedBoxStatusTimer.resolve(
+            !!((_b = this.effectLastNotMinimizedBoxStatusTimer) == null ? void 0 : _b.skipUpdate)
+          );
         }
         this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
-        console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
       } else {
         return;
       }
@@ -3565,24 +3733,25 @@ class TeleBoxManager {
     if (this.effectLastNotMinimizedBoxStatusTimer) {
       const _skipUpdate = await new Promise((resolve) => {
         this.effectLastNotMinimizedBoxStatusTimer.resolve = resolve;
-        this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(() => {
-          if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-            console.log("effectLastNotMinimizedBoxStatusTimer===>000", skipUpdate);
-            this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate);
-          }
-        }, 100);
+        this.effectLastNotMinimizedBoxStatusTimer.timer = setTimeout(
+          () => {
+            if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
+              this.effectLastNotMinimizedBoxStatusTimer.resolve(
+                this.effectLastNotMinimizedBoxStatusTimer.skipUpdate
+              );
+            }
+          },
+          100
+        );
       });
-      console.log("effectLastNotMinimizedBoxStatusFunc===>000==>00", skipUpdate, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex, lastNotMinimizedBoxStatus: b._lastNotMinimizedBoxStatus$.value })));
       this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
       this.effectLastNotMinimizedBoxStatusTimer = void 0;
-      console.log("effectLastNotMinimizedBoxStatusFunc===>000==>11", skipUpdate, this.boxes$.value.map((b) => ({ id: b.id, focus: b.focus, boxStatus: b.boxStatus, zIndex: b.zIndex, lastNotMinimizedBoxStatus: b._lastNotMinimizedBoxStatus$.value })));
     }
   }
   effectLastNotMinimizedBoxStatusFunc(skipUpdate = false) {
     if (!this.useBoxesStatus) {
       return;
     }
-    console.log("effectLastNotMinimizedBoxStatusFunc===>end", skipUpdate);
     this.boxes.forEach((box) => {
       const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
       if (boxStatus) {
@@ -3598,7 +3767,7 @@ class TeleBoxManager {
       return this.getUnabledBoxesStatusZIndex();
     }
     return this.boxes.reduce((maxZIndex, box) => {
-      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
+      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized && !this.isForceTop(box)) {
         return Math.max(maxZIndex, box.zIndex);
       }
       return maxZIndex;
@@ -3609,17 +3778,32 @@ class TeleBoxManager {
       return this.getUnabledBoxesStatusZIndex();
     }
     return this.boxes.reduce((maxZIndex, box) => {
-      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
+      if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal && !this.isForceTop(box)) {
         return Math.max(maxZIndex, box.zIndex);
       }
       return maxZIndex;
     }, 299);
   }
+  getMaxForceTopBoxZIndex() {
+    if (!this.useBoxesStatus) {
+      return this.getUnabledBoxesStatusZIndex();
+    }
+    return this.boxes.reduce((maxZIndex, box) => {
+      if (box.boxStatus && this.isForceTop(box)) {
+        return Math.max(maxZIndex, box.zIndex);
+      }
+      return maxZIndex;
+    }, 699);
+  }
+  isForceNormal(box) {
+    return box._forceNormal$.value;
+  }
+  isForceTop(box) {
+    return box._forceTop$.value;
+  }
   create(config = {}, smartPosition = true) {
-    var _a;
-    console.log("create===>", config, (_a = this.topBox) == null ? void 0 : _a.zIndex);
     const box = new TeleBox({
-      zIndex: this.getMaxNormalBoxZIndex() + 1,
+      zIndex: config.forceTop ? this.getMaxForceTopBoxZIndex() + 1 : this.getMaxNormalBoxZIndex() + 1,
       ...smartPosition ? this.smartPosition(config) : config,
       darkMode: this.darkMode,
       prefersColorScheme: this.prefersColorScheme,
@@ -3629,15 +3813,20 @@ class TeleBoxManager {
       namespace: this.namespace,
       containerRect: this.containerRect,
       readonly: this.readonly,
+      forceMaximized: this.forceMaximized,
       collectorRect: this.collectorRect
     });
     box.mount(this.root);
     this.boxes$.setValue([...this.boxes, box]);
     if (box.boxStatus && this.useBoxesStatus) {
-      this.setBox(box, {
-        status: box.boxStatus,
-        lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
-      }, true);
+      this.setBox(
+        box,
+        {
+          status: box.boxStatus,
+          lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
+        },
+        true
+      );
     }
     if (box.focus) {
       this.focusBox(box);
@@ -3647,38 +3836,60 @@ class TeleBoxManager {
     }
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
       if (this.useBoxesStatus && box.boxStatus) {
+        if (box._forceNormal$.value) {
+          return;
+        }
         if (box.boxStatus === TELE_BOX_STATE.Maximized) {
-          this.setBox(box.id, {
-            status: TELE_BOX_STATE.Normal,
-            zIndex: this.getMaxNormalBoxZIndex() + 1
-          }, false);
+          this.setBox(
+            box.id,
+            {
+              status: TELE_BOX_STATE.Normal,
+              zIndex: this.getMaxNormalBoxZIndex() + 1
+            },
+            false
+          );
         } else {
-          [...this.boxes].filter((box2) => box2.boxStatus === TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
+          [...this.boxes].filter(
+            (box2) => box2.boxStatus === TELE_BOX_STATE.Normal && !this.isForceNormal(box2)
+          ).sort((a, b) => a.zIndex - b.zIndex).forEach((box2) => {
             if (box2.boxStatus === TELE_BOX_STATE.Normal) {
-              console.log("maximized===>", box2.id);
-              this.setBox(box2.id, {
-                status: TELE_BOX_STATE.Maximized,
-                zIndex: this.getMaxMaximizedBoxZIndex() + 1
-              }, false);
+              this.setBox(
+                box2.id,
+                {
+                  status: TELE_BOX_STATE.Maximized,
+                  zIndex: this.getMaxMaximizedBoxZIndex() + 1
+                },
+                false
+              );
             }
           });
           this.makeMaximizedTopBoxFocus();
         }
       } else {
-        this.setMaximized(!this.maximized);
+        if (!(this.forceMaximized && this.maximized)) {
+          this.setMaximized(!this.maximized);
+        }
       }
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
       if (box.boxStatus && this.useBoxesStatus) {
+        if (box._forceNormal$.value) {
+          return;
+        }
         if (box.focus) {
           this.blurBox(box);
         }
-        this.setBox(box, {
-          status: TELE_BOX_STATE.Minimized,
-          zIndex: -1
-        }, false, () => {
-          this.focusTopBox();
-        });
+        this.setBox(
+          box,
+          {
+            status: TELE_BOX_STATE.Minimized,
+            zIndex: -1
+          },
+          false,
+          () => {
+            this.focusTopBox();
+          }
+        );
       } else {
         this.setMinimized(true);
       }
@@ -3717,9 +3928,11 @@ class TeleBoxManager {
     });
     box._zIndex$.reaction((_, __, skipUpdate) => {
       if (this.boxes.length > 0) {
-        console.log("topBox===>_zIndex", this.boxes.map((box2) => ({ id: box2.id, zIndex: box2.zIndex, boxStatus: box2.boxStatus })));
         let currentTopBox = void 0;
         const topBox = this.boxes.reduce((topBox2, box2) => {
+          if (this.isForceTop(box2)) {
+            return topBox2;
+          }
           if (box2.boxStatus && box2.boxStatus === TELE_BOX_STATE.Minimized) {
             return topBox2;
           }
@@ -3729,7 +3942,6 @@ class TeleBoxManager {
           }
           return topBox2.zIndex > box2.zIndex ? topBox2 : box2;
         }, currentTopBox);
-        console.log("topBox===>_zIndex===>end", topBox == null ? void 0 : topBox.id);
         this.topBox$.setValue(topBox);
       }
       if (!skipUpdate) {
@@ -3769,8 +3981,15 @@ class TeleBoxManager {
         box.setZIndex(zIndex, skipUpdate);
       }
       if (lastNotMinimizedBoxStatus) {
-        this.setLastNotMinimizedBoxStatus(box.id, lastNotMinimizedBoxStatus, skipUpdate);
-        box.setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          box.id,
+          lastNotMinimizedBoxStatus,
+          skipUpdate
+        );
+        box.setLastNotMinimizedBoxStatus(
+          lastNotMinimizedBoxStatus,
+          skipUpdate
+        );
       }
       effectFunc && effectFunc();
     }
@@ -3785,12 +4004,16 @@ class TeleBoxManager {
       deletedBoxes.forEach((box2) => box2.destroy());
       if (box && this.useBoxesStatus) {
         this.setBoxStatus(box.id, void 0, skipUpdate);
-        this.setLastNotMinimizedBoxStatus(box.id, void 0, skipUpdate);
+        this.setLastNotMinimizedBoxStatus(
+          box.id,
+          void 0,
+          skipUpdate
+        );
         this.effectBoxStatusChange();
         effectFunc && effectFunc();
       }
       if (!skipUpdate) {
-        if (this.boxes.length <= 0) {
+        if (this.boxes.length <= 0 && !this.forceMaximized) {
           this.setMaximized(false);
           this.setMinimized(false);
         }
@@ -3813,7 +4036,7 @@ class TeleBoxManager {
     this.boxesStatus$.clear();
     this.lastNotMinimizedBoxesStatus$.clear();
     if (!skipUpdate) {
-      if (this.boxes.length <= 0) {
+      if (this.boxes.length <= 0 && !this.forceMaximized) {
         this.setMaximized(false);
         this.setMinimized(false);
       }
@@ -3945,10 +4168,20 @@ class TeleBoxManager {
       box.mountFooter(config.footer);
     }
     if (this.useBoxesStatus && (config.boxStatus || config.lastNotMinimizedBoxStatus)) {
-      this.setBox(box, {
-        status: config.boxStatus,
-        lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
-      }, skipUpdate);
+      this.setBox(
+        box,
+        {
+          status: config.boxStatus,
+          lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
+        },
+        skipUpdate
+      );
+    }
+    if (config.forceTop != null) {
+      box.setForceTop(config.forceTop, skipUpdate);
+    }
+    if (config.forceNormal != null) {
+      box.setForceNormal(config.forceNormal, skipUpdate);
     }
   }
   smartPosition(config = {}) {
@@ -3956,28 +4189,54 @@ class TeleBoxManager {
     const { width = 0.5, height = 0.5 } = config;
     if (x == null) {
       let vx = 20;
-      if (this.topBox) {
+      if (config.forceTop) {
+        const forceTopBox = this.maxForceTopBox || this.topBox;
+        if (forceTopBox) {
+          vx = forceTopBox.intrinsicX * this.containerRect.width + 20;
+          if (vx > this.containerRect.width - width * this.containerRect.width) {
+            vx = 20;
+          }
+        }
+      } else if (this.topBox) {
         vx = this.topBox.intrinsicX * this.containerRect.width + 20;
         if (vx > this.containerRect.width - width * this.containerRect.width) {
           vx = 20;
         }
       } else if (this.hasMinimizedBox()) {
-        vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxX, box) => {
-          return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
+        vx = [...this.boxes].filter(
+          (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal
+        ).reduce((maxX, box) => {
+          return Math.max(
+            maxX,
+            box.intrinsicX * this.containerRect.width + 20
+          );
         }, vx);
       }
       x = vx / this.containerRect.width;
     }
     if (y == null) {
       let vy = 20;
-      if (this.topBox) {
+      if (config.forceTop) {
+        const forceTopBox = this.maxForceTopBox || this.topBox;
+        if (forceTopBox) {
+          vy = forceTopBox.intrinsicY * this.containerRect.height + 20;
+          if (vy > this.containerRect.height - height * this.containerRect.height) {
+            vy = 20;
+          }
+        }
+      } else if (this.topBox) {
         vy = this.topBox.intrinsicY * this.containerRect.height + 20;
         if (vy > this.containerRect.height - height * this.containerRect.height) {
           vy = 20;
         }
       } else if (this.hasMinimizedBox()) {
-        vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxY, box) => {
-          return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
+        vy = [...this.boxes].filter(
+          (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal
+        ).reduce((maxY, box) => {
+          return Math.max(
+            maxY,
+            box.intrinsicY * this.containerRect.height + 20
+          );
         }, vy);
       }
       y = vy / this.containerRect.height;
@@ -3998,12 +4257,14 @@ class TeleBoxManager {
     }
     let maximizedBox;
     if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
-      maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
-        if (!topBox) {
-          return currentBox;
+      maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce(
+        (topBox, currentBox) => {
+          if (!topBox) {
+            return currentBox;
+          }
+          return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
         }
-        return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
-      });
+      );
     }
     return maximizedBox;
   }
@@ -4012,9 +4273,7 @@ class TeleBoxManager {
       return;
     }
     const maximizedBox = this.getMaximizedTopBox();
-    console.log("makeMaximizedTopBoxFocus===>", maximizedBox == null ? void 0 : maximizedBox.id);
     this.maxTitleBar.focusBox(maximizedBox);
-    console.log("makeMaximizedTopBoxFocus===>end", maximizedBox == null ? void 0 : maximizedBox.id);
   }
   getBoxIndex(boxOrID) {
     return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
@@ -4037,5 +4296,6 @@ class TeleBoxManager {
     return;
   }
 }
+TeleBoxManager.kind = "TeleBoxManager";
 export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager };
 //# sourceMappingURL=telebox-insider.es.js.map