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

package/dist/telebox-insider.cjs.js

@@ -1,3 +1,1627 @@
-"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;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var Emittery = require("emittery");
+var styler = require("stylefire");
+var shallowequal = require("shallowequal");
+var sideEffectManager = require("side-effect-manager");
+var valueEnhancer = require("value-enhancer");
+var resizeObserver = require("@juggle/resize-observer");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var Emittery__default = /* @__PURE__ */ _interopDefaultLegacy(Emittery);
+var styler__default = /* @__PURE__ */ _interopDefaultLegacy(styler);
+var shallowequal__default = /* @__PURE__ */ _interopDefaultLegacy(shallowequal);
+var fancyScrollbar = /* @__PURE__ */ (() => ".tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}")();
+var style$4 = /* @__PURE__ */ (() => '.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-body-wrap {\n  color: #191919;\n  color: var(--tele-box-color, #191919);\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background-color: #f9f9f9;\n  background-color: var(--tele-manager-container-background, #f9f9f9);\n}\n\n.telebox-box-stage {\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n  background-color: #fff;\n  background-color: var(--tele-manager-stage-background, #fff);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-color-dark, #e9e9e9);\n}\n\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-manager-container-background-dark, #25282e);\n}\n\n.telebox-color-scheme-dark .telebox-box-stage {\n  background-color: #272a30;\n  background-color: var(--tele-manager-stage-background-dark, #272a30);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}\n\n.telebox-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;\n}\n\n.telebox-box-main {\n  border: 1px solid #e3e3ec;\n  border: var(--tele-box-border, 1px solid #e3e3ec);\n  box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);\n  box-shadow: var(--tele-box-shadow, 0px 4px 10px 0px rgba(47, 65, 146, 0.15));\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 6px;\n}\n\n.telebox-titlebar-wrap {\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.telebox-main {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n}\n\n.telebox-resize-handle {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: absolute;\n  z-index: 2147483647;\n}\n\n.telebox-n {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -5px;\n  cursor: n-resize;\n}\n\n.telebox-s {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  bottom: -5px;\n  cursor: s-resize;\n}\n\n.telebox-w {\n  width: 5px;\n  height: 100%;\n  left: -5px;\n  top: 0;\n  cursor: w-resize;\n}\n\n.telebox-e {\n  width: 5px;\n  height: 100%;\n  right: -5px;\n  top: 0;\n  cursor: e-resize;\n}\n\n.telebox-nw {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  left: -5px;\n  cursor: nw-resize;\n}\n\n.telebox-ne {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  right: -5px;\n  cursor: ne-resize;\n}\n\n.telebox-se {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  right: -5px;\n  cursor: se-resize;\n}\n\n.telebox-sw {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  left: -5px;\n  cursor: sw-resize;\n}\n\n.telebox-track-mask {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 2147483647;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.0001);\n  cursor: move;\n}\n\n.telebox-cursor-n {\n  cursor: n-resize;\n}\n\n.telebox-cursor-s {\n  cursor: s-resize;\n}\n\n.telebox-cursor-w {\n  cursor: w-resize;\n}\n\n.telebox-cursor-e {\n  cursor: e-resize;\n}\n\n.telebox-cursor-nw {\n  cursor: nw-resize;\n}\n\n.telebox-cursor-ne {\n  cursor: ne-resize;\n}\n\n.telebox-cursor-se {\n  cursor: se-resize;\n}\n\n.telebox-cursor-sw {\n  cursor: sw-resize;\n}\n\n.telebox-maximized .telebox-resize-handles,\n.telebox-no-resize .telebox-resize-handles {\n  display: none;\n}\n\n.telebox-maximized {\n  box-shadow: none;\n  transition: none;\n}\n\n.telebox-minimized {\n  transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n}\n\n.telebox-transforming {\n  will-change: transform;\n  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0);\n}\n\n.telebox-readonly .telebox-resize-handle {\n  cursor: initial !important;\n  pointer-events: none !important;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-box-main {\n  border: 1px solid #383b42;\n  border: var(--tele-box-border-dark, 1px solid #383b42);\n  box-shadow: 0px 4px 10px 0px rgba(56, 59, 66, 0.15);\n  box-shadow: var(--tele-box-shadow-dark, 0px 4px 10px 0px rgba(56, 59, 66, 0.15));\n}')();
+var shadowStyles = /* @__PURE__ */ (() => '.telebox-quarantine {\n  all: initial;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-body-wrap {\n  color: #191919;\n  color: var(--tele-box-color, #191919);\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n}\n\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background-color: #f9f9f9;\n  background-color: var(--tele-manager-container-background, #f9f9f9);\n}\n\n.telebox-box-stage {\n  position: absolute;\n  z-index: 1;\n  overflow: hidden;\n  background-color: #fff;\n  background-color: var(--tele-manager-stage-background, #fff);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-body-wrap {\n  color: #e9e9e9;\n  color: var(--tele-box-color-dark, #e9e9e9);\n}\n\n.telebox-color-scheme-dark .telebox-content {\n  background-color: #25282e;\n  background-color: var(--tele-manager-container-background-dark, #25282e);\n}\n\n.telebox-color-scheme-dark .telebox-box-stage {\n  background-color: #272a30;\n  background-color: var(--tele-manager-stage-background-dark, #272a30);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}')();
+var style$3 = /* @__PURE__ */ (() => '.telebox-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  box-sizing: border-box;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  user-select: none;\n  touch-action: manipulation;\n  color: #191919;\n  color: var(--tele-titlebar-color, #191919);\n  background-color: #fff;\n  background-color: var(--tele-titlebar-background, #fff);\n  border-bottom: 1px solid #eeeef7;\n  border-bottom: var(--tele-titlebar-border-bottom, 1px solid #eeeef7);\n}\n\n.telebox-title-area {\n  padding-left: 16px;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n.telebox-title {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  color: #191919;\n  color: var(--tele-titlebar-color, #191919);\n  overflow: hidden;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: PingFangSC-Regular, PingFang SC;\n  white-space: nowrap;\n  word-break: keep-all;\n  text-overflow: ellipsis;\n}\n\n.telebox-drag-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: auto;\n  z-index: 10;\n}\n\n.telebox-titlebar-btns {\n  padding-right: 16px;\n  white-space: nowrap;\n  word-break: keep-all;\n  margin-left: auto;\n  font-size: 0;\n}\n\n.telebox-titlebar-btn {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  outline: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n\n.telebox-titlebar-btn ~ .telebox-titlebar-btn {\n  margin-left: 10px;\n}\n\n.telebox-titlebar-btn-icon {\n  width: 22px;\n  height: 22px;\n}\n\n.telebox-readonly .telebox-titlebar-btn {\n  cursor: not-allowed;\n}\n\n.telebox-titlebar-icon-minimize {\n  background: center/cover no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n  background-image: var(--tele-titlebar-icon-minimize, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));\n}\n\n.telebox-titlebar-icon-maximize {\n  background: center/cover no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");\n  background-image: var(--tele-titlebar-icon-maximize, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=="));\n}\n\n.telebox-titlebar-icon-maximize.is-active {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");\n  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"));\n}\n\n.telebox-titlebar-icon-close {\n  background: center/cover no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n  background-image: var(--tele-titlebar-icon-close, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-title {\n  color: #e9e9e9;\n  color: var(--tele-titlebar-color-dark, #e9e9e9);\n}\n\n.telebox-color-scheme-dark .telebox-titlebar {\n  color: #e9e9e9;\n  color: var(--tele-titlebar-color-dark, #e9e9e9);\n  background-color: #383b42;\n  background-color: var(--tele-titlebar-background-dark, #383b42);\n  border-bottom: none;\n  border-bottom: var(--tele-titlebar-border-bottom-dark, none);\n}\n\n.telebox-color-scheme-dark .telebox-titlebar-icon-minimize {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n  background-image: var(--tele-titlebar-icon-minimize-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));\n}\n\n.telebox-color-scheme-dark .telebox-titlebar-icon-maximize {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");\n  background-image: var(--tele-titlebar-icon-maximize-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=="));\n}\n\n.telebox-color-scheme-dark .telebox-titlebar-icon-maximize.is-active {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");\n  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"));\n}\n\n.telebox-color-scheme-dark .telebox-titlebar-icon-close {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n  background-image: var(--tele-titlebar-icon-close-dark, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo="));\n}')();
+var TELE_BOX_COLOR_SCHEME = /* @__PURE__ */ ((TELE_BOX_COLOR_SCHEME2) => {
+  TELE_BOX_COLOR_SCHEME2["Light"] = "light";
+  TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
+  TELE_BOX_COLOR_SCHEME2["Auto"] = "auto";
+  return TELE_BOX_COLOR_SCHEME2;
+})(TELE_BOX_COLOR_SCHEME || {});
+var TELE_BOX_STATE = /* @__PURE__ */ ((TELE_BOX_STATE2) => {
+  TELE_BOX_STATE2["Normal"] = "normal";
+  TELE_BOX_STATE2["Minimized"] = "minimized";
+  TELE_BOX_STATE2["Maximized"] = "maximized";
+  return TELE_BOX_STATE2;
+})(TELE_BOX_STATE || {});
+var TELE_BOX_EVENT = /* @__PURE__ */ ((TELE_BOX_EVENT2) => {
+  TELE_BOX_EVENT2["DarkMode"] = "dark_mode";
+  TELE_BOX_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
+  TELE_BOX_EVENT2["Close"] = "close";
+  TELE_BOX_EVENT2["Focus"] = "focus";
+  TELE_BOX_EVENT2["Blur"] = "blur";
+  TELE_BOX_EVENT2["IntrinsicMove"] = "intrinsic_move";
+  TELE_BOX_EVENT2["IntrinsicResize"] = "intrinsic_resize";
+  TELE_BOX_EVENT2["ZIndex"] = "z_index";
+  TELE_BOX_EVENT2["State"] = "state";
+  TELE_BOX_EVENT2["Minimized"] = "minimized";
+  TELE_BOX_EVENT2["Maximized"] = "maximized";
+  TELE_BOX_EVENT2["Readonly"] = "readonly";
+  TELE_BOX_EVENT2["Destroyed"] = "destroyed";
+  return TELE_BOX_EVENT2;
+})(TELE_BOX_EVENT || {});
+var TELE_BOX_DELEGATE_EVENT = /* @__PURE__ */ ((TELE_BOX_DELEGATE_EVENT2) => {
+  TELE_BOX_DELEGATE_EVENT2["Close"] = "close";
+  TELE_BOX_DELEGATE_EVENT2["Maximize"] = "maximize";
+  TELE_BOX_DELEGATE_EVENT2["Minimize"] = "minimize";
+  return TELE_BOX_DELEGATE_EVENT2;
+})(TELE_BOX_DELEGATE_EVENT || {});
+var TELE_BOX_RESIZE_HANDLE = /* @__PURE__ */ ((TELE_BOX_RESIZE_HANDLE2) => {
+  TELE_BOX_RESIZE_HANDLE2["North"] = "n";
+  TELE_BOX_RESIZE_HANDLE2["South"] = "s";
+  TELE_BOX_RESIZE_HANDLE2["West"] = "w";
+  TELE_BOX_RESIZE_HANDLE2["East"] = "e";
+  TELE_BOX_RESIZE_HANDLE2["NorthWest"] = "nw";
+  TELE_BOX_RESIZE_HANDLE2["NorthEast"] = "ne";
+  TELE_BOX_RESIZE_HANDLE2["SouthEast"] = "se";
+  TELE_BOX_RESIZE_HANDLE2["SouthWest"] = "sw";
+  return TELE_BOX_RESIZE_HANDLE2;
+})(TELE_BOX_RESIZE_HANDLE || {});
+const TeleBoxDragHandleType = "dh";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function preventEvent(ev) {
+  ev.stopPropagation();
+  if (ev.cancelable) {
+    ev.preventDefault();
+  }
+}
+let defaultBoxCount = 1;
+function getBoxDefaultName() {
+  return `New Box ${defaultBoxCount++}`;
+}
+class DefaultTitleBar {
+  constructor({
+    readonly$,
+    state$,
+    title$,
+    buttons,
+    onEvent,
+    onDragStart,
+    namespace = "telebox"
+  }) {
+    this.sideEffect = new sideEffectManager.SideEffectManager();
+    this.lastTitleBarClick = {
+      timestamp: 0,
+      clientX: -100,
+      clientY: -100
+    };
+    this.handleTitleBarClick = (ev) => {
+      var _a;
+      if (!ev.isPrimary || this.readonly$.value) {
+        return;
+      }
+      if (ev.button !== 0) {
+        return;
+      }
+      if ((_a = ev.target.dataset) == null ? void 0 : _a.teleTitleBarNoDblClick) {
+        return;
+      }
+      preventEvent(ev);
+      const now = Date.now();
+      if (now - this.lastTitleBarClick.timestamp <= 500) {
+        if (Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5) {
+          if (this.onEvent) {
+            this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+          }
+        }
+      } else if (this.onDragStart) {
+        this.onDragStart(ev);
+      }
+      this.lastTitleBarClick.timestamp = now;
+      this.lastTitleBarClick.clientX = ev.clientX;
+      this.lastTitleBarClick.clientY = ev.clientY;
+    };
+    this.readonly$ = readonly$;
+    this.state$ = state$;
+    this.title$ = title$;
+    this.onEvent = onEvent;
+    this.onDragStart = onDragStart;
+    this.namespace = namespace;
+    this.buttons = buttons || [
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Minimize,
+        iconClassName: this.wrapClassName("titlebar-icon-minimize")
+      },
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Maximize,
+        iconClassName: this.wrapClassName("titlebar-icon-maximize"),
+        isActive: (state) => state === TELE_BOX_STATE.Maximized
+      },
+      {
+        type: TELE_BOX_DELEGATE_EVENT.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 $titleArea = document.createElement("div");
+      $titleArea.className = this.wrapClassName("title-area");
+      $titleArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+      const $title = document.createElement("h1");
+      $title.className = this.wrapClassName("title");
+      $title.dataset.teleBoxHandle = TeleBoxDragHandleType;
+      $titleArea.appendChild($title);
+      $titleArea.appendChild(this.$dragArea);
+      const $buttonsContainer = document.createElement("div");
+      $buttonsContainer.className = this.wrapClassName("titlebar-btns");
+      this.buttons.forEach(({ iconClassName }, i) => {
+        const teleTitleBarBtnIndex = String(i);
+        const $btn = document.createElement("button");
+        $btn.className = `${this.wrapClassName("titlebar-btn")} ${iconClassName}`;
+        $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
+        $btn.dataset.teleTitleBarNoDblClick = "true";
+        $buttonsContainer.appendChild($btn);
+      });
+      this.sideEffect.addDisposer(this.title$.subscribe((title) => {
+        $title.textContent = title;
+        $title.title = title;
+      }), "render-title");
+      this.sideEffect.addDisposer(this.state$.subscribe((state) => {
+        this.buttons.forEach((btn, i) => {
+          var _a;
+          if (btn.isActive) {
+            (_a = $buttonsContainer.children[i]) == null ? void 0 : _a.classList.toggle("is-active", btn.isActive(state));
+          }
+        });
+      }), "render-state-btns");
+      this.sideEffect.addEventListener($buttonsContainer, "pointerup", (ev) => {
+        var _a;
+        if (!ev.isPrimary || this.readonly$.value) {
+          return;
+        }
+        const target = ev.target;
+        const teleTitleBarBtnIndex = Number((_a = target.dataset) == null ? void 0 : _a.teleTitleBarBtnIndex);
+        if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
+          preventEvent(ev);
+          const btn = this.buttons[teleTitleBarBtnIndex];
+          if (this.onEvent) {
+            this.onEvent({
+              type: btn.type,
+              value: btn.value
+            });
+          }
+        }
+      }, {}, "render-btns-container-click");
+      this.$titleBar.appendChild($titleArea);
+      this.$titleBar.appendChild($buttonsContainer);
+    }
+    return this.$titleBar;
+  }
+  renderDragArea() {
+    const $dragArea = document.createElement("div");
+    $dragArea.className = this.wrapClassName("drag-area");
+    $dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+    this.sideEffect.addEventListener($dragArea, "pointerdown", this.handleTitleBarClick);
+    return $dragArea;
+  }
+  dragHandle() {
+    return this.$titleBar;
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+  destroy() {
+    this.sideEffect.flushAll();
+    if (this.$titleBar) {
+      this.$titleBar = void 0;
+      this.onDragStart = void 0;
+      this.onEvent = void 0;
+    }
+  }
+}
+function calcStageRect([rootRect, ratio]) {
+  if (ratio <= 0 || rootRect.width <= 0 || rootRect.height <= 0) {
+    return rootRect;
+  }
+  const preferredHeight = rootRect.width * ratio;
+  if (preferredHeight === rootRect.height) {
+    return rootRect;
+  }
+  if (preferredHeight < rootRect.height) {
+    return {
+      x: 0,
+      y: (rootRect.height - preferredHeight) / 2,
+      width: rootRect.width,
+      height: preferredHeight
+    };
+  }
+  const preferredWidth = rootRect.height / ratio;
+  return {
+    x: (rootRect.width - preferredWidth) / 2,
+    y: 0,
+    width: preferredWidth,
+    height: rootRect.height
+  };
+}
+const ResizeObserver$1 = window.ResizeObserver || resizeObserver.ResizeObserver;
+class TeleBox {
+  constructor({
+    id = sideEffectManager.genUID(),
+    title = getBoxDefaultName(),
+    namespace = "telebox",
+    visible = true,
+    width = 0.5,
+    height = 0.5,
+    minWidth = 0,
+    minHeight = 0,
+    x = 0.1,
+    y = 0.1,
+    resizable = true,
+    draggable = true,
+    boxRatio = -1,
+    focus = false,
+    zIndex = 100,
+    stageRatio = null,
+    enableShadowDOM = true,
+    titleBar,
+    content,
+    stage,
+    footer,
+    styles,
+    userStyles,
+    bodyStyle = null,
+    stageStyle = null,
+    darkMode$,
+    fence$,
+    minimized$,
+    maximized$,
+    readonly$,
+    root,
+    rootRect$,
+    managerStageRect$,
+    managerStageRatio$,
+    defaultBoxBodyStyle$,
+    defaultBoxStageStyle$,
+    collectorRect$
+  }) {
+    this.events = new Emittery__default["default"]();
+    this._delegateEvents = new Emittery__default["default"]();
+    this.handleTrackStart = (ev) => {
+      var _a;
+      return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, ev);
+    };
+    this._sideEffect = new sideEffectManager.SideEffectManager();
+    this.id = id;
+    this.namespace = namespace;
+    this.enableShadowDOM = enableShadowDOM;
+    const valManager = new valueEnhancer.ValManager();
+    this._sideEffect.addDisposer(() => valManager.destroy());
+    const title$ = new valueEnhancer.Val(title);
+    const visible$ = new valueEnhancer.Val(visible);
+    const resizable$ = new valueEnhancer.Val(resizable);
+    const draggable$ = new valueEnhancer.Val(draggable);
+    const boxRatio$ = new valueEnhancer.Val(boxRatio);
+    const zIndex$ = new valueEnhancer.Val(zIndex);
+    const focus$ = new valueEnhancer.Val(focus);
+    const state$ = valueEnhancer.combine([minimized$, maximized$], ([minimized, maximized]) => minimized ? TELE_BOX_STATE.Minimized : maximized ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    const minSize$ = new valueEnhancer.Val({
+      width: clamp(minWidth, 0, 1),
+      height: clamp(minHeight, 0, 1)
+    }, { compare: shallowequal__default["default"] });
+    const pxMinSize$ = valueEnhancer.combine([minSize$, managerStageRect$], ([minSize, managerStageRect]) => ({
+      width: minSize.width * managerStageRect.width,
+      height: minSize.height * managerStageRect.height
+    }), { compare: shallowequal__default["default"] });
+    const intrinsicSize$ = new valueEnhancer.Val({ width, height }, { compare: shallowequal__default["default"] });
+    this._sideEffect.addDisposer(minSize$.reaction((minSize, skipUpdate) => {
+      intrinsicSize$.setValue({
+        width: Math.max(width, minSize.width),
+        height: Math.max(height, minSize.height)
+      }, skipUpdate);
+    }));
+    const intrinsicCoord$ = new valueEnhancer.Val({ x, y }, { compare: shallowequal__default["default"] });
+    const pxIntrinsicSize$ = valueEnhancer.combine([intrinsicSize$, managerStageRect$], ([size, managerStageRect]) => ({
+      width: managerStageRect.width * size.width,
+      height: managerStageRect.height * size.height
+    }), { compare: shallowequal__default["default"] });
+    const pxIntrinsicCoord$ = valueEnhancer.combine([intrinsicCoord$, managerStageRect$], ([intrinsicCoord, managerStageRect]) => ({
+      x: intrinsicCoord.x * managerStageRect.width,
+      y: intrinsicCoord.y * managerStageRect.height
+    }), { compare: shallowequal__default["default"] });
+    const bodyStyle$ = new valueEnhancer.Val(bodyStyle);
+    const stageStyle$ = new valueEnhancer.Val(stageStyle);
+    const contentRoot$ = new valueEnhancer.Val(null);
+    const bodyRect$ = new valueEnhancer.Val(managerStageRect$.value, {
+      compare: shallowequal__default["default"]
+    });
+    const stageRatio$ = new valueEnhancer.Val(stageRatio);
+    const finalStageRatio$ = valueEnhancer.combine([stageRatio$, managerStageRatio$], ([stageRatio2, managerStageRatio]) => stageRatio2 != null ? stageRatio2 : managerStageRatio);
+    const stageRect$ = valueEnhancer.combine([bodyRect$, finalStageRatio$], calcStageRect, { compare: shallowequal__default["default"] });
+    const propsValConfig = {
+      darkMode: darkMode$,
+      fence: fence$,
+      minimized: minimized$,
+      maximized: maximized$,
+      readonly: readonly$,
+      rootRect: rootRect$,
+      managerStageRect: managerStageRect$,
+      defaultBoxBodyStyle: defaultBoxBodyStyle$,
+      defaultBoxStageStyle: defaultBoxStageStyle$,
+      collectorRect: collectorRect$
+    };
+    valueEnhancer.withReadonlyValueEnhancer(this, propsValConfig);
+    const myReadonlyValConfig = {
+      zIndex: zIndex$,
+      focus: focus$,
+      state: state$,
+      minSize: minSize$,
+      pxMinSize: pxMinSize$,
+      intrinsicSize: intrinsicSize$,
+      intrinsicCoord: intrinsicCoord$,
+      pxIntrinsicSize: pxIntrinsicSize$,
+      pxIntrinsicCoord: pxIntrinsicCoord$,
+      bodyRect: bodyRect$,
+      stageRect: stageRect$
+    };
+    valueEnhancer.withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
+    const valConfig = {
+      title: title$,
+      visible: visible$,
+      resizable: resizable$,
+      draggable: draggable$,
+      boxRatio: boxRatio$,
+      stageRatio: stageRatio$,
+      bodyStyle: bodyStyle$,
+      stageStyle: stageStyle$
+    };
+    valueEnhancer.withValueEnhancer(this, valConfig, valManager);
+    this.titleBar = titleBar || new DefaultTitleBar({
+      readonly$,
+      state$,
+      title$,
+      namespace: this.namespace,
+      onDragStart: (event) => {
+        var _a;
+        return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
+      },
+      onEvent: (event) => this._delegateEvents.emit(event.type)
+    });
+    this._sideEffect.addDisposer(boxRatio$.subscribe((boxRatio2) => {
+      if (boxRatio2 > 0) {
+        this.transform(pxIntrinsicCoord$.value.x, pxIntrinsicCoord$.value.y, pxIntrinsicSize$.value.width, pxIntrinsicSize$.value.height);
+      }
+    }));
+    this._sideEffect.addDisposer(fence$.subscribe((fence) => {
+      if (fence) {
+        this.move(pxIntrinsicCoord$.value.x, pxIntrinsicCoord$.value.y);
+      }
+    }));
+    this.$box = this._render();
+    contentRoot$.setValue(this.$content.parentElement);
+    content && this.mountContent(content);
+    stage && this.mountStage(stage);
+    footer && this.mountFooter(footer);
+    styles && this.mountStyles(styles);
+    userStyles && this.mountUserStyles(userStyles);
+    root.appendChild(this.$box);
+    const watchValEvent = (val, event) => {
+      this._sideEffect.addDisposer(val.reaction((v, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(event, v);
+        }
+      }));
+    };
+    watchValEvent(darkMode$, TELE_BOX_EVENT.DarkMode);
+    watchValEvent(readonly$, TELE_BOX_EVENT.Readonly);
+    watchValEvent(zIndex$, TELE_BOX_EVENT.ZIndex);
+    watchValEvent(minimized$, TELE_BOX_EVENT.Minimized);
+    watchValEvent(maximized$, TELE_BOX_EVENT.Maximized);
+    watchValEvent(state$, TELE_BOX_EVENT.State);
+    watchValEvent(intrinsicSize$, TELE_BOX_EVENT.IntrinsicResize);
+    watchValEvent(intrinsicCoord$, TELE_BOX_EVENT.IntrinsicMove);
+    this._sideEffect.addDisposer([
+      visible$.reaction((visible2, skipUpdate) => {
+        if (!skipUpdate && !visible2) {
+          this.events.emit(TELE_BOX_EVENT.Close);
+        }
+      }),
+      focus$.reaction((focus2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur);
+        }
+      })
+    ]);
+  }
+  get minWidth() {
+    return this._minSize$.value.width;
+  }
+  get minHeight() {
+    return this._minSize$.value.height;
+  }
+  setMinWidth(minWidth, skipUpdate = false) {
+    this._minSize$.setValue({ width: minWidth, height: this.minHeight }, skipUpdate);
+  }
+  setMinHeight(minHeight, skipUpdate = false) {
+    this._minSize$.setValue({ width: this.minWidth, height: minHeight }, skipUpdate);
+  }
+  resize(width, height, skipUpdate = false) {
+    this._intrinsicSize$.setValue({
+      width: Math.max(width, this.minWidth),
+      height: Math.max(height, this.minHeight)
+    }, skipUpdate);
+  }
+  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(x, y, skipUpdate = false) {
+    let safeX;
+    let safeY;
+    const managerStageRect = this.managerStageRect;
+    const pxIntrinsicSize = this.pxIntrinsicSize;
+    if (this.fence) {
+      safeX = clamp(x, 0, managerStageRect.width - pxIntrinsicSize.width);
+      safeY = clamp(y, 0, managerStageRect.height - pxIntrinsicSize.height);
+    } else {
+      safeX = clamp(x, -(pxIntrinsicSize.width - 120), 0 + managerStageRect.width - 20);
+      safeY = clamp(y, 0, 0 + managerStageRect.height - 20);
+    }
+    this._intrinsicCoord$.setValue({
+      x: safeX / managerStageRect.width,
+      y: safeY / managerStageRect.height
+    }, skipUpdate);
+  }
+  transform(x, y, width, height, skipUpdate = false) {
+    const managerStageRect = this.managerStageRect;
+    width = Math.max(width, this.pxMinSize.width);
+    height = Math.max(height, this.pxMinSize.height);
+    if (this.boxRatio > 0) {
+      const newHeight = this.boxRatio * width;
+      if (y !== this.pxIntrinsicCoord.y) {
+        y -= newHeight - height;
+      }
+      height = newHeight;
+    }
+    if (y < 0) {
+      y = 0;
+      height = this.pxIntrinsicSize.height;
+    }
+    this.move(x, y, skipUpdate);
+    this._intrinsicSize$.setValue({
+      width: width / managerStageRect.width,
+      height: height / managerStageRect.height
+    }, skipUpdate);
+  }
+  mountContent(content) {
+    var _a;
+    (_a = this.$authorContent) == null ? void 0 : _a.remove();
+    this.$authorContent = content;
+    this.$content.appendChild(content);
+  }
+  unmountContent() {
+    if (this.$authorContent) {
+      this.$authorContent.remove();
+      this.$authorContent = void 0;
+    }
+  }
+  mountStage(stage) {
+    var _a;
+    (_a = this.$authorStage) == null ? void 0 : _a.remove();
+    this.$authorStage = stage;
+    if (!this.$stage) {
+      this.$stage = this._renderStage();
+    }
+    this.$stage.appendChild(stage);
+    if (!this.$stage.parentElement) {
+      this.$body.appendChild(this.$stage);
+    }
+  }
+  unmountStage() {
+    var _a;
+    if (this.$authorStage) {
+      this.$authorStage.remove();
+      this.$authorStage = void 0;
+    }
+    (_a = this.$stage) == null ? void 0 : _a.remove();
+  }
+  mountFooter(footer) {
+    var _a;
+    (_a = this.$authorFooter) == null ? void 0 : _a.remove();
+    this.$authorFooter = footer;
+    this.$footer.appendChild(footer);
+  }
+  unmountFooter() {
+    if (this.$authorFooter) {
+      this.$authorFooter.remove();
+      this.$authorFooter = void 0;
+    }
+  }
+  mountStyles(styles) {
+    this.$styles.textContent = styles;
+  }
+  unmountStyles() {
+    this.$styles.textContent = "";
+  }
+  mountUserStyles(styles) {
+    this.$userStyles.textContent = styles;
+  }
+  unmountUserStyles() {
+    this.$userStyles.textContent = "";
+  }
+  _render() {
+    if (this.$box) {
+      return this.$box;
+    }
+    const bindBoxStates = (el, disposerID) => {
+      return this._sideEffect.addDisposer([
+        this._readonly$.subscribe((readonly) => el.classList.toggle(this.wrapClassName("readonly"), readonly)),
+        this._draggable$.subscribe((draggable) => el.classList.toggle(this.wrapClassName("no-drag"), !draggable)),
+        this._resizable$.subscribe((resizable) => el.classList.toggle(this.wrapClassName("no-resize"), !resizable)),
+        this._focus$.subscribe((focus) => el.classList.toggle(this.wrapClassName("blur"), !focus)),
+        this._darkMode$.subscribe((darkMode) => {
+          el.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+          el.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+        })
+      ], disposerID);
+    };
+    this.$box = document.createElement("div");
+    this.$box.classList.add(this.wrapClassName("box"));
+    bindBoxStates(this.$box, "bind-box-state");
+    this._sideEffect.add(() => {
+      const minimizedClassName = this.wrapClassName("minimized");
+      const maximizedClassName = this.wrapClassName("maximized");
+      const MAXIMIZED_TIMER_ID = "box-maximized-timer";
+      return this._state$.subscribe((state) => {
+        this.$box.classList.toggle(minimizedClassName, state === TELE_BOX_STATE.Minimized);
+        if (state === TELE_BOX_STATE.Maximized) {
+          this._sideEffect.flush(MAXIMIZED_TIMER_ID);
+          this.$box.classList.toggle(maximizedClassName, true);
+        } else {
+          this._sideEffect.setTimeout(() => {
+            this.$box.classList.toggle(maximizedClassName, false);
+          }, 0, MAXIMIZED_TIMER_ID);
+        }
+      });
+    });
+    this._sideEffect.addDisposer(this._visible$.subscribe((visible) => {
+      this.$box.style.display = visible ? "block" : "none";
+    }));
+    this._sideEffect.addDisposer(this._zIndex$.subscribe((zIndex) => {
+      this.$box.style.zIndex = String(zIndex);
+    }));
+    this.$box.dataset.teleBoxID = this.id;
+    const boxStyler = styler__default["default"](this.$box);
+    const boxStyles$ = valueEnhancer.combine([
+      this._maximized$,
+      this._minimized$,
+      this._pxIntrinsicSize$,
+      this._pxIntrinsicCoord$,
+      this._collectorRect$,
+      this._rootRect$,
+      this._managerStageRect$
+    ], ([
+      maximized,
+      minimized,
+      pxIntrinsicSize,
+      pxIntrinsicCoord,
+      collectorRect,
+      rootRect,
+      managerStageRect
+    ]) => {
+      const styles = maximized ? {
+        x: -managerStageRect.x,
+        y: -managerStageRect.y,
+        width: rootRect.width,
+        height: rootRect.height,
+        scaleX: 1,
+        scaleY: 1
+      } : {
+        x: pxIntrinsicCoord.x,
+        y: pxIntrinsicCoord.y,
+        width: pxIntrinsicSize.width,
+        height: pxIntrinsicSize.height,
+        scaleX: 1,
+        scaleY: 1
+      };
+      if (minimized && collectorRect) {
+        const { width: boxWidth, height: boxHeight } = maximized ? this.rootRect : pxIntrinsicSize;
+        styles.x = collectorRect.x - boxWidth / 2 + collectorRect.width / 2 - managerStageRect.x;
+        styles.y = collectorRect.y - boxHeight / 2 + collectorRect.height / 2 - managerStageRect.y;
+        styles.scaleX = collectorRect.width / boxWidth;
+        styles.scaleY = collectorRect.height / boxHeight;
+      }
+      return styles;
+    }, { compare: shallowequal__default["default"] });
+    const boxStyles = boxStyles$.value;
+    this.$box.style.width = boxStyles.width + "px";
+    this.$box.style.height = boxStyles.height + "px";
+    this.$box.style.transform = `translate(${boxStyles.x - 10}px,${boxStyles.y - 10}px)`;
+    this._sideEffect.addDisposer(boxStyles$.subscribe((styles) => {
+      boxStyler.set(styles);
+    }));
+    const $boxMain = document.createElement("div");
+    $boxMain.className = this.wrapClassName("box-main");
+    this.$box.appendChild($boxMain);
+    const $titleBar = document.createElement("div");
+    $titleBar.className = this.wrapClassName("titlebar-wrap");
+    $titleBar.appendChild(this.titleBar.render());
+    this.$titleBar = $titleBar;
+    const $body = document.createElement("div");
+    $body.className = this.wrapClassName("body-wrap");
+    this.$body = $body;
+    const $styles = document.createElement("style");
+    this.$styles = $styles;
+    $body.appendChild($styles);
+    const $userStyles = document.createElement("style");
+    this.$userStyles = $userStyles;
+    $body.appendChild($userStyles);
+    const $content = document.createElement("div");
+    $content.className = this.wrapClassName("content") + " tele-fancy-scrollbar";
+    this.$content = $content;
+    this._sideEffect.addDisposer(valueEnhancer.combine([this._bodyStyle$, this._defaultBoxBodyStyle$], ([bodyStyle, defaultBoxBodyStyle]) => bodyStyle != null ? bodyStyle : defaultBoxBodyStyle).subscribe((style2) => $content.style.cssText = style2 || ""));
+    $body.appendChild($content);
+    const $footer = document.createElement("div");
+    $footer.className = this.wrapClassName("footer-wrap");
+    this.$footer = $footer;
+    $boxMain.appendChild($titleBar);
+    const $main = document.createElement("div");
+    $main.className = this.wrapClassName("main");
+    this.$main = $main;
+    $boxMain.appendChild($main);
+    const $quarantine = document.createElement("div");
+    $quarantine.className = this.wrapClassName("quarantine");
+    $quarantine.appendChild($body);
+    $quarantine.appendChild($footer);
+    if (this.enableShadowDOM) {
+      bindBoxStates($quarantine, "bind-quarantine-state");
+      const $shadowStyle = document.createElement("style");
+      $shadowStyle.textContent = shadowStyles;
+      $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
+      const shadow = $main.attachShadow({ mode: "open" });
+      shadow.appendChild($quarantine);
+    } else {
+      $main.appendChild($quarantine);
+    }
+    this._renderResizeHandlers();
+    const updateBodyRect = () => {
+      const rect = $body.getBoundingClientRect();
+      this._bodyRect$.setValue({
+        x: 0,
+        y: 0,
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    this._sideEffect.add(() => {
+      const observer = new ResizeObserver$1(() => {
+        if (!this.minimized) {
+          updateBodyRect();
+        }
+      });
+      observer.observe($body);
+      return () => observer.disconnect();
+    });
+    this._sideEffect.addDisposer(this._minimized$.reaction((minimized) => {
+      if (!minimized) {
+        this._sideEffect.setTimeout(updateBodyRect, 400, "minimized-content-rect-fix");
+      }
+    }));
+    return this.$box;
+  }
+  _renderStage() {
+    const $stage = document.createElement("div");
+    $stage.className = this.wrapClassName("box-stage");
+    const updateStageRect = (stageRect) => {
+      $stage.style.top = stageRect.y + "px";
+      $stage.style.left = stageRect.x + "px";
+      $stage.style.width = stageRect.width + "px";
+      $stage.style.height = stageRect.height + "px";
+    };
+    this._sideEffect.addDisposer([
+      valueEnhancer.combine([this._stageStyle$, this._defaultBoxStageStyle$], ([stageStyle, defaultBoxStageStyle]) => stageStyle != null ? stageStyle : defaultBoxStageStyle).subscribe((styles) => {
+        $stage.style.cssText = styles || "";
+        updateStageRect(this._stageRect$.value);
+      }),
+      this._stageRect$.subscribe(updateStageRect)
+    ], "box-stage-styles");
+    return $stage;
+  }
+  _renderResizeHandlers() {
+    const $resizeHandles = document.createElement("div");
+    $resizeHandles.className = this.wrapClassName("resize-handles");
+    Object.values(TELE_BOX_RESIZE_HANDLE).forEach((handleType) => {
+      const $handle = document.createElement("div");
+      $handle.className = this.wrapClassName(handleType) + " " + this.wrapClassName("resize-handle");
+      $handle.dataset.teleBoxHandle = handleType;
+      $resizeHandles.appendChild($handle);
+    });
+    this.$box.appendChild($resizeHandles);
+    const TRACKING_DISPOSER_ID = "handle-tracking-listener";
+    const transformingClassName = this.wrapClassName("transforming");
+    let $trackMask;
+    let trackStartX = 0;
+    let trackStartY = 0;
+    let trackStartWidth = 0;
+    let trackStartHeight = 0;
+    let trackStartPageX = 0;
+    let trackStartPageY = 0;
+    let trackingHandle;
+    const handleTracking = (ev) => {
+      if (!ev.isPrimary || this.state !== TELE_BOX_STATE.Normal) {
+        return;
+      }
+      preventEvent(ev);
+      let { pageX, pageY } = ev;
+      if (pageY < 0) {
+        pageY = 0;
+      }
+      const offsetX = pageX - trackStartPageX;
+      const offsetY = pageY - trackStartPageY;
+      let { x: newX, y: newY } = this.pxIntrinsicCoord;
+      let { width: newWidth, height: newHeight } = this.pxIntrinsicSize;
+      switch (trackingHandle) {
+        case TELE_BOX_RESIZE_HANDLE.North: {
+          newY = trackStartY + offsetY;
+          newHeight = trackStartHeight - offsetY;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.South: {
+          newHeight = trackStartHeight + offsetY;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.West: {
+          newX = trackStartX + offsetX;
+          newWidth = trackStartWidth - offsetX;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.East: {
+          newWidth = trackStartWidth + offsetX;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthWest: {
+          newX = trackStartX + offsetX;
+          newY = trackStartY + offsetY;
+          newWidth = trackStartWidth - offsetX;
+          newHeight = trackStartHeight - offsetY;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthEast: {
+          newY = trackStartY + offsetY;
+          newWidth = trackStartWidth + offsetX;
+          newHeight = trackStartHeight - offsetY;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthEast: {
+          newWidth = trackStartWidth + offsetX;
+          newHeight = trackStartHeight + offsetY;
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthWest: {
+          newX = trackStartX + offsetX;
+          newWidth = trackStartWidth - offsetX;
+          newHeight = trackStartHeight + offsetY;
+          break;
+        }
+        default: {
+          this.move(trackStartX + offsetX, trackStartY + offsetY);
+          return;
+        }
+      }
+      this.transform(newX, newY, newWidth, newHeight);
+    };
+    const handleTrackEnd = (ev) => {
+      if (!ev.isPrimary) {
+        return;
+      }
+      trackingHandle = void 0;
+      if (!$trackMask) {
+        return;
+      }
+      preventEvent(ev);
+      this.$box.classList.toggle(transformingClassName, false);
+      this._sideEffect.flush(TRACKING_DISPOSER_ID);
+      $trackMask.remove();
+    };
+    const handleTrackStart = (ev) => {
+      var _a;
+      if (!ev.isPrimary || this.readonly) {
+        return;
+      }
+      if (ev.button != null && ev.button !== 0) {
+        return;
+      }
+      if (!this.draggable || trackingHandle || this.state !== TELE_BOX_STATE.Normal) {
+        return;
+      }
+      const target = ev.target;
+      if ((_a = target.dataset) == null ? void 0 : _a.teleBoxHandle) {
+        preventEvent(ev);
+        ({ x: trackStartX, y: trackStartY } = this.pxIntrinsicCoord);
+        ({ width: trackStartWidth, height: trackStartHeight } = this.pxIntrinsicSize);
+        ({ pageX: trackStartPageX, pageY: trackStartPageY } = ev);
+        trackingHandle = target.dataset.teleBoxHandle;
+        if (!$trackMask) {
+          $trackMask = document.createElement("div");
+        }
+        const cursor = trackingHandle ? this.wrapClassName(`cursor-${trackingHandle}`) : "";
+        $trackMask.className = this.wrapClassName(`track-mask${cursor ? ` ${cursor}` : ""}`);
+        this.$box.appendChild($trackMask);
+        this.$box.classList.add(transformingClassName);
+        this._sideEffect.add(() => {
+          window.addEventListener("pointermove", handleTracking, {
+            passive: false
+          });
+          window.addEventListener("pointerup", handleTrackEnd, {
+            passive: false
+          });
+          window.addEventListener("pointercancel", handleTrackEnd, {
+            passive: false
+          });
+          return () => {
+            window.removeEventListener("pointermove", handleTracking);
+            window.removeEventListener("pointerup", handleTrackEnd);
+            window.removeEventListener("pointercancel", handleTrackEnd);
+          };
+        }, TRACKING_DISPOSER_ID);
+      }
+    };
+    this._handleTrackStart = handleTrackStart;
+    this._sideEffect.addEventListener($resizeHandles, "pointerdown", handleTrackStart, {}, "box-resizeHandles-pointerdown");
+  }
+  async destroy() {
+    this.$box.remove();
+    this._sideEffect.flushAll();
+    this._sideEffect.flushAll();
+    await this.events.emit(TELE_BOX_EVENT.Destroyed);
+    this.events.clearListeners();
+    this._delegateEvents.clearListeners();
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+}
+var style$2 = /* @__PURE__ */ (() => ".telebox-manager-container {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f9f9f9;\n  background: var(--tele-manager-container-background, #f9f9f9);\n}\n.telebox-manager-container.is-maximized > .telebox-manager-stage, .telebox-manager-container.is-minimized > .telebox-manager-stage {\n  overflow: visible;\n}\n.telebox-manager-stage {\n  position: relative;\n  overflow: hidden;\n  background: #fff;\n  background: var(--tele-manager-stage-background, #fff);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);\n  box-shadow: var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, 0.08));\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark.telebox-manager-container {\n  background: #25282e;\n  background: var(--tele-manager-container-background-dark, #25282e);\n}\n.telebox-color-scheme-dark.telebox-manager-container > .telebox-manager-stage {\n  background: #272a30;\n  background: var(--tele-manager-stage-background-dark, #272a30);\n  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);\n  box-shadow: var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, 0.24));\n}")();
+var style$1 = /* @__PURE__ */ (() => ".telebox-collector {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  visibility: hidden;\n  display: block;\n  position: absolute;\n  z-index: 5120;\n  width: 40px;\n  height: 40px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  font-size: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  user-select: none;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-size: 18px 16px;\n  background-position: center;\n  -webkit-tap-highlight-color: transparent;\n  background-color: #fff;\n  background-color: var(--tele-collector-background, #fff);\n  box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);\n  box-shadow: var(--tele-collector-shadow, 0px 2px 6px 0px rgba(47, 65, 146, 0.15));\n}\n\n.telebox-collector-visible {\n  visibility: visible;\n  pointer-events: initial;\n}\n\n.telebox-collector-readonly {\n  cursor: not-allowed;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark.telebox-collector {\n  background-color: #383b42;\n  background-color: var(--tele-collector-background-dark, #383b42);\n  box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);\n  box-shadow: var(--tele-collector-shadow-dark, 0px 2px 6px 0px rgba(47, 65, 146, 0.15));\n}")();
+var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
+class TeleBoxCollector {
+  constructor({
+    minimized$,
+    readonly$,
+    darkMode$,
+    namespace = "telebox",
+    styles = {},
+    root$
+  }) {
+    this._sideEffect = new sideEffectManager.SideEffectManager();
+    this.namespace = namespace;
+    const valManager = new valueEnhancer.ValManager();
+    this._sideEffect.addDisposer(() => valManager.destroy());
+    const rect$ = new valueEnhancer.Val(void 0);
+    const visible$ = valueEnhancer.derive(minimized$);
+    const styles$ = new valueEnhancer.Val(styles);
+    const el$ = new valueEnhancer.Val(document.createElement("button"));
+    const valConfig = {
+      styles: styles$,
+      $collector: el$
+    };
+    valueEnhancer.withValueEnhancer(this, valConfig, valManager);
+    const propsValConfig = {
+      root: root$
+    };
+    valueEnhancer.withReadonlyValueEnhancer(this, propsValConfig);
+    const myReadonlyValConfig = {
+      rect: rect$,
+      visible: visible$
+    };
+    valueEnhancer.withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
+    el$.value.className = this.wrapClassName("collector");
+    el$.value.style.backgroundImage = `url('${collectorSVG}')`;
+    this._sideEffect.addDisposer(el$.subscribe(($collector) => {
+      this._sideEffect.addEventListener($collector, "pointerup", (ev) => {
+        if (ev.isPrimary && !readonly$.value) {
+          minimized$.setValue(false);
+        }
+      }, {}, "telebox-collector-click");
+      this._sideEffect.addDisposer([
+        visible$.subscribe((visible) => {
+          $collector.classList.toggle(this.wrapClassName("collector-visible"), visible);
+        }),
+        readonly$.subscribe((readonly) => {
+          $collector.classList.toggle(this.wrapClassName("collector-readonly"), readonly);
+        }),
+        darkMode$.subscribe((darkMode) => {
+          $collector.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+          $collector.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+        }),
+        styles$.subscribe((styles2) => {
+          Object.keys(styles2).forEach((key) => {
+            const value = styles2[key];
+            if (value != null) {
+              $collector.style[key] = value;
+            }
+          });
+        }),
+        root$.subscribe((root) => {
+          if (root) {
+            root.appendChild($collector);
+          }
+        }),
+        valueEnhancer.combine([minimized$, root$]).subscribe(([minimized, root]) => {
+          if (minimized && root) {
+            const { x, y, width, height } = $collector.getBoundingClientRect();
+            const rootRect = root.getBoundingClientRect();
+            rect$.setValue({
+              x: x - rootRect.x,
+              y: y - rootRect.y,
+              width,
+              height
+            });
+          }
+        })
+      ], "telebox-collector-el");
+    }));
+  }
+  destroy() {
+    this._sideEffect.flushAll();
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+}
+var TELE_BOX_MANAGER_EVENT = /* @__PURE__ */ ((TELE_BOX_MANAGER_EVENT2) => {
+  TELE_BOX_MANAGER_EVENT2["Focused"] = "focused";
+  TELE_BOX_MANAGER_EVENT2["Blurred"] = "blurred";
+  TELE_BOX_MANAGER_EVENT2["Created"] = "created";
+  TELE_BOX_MANAGER_EVENT2["Removed"] = "removed";
+  TELE_BOX_MANAGER_EVENT2["State"] = "state";
+  TELE_BOX_MANAGER_EVENT2["Maximized"] = "maximized";
+  TELE_BOX_MANAGER_EVENT2["Minimized"] = "minimized";
+  TELE_BOX_MANAGER_EVENT2["IntrinsicMove"] = "intrinsic_move";
+  TELE_BOX_MANAGER_EVENT2["IntrinsicResize"] = "intrinsic_resize";
+  TELE_BOX_MANAGER_EVENT2["ZIndex"] = "z_index";
+  TELE_BOX_MANAGER_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
+  TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
+  return TELE_BOX_MANAGER_EVENT2;
+})(TELE_BOX_MANAGER_EVENT || {});
+var style = /* @__PURE__ */ (() => ".telebox-max-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 5100;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n}\n.telebox-max-titlebar .telebox-title {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n  display: block;\n}\n.telebox-max-titlebar-maximized {\n  display: flex;\n}\n.telebox-titles {\n  height: 100%;\n  margin: 0;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  overflow-x: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.telebox-titles::-webkit-scrollbar {\n  height: 4px;\n  width: 4px;\n}\n.telebox-titles::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.telebox-titles::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n  background-color: transparent;\n  border-radius: 2px;\n  transition: background-color 0.4s;\n}\n.telebox-titles:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n}\n.telebox-titles::-webkit-scrollbar-thumb:hover {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:active {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.telebox-titles::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-titles-content {\n  height: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: 0;\n}\n.telebox-titles-tab {\n  height: 100%;\n  overflow: hidden;\n  max-width: 182px;\n  min-width: 150px;\n  padding: 0 26px 0 16px;\n  outline: none;\n  font-size: 13px;\n  font-family: PingFangSC-Regular, PingFang SC;\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-break: keep-all;\n  border: none;\n  border-right-width: 1px;\n  border-right-style: solid;\n  cursor: pointer;\n  user-select: none;\n  color: #7b88a0;\n  color: var(--tele-titlebar-tab-color, #7b88a0);\n  background-color: transparent;\n  background-color: var(--tele-titlebar-tab-background, transparent);\n  border-right-color: #e5e5f0;\n  border-right-color: var(--tele-titlebar-tab-divider-color, #e5e5f0);\n}\n.telebox-titles-tab-focus {\n  color: #357bf6;\n  color: var(--tele-titlebar-tab-focus-color, #357bf6);\n}\n.telebox-readonly .telebox-titles-tab {\n  cursor: not-allowed;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n  color: #e9e9e9;\n  color: var(--tele-titlebar-tab-color-dark, #e9e9e9);\n  background-color: transparent;\n  background-color: var(--tele-titlebar-tab-background-dark, transparent);\n  border-right-color: #7b88a0;\n  border-right-color: var(--tele-titlebar-tab-divider-color-dark, #7b88a0);\n}\n.telebox-color-scheme-dark .telebox-titles-tab-focus {\n  color: #357bf6;\n  color: var(--tele-titlebar-tab-focus-color-dark, #357bf6);\n}")();
+class MaxTitleBar extends DefaultTitleBar {
+  constructor(config) {
+    super(config);
+    this.boxes$ = config.boxes$;
+    this.rootRect$ = config.rootRect$;
+    this.darkMode$ = config.darkMode$;
+    config.root.appendChild(this.render());
+  }
+  focusBox(box) {
+    var _a;
+    if (this.focusedBox && this.focusedBox === box) {
+      return;
+    }
+    if (this.$titles && this.state$.value === TELE_BOX_STATE.Maximized) {
+      const { children } = this.$titles.firstElementChild;
+      for (let i = children.length - 1; i >= 0; i -= 1) {
+        const $tab = children[i];
+        const id = (_a = $tab.dataset) == null ? void 0 : _a.teleBoxID;
+        if (id) {
+          if (box && id === box.id) {
+            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), true);
+          } else if (this.focusedBox && id === this.focusedBox.id) {
+            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+          }
+        }
+      }
+    }
+    this.focusedBox = box;
+  }
+  render() {
+    if (this.$titleBar) {
+      return this.$titleBar;
+    }
+    const $titleBar = super.render();
+    $titleBar.classList.add(this.wrapClassName("max-titlebar"));
+    this.sideEffect.addDisposer([
+      this.state$.subscribe((state) => {
+        $titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), state === TELE_BOX_STATE.Maximized);
+      }),
+      this.readonly$.subscribe((readonly) => {
+        $titleBar.classList.toggle(this.wrapClassName("readonly"), readonly);
+      }),
+      valueEnhancer.combine([this.state$, this.boxes$]).subscribe(([state, titles]) => {
+        if (state === TELE_BOX_STATE.Maximized) {
+          $titleBar.classList.toggle(this.wrapClassName("max-titlebar-single-title"), titles.length === 1);
+          if (titles.length !== 1) {
+            $titleBar.replaceChild(this.renderTitles(), $titleBar.firstElementChild);
+          }
+        }
+      })
+    ], "max-render");
+    const $titlesArea = document.createElement("div");
+    $titlesArea.classList.add(this.wrapClassName("titles-area"));
+    $titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
+    return $titleBar;
+  }
+  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", (ev) => {
+      ev.currentTarget.scrollBy({
+        left: ev.deltaY > 0 ? 250 : -250,
+        behavior: "smooth"
+      });
+    }, { passive: false }, "max-render-wheel-titles");
+    const $content = document.createElement("div");
+    $content.className = this.wrapClassName("titles-content");
+    this.$titles.appendChild($content);
+    const disposers = this.boxes$.value.map((box) => {
+      const $tab = document.createElement("button");
+      $tab.className = this.wrapClassName("titles-tab");
+      $tab.textContent = box.title;
+      $tab.dataset.teleBoxID = box.id;
+      $tab.dataset.teleTitleBarNoDblClick = "true";
+      if (this.focusedBox && box.id === this.focusedBox.id) {
+        $tab.classList.add(this.wrapClassName("titles-tab-focus"));
+      }
+      $content.appendChild($tab);
+      return box._title$.reaction((title) => $tab.textContent = title);
+    });
+    this.sideEffect.addDisposer(() => disposers.forEach((disposer) => disposer()), "max-render-tab-titles");
+    return this.$titles;
+  }
+}
+const ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+class TeleBoxManager {
+  constructor({
+    root = null,
+    prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
+    minimized = false,
+    maximized = false,
+    fence = true,
+    collector,
+    namespace = "telebox",
+    readonly = false,
+    stageRatio = -1,
+    containerStyle = "",
+    stageStyle = "",
+    defaultBoxBodyStyle = null,
+    defaultBoxStageStyle = null
+  } = {}) {
+    this.events = new Emittery__default["default"]();
+    this._sideEffect = new sideEffectManager.SideEffectManager();
+    this.namespace = namespace;
+    const valManager = new valueEnhancer.ValManager();
+    this._sideEffect.addDisposer(() => valManager.destroy());
+    const root$ = new valueEnhancer.Val(root);
+    const readonly$ = new valueEnhancer.Val(readonly);
+    const minimized$ = new valueEnhancer.Val(minimized);
+    const maximized$ = new valueEnhancer.Val(maximized);
+    const fence$ = new valueEnhancer.Val(fence);
+    const containerStyle$ = new valueEnhancer.Val(containerStyle);
+    const stageStyle$ = new valueEnhancer.Val(stageStyle);
+    const stageRatio$ = new valueEnhancer.Val(stageRatio);
+    const defaultBoxBodyStyle$ = new valueEnhancer.Val(defaultBoxBodyStyle);
+    const defaultBoxStageStyle$ = new valueEnhancer.Val(defaultBoxStageStyle);
+    const rootRect$ = new valueEnhancer.Val({
+      x: 0,
+      y: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    }, { compare: shallowequal__default["default"] });
+    this._sideEffect.addDisposer(root$.subscribe((root2) => {
+      this._sideEffect.add(() => {
+        if (!root2) {
+          return () => void 0;
+        }
+        const observer = new ResizeObserver(() => {
+          const rect = root2.getBoundingClientRect();
+          rootRect$.setValue({
+            x: 0,
+            y: 0,
+            width: rect.width,
+            height: rect.height
+          });
+        });
+        observer.observe(root2);
+        return () => observer.disconnect();
+      }, "calc-root-rect");
+    }));
+    const stageRect$ = valueEnhancer.combine([rootRect$, stageRatio$], calcStageRect, {
+      compare: shallowequal__default["default"]
+    });
+    this.boxes$ = new valueEnhancer.Val([]);
+    this.topBox$ = new valueEnhancer.Val(void 0);
+    this._sideEffect.addDisposer(this.boxes$.subscribe((boxes) => {
+      if (boxes.length > 0) {
+        const topBox = boxes.reduce((topBox2, box) => topBox2.zIndex > box.zIndex ? topBox2 : box);
+        this.topBox$.setValue(topBox);
+      } else {
+        this.topBox$.setValue(void 0);
+      }
+    }));
+    const prefersDarkMatch = window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDark$ = new valueEnhancer.Val(false);
+    if (prefersDarkMatch) {
+      prefersDark$.setValue(prefersDarkMatch.matches);
+      this._sideEffect.add(() => {
+        const handler = (evt) => {
+          prefersDark$.setValue(evt.matches);
+        };
+        prefersDarkMatch.addEventListener("change", handler);
+        return () => prefersDarkMatch.removeEventListener("change", handler);
+      });
+    }
+    const prefersColorScheme$ = new valueEnhancer.Val(prefersColorScheme);
+    this._sideEffect.addDisposer(prefersColorScheme$.reaction((prefersColorScheme2, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.PrefersColorScheme, prefersColorScheme2);
+      }
+    }));
+    const darkMode$ = valueEnhancer.combine([prefersDark$, prefersColorScheme$], ([prefersDark, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark : prefersColorScheme2 === "dark");
+    const state$ = valueEnhancer.combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    this.collector = collector != null ? collector : new TeleBoxCollector({
+      minimized$,
+      readonly$,
+      darkMode$,
+      namespace,
+      root$
+    });
+    const readonlyValConfig = {
+      darkMode: darkMode$,
+      state: state$,
+      root: root$,
+      rootRect: rootRect$,
+      stageRect: stageRect$
+    };
+    valueEnhancer.withReadonlyValueEnhancer(this, readonlyValConfig, valManager);
+    const valConfig = {
+      prefersColorScheme: prefersColorScheme$,
+      readonly: readonly$,
+      fence: fence$,
+      minimized: minimized$,
+      maximized: maximized$,
+      stageRatio: stageRatio$,
+      containerStyle: containerStyle$,
+      stageStyle: stageStyle$,
+      defaultBoxBodyStyle: defaultBoxBodyStyle$,
+      defaultBoxStageStyle: defaultBoxStageStyle$
+    };
+    valueEnhancer.withValueEnhancer(this, valConfig, valManager);
+    const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
+    const checkFocusBox = (ev) => {
+      var _a;
+      if (!ev.isPrimary || readonly$.value) {
+        return;
+      }
+      const target = ev.target;
+      if (!target.tagName) {
+        return;
+      }
+      for (let el = target; el; el = el.parentElement) {
+        if (el.classList && el.classList.contains(closeBtnClassName)) {
+          return;
+        }
+        const id = (_a = el.dataset) == null ? void 0 : _a.teleBoxID;
+        if (id) {
+          const box = this.getBox(id);
+          if (box) {
+            this.focusBox(box);
+            this.makeBoxTop(box);
+            return;
+          }
+        }
+      }
+    };
+    this._sideEffect.addEventListener(window, "pointerdown", checkFocusBox, true);
+    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([
+      darkMode$.subscribe((darkMode) => {
+        this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+        this.$container.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+      }),
+      maximized$.subscribe((maximized2) => {
+        this.$container.classList.toggle("is-maximized", maximized2);
+      }),
+      minimized$.subscribe((minimized2) => {
+        this.$container.classList.toggle("is-minimized", minimized2);
+      }),
+      containerStyle$.subscribe((containerStyle2) => {
+        this.$container.style.cssText = containerStyle2;
+      }),
+      stageStyle$.subscribe((stageStyle2) => {
+        this.$stage.style.cssText = stageStyle2;
+        this.$stage.style.width = stageRect$.value.width + "px";
+        this.$stage.style.height = stageRect$.value.height + "px";
+      }),
+      stageRect$.subscribe((stageRect) => {
+        this.$stage.style.width = stageRect.width + "px";
+        this.$stage.style.height = stageRect.height + "px";
+      }),
+      root$.subscribe((root2) => {
+        if (root2) {
+          root2.appendChild(this.$container);
+        } else if (this.$container.parentElement) {
+          this.$container.remove();
+        }
+      })
+    ]);
+    this.titleBar = new MaxTitleBar({
+      namespace: this.namespace,
+      title$: valueEnhancer.derive(this.topBox$, (topBox) => (topBox == null ? void 0 : topBox.title) || ""),
+      boxes$: this.boxes$,
+      darkMode$,
+      readonly$,
+      state$,
+      rootRect$,
+      root: this.$container,
+      onEvent: (event) => {
+        switch (event.type) {
+          case TELE_BOX_DELEGATE_EVENT.Maximize: {
+            maximized$.setValue(!maximized$.value);
+            break;
+          }
+          case TELE_BOX_DELEGATE_EVENT.Minimize: {
+            minimized$.setValue(true);
+            break;
+          }
+          case TELE_BOX_EVENT.Close: {
+            this.removeTopBox();
+            this.focusTopBox();
+            break;
+          }
+        }
+      }
+    });
+    this._sideEffect.addDisposer([
+      state$.reaction((state, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
+        }
+      }),
+      maximized$.reaction((maximized2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
+        }
+      }),
+      minimized$.reaction((minimized2, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
+        }
+      }),
+      darkMode$.reaction((darkMode, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+        }
+      })
+    ]);
+  }
+  get boxes() {
+    return this.boxes$.value;
+  }
+  get topBox() {
+    return this.topBox$.value;
+  }
+  setState(state, skipUpdate = false) {
+    switch (state) {
+      case TELE_BOX_STATE.Maximized: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(true, skipUpdate);
+        break;
+      }
+      case TELE_BOX_STATE.Minimized: {
+        this.setMinimized(true, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
+      default: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
+    }
+    return this;
+  }
+  create(config = {}, smartPosition = true) {
+    const box = new TeleBox({
+      zIndex: this.topBox ? this.topBox.zIndex + 1 : 100,
+      ...config,
+      ...smartPosition ? this.smartPosition(config) : {},
+      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$
+    });
+    if (box.focus) {
+      this.focusBox(box);
+      if (smartPosition) {
+        this.makeBoxTop(box);
+      }
+    }
+    this.boxes$.setValue([...this.boxes, box]);
+    this._sideEffect.addDisposer([
+      box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
+        this.setMaximized(!this.maximized);
+      }),
+      box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
+        this.setMinimized(true);
+      }),
+      box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+        this.remove(box);
+        this.focusTopBox();
+      }),
+      box._intrinsicCoord$.reaction((_, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+        }
+      }),
+      box._intrinsicSize$.reaction((_, skipUpdate) => {
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+        }
+      }),
+      box._zIndex$.reaction((_, skipUpdate) => {
+        if (this.boxes.length > 0) {
+          const topBox = this.boxes.reduce((topBox2, box2) => topBox2.zIndex > box2.zIndex ? topBox2 : box2);
+          this.topBox$.setValue(topBox);
+        }
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+        }
+      })
+    ]);
+    this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
+    return box;
+  }
+  query(config) {
+    return config ? this.boxes.filter(this.teleBoxMatcher(config)) : [...this.boxes];
+  }
+  queryOne(config) {
+    return config ? this.boxes.find(this.teleBoxMatcher(config)) : this.boxes[0];
+  }
+  update(boxID, config, skipUpdate = false) {
+    const box = this.boxes.find((box2) => box2.id === boxID);
+    if (box) {
+      return this.updateBox(box, config, skipUpdate);
+    }
+  }
+  updateAll(config, skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      this.updateBox(box, config, skipUpdate);
+    });
+  }
+  remove(boxOrID, skipUpdate = false) {
+    const index = this.getBoxIndex(boxOrID);
+    if (index >= 0) {
+      const boxes = this.boxes.slice();
+      const deletedBoxes = boxes.splice(index, 1);
+      this.boxes$.setValue(boxes);
+      deletedBoxes.forEach((box) => box.destroy());
+      if (!skipUpdate) {
+        if (this.boxes.length <= 0) {
+          this.setMaximized(false);
+          this.setMinimized(false);
+        }
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+      }
+      return deletedBoxes[0];
+    }
+    return;
+  }
+  removeTopBox() {
+    if (this.topBox) {
+      return this.remove(this.topBox);
+    }
+    return;
+  }
+  removeAll(skipUpdate = false) {
+    const deletedBoxes = this.boxes$.value;
+    this.boxes$.setValue([]);
+    deletedBoxes.forEach((box) => box.destroy());
+    if (!skipUpdate) {
+      if (this.boxes.length <= 0) {
+        this.setMaximized(false);
+        this.setMinimized(false);
+      }
+      this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+    }
+    return deletedBoxes;
+  }
+  mount(root) {
+    this._root$.setValue(root);
+  }
+  unmount() {
+    this._root$.setValue(null);
+  }
+  destroy(skipUpdate = false) {
+    this.events.clearListeners();
+    this._sideEffect.flushAll();
+    this.removeAll(skipUpdate);
+    this.collector.destroy();
+    this.titleBar.destroy();
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+  focusBox(boxOrID, skipUpdate = false) {
+    const targetBox = this.getBox(boxOrID);
+    if (targetBox) {
+      this.boxes.forEach((box) => {
+        if (targetBox === box) {
+          let focusChanged = false;
+          if (!targetBox.focus) {
+            focusChanged = true;
+            targetBox._focus$.setValue(true, skipUpdate);
+          }
+          if (focusChanged && !skipUpdate) {
+            this.events.emit(TELE_BOX_MANAGER_EVENT.Focused, targetBox);
+          }
+        } else if (box.focus) {
+          this.blurBox(box, skipUpdate);
+        }
+      });
+      this.titleBar.focusBox(targetBox);
+    }
+  }
+  focusTopBox() {
+    if (this.topBox && !this.topBox.focus) {
+      return this.focusBox(this.topBox);
+    }
+  }
+  blurBox(boxOrID, skipUpdate = false) {
+    const targetBox = this.getBox(boxOrID);
+    if (targetBox) {
+      if (targetBox.focus) {
+        targetBox._focus$.setValue(false, skipUpdate);
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
+        }
+      }
+      if (this.titleBar.focusedBox === targetBox) {
+        this.titleBar.focusBox();
+      }
+    }
+  }
+  blurAll(skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      if (box.focus) {
+        box._focus$.setValue(false, skipUpdate);
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
+        }
+      }
+    });
+    if (this.titleBar.focusedBox) {
+      this.titleBar.focusBox();
+    }
+  }
+  teleBoxMatcher(config) {
+    const keys = Object.keys(config);
+    return (box) => keys.every((key) => config[key] === box[key]);
+  }
+  updateBox(box, config, skipUpdate = false) {
+    var _a, _b, _c, _d, _e, _f;
+    if (config.x != null || config.y != null) {
+      box._intrinsicCoord$.setValue({
+        x: (_a = config.x) != null ? _a : box.intrinsicX,
+        y: (_b = config.y) != null ? _b : box.intrinsicY
+      }, skipUpdate);
+    }
+    if (config.width != null || config.height != null) {
+      box._intrinsicSize$.setValue({
+        width: (_c = config.width) != null ? _c : box.intrinsicWidth,
+        height: (_d = config.height) != null ? _d : box.intrinsicHeight
+      }, skipUpdate);
+    }
+    if (config.title != null) {
+      box._title$.setValue(config.title);
+    }
+    if (config.visible != null) {
+      box._visible$.setValue(config.visible, skipUpdate);
+    }
+    if (config.resizable != null) {
+      box._resizable$.setValue(config.resizable, skipUpdate);
+    }
+    if (config.draggable != null) {
+      box._draggable$.setValue(config.draggable, skipUpdate);
+    }
+    if (config.boxRatio != null) {
+      box._boxRatio$.setValue(config.boxRatio, skipUpdate);
+    }
+    if (config.zIndex != null) {
+      box._zIndex$.setValue(config.zIndex, skipUpdate);
+    }
+    if (config.stageRatio !== void 0) {
+      box.setStageRatio(config.stageRatio, skipUpdate);
+    }
+    if (config.content != null) {
+      box.mountContent(config.content);
+    }
+    if (config.footer != null) {
+      box.mountFooter(config.footer);
+    }
+    if (config.minHeight != null || config.minWidth != null) {
+      box._minSize$.setValue({
+        width: (_e = config.minWidth) != null ? _e : box.minWidth,
+        height: (_f = config.minHeight) != null ? _f : box.minHeight
+      }, skipUpdate);
+    }
+  }
+  smartPosition(rect) {
+    let { x, y } = rect;
+    const { width = 0.5, height = 0.5 } = rect;
+    const stageRect = this.stageRect;
+    const topBox = this.topBox;
+    if (x == null) {
+      let pxX = 20;
+      if (topBox) {
+        const pxPreferredX = topBox.pxIntrinsicCoord.x + 20;
+        const pxIntrinsicWidth = width * stageRect.width;
+        if (pxPreferredX + pxIntrinsicWidth <= stageRect.width) {
+          pxX = pxPreferredX;
+        }
+      }
+      x = pxX / stageRect.width;
+    }
+    if (y == null) {
+      let pxY = 20;
+      if (topBox) {
+        const pxPreferredY = topBox.pxIntrinsicCoord.y + 20;
+        const pxIntrinsicHeight = height * stageRect.height;
+        if (pxPreferredY + pxIntrinsicHeight <= stageRect.height) {
+          pxY = pxPreferredY;
+        }
+      }
+      y = pxY / stageRect.height;
+    }
+    return { x, y, width, height };
+  }
+  makeBoxTop(box, skipUpdate = false) {
+    if (this.topBox) {
+      if (box !== this.topBox) {
+        box._zIndex$.setValue(this.topBox.zIndex + 1, skipUpdate);
+      }
+    }
+  }
+  getBoxIndex(boxOrID) {
+    return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
+  }
+  getBox(boxOrID) {
+    return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
+  }
+}
+exports.DefaultTitleBar = DefaultTitleBar;
+exports.TELE_BOX_COLOR_SCHEME = TELE_BOX_COLOR_SCHEME;
+exports.TELE_BOX_DELEGATE_EVENT = TELE_BOX_DELEGATE_EVENT;
+exports.TELE_BOX_EVENT = TELE_BOX_EVENT;
+exports.TELE_BOX_MANAGER_EVENT = TELE_BOX_MANAGER_EVENT;
+exports.TELE_BOX_RESIZE_HANDLE = TELE_BOX_RESIZE_HANDLE;
+exports.TELE_BOX_STATE = TELE_BOX_STATE;
+exports.TeleBox = TeleBox;
+exports.TeleBoxCollector = TeleBoxCollector;
+exports.TeleBoxDragHandleType = TeleBoxDragHandleType;
+exports.TeleBoxManager = TeleBoxManager;
 //# sourceMappingURL=telebox-insider.cjs.js.map