@netless/telebox-insider 1.0.0-alpha.3 → 1.0.0-alpha.30

package/src/TeleBox/index.ts

@@ -1,4 +1,5 @@
 import "./style.scss";
+import shadowStyles from "./style.shadow.scss?inline";
 
 import Emittery from "emittery";
 import styler from "stylefire";
@@ -9,19 +10,17 @@ import type {
     ReadonlyValEnhancedResult,
     ValEnhancedResult,
 } from "value-enhancer";
-import { withValueEnhancer } from "value-enhancer";
-import { combine, Val, withReadonlyValueEnhancer } from "value-enhancer";
+import {
+    combine,
+    Val,
+    withReadonlyValueEnhancer,
+    withValueEnhancer,
+    ValManager,
+} from "value-enhancer";
 import type { TeleTitleBar } from "../TeleTitleBar";
 import { DefaultTitleBar } from "../TeleTitleBar";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import {
-    clamp,
-    flattenEvent,
-    getBoxDefaultName,
-    isFalsy,
-    isTruthy,
-    preventEvent,
-} from "../utils";
+import { clamp, getBoxDefaultName, preventEvent } from "../utils";
 import {
     TELE_BOX_EVENT,
     TELE_BOX_STATE,
@@ -38,7 +37,7 @@ import type {
     TeleBoxDelegateEventConfig,
     TeleBoxRect,
 } from "./typings";
-import { TeleStage } from "../TeleStage";
+import { calcStageRect } from "./utils";
 
 export * from "./constants";
 export * from "./typings";
@@ -52,10 +51,13 @@ type ValConfig = {
     visible: Val<RequiredTeleBoxConfig["visible"], boolean>;
     resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
     draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
-    ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
+    boxRatio: Val<RequiredTeleBoxConfig["boxRatio"], boolean>;
+    stageRatio: Val<RequiredTeleBoxConfig["stageRatio"], boolean>;
+    stageStyle: Val<RequiredTeleBoxConfig["stageStyle"], boolean>;
+    bodyStyle: Val<RequiredTeleBoxConfig["bodyStyle"], boolean>;
 };
 
-type ReadonlyValConfig = {
+type PropsValConfig = {
     darkMode: RequiredTeleBoxConfig["darkMode$"];
     fence: RequiredTeleBoxConfig["fence$"];
     minimized: RequiredTeleBoxConfig["minimized$"];
@@ -63,15 +65,16 @@ type ReadonlyValConfig = {
     readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    managerStageRatio: RequiredTeleBoxConfig["managerStageRatio$"];
+    defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
+    defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
+};
 
+type MyReadonlyValConfig = {
     zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
     focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
 
-    $userContent: 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>;
@@ -79,13 +82,13 @@ type ReadonlyValConfig = {
     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 | null>;
+    bodyRect: Val<TeleBoxRect>;
+    stageRect: ReadonlyVal<TeleBoxRect>;
 };
 
-type CombinedValEnhancedResult = ReadonlyValEnhancedResult<ReadonlyValConfig> &
+type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
+    PropsValConfig & MyReadonlyValConfig
+> &
     ValEnhancedResult<ValConfig>;
 
 export interface TeleBox extends CombinedValEnhancedResult {}
@@ -104,41 +107,48 @@ export class TeleBox {
         y = 0.1,
         resizable = true,
         draggable = true,
-        ratio = -1,
+        boxRatio = -1,
         focus = false,
         zIndex = 100,
+        stageRatio = null,
+        enableShadowDOM = true,
         titleBar,
         content,
+        stage,
         footer,
         styles,
-        highlightStage = null,
+        userStyles,
+        bodyStyle = null,
+        stageStyle = null,
         darkMode$,
         fence$,
         minimized$,
         maximized$,
         readonly$,
-        root$,
+        root,
         rootRect$,
         managerStageRect$,
-        stageRatio$,
+        managerStageRatio$,
+        defaultBoxBodyStyle$,
+        defaultBoxStageStyle$,
         collectorRect$,
-        managerHighlightStage$,
     }: TeleBoxConfig) {
         this._sideEffect = new SideEffectManager();
 
         this.id = id;
         this.namespace = namespace;
+        this.enableShadowDOM = enableShadowDOM;
+
+        const valManager = new ValManager();
+        this._sideEffect.addDisposer(() => valManager.destroy());
 
         const title$ = new Val(title);
         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 $userFooter$ = new Val(footer);
-        const $userStyles$ = new Val(styles);
 
         const state$ = combine(
             [minimized$, maximized$],
@@ -199,44 +209,31 @@ 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(
-            [maximized$, boxHighlightStage$, managerHighlightStage$],
-            ([maximized, boxHighlightStage, managerHighlightStage]) =>
-                boxHighlightStage === null
-                    ? managerHighlightStage && maximized
-                    : boxHighlightStage
-        );
+        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 finalStageRatio$ = combine(
+            [stageRatio$, managerStageRatio$],
+            ([stageRatio, managerStageRatio]) => stageRatio ?? managerStageRatio
+        );
+        const stageRect$ = combine(
+            [bodyRect$, finalStageRatio$],
+            calcStageRect,
+            { compare: shallowequal }
+        );
 
-        const teleStage = new TeleStage({
-            namespace,
-            root$: contentRoot$,
-            rootRect$: contentRect$,
-            ratio$: stageRatio$,
-            highlightStage$,
-        });
-        this._sideEffect.addDisposer(() => teleStage.destroy());
-
-        const readonlyValConfig: ReadonlyValConfig = {
+        const propsValConfig: PropsValConfig = {
             darkMode: darkMode$,
             fence: fence$,
             minimized: minimized$,
@@ -244,15 +241,18 @@ export class TeleBox {
             readonly: readonly$,
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
+            managerStageRatio: managerStageRatio$,
+            defaultBoxBodyStyle: defaultBoxBodyStyle$,
+            defaultBoxStageStyle: defaultBoxStageStyle$,
             collectorRect: collectorRect$,
+        };
 
+        withReadonlyValueEnhancer(this, propsValConfig);
+
+        const myReadonlyValConfig: MyReadonlyValConfig = {
             zIndex: zIndex$,
             focus: focus$,
 
-            $userContent: $userContent$,
-            $userFooter: $userFooter$,
-            $userStyles: $userStyles$,
-
             state: state$,
             minSize: minSize$,
             pxMinSize: pxMinSize$,
@@ -260,44 +260,44 @@ export class TeleBox {
             intrinsicCoord: intrinsicCoord$,
             pxIntrinsicSize: pxIntrinsicSize$,
             pxIntrinsicCoord: pxIntrinsicCoord$,
-            highlightStage: highlightStage$,
-            boxHighlightStage: boxHighlightStage$,
-            contentRect: contentRect$,
-            contentStageRect: teleStage.stageRect$,
+            bodyRect: bodyRect$,
+            stageRect: stageRect$,
         };
 
-        withReadonlyValueEnhancer(this, readonlyValConfig);
+        withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
 
         const valConfig: ValConfig = {
             title: title$,
             visible: visible$,
             resizable: resizable$,
             draggable: draggable$,
-            ratio: ratio$,
+            boxRatio: boxRatio$,
+            stageRatio: stageRatio$,
+            bodyStyle: bodyStyle$,
+            stageStyle: stageStyle$,
         };
 
-        withValueEnhancer(this, valConfig);
+        withValueEnhancer(this, valConfig, valManager);
 
         this.titleBar =
             titleBar ||
             new DefaultTitleBar({
                 readonly$: readonly$,
                 state$: state$,
-                title: title$.value,
+                title$: title$,
                 namespace: this.namespace,
                 onDragStart: (event) => this._handleTrackStart?.(event),
                 onEvent: (event) => this._delegateEvents.emit(event.type),
             });
 
         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
                     );
                 }
             })
@@ -308,15 +308,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>,
@@ -353,13 +358,6 @@ export class TeleBox {
                     );
                 }
             }),
-            root$.subscribe((root) => {
-                if (root) {
-                    root.appendChild(this.$box);
-                } else if (this.$box.parentNode) {
-                    this.$box.remove();
-                }
-            }),
         ]);
     }
 
@@ -368,6 +366,9 @@ export class TeleBox {
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     public readonly namespace: string;
 
+    /** Enable shadow DOM for box content. Default true. */
+    public readonly enableShadowDOM: boolean;
+
     public readonly events = new Emittery<
         TeleBoxEventConfig,
         TeleBoxEventConfig
@@ -465,34 +466,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,
-                rootRect.x - pxIntrinsicSize.width + 20,
-                rootRect.x + rootRect.width - 20
+                -(pxIntrinsicSize.width - 120),
+                0 + managerStageRect.width - 20
             );
-            safeY = clamp(y, rootRect.y, rootRect.y + 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
         );
@@ -515,21 +507,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;
         }
 
@@ -543,104 +534,158 @@ 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;
+        }
     }
 
-    /**
-     * Mount dom to box Footer.
-     */
-    public mountFooter(footer: HTMLElement): void {
-        this._$userFooter$.setValue(footer);
+    private $authorStage?: HTMLElement;
+
+    /** Mount dom to box stage. */
+    public mountStage(stage: HTMLElement): void {
+        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 Footer from the box.
-     */
-    public unmountFooter(): void {
-        this._$userFooter$.setValue(undefined);
+    /** Unmount content from the box. */
+    public unmountStage(): void {
+        if (this.$authorStage) {
+            this.$authorStage.remove();
+            this.$authorStage = undefined;
+        }
+        this.$stage?.remove();
     }
 
-    public getUserStyles(): HTMLStyleElement | undefined {
-        return this.$userStyles;
+    private $authorFooter?: HTMLElement;
+
+    /** Mount dom to box Footer. */
+    public mountFooter(footer: HTMLElement): void {
+        this.$authorFooter?.remove();
+        this.$authorFooter = footer;
+        this.$footer.appendChild(footer);
     }
 
-    public mountStyles(styles: string | HTMLStyleElement): void {
-        let $styles: HTMLStyleElement;
-        if (typeof styles === "string") {
-            $styles = document.createElement("style");
-            $styles.textContent = styles;
-        } else {
-            $styles = styles;
+    /** Unmount Footer from the box. */
+    public unmountFooter(): void {
+        if (this.$authorFooter) {
+            this.$authorFooter.remove();
+            this.$authorFooter = undefined;
         }
-        this._$userStyles$.setValue($styles);
     }
 
+    /** Mount styles for box content */
+    public mountStyles(styles: string): void {
+        this.$styles.textContent = styles;
+    }
+
+    /** Umount styles for box content */
     public unmountStyles(): void {
-        this._$userStyles$.setValue(undefined);
+        this.$styles.textContent = "";
+    }
+
+    /** 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. */
-    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 main area of the box. Including $body and $footer. */
+    public $main!: HTMLElement;
+
+    /** DOM of the box body */
+    public $body!: HTMLElement;
+
+    /** DOM of the box content container inside box body */
     public $content!: HTMLElement;
 
-    /** DOM of the box title bar */
+    /** DOM of the box stage area inside box body */
+    public $stage?: HTMLElement;
+
+    /** 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;
         }
 
-        this.$box = document.createElement("div");
-
-        this.$box.classList.add(this.wrapClassName("box"));
-
-        const bindClassName = <TValue>(
-            el: Element,
-            val: ReadonlyVal<TValue, boolean>,
-            className: string,
-            predicate: (value: TValue) => boolean = isTruthy
-        ): string => {
-            return this._sideEffect.add(() => {
-                const wrappedClassName = this.wrapClassName(className);
-                return val.subscribe((value) => {
-                    el.classList.toggle(wrappedClassName, predicate(value));
-                });
-            });
+        const bindBoxStates = (el: Element, disposerID?: string): string => {
+            return this._sideEffect.addDisposer(
+                [
+                    this._readonly$.subscribe((readonly) =>
+                        el.classList.toggle(
+                            this.wrapClassName("readonly"),
+                            readonly
+                        )
+                    ),
+                    this._draggable$.subscribe((draggable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-drag"),
+                            !draggable
+                        )
+                    ),
+                    this._resizable$.subscribe((resizable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-resize"),
+                            !resizable
+                        )
+                    ),
+                    this._focus$.subscribe((focus) =>
+                        el.classList.toggle(this.wrapClassName("blur"), !focus)
+                    ),
+                    this._darkMode$.subscribe((darkMode) => {
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-dark"),
+                            darkMode
+                        );
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-light"),
+                            !darkMode
+                        );
+                    }),
+                ],
+                disposerID
+            );
         };
 
-        bindClassName(this.$box, this._readonly$, "readonly");
-        bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
-        bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
-        bindClassName(this.$box, this._focus$, "blur", isFalsy);
-        bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
-        bindClassName(
-            this.$box,
-            this._darkMode$,
-            "color-scheme-light",
-            isFalsy
-        );
+        this.$box = document.createElement("div");
+        this.$box.classList.add(this.wrapClassName("box"));
+        bindBoxStates(this.$box, "bind-box-state");
 
         this._sideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");
@@ -695,6 +740,8 @@ export class TeleBox {
                 this._pxIntrinsicSize$,
                 this._pxIntrinsicCoord$,
                 this._collectorRect$,
+                this._rootRect$,
+                this._managerStageRect$,
             ],
             ([
                 maximized,
@@ -702,42 +749,58 @@ export class TeleBox {
                 pxIntrinsicSize,
                 pxIntrinsicCoord,
                 collectorRect,
+                rootRect,
+                managerStageRect,
             ]) => {
+                const styles: {
+                    x: number;
+                    y: number;
+                    width: number;
+                    height: number;
+                    scaleX: number;
+                    scaleY: number;
+                } = maximized
+                    ? {
+                          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,
+                          height: pxIntrinsicSize.height,
+                          scaleX: 1,
+                          scaleY: 1,
+                      };
                 if (minimized && collectorRect) {
-                    return {
-                        x: collectorRect.x + collectorRect.width / 2,
-                        y: collectorRect.y + collectorRect.height / 2,
-                        width: pxIntrinsicSize.width + "px",
-                        height: pxIntrinsicSize.height + "px",
-                        scaleX: collectorRect.width / pxIntrinsicSize.width,
-                        scaleY: collectorRect.height / pxIntrinsicSize.height,
-                    };
-                }
-                if (maximized) {
-                    return {
-                        x: 0,
-                        y: 0,
-                        width: "100%",
-                        height: "100%",
-                        scaleX: 1,
-                        scaleY: 1,
-                    };
+                    const { width: boxWidth, height: boxHeight } = maximized
+                        ? this.rootRect
+                        : pxIntrinsicSize;
+                    styles.x =
+                        collectorRect.x -
+                        boxWidth / 2 +
+                        collectorRect.width / 2 -
+                        managerStageRect.x;
+                    styles.y =
+                        collectorRect.y -
+                        boxHeight / 2 +
+                        collectorRect.height / 2 -
+                        managerStageRect.y;
+                    styles.scaleX = collectorRect.width / boxWidth;
+                    styles.scaleY = collectorRect.height / boxHeight;
                 }
-                return {
-                    x: pxIntrinsicCoord.x,
-                    y: pxIntrinsicCoord.y,
-                    width: pxIntrinsicSize.width + "px",
-                    height: pxIntrinsicSize.height + "px",
-                    scaleX: 1,
-                    scaleY: 1,
-                };
+                return styles;
             },
             { compare: shallowequal }
         );
 
         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,${
@@ -759,91 +822,133 @@ 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("body-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 || ""))
+        );
 
-        this._sideEffect.add(() => {
-            const observer = new ResizeObserver((entries) => {
-                const rect = entries[0]?.contentRect;
-                if (rect) {
-                    this._contentRect$.setValue({
-                        x: rect.x,
-                        y: rect.y,
-                        width: rect.width,
-                        height: rect.height,
-                    });
-                }
-            });
-            observer.observe($content);
-            return () => observer.disconnect();
-        });
-
-        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);
-                }
-            });
-        });
-
-        $contentWrap.appendChild($content);
+        $body.appendChild($content);
 
         const $footer = document.createElement("div");
         $footer.className = this.wrapClassName("footer-wrap");
         this.$footer = $footer;
 
+        $boxMain.appendChild($titleBar);
+
+        const $main = document.createElement("div");
+        $main.className = this.wrapClassName("main");
+        this.$main = $main;
+        $boxMain.appendChild($main);
+
+        const $quarantineOuter = document.createElement("div");
+        $quarantineOuter.className = this.wrapClassName("quarantine-outer");
+        $main.appendChild($quarantineOuter);
+
+        const $quarantine = document.createElement("div");
+        $quarantine.className = this.wrapClassName("quarantine");
+        $quarantine.appendChild($body);
+        $quarantine.appendChild($footer);
+
+        if (this.enableShadowDOM) {
+            bindBoxStates($quarantine, "bind-quarantine-state");
+            const $shadowStyle = document.createElement("style");
+            $shadowStyle.textContent = shadowStyles;
+            $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
+            const shadow = $quarantineOuter.attachShadow({ mode: "open" });
+            shadow.appendChild($quarantine);
+        } else {
+            $quarantineOuter.appendChild($quarantine);
+        }
+
+        this._renderResizeHandlers();
+
+        const updateBodyRect = (): void => {
+            const rect = $body.getBoundingClientRect();
+            this._bodyRect$.setValue({
+                x: 0,
+                y: 0,
+                width: rect.width,
+                height: rect.height,
+            });
+        };
         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);
+            const observer = new ResizeObserver(() => {
+                if (!this.minimized) {
+                    updateBodyRect();
                 }
             });
+            observer.observe($body);
+            return () => observer.disconnect();
         });
+        this._sideEffect.addDisposer(
+            this._minimized$.reaction((minimized) => {
+                // correct content size when restoring from minimized
+                if (!minimized) {
+                    this._sideEffect.setTimeout(
+                        updateBodyRect,
+                        400,
+                        "minimized-content-rect-fix"
+                    );
+                }
+            })
+        );
 
-        $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("box-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),
+            ],
+            "box-stage-styles"
+        );
+        return $stage;
     }
 
-    protected _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
+    private _handleTrackStart?: (ev: PointerEvent) => void;
 
-    public handleTrackStart: (ev: MouseEvent | TouchEvent) => void = (ev) => {
+    public handleTrackStart: (ev: PointerEvent) => void = (ev) => {
         return this._handleTrackStart?.(ev);
     };
 
-    protected _renderResizeHandlers(): void {
+    private _renderResizeHandlers(): void {
         const $resizeHandles = document.createElement("div");
         $resizeHandles.className = this.wrapClassName("resize-handles");
 
@@ -876,16 +981,16 @@ export class TeleBox {
 
         let trackingHandle: TeleBoxHandleType | undefined;
 
-        const handleTracking = (ev: MouseEvent | TouchEvent): void => {
-            if (this.state !== TELE_BOX_STATE.Normal) {
+        const handleTracking = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || this.state !== TELE_BOX_STATE.Normal) {
                 return;
             }
 
             preventEvent(ev);
 
-            let { pageX, pageY } = flattenEvent(ev);
-            if (pageY < this.rootRect.y) {
-                pageY = this.rootRect.y;
+            let { pageX, pageY } = ev;
+            if (pageY < 0) {
+                pageY = 0;
             }
 
             const offsetX = pageX - trackStartPageX;
@@ -947,7 +1052,11 @@ export class TeleBox {
             this.transform(newX, newY, newWidth, newHeight);
         };
 
-        const handleTrackEnd = (ev: MouseEvent | TouchEvent): void => {
+        const handleTrackEnd = (ev: PointerEvent): void => {
+            if (!ev.isPrimary) {
+                return;
+            }
+
             trackingHandle = void 0;
 
             if (!$trackMask) {
@@ -963,8 +1072,8 @@ export class TeleBox {
             $trackMask.remove();
         };
 
-        const handleTrackStart = (ev: MouseEvent | TouchEvent): void => {
-            if (this.readonly) {
+        const handleTrackStart = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || this.readonly) {
                 return;
             }
 
@@ -992,8 +1101,7 @@ export class TeleBox {
                 ({ width: trackStartWidth, height: trackStartHeight } =
                     this.pxIntrinsicSize);
 
-                ({ pageX: trackStartPageX, pageY: trackStartPageY } =
-                    flattenEvent(ev));
+                ({ pageX: trackStartPageX, pageY: trackStartPageY } = ev);
 
                 trackingHandle = target.dataset
                     .teleBoxHandle as TELE_BOX_RESIZE_HANDLE;
@@ -1015,25 +1123,24 @@ export class TeleBox {
                 this.$box.classList.add(transformingClassName);
 
                 this._sideEffect.add(() => {
-                    window.addEventListener("mousemove", handleTracking);
-                    window.addEventListener("touchmove", handleTracking, {
+                    window.addEventListener("pointermove", handleTracking, {
                         passive: false,
                     });
-                    window.addEventListener("mouseup", handleTrackEnd);
-                    window.addEventListener("touchend", handleTrackEnd, {
+                    window.addEventListener("pointerup", handleTrackEnd, {
                         passive: false,
                     });
-                    window.addEventListener("touchcancel", handleTrackEnd, {
+                    window.addEventListener("pointercancel", handleTrackEnd, {
                         passive: false,
                     });
 
                     return () => {
-                        window.removeEventListener("mousemove", handleTracking);
-                        window.removeEventListener("touchmove", handleTracking);
-                        window.removeEventListener("mouseup", handleTrackEnd);
-                        window.removeEventListener("touchend", handleTrackEnd);
                         window.removeEventListener(
-                            "touchcancel",
+                            "pointermove",
+                            handleTracking
+                        );
+                        window.removeEventListener("pointerup", handleTrackEnd);
+                        window.removeEventListener(
+                            "pointercancel",
                             handleTrackEnd
                         );
                     };
@@ -1045,18 +1152,10 @@ export class TeleBox {
 
         this._sideEffect.addEventListener(
             $resizeHandles,
-            "mousedown",
+            "pointerdown",
             handleTrackStart,
             {},
-            "box-resizeHandles-mousedown"
-        );
-
-        this._sideEffect.addEventListener(
-            $resizeHandles,
-            "touchstart",
-            handleTrackStart,
-            { passive: false },
-            "box-resizeHandles-touchstart"
+            "box-resizeHandles-pointerdown"
         );
     }
 
@@ -1090,7 +1189,21 @@ export type ReadonlyTeleBox = Pick<
     | PropKeys
     | "wrapClassName"
     | "mountContent"
+    | "unmountContent"
     | "mountFooter"
+    | "unmountFooter"
+    | "mountStage"
+    | "unmountStage"
     | "mountStyles"
+    | "unmountStyles"
+    | "setTitle"
+    | "setDraggable"
+    | "setResizable"
+    | "setVisible"
+    | "setBoxRatio"
+    | "setStageRatio"
+    | "setStageStyle"
+    | "setBodyStyle"
     | "handleTrackStart"
+    | "onValChanged"
 >;