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

package/dist/telebox-insider.es.js

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