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

package/dist/index.d.ts

@@ -284,7 +284,9 @@ declare enum TELE_BOX_EVENT {
     Readonly = "readonly",
     Destroyed = "destroyed",
     BoxStatus = "box_status",
-    LastNotMinimizedBoxStatus = "last_not_minimized_box_status"
+    LastNotMinimizedBoxStatus = "last_not_minimized_box_status",
+    ForceTop = "force_top",
+    ForceNormal = "force_normal"
 }
 declare enum TELE_BOX_DELEGATE_EVENT {
     Close = "close",
@@ -381,6 +383,12 @@ interface TeleBoxConfig {
     readonly boxStatus?: TeleBoxState;
     /** Last not minimized box status. */
     readonly lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
+    /** Force top. */
+    readonly forceTop?: boolean;
+    /** Force normal. */
+    readonly forceNormal?: boolean;
+    /** Is drag content. */
+    readonly isDragContent?: boolean;
 }
 type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 type TeleBoxEventConfig = CheckTeleBoxConfig<{
@@ -423,6 +431,8 @@ type TeleBoxEventConfig = CheckTeleBoxConfig<{
         id: string;
         lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
     };
+    force_normal: boolean;
+    force_top: boolean;
 }>;
 type TeleBoxEvent = keyof TeleBoxEventConfig;
 interface TeleBoxEvents extends EventEmitter<TeleBoxEvent> {
@@ -460,10 +470,13 @@ interface TeleTitleBarConfig {
     title?: string;
     state?: TeleBoxState;
     namespace?: string;
+    forceTop?: boolean;
+    forceNormal?: boolean;
     onEvent?: (event: TeleTitleBarEvent) => void;
     onDragStart?: (event: MouseEvent | TouchEvent) => void;
 }
 interface TeleTitleBar {
+    readonly $dragArea: HTMLElement;
     setTitle(title: string): void;
     setState(state: TeleBoxState): void;
     setReadonly(readonly: boolean): void;
@@ -482,11 +495,13 @@ interface DefaultTitleBarConfig extends TeleTitleBarConfig {
 }
 declare class DefaultTitleBar implements TeleTitleBar {
     protected boxStatus?: TeleBoxState;
-    constructor({ readonly, title, buttons, onEvent, onDragStart, namespace, state, boxStatus, }?: DefaultTitleBarConfig);
+    protected forceTop?: boolean;
+    protected forceNormal?: boolean;
+    constructor({ readonly, title, buttons, onEvent, onDragStart, namespace, state, boxStatus, forceTop, forceNormal, }?: DefaultTitleBarConfig);
     readonly namespace: string;
     $titleBar: HTMLElement | undefined;
     $title: HTMLElement | undefined;
-    $dragArea: HTMLElement;
+    readonly $dragArea: HTMLElement;
     setTitle(title: string): void;
     setState(state: TeleBoxState): void;
     setBoxStatus(boxStatus?: TeleBoxState): void;
@@ -546,11 +561,17 @@ type ValConfig$1 = {
     $userContent: Val<HTMLElement | undefined>;
     $userFooter: Val<HTMLElement | undefined>;
     $userStyles: Val<HTMLStyleElement | undefined>;
+    /** Force top. */
+    forceTop: Val<boolean, boolean>;
+    /** Force normal. */
+    forceNormal: Val<boolean, boolean>;
+    /** Drag content. */
+    isDragContent: Val<boolean, boolean>;
 };
 interface TeleBox extends ValEnhancedResult<ValConfig$1> {
 }
 declare class TeleBox {
-    constructor({ id, title, prefersColorScheme, darkMode, visible, width, height, minWidth, minHeight, x, y, minimized, maximized, readonly, resizable, draggable, fence, fixRatio, focus, zIndex, namespace, titleBar, content, footer, styles, containerRect, collectorRect, boxStatus, lastNotMinimizedBoxStatus }?: TeleBoxConfig);
+    constructor({ id, title, prefersColorScheme, darkMode, visible, width, height, minWidth, minHeight, x, y, minimized, maximized, readonly, resizable, draggable, fence, fixRatio, focus, zIndex, namespace, titleBar, content, footer, styles, containerRect, collectorRect, boxStatus, lastNotMinimizedBoxStatus, forceTop, forceNormal, isDragContent, }?: TeleBoxConfig);
     readonly id: string;
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     readonly namespace: string;
@@ -703,6 +724,7 @@ interface TeleBoxCollectorConfig {
     getBoxesStatus?: () => Map<string, TeleBoxState>;
 }
 declare class TeleBoxCollector {
+    static readonly kind = "TeleBoxCollector";
     getBoxesStatus?: () => Map<string, TeleBoxState>;
     constructor({ visible, readonly, darkMode, namespace, styles, onClick, getBoxesStatus }: TeleBoxCollectorConfig);
     get boxesStatus(): Map<string, TeleBoxState> | undefined;
@@ -722,7 +744,7 @@ declare class TeleBoxCollector {
      * Unmount collector from the root element.
      */
     unmount(): this;
-    private hasMinimizedBox;
+    protected hasMinimizedBox(): boolean;
     updateBoxesStatus(): void;
     setVisible(visible: boolean): this;
     setReadonly(readonly: boolean): this;
@@ -765,7 +787,7 @@ interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "prefersColorScheme"
     /** Whether to use boxes status. */
     useBoxesStatus?: boolean;
 }
-type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "fixRatio" | "zIndex" | "boxStatus" | "lastNotMinimizedBoxStatus";
+type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "fixRatio" | "zIndex" | "boxStatus" | "lastNotMinimizedBoxStatus" | "forceTop" | "forceNormal" | "isDragContent";
 type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus">;
 type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "id" | "focus">;
 type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer">;
@@ -803,7 +825,7 @@ interface TeleBoxManagerEvents extends EventEmitter<TeleBoxManagerEvent> {
     emit<U extends TeleBoxManagerEvent>(event: U, ...value: TeleBoxManagerEventConfig[U]): boolean;
 }
 
-type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box">;
+type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly" | "zIndex" | "$box" | "forceTop" | "forceNormal">;
 interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode: boolean;
     boxes: MaxTitleBarTeleBox[];
@@ -885,15 +907,27 @@ type ValConfig = {
 interface TeleBoxManager extends ValEnhancedResult<ValConfig> {
 }
 declare class TeleBoxManager {
-    private boxesStatus$;
-    private lastNotMinimizedBoxesStatus$;
-    private appMenu;
-    private useBoxesStatus;
-    private effectBoxesStatusTimer?;
-    private effectLastNotMinimizedBoxStatusTimer?;
+    static readonly kind = "TeleBoxManager";
+    protected boxesStatus$: Map<string, TeleBoxState>;
+    protected lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
+    protected appMenu: AppMenu | undefined;
+    protected useBoxesStatus: boolean;
+    protected effectBoxesStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+        resolve?: (skipUpdate: boolean) => void;
+    };
+    protected effectLastNotMinimizedBoxStatusTimer?: {
+        skipUpdate: boolean;
+        timer: number | undefined;
+        resolve?: (skipUpdate: boolean) => void;
+    };
     constructor({ root, prefersColorScheme, minimized, maximized, fence, containerRect, collector, namespace, readonly, useBoxesStatus, }?: TeleBoxManagerConfig);
     get boxes(): ReadonlyArray<TeleBox>;
     get topBox(): TeleBox | undefined;
+    get forceTopBoxes(): TeleBox | undefined;
+    get maxForceTopBox(): TeleBox | undefined;
+    get forceNormalBoxes(): TeleBox | undefined;
     readonly events: TeleBoxManagerEvents;
     protected _sideEffect: SideEffectManager;
     protected root: HTMLElement;
@@ -912,8 +946,8 @@ declare class TeleBoxManager {
     get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState>;
     setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate?: boolean): void;
     getBoxesStatus(): Map<string, TeleBoxState>;
-    private effectBoxStatusChange;
-    private effectBoxesStatusTimerFunc;
+    protected effectBoxStatusChange(): void;
+    protected effectBoxesStatusTimerFunc(skipUpdate: boolean): void;
     effectBoxesStatusChange(skipUpdate?: boolean): Promise<void>;
     hasBoxesStatus(): boolean;
     hasMinimizedBox(): boolean;
@@ -924,13 +958,16 @@ declare class TeleBoxManager {
     getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined;
     setLastNotMinimizedBoxStatus(boxId: string, lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate?: boolean): void;
     setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate?: boolean): void;
-    private effectLastNotMinimizedBoxStatusChange;
-    private effectLastNotMinimizedBoxStatusFunc;
-    private getUnabledBoxesStatusZIndex;
+    protected effectLastNotMinimizedBoxStatusChange(skipUpdate?: boolean): Promise<void>;
+    protected effectLastNotMinimizedBoxStatusFunc(skipUpdate?: boolean): void;
+    protected getUnabledBoxesStatusZIndex(): number;
     /** Maximized box zIndex range: 100-299 */
     getMaxMaximizedBoxZIndex(): number;
     /** normal box zIndex range: 300-499 */
     getMaxNormalBoxZIndex(): number;
+    getMaxForceTopBoxZIndex(): number;
+    isForceNormal(box: TeleBox): boolean;
+    isForceTop(box: TeleBox): boolean;
     create(config?: TeleBoxManagerCreateConfig, smartPosition?: boolean): ReadonlyTeleBox;
     query(config?: TeleBoxManagerQueryConfig): ReadonlyTeleBox[];
     queryOne(config?: TeleBoxManagerQueryConfig): ReadonlyTeleBox | undefined;
@@ -957,7 +994,7 @@ declare class TeleBoxManager {
     protected updateBox(box: TeleBox, config: TeleBoxManagerUpdateConfig, skipUpdate?: boolean): void;
     protected smartPosition(config?: TeleBoxConfig): TeleBoxConfig;
     protected makeBoxTop(box: TeleBox, skipUpdate?: boolean): void;
-    private getMaximizedTopBox;
+    protected getMaximizedTopBox(): MaxTitleBarTeleBox | undefined;
     protected makeMaximizedTopBoxFocus(): void;
     protected getBoxIndex(boxOrID: TeleBox | string): number;
     getBox(boxOrID: TeleBox | string): TeleBox | undefined;

package/dist/style.css

@@ -408,7 +408,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 299;
 }
 .telebox-max-titlebar .telebox-title {
   display: none;

package/dist/telebox-insider.cjs.js

@@ -1185,6 +1185,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) => {
@@ -1239,7 +1241,9 @@ class DefaultTitleBar {
     onDragStart,
     namespace = "telebox",
     state = TELE_BOX_STATE.Normal,
-    boxStatus
+    boxStatus,
+    forceTop = false,
+    forceNormal = false
   } = {}) {
     this.$btns = [];
     this.sideEffect = new o();
@@ -1313,7 +1317,14 @@ class DefaultTitleBar {
     this.title = title;
     this.state = state;
     this.boxStatus = boxStatus;
-    this.buttons = buttons || [
+    this.forceTop = forceTop;
+    this.forceNormal = forceNormal;
+    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")
@@ -1327,7 +1338,7 @@ class DefaultTitleBar {
         type: TELE_BOX_DELEGATE_EVENT.Close,
         iconClassName: this.wrapClassName("titlebar-icon-close")
       }
-    ];
+    ]);
     this.$dragArea = this.renderDragArea();
   }
   setTitle(title) {
@@ -1500,7 +1511,10 @@ class TeleBox {
     },
     collectorRect,
     boxStatus,
-    lastNotMinimizedBoxStatus
+    lastNotMinimizedBoxStatus,
+    forceTop = false,
+    forceNormal = false,
+    isDragContent = false
   } = {}) {
     this._renderSideEffect = new o();
     this.handleTrackStart = (ev) => {
@@ -1567,6 +1581,19 @@ 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);
+    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) {
@@ -1744,6 +1771,8 @@ class TeleBox {
       title: title$.value,
       namespace: this.namespace,
       boxStatus: boxStatus$.value,
+      forceTop: forceTop$.value,
+      forceNormal: forceNormal$.value,
       onDragStart: (event) => {
         var _a;
         return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
@@ -1807,7 +1836,10 @@ class TeleBox {
       maximized: maximized$,
       $userContent: $userContent$,
       $userFooter: $userFooter$,
-      $userStyles: $userStyles$
+      $userStyles: $userStyles$,
+      forceTop: forceTop$,
+      forceNormal: forceNormal$,
+      isDragContent: isDragContent$
     };
     i(this, valConfig);
     this._state$ = state$;
@@ -2144,6 +2176,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) => {
@@ -2573,6 +2608,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";
@@ -2621,7 +2657,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 [];
@@ -2900,7 +2936,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"));
@@ -2962,9 +2997,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;
           }
@@ -2974,7 +3011,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;
@@ -3171,7 +3207,6 @@ class TeleBoxManager {
                 this.makeMaximizedTopBoxFocus();
               }
             }
-            console.log("checkFocusBox===>", box.id);
             this.focusBox(box);
             return;
           }
@@ -3234,7 +3269,7 @@ class TeleBoxManager {
                 const box = this.getBox(targetBox.id);
                 if (box) {
                   let isFocusChanged = false;
-                  if (this.topBox === box) {
+                  if (box.focus) {
                     this.blurBox(box);
                     isFocusChanged = true;
                   }
@@ -3264,7 +3299,7 @@ class TeleBoxManager {
                 const box = this.getBox(targetBox.id);
                 if (box) {
                   let isFocusChanged = false;
-                  if (this.topBox === box) {
+                  if (box.focus) {
                     this.blurBox(box);
                     isFocusChanged = true;
                   }
@@ -3317,6 +3352,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;
   }
@@ -3403,7 +3453,7 @@ 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);
@@ -3412,15 +3462,13 @@ class TeleBoxManager {
     this.effectBoxStatusChange();
     if (newTopBox && curTopBox !== newTopBox) {
       this.topBox$.setValue(newTopBox);
-      this.focusBox(newTopBox, skipUpdate);
     }
     if (!newTopBox && curTopBox) {
       this.topBox$.setValue(void 0);
-      this.blurBox(curTopBox, skipUpdate);
     }
   }
   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);
@@ -3435,11 +3483,9 @@ 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.skipUpdate = skipUpdate;
-        console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
       } else {
         return;
       }
@@ -3455,17 +3501,13 @@ 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);
           }
         }, 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() {
@@ -3549,11 +3591,9 @@ 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.skipUpdate = skipUpdate;
-        console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
       } else {
         return;
       }
@@ -3570,22 +3610,18 @@ class TeleBoxManager {
         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);
       });
-      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) {
@@ -3601,7 +3637,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;
@@ -3612,17 +3648,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,
@@ -3650,15 +3701,17 @@ 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);
         } 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
@@ -3672,12 +3725,12 @@ class TeleBoxManager {
       }
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
-      var _a2;
       if (box.boxStatus && this.useBoxesStatus) {
-        if (this.topBox === box) {
-          if ((_a2 = this.topBox) == null ? void 0 : _a2.focus) {
-            this.blurBox(this.topBox);
-          }
+        if (box._forceNormal$.value) {
+          return;
+        }
+        if (box.focus) {
+          this.blurBox(box);
         }
         this.setBox(box, {
           status: TELE_BOX_STATE.Minimized,
@@ -3690,6 +3743,9 @@ class TeleBoxManager {
       }
     });
     box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+      if (this.useBoxesStatus && box.focus) {
+        this.blurBox(box);
+      }
       this.remove(box);
       this.focusTopBox();
     });
@@ -3720,9 +3776,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;
           }
@@ -3732,7 +3790,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) {
@@ -3953,13 +4010,27 @@ class TeleBoxManager {
         lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
       }, skipUpdate);
     }
+    if (config.forceTop != null) {
+      box.setForceTop(config.forceTop, skipUpdate);
+    }
+    if (config.forceNormal != null) {
+      box.setForceNormal(config.forceNormal, skipUpdate);
+    }
   }
   smartPosition(config = {}) {
     let { x, y } = config;
     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;
@@ -3973,7 +4044,15 @@ class TeleBoxManager {
     }
     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;
@@ -4015,9 +4094,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);
@@ -4040,6 +4117,7 @@ class TeleBoxManager {
     return;
   }
 }
+TeleBoxManager.kind = "TeleBoxManager";
 exports.DefaultTitleBar = DefaultTitleBar;
 exports.TELE_BOX_COLOR_SCHEME = TELE_BOX_COLOR_SCHEME;
 exports.TELE_BOX_DELEGATE_EVENT = TELE_BOX_DELEGATE_EVENT;