@netless/telebox-insider 1.0.0-alpha.6 → 1.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/telebox-insider.cjs.js +1 -1
  2. package/dist/telebox-insider.cjs.js.map +1 -1
  3. package/dist/telebox-insider.es.js +1 -1
  4. package/dist/telebox-insider.es.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/TeleBox/index.ts +34 -32
  7. package/src/TeleBoxManager/index.ts +3 -2
package/dist/telebox-insider.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,n=(e,t)=>{for(var s in t||(t={}))a.call(t,s)&&r(e,s,t[s]);if(i)for(var s of i(t))o.call(t,s)&&r(e,s,t[s]);return e};Object.defineProperty(exports,"__esModule",{value:!0}),exports[Symbol.toStringTag]="Module";var l=require("emittery"),h=require("stylefire"),d=require("shallowequal"),c=require("side-effect-manager"),E=require("value-enhancer"),m=require("@juggle/resize-observer");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x,p,_,g,f,b=u(l),$=u(h),v=u(d);exports.TELE_BOX_COLOR_SCHEME=void 0,(x=exports.TELE_BOX_COLOR_SCHEME||(exports.TELE_BOX_COLOR_SCHEME={})).Light="light",x.Dark="dark",x.Auto="auto",exports.TELE_BOX_STATE=void 0,(p=exports.TELE_BOX_STATE||(exports.TELE_BOX_STATE={})).Normal="normal",p.Minimized="minimized",p.Maximized="maximized",exports.TELE_BOX_EVENT=void 0,(_=exports.TELE_BOX_EVENT||(exports.TELE_BOX_EVENT={})).DarkMode="dark_mode",_.PrefersColorScheme="prefers_color_scheme",_.Close="close",_.Focus="focus",_.Blur="blur",_.IntrinsicMove="intrinsic_move",_.IntrinsicResize="intrinsic_resize",_.ZIndex="z_index",_.State="state",_.Minimized="minimized",_.Maximized="maximized",_.Readonly="readonly",_.Destroyed="destroyed",exports.TELE_BOX_DELEGATE_EVENT=void 0,(g=exports.TELE_BOX_DELEGATE_EVENT||(exports.TELE_BOX_DELEGATE_EVENT={})).Close="close",g.Maximize="maximize",g.Minimize="minimize",exports.TELE_BOX_RESIZE_HANDLE=void 0,(f=exports.TELE_BOX_RESIZE_HANDLE||(exports.TELE_BOX_RESIZE_HANDLE={})).North="n",f.South="s",f.West="w",f.East="e",f.NorthWest="nw",f.NorthEast="ne",f.SouthEast="se",f.SouthWest="sw";function w(e,t,s){return Math.min(Math.max(e,t),s)}function T(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function B(e){return e.touches?e.touches[0]:e}let N=1;function y(){return"New Box "+N++}function C(e){return Boolean(e)}function L(e){return!e}class z{constructor({readonly$:e,state$:t,title$:s,buttons:i,onEvent:a,onDragStart:o,namespace:r="telebox"}){this.sideEffect=new c.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now();s-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=s,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now(),{clientX:i=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};s-this.lastTitleBarTouch.timestamp<=500?Math.abs(i-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=s,this.lastTitleBarTouch.clientX=i,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=s,this.onEvent=a,this.onDragStart=o,this.namespace=r,this.buttons=i||[{type:exports.TELE_BOX_DELEGATE_EVENT.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:exports.TELE_BOX_DELEGATE_EVENT.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===exports.TELE_BOX_STATE.Maximized},{type:exports.TELE_BOX_DELEGATE_EVENT.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const s=document.createElement("div");s.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const i=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=i,a.dataset.teleTitleBarNoDblClick="true",s.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,i)=>{var a;t.isActive&&(null==(a=s.children[i])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(s,"click",(e=>{var t;if(this.readonly$.value)return;const s=e.target,i=Number(null==(t=s.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(i)&&i<this.buttons.length){T(e);const t=this.buttons[i];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(s)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class V{constructor({namespace:e,rootRect$:t,ratio$:s,highlightStage$:i,root$:a}){this._sideEffect=new c.SideEffectManager,this.namespace=e,this.highlightStage$=i,this.stageRect$=E.combine([t,s],(([e,t])=>{if(t<=0||e.width<=0||e.height<=0)return e;const s=e.width*t;if(s===e.height)return e;if(s<e.height)return{x:0,y:(e.height-s)/2,width:e.width,height:s};const i=e.height/t;return{x:(e.width-i)/2,y:0,width:i,height:e.height}}),{compare:v.default}),this._sideEffect.addDisposer(E.combine([a,i]).subscribe((([e,t])=>{var s;e&&t?e.appendChild(this.render()):(null==(s=this.$boxStage)?void 0:s.parentNode)&&this.$boxStage.remove()})))}render(){if(this.$boxStage)return this.$boxStage;const e=document.createElement("div");e.className=this.wrapClassName("box-stage-container");const t=document.createElement("div");t.className=this.wrapClassName("box-stage-mask");const s=document.createElement("div");s.className=this.wrapClassName("box-stage-mask");const i=document.createElement("div");i.className=this.wrapClassName("box-stage-frame");const[a,o,r,n]=["M0 8V0h8v2H2v6H0Z","M8 8V0H0v2h6v6h2Z","M0 0v8h8V6H2V0H0Z","M8 0v8H0V6h6V0h2Z"].map(((e,t)=>{const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("viewBox","0 0 8 8"),s.setAttribute("class",`${this.wrapClassName("box-stage-frame-corner")} is-${t}`);const i=document.createElementNS("http://www.w3.org/2000/svg","path");return i.setAttribute("d",e),i.setAttribute("fill","#3381FF"),s.appendChild(i),s}));return i.appendChild(a),i.appendChild(r),i.appendChild(o),i.appendChild(n),e.appendChild(t),e.appendChild(i),e.appendChild(s),this._sideEffect.addDisposer(this.highlightStage$.subscribe((t=>{e.classList.toggle("is-active",t)}))),this._sideEffect.addDisposer(E.combine([this.highlightStage$,this.stageRect$]).subscribe((([i,a])=>{i&&(a.x>0?(e.style.flexDirection="row",t.style.width=`${a.x}px`,t.style.height="",s.style.width=`${a.x}px`,s.style.height=""):a.y>0&&(e.style.flexDirection="column",t.style.width="",t.style.height=`${a.y}px`,s.style.width="",s.style.height=`${a.y}px`))}))),this.$boxStage=e,e}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}const S=window.ResizeObserver||m.ResizeObserver;class M{constructor({id:e=c.genUID(),title:t=y(),namespace:s="telebox",visible:i=!0,width:a=.5,height:o=.5,minWidth:r=0,minHeight:n=0,x:l=.1,y:h=.1,resizable:d=!0,draggable:m=!0,ratio:u=-1,focus:x=!1,zIndex:p=100,titleBar:_,content:g,footer:f,styles:$,highlightStage:T=null,darkMode$:B,fence$:N,minimized$:C,maximized$:L,readonly$:S,root$:M,rootRect$:A,managerStageRect$:O,stageRatio$:R,collectorRect$:X,managerHighlightStage$:D}){this.events=new b.default,this._delegateEvents=new b.default,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new c.SideEffectManager,this.id=e,this.namespace=s;const I=new E.ValManager;this._sideEffect.addDisposer((()=>I.destroy()));const k=new E.Val(t),H=new E.Val(i),G=new E.Val(d),Z=new E.Val(m),W=new E.Val(u),Y=new E.Val(p),P=new E.Val(x),j=new E.Val(g),F=new E.Val(f),q=new E.Val($),J=E.combine([C,L],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal)),Q=new E.Val({width:w(r,0,1),height:w(n,0,1)},{compare:v.default}),U=E.combine([Q,O],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:v.default}),K=new E.Val({width:a,height:o},{compare:v.default});this._sideEffect.addDisposer(Q.reaction(((e,t)=>{K.setValue({width:Math.max(a,e.width),height:Math.max(o,e.height)},t)})));const ee=new E.Val({x:l,y:h},{compare:v.default}),te=E.combine([K,O],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:v.default}),se=E.combine([ee,O],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:v.default}),ie=new E.Val(T),ae=E.combine([L,ie,D],(([e,t,s])=>null===t?s&&e:t)),oe=new E.Val(null),re=new E.Val(A.value,{compare:v.default}),ne=new V({namespace:s,root$:oe,rootRect$:re,ratio$:R,highlightStage$:ae});this._sideEffect.addDisposer((()=>ne.destroy()));const le={darkMode:B,fence:N,minimized:C,maximized:L,readonly:S,rootRect:A,managerStageRect:O,collectorRect:X};E.withReadonlyValueEnhancer(this,le);const he={zIndex:Y,focus:P,$userContent:j,$userFooter:F,$userStyles:q,state:J,minSize:Q,pxMinSize:U,intrinsicSize:K,intrinsicCoord:ee,pxIntrinsicSize:te,pxIntrinsicCoord:se,highlightStage:ae,boxHighlightStage:ie,contentRect:re,contentStageRect:ne.stageRect$};E.withReadonlyValueEnhancer(this,he,I);const de={title:k,visible:H,resizable:G,draggable:Z,ratio:W};E.withValueEnhancer(this,de,I),this.titleBar=_||new z({readonly$:S,state$:J,title$:k,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(W.subscribe((e=>{e>0&&this.transform(se.value.x,se.value.y,te.value.width,te.value.height,!0)}))),this._sideEffect.addDisposer(N.subscribe((e=>{e&&this.move(se.value.x,se.value.y,!0)}))),this.$box=this.render(),oe.setValue(this.$content.parentElement);const ce=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,s)=>{s||this.events.emit(t,e)})))};ce(B,exports.TELE_BOX_EVENT.DarkMode),ce(S,exports.TELE_BOX_EVENT.Readonly),ce(Y,exports.TELE_BOX_EVENT.ZIndex),ce(C,exports.TELE_BOX_EVENT.Minimized),ce(L,exports.TELE_BOX_EVENT.Maximized),ce(J,exports.TELE_BOX_EVENT.State),ce(K,exports.TELE_BOX_EVENT.IntrinsicResize),ce(ee,exports.TELE_BOX_EVENT.IntrinsicMove),this._sideEffect.addDisposer([H.reaction(((e,t)=>{t||e||this.events.emit(exports.TELE_BOX_EVENT.Close)})),P.reaction(((e,t)=>{t||this.events.emit(e?exports.TELE_BOX_EVENT.Focus:exports.TELE_BOX_EVENT.Blur)})),M.subscribe((e=>{e?e.appendChild(this.$box):this.$box.parentNode&&this.$box.remove()}))])}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){this._minSize$.setValue({width:e,height:this.minHeight},t)}setMinHeight(e,t=!1){this._minSize$.setValue({width:this.minWidth,height:e},t)}resize(e,t,s=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},s)}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}move(e,t,s=!1){let i,a;const o=this.managerStageRect,r=this.pxIntrinsicSize;if(this.fence)i=w(e,o.x,o.x+o.width-r.width),a=w(t,o.y,o.y+o.height-r.height);else{const s=this.rootRect;i=w(e,s.x-r.width+20,s.x+s.width-20),a=w(t,s.y,s.y+s.height-20)}this._intrinsicCoord$.setValue({x:(i-o.x)/o.width,y:(a-o.y)/o.height},s)}transform(e,t,s,i,a=!1){const o=this.managerStageRect,r=this.rootRect;if(s=Math.max(s,this.pxMinSize.width),i=Math.max(i,this.pxMinSize.height),this.ratio>0){const e=this.ratio*s;t!==this.pxIntrinsicCoord.y&&(t-=e-i),i=e}t<r.y&&(t=r.y,i=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:s/o.width,height:i/o.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountFooter(e){this._$userFooter$.setValue(e)}unmountFooter(){this._$userFooter$.setValue(void 0)}getUserStyles(){return this.$userStyles}mountStyles(e){let t;"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this._$userStyles$.setValue(t)}unmountStyles(){this._$userStyles$.setValue(void 0)}setHighlightStage(e){this._boxHighlightStage$.setValue(e)}render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,s,i=C)=>this._sideEffect.add((()=>{const a=this.wrapClassName(s);return t.subscribe((t=>{e.classList.toggle(a,i(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",L),e(this.$box,this._resizable$,"no-resize",L),e(this.$box,this._focus$,"blur",L),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",L),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),s="box-maximized-timer";return this._state$.subscribe((i=>{this.$box.classList.toggle(e,i===exports.TELE_BOX_STATE.Minimized),i===exports.TELE_BOX_STATE.Maximized?(this._sideEffect.flush(s),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,s)}))})),this._sideEffect.addDisposer(this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"}))),this._sideEffect.addDisposer(this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))),this.$box.dataset.teleBoxID=this.id;const t=$.default(this.$box),s=E.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,s,i,a])=>t&&a?{x:a.x-s.width/2+a.width/2,y:a.y-s.height/2+a.height/2,width:s.width+"px",height:s.height+"px",scaleX:a.width/s.width,scaleY:a.height/s.height}:e?{x:0,y:0,width:"100%",height:"100%",scaleX:1,scaleY:1}:{x:i.x,y:i.y,width:s.width+"px",height:s.height+"px",scaleX:1,scaleY:1}),{compare:v.default}),i=s.value;this.$box.style.width=i.width,this.$box.style.height=i.height,this.$box.style.transform=`translate(${i.x-10}px,${i.y-10}px)`,this._sideEffect.addDisposer(s.subscribe((e=>{t.set(e)})));const a=document.createElement("div");a.className=this.wrapClassName("box-main"),this.$box.appendChild(a);const o=document.createElement("div");o.className=this.wrapClassName("titlebar-wrap"),o.appendChild(this.titleBar.render()),this.$titleBar=o;const r=document.createElement("div");r.className=this.wrapClassName("content-wrap");const n=document.createElement("div");n.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=n,this._sideEffect.add((()=>{const e=new S((e=>{var t;const s=null==(t=e[0])?void 0:t.contentRect;s&&this._contentRect$.setValue({x:s.x,y:s.y,width:s.width,height:s.height})}));return e.observe(n),()=>e.disconnect()})),this._sideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&r.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),r.appendChild(n);const l=document.createElement("div");return l.className=this.wrapClassName("footer-wrap"),this.$footer=l,this._sideEffect.add((()=>{let e;return this._$userFooter$.subscribe((t=>{e&&e.remove(),e=t,t&&l.appendChild(t)}))})),a.appendChild(o),a.appendChild(r),a.appendChild(l),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(exports.TELE_BOX_RESIZE_HANDLE).forEach((t=>{const s=document.createElement("div");s.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),s.dataset.teleBoxHandle=t,e.appendChild(s)})),this.$box.appendChild(e);const t="handle-tracking-listener",s=this.wrapClassName("transforming");let i,a,o=0,r=0,n=0,l=0,h=0,d=0;const c=e=>{if(this.state!==exports.TELE_BOX_STATE.Normal)return;T(e);let{pageX:t,pageY:s}=B(e);s<this.rootRect.y&&(s=this.rootRect.y);const i=t-h,c=s-d;let{x:E,y:m}=this.pxIntrinsicCoord,{width:u,height:x}=this.pxIntrinsicSize;switch(a){case exports.TELE_BOX_RESIZE_HANDLE.North:m=r+c,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.South:x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.West:E=o+i,u=n-i;break;case exports.TELE_BOX_RESIZE_HANDLE.East:u=n+i;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthWest:E=o+i,m=r+c,u=n-i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthEast:m=r+c,u=n+i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthEast:u=n+i,x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthWest:E=o+i,u=n-i,x=l+c;break;default:return void this.move(o+i,r+c)}this.transform(E,m,u,x)},E=e=>{a=void 0,i&&(T(e),this.$box.classList.toggle(s,!1),this._sideEffect.flush(t),i.remove())},m=e=>{var m;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==exports.TELE_BOX_STATE.Normal)return;const u=e.target;if(null==(m=u.dataset)?void 0:m.teleBoxHandle){T(e),({x:o,y:r}=this.pxIntrinsicCoord),({width:n,height:l}=this.pxIntrinsicSize),({pageX:h,pageY:d}=B(e)),a=u.dataset.teleBoxHandle,i||(i=document.createElement("div"));const m=a?this.wrapClassName(`cursor-${a}`):"";i.className=this.wrapClassName("track-mask"+(m?` ${m}`:"")),this.$box.appendChild(i),this.$box.classList.add(s),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",E),window.addEventListener("touchend",E,{passive:!1}),window.addEventListener("touchcancel",E,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",E),window.removeEventListener("touchend",E),window.removeEventListener("touchcancel",E)})),t)}};this._handleTrackStart=m,this._sideEffect.addEventListener(e,"mousedown",m,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",m,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(exports.TELE_BOX_EVENT.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var A;class O{constructor({minimized$:e,readonly$:t,darkMode$:s,rootRect$:i,namespace:a="telebox",styles:o={},root$:r}){this._sideEffect=new c.SideEffectManager,this.namespace=a;const n=new E.ValManager;this._sideEffect.addDisposer((()=>n.destroy()));const l=new E.Val(void 0),h=E.derive(e),d=new E.Val(o),m=new E.Val(document.createElement("button")),u={styles:d,$collector:m};E.withValueEnhancer(this,u,n);const x={root:r};E.withReadonlyValueEnhancer(this,x);const p={rect:l,visible:h};E.withReadonlyValueEnhancer(this,p,n),m.value.className=this.wrapClassName("collector"),m.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(m.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([h.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-readonly"),e)})),s.subscribe((e=>{a.classList.toggle(this.wrapClassName("color-scheme-dark"),e),a.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),d.subscribe((e=>{Object.keys(e).forEach((t=>{const s=e[t];null!=s&&(a.style[t]=s)}))})),r.subscribe((e=>{e&&e.appendChild(a)})),E.combine([e,i,r]).subscribe((([e,t,s])=>{if(e&&s){const{x:e,y:s,width:i,height:o}=a.getBoundingClientRect();l.setValue({x:e-t.x,y:s-t.y,width:i,height:o})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}exports.TELE_BOX_MANAGER_EVENT=void 0,(A=exports.TELE_BOX_MANAGER_EVENT||(exports.TELE_BOX_MANAGER_EVENT={})).Focused="focused",A.Blurred="blurred",A.Created="created",A.Removed="removed",A.State="state",A.Maximized="maximized",A.Minimized="minimized",A.IntrinsicMove="intrinsic_move",A.IntrinsicResize="intrinsic_resize",A.ZIndex="z_index",A.PrefersColorScheme="prefers_color_scheme",A.DarkMode="dark_mode";class R extends z{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===exports.TELE_BOX_STATE.Maximized){const{children:s}=this.$titles.firstElementChild;for(let i=s.length-1;i>=0;i-=1){const a=s[i],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.rootRect$.subscribe((t=>{const{x:s,y:i,width:a}=t;e.style.transform=`translate(${s}px, ${i}px)`,e.style.width=a+"px"})),this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===exports.TELE_BOX_STATE.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),E.combine([this.state$,this.boxes$]).subscribe((([t,s])=>{t===exports.TELE_BOX_STATE.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===s.length),1!==s.length&&e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const s=document.createElement("button");return s.className=this.wrapClassName("titles-tab"),s.textContent=t.title,s.dataset.teleBoxID=t.id,s.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&s.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(s),t._title$.reaction((e=>s.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const X=window.ResizeObserver||m.ResizeObserver;exports.DefaultTitleBar=z,exports.TeleBox=M,exports.TeleBoxCollector=O,exports.TeleBoxDragHandleType="dh",exports.TeleBoxManager=class{constructor({root:e=null,prefersColorScheme:t=exports.TELE_BOX_COLOR_SCHEME.Light,minimized:s=!1,maximized:i=!1,fence:a=!1,collector:o,namespace:r="telebox",readonly:n=!1,stageRatio:l=-1,highlightStage:h=!0}={}){this.events=new b.default,this._sideEffect=new c.SideEffectManager,this.namespace=r;const d=new E.ValManager;this._sideEffect.addDisposer((()=>d.destroy()));const m=new E.Val(e),u=new E.Val(n),x=new E.Val(s),p=new E.Val(i),_=new E.Val(a),g=new E.Val(l),f=new E.Val(h),$=new E.Val({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:v.default});this._sideEffect.addDisposer(m.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new X((e=>{var t;const s=null==(t=e[0])?void 0:t.contentRect;s&&$.setValue({x:s.x,y:s.y,width:s.width,height:s.height})}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")}))),this.boxes$=new E.Val([]),this.topBox$=new E.Val(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe((e=>{if(e.length>0){const t=e.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(t)}else this.topBox$.setValue(void 0)})));const w=window.matchMedia("(prefers-color-scheme: dark)"),T=new E.Val(!1);w&&(T.setValue(w.matches),this._sideEffect.add((()=>{const e=e=>{T.setValue(e.matches)};return w.addEventListener("change",e),()=>w.removeEventListener("change",e)})));const B=new E.Val(t);this._sideEffect.addDisposer(B.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.PrefersColorScheme,e)})));const N=E.combine([T,B],(([e,t])=>"auto"===t?e:"dark"===t)),y=E.combine([x,p],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal));this.collector=null!=o?o:new O({minimized$:x,readonly$:u,darkMode$:N,namespace:r,root$:m,rootRect$:$});const C=new V({namespace:r,rootRect$:$,ratio$:g,root$:m,highlightStage$:E.combine([f,p],(([e,t])=>e&&!t))});this._sideEffect.addDisposer((()=>C.destroy()));const L={darkMode:N,state:y,root:m,rootRect:$,stageRect:C.stageRect$};E.withReadonlyValueEnhancer(this,L,d);const z={prefersColorScheme:B,readonly:u,fence:_,minimized:x,maximized:p,stageRatio:g,highlightStage:f};E.withValueEnhancer(this,z,d);const S=this.wrapClassName("titlebar-icon-close"),M=e=>{var t;if(u.value)return;const s=e.target;if(s.tagName)for(let i=s;i;i=i.parentElement){if(i.classList&&i.classList.contains(S))return;const e=null==(t=i.dataset)?void 0:t.teleBoxID;if(e){const t=this.getBox(e);if(t)return this.focusBox(t),void this.makeBoxTop(t)}}};this._sideEffect.addEventListener(window,"mousedown",M,!0),this._sideEffect.addEventListener(window,"touchstart",M,!0),this.titleBar=new R({namespace:this.namespace,title$:E.derive(this.topBox$,(e=>(null==e?void 0:e.title)||"")),boxes$:this.boxes$,darkMode$:N,readonly$:u,state$:y,root$:m,rootRect$:$,onEvent:e=>{switch(e.type){case exports.TELE_BOX_DELEGATE_EVENT.Maximize:p.setValue(!p.value);break;case exports.TELE_BOX_DELEGATE_EVENT.Minimize:x.setValue(!0);break;case exports.TELE_BOX_EVENT.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([y.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.State,e)})),p.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Maximized,e)})),x.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Minimized,e)})),N.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case exports.TELE_BOX_STATE.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case exports.TELE_BOX_STATE.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},i=!0){const a=new M((o=n(n({zIndex:this.topBox?this.topBox.zIndex+1:100},e),i?this.smartPosition(e):{}),r={namespace:this.namespace,root$:this._root$,darkMode$:this._darkMode$,maximized$:this._maximized$,minimized$:this._minimized$,fence$:this._fence$,rootRect$:this._rootRect$,managerStageRect$:this._stageRect$,stageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,managerHighlightStage$:this._highlightStage$},t(o,s(r))));var o,r;return a.focus&&(this.focusBox(a),i&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicResize,a)})),a._zIndex$.reaction(((e,t)=>{if(this.boxes.length>0){const e=this.boxes.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(e)}t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.ZIndex,a)}))]),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Created,a),a}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,s=!1){const i=this.boxes.find((t=>t.id===e));if(i)return this.updateBox(i,t,s)}updateAll(e,t=!1){this.boxes.forEach((s=>{this.updateBox(s,e,t)}))}remove(e,t=!1){const s=this.getBoxIndex(e);if(s>=0){const e=this.boxes.slice(),i=e.splice(s,1);return this.boxes$.setValue(e),i.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,i)),i[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach((e=>e.destroy())),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,t)),t}mount(e){this._root$.setValue(e)}unmount(){this._root$.setValue(null)}destroy(e=!1){this.events.clearListeners(),this._sideEffect.flushAll(),this.removeAll(e),this.collector.destroy(),this.titleBar.destroy()}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const s=this.getBox(e);s&&(this.boxes.forEach((e=>{if(s===e){let e=!1;s.focus||(e=!0,s._focus$.setValue(!0,t)),e&&!t&&this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Focused,s)}else e.focus&&this.blurBox(e,t)})),this.titleBar.focusBox(s))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const s=this.getBox(e);s&&(s.focus&&(s._focus$.setValue(!1,t),t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,s)),this.titleBar.focusedBox===s&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,t))})),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return s=>t.every((t=>e[t]===s[t]))}updateBox(e,t,s=!1){var i,a,o,r,n,l;null==t.x&&null==t.y||e._intrinsicCoord$.setValue({x:null!=(i=t.x)?i:e.intrinsicX,y:null!=(a=t.y)?a:e.intrinsicY},s),null==t.width&&null==t.height||e._intrinsicSize$.setValue({width:null!=(o=t.width)?o:e.intrinsicWidth,height:null!=(r=t.height)?r:e.intrinsicHeight},s),null!=t.title&&e._title$.setValue(t.title),null!=t.visible&&e._visible$.setValue(t.visible,s),null!=t.resizable&&e._resizable$.setValue(t.resizable,s),null!=t.draggable&&e._draggable$.setValue(t.draggable,s),null!=t.ratio&&e._ratio$.setValue(t.ratio,s),null!=t.zIndex&&e._zIndex$.setValue(t.zIndex,s),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(l=t.minHeight)?l:e.minHeight},s)}smartPosition(e){let{x:t,y:s}=e;const{width:i=.5,height:a=.5}=e,o=this.stageRect,r=this.topBox;if(null==t){let e=o.x+20;if(r){const t=r.pxIntrinsicCoord.x+20;t+i*o.width<=o.x+o.width&&(e=t)}t=(e-o.x)/o.width}if(null==s){let e=o.y+20;if(r){const t=r.pxIntrinsicCoord.y+20;t+a*o.height<=o.y+o.height&&(e=t)}s=(e-o.y)/o.height}return{x:t,y:s,width:i,height:a}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return"string"==typeof e?this.boxes.findIndex((t=>t.id===e)):this.boxes.findIndex((t=>t===e))}getBox(e){return"string"==typeof e?this.boxes.find((t=>t.id===e)):e}};
1
+ "use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,n=(e,t)=>{for(var s in t||(t={}))a.call(t,s)&&r(e,s,t[s]);if(i)for(var s of i(t))o.call(t,s)&&r(e,s,t[s]);return e};Object.defineProperty(exports,"__esModule",{value:!0}),exports[Symbol.toStringTag]="Module";var l=require("emittery"),h=require("stylefire"),d=require("shallowequal"),c=require("side-effect-manager"),E=require("value-enhancer"),m=require("@juggle/resize-observer");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x,p,_,g,f,b=u(l),$=u(h),v=u(d);exports.TELE_BOX_COLOR_SCHEME=void 0,(x=exports.TELE_BOX_COLOR_SCHEME||(exports.TELE_BOX_COLOR_SCHEME={})).Light="light",x.Dark="dark",x.Auto="auto",exports.TELE_BOX_STATE=void 0,(p=exports.TELE_BOX_STATE||(exports.TELE_BOX_STATE={})).Normal="normal",p.Minimized="minimized",p.Maximized="maximized",exports.TELE_BOX_EVENT=void 0,(_=exports.TELE_BOX_EVENT||(exports.TELE_BOX_EVENT={})).DarkMode="dark_mode",_.PrefersColorScheme="prefers_color_scheme",_.Close="close",_.Focus="focus",_.Blur="blur",_.IntrinsicMove="intrinsic_move",_.IntrinsicResize="intrinsic_resize",_.ZIndex="z_index",_.State="state",_.Minimized="minimized",_.Maximized="maximized",_.Readonly="readonly",_.Destroyed="destroyed",exports.TELE_BOX_DELEGATE_EVENT=void 0,(g=exports.TELE_BOX_DELEGATE_EVENT||(exports.TELE_BOX_DELEGATE_EVENT={})).Close="close",g.Maximize="maximize",g.Minimize="minimize",exports.TELE_BOX_RESIZE_HANDLE=void 0,(f=exports.TELE_BOX_RESIZE_HANDLE||(exports.TELE_BOX_RESIZE_HANDLE={})).North="n",f.South="s",f.West="w",f.East="e",f.NorthWest="nw",f.NorthEast="ne",f.SouthEast="se",f.SouthWest="sw";function w(e,t,s){return Math.min(Math.max(e,t),s)}function T(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function B(e){return e.touches?e.touches[0]:e}let N=1;function y(){return"New Box "+N++}function C(e){return Boolean(e)}function L(e){return!e}class z{constructor({readonly$:e,state$:t,title$:s,buttons:i,onEvent:a,onDragStart:o,namespace:r="telebox"}){this.sideEffect=new c.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now();s-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=s,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now(),{clientX:i=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};s-this.lastTitleBarTouch.timestamp<=500?Math.abs(i-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=s,this.lastTitleBarTouch.clientX=i,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=s,this.onEvent=a,this.onDragStart=o,this.namespace=r,this.buttons=i||[{type:exports.TELE_BOX_DELEGATE_EVENT.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:exports.TELE_BOX_DELEGATE_EVENT.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===exports.TELE_BOX_STATE.Maximized},{type:exports.TELE_BOX_DELEGATE_EVENT.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const s=document.createElement("div");s.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const i=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=i,a.dataset.teleTitleBarNoDblClick="true",s.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,i)=>{var a;t.isActive&&(null==(a=s.children[i])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(s,"click",(e=>{var t;if(this.readonly$.value)return;const s=e.target,i=Number(null==(t=s.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(i)&&i<this.buttons.length){T(e);const t=this.buttons[i];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(s)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class V{constructor({namespace:e,rootRect$:t,ratio$:s,highlightStage$:i,root$:a}){this._sideEffect=new c.SideEffectManager,this.namespace=e,this.highlightStage$=i,this.stageRect$=E.combine([t,s],(([e,t])=>{if(t<=0||e.width<=0||e.height<=0)return e;const s=e.width*t;if(s===e.height)return e;if(s<e.height)return{x:0,y:(e.height-s)/2,width:e.width,height:s};const i=e.height/t;return{x:(e.width-i)/2,y:0,width:i,height:e.height}}),{compare:v.default}),this._sideEffect.addDisposer(E.combine([a,i]).subscribe((([e,t])=>{var s;e&&t?e.appendChild(this.render()):(null==(s=this.$boxStage)?void 0:s.parentNode)&&this.$boxStage.remove()})))}render(){if(this.$boxStage)return this.$boxStage;const e=document.createElement("div");e.className=this.wrapClassName("box-stage-container");const t=document.createElement("div");t.className=this.wrapClassName("box-stage-mask");const s=document.createElement("div");s.className=this.wrapClassName("box-stage-mask");const i=document.createElement("div");i.className=this.wrapClassName("box-stage-frame");const[a,o,r,n]=["M0 8V0h8v2H2v6H0Z","M8 8V0H0v2h6v6h2Z","M0 0v8h8V6H2V0H0Z","M8 0v8H0V6h6V0h2Z"].map(((e,t)=>{const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("viewBox","0 0 8 8"),s.setAttribute("class",`${this.wrapClassName("box-stage-frame-corner")} is-${t}`);const i=document.createElementNS("http://www.w3.org/2000/svg","path");return i.setAttribute("d",e),i.setAttribute("fill","#3381FF"),s.appendChild(i),s}));return i.appendChild(a),i.appendChild(r),i.appendChild(o),i.appendChild(n),e.appendChild(t),e.appendChild(i),e.appendChild(s),this._sideEffect.addDisposer(this.highlightStage$.subscribe((t=>{e.classList.toggle("is-active",t)}))),this._sideEffect.addDisposer(E.combine([this.highlightStage$,this.stageRect$]).subscribe((([i,a])=>{i&&(a.x>0?(e.style.flexDirection="row",t.style.width=`${a.x}px`,t.style.height="",s.style.width=`${a.x}px`,s.style.height=""):a.y>0&&(e.style.flexDirection="column",t.style.width="",t.style.height=`${a.y}px`,s.style.width="",s.style.height=`${a.y}px`))}))),this.$boxStage=e,e}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}const S=window.ResizeObserver||m.ResizeObserver;class M{constructor({id:e=c.genUID(),title:t=y(),namespace:s="telebox",visible:i=!0,width:a=.5,height:o=.5,minWidth:r=0,minHeight:n=0,x:l=.1,y:h=.1,resizable:d=!0,draggable:m=!0,ratio:u=-1,focus:x=!1,zIndex:p=100,titleBar:_,content:g,footer:f,styles:$,highlightStage:T=null,darkMode$:B,fence$:N,minimized$:C,maximized$:L,readonly$:S,root$:M,rootRect$:A,managerStageRect$:O,stageRatio$:R,collectorRect$:X,managerHighlightStage$:D}){this.events=new b.default,this._delegateEvents=new b.default,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new c.SideEffectManager,this.id=e,this.namespace=s;const I=new E.ValManager;this._sideEffect.addDisposer((()=>I.destroy()));const k=new E.Val(t),H=new E.Val(i),G=new E.Val(d),Z=new E.Val(m),W=new E.Val(u),Y=new E.Val(p),P=new E.Val(x),j=new E.Val(g),F=new E.Val(f),q=new E.Val($),J=E.combine([C,L],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal)),Q=new E.Val({width:w(r,0,1),height:w(n,0,1)},{compare:v.default}),U=E.combine([Q,O],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:v.default}),K=new E.Val({width:a,height:o},{compare:v.default});this._sideEffect.addDisposer(Q.reaction(((e,t)=>{K.setValue({width:Math.max(a,e.width),height:Math.max(o,e.height)},t)})));const ee=new E.Val({x:l,y:h},{compare:v.default}),te=E.combine([K,O],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:v.default}),se=E.combine([ee,O],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:v.default}),ie=new E.Val(T),ae=E.combine([L,ie,D],(([e,t,s])=>null===t?s&&e:t)),oe=new E.Val(null),re=new E.Val(A.value,{compare:v.default}),ne=new V({namespace:s,root$:oe,rootRect$:re,ratio$:R,highlightStage$:ae});this._sideEffect.addDisposer((()=>ne.destroy()));const le={darkMode:B,fence:N,minimized:C,maximized:L,readonly:S,rootRect:A,managerStageRect:O,collectorRect:X};E.withReadonlyValueEnhancer(this,le);const he={zIndex:Y,focus:P,$userContent:j,$userFooter:F,$userStyles:q,state:J,minSize:Q,pxMinSize:U,intrinsicSize:K,intrinsicCoord:ee,pxIntrinsicSize:te,pxIntrinsicCoord:se,highlightStage:ae,boxHighlightStage:ie,contentRect:re,contentStageRect:ne.stageRect$};E.withReadonlyValueEnhancer(this,he,I);const de={title:k,visible:H,resizable:G,draggable:Z,ratio:W};E.withValueEnhancer(this,de,I),this.titleBar=_||new z({readonly$:S,state$:J,title$:k,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(W.subscribe((e=>{e>0&&this.transform(se.value.x,se.value.y,te.value.width,te.value.height,!0)}))),this._sideEffect.addDisposer(N.subscribe((e=>{e&&this.move(se.value.x,se.value.y,!0)}))),this.$box=this.render(),oe.setValue(this.$content.parentElement);const ce=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,s)=>{s||this.events.emit(t,e)})))};ce(B,exports.TELE_BOX_EVENT.DarkMode),ce(S,exports.TELE_BOX_EVENT.Readonly),ce(Y,exports.TELE_BOX_EVENT.ZIndex),ce(C,exports.TELE_BOX_EVENT.Minimized),ce(L,exports.TELE_BOX_EVENT.Maximized),ce(J,exports.TELE_BOX_EVENT.State),ce(K,exports.TELE_BOX_EVENT.IntrinsicResize),ce(ee,exports.TELE_BOX_EVENT.IntrinsicMove),this._sideEffect.addDisposer([H.reaction(((e,t)=>{t||e||this.events.emit(exports.TELE_BOX_EVENT.Close)})),P.reaction(((e,t)=>{t||this.events.emit(e?exports.TELE_BOX_EVENT.Focus:exports.TELE_BOX_EVENT.Blur)})),M.subscribe((e=>{e?e.appendChild(this.$box):this.$box.parentNode&&this.$box.remove()}))])}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){this._minSize$.setValue({width:e,height:this.minHeight},t)}setMinHeight(e,t=!1){this._minSize$.setValue({width:this.minWidth,height:e},t)}resize(e,t,s=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},s)}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}move(e,t,s=!1){let i,a;const o=this.managerStageRect,r=this.pxIntrinsicSize;if(this.fence)i=w(e,o.x,o.x+o.width-r.width),a=w(t,o.y,o.y+o.height-r.height);else{const s=this.rootRect;i=w(e,s.x-r.width+20,s.x+s.width-20),a=w(t,s.y,s.y+s.height-20)}this._intrinsicCoord$.setValue({x:(i-o.x)/o.width,y:(a-o.y)/o.height},s)}transform(e,t,s,i,a=!1){const o=this.managerStageRect,r=this.rootRect;if(s=Math.max(s,this.pxMinSize.width),i=Math.max(i,this.pxMinSize.height),this.ratio>0){const e=this.ratio*s;t!==this.pxIntrinsicCoord.y&&(t-=e-i),i=e}t<r.y&&(t=r.y,i=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:s/o.width,height:i/o.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountFooter(e){this._$userFooter$.setValue(e)}unmountFooter(){this._$userFooter$.setValue(void 0)}getUserStyles(){return this.$userStyles}mountStyles(e){let t;"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this._$userStyles$.setValue(t)}unmountStyles(){this._$userStyles$.setValue(void 0)}setHighlightStage(e){this._boxHighlightStage$.setValue(e)}render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,s,i=C)=>this._sideEffect.add((()=>{const a=this.wrapClassName(s);return t.subscribe((t=>{e.classList.toggle(a,i(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",L),e(this.$box,this._resizable$,"no-resize",L),e(this.$box,this._focus$,"blur",L),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",L),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),s="box-maximized-timer";return this._state$.subscribe((i=>{this.$box.classList.toggle(e,i===exports.TELE_BOX_STATE.Minimized),i===exports.TELE_BOX_STATE.Maximized?(this._sideEffect.flush(s),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,s)}))})),this._sideEffect.addDisposer(this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"}))),this._sideEffect.addDisposer(this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))),this.$box.dataset.teleBoxID=this.id;const t=$.default(this.$box),s=E.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,s,i,a])=>{const o=e?{x:0,y:0,width:"100%",height:"100%",scaleX:1,scaleY:1}:{x:i.x,y:i.y,width:s.width+"px",height:s.height+"px",scaleX:1,scaleY:1};if(t&&a){const t=e?this.rootRect.width:s.width,i=e?this.rootRect.height:s.height;o.x=a.x-t/2+a.width/2,o.y=a.y-i/2+a.height/2,o.scaleX=a.width/t,o.scaleY=a.height/i}return o}),{compare:v.default}),i=s.value;this.$box.style.width=i.width,this.$box.style.height=i.height,this.$box.style.transform=`translate(${i.x-10}px,${i.y-10}px)`,this._sideEffect.addDisposer(s.subscribe((e=>{t.set(e)})));const a=document.createElement("div");a.className=this.wrapClassName("box-main"),this.$box.appendChild(a);const o=document.createElement("div");o.className=this.wrapClassName("titlebar-wrap"),o.appendChild(this.titleBar.render()),this.$titleBar=o;const r=document.createElement("div");r.className=this.wrapClassName("content-wrap");const n=document.createElement("div");n.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=n,this._sideEffect.add((()=>{const e=new S((e=>{var t;const s=null==(t=e[0])?void 0:t.contentRect;s&&this._contentRect$.setValue({x:s.x,y:s.y,width:s.width,height:s.height})}));return e.observe(n),()=>e.disconnect()})),this._sideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&r.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),r.appendChild(n);const l=document.createElement("div");return l.className=this.wrapClassName("footer-wrap"),this.$footer=l,this._sideEffect.add((()=>{let e;return this._$userFooter$.subscribe((t=>{e&&e.remove(),e=t,t&&l.appendChild(t)}))})),a.appendChild(o),a.appendChild(r),a.appendChild(l),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(exports.TELE_BOX_RESIZE_HANDLE).forEach((t=>{const s=document.createElement("div");s.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),s.dataset.teleBoxHandle=t,e.appendChild(s)})),this.$box.appendChild(e);const t="handle-tracking-listener",s=this.wrapClassName("transforming");let i,a,o=0,r=0,n=0,l=0,h=0,d=0;const c=e=>{if(this.state!==exports.TELE_BOX_STATE.Normal)return;T(e);let{pageX:t,pageY:s}=B(e);s<this.rootRect.y&&(s=this.rootRect.y);const i=t-h,c=s-d;let{x:E,y:m}=this.pxIntrinsicCoord,{width:u,height:x}=this.pxIntrinsicSize;switch(a){case exports.TELE_BOX_RESIZE_HANDLE.North:m=r+c,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.South:x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.West:E=o+i,u=n-i;break;case exports.TELE_BOX_RESIZE_HANDLE.East:u=n+i;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthWest:E=o+i,m=r+c,u=n-i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthEast:m=r+c,u=n+i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthEast:u=n+i,x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthWest:E=o+i,u=n-i,x=l+c;break;default:return void this.move(o+i,r+c)}this.transform(E,m,u,x)},E=e=>{a=void 0,i&&(T(e),this.$box.classList.toggle(s,!1),this._sideEffect.flush(t),i.remove())},m=e=>{var m;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==exports.TELE_BOX_STATE.Normal)return;const u=e.target;if(null==(m=u.dataset)?void 0:m.teleBoxHandle){T(e),({x:o,y:r}=this.pxIntrinsicCoord),({width:n,height:l}=this.pxIntrinsicSize),({pageX:h,pageY:d}=B(e)),a=u.dataset.teleBoxHandle,i||(i=document.createElement("div"));const m=a?this.wrapClassName(`cursor-${a}`):"";i.className=this.wrapClassName("track-mask"+(m?` ${m}`:"")),this.$box.appendChild(i),this.$box.classList.add(s),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",E),window.addEventListener("touchend",E,{passive:!1}),window.addEventListener("touchcancel",E,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",E),window.removeEventListener("touchend",E),window.removeEventListener("touchcancel",E)})),t)}};this._handleTrackStart=m,this._sideEffect.addEventListener(e,"mousedown",m,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",m,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(exports.TELE_BOX_EVENT.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var A;class O{constructor({minimized$:e,readonly$:t,darkMode$:s,rootRect$:i,namespace:a="telebox",styles:o={},root$:r}){this._sideEffect=new c.SideEffectManager,this.namespace=a;const n=new E.ValManager;this._sideEffect.addDisposer((()=>n.destroy()));const l=new E.Val(void 0),h=E.derive(e),d=new E.Val(o),m=new E.Val(document.createElement("button")),u={styles:d,$collector:m};E.withValueEnhancer(this,u,n);const x={root:r};E.withReadonlyValueEnhancer(this,x);const p={rect:l,visible:h};E.withReadonlyValueEnhancer(this,p,n),m.value.className=this.wrapClassName("collector"),m.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(m.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([h.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-readonly"),e)})),s.subscribe((e=>{a.classList.toggle(this.wrapClassName("color-scheme-dark"),e),a.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),d.subscribe((e=>{Object.keys(e).forEach((t=>{const s=e[t];null!=s&&(a.style[t]=s)}))})),r.subscribe((e=>{e&&e.appendChild(a)})),E.combine([e,i,r]).subscribe((([e,t,s])=>{if(e&&s){const{x:e,y:s,width:i,height:o}=a.getBoundingClientRect();l.setValue({x:e-t.x,y:s-t.y,width:i,height:o})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}exports.TELE_BOX_MANAGER_EVENT=void 0,(A=exports.TELE_BOX_MANAGER_EVENT||(exports.TELE_BOX_MANAGER_EVENT={})).Focused="focused",A.Blurred="blurred",A.Created="created",A.Removed="removed",A.State="state",A.Maximized="maximized",A.Minimized="minimized",A.IntrinsicMove="intrinsic_move",A.IntrinsicResize="intrinsic_resize",A.ZIndex="z_index",A.PrefersColorScheme="prefers_color_scheme",A.DarkMode="dark_mode";class R extends z{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===exports.TELE_BOX_STATE.Maximized){const{children:s}=this.$titles.firstElementChild;for(let i=s.length-1;i>=0;i-=1){const a=s[i],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.rootRect$.subscribe((t=>{const{x:s,y:i,width:a}=t;e.style.transform=`translate(${s}px, ${i}px)`,e.style.width=a+"px"})),this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===exports.TELE_BOX_STATE.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),E.combine([this.state$,this.boxes$]).subscribe((([t,s])=>{t===exports.TELE_BOX_STATE.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===s.length),1!==s.length&&e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const s=document.createElement("button");return s.className=this.wrapClassName("titles-tab"),s.textContent=t.title,s.dataset.teleBoxID=t.id,s.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&s.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(s),t._title$.reaction((e=>s.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const X=window.ResizeObserver||m.ResizeObserver;exports.DefaultTitleBar=z,exports.TeleBox=M,exports.TeleBoxCollector=O,exports.TeleBoxDragHandleType="dh",exports.TeleBoxManager=class{constructor({root:e=null,prefersColorScheme:t=exports.TELE_BOX_COLOR_SCHEME.Light,minimized:s=!1,maximized:i=!1,fence:a=!1,collector:o,namespace:r="telebox",readonly:n=!1,stageRatio:l=-1,highlightStage:h=!0}={}){this.events=new b.default,this._sideEffect=new c.SideEffectManager,this.namespace=r;const d=new E.ValManager;this._sideEffect.addDisposer((()=>d.destroy()));const m=new E.Val(e),u=new E.Val(n),x=new E.Val(s),p=new E.Val(i),_=new E.Val(a),g=new E.Val(l),f=new E.Val(h),$=new E.Val({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:v.default});this._sideEffect.addDisposer(m.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new X((e=>{var t;const s=null==(t=e[0])?void 0:t.contentRect;s&&$.setValue({x:s.x,y:s.y,width:s.width,height:s.height})}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")}))),this.boxes$=new E.Val([]),this.topBox$=new E.Val(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe((e=>{if(e.length>0){const t=e.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(t)}else this.topBox$.setValue(void 0)})));const w=window.matchMedia("(prefers-color-scheme: dark)"),T=new E.Val(!1);w&&(T.setValue(w.matches),this._sideEffect.add((()=>{const e=e=>{T.setValue(e.matches)};return w.addEventListener("change",e),()=>w.removeEventListener("change",e)})));const B=new E.Val(t);this._sideEffect.addDisposer(B.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.PrefersColorScheme,e)})));const N=E.combine([T,B],(([e,t])=>"auto"===t?e:"dark"===t)),y=E.combine([x,p],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal));this.collector=null!=o?o:new O({minimized$:x,readonly$:u,darkMode$:N,namespace:r,root$:m,rootRect$:$});const C=new V({namespace:r,rootRect$:$,ratio$:g,root$:m,highlightStage$:E.combine([f,p,x],(([e,t,s])=>e&&(s||!t)))});this._sideEffect.addDisposer((()=>C.destroy()));const L={darkMode:N,state:y,root:m,rootRect:$,stageRect:C.stageRect$};E.withReadonlyValueEnhancer(this,L,d);const z={prefersColorScheme:B,readonly:u,fence:_,minimized:x,maximized:p,stageRatio:g,highlightStage:f};E.withValueEnhancer(this,z,d);const S=this.wrapClassName("titlebar-icon-close"),M=e=>{var t;if(u.value)return;const s=e.target;if(s.tagName)for(let i=s;i;i=i.parentElement){if(i.classList&&i.classList.contains(S))return;const e=null==(t=i.dataset)?void 0:t.teleBoxID;if(e){const t=this.getBox(e);if(t)return this.focusBox(t),void this.makeBoxTop(t)}}};this._sideEffect.addEventListener(window,"mousedown",M,!0),this._sideEffect.addEventListener(window,"touchstart",M,!0),this.titleBar=new R({namespace:this.namespace,title$:E.derive(this.topBox$,(e=>(null==e?void 0:e.title)||"")),boxes$:this.boxes$,darkMode$:N,readonly$:u,state$:y,root$:m,rootRect$:$,onEvent:e=>{switch(e.type){case exports.TELE_BOX_DELEGATE_EVENT.Maximize:p.setValue(!p.value);break;case exports.TELE_BOX_DELEGATE_EVENT.Minimize:x.setValue(!0);break;case exports.TELE_BOX_EVENT.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([y.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.State,e)})),p.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Maximized,e)})),x.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Minimized,e)})),N.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case exports.TELE_BOX_STATE.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case exports.TELE_BOX_STATE.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},i=!0){const a=new M((o=n(n({zIndex:this.topBox?this.topBox.zIndex+1:100},e),i?this.smartPosition(e):{}),r={namespace:this.namespace,root$:this._root$,darkMode$:this._darkMode$,maximized$:this._maximized$,minimized$:this._minimized$,fence$:this._fence$,rootRect$:this._rootRect$,managerStageRect$:this._stageRect$,stageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,managerHighlightStage$:this._highlightStage$},t(o,s(r))));var o,r;return a.focus&&(this.focusBox(a),i&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicResize,a)})),a._zIndex$.reaction(((e,t)=>{if(this.boxes.length>0){const e=this.boxes.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(e)}t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.ZIndex,a)}))]),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Created,a),a}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,s=!1){const i=this.boxes.find((t=>t.id===e));if(i)return this.updateBox(i,t,s)}updateAll(e,t=!1){this.boxes.forEach((s=>{this.updateBox(s,e,t)}))}remove(e,t=!1){const s=this.getBoxIndex(e);if(s>=0){const e=this.boxes.slice(),i=e.splice(s,1);return this.boxes$.setValue(e),i.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,i)),i[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach((e=>e.destroy())),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,t)),t}mount(e){this._root$.setValue(e)}unmount(){this._root$.setValue(null)}destroy(e=!1){this.events.clearListeners(),this._sideEffect.flushAll(),this.removeAll(e),this.collector.destroy(),this.titleBar.destroy()}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const s=this.getBox(e);s&&(this.boxes.forEach((e=>{if(s===e){let e=!1;s.focus||(e=!0,s._focus$.setValue(!0,t)),e&&!t&&this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Focused,s)}else e.focus&&this.blurBox(e,t)})),this.titleBar.focusBox(s))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const s=this.getBox(e);s&&(s.focus&&(s._focus$.setValue(!1,t),t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,s)),this.titleBar.focusedBox===s&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,t))})),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return s=>t.every((t=>e[t]===s[t]))}updateBox(e,t,s=!1){var i,a,o,r,n,l;null==t.x&&null==t.y||e._intrinsicCoord$.setValue({x:null!=(i=t.x)?i:e.intrinsicX,y:null!=(a=t.y)?a:e.intrinsicY},s),null==t.width&&null==t.height||e._intrinsicSize$.setValue({width:null!=(o=t.width)?o:e.intrinsicWidth,height:null!=(r=t.height)?r:e.intrinsicHeight},s),null!=t.title&&e._title$.setValue(t.title),null!=t.visible&&e._visible$.setValue(t.visible,s),null!=t.resizable&&e._resizable$.setValue(t.resizable,s),null!=t.draggable&&e._draggable$.setValue(t.draggable,s),null!=t.ratio&&e._ratio$.setValue(t.ratio,s),null!=t.zIndex&&e._zIndex$.setValue(t.zIndex,s),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(l=t.minHeight)?l:e.minHeight},s)}smartPosition(e){let{x:t,y:s}=e;const{width:i=.5,height:a=.5}=e,o=this.stageRect,r=this.topBox;if(null==t){let e=o.x+20;if(r){const t=r.pxIntrinsicCoord.x+20;t+i*o.width<=o.x+o.width&&(e=t)}t=(e-o.x)/o.width}if(null==s){let e=o.y+20;if(r){const t=r.pxIntrinsicCoord.y+20;t+a*o.height<=o.y+o.height&&(e=t)}s=(e-o.y)/o.height}return{x:t,y:s,width:i,height:a}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return"string"==typeof e?this.boxes.findIndex((t=>t.id===e)):this.boxes.findIndex((t=>t===e))}getBox(e){return"string"==typeof e?this.boxes.find((t=>t.id===e)):e}};
2
2
  //# sourceMappingURL=telebox-insider.cjs.js.map