@netless/telebox-insider 1.0.0-alpha.18 → 1.0.0-alpha.20

package/src/TeleBox/index.ts

@@ -43,7 +43,7 @@ import type {
     TeleBoxDelegateEventConfig,
     TeleBoxRect,
 } from "./typings";
-import { TeleStage } from "../TeleStage";
+import { calcStageRect } from "./utils";
 
 export * from "./constants";
 export * from "./typings";
@@ -57,8 +57,10 @@ type ValConfig = {
     visible: Val<RequiredTeleBoxConfig["visible"], boolean>;
     resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
     draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
-    ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
-    stageRatio: Val<number | null>;
+    boxRatio: Val<RequiredTeleBoxConfig["boxRatio"], boolean>;
+    stageRatio: Val<RequiredTeleBoxConfig["stageRatio"], boolean>;
+    stageStyle: Val<RequiredTeleBoxConfig["stageStyle"], boolean>;
+    bodyStyle: Val<RequiredTeleBoxConfig["bodyStyle"], boolean>;
 };
 
 type PropsValConfig = {
@@ -69,6 +71,8 @@ type PropsValConfig = {
     readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
+    defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
 };
 
@@ -76,11 +80,6 @@ type MyReadonlyValConfig = {
     zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
     focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
 
-    $userContent: Val<TeleBoxConfig["content"], boolean>;
-    $userStage: Val<TeleBoxConfig["content"], boolean>;
-    $userFooter: Val<TeleBoxConfig["footer"], boolean>;
-    $userStyles: Val<TeleBoxConfig["styles"], boolean>;
-
     minSize: Val<TeleBoxSize, boolean>;
     intrinsicSize: Val<TeleBoxSize, boolean>;
     intrinsicCoord: Val<TeleBoxCoord, boolean>;
@@ -88,10 +87,8 @@ type MyReadonlyValConfig = {
     pxIntrinsicSize: ReadonlyVal<TeleBoxSize, boolean>;
     pxIntrinsicCoord: ReadonlyVal<TeleBoxCoord, boolean>;
     state: ReadonlyVal<TeleBoxState, boolean>;
-    highlightStage: ReadonlyVal<boolean, boolean>;
-    boxHighlightStage: Val<boolean | null, boolean>;
-    contentRect: Val<TeleBoxRect>;
-    contentStageRect: ReadonlyVal<TeleBoxRect>;
+    bodyRect: Val<TeleBoxRect>;
+    stageRect: ReadonlyVal<TeleBoxRect>;
 };
 
 type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
@@ -115,7 +112,7 @@ export class TeleBox {
         y = 0.1,
         resizable = true,
         draggable = true,
-        ratio = -1,
+        boxRatio = -1,
         focus = false,
         zIndex = 100,
         stageRatio = null,
@@ -124,18 +121,21 @@ export class TeleBox {
         stage,
         footer,
         styles,
-        highlightStage = null,
+        userStyles,
+        bodyStyle = null,
+        stageStyle = null,
         darkMode$,
         fence$,
         minimized$,
         maximized$,
         readonly$,
-        root$,
+        root,
         rootRect$,
         managerStageRect$,
         managerStageRatio$,
+        defaultBoxBodyStyle$,
+        defaultBoxStageStyle$,
         collectorRect$,
-        managerHighlightStage$,
     }: TeleBoxConfig) {
         this._sideEffect = new SideEffectManager();
 
@@ -149,13 +149,9 @@ export class TeleBox {
         const visible$ = new Val(visible);
         const resizable$ = new Val(resizable);
         const draggable$ = new Val(draggable);
-        const ratio$ = new Val(ratio);
+        const boxRatio$ = new Val(boxRatio);
         const zIndex$ = new Val(zIndex);
         const focus$ = new Val(focus);
-        const $userContent$ = new Val(content);
-        const $userStage$ = new Val(stage);
-        const $userFooter$ = new Val(footer);
-        const $userStyles$ = new Val(styles);
 
         const state$ = combine(
             [minimized$, maximized$],
@@ -216,46 +212,29 @@ export class TeleBox {
         const pxIntrinsicCoord$ = combine(
             [intrinsicCoord$, managerStageRect$],
             ([intrinsicCoord, managerStageRect]) => ({
-                x:
-                    intrinsicCoord.x * managerStageRect.width +
-                    managerStageRect.x,
-                y:
-                    intrinsicCoord.y * managerStageRect.height +
-                    managerStageRect.y,
+                x: intrinsicCoord.x * managerStageRect.width,
+                y: intrinsicCoord.y * managerStageRect.height,
             }),
             { compare: shallowequal }
         );
 
-        const boxHighlightStage$ = new Val<boolean | null, boolean>(
-            highlightStage
-        );
-
-        const highlightStage$ = combine(
-            [boxHighlightStage$, managerHighlightStage$],
-            ([boxHighlightStage, managerHighlightStage]) =>
-                boxHighlightStage ?? managerHighlightStage
-        );
+        const bodyStyle$ = new Val<string | null>(bodyStyle);
+        const stageStyle$ = new Val<string | null>(stageStyle);
 
         const contentRoot$ = new Val<HTMLElement | null>(null);
-
-        const contentRect$ = new Val<TeleBoxRect>(rootRect$.value, {
+        const bodyRect$ = new Val<TeleBoxRect>(managerStageRect$.value, {
             compare: shallowequal,
         });
-
         const stageRatio$ = new Val(stageRatio);
-
-        const teleStage = new TeleStage({
-            namespace,
-            root$: contentRoot$,
-            rootRect$: contentRect$,
-            ratio$: combine(
-                [stageRatio$, managerStageRatio$],
-                ([stageRatio, managerStageRatio]) =>
-                    stageRatio ?? managerStageRatio
-            ),
-            highlightStage$,
-        });
-        this._sideEffect.addDisposer(() => teleStage.destroy());
+        const finalStageRatio$ = combine(
+            [stageRatio$, managerStageRatio$],
+            ([stageRatio, managerStageRatio]) => stageRatio ?? managerStageRatio
+        );
+        const stageRect$ = combine(
+            [bodyRect$, finalStageRatio$],
+            calcStageRect,
+            { compare: shallowequal }
+        );
 
         const propsValConfig: PropsValConfig = {
             darkMode: darkMode$,
@@ -265,6 +244,8 @@ export class TeleBox {
             readonly: readonly$,
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
+            defaultBoxBodyStyle: defaultBoxBodyStyle$,
+            defaultBoxStageStyle: defaultBoxStageStyle$,
             collectorRect: collectorRect$,
         };
 
@@ -274,11 +255,6 @@ export class TeleBox {
             zIndex: zIndex$,
             focus: focus$,
 
-            $userContent: $userContent$,
-            $userStage: $userStage$,
-            $userFooter: $userFooter$,
-            $userStyles: $userStyles$,
-
             state: state$,
             minSize: minSize$,
             pxMinSize: pxMinSize$,
@@ -286,10 +262,8 @@ export class TeleBox {
             intrinsicCoord: intrinsicCoord$,
             pxIntrinsicSize: pxIntrinsicSize$,
             pxIntrinsicCoord: pxIntrinsicCoord$,
-            highlightStage: highlightStage$,
-            boxHighlightStage: boxHighlightStage$,
-            contentRect: contentRect$,
-            contentStageRect: teleStage.stageRect$,
+            bodyRect: bodyRect$,
+            stageRect: stageRect$,
         };
 
         withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
@@ -299,8 +273,10 @@ export class TeleBox {
             visible: visible$,
             resizable: resizable$,
             draggable: draggable$,
-            ratio: ratio$,
+            boxRatio: boxRatio$,
             stageRatio: stageRatio$,
+            bodyStyle: bodyStyle$,
+            stageStyle: stageStyle$,
         };
 
         withValueEnhancer(this, valConfig, valManager);
@@ -317,14 +293,13 @@ export class TeleBox {
             });
 
         this._sideEffect.addDisposer(
-            ratio$.subscribe((ratio) => {
-                if (ratio > 0) {
+            boxRatio$.subscribe((boxRatio) => {
+                if (boxRatio > 0) {
                     this.transform(
                         pxIntrinsicCoord$.value.x,
                         pxIntrinsicCoord$.value.y,
                         pxIntrinsicSize$.value.width,
-                        pxIntrinsicSize$.value.height,
-                        true
+                        pxIntrinsicSize$.value.height
                     );
                 }
             })
@@ -335,15 +310,20 @@ export class TeleBox {
                 if (fence) {
                     this.move(
                         pxIntrinsicCoord$.value.x,
-                        pxIntrinsicCoord$.value.y,
-                        true
+                        pxIntrinsicCoord$.value.y
                     );
                 }
             })
         );
 
-        this.$box = this.render();
+        this.$box = this._render();
         contentRoot$.setValue(this.$content.parentElement);
+        content && this.mountContent(content);
+        stage && this.mountStage(stage);
+        footer && this.mountFooter(footer);
+        styles && this.mountStyles(styles);
+        userStyles && this.mountUserStyles(userStyles);
+        root.appendChild(this.$box);
 
         const watchValEvent = <E extends TeleBoxEvent>(
             val: ReadonlyVal<TeleBoxEventConfig[E], boolean>,
@@ -380,13 +360,6 @@ export class TeleBox {
                     );
                 }
             }),
-            root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.$box);
-                } else if (this.$box.parentNode) {
-                    this.$box.remove();
-                }
-            }),
         ]);
     }
 
@@ -492,34 +465,25 @@ export class TeleBox {
         const pxIntrinsicSize = this.pxIntrinsicSize;
 
         if (this.fence) {
-            safeX = clamp(
-                x,
-                managerStageRect.x,
-                managerStageRect.x +
-                    managerStageRect.width -
-                    pxIntrinsicSize.width
-            );
+            safeX = clamp(x, 0, managerStageRect.width - pxIntrinsicSize.width);
             safeY = clamp(
                 y,
-                managerStageRect.y,
-                managerStageRect.y +
-                    managerStageRect.height -
-                    pxIntrinsicSize.height
+                0,
+                managerStageRect.height - pxIntrinsicSize.height
             );
         } else {
-            const rootRect = this.rootRect;
             safeX = clamp(
                 x,
-                0 - pxIntrinsicSize.width + 20,
-                0 + rootRect.width - 20
+                -(pxIntrinsicSize.width - 120),
+                0 + managerStageRect.width - 20
             );
-            safeY = clamp(y, 0, 0 + rootRect.height - 20);
+            safeY = clamp(y, 0, 0 + managerStageRect.height - 20);
         }
 
         this._intrinsicCoord$.setValue(
             {
-                x: (safeX - managerStageRect.x) / managerStageRect.width,
-                y: (safeY - managerStageRect.y) / managerStageRect.height,
+                x: safeX / managerStageRect.width,
+                y: safeY / managerStageRect.height,
             },
             skipUpdate
         );
@@ -542,21 +506,20 @@ export class TeleBox {
         skipUpdate = false
     ): void {
         const managerStageRect = this.managerStageRect;
-        const rootRect = this.rootRect;
 
         width = Math.max(width, this.pxMinSize.width);
         height = Math.max(height, this.pxMinSize.height);
 
-        if (this.ratio > 0) {
-            const newHeight = this.ratio * width;
+        if (this.boxRatio > 0) {
+            const newHeight = this.boxRatio * width;
             if (y !== this.pxIntrinsicCoord.y) {
                 y -= newHeight - height;
             }
             height = newHeight;
         }
 
-        if (y < rootRect.y) {
-            y = rootRect.y;
+        if (y < 0) {
+            y = 0;
             height = this.pxIntrinsicSize.height;
         }
 
@@ -570,85 +533,109 @@ export class TeleBox {
         );
     }
 
-    /**
-     * Mount dom to box content.
-     */
+    private $authorContent?: HTMLElement;
+
+    /** Mount dom to box content. */
     public mountContent(content: HTMLElement): void {
-        this._$userContent$.setValue(content);
+        this.$authorContent?.remove();
+        this.$authorContent = content;
+        this.$content.appendChild(content);
     }
 
-    /**
-     * Unmount content from the box.
-     */
+    /**  Unmount content from the box. */
     public unmountContent(): void {
-        this._$userContent$.setValue(undefined);
+        if (this.$authorContent) {
+            this.$authorContent.remove();
+            this.$authorContent = undefined;
+        }
     }
 
+    private $authorStage?: HTMLElement;
+
+    /** Mount dom to box stage. */
     public mountStage(stage: HTMLElement): void {
-        this._$userStage$.setValue(stage);
+        this.$authorStage?.remove();
+        this.$authorStage = stage;
+        if (!this.$stage) {
+            this.$stage = this._renderStage();
+        }
+        this.$stage.appendChild(stage);
+        if (!this.$stage.parentElement) {
+            this.$body.appendChild(this.$stage);
+        }
     }
 
-    /**
-     * Unmount content from the box.
-     */
+    /** Unmount content from the box. */
     public unmountStage(): void {
-        this._$userStage$.setValue(undefined);
+        if (this.$authorStage) {
+            this.$authorStage.remove();
+            this.$authorStage = undefined;
+        }
+        this.$stage?.remove();
     }
 
-    /**
-     * Mount dom to box Footer.
-     */
+    private $authorFooter?: HTMLElement;
+
+    /** Mount dom to box Footer. */
     public mountFooter(footer: HTMLElement): void {
-        this._$userFooter$.setValue(footer);
+        this.$authorFooter?.remove();
+        this.$authorFooter = footer;
+        this.$footer.appendChild(footer);
     }
 
-    /**
-     * Unmount Footer from the box.
-     */
+    /** Unmount Footer from the box. */
     public unmountFooter(): void {
-        this._$userFooter$.setValue(undefined);
+        if (this.$authorFooter) {
+            this.$authorFooter.remove();
+            this.$authorFooter = undefined;
+        }
     }
 
-    public getUserStyles(): HTMLStyleElement | undefined {
-        return this.$userStyles;
+    /** Mount styles for box content */
+    public mountStyles(styles: string): void {
+        this.$styles.textContent = styles;
     }
 
-    public mountStyles(styles: string | HTMLStyleElement): void {
-        let $styles: HTMLStyleElement;
-        if (typeof styles === "string") {
-            $styles = document.createElement("style");
-            $styles.textContent = styles;
-        } else {
-            $styles = styles;
-        }
-        this._$userStyles$.setValue($styles);
+    /** Umount styles for box content */
+    public unmountStyles(): void {
+        this.$styles.textContent = "";
     }
 
-    public unmountStyles(): void {
-        this._$userStyles$.setValue(undefined);
+    /** Mount user styles for box content */
+    public mountUserStyles(styles: string): void {
+        this.$userStyles.textContent = styles;
     }
 
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. */
-    public setHighlightStage(highlightStage: boolean | null): void {
-        this._boxHighlightStage$.setValue(highlightStage);
+    /** Umount user styles for box content */
+    public unmountUserStyles(): void {
+        this.$userStyles.textContent = "";
     }
 
     /** DOM of the box */
     public $box: HTMLElement;
 
-    /** DOM of the box content */
+    /** DOM of the box body */
+    public $body!: HTMLElement;
+
+    /** DOM of the box content container inside box body */
     public $content!: HTMLElement;
 
-    /** DOM of the box stage area */
+    /** DOM of the box stage area inside box body */
     public $stage?: HTMLElement;
 
-    /** DOM of the box title bar */
+    /** DOM of custom box content styles */
+    public $styles!: HTMLStyleElement;
+
+    /** DOM of end user custom box content styles */
+    public $userStyles!: HTMLStyleElement;
+
+    /** DOM of the box title bar container */
     public $titleBar!: HTMLElement;
 
-    /** DOM of the box footer */
+    /** DOM of the box footer container */
     public $footer!: HTMLElement;
 
-    protected render(): HTMLElement {
+    private _render(): HTMLElement {
         if (this.$box) {
             return this.$box;
         }
@@ -736,6 +723,8 @@ export class TeleBox {
                 this._pxIntrinsicSize$,
                 this._pxIntrinsicCoord$,
                 this._collectorRect$,
+                this._rootRect$,
+                this._managerStageRect$,
             ],
             ([
                 maximized,
@@ -743,28 +732,30 @@ export class TeleBox {
                 pxIntrinsicSize,
                 pxIntrinsicCoord,
                 collectorRect,
+                rootRect,
+                managerStageRect,
             ]) => {
                 const styles: {
                     x: number;
                     y: number;
-                    width: string;
-                    height: string;
+                    width: number;
+                    height: number;
                     scaleX: number;
                     scaleY: number;
                 } = maximized
                     ? {
-                          x: 0,
-                          y: 0,
-                          width: "100%",
-                          height: "100%",
+                          x: -managerStageRect.x,
+                          y: -managerStageRect.y,
+                          width: rootRect.width,
+                          height: rootRect.height,
                           scaleX: 1,
                           scaleY: 1,
                       }
                     : {
                           x: pxIntrinsicCoord.x,
                           y: pxIntrinsicCoord.y,
-                          width: pxIntrinsicSize.width + "px",
-                          height: pxIntrinsicSize.height + "px",
+                          width: pxIntrinsicSize.width,
+                          height: pxIntrinsicSize.height,
                           scaleX: 1,
                           scaleY: 1,
                       };
@@ -775,11 +766,13 @@ export class TeleBox {
                     styles.x =
                         collectorRect.x -
                         boxWidth / 2 +
-                        collectorRect.width / 2;
+                        collectorRect.width / 2 -
+                        managerStageRect.x;
                     styles.y =
                         collectorRect.y -
                         boxHeight / 2 +
-                        collectorRect.height / 2;
+                        collectorRect.height / 2 -
+                        managerStageRect.y;
                     styles.scaleX = collectorRect.width / boxWidth;
                     styles.scaleY = collectorRect.height / boxHeight;
                 }
@@ -789,8 +782,8 @@ export class TeleBox {
         );
 
         const boxStyles = boxStyles$.value;
-        this.$box.style.width = boxStyles.width;
-        this.$box.style.height = boxStyles.height;
+        this.$box.style.width = boxStyles.width + "px";
+        this.$box.style.height = boxStyles.height + "px";
         // Add 10px offset on first frame
         // which creates a subtle moving effect
         this.$box.style.transform = `translate(${boxStyles.x - 10}px,${
@@ -812,17 +805,45 @@ export class TeleBox {
         $titleBar.appendChild(this.titleBar.render());
         this.$titleBar = $titleBar;
 
-        const $contentWrap = document.createElement("div");
-        $contentWrap.className = this.wrapClassName("content-wrap");
+        const $body = document.createElement("div");
+        $body.className = this.wrapClassName("content-wrap");
+        this.$body = $body;
+
+        const $styles = document.createElement("style");
+        this.$styles = $styles;
+        $body.appendChild($styles);
+
+        const $userStyles = document.createElement("style");
+        this.$userStyles = $userStyles;
+        $body.appendChild($userStyles);
 
         const $content = document.createElement("div");
         $content.className =
             this.wrapClassName("content") + " tele-fancy-scrollbar";
         this.$content = $content;
+        this._sideEffect.addDisposer(
+            combine(
+                [this._bodyStyle$, this._defaultBoxBodyStyle$],
+                ([bodyStyle, defaultBoxBodyStyle]) =>
+                    bodyStyle ?? defaultBoxBodyStyle
+            ).subscribe((style) => ($content.style.cssText = style || ""))
+        );
+
+        $body.appendChild($content);
+
+        const $footer = document.createElement("div");
+        $footer.className = this.wrapClassName("footer-wrap");
+        this.$footer = $footer;
 
-        const updateContentRect = (): void => {
-            const rect = $content.getBoundingClientRect();
-            this._contentRect$.setValue({
+        $boxMain.appendChild($titleBar);
+        $boxMain.appendChild($body);
+        $boxMain.appendChild($footer);
+
+        this._renderResizeHandlers();
+
+        const updateBodyRect = (): void => {
+            const rect = $body.getBoundingClientRect();
+            this._bodyRect$.setValue({
                 x: 0,
                 y: 0,
                 width: rect.width,
@@ -832,10 +853,10 @@ export class TeleBox {
         this._sideEffect.add(() => {
             const observer = new ResizeObserver(() => {
                 if (!this.minimized) {
-                    updateContentRect();
+                    updateBodyRect();
                 }
             });
-            observer.observe($content);
+            observer.observe($body);
             return () => observer.disconnect();
         });
         this._sideEffect.addDisposer(
@@ -843,7 +864,7 @@ export class TeleBox {
                 // correct content size when restoring from minimized
                 if (!minimized) {
                     this._sideEffect.setTimeout(
-                        updateContentRect,
+                        updateBodyRect,
                         400,
                         "minimized-content-rect-fix"
                     );
@@ -851,100 +872,43 @@ export class TeleBox {
             })
         );
 
-        this._sideEffect.add(() => {
-            let last$userStyles: HTMLStyleElement | undefined;
-            return this._$userStyles$.subscribe(($userStyles) => {
-                if (last$userStyles) {
-                    last$userStyles.remove();
-                }
-                last$userStyles = $userStyles;
-                if ($userStyles) {
-                    $contentWrap.appendChild($userStyles);
-                }
-            });
-        });
-
-        this._sideEffect.add(() => {
-            let last$userContent: HTMLElement | undefined;
-            return this._$userContent$.subscribe(($userContent) => {
-                if (last$userContent) {
-                    last$userContent.remove();
-                }
-                last$userContent = $userContent;
-                if ($userContent) {
-                    $content.appendChild($userContent);
-                }
-            });
-        });
-
-        this._sideEffect.add(() => {
-            let last$userStage: HTMLElement | undefined;
-            return this._$userStage$.subscribe(($userStage) => {
-                if (last$userStage) {
-                    last$userStage.remove();
-                }
-                last$userStage = $userStage;
-                if ($userStage) {
-                    if (!this.$stage) {
-                        const $stage = document.createElement("div");
-                        this.$stage = $stage;
-                        $stage.className = this.wrapClassName("content-stage");
-                        this._sideEffect.addDisposer(
-                            this._contentStageRect$.subscribe((rect) => {
-                                $stage.style.top = rect.y + "px";
-                                $stage.style.left = rect.x + "px";
-                                $stage.style.width = rect.width + "px";
-                                $stage.style.height = rect.height + "px";
-                            }),
-                            "content-stage-rect"
-                        );
-                        $content.appendChild($stage);
-                    }
-                    if (!this.$stage.parentElement) {
-                        $content.appendChild(this.$stage);
-                    }
-                    this.$stage.appendChild($userStage);
-                } else if (this.$stage?.parentElement) {
-                    this.$stage.remove();
-                }
-            });
-        });
-
-        $contentWrap.appendChild($content);
-
-        const $footer = document.createElement("div");
-        $footer.className = this.wrapClassName("footer-wrap");
-        this.$footer = $footer;
-
-        this._sideEffect.add(() => {
-            let last$userFooter: HTMLElement | undefined;
-            return this._$userFooter$.subscribe(($userFooter) => {
-                if (last$userFooter) {
-                    last$userFooter.remove();
-                }
-                last$userFooter = $userFooter;
-                if ($userFooter) {
-                    $footer.appendChild($userFooter);
-                }
-            });
-        });
-
-        $boxMain.appendChild($titleBar);
-        $boxMain.appendChild($contentWrap);
-        $boxMain.appendChild($footer);
+        return this.$box;
+    }
 
-        this._renderResizeHandlers();
+    private _renderStage(): HTMLDivElement {
+        const $stage = document.createElement("div");
 
-        return this.$box;
+        $stage.className = this.wrapClassName("content-stage");
+        const updateStageRect = (stageRect: TeleBoxRect): void => {
+            $stage.style.top = stageRect.y + "px";
+            $stage.style.left = stageRect.x + "px";
+            $stage.style.width = stageRect.width + "px";
+            $stage.style.height = stageRect.height + "px";
+        };
+        this._sideEffect.addDisposer(
+            [
+                combine(
+                    [this._stageStyle$, this._defaultBoxStageStyle$],
+                    ([stageStyle, defaultBoxStageStyle]) =>
+                        stageStyle ?? defaultBoxStageStyle
+                ).subscribe((styles) => {
+                    $stage.style.cssText = styles || "";
+                    updateStageRect(this._stageRect$.value);
+                }),
+                this._stageRect$.subscribe(updateStageRect),
+            ],
+            "content-stage-styles"
+        );
+        return $stage;
     }
 
-    protected _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
+    private _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
 
     public handleTrackStart: (ev: MouseEvent | TouchEvent) => void = (ev) => {
         return this._handleTrackStart?.(ev);
     };
 
-    protected _renderResizeHandlers(): void {
+    private _renderResizeHandlers(): void {
         const $resizeHandles = document.createElement("div");
         $resizeHandles.className = this.wrapClassName("resize-handles");
 
@@ -985,8 +949,8 @@ export class TeleBox {
             preventEvent(ev);
 
             let { pageX, pageY } = flattenEvent(ev);
-            if (pageY < this.rootRect.y) {
-                pageY = this.rootRect.y;
+            if (pageY < 0) {
+                pageY = 0;
             }
 
             const offsetX = pageX - trackStartPageX;
@@ -1198,13 +1162,14 @@ export type ReadonlyTeleBox = Pick<
     | "unmountStage"
     | "mountStyles"
     | "unmountStyles"
-    | "setStageRatio"
+    | "setTitle"
     | "setDraggable"
     | "setResizable"
-    | "setHighlightStage"
-    | "setTitle"
-    | "setRatio"
     | "setVisible"
+    | "setBoxRatio"
+    | "setStageRatio"
+    | "setStageStyle"
+    | "setBodyStyle"
     | "handleTrackStart"
     | "onValChanged"
 >;