@netless/telebox-insider 1.0.0-alpha.13 → 1.0.0-alpha.16

package/dist/TeleBox/index.d.ts

@@ -200,4 +200,4 @@ export declare class TeleBox {
     wrapClassName(className: string): string;
 }
 declare type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox ? TeleBox[K] extends Function ? never : K : never;
-export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "unmountContent" | "mountFooter" | "unmountFooter" | "mountStage" | "unmountStage" | "mountStyles" | "unmountStyles" | "setStageRatio" | "setDraggable" | "setResizable" | "setHighlightStage" | "setTitle" | "setRatio" | "setVisible" | "handleTrackStart">;
+export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "unmountContent" | "mountFooter" | "unmountFooter" | "mountStage" | "unmountStage" | "mountStyles" | "unmountStyles" | "setStageRatio" | "setDraggable" | "setResizable" | "setHighlightStage" | "setTitle" | "setRatio" | "setVisible" | "handleTrackStart" | "onValChanged">;

package/dist/TeleBoxCollector/index.d.ts

@@ -11,7 +11,6 @@ export interface TeleBoxCollectorConfig {
     minimized$: Val<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
 }
 declare type ValConfig = {
     styles: Val<TeleStyles>;
@@ -28,7 +27,7 @@ declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & Readonly
 export interface TeleBoxCollector extends CombinedValEnhancedResult {
 }
 export declare class TeleBoxCollector {
-    constructor({ minimized$, readonly$, darkMode$, rootRect$, namespace, styles, root$, }: TeleBoxCollectorConfig);
+    constructor({ minimized$, readonly$, darkMode$, namespace, styles, root$, }: TeleBoxCollectorConfig);
     readonly namespace: string;
     protected readonly _sideEffect: SideEffectManager;
     destroy(): void;

package/dist/telebox-insider.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,n=(e,t)=>{for(var s in t||(t={}))a.call(t,s)&&r(e,s,t[s]);if(i)for(var s of i(t))o.call(t,s)&&r(e,s,t[s]);return e};Object.defineProperty(exports,"__esModule",{value:!0}),exports[Symbol.toStringTag]="Module";var l=require("emittery"),h=require("stylefire"),d=require("shallowequal"),c=require("side-effect-manager"),E=require("value-enhancer"),u=require("@juggle/resize-observer");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x,p,g,_,f,b=m(l),$=m(h),v=m(d);exports.TELE_BOX_COLOR_SCHEME=void 0,(x=exports.TELE_BOX_COLOR_SCHEME||(exports.TELE_BOX_COLOR_SCHEME={})).Light="light",x.Dark="dark",x.Auto="auto",exports.TELE_BOX_STATE=void 0,(p=exports.TELE_BOX_STATE||(exports.TELE_BOX_STATE={})).Normal="normal",p.Minimized="minimized",p.Maximized="maximized",exports.TELE_BOX_EVENT=void 0,(g=exports.TELE_BOX_EVENT||(exports.TELE_BOX_EVENT={})).DarkMode="dark_mode",g.PrefersColorScheme="prefers_color_scheme",g.Close="close",g.Focus="focus",g.Blur="blur",g.IntrinsicMove="intrinsic_move",g.IntrinsicResize="intrinsic_resize",g.ZIndex="z_index",g.State="state",g.Minimized="minimized",g.Maximized="maximized",g.Readonly="readonly",g.Destroyed="destroyed",exports.TELE_BOX_DELEGATE_EVENT=void 0,(_=exports.TELE_BOX_DELEGATE_EVENT||(exports.TELE_BOX_DELEGATE_EVENT={})).Close="close",_.Maximize="maximize",_.Minimize="minimize",exports.TELE_BOX_RESIZE_HANDLE=void 0,(f=exports.TELE_BOX_RESIZE_HANDLE||(exports.TELE_BOX_RESIZE_HANDLE={})).North="n",f.South="s",f.West="w",f.East="e",f.NorthWest="nw",f.NorthEast="ne",f.SouthEast="se",f.SouthWest="sw";function w(e,t,s){return Math.min(Math.max(e,t),s)}function T(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function B(e){return e.touches?e.touches[0]:e}let N=1;function C(){return"New Box "+N++}function y(e){return Boolean(e)}function L(e){return!e}class S{constructor({readonly$:e,state$:t,title$:s,buttons:i,onEvent:a,onDragStart:o,namespace:r="telebox"}){this.sideEffect=new c.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now();s-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=s,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now(),{clientX:i=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};s-this.lastTitleBarTouch.timestamp<=500?Math.abs(i-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=s,this.lastTitleBarTouch.clientX=i,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=s,this.onEvent=a,this.onDragStart=o,this.namespace=r,this.buttons=i||[{type:exports.TELE_BOX_DELEGATE_EVENT.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:exports.TELE_BOX_DELEGATE_EVENT.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===exports.TELE_BOX_STATE.Maximized},{type:exports.TELE_BOX_DELEGATE_EVENT.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const s=document.createElement("div");s.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const i=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=i,a.dataset.teleTitleBarNoDblClick="true",s.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,i)=>{var a;t.isActive&&(null==(a=s.children[i])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(s,"click",(e=>{var t;if(this.readonly$.value)return;const s=e.target,i=Number(null==(t=s.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(i)&&i<this.buttons.length){T(e);const t=this.buttons[i];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(s)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class z{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 V=window.ResizeObserver||u.ResizeObserver;class M{constructor({id:e=c.genUID(),title:t=C(),namespace:s="telebox",visible:i=!0,width:a=.5,height:o=.5,minWidth:r=0,minHeight:n=0,x:l=.1,y:h=.1,resizable:d=!0,draggable:u=!0,ratio:m=-1,focus:x=!1,zIndex:p=100,stageRatio:g=null,titleBar:_,content:f,stage:$,footer:T,styles:B,highlightStage:N=null,darkMode$:y,fence$:L,minimized$:V,maximized$:M,readonly$:A,root$:O,rootRect$:R,managerStageRect$:X,managerStageRatio$:D,collectorRect$:I,managerHighlightStage$:k}){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 H=new E.ValManager;this._sideEffect.addDisposer((()=>H.destroy()));const G=new E.Val(t),Z=new E.Val(i),W=new E.Val(d),Y=new E.Val(u),P=new E.Val(m),j=new E.Val(p),F=new E.Val(x),q=new E.Val(f),J=new E.Val($),Q=new E.Val(T),U=new E.Val(B),K=E.combine([V,M],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal)),ee=new E.Val({width:w(r,0,1),height:w(n,0,1)},{compare:v.default}),te=E.combine([ee,X],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:v.default}),se=new E.Val({width:a,height:o},{compare:v.default});this._sideEffect.addDisposer(ee.reaction(((e,t)=>{se.setValue({width:Math.max(a,e.width),height:Math.max(o,e.height)},t)})));const ie=new E.Val({x:l,y:h},{compare:v.default}),ae=E.combine([se,X],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:v.default}),oe=E.combine([ie,X],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:v.default}),re=new E.Val(N),ne=E.combine([re,k],(([e,t])=>null!=e?e:t)),le=new E.Val(null),he=new E.Val(R.value,{compare:v.default}),de=new E.Val(g),ce=new z({namespace:s,root$:le,rootRect$:he,ratio$:E.combine([de,D],(([e,t])=>null!=e?e:t)),highlightStage$:ne});this._sideEffect.addDisposer((()=>ce.destroy()));const Ee={darkMode:y,fence:L,minimized:V,maximized:M,readonly:A,rootRect:R,managerStageRect:X,collectorRect:I};E.withReadonlyValueEnhancer(this,Ee);const ue={zIndex:j,focus:F,$userContent:q,$userStage:J,$userFooter:Q,$userStyles:U,state:K,minSize:ee,pxMinSize:te,intrinsicSize:se,intrinsicCoord:ie,pxIntrinsicSize:ae,pxIntrinsicCoord:oe,highlightStage:ne,boxHighlightStage:re,contentRect:he,contentStageRect:ce.stageRect$};E.withReadonlyValueEnhancer(this,ue,H);const me={title:G,visible:Z,resizable:W,draggable:Y,ratio:P,stageRatio:de};E.withValueEnhancer(this,me,H),this.titleBar=_||new S({readonly$:A,state$:K,title$:G,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(P.subscribe((e=>{e>0&&this.transform(oe.value.x,oe.value.y,ae.value.width,ae.value.height,!0)}))),this._sideEffect.addDisposer(L.subscribe((e=>{e&&this.move(oe.value.x,oe.value.y,!0)}))),this.$box=this.render(),le.setValue(this.$content.parentElement);const xe=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,s)=>{s||this.events.emit(t,e)})))};xe(y,exports.TELE_BOX_EVENT.DarkMode),xe(A,exports.TELE_BOX_EVENT.Readonly),xe(j,exports.TELE_BOX_EVENT.ZIndex),xe(V,exports.TELE_BOX_EVENT.Minimized),xe(M,exports.TELE_BOX_EVENT.Maximized),xe(K,exports.TELE_BOX_EVENT.State),xe(se,exports.TELE_BOX_EVENT.IntrinsicResize),xe(ie,exports.TELE_BOX_EVENT.IntrinsicMove),this._sideEffect.addDisposer([Z.reaction(((e,t)=>{t||e||this.events.emit(exports.TELE_BOX_EVENT.Close)})),F.reaction(((e,t)=>{t||this.events.emit(e?exports.TELE_BOX_EVENT.Focus:exports.TELE_BOX_EVENT.Blur)})),O.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,0-r.width+20,0+s.width-20),a=w(t,0,0+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)}mountStage(e){this._$userStage$.setValue(e)}unmountStage(){this._$userStage$.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=y)=>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{width:t,height:i}=e?this.rootRect:s;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 V((()=>{const e=n.getBoundingClientRect();this._contentRect$.setValue({x:e.x,y:e.y,width:e.width,height:e.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)}))})),this._sideEffect.add((()=>{let e;return this._$userStage$.subscribe((t=>{var s;if(e&&e.remove(),e=t,t){if(!this.$stage){const e=document.createElement("div");this.$stage=e,e.className=this.wrapClassName("content-stage"),this._sideEffect.addDisposer(this._contentStageRect$.subscribe((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")})),"content-stage-rect"),n.appendChild(e)}this.$stage.parentElement||n.appendChild(this.$stage),this.$stage.appendChild(t)}else(null==(s=this.$stage)?void 0:s.parentElement)&&this.$stage.remove()}))})),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:u}=this.pxIntrinsicCoord,{width:m,height:x}=this.pxIntrinsicSize;switch(a){case exports.TELE_BOX_RESIZE_HANDLE.North:u=r+c,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.South:x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.West:E=o+i,m=n-i;break;case exports.TELE_BOX_RESIZE_HANDLE.East:m=n+i;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthWest:E=o+i,u=r+c,m=n-i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthEast:u=r+c,m=n+i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthEast:m=n+i,x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthWest:E=o+i,m=n-i,x=l+c;break;default:return void this.move(o+i,r+c)}this.transform(E,u,m,x)},E=e=>{a=void 0,i&&(T(e),this.$box.classList.toggle(s,!1),this._sideEffect.flush(t),i.remove())},u=e=>{var u;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==exports.TELE_BOX_STATE.Normal)return;const m=e.target;if(null==(u=m.dataset)?void 0:u.teleBoxHandle){T(e),({x:o,y:r}=this.pxIntrinsicCoord),({width:n,height:l}=this.pxIntrinsicSize),({pageX:h,pageY:d}=B(e)),a=m.dataset.teleBoxHandle,i||(i=document.createElement("div"));const u=a?this.wrapClassName(`cursor-${a}`):"";i.className=this.wrapClassName("track-mask"+(u?` ${u}`:"")),this.$box.appendChild(i),this.$box.classList.add(s),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",E),window.addEventListener("touchend",E,{passive:!1}),window.addEventListener("touchcancel",E,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",E),window.removeEventListener("touchend",E),window.removeEventListener("touchcancel",E)})),t)}};this._handleTrackStart=u,this._sideEffect.addEventListener(e,"mousedown",u,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",u,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(exports.TELE_BOX_EVENT.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var A;class O{constructor({minimized$:e,readonly$:t,darkMode$:s,rootRect$:i,namespace:a="telebox",styles: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),u=new E.Val(document.createElement("button")),m={styles:d,$collector:u};E.withValueEnhancer(this,m,n);const x={root:r};E.withReadonlyValueEnhancer(this,x);const p={rect:l,visible:h};E.withReadonlyValueEnhancer(this,p,n),u.value.className=this.wrapClassName("collector"),u.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(u.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 S{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===exports.TELE_BOX_STATE.Maximized){const{children:s}=this.$titles.firstElementChild;for(let i=s.length-1;i>=0;i-=1){const a=s[i],o=null==(t=a.dataset)?void 0:t.teleBoxID;o&&(e&&o===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&o===this.focusedBox.id&&a.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}render(){if(this.$titleBar)return this.$titleBar;const e=super.render();e.classList.add(this.wrapClassName("max-titlebar")),this.sideEffect.addDisposer([this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===exports.TELE_BOX_STATE.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),E.combine([this.state$,this.boxes$]).subscribe((([t,s])=>{t===exports.TELE_BOX_STATE.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===s.length),1!==s.length&&e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const s=document.createElement("button");return s.className=this.wrapClassName("titles-tab"),s.textContent=t.title,s.dataset.teleBoxID=t.id,s.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&s.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(s),t._title$.reaction((e=>s.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const X=window.ResizeObserver||u.ResizeObserver;exports.DefaultTitleBar=S,exports.TeleBox=M,exports.TeleBoxCollector=O,exports.TeleBoxDragHandleType="dh",exports.TeleBoxManager=class{constructor({root:e=null,prefersColorScheme:t=exports.TELE_BOX_COLOR_SCHEME.Light,minimized:s=!1,maximized:i=!1,fence:a=!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 u=new E.Val(e),m=new E.Val(n),x=new E.Val(s),p=new E.Val(i),g=new E.Val(a),_=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(u.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new X((()=>{const t=e.getBoundingClientRect();$.setValue({x:t.x,y:t.y,width:t.width,height:t.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)),C=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$:m,darkMode$:N,namespace:r,root$:u,rootRect$:$});const y=new z({namespace:r,rootRect$:$,ratio$:_,root$:u,highlightStage$:E.combine([f,p,x],(([e,t,s])=>e&&(s||!t)))});this._sideEffect.addDisposer((()=>y.destroy()));const L={darkMode:N,state:C,root:u,rootRect:$,stageRect:y.stageRect$};E.withReadonlyValueEnhancer(this,L,d);const S={prefersColorScheme:B,readonly:m,fence:g,minimized:x,maximized:p,stageRatio:_,highlightStage:f};E.withValueEnhancer(this,S,d);const V=this.wrapClassName("titlebar-icon-close"),M=e=>{var t;if(m.value)return;const s=e.target;if(s.tagName)for(let i=s;i;i=i.parentElement){if(i.classList&&i.classList.contains(V))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$:m,state$:C,root$:u,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([C.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$,managerStageRatio$: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),void 0!==t.stageRatio&&e.setStageRatio(t.stageRatio,s),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(l=t.minHeight)?l:e.minHeight},s)}smartPosition(e){let{x:t,y:s}=e;const{width:i=.5,height:a=.5}=e,o=this.stageRect,r=this.topBox;if(null==t){let e=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}};
+"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,n=(e,t)=>{for(var s in t||(t={}))a.call(t,s)&&r(e,s,t[s]);if(i)for(var s of i(t))o.call(t,s)&&r(e,s,t[s]);return e};Object.defineProperty(exports,"__esModule",{value:!0}),exports[Symbol.toStringTag]="Module";var l=require("emittery"),h=require("stylefire"),d=require("shallowequal"),c=require("side-effect-manager"),E=require("value-enhancer"),u=require("@juggle/resize-observer");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x,p,g,_,f,b=m(l),$=m(h),v=m(d);exports.TELE_BOX_COLOR_SCHEME=void 0,(x=exports.TELE_BOX_COLOR_SCHEME||(exports.TELE_BOX_COLOR_SCHEME={})).Light="light",x.Dark="dark",x.Auto="auto",exports.TELE_BOX_STATE=void 0,(p=exports.TELE_BOX_STATE||(exports.TELE_BOX_STATE={})).Normal="normal",p.Minimized="minimized",p.Maximized="maximized",exports.TELE_BOX_EVENT=void 0,(g=exports.TELE_BOX_EVENT||(exports.TELE_BOX_EVENT={})).DarkMode="dark_mode",g.PrefersColorScheme="prefers_color_scheme",g.Close="close",g.Focus="focus",g.Blur="blur",g.IntrinsicMove="intrinsic_move",g.IntrinsicResize="intrinsic_resize",g.ZIndex="z_index",g.State="state",g.Minimized="minimized",g.Maximized="maximized",g.Readonly="readonly",g.Destroyed="destroyed",exports.TELE_BOX_DELEGATE_EVENT=void 0,(_=exports.TELE_BOX_DELEGATE_EVENT||(exports.TELE_BOX_DELEGATE_EVENT={})).Close="close",_.Maximize="maximize",_.Minimize="minimize",exports.TELE_BOX_RESIZE_HANDLE=void 0,(f=exports.TELE_BOX_RESIZE_HANDLE||(exports.TELE_BOX_RESIZE_HANDLE={})).North="n",f.South="s",f.West="w",f.East="e",f.NorthWest="nw",f.NorthEast="ne",f.SouthEast="se",f.SouthWest="sw";function w(e,t,s){return Math.min(Math.max(e,t),s)}function T(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function B(e){return e.touches?e.touches[0]:e}let N=1;function C(){return"New Box "+N++}function L(e){return Boolean(e)}function y(e){return!e}class S{constructor({readonly$:e,state$:t,title$:s,buttons:i,onEvent:a,onDragStart:o,namespace:r="telebox"}){this.sideEffect=new c.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now();s-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=s,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;T(e);const s=Date.now(),{clientX:i=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};s-this.lastTitleBarTouch.timestamp<=500?Math.abs(i-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=s,this.lastTitleBarTouch.clientX=i,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=s,this.onEvent=a,this.onDragStart=o,this.namespace=r,this.buttons=i||[{type:exports.TELE_BOX_DELEGATE_EVENT.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:exports.TELE_BOX_DELEGATE_EVENT.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===exports.TELE_BOX_STATE.Maximized},{type:exports.TELE_BOX_DELEGATE_EVENT.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const s=document.createElement("div");s.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const i=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=i,a.dataset.teleTitleBarNoDblClick="true",s.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,i)=>{var a;t.isActive&&(null==(a=s.children[i])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(s,"click",(e=>{var t;if(this.readonly$.value)return;const s=e.target,i=Number(null==(t=s.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(i)&&i<this.buttons.length){T(e);const t=this.buttons[i];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(s)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class z{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 V=window.ResizeObserver||u.ResizeObserver;class M{constructor({id:e=c.genUID(),title:t=C(),namespace:s="telebox",visible:i=!0,width:a=.5,height:o=.5,minWidth:r=0,minHeight:n=0,x:l=.1,y:h=.1,resizable:d=!0,draggable:u=!0,ratio:m=-1,focus:x=!1,zIndex:p=100,stageRatio:g=null,titleBar:_,content:f,stage:$,footer:T,styles:B,highlightStage:N=null,darkMode$:L,fence$:y,minimized$:V,maximized$:M,readonly$:A,root$:O,rootRect$:R,managerStageRect$:X,managerStageRatio$:D,collectorRect$:I,managerHighlightStage$:k}){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 H=new E.ValManager;this._sideEffect.addDisposer((()=>H.destroy()));const G=new E.Val(t),Z=new E.Val(i),W=new E.Val(d),Y=new E.Val(u),P=new E.Val(m),j=new E.Val(p),F=new E.Val(x),q=new E.Val(f),J=new E.Val($),Q=new E.Val(T),U=new E.Val(B),K=E.combine([V,M],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal)),ee=new E.Val({width:w(r,0,1),height:w(n,0,1)},{compare:v.default}),te=E.combine([ee,X],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:v.default}),se=new E.Val({width:a,height:o},{compare:v.default});this._sideEffect.addDisposer(ee.reaction(((e,t)=>{se.setValue({width:Math.max(a,e.width),height:Math.max(o,e.height)},t)})));const ie=new E.Val({x:l,y:h},{compare:v.default}),ae=E.combine([se,X],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:v.default}),oe=E.combine([ie,X],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:v.default}),re=new E.Val(N),ne=E.combine([re,k],(([e,t])=>null!=e?e:t)),le=new E.Val(null),he=new E.Val(R.value,{compare:v.default}),de=new E.Val(g),ce=new z({namespace:s,root$:le,rootRect$:he,ratio$:E.combine([de,D],(([e,t])=>null!=e?e:t)),highlightStage$:ne});this._sideEffect.addDisposer((()=>ce.destroy()));const Ee={darkMode:L,fence:y,minimized:V,maximized:M,readonly:A,rootRect:R,managerStageRect:X,collectorRect:I};E.withReadonlyValueEnhancer(this,Ee);const ue={zIndex:j,focus:F,$userContent:q,$userStage:J,$userFooter:Q,$userStyles:U,state:K,minSize:ee,pxMinSize:te,intrinsicSize:se,intrinsicCoord:ie,pxIntrinsicSize:ae,pxIntrinsicCoord:oe,highlightStage:ne,boxHighlightStage:re,contentRect:he,contentStageRect:ce.stageRect$};E.withReadonlyValueEnhancer(this,ue,H);const me={title:G,visible:Z,resizable:W,draggable:Y,ratio:P,stageRatio:de};E.withValueEnhancer(this,me,H),this.titleBar=_||new S({readonly$:A,state$:K,title$:G,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(P.subscribe((e=>{e>0&&this.transform(oe.value.x,oe.value.y,ae.value.width,ae.value.height,!0)}))),this._sideEffect.addDisposer(y.subscribe((e=>{e&&this.move(oe.value.x,oe.value.y,!0)}))),this.$box=this.render(),le.setValue(this.$content.parentElement);const xe=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,s)=>{s||this.events.emit(t,e)})))};xe(L,exports.TELE_BOX_EVENT.DarkMode),xe(A,exports.TELE_BOX_EVENT.Readonly),xe(j,exports.TELE_BOX_EVENT.ZIndex),xe(V,exports.TELE_BOX_EVENT.Minimized),xe(M,exports.TELE_BOX_EVENT.Maximized),xe(K,exports.TELE_BOX_EVENT.State),xe(se,exports.TELE_BOX_EVENT.IntrinsicResize),xe(ie,exports.TELE_BOX_EVENT.IntrinsicMove),this._sideEffect.addDisposer([Z.reaction(((e,t)=>{t||e||this.events.emit(exports.TELE_BOX_EVENT.Close)})),F.reaction(((e,t)=>{t||this.events.emit(e?exports.TELE_BOX_EVENT.Focus:exports.TELE_BOX_EVENT.Blur)})),O.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,0-r.width+20,0+s.width-20),a=w(t,0,0+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)}mountStage(e){this._$userStage$.setValue(e)}unmountStage(){this._$userStage$.setValue(void 0)}mountFooter(e){this._$userFooter$.setValue(e)}unmountFooter(){this._$userFooter$.setValue(void 0)}getUserStyles(){return this.$userStyles}mountStyles(e){let t;"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this._$userStyles$.setValue(t)}unmountStyles(){this._$userStyles$.setValue(void 0)}setHighlightStage(e){this._boxHighlightStage$.setValue(e)}render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,s,i=L)=>this._sideEffect.add((()=>{const a=this.wrapClassName(s);return t.subscribe((t=>{e.classList.toggle(a,i(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",y),e(this.$box,this._resizable$,"no-resize",y),e(this.$box,this._focus$,"blur",y),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",y),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),s="box-maximized-timer";return this._state$.subscribe((i=>{this.$box.classList.toggle(e,i===exports.TELE_BOX_STATE.Minimized),i===exports.TELE_BOX_STATE.Maximized?(this._sideEffect.flush(s),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,s)}))})),this._sideEffect.addDisposer(this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"}))),this._sideEffect.addDisposer(this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))),this.$box.dataset.teleBoxID=this.id;const t=$.default(this.$box),s=E.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,s,i,a])=>{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{width:t,height:i}=e?this.rootRect:s;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 V((()=>{const e=n.getBoundingClientRect();this._contentRect$.setValue({x:0,y:0,width:e.width,height:e.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)}))})),this._sideEffect.add((()=>{let e;return this._$userStage$.subscribe((t=>{var s;if(e&&e.remove(),e=t,t){if(!this.$stage){const e=document.createElement("div");this.$stage=e,e.className=this.wrapClassName("content-stage"),this._sideEffect.addDisposer(this._contentStageRect$.subscribe((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")})),"content-stage-rect"),n.appendChild(e)}this.$stage.parentElement||n.appendChild(this.$stage),this.$stage.appendChild(t)}else(null==(s=this.$stage)?void 0:s.parentElement)&&this.$stage.remove()}))})),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:u}=this.pxIntrinsicCoord,{width:m,height:x}=this.pxIntrinsicSize;switch(a){case exports.TELE_BOX_RESIZE_HANDLE.North:u=r+c,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.South:x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.West:E=o+i,m=n-i;break;case exports.TELE_BOX_RESIZE_HANDLE.East:m=n+i;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthWest:E=o+i,u=r+c,m=n-i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthEast:u=r+c,m=n+i,x=l-c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthEast:m=n+i,x=l+c;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthWest:E=o+i,m=n-i,x=l+c;break;default:return void this.move(o+i,r+c)}this.transform(E,u,m,x)},E=e=>{a=void 0,i&&(T(e),this.$box.classList.toggle(s,!1),this._sideEffect.flush(t),i.remove())},u=e=>{var u;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==exports.TELE_BOX_STATE.Normal)return;const m=e.target;if(null==(u=m.dataset)?void 0:u.teleBoxHandle){T(e),({x:o,y:r}=this.pxIntrinsicCoord),({width:n,height:l}=this.pxIntrinsicSize),({pageX:h,pageY:d}=B(e)),a=m.dataset.teleBoxHandle,i||(i=document.createElement("div"));const u=a?this.wrapClassName(`cursor-${a}`):"";i.className=this.wrapClassName("track-mask"+(u?` ${u}`:"")),this.$box.appendChild(i),this.$box.classList.add(s),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",E),window.addEventListener("touchend",E,{passive:!1}),window.addEventListener("touchcancel",E,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",E),window.removeEventListener("touchend",E),window.removeEventListener("touchcancel",E)})),t)}};this._handleTrackStart=u,this._sideEffect.addEventListener(e,"mousedown",u,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",u,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(exports.TELE_BOX_EVENT.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var A;class O{constructor({minimized$:e,readonly$:t,darkMode$:s,namespace:i="telebox",styles:a={},root$:o}){this._sideEffect=new c.SideEffectManager,this.namespace=i;const r=new E.ValManager;this._sideEffect.addDisposer((()=>r.destroy()));const n=new E.Val(void 0),l=E.derive(e),h=new E.Val(a),d=new E.Val(document.createElement("button")),u={styles:h,$collector:d};E.withValueEnhancer(this,u,r);const m={root:o};E.withReadonlyValueEnhancer(this,m);const x={rect:n,visible:l};E.withReadonlyValueEnhancer(this,x,r),d.value.className=this.wrapClassName("collector"),d.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(d.subscribe((i=>{this._sideEffect.addEventListener(i,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([l.subscribe((e=>{i.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{i.classList.toggle(this.wrapClassName("collector-readonly"),e)})),s.subscribe((e=>{i.classList.toggle(this.wrapClassName("color-scheme-dark"),e),i.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),h.subscribe((e=>{Object.keys(e).forEach((t=>{const s=e[t];null!=s&&(i.style[t]=s)}))})),o.subscribe((e=>{e&&e.appendChild(i)})),E.combine([e,o]).subscribe((([e,t])=>{if(e&&t){const{x:e,y:s,width:a,height:o}=i.getBoundingClientRect(),r=t.getBoundingClientRect();n.setValue({x:e-r.x,y:s-r.y,width:a,height:o})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}exports.TELE_BOX_MANAGER_EVENT=void 0,(A=exports.TELE_BOX_MANAGER_EVENT||(exports.TELE_BOX_MANAGER_EVENT={})).Focused="focused",A.Blurred="blurred",A.Created="created",A.Removed="removed",A.State="state",A.Maximized="maximized",A.Minimized="minimized",A.IntrinsicMove="intrinsic_move",A.IntrinsicResize="intrinsic_resize",A.ZIndex="z_index",A.PrefersColorScheme="prefers_color_scheme",A.DarkMode="dark_mode";class R extends S{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===exports.TELE_BOX_STATE.Maximized){const{children:s}=this.$titles.firstElementChild;for(let i=s.length-1;i>=0;i-=1){const a=s[i],o=null==(t=a.dataset)?void 0:t.teleBoxID;o&&(e&&o===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&o===this.focusedBox.id&&a.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}render(){if(this.$titleBar)return this.$titleBar;const e=super.render();e.classList.add(this.wrapClassName("max-titlebar")),this.sideEffect.addDisposer([this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===exports.TELE_BOX_STATE.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),E.combine([this.state$,this.boxes$]).subscribe((([t,s])=>{t===exports.TELE_BOX_STATE.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===s.length),1!==s.length&&e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const s=document.createElement("button");return s.className=this.wrapClassName("titles-tab"),s.textContent=t.title,s.dataset.teleBoxID=t.id,s.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&s.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(s),t._title$.reaction((e=>s.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const X=window.ResizeObserver||u.ResizeObserver;exports.DefaultTitleBar=S,exports.TeleBox=M,exports.TeleBoxCollector=O,exports.TeleBoxDragHandleType="dh",exports.TeleBoxManager=class{constructor({root:e=null,prefersColorScheme:t=exports.TELE_BOX_COLOR_SCHEME.Light,minimized:s=!1,maximized:i=!1,fence:a=!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 u=new E.Val(e),m=new E.Val(n),x=new E.Val(s),p=new E.Val(i),g=new E.Val(a),_=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(u.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new X((()=>{const t=e.getBoundingClientRect();$.setValue({x:0,y:0,width:t.width,height:t.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)),C=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$:m,darkMode$:N,namespace:r,root$:u});const L=new z({namespace:r,rootRect$:$,ratio$:_,root$:u,highlightStage$:E.combine([f,p,x],(([e,t,s])=>e&&(s||!t)))});this._sideEffect.addDisposer((()=>L.destroy()));const y={darkMode:N,state:C,root:u,rootRect:$,stageRect:L.stageRect$};E.withReadonlyValueEnhancer(this,y,d);const S={prefersColorScheme:B,readonly:m,fence:g,minimized:x,maximized:p,stageRatio:_,highlightStage:f};E.withValueEnhancer(this,S,d);const V=this.wrapClassName("titlebar-icon-close"),M=e=>{var t;if(m.value)return;const s=e.target;if(s.tagName)for(let i=s;i;i=i.parentElement){if(i.classList&&i.classList.contains(V))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$:m,state$:C,root$:u,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([C.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$,managerStageRatio$: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),void 0!==t.stageRatio&&e.setStageRatio(t.stageRatio,s),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(l=t.minHeight)?l:e.minHeight},s)}smartPosition(e){let{x:t,y:s}=e;const{width:i=.5,height:a=.5}=e,o=this.stageRect,r=this.topBox;if(null==t){let e=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}};
 //# sourceMappingURL=telebox-insider.cjs.js.map