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

package/dist/telebox-insider.cjs.js

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