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

package/dist/TeleBox/index.d.ts

@@ -13,9 +13,12 @@ declare 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>;
 };
-declare type ReadonlyValConfig = {
+declare type PropsValConfig = {
     darkMode: RequiredTeleBoxConfig["darkMode$"];
     fence: RequiredTeleBoxConfig["fence$"];
     minimized: RequiredTeleBoxConfig["minimized$"];
@@ -23,12 +26,13 @@ declare type ReadonlyValConfig = {
     readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
+    defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
+};
+declare 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>;
@@ -36,19 +40,19 @@ declare 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>;
 };
-declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<ReadonlyValConfig> & ValEnhancedResult<ValConfig>;
+declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig> & ValEnhancedResult<ValConfig>;
 export interface TeleBox extends CombinedValEnhancedResult {
 }
 export declare class TeleBox {
-    constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, ratio, focus, zIndex, titleBar, content, footer, styles, highlightStage, darkMode$, fence$, minimized$, maximized$, readonly$, root$, rootRect$, managerStageRect$, stageRatio$, collectorRect$, managerHighlightStage$, }: TeleBoxConfig);
+    constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, boxRatio, focus, zIndex, stageRatio, enableShadowDOM, titleBar, content, stage, footer, styles, userStyles, bodyStyle, stageStyle, darkMode$, fence$, minimized$, maximized$, readonly$, root, rootRect$, managerStageRect$, managerStageRatio$, defaultBoxBodyStyle$, defaultBoxStageStyle$, collectorRect$, }: TeleBoxConfig);
     readonly id: string;
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     readonly namespace: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM: boolean;
     readonly events: Emittery<{
         dark_mode: boolean;
         prefers_color_scheme: "light" | "dark" | "auto";
@@ -149,39 +153,50 @@ export declare class TeleBox {
      * @returns this
      */
     protected transform(x: number, y: number, width: number, height: number, skipUpdate?: boolean): void;
-    /**
-     * Mount dom to box content.
-     */
+    private $authorContent?;
+    /** Mount dom to box content. */
     mountContent(content: HTMLElement): void;
-    /**
-     * Unmount content from the box.
-     */
+    /**  Unmount content from the box. */
     unmountContent(): void;
-    /**
-     * Mount dom to box Footer.
-     */
+    private $authorStage?;
+    /** Mount dom to box stage. */
+    mountStage(stage: HTMLElement): void;
+    /** Unmount content from the box. */
+    unmountStage(): void;
+    private $authorFooter?;
+    /** Mount dom to box Footer. */
     mountFooter(footer: HTMLElement): void;
-    /**
-     * Unmount Footer from the box.
-     */
+    /** Unmount Footer from the box. */
     unmountFooter(): void;
-    getUserStyles(): HTMLStyleElement | undefined;
-    mountStyles(styles: string | HTMLStyleElement): void;
+    /** Mount styles for box content */
+    mountStyles(styles: string): void;
+    /** Umount styles for box content */
     unmountStyles(): void;
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. */
-    setHighlightStage(highlightStage: boolean | null): void;
+    /** Mount user styles for box content */
+    mountUserStyles(styles: string): void;
+    /** Umount user styles for box content */
+    unmountUserStyles(): void;
     /** DOM of the box */
     $box: HTMLElement;
-    /** DOM of the box content */
+    /** DOM of the box body */
+    $body: HTMLElement;
+    /** DOM of the box content container inside box body */
     $content: HTMLElement;
-    /** DOM of the box title bar */
+    /** DOM of the box stage area inside box body */
+    $stage?: HTMLElement;
+    /** DOM of custom box content styles */
+    $styles: HTMLStyleElement;
+    /** DOM of end user custom box content styles */
+    $userStyles: HTMLStyleElement;
+    /** DOM of the box title bar container */
     $titleBar: HTMLElement;
-    /** DOM of the box footer */
+    /** DOM of the box footer container */
     $footer: HTMLElement;
-    protected render(): HTMLElement;
-    protected _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
+    private _render;
+    private _renderStage;
+    private _handleTrackStart?;
     handleTrackStart: (ev: MouseEvent | TouchEvent) => void;
-    protected _renderResizeHandlers(): void;
+    private _renderResizeHandlers;
     destroy(): Promise<void>;
     /**
      * Wrap a className with namespace
@@ -189,4 +204,4 @@ export declare class TeleBox {
     wrapClassName(className: string): string;
 }
 declare type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox ? TeleBox[K] extends Function ? never : K : never;
-export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "mountFooter" | "mountStyles" | "handleTrackStart">;
+export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "unmountContent" | "mountFooter" | "unmountFooter" | "mountStage" | "unmountStage" | "mountStyles" | "unmountStyles" | "setTitle" | "setDraggable" | "setResizable" | "setVisible" | "setBoxRatio" | "setStageRatio" | "setStageStyle" | "setBodyStyle" | "handleTrackStart" | "onValChanged">;

package/dist/TeleBox/typings.d.ts

@@ -44,23 +44,33 @@ export interface TeleBoxConfig {
     /** Able to drag box window Default true. */
     readonly draggable?: boolean;
     /** Fixed height/width ratio for box window. No ratio limit if <= 0. Default -1. */
-    readonly ratio?: number;
+    readonly boxRatio?: number;
     /** Box focused. */
     readonly focus?: boolean;
     /** Base z-index for box. */
     readonly zIndex?: number;
+    /** Box content stage ratio. Follow manager stage ratio if null. Default null. */
+    readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM?: boolean;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
-    /** Box content. */
+    /** Box content element. */
     readonly content?: HTMLElement;
-    /** Box footer. */
+    /** Stage element. */
+    readonly stage?: HTMLElement;
+    /** Box footer element. */
     readonly footer?: HTMLElement;
     /** Box content styles. */
-    readonly styles?: HTMLStyleElement;
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. Default null. */
-    readonly highlightStage?: boolean | null;
+    readonly styles?: string;
+    /** Box content styles from end users. */
+    readonly userStyles?: string;
+    /** Custom styles for box content container. Inherit from manager container style if null. Default null. */
+    readonly bodyStyle?: string | null;
+    /** Custom styles for box content stage. Inherit from manager stage style if null. Default null. */
+    readonly stageStyle?: string | null;
     /** Actual Box Dark Mode */
     readonly darkMode$: ReadonlyVal<boolean, boolean>;
     /** Restrict box to always be within the stage area. Default false. */
@@ -72,17 +82,19 @@ export interface TeleBoxConfig {
     /** Is box readonly */
     readonly readonly$: ReadonlyVal<boolean, boolean>;
     /** Root element to mount boxes */
-    readonly root$: ReadonlyVal<HTMLElement | null>;
+    readonly root: HTMLElement;
     /** Position and dimension of root element */
     readonly rootRect$: ReadonlyVal<TeleBoxRect>;
     /** Position and dimension of stage area */
     readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
     /** Stage area height/with ratio. No ratio if <= 0. */
-    readonly stageRatio$: ReadonlyVal<number, boolean>;
+    readonly managerStageRatio$: ReadonlyVal<number, boolean>;
+    /** Default content styles for all boxes */
+    readonly defaultBoxBodyStyle$: ReadonlyVal<string | null>;
+    /** Default stage styles for all boxes */
+    readonly defaultBoxStageStyle$: ReadonlyVal<string | null>;
     /** Position and dimension of collector */
     readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
-    /** highlight stage settings from manager */
-    readonly managerHighlightStage$: ReadonlyVal<boolean>;
 }
 declare type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 export declare type TeleBoxEventConfig = CheckTeleBoxConfig<{

package/dist/TeleBox/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TeleBoxRect } from "./typings";
+export declare function calcStageRect([rootRect, ratio]: [
+    TeleBoxRect,
+    number
+]): TeleBoxRect;

package/dist/TeleBoxCollector/index.d.ts

@@ -11,22 +11,23 @@ export interface TeleBoxCollectorConfig {
     minimized$: Val<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
 }
 declare type ValConfig = {
     styles: Val<TeleStyles>;
-    el: Val<HTMLElement>;
+    $collector: Val<HTMLElement>;
 };
-declare type ReadonlyValConfig = {
+declare type PropsValConfig = {
+    root: TeleBoxCollectorConfig["root$"];
+};
+declare type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
-    root: ReadonlyVal<HTMLElement | null>;
 };
-declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
+declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig>;
 export interface TeleBoxCollector extends CombinedValEnhancedResult {
 }
 export declare class TeleBoxCollector {
-    constructor({ minimized$, readonly$, darkMode$, rootRect$, namespace, styles, root$, }: TeleBoxCollectorConfig);
+    constructor({ minimized$, readonly$, darkMode$, namespace, styles, root$, }: TeleBoxCollectorConfig);
     readonly namespace: string;
     protected readonly _sideEffect: SideEffectManager;
     destroy(): void;

package/dist/TeleBoxManager/MaxTitleBar/index.d.ts

@@ -9,7 +9,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode$: ReadonlyVal<boolean>;
     boxes$: ReadonlyVal<TeleBox[]>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
-    root$: ReadonlyVal<HTMLElement | null>;
+    root: HTMLElement;
 }
 export declare class MaxTitleBar extends DefaultTitleBar {
     constructor(config: MaxTitleBarConfig);

package/dist/TeleBoxManager/index.d.ts

@@ -1,3 +1,4 @@
+import "./style.scss";
 import { SideEffectManager } from "side-effect-manager";
 import type { ReadonlyVal, ValEnhancedResult, ReadonlyValEnhancedResult } from "value-enhancer";
 import { Val } from "value-enhancer";
@@ -23,13 +24,18 @@ declare type ValConfig = {
     maximized: Val<boolean, boolean>;
     fence: Val<boolean, boolean>;
     stageRatio: Val<number, boolean>;
-    highlightStage: Val<boolean, boolean>;
+    containerStyle: Val<string>;
+    stageStyle: Val<string>;
+    defaultBoxBodyStyle: Val<string | null>;
+    defaultBoxStageStyle: Val<string | null>;
 };
 declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
 export interface TeleBoxManager extends CombinedValEnhancedResult {
 }
 export declare class TeleBoxManager {
-    constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, highlightStage, }?: TeleBoxManagerConfig);
+    constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, containerStyle, stageStyle, defaultBoxBodyStyle, defaultBoxStageStyle, }?: TeleBoxManagerConfig);
+    readonly $container: HTMLDivElement;
+    readonly $stage: HTMLDivElement;
     get boxes(): ReadonlyArray<TeleBox>;
     get topBox(): TeleBox | undefined;
     readonly events: Emittery<{

package/dist/TeleBoxManager/typings.d.ts

@@ -20,13 +20,19 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     readonly minimized?: boolean;
     /** Is box readonly */
     readonly readonly?: boolean;
-    /** Show stage frame and grey-out the non-stage area. Default true. */
-    readonly highlightStage?: boolean;
+    /** Custom styles for telebox manager container */
+    readonly containerStyle?: string;
+    /** Custom styles for telebox manager stage */
+    readonly stageStyle?: string;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxStageStyle?: string | null;
 }
-declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "ratio" | "zIndex";
-export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus">;
-export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "ratio" | "zIndex" | "id" | "focus">;
-export declare type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer">;
+declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "boxRatio" | "zIndex" | "stageRatio";
+export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer" | "styles" | "bodyStyle" | "stageStyle" | "id" | "focus" | "enableShadowDOM">;
+export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "boxRatio" | "stageRatio" | "zIndex" | "id" | "focus">;
+export declare type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer">;
 declare type CheckTeleBoxManagerConfig<T extends Record<`${TELE_BOX_MANAGER_EVENT}`, any>> = T;
 export declare type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     focused: ReadonlyTeleBox | undefined;

package/dist/TeleTitleBar/DefaultTitleBar/index.d.ts

@@ -2,7 +2,7 @@ import "./style.scss";
 import { SideEffectManager } from "side-effect-manager";
 import type { TeleBoxState } from "../../TeleBox/typings";
 import type { TeleTitleBar, TeleTitleBarConfig, TeleTitleBarEvent } from "../typings";
-import { Val } from "value-enhancer";
+import type { ReadonlyVal } from "value-enhancer";
 export declare type DefaultTitleBarButton = TeleTitleBarEvent & {
     readonly iconClassName: string;
     readonly isActive?: (state: TeleBoxState) => boolean;
@@ -11,12 +11,10 @@ export interface DefaultTitleBarConfig extends TeleTitleBarConfig {
     buttons?: ReadonlyArray<DefaultTitleBarButton>;
 }
 export declare class DefaultTitleBar implements TeleTitleBar {
-    constructor({ readonly$, state$, title, buttons, onEvent, onDragStart, namespace, }: DefaultTitleBarConfig);
+    constructor({ readonly$, state$, title$, buttons, onEvent, onDragStart, namespace, }: DefaultTitleBarConfig);
     readonly namespace: string;
     $titleBar: HTMLElement | undefined;
     $dragArea: HTMLElement;
-    get title(): string;
-    setTitle(title: string): void;
     render(): HTMLElement;
     renderDragArea(): HTMLElement;
     dragHandle(): HTMLElement | undefined;
@@ -25,7 +23,7 @@ export declare class DefaultTitleBar implements TeleTitleBar {
     onEvent?: TeleTitleBarConfig["onEvent"];
     onDragStart?: TeleTitleBarConfig["onDragStart"];
     protected readonly$: TeleTitleBarConfig["readonly$"];
-    protected title$: Val<string>;
+    protected title$: ReadonlyVal<string>;
     protected buttons: ReadonlyArray<DefaultTitleBarButton>;
     protected state$: TeleTitleBarConfig["state$"];
     protected sideEffect: SideEffectManager;

package/dist/TeleTitleBar/typings.d.ts

@@ -9,7 +9,7 @@ export declare type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> = U
 } : never;
 export interface TeleTitleBarConfig {
     readonly$: ReadonlyVal<boolean, boolean>;
-    title?: string;
+    title$: ReadonlyVal<string, boolean>;
     state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;

package/dist/style.css

@@ -1 +1 @@
-.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1);background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4, .9, .71, 1.02),height .4s cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px 0 rgba(47,65,146,.15);border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap::before{content:"";display:block;flex:1}.telebox-resize-handle{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4, .9, .71, 1.02),height 50ms cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7, 0, .84, 0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;box-sizing:border-box;height:26px;display:flex;align-items:center;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==")}.telebox-titlebar-icon-maximize.is-active{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K")}.telebox-titlebar-icon-close{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-box-stage-container{display:none;position:absolute;z-index:99;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.telebox-box-stage-container.is-active{display:flex}.telebox-box-stage-mask{background:rgba(0,0,0,.05)}.telebox-box-stage-frame{flex:1;position:relative}.telebox-box-stage-frame-corner{position:absolute;width:8px;height:8px}.telebox-box-stage-frame-corner.is-0{top:0;left:0}.telebox-box-stage-frame-corner.is-1{top:0;right:0}.telebox-box-stage-frame-corner.is-2{bottom:0;left:0}.telebox-box-stage-frame-corner.is-3{bottom:0;right:0}.telebox-collector{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px 0 rgba(47,65,146,.15);cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;display:none;position:absolute;top:0;left:0;z-index:50000}.telebox-max-titlebar .telebox-title{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8);background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8)}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}
+.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-quarantine{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.telebox-body-wrap{color:#191919;color:var(--tele-box-color, #191919);flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative;background-color:#f9f9f9;background-color:var(--tele-manager-container-background, #f9f9f9)}.telebox-box-stage{position:absolute;z-index:1;overflow:hidden;background-color:#fff;background-color:var(--tele-manager-stage-background, #fff);box-shadow:0 0 16px #00000014;box-shadow:var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, .08))}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-color-scheme-dark .telebox-body-wrap{color:#e9e9e9;color:var(--tele-box-color-dark, #e9e9e9)}.telebox-color-scheme-dark .telebox-content{background-color:#25282e;background-color:var(--tele-manager-container-background-dark, #25282e)}.telebox-color-scheme-dark .telebox-box-stage{background-color:#272a30;background-color:var(--tele-manager-stage-background-dark, #272a30);box-shadow:0 0 16px #0000003d;box-shadow:var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, .24))}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{border:1px solid #e3e3ec;border:var(--tele-box-border, 1px solid #e3e3ec);box-shadow:0 4px 10px #2f419226;box-shadow:var(--tele-box-shadow, 0px 4px 10px 0px rgba(47, 65, 146, .15));position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:6px}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-quarantine-wrap{all:initial;flex:1;width:100%;overflow:hidden}.telebox-resize-handle{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width .05s cubic-bezier(.4,.9,.71,1.02),height .05s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{border:1px solid #383b42;border:var(--tele-box-border-dark, 1px solid #383b42);box-shadow:0 4px 10px #383b4226;box-shadow:var(--tele-box-shadow-dark, 0px 4px 10px 0px rgba(56, 59, 66, .15))}.telebox-titlebar{-webkit-touch-callout:none;-webkit-user-select:none;box-sizing:border-box;height:26px;display:flex;align-items:center;user-select:none;touch-action:manipulation;color:#191919;color:var(--tele-titlebar-color, #191919);background-color:#fff;background-color:var(--tele-titlebar-background, #fff);border-bottom:1px solid #eeeef7;border-bottom:var(--tele-titlebar-border-bottom, 1px solid #eeeef7)}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;color:#191919;color:var(--tele-titlebar-color, #191919);overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis}.telebox-drag-area{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:22px;height:22px;padding:0;outline:none;border:none;background:transparent;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-minimize, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-titlebar-icon-maximize{background:center/cover no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);background-image:var(--tele-titlebar-icon-maximize, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==))}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);background-image:var(--tele-titlebar-icon-maximize-active, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K))}.telebox-titlebar-icon-close{background:center/cover no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-close, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9;color:var(--tele-titlebar-color-dark, #e9e9e9)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;color:var(--tele-titlebar-color-dark, #e9e9e9);background-color:#383b42;background-color:var(--tele-titlebar-background-dark, #383b42);border-bottom:none;border-bottom:var(--tele-titlebar-border-bottom-dark, none)}.telebox-color-scheme-dark .telebox-titlebar-icon-minimize{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-minimize-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-color-scheme-dark .telebox-titlebar-icon-maximize{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);background-image:var(--tele-titlebar-icon-maximize-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==))}.telebox-color-scheme-dark .telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);background-image:var(--tele-titlebar-icon-maximize-active-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K))}.telebox-color-scheme-dark .telebox-titlebar-icon-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-close-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-manager-container{position:relative;overflow:hidden;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#f9f9f9;background:var(--tele-manager-container-background, #f9f9f9)}.telebox-manager-container.is-maximized>.telebox-manager-stage,.telebox-manager-container.is-minimized>.telebox-manager-stage{overflow:visible}.telebox-manager-stage{position:relative;overflow:hidden;background:#fff;background:var(--tele-manager-stage-background, #fff);box-shadow:0 0 16px #00000014;box-shadow:var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, .08))}.telebox-color-scheme-dark.telebox-manager-container{background:#25282e;background:var(--tele-manager-container-background-dark, #25282e)}.telebox-color-scheme-dark.telebox-manager-container>.telebox-manager-stage{background:#272a30;background:var(--tele-manager-stage-background-dark, #272a30);box-shadow:0 0 16px #0000003d;box-shadow:var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, .24))}.telebox-collector{-webkit-touch-callout:none;-webkit-user-select:none;visibility:hidden;display:block;position:absolute;z-index:5120;width:40px;height:40px;margin:0;padding:0;border:none;outline:none;font-size:0;border-radius:50%;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent;background-color:#fff;background-color:var(--tele-collector-background, #fff);box-shadow:0 2px 6px #2f419226;box-shadow:var(--tele-collector-shadow, 0px 2px 6px 0px rgba(47, 65, 146, .15))}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#383b42;background-color:var(--tele-collector-background-dark, #383b42);box-shadow:0 2px 6px #2f419226;box-shadow:var(--tele-collector-shadow-dark, 0px 2px 6px 0px rgba(47, 65, 146, .15))}.telebox-max-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;display:none;position:absolute;top:0;left:0;width:100%;z-index:5100;border-top-left-radius:6px;border-top-right-radius:6px}.telebox-max-titlebar .telebox-title,.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:4px;width:4px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:2px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:150px;padding:0 26px 0 16px;outline:none;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right-width:1px;border-right-style:solid;cursor:pointer;user-select:none;color:#7b88a0;color:var(--tele-titlebar-tab-color, #7b88a0);background-color:transparent;background-color:var(--tele-titlebar-tab-background, transparent);border-right-color:#e5e5f0;border-right-color:var(--tele-titlebar-tab-divider-color, #e5e5f0)}.telebox-titles-tab-focus{color:#357bf6;color:var(--tele-titlebar-tab-focus-color, #357bf6)}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-titles-tab{color:#e9e9e9;color:var(--tele-titlebar-tab-color-dark, #e9e9e9);background-color:transparent;background-color:var(--tele-titlebar-tab-background-dark, transparent);border-right-color:#7b88a0;border-right-color:var(--tele-titlebar-tab-divider-color-dark, #7b88a0)}.telebox-color-scheme-dark .telebox-titles-tab-focus{color:#357bf6;color:var(--tele-titlebar-tab-focus-color-dark, #357bf6)}

package/dist/telebox-insider.cjs.js

@@ -1,2 +1,3 @@
-"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,o=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,n=(e,t)=>{for(var s in t||(t={}))a.call(t,s)&&o(e,s,t[s]);if(i)for(var s of i(t))r.call(t,s)&&o(e,s,t[s]);return e};Object.defineProperty(exports,"__esModule",{value:!0}),exports[Symbol.toStringTag]="Module";var l=require("emittery"),h=require("stylefire"),d=require("shallowequal"),c=require("side-effect-manager"),E=require("value-enhancer"),u=require("@juggle/resize-observer");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x,p,_,g,f,b=m(l),$=m(h),v=m(d);exports.TELE_BOX_COLOR_SCHEME=void 0,(x=exports.TELE_BOX_COLOR_SCHEME||(exports.TELE_BOX_COLOR_SCHEME={})).Light="light",x.Dark="dark",x.Auto="auto",exports.TELE_BOX_STATE=void 0,(p=exports.TELE_BOX_STATE||(exports.TELE_BOX_STATE={})).Normal="normal",p.Minimized="minimized",p.Maximized="maximized",exports.TELE_BOX_EVENT=void 0,(_=exports.TELE_BOX_EVENT||(exports.TELE_BOX_EVENT={})).DarkMode="dark_mode",_.PrefersColorScheme="prefers_color_scheme",_.Close="close",_.Focus="focus",_.Blur="blur",_.IntrinsicMove="intrinsic_move",_.IntrinsicResize="intrinsic_resize",_.ZIndex="z_index",_.State="state",_.Minimized="minimized",_.Maximized="maximized",_.Readonly="readonly",_.Destroyed="destroyed",exports.TELE_BOX_DELEGATE_EVENT=void 0,(g=exports.TELE_BOX_DELEGATE_EVENT||(exports.TELE_BOX_DELEGATE_EVENT={})).Close="close",g.Maximize="maximize",g.Minimize="minimize",exports.TELE_BOX_RESIZE_HANDLE=void 0,(f=exports.TELE_BOX_RESIZE_HANDLE||(exports.TELE_BOX_RESIZE_HANDLE={})).North="n",f.South="s",f.West="w",f.East="e",f.NorthWest="nw",f.NorthEast="ne",f.SouthEast="se",f.SouthWest="sw";function w(e,t,s){return Math.min(Math.max(e,t),s)}function T(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function B(e){return e.touches?e.touches[0]:e}let N=1;function C(){return"New Box "+N++}function L(e){return Boolean(e)}function y(e){return!e}class z{constructor({readonly$:e,state$:t,title:s="",buttons:i,onEvent:a,onDragStart:r,namespace:o="telebox"}){this.sideEffect=new c.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now();s-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=s,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now(),{clientX:i=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};s-this.lastTitleBarTouch.timestamp<=500?Math.abs(i-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=s,this.lastTitleBarTouch.clientX=i,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=new E.Val(s),this.onEvent=a,this.onDragStart=r,this.namespace=o,this.buttons=i||[{type:exports.TELE_BOX_DELEGATE_EVENT.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:exports.TELE_BOX_DELEGATE_EVENT.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===exports.TELE_BOX_STATE.Maximized},{type:exports.TELE_BOX_DELEGATE_EVENT.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}get title(){return this.title$.value}setTitle(e){this.title$.setValue(e)}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const s=document.createElement("div");s.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const i=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=i,a.dataset.teleTitleBarNoDblClick="true",s.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,i)=>{var a;t.isActive&&(null==(a=s.children[i])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(s,"click",(e=>{var t;if(this.readonly$.value)return;const s=e.target,i=Number(null==(t=s.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(i)&&i<this.buttons.length){T(e);const t=this.buttons[i];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(s)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class S{constructor({namespace:e,rootRect$:t,ratio$:s,highlightStage$:i,root$:a}){this._sideEffect=new c.SideEffectManager,this.namespace=e,this.highlightStage$=i,this.stageRect$=E.combine([t,i,s],(([e,t,s])=>{if(!t)return e;if(s<=0||e.width<=0||e.height<=0)return e;const i=e.width*s;if(i===e.height)return e;if(i<e.height)return{x:0,y:(e.height-i)/2,width:e.width,height:i};const a=e.height/s;return{x:(e.width-a)/2,y:0,width:a,height:e.height}}),{compare:v.default}),this._sideEffect.addDisposer(E.combine([a,i]).subscribe((([e,t])=>{var s;e&&t?e.appendChild(this.render()):(null==(s=this.$boxStage)?void 0:s.parentNode)&&this.$boxStage.remove()})))}render(){if(this.$boxStage)return this.$boxStage;const e=document.createElement("div");e.className=this.wrapClassName("box-stage-container");const t=document.createElement("div");t.className=this.wrapClassName("box-stage-mask");const s=document.createElement("div");s.className=this.wrapClassName("box-stage-mask");const i=document.createElement("div");i.className=this.wrapClassName("box-stage-frame");const[a,r,o,n]=["M0 8V0h8v2H2v6H0Z","M8 8V0H0v2h6v6h2Z","M0 0v8h8V6H2V0H0Z","M8 0v8H0V6h6V0h2Z"].map(((e,t)=>{const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("viewBox","0 0 8 8"),s.setAttribute("class",`${this.wrapClassName("box-stage-frame-corner")} is-${t}`);const i=document.createElementNS("http://www.w3.org/2000/svg","path");return i.setAttribute("d",e),i.setAttribute("fill","#3381FF"),s.appendChild(i),s}));return i.appendChild(a),i.appendChild(o),i.appendChild(r),i.appendChild(n),e.appendChild(t),e.appendChild(i),e.appendChild(s),this._sideEffect.addDisposer(this.highlightStage$.subscribe((t=>{e.classList.toggle("is-active",t)}))),this._sideEffect.addDisposer(E.combine([this.highlightStage$,this.stageRect$]).subscribe((([i,a])=>{i&&(a.x>0?(e.style.flexDirection="row",t.style.width=`${a.x}px`,t.style.height="",s.style.width=`${a.x}px`,s.style.height=""):a.y>0&&(e.style.flexDirection="column",t.style.width="",t.style.height=`${a.y}px`,s.style.width="",s.style.height=`${a.y}px`))}))),this.$boxStage=e,e}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}const V=window.ResizeObserver||u.ResizeObserver;class M{constructor({id:e=c.genUID(),title:t=C(),namespace:s="telebox",visible:i=!0,width:a=.5,height:r=.5,minWidth:o=0,minHeight:n=0,x:l=.1,y:h=.1,resizable:d=!0,draggable:u=!0,ratio:m=-1,focus:x=!1,zIndex:p=100,titleBar:_,content:g,footer:f,styles:$,highlightStage:T=null,darkMode$:B,fence$:N,minimized$:L,maximized$:y,readonly$:V,root$:M,rootRect$:A,managerStageRect$:O,stageRatio$:R,collectorRect$:X,managerHighlightStage$:I}){this.events=new b.default,this._delegateEvents=new b.default,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new c.SideEffectManager,this.id=e,this.namespace=s;const D=new E.Val(t),k=new E.Val(i),H=new E.Val(d),G=new E.Val(u),Z=new E.Val(m),W=new E.Val(p),Y=new E.Val(x),P=new E.Val(g),j=new E.Val(f),F=new E.Val($),q=E.combine([L,y],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal)),J=new E.Val({width:w(o,0,1),height:w(n,0,1)},{compare:v.default}),Q=E.combine([J,O],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:v.default}),U=new E.Val({width:a,height:r},{compare:v.default});this._sideEffect.addDisposer(J.reaction(((e,t)=>{U.setValue({width:Math.max(a,e.width),height:Math.max(r,e.height)},t)})));const K=new E.Val({x:l,y:h},{compare:v.default}),ee=E.combine([U,O],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:v.default}),te=E.combine([K,O],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:v.default}),se=new E.Val(T),ie=E.combine([y,se,I],(([e,t,s])=>null===t?s&&e:t)),ae=new E.Val(null),re=new E.Val(A.value,{compare:v.default}),oe=new S({namespace:s,root$:ae,rootRect$:re,ratio$:R,highlightStage$:ie});this._sideEffect.addDisposer((()=>oe.destroy()));const ne={darkMode:B,fence:N,minimized:L,maximized:y,readonly:V,rootRect:A,managerStageRect:O,collectorRect:X,zIndex:W,focus:Y,$userContent:P,$userFooter:j,$userStyles:F,state:q,minSize:J,pxMinSize:Q,intrinsicSize:U,intrinsicCoord:K,pxIntrinsicSize:ee,pxIntrinsicCoord:te,highlightStage:ie,boxHighlightStage:se,contentRect:re,contentStageRect:oe.stageRect$};E.withReadonlyValueEnhancer(this,ne);const le={title:D,visible:k,resizable:H,draggable:G,ratio:Z};E.withValueEnhancer(this,le),this.titleBar=_||new z({readonly$:V,state$:q,title:D.value,namespace:this.namespace,onDragStart:e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},onEvent:e=>this._delegateEvents.emit(e.type)}),this._sideEffect.addDisposer(Z.subscribe((e=>{e>0&&this.transform(te.value.x,te.value.y,ee.value.width,ee.value.height,!0)}))),this._sideEffect.addDisposer(N.subscribe((e=>{e&&this.move(te.value.x,te.value.y,!0)}))),this.$box=this.render(),ae.setValue(this.$content.parentElement);const he=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,s)=>{s||this.events.emit(t,e)})))};he(B,exports.TELE_BOX_EVENT.DarkMode),he(V,exports.TELE_BOX_EVENT.Readonly),he(W,exports.TELE_BOX_EVENT.ZIndex),he(L,exports.TELE_BOX_EVENT.Minimized),he(y,exports.TELE_BOX_EVENT.Maximized),he(q,exports.TELE_BOX_EVENT.State),he(U,exports.TELE_BOX_EVENT.IntrinsicResize),he(K,exports.TELE_BOX_EVENT.IntrinsicMove),this._sideEffect.addDisposer([k.reaction(((e,t)=>{t||e||this.events.emit(exports.TELE_BOX_EVENT.Close)})),Y.reaction(((e,t)=>{t||this.events.emit(e?exports.TELE_BOX_EVENT.Focus:exports.TELE_BOX_EVENT.Blur)})),M.subscribe((e=>{e?e.appendChild(this.$box):this.$box.parentNode&&this.$box.remove()}))])}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){this._minSize$.setValue({width:e,height:this.minHeight},t)}setMinHeight(e,t=!1){this._minSize$.setValue({width:this.minWidth,height:e},t)}resize(e,t,s=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},s)}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}move(e,t,s=!1){let i,a;const r=this.managerStageRect,o=this.pxIntrinsicSize;if(this.fence)i=w(e,r.x,r.x+r.width-o.width),a=w(t,r.y,r.y+r.height-o.height);else{const s=this.rootRect;i=w(e,s.x-o.width+20,s.x+s.width-20),a=w(t,s.y,s.y+s.height-20)}this._intrinsicCoord$.setValue({x:(i-r.x)/r.width,y:(a-r.y)/r.height},s)}transform(e,t,s,i,a=!1){const r=this.managerStageRect,o=this.rootRect;if(s=Math.max(s,this.pxMinSize.width),i=Math.max(i,this.pxMinSize.height),this.ratio>0){const e=this.ratio*s;t!==this.pxIntrinsicCoord.y&&(t-=e-i),i=e}t<o.y&&(t=o.y,i=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:s/r.width,height:i/r.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountFooter(e){this._$userFooter$.setValue(e)}unmountFooter(){this._$userFooter$.setValue(void 0)}getUserStyles(){return this.$userStyles}mountStyles(e){let t;"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this._$userStyles$.setValue(t)}unmountStyles(){this._$userStyles$.setValue(void 0)}setHighlightStage(e){this._boxHighlightStage$.setValue(e)}render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,s,i=L)=>this._sideEffect.add((()=>{const a=this.wrapClassName(s);return t.subscribe((t=>{e.classList.toggle(a,i(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",y),e(this.$box,this._resizable$,"no-resize",y),e(this.$box,this._focus$,"blur",y),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",y),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),s="box-maximized-timer";return this._state$.subscribe((i=>{this.$box.classList.toggle(e,i===exports.TELE_BOX_STATE.Minimized),i===exports.TELE_BOX_STATE.Maximized?(this._sideEffect.flush(s),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,s)}))})),this._sideEffect.addDisposer(this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"}))),this._sideEffect.addDisposer(this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))),this.$box.dataset.teleBoxID=this.id;const t=$.default(this.$box),s=E.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,s,i,a])=>t&&a?{x:a.x+a.width/2,y:a.y+a.height/2,width:s.width+"px",height:s.height+"px",scaleX:a.width/s.width,scaleY:a.height/s.height}:e?{x:0,y:0,width:"100%",height:"100%",scaleX:1,scaleY:1}:{x:i.x,y:i.y,width:s.width+"px",height:s.height+"px",scaleX:1,scaleY:1}),{compare:v.default}),i=s.value;this.$box.style.width=i.width,this.$box.style.height=i.height,this.$box.style.transform=`translate(${i.x-10}px,${i.y-10}px)`,this._sideEffect.addDisposer(s.subscribe((e=>{t.set(e)})));const a=document.createElement("div");a.className=this.wrapClassName("box-main"),this.$box.appendChild(a);const r=document.createElement("div");r.className=this.wrapClassName("titlebar-wrap"),r.appendChild(this.titleBar.render()),this.$titleBar=r;const o=document.createElement("div");o.className=this.wrapClassName("content-wrap");const n=document.createElement("div");n.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=n,this._sideEffect.add((()=>{const e=new V((e=>{var t;const s=null==(t=e[0])?void 0:t.contentRect;s&&this._contentRect$.setValue({x:s.x,y:s.y,width:s.width,height:s.height})}));return e.observe(n),()=>e.disconnect()})),this._sideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&o.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),o.appendChild(n);const l=document.createElement("div");return l.className=this.wrapClassName("footer-wrap"),this.$footer=l,this._sideEffect.add((()=>{let e;return this._$userFooter$.subscribe((t=>{e&&e.remove(),e=t,t&&l.appendChild(t)}))})),a.appendChild(r),a.appendChild(o),a.appendChild(l),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(exports.TELE_BOX_RESIZE_HANDLE).forEach((t=>{const s=document.createElement("div");s.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),s.dataset.teleBoxHandle=t,e.appendChild(s)})),this.$box.appendChild(e);const t="handle-tracking-listener",s=this.wrapClassName("transforming");let i,a,r=0,o=0,n=0,l=0,h=0,d=0;const c=e=>{if(this.state!==exports.TELE_BOX_STATE.Normal)return;T(e);let{pageX:t,pageY:s}=B(e);s<this.rootRect.y&&(s=this.rootRect.y);const i=t-h,c=s-d;let{x:E,y:u}=this.pxIntrinsicCoord,{width:m,height:x}=this.pxIntrinsicSize;switch(a){case exports.TELE_BOX_RESIZE_HANDLE.North:u=o+c,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.South:x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.West:E=r+i,m=n-i;break;case exports.TELE_BOX_RESIZE_HANDLE.East:m=n+i;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthWest:E=r+i,u=o+c,m=n-i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthEast:u=o+c,m=n+i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthEast:m=n+i,x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthWest:E=r+i,m=n-i,x=l+c;break;default:return void this.move(r+i,o+c)}this.transform(E,u,m,x)},E=e=>{a=void 0,i&&(T(e),this.$box.classList.toggle(s,!1),this._sideEffect.flush(t),i.remove())},u=e=>{var u;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==exports.TELE_BOX_STATE.Normal)return;const m=e.target;if(null==(u=m.dataset)?void 0:u.teleBoxHandle){T(e),({x:r,y:o}=this.pxIntrinsicCoord),({width:n,height:l}=this.pxIntrinsicSize),({pageX:h,pageY:d}=B(e)),a=m.dataset.teleBoxHandle,i||(i=document.createElement("div"));const u=a?this.wrapClassName(`cursor-${a}`):"";i.className=this.wrapClassName("track-mask"+(u?` ${u}`:"")),this.$box.appendChild(i),this.$box.classList.add(s),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",E),window.addEventListener("touchend",E,{passive:!1}),window.addEventListener("touchcancel",E,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",E),window.removeEventListener("touchend",E),window.removeEventListener("touchcancel",E)})),t)}};this._handleTrackStart=u,this._sideEffect.addEventListener(e,"mousedown",u,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",u,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(exports.TELE_BOX_EVENT.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var A;class O{constructor({minimized$:e,readonly$:t,darkMode$:s,rootRect$:i,namespace:a="telebox",styles:r={},root$:o}){this._sideEffect=new c.SideEffectManager,this.namespace=a;const n=new E.Val(void 0),l=e,h=new E.Val(r),d=new E.Val(document.createElement("button")),u={styles:h,el:d};E.withValueEnhancer(this,u);const m={rect:n,visible:l,root:o};E.withReadonlyValueEnhancer(this,m),d.value.className=this.wrapClassName("collector"),d.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(d.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([l.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-readonly"),e)})),s.subscribe((e=>{a.classList.toggle(this.wrapClassName("color-scheme-dark"),e),a.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),h.subscribe((e=>{Object.keys(e).forEach((t=>{const s=e[t];null!=s&&(a.style[t]=s)}))})),o.subscribe((e=>{e&&e.appendChild(a)})),E.combine([e,i,o]).subscribe((([e,t,s])=>{if(e&&s){const{x:e,y:s,width:i,height:r}=a.getBoundingClientRect();n.setValue({x:e-t.x,y:s-t.y,width:i,height:r})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}exports.TELE_BOX_MANAGER_EVENT=void 0,(A=exports.TELE_BOX_MANAGER_EVENT||(exports.TELE_BOX_MANAGER_EVENT={})).Focused="focused",A.Blurred="blurred",A.Created="created",A.Removed="removed",A.State="state",A.Maximized="maximized",A.Minimized="minimized",A.IntrinsicMove="intrinsic_move",A.IntrinsicResize="intrinsic_resize",A.ZIndex="z_index",A.PrefersColorScheme="prefers_color_scheme",A.DarkMode="dark_mode";class R extends z{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===exports.TELE_BOX_STATE.Maximized){const{children:s}=this.$titles.firstElementChild;for(let i=s.length-1;i>=0;i-=1){const a=s[i],r=null==(t=a.dataset)?void 0:t.teleBoxID;r&&(e&&r===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&r===this.focusedBox.id&&a.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}render(){if(this.$titleBar)return this.$titleBar;const e=super.render();e.classList.add(this.wrapClassName("max-titlebar")),this.sideEffect.addDisposer([this.rootRect$.subscribe((t=>{const{x:s,y:i,width:a}=t;e.style.transform=`translate(${s}px, ${i}px)`,e.style.width=a+"px"})),this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===exports.TELE_BOX_STATE.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),E.combine([this.state$,this.boxes$]).subscribe((([t,s])=>{t===exports.TELE_BOX_STATE.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===s.length),1===s.length?this.setTitle(s[0].title):e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const s=document.createElement("button");return s.className=this.wrapClassName("titles-tab"),s.textContent=t.title,s.dataset.teleBoxID=t.id,s.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&s.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(s),t._title$.reaction((e=>s.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const X=window.ResizeObserver||u.ResizeObserver;exports.DefaultTitleBar=z,exports.TeleBox=M,exports.TeleBoxCollector=O,exports.TeleBoxDragHandleType="dh",exports.TeleBoxManager=class{constructor({root:e=null,prefersColorScheme:t=exports.TELE_BOX_COLOR_SCHEME.Light,minimized:s=!1,maximized:i=!1,fence:a=!1,collector:r,namespace:o="telebox",readonly:n=!1,stageRatio:l=-1,highlightStage:h=!0}={}){this.events=new b.default,this._sideEffect=new c.SideEffectManager,this.namespace=o;const d=new E.Val(e),u=new E.Val(n),m=new E.Val(s),x=new E.Val(i),p=new E.Val(a),_=new E.Val(l),g=new E.Val(h),f=new E.Val({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:v.default});this._sideEffect.addDisposer(d.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new X((e=>{this._sideEffect.setTimeout((()=>{var t;const s=null==(t=e[0])?void 0:t.contentRect;s&&f.setValue({x:s.x,y:s.y,width:s.width,height:s.height})}),50,"root-resize-observer")}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")}))),this.boxes$=new E.Val([]),this.topBox$=new E.Val(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe((e=>{if(e.length>0){const t=e.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(t)}else this.topBox$.setValue(void 0)})));const $=window.matchMedia("(prefers-color-scheme: dark)"),w=new E.Val(!1);$&&(w.setValue($.matches),this._sideEffect.add((()=>{const e=e=>{w.setValue(e.matches)};return $.addEventListener("change",e),()=>$.removeEventListener("change",e)})));const T=new E.Val(t);this._sideEffect.addDisposer(T.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.PrefersColorScheme,e)})));const B=E.combine([w,T],(([e,t])=>"auto"===t?e:"dark"===t)),N=E.combine([m,x],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal));this.collector=null!=r?r:new O({minimized$:m,readonly$:u,darkMode$:B,namespace:o,root$:d,rootRect$:f});const C=new S({namespace:o,rootRect$:f,ratio$:_,root$:d,highlightStage$:g});this._sideEffect.addDisposer((()=>C.destroy()));const L={darkMode:B,state:N,root:d,rootRect:f,stageRect:C.stageRect$};E.withReadonlyValueEnhancer(this,L);const y={prefersColorScheme:T,readonly:u,fence:p,minimized:m,maximized:x,stageRatio:_,highlightStage:g};E.withValueEnhancer(this,y);const z=this.wrapClassName("titlebar-icon-close"),V=e=>{var t;if(u.value)return;const s=e.target;if(s.tagName)for(let i=s;i;i=i.parentElement){if(i.classList&&i.classList.contains(z))return;const e=null==(t=i.dataset)?void 0:t.teleBoxID;if(e){const t=this.getBox(e);if(t)return this.focusBox(t),void this.makeBoxTop(t)}}};this._sideEffect.addEventListener(window,"mousedown",V,!0),this._sideEffect.addEventListener(window,"touchstart",V,!0),this.titleBar=new R({namespace:this.namespace,boxes$:this.boxes$,darkMode$:B,readonly$:u,state$:N,root$:d,rootRect$:f,onEvent:e=>{switch(e.type){case exports.TELE_BOX_DELEGATE_EVENT.Maximize:x.setValue(!x.value);break;case exports.TELE_BOX_DELEGATE_EVENT.Minimize:m.setValue(!0);break;case exports.TELE_BOX_EVENT.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([N.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.State,e)})),x.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Maximized,e)})),m.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Minimized,e)})),B.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case exports.TELE_BOX_STATE.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case exports.TELE_BOX_STATE.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},i=!0){const a=new M((r=n(n({zIndex:this.topBox?this.topBox.zIndex+1:100},e),i?this.smartPosition(e):{}),o={namespace:this.namespace,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$},t(r,s(o))));var r,o;return a.focus&&(this.focusBox(a),i&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicResize,a)})),a._zIndex$.reaction(((e,t)=>{if(this.boxes.length>0){const e=this.boxes.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(e)}t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.ZIndex,a)}))]),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Created,a),a}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,s=!1){const i=this.boxes.find((t=>t.id===e));if(i)return this.updateBox(i,t,s)}updateAll(e,t=!1){this.boxes.forEach((s=>{this.updateBox(s,e,t)}))}remove(e,t=!1){const s=this.getBoxIndex(e);if(s>=0){const e=this.boxes.slice(),i=e.splice(s,1);return this.boxes$.setValue(e),i.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,i)),i[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach((e=>e.destroy())),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,t)),t}mount(e){this._root$.setValue(e)}unmount(){this._root$.setValue(null)}destroy(e=!1){this.events.clearListeners(),this._sideEffect.flushAll(),this.removeAll(e),this.collector.destroy(),this.titleBar.destroy()}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const s=this.getBox(e);s&&(this.boxes.forEach((e=>{if(s===e){let e=!1;s.focus||(e=!0,s._focus$.setValue(!0,t)),e&&!t&&this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Focused,s)}else e.focus&&this.blurBox(e,t)})),this.titleBar.focusBox(s))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const s=this.getBox(e);s&&(s.focus&&(s._focus$.setValue(!1,t),t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,s)),this.titleBar.focusedBox===s&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,t))})),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return s=>t.every((t=>e[t]===s[t]))}updateBox(e,t,s=!1){var i,a,r,o,n,l;null==t.x&&null==t.y||e._intrinsicCoord$.setValue({x:null!=(i=t.x)?i:e.intrinsicX,y:null!=(a=t.y)?a:e.intrinsicY},s),null==t.width&&null==t.height||e._intrinsicSize$.setValue({width:null!=(r=t.width)?r:e.intrinsicWidth,height:null!=(o=t.height)?o:e.intrinsicHeight},s),null!=t.title&&e._title$.setValue(t.title),null!=t.visible&&e._visible$.setValue(t.visible,s),null!=t.resizable&&e._resizable$.setValue(t.resizable,s),null!=t.draggable&&e._draggable$.setValue(t.draggable,s),null!=t.ratio&&e._ratio$.setValue(t.ratio,s),null!=t.zIndex&&e._zIndex$.setValue(t.zIndex,s),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(l=t.minHeight)?l:e.minHeight},s)}smartPosition(e){let{x:t,y:s}=e;const{width:i=.5,height:a=.5}=e,r=this.stageRect,o=this.topBox;if(null==t){let e=r.x+20;if(o){const t=o.pxIntrinsicCoord.x+20;t+i*r.width<=r.x+r.width&&(e=t)}t=(e-r.x)/r.width}if(null==s){let e=r.y+20;if(o){const t=o.pxIntrinsicCoord.y+20;t+a*r.height<=r.y+r.height&&(e=t)}s=(e-r.y)/r.height}return{x:t,y:s,width:i,height:a}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return"string"==typeof e?this.boxes.findIndex((t=>t.id===e)):this.boxes.findIndex((t=>t===e))}getBox(e){return"string"==typeof e?this.boxes.find((t=>t.id===e)):e}};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var Be=require("emittery"),Ze=require("stylefire"),Pe=require("shallowequal"),K=require("side-effect-manager"),r=require("value-enhancer"),Ce=require("@juggle/resize-observer");function ce(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var ne=ce(Be),Te=ce(Ze),Z=ce(Pe);var We=(()=>`.telebox-quarantine{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.telebox-body-wrap{color:#191919;color:var(--tele-box-color, #191919);flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative;background-color:#f9f9f9;background-color:var(--tele-manager-container-background, #f9f9f9)}.telebox-box-stage{position:absolute;z-index:1;overflow:hidden;background-color:#fff;background-color:var(--tele-manager-stage-background, #fff);box-shadow:0 0 16px #00000014;box-shadow:var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, .08))}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-body-wrap{color:#e9e9e9;color:var(--tele-box-color-dark, #e9e9e9)}.telebox-color-scheme-dark .telebox-content{background-color:#25282e;background-color:var(--tele-manager-container-background-dark, #25282e)}.telebox-color-scheme-dark .telebox-box-stage{background-color:#272a30;background-color:var(--tele-manager-stage-background-dark, #272a30);box-shadow:0 0 16px #0000003d;box-shadow:var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, .24))}
+`)();var ge=(s=>(s.Light="light",s.Dark="dark",s.Auto="auto",s))(ge||{}),z=(s=>(s.Normal="normal",s.Minimized="minimized",s.Maximized="maximized",s))(z||{}),L=(s=>(s.DarkMode="dark_mode",s.PrefersColorScheme="prefers_color_scheme",s.Close="close",s.Focus="focus",s.Blur="blur",s.IntrinsicMove="intrinsic_move",s.IntrinsicResize="intrinsic_resize",s.ZIndex="z_index",s.State="state",s.Minimized="minimized",s.Maximized="maximized",s.Readonly="readonly",s.Destroyed="destroyed",s))(L||{}),B=(s=>(s.Close="close",s.Maximize="maximize",s.Minimize="minimize",s))(B||{}),P=(s=>(s.North="n",s.South="s",s.West="w",s.East="e",s.NorthWest="nw",s.NorthEast="ne",s.SouthEast="se",s.SouthWest="sw",s))(P||{});const ee="dh";function R(s,e,t){return Math.min(Math.max(s,e),t)}function E(s){s.stopPropagation(),s.cancelable&&s.preventDefault()}function xe(s){return s.touches?s.touches[0]:s}let He=1;function Qe(){return`New Box ${He++}`}class de{constructor({readonly$:e,state$:t,title$:i,buttons:a,onEvent:o,onDragStart:l,namespace:n="telebox"}){this.sideEffect=new K.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=d=>{var w;if(this.readonly$.value||d.button!==0||(w=d.target.dataset)!=null&&w.teleTitleBarNoDblClick)return;E(d);const x=Date.now();x-this.lastTitleBarClick.timestamp<=500?Math.abs(d.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(d.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(d),this.lastTitleBarClick.timestamp=x,this.lastTitleBarClick.clientX=d.clientX,this.lastTitleBarClick.clientY=d.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=d=>{var k;if(this.readonly$.value||(k=d.target.dataset)!=null&&k.teleTitleBarNoDblClick)return;E(d);const x=Date.now(),{clientX:w=this.lastTitleBarTouch.clientX+100,clientY:p=this.lastTitleBarTouch.clientY+100}=d.touches[0]||{};x-this.lastTitleBarTouch.timestamp<=500?Math.abs(w-this.lastTitleBarTouch.clientX)<=10&&Math.abs(p-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(d),this.lastTitleBarTouch.timestamp=x,this.lastTitleBarTouch.clientX=w,this.lastTitleBarTouch.clientY=p},this.readonly$=e,this.state$=t,this.title$=i,this.onEvent=o,this.onDragStart=l,this.namespace=n,this.buttons=a||[{type:B.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:B.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:d=>d===z.Maximized},{type:B.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle=ee;const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle=ee,e.appendChild(t),e.appendChild(this.$dragArea);const i=document.createElement("div");i.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach(({iconClassName:a},o)=>{const l=String(o),n=document.createElement("button");n.className=`${this.wrapClassName("titlebar-btn")} ${a}`,n.dataset.teleTitleBarBtnIndex=l,n.dataset.teleTitleBarNoDblClick="true",i.appendChild(n)}),this.sideEffect.addDisposer(this.title$.subscribe(a=>{t.textContent=a,t.title=a}),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe(a=>{this.buttons.forEach((o,l)=>{var n;o.isActive&&((n=i.children[l])==null||n.classList.toggle("is-active",o.isActive(a)))})}),"render-state-btns"),this.sideEffect.addEventListener(i,"click",a=>{var n;if(this.readonly$.value)return;const o=a.target,l=Number((n=o.dataset)==null?void 0:n.teleTitleBarBtnIndex);if(!Number.isNaN(l)&&l<this.buttons.length){E(a);const d=this.buttons[l];this.onEvent&&this.onEvent({type:d.type,value:d.value})}},{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(i)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle=ee,this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}function Ae([s,e]){if(e<=0||s.width<=0||s.height<=0)return s;const t=s.width*e;if(t===s.height)return s;if(t<s.height)return{x:0,y:(s.height-t)/2,width:s.width,height:t};const i=s.height/e;return{x:(s.width-i)/2,y:0,width:i,height:s.height}}const Ve=window.ResizeObserver||Ce.ResizeObserver;class fe{constructor({id:e=K.genUID(),title:t=Qe(),namespace:i="telebox",visible:a=!0,width:o=.5,height:l=.5,minWidth:n=0,minHeight:d=0,x=.1,y:w=.1,resizable:p=!0,draggable:k=!0,boxRatio:h=-1,focus:C=!1,zIndex:c=100,stageRatio:I=null,enableShadowDOM:u=!0,titleBar:m,content:M,stage:y,footer:N,styles:v,userStyles:D,bodyStyle:te=null,stageStyle:O=null,darkMode$:H,fence$:Q,minimized$:V,maximized$:G,readonly$:T,root:J,rootRect$:ie,managerStageRect$:Y,managerStageRatio$:se,defaultBoxBodyStyle$:U,defaultBoxStageStyle$:g,collectorRect$:A}){this.events=new ne.default,this._delegateEvents=new ne.default,this.handleTrackStart=b=>{var f;return(f=this._handleTrackStart)==null?void 0:f.call(this,b)},this._sideEffect=new K.SideEffectManager,this.id=e,this.namespace=i,this.enableShadowDOM=u;const S=new r.ValManager;this._sideEffect.addDisposer(()=>S.destroy());const $=new r.Val(t),X=new r.Val(a),_=new r.Val(p),pe=new r.Val(k),he=new r.Val(h),Ie=new r.Val(c),be=new r.Val(C),ae=r.combine([V,G],([b,f])=>b?z.Minimized:f?z.Maximized:z.Normal),oe=new r.Val({width:R(n,0,1),height:R(d,0,1)},{compare:Z.default}),Me=r.combine([oe,Y],([b,f])=>({width:b.width*f.width,height:b.height*f.height}),{compare:Z.default}),q=new r.Val({width:o,height:l},{compare:Z.default});this._sideEffect.addDisposer(oe.reaction((b,f)=>{q.setValue({width:Math.max(o,b.width),height:Math.max(l,b.height)},f)}));const re=new r.Val({x,y:w},{compare:Z.default}),le=r.combine([q,Y],([b,f])=>({width:f.width*b.width,height:f.height*b.height}),{compare:Z.default}),F=r.combine([re,Y],([b,f])=>({x:b.x*f.width,y:b.y*f.height}),{compare:Z.default}),ve=new r.Val(te),ye=new r.Val(O),ze=new r.Val(null),me=new r.Val(Y.value,{compare:Z.default}),ue=new r.Val(I),ke=r.combine([ue,se],([b,f])=>b!=null?b:f),je=r.combine([me,ke],Ae,{compare:Z.default}),Ne={darkMode:H,fence:Q,minimized:V,maximized:G,readonly:T,rootRect:ie,managerStageRect:Y,defaultBoxBodyStyle:U,defaultBoxStageStyle:g,collectorRect:A};r.withReadonlyValueEnhancer(this,Ne);const Le={zIndex:Ie,focus:be,state:ae,minSize:oe,pxMinSize:Me,intrinsicSize:q,intrinsicCoord:re,pxIntrinsicSize:le,pxIntrinsicCoord:F,bodyRect:me,stageRect:je};r.withReadonlyValueEnhancer(this,Le,S);const De={title:$,visible:X,resizable:_,draggable:pe,boxRatio:he,stageRatio:ue,bodyStyle:ve,stageStyle:ye};r.withValueEnhancer(this,De,S),this.titleBar=m||new de({readonly$:T,state$:ae,title$:$,namespace:this.namespace,onDragStart:b=>{var f;return(f=this._handleTrackStart)==null?void 0:f.call(this,b)},onEvent:b=>this._delegateEvents.emit(b.type)}),this._sideEffect.addDisposer(he.subscribe(b=>{b>0&&this.transform(F.value.x,F.value.y,le.value.width,le.value.height)})),this._sideEffect.addDisposer(Q.subscribe(b=>{b&&this.move(F.value.x,F.value.y)})),this.$box=this._render(),ze.setValue(this.$content.parentElement),M&&this.mountContent(M),y&&this.mountStage(y),N&&this.mountFooter(N),v&&this.mountStyles(v),D&&this.mountUserStyles(D),J.appendChild(this.$box);const W=(b,f)=>{this._sideEffect.addDisposer(b.reaction((Se,$e)=>{$e||this.events.emit(f,Se)}))};W(H,L.DarkMode),W(T,L.Readonly),W(Ie,L.ZIndex),W(V,L.Minimized),W(G,L.Maximized),W(ae,L.State),W(q,L.IntrinsicResize),W(re,L.IntrinsicMove),this._sideEffect.addDisposer([X.reaction((b,f)=>{!f&&!b&&this.events.emit(L.Close)}),be.reaction((b,f)=>{f||this.events.emit(b?L.Focus:L.Blur)})])}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){this._minSize$.setValue({width:e,height:this.minHeight},t)}setMinHeight(e,t=!1){this._minSize$.setValue({width:this.minWidth,height:e},t)}resize(e,t,i=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},i)}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}move(e,t,i=!1){let a,o;const l=this.managerStageRect,n=this.pxIntrinsicSize;this.fence?(a=R(e,0,l.width-n.width),o=R(t,0,l.height-n.height)):(a=R(e,-(n.width-120),0+l.width-20),o=R(t,0,0+l.height-20)),this._intrinsicCoord$.setValue({x:a/l.width,y:o/l.height},i)}transform(e,t,i,a,o=!1){const l=this.managerStageRect;if(i=Math.max(i,this.pxMinSize.width),a=Math.max(a,this.pxMinSize.height),this.boxRatio>0){const n=this.boxRatio*i;t!==this.pxIntrinsicCoord.y&&(t-=n-a),a=n}t<0&&(t=0,a=this.pxIntrinsicSize.height),this.move(e,t,o),this._intrinsicSize$.setValue({width:i/l.width,height:a/l.height},o)}mountContent(e){var t;(t=this.$authorContent)==null||t.remove(),this.$authorContent=e,this.$content.appendChild(e)}unmountContent(){this.$authorContent&&(this.$authorContent.remove(),this.$authorContent=void 0)}mountStage(e){var t;(t=this.$authorStage)==null||t.remove(),this.$authorStage=e,this.$stage||(this.$stage=this._renderStage()),this.$stage.appendChild(e),this.$stage.parentElement||this.$body.appendChild(this.$stage)}unmountStage(){var e;this.$authorStage&&(this.$authorStage.remove(),this.$authorStage=void 0),(e=this.$stage)==null||e.remove()}mountFooter(e){var t;(t=this.$authorFooter)==null||t.remove(),this.$authorFooter=e,this.$footer.appendChild(e)}unmountFooter(){this.$authorFooter&&(this.$authorFooter.remove(),this.$authorFooter=void 0)}mountStyles(e){this.$styles.textContent=e}unmountStyles(){this.$styles.textContent=""}mountUserStyles(e){this.$userStyles.textContent=e}unmountUserStyles(){this.$userStyles.textContent=""}_render(){if(this.$box)return this.$box;const e=(h,C)=>this._sideEffect.addDisposer([this._readonly$.subscribe(c=>h.classList.toggle(this.wrapClassName("readonly"),c)),this._draggable$.subscribe(c=>h.classList.toggle(this.wrapClassName("no-drag"),!c)),this._resizable$.subscribe(c=>h.classList.toggle(this.wrapClassName("no-resize"),!c)),this._focus$.subscribe(c=>h.classList.toggle(this.wrapClassName("blur"),!c)),this._darkMode$.subscribe(c=>{h.classList.toggle(this.wrapClassName("color-scheme-dark"),c),h.classList.toggle(this.wrapClassName("color-scheme-light"),!c)})],C);this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box")),e(this.$box,"bind-box-state"),this._sideEffect.add(()=>{const h=this.wrapClassName("minimized"),C=this.wrapClassName("maximized"),c="box-maximized-timer";return this._state$.subscribe(I=>{this.$box.classList.toggle(h,I===z.Minimized),I===z.Maximized?(this._sideEffect.flush(c),this.$box.classList.toggle(C,!0)):this._sideEffect.setTimeout(()=>{this.$box.classList.toggle(C,!1)},0,c)})}),this._sideEffect.addDisposer(this._visible$.subscribe(h=>{this.$box.style.display=h?"block":"none"})),this._sideEffect.addDisposer(this._zIndex$.subscribe(h=>{this.$box.style.zIndex=String(h)})),this.$box.dataset.teleBoxID=this.id;const t=Te.default(this.$box),i=r.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$,this._rootRect$,this._managerStageRect$],([h,C,c,I,u,m,M])=>{const y=h?{x:-M.x,y:-M.y,width:m.width,height:m.height,scaleX:1,scaleY:1}:{x:I.x,y:I.y,width:c.width,height:c.height,scaleX:1,scaleY:1};if(C&&u){const{width:N,height:v}=h?this.rootRect:c;y.x=u.x-N/2+u.width/2-M.x,y.y=u.y-v/2+u.height/2-M.y,y.scaleX=u.width/N,y.scaleY=u.height/v}return y},{compare:Z.default}),a=i.value;this.$box.style.width=a.width+"px",this.$box.style.height=a.height+"px",this.$box.style.transform=`translate(${a.x-10}px,${a.y-10}px)`,this._sideEffect.addDisposer(i.subscribe(h=>{t.set(h)}));const o=document.createElement("div");o.className=this.wrapClassName("box-main"),this.$box.appendChild(o);const l=document.createElement("div");l.className=this.wrapClassName("titlebar-wrap"),l.appendChild(this.titleBar.render()),this.$titleBar=l;const n=document.createElement("div");n.className=this.wrapClassName("body-wrap"),this.$body=n;const d=document.createElement("style");this.$styles=d,n.appendChild(d);const x=document.createElement("style");this.$userStyles=x,n.appendChild(x);const w=document.createElement("div");w.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=w,this._sideEffect.addDisposer(r.combine([this._bodyStyle$,this._defaultBoxBodyStyle$],([h,C])=>h!=null?h:C).subscribe(h=>w.style.cssText=h||"")),n.appendChild(w);const p=document.createElement("div");if(p.className=this.wrapClassName("footer-wrap"),this.$footer=p,o.appendChild(l),this.enableShadowDOM){const h=document.createElement("div");h.className=this.wrapClassName("quarantine-wrap"),o.appendChild(h);const C=document.createElement("div");C.className=this.wrapClassName("quarantine"),e(C,"bind-quarantine-state");const c=document.createElement("style");c.textContent=We,C.appendChild(c),C.appendChild(n),C.appendChild(p),h.attachShadow({mode:"open"}).appendChild(C)}else o.appendChild(n),o.appendChild(p);this._renderResizeHandlers();const k=()=>{const h=n.getBoundingClientRect();this._bodyRect$.setValue({x:0,y:0,width:h.width,height:h.height})};return this._sideEffect.add(()=>{const h=new Ve(()=>{this.minimized||k()});return h.observe(n),()=>h.disconnect()}),this._sideEffect.addDisposer(this._minimized$.reaction(h=>{h||this._sideEffect.setTimeout(k,400,"minimized-content-rect-fix")})),this.$box}_renderStage(){const e=document.createElement("div");e.className=this.wrapClassName("box-stage");const t=i=>{e.style.top=i.y+"px",e.style.left=i.x+"px",e.style.width=i.width+"px",e.style.height=i.height+"px"};return this._sideEffect.addDisposer([r.combine([this._stageStyle$,this._defaultBoxStageStyle$],([i,a])=>i!=null?i:a).subscribe(i=>{e.style.cssText=i||"",t(this._stageRect$.value)}),this._stageRect$.subscribe(t)],"box-stage-styles"),e}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(P).forEach(c=>{const I=document.createElement("div");I.className=this.wrapClassName(c)+" "+this.wrapClassName("resize-handle"),I.dataset.teleBoxHandle=c,e.appendChild(I)}),this.$box.appendChild(e);const t="handle-tracking-listener",i=this.wrapClassName("transforming");let a,o=0,l=0,n=0,d=0,x=0,w=0,p;const k=c=>{if(this.state!==z.Normal)return;E(c);let{pageX:I,pageY:u}=xe(c);u<0&&(u=0);const m=I-x,M=u-w;let{x:y,y:N}=this.pxIntrinsicCoord,{width:v,height:D}=this.pxIntrinsicSize;switch(p){case P.North:{N=l+M,D=d-M;break}case P.South:{D=d+M;break}case P.West:{y=o+m,v=n-m;break}case P.East:{v=n+m;break}case P.NorthWest:{y=o+m,N=l+M,v=n-m,D=d-M;break}case P.NorthEast:{N=l+M,v=n+m,D=d-M;break}case P.SouthEast:{v=n+m,D=d+M;break}case P.SouthWest:{y=o+m,v=n-m,D=d+M;break}default:{this.move(o+m,l+M);return}}this.transform(y,N,v,D)},h=c=>{p=void 0,a&&(E(c),this.$box.classList.toggle(i,!1),this._sideEffect.flush(t),a.remove())},C=c=>{var u;if(this.readonly||c.button!=null&&c.button!==0||!this.draggable||p||this.state!==z.Normal)return;const I=c.target;if((u=I.dataset)!=null&&u.teleBoxHandle){E(c),{x:o,y:l}=this.pxIntrinsicCoord,{width:n,height:d}=this.pxIntrinsicSize,{pageX:x,pageY:w}=xe(c),p=I.dataset.teleBoxHandle,a||(a=document.createElement("div"));const m=p?this.wrapClassName(`cursor-${p}`):"";a.className=this.wrapClassName(`track-mask${m?` ${m}`:""}`),this.$box.appendChild(a),this.$box.classList.add(i),this._sideEffect.add(()=>(window.addEventListener("mousemove",k),window.addEventListener("touchmove",k,{passive:!1}),window.addEventListener("mouseup",h),window.addEventListener("touchend",h,{passive:!1}),window.addEventListener("touchcancel",h,{passive:!1}),()=>{window.removeEventListener("mousemove",k),window.removeEventListener("touchmove",k),window.removeEventListener("mouseup",h),window.removeEventListener("touchend",h),window.removeEventListener("touchcancel",h)}),t)}};this._handleTrackStart=C,this._sideEffect.addEventListener(e,"mousedown",C,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",C,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(L.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var Ge="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";class we{constructor({minimized$:e,readonly$:t,darkMode$:i,namespace:a="telebox",styles:o={},root$:l}){this._sideEffect=new K.SideEffectManager,this.namespace=a;const n=new r.ValManager;this._sideEffect.addDisposer(()=>n.destroy());const d=new r.Val(void 0),x=r.derive(e),w=new r.Val(o),p=new r.Val(document.createElement("button")),k={styles:w,$collector:p};r.withValueEnhancer(this,k,n);const h={root:l};r.withReadonlyValueEnhancer(this,h);const C={rect:d,visible:x};r.withReadonlyValueEnhancer(this,C,n),p.value.className=this.wrapClassName("collector"),p.value.style.backgroundImage=`url('${Ge}')`,this._sideEffect.addDisposer(p.subscribe(c=>{this._sideEffect.addEventListener(c,"click",()=>{t.value||e.setValue(!1)},{},"telebox-collector-click"),this._sideEffect.addDisposer([x.subscribe(I=>{c.classList.toggle(this.wrapClassName("collector-visible"),I)}),t.subscribe(I=>{c.classList.toggle(this.wrapClassName("collector-readonly"),I)}),i.subscribe(I=>{c.classList.toggle(this.wrapClassName("color-scheme-dark"),I),c.classList.toggle(this.wrapClassName("color-scheme-light"),!I)}),w.subscribe(I=>{Object.keys(I).forEach(u=>{const m=I[u];m!=null&&(c.style[u]=m)})}),l.subscribe(I=>{I&&I.appendChild(c)}),r.combine([e,l]).subscribe(([I,u])=>{if(I&&u){const{x:m,y:M,width:y,height:N}=c.getBoundingClientRect(),v=u.getBoundingClientRect();d.setValue({x:m-v.x,y:M-v.y,width:y,height:N})}})],"telebox-collector-el")}))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}var j=(s=>(s.Focused="focused",s.Blurred="blurred",s.Created="created",s.Removed="removed",s.State="state",s.Maximized="maximized",s.Minimized="minimized",s.IntrinsicMove="intrinsic_move",s.IntrinsicResize="intrinsic_resize",s.ZIndex="z_index",s.PrefersColorScheme="prefers_color_scheme",s.DarkMode="dark_mode",s))(j||{});class Ye extends de{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,e.root.appendChild(this.render())}focusBox(e){var t;if(!(this.focusedBox&&this.focusedBox===e)){if(this.$titles&&this.state$.value===z.Maximized){const{children:i}=this.$titles.firstElementChild;for(let a=i.length-1;a>=0;a-=1){const o=i[a],l=(t=o.dataset)==null?void 0:t.teleBoxID;l&&(e&&l===e.id?o.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&l===this.focusedBox.id&&o.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}render(){if(this.$titleBar)return this.$titleBar;const e=super.render();e.classList.add(this.wrapClassName("max-titlebar")),this.sideEffect.addDisposer([this.state$.subscribe(i=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),i===z.Maximized)}),this.readonly$.subscribe(i=>{e.classList.toggle(this.wrapClassName("readonly"),i)}),r.combine([this.state$,this.boxes$]).subscribe(([i,a])=>{i===z.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),a.length===1),a.length!==1&&e.replaceChild(this.renderTitles(),e.firstElementChild))})],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",i=>{i.currentTarget.scrollBy({left:i.deltaY>0?250:-250,behavior:"smooth"})},{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map(i=>{const a=document.createElement("button");return a.className=this.wrapClassName("titles-tab"),a.textContent=i.title,a.dataset.teleBoxID=i.id,a.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&i.id===this.focusedBox.id&&a.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(a),i._title$.reaction(o=>a.textContent=o)});return this.sideEffect.addDisposer(()=>t.forEach(i=>i()),"max-render-tab-titles"),this.$titles}}const Oe=window.ResizeObserver||Ce.ResizeObserver;class Re{constructor({root:e=null,prefersColorScheme:t=ge.Light,minimized:i=!1,maximized:a=!1,fence:o=!0,collector:l,namespace:n="telebox",readonly:d=!1,stageRatio:x=-1,containerStyle:w="",stageStyle:p="",defaultBoxBodyStyle:k=null,defaultBoxStageStyle:h=null}={}){this.events=new ne.default,this._sideEffect=new K.SideEffectManager,this.namespace=n;const C=new r.ValManager;this._sideEffect.addDisposer(()=>C.destroy());const c=new r.Val(e),I=new r.Val(d),u=new r.Val(i),m=new r.Val(a),M=new r.Val(o),y=new r.Val(w),N=new r.Val(p),v=new r.Val(x),D=new r.Val(k),te=new r.Val(h),O=new r.Val({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:Z.default});this._sideEffect.addDisposer(c.subscribe(g=>{this._sideEffect.add(()=>{if(!g)return()=>{};const A=new Oe(()=>{const S=g.getBoundingClientRect();O.setValue({x:0,y:0,width:S.width,height:S.height})});return A.observe(g),()=>A.disconnect()},"calc-root-rect")}));const H=r.combine([O,v],Ae,{compare:Z.default});this.boxes$=new r.Val([]),this.topBox$=new r.Val(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe(g=>{if(g.length>0){const A=g.reduce((S,$)=>S.zIndex>$.zIndex?S:$);this.topBox$.setValue(A)}else this.topBox$.setValue(void 0)}));const Q=window.matchMedia("(prefers-color-scheme: dark)"),V=new r.Val(!1);Q&&(V.setValue(Q.matches),this._sideEffect.add(()=>{const g=A=>{V.setValue(A.matches)};return Q.addEventListener("change",g),()=>Q.removeEventListener("change",g)}));const G=new r.Val(t);this._sideEffect.addDisposer(G.reaction((g,A)=>{A||this.events.emit(j.PrefersColorScheme,g)}));const T=r.combine([V,G],([g,A])=>A==="auto"?g:A==="dark"),J=r.combine([u,m],([g,A])=>g?z.Minimized:A?z.Maximized:z.Normal);this.collector=l!=null?l:new we({minimized$:u,readonly$:I,darkMode$:T,namespace:n,root$:c});const ie={darkMode:T,state:J,root:c,rootRect:O,stageRect:H};r.withReadonlyValueEnhancer(this,ie,C);const Y={prefersColorScheme:G,readonly:I,fence:M,minimized:u,maximized:m,stageRatio:v,containerStyle:y,stageStyle:N,defaultBoxBodyStyle:D,defaultBoxStageStyle:te};r.withValueEnhancer(this,Y,C);const se=this.wrapClassName("titlebar-icon-close"),U=g=>{var S;if(I.value)return;const A=g.target;if(!!A.tagName)for(let $=A;$;$=$.parentElement){if($.classList&&$.classList.contains(se))return;const X=(S=$.dataset)==null?void 0:S.teleBoxID;if(X){const _=this.getBox(X);if(_){this.focusBox(_),this.makeBoxTop(_);return}}}};this._sideEffect.addEventListener(window,"mousedown",U,!0),this._sideEffect.addEventListener(window,"touchstart",U,!0),this.$container=document.createElement("div"),this.$container.className=this.wrapClassName("manager-container"),this.$stage=document.createElement("div"),this.$stage.className=this.wrapClassName("manager-stage"),this.$container.appendChild(this.$stage),this._sideEffect.addDisposer([T.subscribe(g=>{this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"),g),this.$container.classList.toggle(this.wrapClassName("color-scheme-light"),!g)}),m.subscribe(g=>{this.$container.classList.toggle("is-maximized",g)}),u.subscribe(g=>{this.$container.classList.toggle("is-minimized",g)}),y.subscribe(g=>{this.$container.style.cssText=g}),N.subscribe(g=>{this.$stage.style.cssText=g,this.$stage.style.width=H.value.width+"px",this.$stage.style.height=H.value.height+"px"}),H.subscribe(g=>{this.$stage.style.width=g.width+"px",this.$stage.style.height=g.height+"px"}),c.subscribe(g=>{g?g.appendChild(this.$container):this.$container.parentElement&&this.$container.remove()})]),this.titleBar=new Ye({namespace:this.namespace,title$:r.derive(this.topBox$,g=>(g==null?void 0:g.title)||""),boxes$:this.boxes$,darkMode$:T,readonly$:I,state$:J,rootRect$:O,root:this.$container,onEvent:g=>{switch(g.type){case B.Maximize:{m.setValue(!m.value);break}case B.Minimize:{u.setValue(!0);break}case L.Close:{this.removeTopBox(),this.focusTopBox();break}}}}),this._sideEffect.addDisposer([J.reaction((g,A)=>{A||this.events.emit(j.State,g)}),m.reaction((g,A)=>{A||this.events.emit(j.Maximized,g)}),u.reaction((g,A)=>{A||this.events.emit(j.Minimized,g)}),T.reaction((g,A)=>{A||this.events.emit(j.DarkMode,g)})])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case z.Maximized:{this.setMinimized(!1,t),this.setMaximized(!0,t);break}case z.Minimized:{this.setMinimized(!0,t),this.setMaximized(!1,t);break}default:{this.setMinimized(!1,t),this.setMaximized(!1,t);break}}return this}create(e={},t=!0){const i=new fe({zIndex:this.topBox?this.topBox.zIndex+1:100,...e,...t?this.smartPosition(e):{},namespace:this.namespace,root:this.$stage,darkMode$:this._darkMode$,maximized$:this._maximized$,minimized$:this._minimized$,fence$:this._fence$,rootRect$:this._rootRect$,managerStageRect$:this._stageRect$,managerStageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,defaultBoxBodyStyle$:this._defaultBoxBodyStyle$,defaultBoxStageStyle$:this._defaultBoxStageStyle$});return i.focus&&(this.focusBox(i),t&&this.makeBoxTop(i)),this.boxes$.setValue([...this.boxes,i]),this._sideEffect.addDisposer([i._delegateEvents.on(B.Maximize,()=>{this.setMaximized(!this.maximized)}),i._delegateEvents.on(B.Minimize,()=>{this.setMinimized(!0)}),i._delegateEvents.on(B.Close,()=>{this.remove(i),this.focusTopBox()}),i._intrinsicCoord$.reaction((a,o)=>{o||this.events.emit(j.IntrinsicMove,i)}),i._intrinsicSize$.reaction((a,o)=>{o||this.events.emit(j.IntrinsicResize,i)}),i._zIndex$.reaction((a,o)=>{if(this.boxes.length>0){const l=this.boxes.reduce((n,d)=>n.zIndex>d.zIndex?n:d);this.topBox$.setValue(l)}o||this.events.emit(j.ZIndex,i)})]),this.events.emit(j.Created,i),i}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,i=!1){const a=this.boxes.find(o=>o.id===e);if(a)return this.updateBox(a,t,i)}updateAll(e,t=!1){this.boxes.forEach(i=>{this.updateBox(i,e,t)})}remove(e,t=!1){const i=this.getBoxIndex(e);if(i>=0){const a=this.boxes.slice(),o=a.splice(i,1);return this.boxes$.setValue(a),o.forEach(l=>l.destroy()),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(j.Removed,o)),o[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach(i=>i.destroy()),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(j.Removed,t)),t}mount(e){this._root$.setValue(e)}unmount(){this._root$.setValue(null)}destroy(e=!1){this.events.clearListeners(),this._sideEffect.flushAll(),this.removeAll(e),this.collector.destroy(),this.titleBar.destroy()}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const i=this.getBox(e);i&&(this.boxes.forEach(a=>{if(i===a){let o=!1;i.focus||(o=!0,i._focus$.setValue(!0,t)),o&&!t&&this.events.emit(j.Focused,i)}else a.focus&&this.blurBox(a,t)}),this.titleBar.focusBox(i))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const i=this.getBox(e);i&&(i.focus&&(i._focus$.setValue(!1,t),t||this.events.emit(j.Blurred,i)),this.titleBar.focusedBox===i&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach(t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(j.Blurred,t))}),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return i=>t.every(a=>e[a]===i[a])}updateBox(e,t,i=!1){var a,o,l,n,d,x;(t.x!=null||t.y!=null)&&e._intrinsicCoord$.setValue({x:(a=t.x)!=null?a:e.intrinsicX,y:(o=t.y)!=null?o:e.intrinsicY},i),(t.width!=null||t.height!=null)&&e._intrinsicSize$.setValue({width:(l=t.width)!=null?l:e.intrinsicWidth,height:(n=t.height)!=null?n:e.intrinsicHeight},i),t.title!=null&&e._title$.setValue(t.title),t.visible!=null&&e._visible$.setValue(t.visible,i),t.resizable!=null&&e._resizable$.setValue(t.resizable,i),t.draggable!=null&&e._draggable$.setValue(t.draggable,i),t.boxRatio!=null&&e._boxRatio$.setValue(t.boxRatio,i),t.zIndex!=null&&e._zIndex$.setValue(t.zIndex,i),t.stageRatio!==void 0&&e.setStageRatio(t.stageRatio,i),t.content!=null&&e.mountContent(t.content),t.footer!=null&&e.mountFooter(t.footer),(t.minHeight!=null||t.minWidth!=null)&&e._minSize$.setValue({width:(d=t.minWidth)!=null?d:e.minWidth,height:(x=t.minHeight)!=null?x:e.minHeight},i)}smartPosition(e){let{x:t,y:i}=e;const{width:a=.5,height:o=.5}=e,l=this.stageRect,n=this.topBox;if(t==null){let d=20;if(n){const x=n.pxIntrinsicCoord.x+20,w=a*l.width;x+w<=l.width&&(d=x)}t=d/l.width}if(i==null){let d=20;if(n){const x=n.pxIntrinsicCoord.y+20,w=o*l.height;x+w<=l.height&&(d=x)}i=d/l.height}return{x:t,y:i,width:a,height:o}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return typeof e=="string"?this.boxes.findIndex(t=>t.id===e):this.boxes.findIndex(t=>t===e)}getBox(e){return typeof e=="string"?this.boxes.find(t=>t.id===e):e}}exports.DefaultTitleBar=de;exports.TELE_BOX_COLOR_SCHEME=ge;exports.TELE_BOX_DELEGATE_EVENT=B;exports.TELE_BOX_EVENT=L;exports.TELE_BOX_MANAGER_EVENT=j;exports.TELE_BOX_RESIZE_HANDLE=P;exports.TELE_BOX_STATE=z;exports.TeleBox=fe;exports.TeleBoxCollector=we;exports.TeleBoxDragHandleType=ee;exports.TeleBoxManager=Re;
 //# sourceMappingURL=telebox-insider.cjs.js.map