@netless/telebox-insider 0.2.25 → 1.0.0-alpha.2

package/src/TeleBoxManager/index.ts

@@ -1,141 +1,185 @@
-import EventEmitter from "eventemitter3";
 import shallowequal from "shallowequal";
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { SideEffectManager } from "side-effect-manager";
 import type {
-    TeleBoxConfig,
+    ReadonlyVal,
+    ValEnhancedResult,
+    ReadonlyValEnhancedResult,
+} from "value-enhancer";
+import {
+    combine,
+    Val,
+    withValueEnhancer,
+    withReadonlyValueEnhancer,
+} from "value-enhancer";
+import Emittery from "emittery";
+import type {
+    ReadonlyTeleBox,
+    TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxState,
-} from "../TeleBox/typings";
+} from "../TeleBox";
+import {
+    TeleBox,
+    TELE_BOX_EVENT,
+    TELE_BOX_STATE,
+    TELE_BOX_COLOR_SCHEME,
+    TELE_BOX_DELEGATE_EVENT,
+} from "../TeleBox";
 import { TeleBoxCollector } from "../TeleBoxCollector";
-import { ReadonlyTeleBox, TeleBox } from "../TeleBox";
-import { TELE_BOX_EVENT, TELE_BOX_STATE } from "../TeleBox/constants";
 import { TELE_BOX_MANAGER_EVENT } from "./constants";
 import type {
     TeleBoxManagerConfig,
     TeleBoxManagerCreateConfig,
-    TeleBoxManagerEvents,
+    TeleBoxManagerEventConfig,
     TeleBoxManagerQueryConfig,
     TeleBoxManagerUpdateConfig,
 } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
-import {
-    TeleBoxColorScheme,
-    TELE_BOX_COLOR_SCHEME,
-    TELE_BOX_DELEGATE_EVENT,
-} from "..";
-import { SideEffectManager } from "side-effect-manager";
-import {
-    createSideEffectBinder,
-    Val,
-    ValEnhancedResult,
-    withValueEnhancer,
-} from "value-enhancer";
+import { TeleStage } from "../TeleStage";
 
 export * from "./typings";
 export * from "./constants";
 
+const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+
+type ReadonlyValConfig = {
+    darkMode: ReadonlyVal<boolean, boolean>;
+    state: ReadonlyVal<TeleBoxState, boolean>;
+    root: Val<HTMLElement | null>;
+    rootRect: Val<TeleBoxRect>;
+    stageRect: ReadonlyVal<TeleBoxRect>;
+};
+
 type ValConfig = {
     prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
-    containerRect: Val<TeleBoxRect, boolean>;
-    collector: Val<TeleBoxCollector | null>;
-    collectorRect: Val<TeleBoxRect | undefined>;
     readonly: Val<boolean, boolean>;
     minimized: Val<boolean, boolean>;
     maximized: Val<boolean, boolean>;
     fence: Val<boolean, boolean>;
+    stageRatio: Val<number, boolean>;
+    highlightStage: Val<boolean, boolean>;
 };
-export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
+
+type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
+    ReadonlyValEnhancedResult<ReadonlyValConfig>;
+
+export interface TeleBoxManager extends CombinedValEnhancedResult {}
 
 export class TeleBoxManager {
     public constructor({
-        root = document.body,
+        root = null,
         prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
         minimized = false,
         maximized = false,
-        fence = true,
-        containerRect = {
-            x: 0,
-            y: 0,
-            width: window.innerWidth,
-            height: window.innerHeight,
-        },
+        fence = false,
         collector,
         namespace = "telebox",
         readonly = false,
+        stageRatio = -1,
+        highlightStage = true,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
-        const { combine, createVal } = createSideEffectBinder(this._sideEffect);
 
-        this.root = root;
         this.namespace = namespace;
 
-        this.boxes$ = createVal<TeleBox[]>([]);
-        this.topBox$ = this.boxes$.derive((boxes) => {
-            if (boxes.length > 0) {
-                const topBox = boxes.reduce((topBox, box) =>
-                    topBox.zIndex > box.zIndex ? topBox : box
-                );
-                return topBox;
-            }
-            return;
-        });
+        const root$ = new Val(root);
+        const readonly$ = new Val(readonly);
+        const minimized$ = new Val(minimized);
+        const maximized$ = new Val(maximized);
+        const fence$ = new Val(fence);
+        const stageRatio$ = new Val(stageRatio);
+        const highlightStage$ = new Val(highlightStage);
+
+        const rootRect$ = new Val<TeleBoxRect>(
+            {
+                x: 0,
+                y: 0,
+                width: window.innerWidth,
+                height: window.innerHeight,
+            },
+            { compare: shallowequal }
+        );
+        this._sideEffect.addDisposer(
+            root$.subscribe((root) => {
+                this._sideEffect.add(() => {
+                    if (!root) {
+                        return () => void 0;
+                    }
+                    const observer = new ResizeObserver((entries) => {
+                        this._sideEffect.setTimeout(
+                            // debounce
+                            () => {
+                                const rect = entries[0]?.contentRect;
+                                if (rect) {
+                                    rootRect$.setValue({
+                                        x: rect.x,
+                                        y: rect.y,
+                                        width: rect.width,
+                                        height: rect.height,
+                                    });
+                                }
+                            },
+                            50,
+                            "root-resize-observer"
+                        );
+                    });
+                    observer.observe(root);
+                    return () => observer.disconnect();
+                }, "calc-root-rect");
+            })
+        );
 
-        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-        const prefersDark$ = createVal(false);
+        this.boxes$ = new Val<TeleBox[]>([]);
+        this.topBox$ = new Val<TeleBox | undefined>(undefined);
+        this._sideEffect.addDisposer(
+            this.boxes$.subscribe((boxes) => {
+                if (boxes.length > 0) {
+                    const topBox = boxes.reduce((topBox, box) =>
+                        topBox.zIndex > box.zIndex ? topBox : box
+                    );
+                    this.topBox$.setValue(topBox);
+                } else {
+                    this.topBox$.setValue(undefined);
+                }
+            })
+        );
 
-        if (prefersDark) {
-            prefersDark$.setValue(prefersDark.matches);
+        const prefersDarkMatch = window.matchMedia(
+            "(prefers-color-scheme: dark)"
+        );
+        const prefersDark$ = new Val(false);
+        if (prefersDarkMatch) {
+            prefersDark$.setValue(prefersDarkMatch.matches);
             this._sideEffect.add(() => {
                 const handler = (evt: MediaQueryListEvent): void => {
                     prefersDark$.setValue(evt.matches);
                 };
-                prefersDark.addListener(handler);
-                return () => prefersDark.removeListener(handler);
+                prefersDarkMatch.addEventListener("change", handler);
+                return () =>
+                    prefersDarkMatch.removeEventListener("change", handler);
             });
         }
 
-        const prefersColorScheme$ = createVal(prefersColorScheme);
-        prefersColorScheme$.reaction((prefersColorScheme, _, skipUpdate) => {
-            this.boxes.forEach((box) =>
-                box.setPrefersColorScheme(prefersColorScheme, skipUpdate)
-            );
-            if (!skipUpdate) {
-                this.events.emit(
-                    TELE_BOX_MANAGER_EVENT.PrefersColorScheme,
-                    prefersColorScheme
-                );
-            }
-        });
+        const prefersColorScheme$ = new Val(prefersColorScheme);
+        this._sideEffect.addDisposer(
+            prefersColorScheme$.reaction((prefersColorScheme, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(
+                        TELE_BOX_MANAGER_EVENT.PrefersColorScheme,
+                        prefersColorScheme
+                    );
+                }
+            })
+        );
 
-        this._darkMode$ = combine(
+        const darkMode$ = combine(
             [prefersDark$, prefersColorScheme$],
             ([prefersDark, prefersColorScheme]) =>
                 prefersColorScheme === "auto"
                     ? prefersDark
                     : prefersColorScheme === "dark"
         );
-        this._darkMode$.reaction((darkMode, _, skipUpdate) => {
-            this.boxes.forEach((box) => box.setDarkMode(darkMode, skipUpdate));
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
-            }
-        });
-
-        const readonly$ = createVal(readonly);
-        readonly$.reaction((readonly, _, skipUpdate) => {
-            this.boxes.forEach((box) => box.setReadonly(readonly, skipUpdate));
-        });
-
-        const minimized$ = createVal(minimized);
-
-        const maximized$ = createVal(maximized);
-        maximized$.reaction((maximized, _, skipUpdate) => {
-            this.boxes.forEach((box) =>
-                box.setMaximized(maximized, skipUpdate)
-            );
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized);
-            }
-        });
 
         const state$ = combine(
             [minimized$, maximized$],
@@ -146,101 +190,48 @@ export class TeleBoxManager {
                     ? TELE_BOX_STATE.Maximized
                     : TELE_BOX_STATE.Normal
         );
-        state$.reaction((state, _, skipUpdate) => {
-            this.maxTitleBar.setState(state);
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
-            }
-        });
-
-        const fence$ = createVal(fence);
-        fence$.subscribe((fence, _, skipUpdate) => {
-            this.boxes.forEach((box) => box.setFence(fence, skipUpdate));
-        });
 
-        const containerRect$ = createVal(containerRect, shallowequal);
-        containerRect$.reaction((containerRect, _, skipUpdate) => {
-            this.boxes.forEach((box) =>
-                box.setContainerRect(containerRect, skipUpdate)
-            );
-            this.maxTitleBar.setContainerRect(containerRect);
-        });
+        this.collector =
+            collector ??
+            new TeleBoxCollector({
+                minimized$: minimized$,
+                readonly$: readonly$,
+                darkMode$: darkMode$,
+                namespace,
+                root$,
+                rootRect$,
+            });
 
-        const collector$ = createVal(
-            collector === null
-                ? null
-                : collector ||
-                      new TeleBoxCollector({
-                          visible: minimized,
-                          readonly: readonly,
-                          namespace,
-                      }).mount(root)
-        );
-        collector$.subscribe((collector) => {
-            if (collector) {
-                collector.setVisible(minimized$.value);
-                collector.setReadonly(readonly$.value);
-                collector.setDarkMode(this._darkMode$.value);
-                this._sideEffect.add(() => {
-                    collector.onClick = () => {
-                        if (!readonly$.value) {
-                            minimized$.setValue(false);
-                        }
-                    };
-                    return () => collector.destroy();
-                }, "collect-onClick");
-            }
-        });
-        readonly$.subscribe((readonly) =>
-            collector$.value?.setReadonly(readonly)
-        );
-        this._darkMode$.subscribe((darkMode) => {
-            collector$.value?.setDarkMode(darkMode);
+        const teleStage = new TeleStage({
+            namespace,
+            rootRect$,
+            ratio$: stageRatio$,
+            root$,
+            highlightStage$,
         });
-
-        const calcCollectorRect = (): TeleBoxRect | undefined => {
-            if (collector$.value?.$collector) {
-                const { x, y, width, height } =
-                    collector$.value.$collector.getBoundingClientRect();
-                const rootRect = this.root.getBoundingClientRect();
-                return {
-                    x: x - rootRect.x,
-                    y: y - rootRect.y,
-                    width,
-                    height,
-                };
-            }
-            return;
+        this._sideEffect.addDisposer(() => teleStage.destroy());
+
+        const readonlyValConfig: ReadonlyValConfig = {
+            darkMode: darkMode$,
+            state: state$,
+            root: root$,
+            rootRect: rootRect$,
+            stageRect: teleStage.stageRect$,
         };
 
-        const collectorRect$ = createVal(
-            minimized$.value ? calcCollectorRect() : void 0
-        );
-        collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
-            this.boxes.forEach((box) => {
-                box.setCollectorRect(collectorRect, skipUpdate);
-            });
-        });
-
-        minimized$.subscribe((minimized, _, skipUpdate) => {
-            collector$.value?.setVisible(minimized);
-
-            if (minimized) {
-                if (collector$.value?.$collector) {
-                    collectorRect$.setValue(calcCollectorRect());
-                } else if (import.meta.env.DEV) {
-                    console.warn("No collector for minimized boxes.");
-                }
-            }
+        withReadonlyValueEnhancer(this, readonlyValConfig);
 
-            this.boxes.forEach((box) =>
-                box.setMinimized(minimized, skipUpdate)
-            );
+        const valConfig: ValConfig = {
+            prefersColorScheme: prefersColorScheme$,
+            readonly: readonly$,
+            fence: fence$,
+            minimized: minimized$,
+            maximized: maximized$,
+            stageRatio: stageRatio$,
+            highlightStage: highlightStage$,
+        };
 
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized);
-            }
-        });
+        withValueEnhancer(this, valConfig);
 
         const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
 
@@ -287,13 +278,14 @@ export class TeleBoxManager {
             true
         );
 
-        this.maxTitleBar = new MaxTitleBar({
-            darkMode: this.darkMode,
-            readonly: readonly$.value,
+        this.titleBar = new MaxTitleBar({
             namespace: this.namespace,
-            state: state$.value,
-            boxes: this.boxes$.value,
-            containerRect: containerRect$.value,
+            boxes$: this.boxes$,
+            darkMode$: darkMode$,
+            readonly$: readonly$,
+            state$: state$,
+            root$,
+            rootRect$: rootRect$,
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
@@ -315,32 +307,35 @@ export class TeleBoxManager {
                 }
             },
         });
-        readonly$.subscribe((readonly) =>
-            this.maxTitleBar.setReadonly(readonly)
-        );
-        this._darkMode$.subscribe((darkMode) => {
-            this.maxTitleBar.setDarkMode(darkMode);
-        });
-        this.boxes$.reaction((boxes) => {
-            this.maxTitleBar.setBoxes(boxes);
-        });
-
-        const valConfig: ValConfig = {
-            prefersColorScheme: prefersColorScheme$,
-            containerRect: containerRect$,
-            collector: collector$,
-            collectorRect: collectorRect$,
-            readonly: readonly$,
-            fence: fence$,
-            minimized: minimized$,
-            maximized: maximized$,
-        };
-
-        withValueEnhancer(this, valConfig);
 
-        this._state$ = state$;
-
-        this.root.appendChild(this.maxTitleBar.render());
+        this._sideEffect.addDisposer([
+            state$.reaction((state, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
+                }
+            }),
+            maximized$.reaction((maximized, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(
+                        TELE_BOX_MANAGER_EVENT.Maximized,
+                        maximized
+                    );
+                }
+            }),
+            minimized$.reaction((minimized, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(
+                        TELE_BOX_MANAGER_EVENT.Minimized,
+                        minimized
+                    );
+                }
+            }),
+            darkMode$.reaction((darkMode, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+                }
+            }),
+        ]);
     }
 
     public get boxes(): ReadonlyArray<TeleBox> {
@@ -351,26 +346,15 @@ export class TeleBoxManager {
         return this.topBox$.value;
     }
 
-    public readonly events = new EventEmitter() as TeleBoxManagerEvents;
+    public readonly events = new Emittery<
+        TeleBoxManagerEventConfig,
+        TeleBoxManagerEventConfig
+    >();
 
     protected _sideEffect: SideEffectManager;
 
-    protected root: HTMLElement;
-
     public readonly namespace: string;
 
-    public _darkMode$: Val<boolean, boolean>;
-
-    public get darkMode(): boolean {
-        return this._darkMode$.value;
-    }
-
-    public _state$: Val<TeleBoxState, boolean>;
-
-    public get state(): TeleBoxState {
-        return this._state$.value;
-    }
-
     /** @deprecated use setMaximized and setMinimized instead */
     public setState(state: TeleBoxState, skipUpdate = false): this {
         switch (state) {
@@ -399,20 +383,22 @@ export class TeleBoxManager {
     ): ReadonlyTeleBox {
         const box = new TeleBox({
             zIndex: this.topBox ? this.topBox.zIndex + 1 : 100,
-            ...(smartPosition ? this.smartPosition(config) : config),
-            darkMode: this.darkMode,
-            prefersColorScheme: this.prefersColorScheme,
-            maximized: this.maximized,
-            minimized: this.minimized,
-            fence: this.fence,
+            ...config,
+            ...(smartPosition ? this.smartPosition(config) : {}),
             namespace: this.namespace,
-            containerRect: this.containerRect,
-            readonly: this.readonly,
-            collectorRect: this.collectorRect,
+            root$: this._root$,
+            darkMode$: this._darkMode$,
+            maximized$: this._maximized$,
+            minimized$: this._minimized$,
+            fence$: this._fence$,
+            rootRect$: this._rootRect$,
+            managerStageRect$: this._stageRect$,
+            stageRatio$: this._stageRatio$,
+            readonly$: this._readonly$,
+            collectorRect$: this.collector._rect$,
+            managerHighlightStage$: this._highlightStage$,
         });
 
-        box.mount(this.root);
-
         if (box.focus) {
             this.focusBox(box);
             if (smartPosition) {
@@ -422,52 +408,43 @@ export class TeleBoxManager {
 
         this.boxes$.setValue([...this.boxes, box]);
 
-        box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
-            this.setMaximized(!this.maximized);
-        });
-        box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
-            this.setMinimized(true);
-        });
-        box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
-            this.remove(box);
-            this.focusTopBox();
-        });
-        box._coord$.reaction((_, __, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
-            }
-        });
-        box._size$.reaction((_, __, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
-            }
-        });
-        box._intrinsicCoord$.reaction((_, __, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
-            }
-        });
-        box._intrinsicSize$.reaction((_, __, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
-            }
-        });
-        box._visualSize$.reaction((_, __, skipUpdate) => {
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
-            }
-        });
-        box._zIndex$.reaction((_, __, skipUpdate) => {
-            if (this.boxes.length > 0) {
-                const topBox = this.boxes.reduce((topBox, box) =>
-                    topBox.zIndex > box.zIndex ? topBox : box
-                );
-                this.topBox$.setValue(topBox);
-            }
-            if (!skipUpdate) {
-                this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
-            }
-        });
+        this._sideEffect.addDisposer([
+            box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
+                this.setMaximized(!this.maximized);
+            }),
+            box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
+                this.setMinimized(true);
+            }),
+            box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+                this.remove(box);
+                this.focusTopBox();
+            }),
+            box._intrinsicCoord$.reaction((_, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+                }
+            }),
+            box._intrinsicSize$.reaction((_, skipUpdate) => {
+                if (!skipUpdate) {
+                    this.events.emit(
+                        TELE_BOX_MANAGER_EVENT.IntrinsicResize,
+                        box
+                    );
+                }
+            }),
+            box._zIndex$.reaction((_, skipUpdate) => {
+                if (this.boxes.length > 0) {
+                    const topBox = this.boxes.reduce((topBox, box) =>
+                        topBox.zIndex > box.zIndex ? topBox : box
+                    );
+                    this.topBox$.setValue(topBox);
+                }
+                if (!skipUpdate) {
+                    this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+                }
+            }),
+        ]);
+
         this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
 
         return box;
@@ -550,17 +527,26 @@ export class TeleBoxManager {
         return deletedBoxes;
     }
 
+    /**
+     * Mount manager to a container element.
+     */
+    public mount(root: HTMLElement): void {
+        this._root$.setValue(root);
+    }
+
+    /**
+     * Unmount manager from the container element.
+     */
+    public unmount(): void {
+        this._root$.setValue(null);
+    }
+
     public destroy(skipUpdate = false): void {
-        this.events.removeAllListeners();
+        this.events.clearListeners();
         this._sideEffect.flushAll();
         this.removeAll(skipUpdate);
-
-        Object.keys(this).forEach((key) => {
-            const value = this[key as keyof this];
-            if (value instanceof Val) {
-                value.destroy();
-            }
-        });
+        this.collector.destroy();
+        this.titleBar.destroy();
     }
 
     public wrapClassName(className: string): string {
@@ -575,7 +561,7 @@ export class TeleBoxManager {
                     let focusChanged = false;
                     if (!targetBox.focus) {
                         focusChanged = true;
-                        targetBox.setFocus(true, skipUpdate);
+                        targetBox._focus$.setValue(true, skipUpdate);
                     }
                     if (focusChanged && !skipUpdate) {
                         this.events.emit(
@@ -587,7 +573,7 @@ export class TeleBoxManager {
                     this.blurBox(box, skipUpdate);
                 }
             });
-            this.maxTitleBar.focusBox(targetBox);
+            this.titleBar.focusBox(targetBox);
         }
     }
 
@@ -601,13 +587,13 @@ export class TeleBoxManager {
         const targetBox = this.getBox(boxOrID);
         if (targetBox) {
             if (targetBox.focus) {
-                targetBox.setFocus(false, skipUpdate);
+                targetBox._focus$.setValue(false, skipUpdate);
                 if (!skipUpdate) {
                     this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
                 }
             }
-            if (this.maxTitleBar.focusedBox === targetBox) {
-                this.maxTitleBar.focusBox();
+            if (this.titleBar.focusedBox === targetBox) {
+                this.titleBar.focusBox();
             }
         }
     }
@@ -615,18 +601,19 @@ export class TeleBoxManager {
     public blurAll(skipUpdate = false): void {
         this.boxes.forEach((box) => {
             if (box.focus) {
-                box.setFocus(false, skipUpdate);
+                box._focus$.setValue(false, skipUpdate);
                 if (!skipUpdate) {
                     this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
                 }
             }
         });
-        if (this.maxTitleBar.focusedBox) {
-            this.maxTitleBar.focusBox();
+        if (this.titleBar.focusedBox) {
+            this.titleBar.focusBox();
         }
     }
 
-    protected maxTitleBar: MaxTitleBar;
+    public collector: TeleBoxCollector;
+    public titleBar: MaxTitleBar;
 
     protected boxes$: Val<TeleBox[]>;
     protected topBox$: Val<TeleBox | undefined>;
@@ -647,43 +634,40 @@ export class TeleBoxManager {
         skipUpdate = false
     ): void {
         if (config.x != null || config.y != null) {
-            box.move(
-                config.x == null ? box.intrinsicX : config.x,
-                config.y == null ? box.intrinsicY : config.y,
+            box._intrinsicCoord$.setValue(
+                {
+                    x: config.x ?? box.intrinsicX,
+                    y: config.y ?? box.intrinsicY,
+                },
                 skipUpdate
             );
         }
         if (config.width != null || config.height != null) {
-            box.resize(
-                config.width == null ? box.intrinsicWidth : config.width,
-                config.height == null ? box.intrinsicHeight : config.height,
+            box._intrinsicSize$.setValue(
+                {
+                    width: config.width ?? box.intrinsicWidth,
+                    height: config.height ?? box.intrinsicHeight,
+                },
                 skipUpdate
             );
         }
         if (config.title != null) {
-            box.setTitle(config.title);
-            this.maxTitleBar.updateTitles();
+            box._title$.setValue(config.title);
         }
         if (config.visible != null) {
-            box.setVisible(config.visible, skipUpdate);
-        }
-        if (config.minHeight != null) {
-            box.setMinHeight(config.minHeight, skipUpdate);
-        }
-        if (config.minWidth != null) {
-            box.setMinWidth(config.minWidth, skipUpdate);
+            box._visible$.setValue(config.visible, skipUpdate);
         }
         if (config.resizable != null) {
-            box.setResizable(config.resizable, skipUpdate);
+            box._resizable$.setValue(config.resizable, skipUpdate);
         }
         if (config.draggable != null) {
-            box.setDraggable(config.draggable, skipUpdate);
+            box._draggable$.setValue(config.draggable, skipUpdate);
         }
-        if (config.fixRatio != null) {
-            box.setFixRatio(config.fixRatio, skipUpdate);
+        if (config.ratio != null) {
+            box._ratio$.setValue(config.ratio, skipUpdate);
         }
         if (config.zIndex != null) {
-            box.setZIndex(config.zIndex, skipUpdate);
+            box._zIndex$.setValue(config.zIndex, skipUpdate);
         }
         if (config.content != null) {
             box.mountContent(config.content);
@@ -691,52 +675,61 @@ export class TeleBoxManager {
         if (config.footer != null) {
             box.mountFooter(config.footer);
         }
+        if (config.minHeight != null || config.minWidth != null) {
+            box._minSize$.setValue(
+                {
+                    width: config.minWidth ?? box.minWidth,
+                    height: config.minHeight ?? box.minHeight,
+                },
+                skipUpdate
+            );
+        }
     }
 
-    protected smartPosition(config: TeleBoxConfig = {}): TeleBoxConfig {
-        let { x, y } = config;
-        const { width = 0.5, height = 0.5 } = config;
+    /** Keep new boxes staggered inside stage area */
+    protected smartPosition(rect: Partial<TeleBoxRect>): TeleBoxRect {
+        let { x, y } = rect;
+        const { width = 0.5, height = 0.5 } = rect;
+        const stageRect = this.stageRect;
+        const topBox = this.topBox;
 
         if (x == null) {
-            let vx = 20;
-            if (this.topBox) {
-                vx = this.topBox.intrinsicX * this.containerRect.width + 20;
-
+            let pxX = stageRect.x + 20;
+            if (topBox) {
+                const pxPreferredX = topBox.pxIntrinsicCoord.x + 20;
+                const pxIntrinsicWidth = width * stageRect.width;
                 if (
-                    vx >
-                    this.containerRect.width - width * this.containerRect.width
+                    pxPreferredX + pxIntrinsicWidth <=
+                    stageRect.x + stageRect.width
                 ) {
-                    vx = 20;
+                    pxX = pxPreferredX;
                 }
             }
-            x = vx / this.containerRect.width;
+            x = (pxX - stageRect.x) / stageRect.width;
         }
 
         if (y == null) {
-            let vy = 20;
-
-            if (this.topBox) {
-                vy = this.topBox.intrinsicY * this.containerRect.height + 20;
-
+            let pxY = stageRect.y + 20;
+            if (topBox) {
+                const pxPreferredY = topBox.pxIntrinsicCoord.y + 20;
+                const pxIntrinsicHeight = height * stageRect.height;
                 if (
-                    vy >
-                    this.containerRect.height -
-                        height * this.containerRect.height
+                    pxPreferredY + pxIntrinsicHeight <=
+                    stageRect.y + stageRect.height
                 ) {
-                    vy = 20;
+                    pxY = pxPreferredY;
                 }
             }
-
-            y = vy / this.containerRect.height;
+            y = (pxY - stageRect.y) / stageRect.height;
         }
 
-        return { ...config, x, y, width, height };
+        return { x, y, width, height };
     }
 
     protected makeBoxTop(box: TeleBox, skipUpdate = false): void {
         if (this.topBox) {
             if (box !== this.topBox) {
-                box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
+                box._zIndex$.setValue(this.topBox.zIndex + 1, skipUpdate);
             }
         }
     }